Minor updates to create-a-blog post, nextjs 14 bump

MaxLeiter · Nov 24, 2023 · 02d237e · 02d237e
1 parent 89f7e51
commit 02d237e
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 47 deletions.
diff --git a/app/(subpages)/blog/[slug]/layout.tsx b/app/(subpages)/blog/[slug]/layout.tsx
@@ -29,7 +29,13 @@ export const generateMetadata = async ({
 async function getData({ slug }: { slug: string }) {
   const posts = await getPosts()
   const postIndex = posts.findIndex((p) => p?.slug === slug)
+
+  if (postIndex === -1) {
+    throw new Error(`${slug} not found in posts. Did you forget to rename the file?`)
+  }
+
   const post = posts[postIndex]
+
   const { ...rest } = post
 
   return {
@@ -52,10 +58,10 @@ export default async function PostLayout({
 
   const lastModifiedDate = lastModified
     ? new Date(lastModified).toLocaleDateString('en-US', {
-        month: 'long',
-        day: 'numeric',
-        year: 'numeric',
-      })
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    })
     : null
 
   return (

diff --git a/app/components/socials/index.tsx b/app/components/socials/index.tsx
@@ -24,7 +24,6 @@ const SocialButton = ({ tooltip, href, icon }: SocialButtonProps) => {
 const Socials = () => {
   return (
     <div className={styles.socials}>
-      <ThemeSwitcher />
       <SocialButton
         href="https://github.com/maxleiter"
         icon={<GitHub strokeWidth={2} />}
@@ -45,6 +44,7 @@ const Socials = () => {
         icon={<RSS strokeWidth={2} />}
         tooltip="RSS"
       />
+      <ThemeSwitcher />
     </div>
   )
 }

diff --git a/app/components/theme-switcher/index.tsx b/app/components/theme-switcher/index.tsx
@@ -36,21 +36,19 @@ const ThemeSwitcher = ({
 
   return (
     <Wrapper>
-      {mounted && (
-        <FadeIn duration={200}>
-          <button
-            onClick={() => setTheme(activeTheme === 'light' ? 'dark' : 'light')}
-            aria-label="Change the theme"
-            className={`${socialStyles.icon} ${className}`}
-          >
-            {activeTheme === 'light' ? (
-              <Moon size={iconSize} strokeWidth={strokeWidth || 2} />
-            ) : (
-              <Sun size={iconSize} strokeWidth={strokeWidth || 1} />
-            )}
-          </button>
-        </FadeIn>
-      )}
+      <button
+        onClick={() => setTheme(activeTheme === 'light' ? 'dark' : 'light')}
+        aria-label="Change the theme"
+        className={`${socialStyles.icon} ${className}`}
+      >
+        {mounted ? <FadeIn>{
+          activeTheme === 'light' ? (
+            <Moon size={iconSize} strokeWidth={strokeWidth || 2} />
+          ) : (
+            <Sun size={iconSize} strokeWidth={strokeWidth || 1} />
+          )
+        } </FadeIn> : <span style={{ opacity: 0 }} aria-hidden><Moon size={iconSize} /></span>}
+      </button>
     </Wrapper>
   )
 }

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,7 @@ import { Inter } from 'next/font/google'
 import { Analytics } from '@vercel/analytics/react'
 import ThemeProvider from '@components/theme-provider'
 import { VercelToolbar } from '@vercel/toolbar/next';
+import { Viewport } from 'next'
 
 const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
 
@@ -34,10 +35,6 @@ export const metadata = {
     default: 'Max Leiter',
   },
   description: 'A website by Max Leiter.',
-  themeColor: [
-    { media: '(prefers-color-scheme: light)', color: '#f5f5f5' },
-    { media: '(prefers-color-scheme: dark)', color: '#000' },
-  ],
   openGraph: {
     title: 'Max Leiter',
     url: 'https://maxleiter.com',
@@ -77,3 +74,10 @@ export const metadata = {
     },
   },
 }
+
+export const viewport: Viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#f5f5f5' },
+    { media: '(prefers-color-scheme: dark)', color: '#000' },
+  ],
+}
diff --git a/app/lib/projects.tsx b/app/lib/projects.tsx
@@ -16,13 +16,6 @@ const Projects: Project[] = [
     role: 'Creator',
     years: ['2022', 'present'],
   },
-  {
-    title: "Vercel AI SDK",
-    description: "Build AI-powered applications with React, Svelte, and Vue",
-    href: "https://github.com/vercel-labs/ai",
-    role: "Maintainer",
-    years: ["2023", "present"],
-  },
   {
     title: 'The Lounge',
     description:

diff --git a/app/page.module.css b/app/page.module.css
@@ -12,12 +12,6 @@
   }
 }
 
-.headingText h1 {
-  margin: 0;
-  /* Same as global h2 */
-  font-size: 1.6rem;
-}
-
 @media (max-width: 768px) {
   .heading {
     flex-direction: column;

diff --git a/app/page.tsx b/app/page.tsx
@@ -19,9 +19,7 @@ export default async function HomePage() {
   return (
     <>
       <div className={styles.heading}>
-        <span className={styles.headingText}>
-          <h1>Max Leiter</h1>
-        </span>
+        <h1>Max Leiter</h1>
         <Socials />
       </div>
       <AboutMe />

diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@types/diff": "5.0.3",
     "@types/marked": "5.0.1",
-    "@types/mdx": "2.0.8",
+    "@types/mdx": "2.0.10",
     "@types/node": "20.7.2",
     "@types/prettier": "2.7.3",
     "@types/react": "18.2.23",

diff --git a/posts/build-a-blog-with-nextjs-13.mdx b/posts/build-a-blog-with-nextjs-13.mdx
@@ -1,6 +1,6 @@
 ---
-title: Building a blog with Next.js 13 and React Server Components
-description: Use MDX, RSC, and Bright to build a blog with Next.js 13.
+title: Building a blog with Next.js 14 and React Server Components
+description: Use MDX, RSC, and Bright to build a blog with Next.js 14.
 slug: build-a-blog-with-nextjs-13
 date: Apr 16, 2023
 ---
@@ -9,6 +9,8 @@ I've been tinkering with this website and the [Next.js 13 App Router](https://be
 and it's been a great experience, especially in the last few months. But I've seen some confusion around
 how to use the new features and React Server Components, so I wrote up an outline on building this website.
 
+<Note> This post has been updated for [Next.js 14.](https://nextjs.org/blog/next-14) </Note>
+
 To address the React-sized elephant in the room:
 you do not need this fancy setup to build a blog.
 HTML and CSS may be a better choice for you, but I'd find little fun in that, and I'm a strong believer in having a website to experiment with.
@@ -495,10 +497,6 @@ export const metadata = {
     default: 'Max Leiter',
   },
   description: 'Full-stack developer.',
-  themeColor: [
-    { media: '(prefers-color-scheme: light)', color: '#f5f5f5' },
-    { media: '(prefers-color-scheme: dark)', color: '#000' },
-  ],
   openGraph: {
     title: 'Max Leiter',
     description: 'Full-stack developer.',
@@ -534,6 +532,13 @@ export const metadata = {
     },
   },
 }
+
+export const viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#f5f5f5' },
+    { media: '(prefers-color-scheme: dark)', color: '#000' },
+  ],
+}
 ```
 
 And a pages metadata may look like this: