From 02d237e471326818be75f23610f398ff562c5a5c Mon Sep 17 00:00:00 2001 From: Max Leiter Date: Fri, 24 Nov 2023 14:41:30 -0800 Subject: [PATCH] Minor updates to create-a-blog post, nextjs 14 bump --- app/(subpages)/blog/[slug]/layout.tsx | 14 +++++++++---- app/components/socials/index.tsx | 2 +- app/components/theme-switcher/index.tsx | 28 ++++++++++++------------- app/layout.tsx | 12 +++++++---- app/lib/projects.tsx | 7 ------- app/page.module.css | 6 ------ app/page.tsx | 4 +--- package.json | 2 +- posts/build-a-blog-with-nextjs-13.mdx | 17 +++++++++------ 9 files changed, 45 insertions(+), 47 deletions(-) diff --git a/app/(subpages)/blog/[slug]/layout.tsx b/app/(subpages)/blog/[slug]/layout.tsx index 3b86cba4..acc41ec0 100644 --- 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 index 2fd52a46..e2e02bed 100644 --- 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 (
- } @@ -45,6 +44,7 @@ const Socials = () => { icon={} tooltip="RSS" /> +
) } diff --git a/app/components/theme-switcher/index.tsx b/app/components/theme-switcher/index.tsx index 5374b1b8..aab1b50b 100644 --- a/app/components/theme-switcher/index.tsx +++ b/app/components/theme-switcher/index.tsx @@ -36,21 +36,19 @@ const ThemeSwitcher = ({ return ( - {mounted && ( - - - - )} + ) } diff --git a/app/layout.tsx b/app/layout.tsx index d985bebb..cbf5a069 100644 --- 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' }, + ], +} \ No newline at end of file diff --git a/app/lib/projects.tsx b/app/lib/projects.tsx index b31c81b1..2ee2bda9 100644 --- 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 index dc171a3f..4f9fb103 100644 --- 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 index 210bc330..bf1f96f9 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -19,9 +19,7 @@ export default async function HomePage() { return ( <>
- -

Max Leiter

- +

Max Leiter

diff --git a/package.json b/package.json index f66c8e60..d274c8f8 100644 --- 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 index b6e82ee9..3c63e2bb 100644 --- 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. + This post has been updated for [Next.js 14.](https://nextjs.org/blog/next-14) + 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: