Squashed commit of the following:

commit 93ed17dfc7d316e9bd80771268f16bd65e6f1df7 Author: Samuel Ping <sam.ping@mongodb.com> Date: Mon Jan 1 15:43:53 2024 -0500 Properly suppress hydration mismatch for next-themes; Fix system theme commit bea07beada62aeadc75895863624a3522ea05a80 Author: Samuel Ping <sam.ping@mongodb.com> Date: Mon Jan 1 15:24:09 2024 -0500 Fix project pages
samuel-ping · Jan 1, 2024 · 409909c · 409909c
1 parent 81609c8
commit 409909c
Show file tree

Hide file tree

Showing 15 changed files with 87 additions and 102 deletions.
diff --git a/app/layout.js b/app/layout.js
@@ -44,13 +44,13 @@ export default function RootLayout({ children }) {
     // See: https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
     // and: https://github.com/pacocoursey/next-themes/issues/152
     <html lang="en" suppressHydrationWarning>
-      <ThemeProvider>
-        <body className="min-h-screen max-w-screen-lg flex flex-col gap-y-32 px-5 lg:px-0 py-12 mx-auto transition-colors bg-beige-100 dark:bg-green-600 text-black dark:text-beige-200">
+      <body className="min-h-screen max-w-screen-lg flex flex-col gap-y-32 px-5 lg:px-0 py-12 mx-auto transition-colors bg-beige-100 dark:bg-green-600 text-black dark:text-beige-200">
+        <ThemeProvider>
           <Navbar navbarButtons={NavbarButtons} />
           <main className="flex flex-col flex-grow gap-y-14">{children}</main>
           <Footer navbarButtons={NavbarButtons} />
-        </body>
-      </ThemeProvider>
+        </ThemeProvider>
+      </body>
     </html>
   );
 }
diff --git a/app/projects/[slug]/page.js b/app/projects/[slug]/page.js
@@ -11,9 +11,11 @@ import { GetProject, GetProjectDetails } from '@/utils/mdxUtils';
 export async function generateStaticParams() {
   const projects = await GetProjectDetails();
 
-  return projects.props.projects.map((project) => ({
-    slug: project.title,
+  const pages = projects.props.projects.map((project) => ({
+    slug: project.details.slug,
   }));
+
+  return pages;
 }
 
 export async function generateMetadata({ params }) {

diff --git a/app/projects/page.js b/app/projects/page.js
@@ -21,7 +21,7 @@ export default async function Page() {
               dates={project.details.dates}
               gist={project.details.gist}
               tags={project.details.tags}
-              repo={project.details.repo}
+              slug={project.details.slug}
             />
           );
         })}

diff --git a/components/iconButton.js b/components/iconButton.js
@@ -5,7 +5,7 @@ import Link from 'next/link';
 const iconButton = ({ text, icon, url }) => {
   return (
     <Link href={url} target="_blank" rel="noopener">
-      <div className="w-fit flex justify-center items-center gap-x-2 font-medium p-2 transition-opacity text-green-100 bg-green-500 hover:opacity-85 rounded ">
+      <div className="w-fit flex justify-center items-center gap-x-2 font-medium p-2 rounded text-beige-100 dark:text-green-50 bg-green-300 dark:bg-green-500 transition-opacity hover:opacity-85">
         {icon}
         <div className="text-sm font-normal leading-none max-w-full flex-initial">
           {text}

diff --git a/components/leftArrowButton.js b/components/leftArrowButton.js
@@ -9,9 +9,9 @@ const RightArrowButton = ({ text, url, className }) => {
     <>
       <Link href={url} className="w-fit">
         <button
-          className={`${className} group flex flex-row items-center gap-x-2 rounded text-lg font-medium transition-colors bg-transparent text-green-500 hover:underline`}
+          className={`${className} group flex flex-row items-center gap-x-2 rounded text-lg font-medium transition-colors bg-transparent text-green-300 dark:text-green-50 hover:underline`}
         >
-          <Arrow className="w-4 ml-3 text-green-500 transition ease-in-out duration-300 group-hover:-translate-x-2" />
+          <Arrow className="w-4 ml-3 text-green-300 dark:text-green-50 transition ease-in-out duration-300 group-hover:-translate-x-2" />
           <span>{text}</span>
         </button>
       </Link>

diff --git a/components/projectCard.js b/components/projectCard.js
@@ -3,14 +3,9 @@ import Link from 'next/link';
 import Chip from '@/components/chip';
 import { RightArrowIcon as Arrow } from '@/components/icons';
 
-const ProjectCard = ({ repo, title, dates, gist, tags }) => {
+const ProjectCard = ({ slug, title, dates, gist, tags }) => {
   return (
-    <Link
-      // href={`projects/${title.replaceAll(' ', '-')}`}
-      href={repo}
-      target="_blank"
-      rel="noopener"
-    >
+    <Link href={`projects/${slug}`}>
       <button
         type="button"
         className="snap-center md:snap-none group w-64 h-80 flex flex-col justify-between p-7 rounded-xl shadow-lg dark:shadow-green-700 transition-colors bg-beige-100 hover:bg-beige-200 border border-beige-200 dark:bg-green-600 dark:hover:bg-green-700 dark:border-green-500"

diff --git a/components/projectCardCarousel.js b/components/projectCardCarousel.js
@@ -14,7 +14,7 @@ export const ProjectCardCarousel = ({ projects }) => {
             dates={project.details.dates}
             gist={project.details.gist}
             tags={project.details.tags}
-            repo={project.details.repo}
+            slug={project.details.slug}
           />
         );
       })}

diff --git a/components/themeToggle.js b/components/themeToggle.js
@@ -6,7 +6,7 @@ import { MoonIcon, SunIcon } from './icons';
 
 export const ThemeToggle = () => {
   const [mounted, setMounted] = useState(false);
-  const { theme, setTheme } = useTheme();
+  const { theme, resolvedTheme, setTheme } = useTheme();
 
   useEffect(() => {
     setMounted(true);
@@ -16,7 +16,8 @@ export const ThemeToggle = () => {
     return null;
   }
 
-  console.log(theme);
+  // Default theme is 'system', so set the theme to whatever the system theme is.
+  setTheme(resolvedTheme);
 
   if (theme === 'dark') {
     return (
@@ -28,7 +29,7 @@ export const ThemeToggle = () => {
         <MoonIcon />
       </div>
     );
-  } else {
+  } else if (theme === 'light') {
     return (
       <div
         className="flex items-center hover:text-green-300 transition-transform hover:-translate-y-1"
@@ -38,5 +39,7 @@ export const ThemeToggle = () => {
         <SunIcon />
       </div>
     );
+  } else {
+    return <span>hi</span>;
   }
 };
diff --git a/content/about.mdx b/content/about.mdx
@@ -11,7 +11,3 @@ Since then, I've come to realize that building things is my passion, so I've bee
 #### What else do I do?
 
 I love playing tennis, climbing, acting, and tinkering with computer hardware. I had a big plant phase over quarantine, and while I've toned down on that now, I will still drag anyone I'm with into a plant shop if we walk past one :)
-
-#### Is that why you chose to work at Mongo? Because their logo is green?
-
-... I will leave that as an exercise for the reader. Actually I won't. The answer is no.
diff --git a/content/projects/personal-website.mdx b/content/projects/personal-website.mdx
@@ -4,11 +4,11 @@ gist: The site you're looking at right now!
 start: May 2020
 end: ''
 repo: https://github.com/samuel-ping/samuelp.ing
-website: https://samuel-ping.github.io
+website: https://samuelp.ing
 tags: [react.js, netlify cms, matomo]
 ---
 
-My personal website is built with Next.js and styled with Tailwind CSS. I also created a [wireframe](https://www.figma.com/file/jTaIHRr5oJLSE8uI1eg0YJ/personal-site?type=design&node-id=0%3A1&mode=design&t=BTqMOZDl8YAzO1H5-1) and picked up some Figma along the way!
+My personal website is built with Next.js and styled with Tailwind CSS. I also picked up a little Figma and created a [wireframe](https://www.figma.com/file/jTaIHRr5oJLSE8uI1eg0YJ/personal-site?type=design&node-id=0%3A1&mode=design&t=BTqMOZDl8YAzO1H5-1) of the site!
 
 ### Past Features
 
@@ -22,7 +22,7 @@ In the past, I had also set up Matomo Analytics for fun, to see where in the wor
 
 ### Previous Versions
 
-**v3**: TODO (if you see this on my live site, I'll take the blame- not that there's anyone else to take it)
+**v3**: I didn't like my second version, so I remade it.
 
 **v2**: I didn't like my first version, so I remade it.
 

diff --git a/next.config.js b/next.config.js
@@ -1,5 +1,3 @@
-const isProd = process.env.NODE_ENV === 'production';
-
 const nextConfig = {
   images: { unoptimized: true },
   output: 'export',