Add dynamic content to posts

Author: akeuben

package-lock.json

@@ -14,17 +14,20 @@
     "@types/remark-prism": "^1.3.7",
     "gray-matter": "^4.0.3",
     "install": "^0.13.0",
-    "next": "14.2.4",
+    "next": "^14.2.23",
     "npm": "^10.8.2",
     "prism": "^1.0.0",
     "prismjs": "^1.29.0",
     "react": "^18",
     "react-dom": "^18",
+    "reagraph": "^4.21.2",
     "rehype": "^13.0.1",
     "rehype-katex": "^7.0.0",
     "rehype-mathjax": "^6.0.0",
     "rehype-pretty-code": "^0.13.2",
     "rehype-raw": "^7.0.0",
+    "rehype-react": "^8.0.0",
+    "rehype-sanitize": "^6.0.0",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
     "remark-math": "^6.0.0",

package.json

@@ -0,0 +1,14 @@
+0/m->1/m/R
+0/*->0/*/R
+
+1/m->1/m/R
+1/u->2/u/R
+1/*->0/*/R
+
+2/m->1/m/R
+2/*->0/*/R
+2/l->3/l/R
+
+3/m->1/m/R
+3/*->0/*/R
+3/(->4/(/R

public/posts/data/test2.turing

@@ -24,4 +24,5 @@ $$
 $$
 where $a_i=a_{i-1}+i$ for all $i\geq 1$ and $a_0=0$
 
-This is it.
+# React Component Rendering
+<turing-machine label="String Detection" machine="/posts/data/test2.turing" tape="mul(3,9)       "/>

public/posts/test2.md

@@ -35,10 +35,12 @@ body {
 main {
     padding-bottom: 40px;
     min-height: calc(100vh - 168px);
-}
-
-main>* {
-    margin: 40px;
+    max-width: 800px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+    padding: 20px;
 }
 
 main>section {
@@ -68,6 +70,16 @@ button {
     text-transform: capitalize;
 }
 
+button:disabled {
+    cursor: default;
+    border: 2px solid var(--background-light-color);
+    color: var(--background-light-color);
+}
+
+button:disabled:hover {
+    filter: none;
+}
+
 button:hover {
     filter: brightness(0.7);
 }

src/app/globals.css

@@ -10,6 +10,7 @@ import Link from "next/link";
 import { YearsSince } from "@/components/visual/CurrentYear";
 import Image from "next/image";
 import { ProjectCard } from "@/components/project/ProjectCard";
+import { Automota } from "@/components/visual/automota/AutomotaComponent";
 
 const featuredProjects = [
     "mineclone",
@@ -33,6 +34,10 @@ export default function HomePage() {
                         I am always open to learning new technologies and fields when I get the chance.</p>
                 </section>
             </TwoCol>
+            <Automota boardHeight={10} tileSize={20} ruleSet={{
+                born: [3,4],
+                survive: [3,4]
+            }} />
             <TwoCol fit="none">
                 <div>
                     <h1>Experience</h1>

src/app/page.tsx

@@ -10,16 +10,12 @@ export async function generateMetadata({params}: any, parent: ResolvingMetadata)
     const post = await renderMarkdownFile(`posts/${params.id}`);
 
     const title = `${post.metadata.name || "Post"} | ${parentData.title?.absolute}`;
-    const preview = (/<p>(.*?)<\/p>/g.exec(post.content) || ["", undefined])[1];
-
 
     return {
         title: title,
-        description: preview,
         openGraph: {
             type: "article",
             title: title,
-            description: preview,
             authors: post.metadata.author,
             publishedTime: post.metadata.date
         }
@@ -29,14 +25,18 @@ export async function generateMetadata({params}: any, parent: ResolvingMetadata)
 export default async function PostPage({params}: {params: {id: string}}) {
     const post = await renderMarkdownFile(`posts/${params.id}`);
 
-    return <main className={styles.page}>
+    return <main className={styles.page} suppressHydrationWarning>
         {post.metadata.name && <h1 className={styles.titleLine}>{post.metadata.name}</h1>}
         <h2 className={styles.authorLine}>
         {post.metadata.author && <span>{post.metadata.author}</span>}
         {post.metadata.author && post.metadata.date && <span>&bull;</span>}
         {post.metadata.date && <span>{post.metadata.date}</span>}
         </h2>
-        <div className={contentStyles.content} dangerouslySetInnerHTML={{__html: post.content}} />
+        <div className={contentStyles.content}>
+            {
+                post.content
+            }
+        </div>
     </main>
 }
 

src/app/post/[id]/page.tsx

@@ -50,7 +50,11 @@ export default async function ProjectPage({params}: {params: {id: string}}) {
         </div>
         <main>
             <h1 className={styles.title}>{project.metadata.name}</h1>
-            <div className={contentStyles.content} dangerouslySetInnerHTML={{__html: project.content}} />
+            <div className={contentStyles.content}>
+                {
+                    project.content
+                }
+            </div>
         </main>
     </>
 }

src/app/project/[id]/page.tsx

@@ -7,11 +7,12 @@ import { useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 
 export const NavBar = () => {
-    const [isDesktop, setIsDesktop] = useState<boolean>(typeof window != "undefined" ? window.innerWidth >= 700 : true);
+    const [isDesktop, setIsDesktop] = useState<boolean>(false);
     const [hamburgerOpen, setHamburgerOpen] = useState<boolean>(false);
 
     useEffect(() => {
         window.addEventListener('resize', () => setIsDesktop(window.innerWidth >= 700));
+        setIsDesktop(typeof window != "undefined" ? window.innerWidth >= 700 : true);
     }, [setIsDesktop]);
 
     return <>

src/components/navigation/NavBar.tsx

@@ -0,0 +1,10 @@
+"use client"
+import { useState } from "react"
+
+export const Counter = ({defaultvalue}: {defaultvalue: string}) => {
+    const [value, setValue] = useState<number>(parseInt(defaultvalue));
+
+    return <button onClick={() => setValue(value + 1)}>
+        {value}
+    </button>
+}