setup

Author: AmanuelCh

package-lock.json

@@ -10,12 +10,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.3.28",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
+    "react-router-dom": "^6.26.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "tailwind-merge": "^2.5.2"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",

package.json

@@ -1,9 +1,28 @@
-function App() {
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import CategoryList from './components/CategoryList';
+import TopicList from './components/TopicList';
+import MarkdownViewer from './components/MarkdownViewer';
+
+const App = () => {
   return (
-    <>
-      <div className='mt-4 text-3xl'>Gopher Notes!</div>
-    </>
+    <Router>
+      <div className='absolute top-0 z-[-2] h-screen w-screen bg-neutral-950 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]'></div>
+      <Routes>
+        <Route
+          path='/'
+          element={<CategoryList />}
+        />
+        <Route
+          path='/:category'
+          element={<TopicList />}
+        />
+        <Route
+          path='/:category/:topic'
+          element={<MarkdownViewer />}
+        />
+      </Routes>
+    </Router>
   );
-}
+};
 
 export default App;

src/App.css

@@ -0,0 +1,23 @@
+import { Link } from 'react-router-dom';
+
+const categories = [
+  { name: 'Intro', path: '/intro' },
+  { name: 'Variables', path: '/variables' },
+];
+
+const CategoryList = () => {
+  return (
+    <div>
+      <h1>Categories</h1>
+      <ul>
+        {categories.map((category) => (
+          <li key={category.name}>
+            <Link to={category.path}>{category.name.split('-').join(' ')}</Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default CategoryList;

src/App.tsx

@@ -0,0 +1,96 @@
+import { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { useParams } from 'react-router-dom';
+
+import { HoverEffect } from './ui/card-hover-effect';
+
+const MarkdownViewer = () => {
+  const { category, topic } = useParams();
+  const [markdown, setMarkdown] = useState('');
+
+  useEffect(() => {
+    const fetchMarkdown = async () => {
+      try {
+        const module = await import(`../data/${category}/${topic}.md`);
+        setMarkdown(module.default);
+      } catch (error) {
+        console.error('Error fetching markdown:', error);
+      }
+    };
+
+    fetchMarkdown();
+  }, [category, topic]);
+
+  return (
+    <div className='bg-slate-900 min-h-[100vh]'>
+      <div className='w-11/12 mx-auto py-4 leading-relaxed '>
+        <ReactMarkdown
+          children={markdown}
+          components={{
+            code({ node, inline, className, children, ...props }) {
+              const match = /language-(\w+)/.exec(className || '');
+              return !inline && match ? (
+                <SyntaxHighlighter
+                  style={dracula}
+                  language={match[1]}
+                  PreTag='div'
+                  {...props}
+                >
+                  {String(children).replace(/\n$/, '')}
+                </SyntaxHighlighter>
+              ) : (
+                <code
+                  className={className}
+                  {...props}
+                >
+                  {children}
+                </code>
+              );
+            },
+          }}
+        />
+
+        <div className='px-8'>
+          <HoverEffect items={projects} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const projects = [
+  {
+    title: 'Stripe',
+    description:
+      'A technology company that builds economic infrastructure for the internet.',
+  },
+  {
+    title: 'Netflix',
+    description:
+      'A streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries, and more on thousands of internet-connected devices.',
+  },
+  {
+    title: 'Google',
+    description:
+      'A multinational technology company that specializes in Internet-related services and products.',
+  },
+  {
+    title: 'Meta',
+    description:
+      "A technology company that focuses on building products that advance Facebook's mission of bringing the world closer together.",
+  },
+  {
+    title: 'Amazon',
+    description:
+      'A multinational technology company focusing on e-commerce, cloud computing, digital streaming, and artificial intelligence.',
+  },
+  {
+    title: 'Microsoft',
+    description:
+      'A multinational technology company that develops, manufactures, licenses, supports, and sells computer software, consumer electronics, personal computers, and related services.',
+  },
+];
+
+export default MarkdownViewer;

src/assets/fonts/Inter-Bold.otf

@@ -0,0 +1,28 @@
+import { Link, useParams } from 'react-router-dom';
+
+const topics = {
+  intro: ['what-is-go', 'setting-up-go', 'basic-syntax'],
+  variables: ['declaring-variables', 'variable-types', 'constants'],
+};
+
+const TopicList = () => {
+  const { category } = useParams<{ category: string }>();
+  const topicList = topics[category as keyof typeof topics] || [];
+
+  return (
+    <div>
+      <h1>{category}</h1>
+      <ul>
+        {topicList.map((topic) => (
+          <li key={topic}>
+            <Link to={`/${category}/${topic}`}>
+              {topic.split('-').join(' ')}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default TopicList;