Emoji Search about page, [slug] about page setup, UI tweaks

tim0120 · Nov 22, 2024 · 0f77c47 · 0f77c47
1 parent bf8ec09
commit 0f77c47
Show file tree

Hide file tree

Showing 10 changed files with 353 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,11 +12,16 @@
   "dependencies": {
     "@heroicons/react": "^2.1.5",
     "clsx": "^2.1.1",
+    "dotenv": "^16.4.5",
+    "fs": "^0.0.1-security",
+    "gray-matter": "^4.0.3",
+    "markdown-to-jsx": "^7.7.0",
     "next": "15.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.15",
     "@types/node": "^20.17.6",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,7 +3,7 @@ import localFont from "next/font/local";
 import "./globals.css";
 import { ThemeProvider } from "@/context/ThemeContext";
 import PageNav from "@/components/PageNav";
-import Footer from "@/components/Footer";
+import Copyright from "@/components/Footer";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -32,15 +32,17 @@ export default function RootLayout({
       <head>
         <link rel="icon" href="/favicon.png" type="image/png" />
       </head>
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased px-5 pt-10 sm:px-30 sm:pt-16 lg:px-60`}>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased px-5 pt-10 sm:px-30 sm:pt-16 lg:px-60 flex flex-col`}>
         <ThemeProvider>
           <header>
             <PageNav />
           </header>
           <main>
             {children}
           </main>
-          <Footer />
+          <footer>
+            <Copyright />
+          </footer>
         </ThemeProvider>
       </body>
     </html>

diff --git a/src/app/projects/[slug]/about/page.tsx b/src/app/projects/[slug]/about/page.tsx
@@ -0,0 +1,37 @@
+import { readFileSync, readdirSync } from 'fs';
+import { join } from 'path';
+import matter from 'gray-matter';
+import MarkdownRenderer from '@/components/MarkdownRenderer';
+import { notFound } from 'next/navigation';
+
+interface Props {
+  params: {
+    slug: string;
+  };
+}
+
+export default async function ProjectAboutPage({ params }: Props) {
+  try {
+    const { slug } = await params;
+    const markdownFile = readFileSync(
+      join(process.cwd(), `src/content/projects/${slug}/about.md`),
+      'utf-8'
+    );
+
+    const { content } = matter(markdownFile);
+
+    return <MarkdownRenderer content={content} />;
+  } catch (error) {
+    console.error('Error loading about page:', error);
+    notFound();
+  }
+}
+
+export async function generateStaticParams() {
+  const projectsDir = join(process.cwd(), 'src/content/projects');
+  const projectSlugs = readdirSync(projectsDir);
+
+  return projectSlugs.map(slug => ({
+    slug,
+  }));
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,11 +1,9 @@
-const Footer = () => (
-        <footer>
-        <div className="text-center w-full flex justify-center py-4">
-            <p className="text-sm">
-            &copy; {new Date().getFullYear()} Tim Kostolansky
-            </p>
-        </div>
-        </footer>
+const Copyright = () => (
+  <div className="text-center w-full flex justify-center py-4">
+    <p className="text-sm">
+    &copy; {new Date().getFullYear()} Tim Kostolansky
+    </p>
+  </div>
 )
 
-export default Footer
+export default Copyright