merge with main

package.json

@@ -32,9 +32,14 @@
     "prettier": "^3.3.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-stringify": "^10.0.0",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.0",
     "semver": "",
+    "unified": "^11.0.5",
     "wasm": "^1.0.0",
     "wasm-pack": "^0.13.0"
   },

src/app/[[...path]]/page.tsx

@@ -0,0 +1,25 @@
+import { File } from '@/components/file'
+
+export const generateStaticParams = async () => {
+    const paths = [{
+        path: [''],
+    }]
+
+    return paths
+}
+
+interface PageProps {
+    params: {
+        path: string[]
+    }
+}
+
+const Page = ({ params }: PageProps) => {
+  const { path } = params
+  console.log(path)
+  return (
+    <File />
+  )
+}
+
+export default Page

src/app/p/[slug]/page.tsx

@@ -7,9 +7,9 @@ import { glob } from 'glob';
 export const dynamicParams = false;
 
 export function generateStaticParams() {
-  const projectFiles = glob.sync('public/p/*.mdx');
+  const projectFiles = glob.sync('public/p/*.md');
   return projectFiles.map((file) => {
-    const slug = path.basename(file, '.mdx');
+    const slug = path.basename(file, '.md');
     return { slug };
   });
 }
@@ -22,7 +22,7 @@ interface ProjectPageProps {
 
 const Page = async ({ params }: ProjectPageProps) => {
   const { slug } = params;
-  const filePath = path.join(process.cwd(), 'public', 'p', `${slug}.mdx`);
+  const filePath = path.join(process.cwd(), 'public', 'p', `${slug}.md`);
   const fileContent = fs.readFileSync(filePath, 'utf8');
   return (
     <div>

src/components/file.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { MDXRemote, type MDXRemoteSerializeResult } from 'next-mdx-remote';
+import { serialize } from 'next-mdx-remote/serialize';
+import remarkHtml from 'remark-html';
+
+import { useShell } from '@/providers/shell'
+
+export const File = () => {
+  const router = useRouter()
+  const shell = useShell()
+
+  const [path, setPath] = React.useState('')
+  const [content, setContent] = React.useState('')
+
+  // React.useEffect(() => {
+  //   const setSource = async () => {
+  //     const mdxSource = await serialize(content, {
+  //       mdxOptions: {
+  //         remarkPlugins: [remarkHtml],
+  //         rehypePlugins: [],
+  //       },
+  //     });
+  //     setMdxSource(mdxSource);
+  //   }
+  //   setSource();
+  // }, [])
+  // if (!mdxSource) return null;
+  // return (
+  //   <MDXRemote {...mdxSource} />
+  // );
+  React.useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1)
+      setPath(hash)
+      loadFileContent(hash)
+    }
+
+    handleHashChange()
+
+    window.addEventListener('hashchange', handleHashChange)
+    return () => window.removeEventListener('hashchange', handleHashChange)
+  }, [])
+
+  const loadFileContent = async (path: string) => {
+    setContent(path)
+  }
+
+  const renderContent = () => {
+    if (content === '') {
+      return <div>loading...</div>
+    }
+
+    return <div>{content}</div>
+  }
+
+  return (
+    // <div>
+    //   {renderContent()}
+    // </div>
+    <div className="w-full p-0 m-0">
+      <h1>Soohoon Choi</h1>
+      <h3 className="mb-2">about me</h3>
+      <p className="my-2">
+        Cofounder at <a href="https://greptile.com" target="_blank">Greptile</a>.<br/>
+        Georgia Tech computer science and mathematics class of 2023.
+        </p>
+        Interested in (but not limited to):
+        <ul className="m-2">
+          <li>ai</li>
+          <li>knowledge graphs</li>
+          <li>art</li>
+          <li>most subjects tbh</li>
+        </ul>
+      <h3 className="mb-2">blog</h3>
+        coming soon
+        {/* <ul className="m-2">
+          <li><a href="/b/one-year-sf">one year in sf</a></li>
+        </ul> */}
+      {/* <h3 className="mb-2">fun</h3>
+      <p className="my-2">
+        type cmdk + k to get started
+      </p> */}
+      <h3 className="mb-2">contact</h3>
+      <div className="flex flex-row space-x-2">
+          <div><a href="https://github.com/soohoonc">Github</a></div>
+          <div><a href="https://linkedin.com/in/soohoonchoi">LinkedIn</a></div>
+          <div><a href="https://x.com/soohoonchoi">Twitter</a></div>
+      </div>
+    </div>
+  )
+}

src/styles/globals.css

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-/* @layer base {
+@layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 47.4% 11.2%;
@@ -72,8 +72,8 @@
   .link {
     color: #10b981;
   }
-} */
-/* 
+}
+
 @layer base {
   * {
     @apply border-border;
@@ -84,16 +84,4 @@
       'rlig' 1,
       'calt' 1;
   }
-} */
-@layer base {
-  *, ::before, ::after {
-    border-width: 0;
-    border-style: solid;
-    border-color: theme('borderColor.DEFAULT', currentColor);
-  }
-}
-
-/* Your custom styles */
-.link {
-  color: #10b981;
-}
+}