Initial commit

Created from https://vercel.com/new
Jalever · Aug 16, 2024 · e19f657 · e19f657
commit e19f657
Show file tree

Hide file tree

Showing 33 changed files with 6,169 additions and 0 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+.contentlayer
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/.pnpm/[email protected]/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# Next.js + Contentlayer
+
+A template with Next.js 13 app dir, Contentlayer, Tailwind CSS and dark mode.
+
+https://next-contentlayer.vercel.app
+
+
diff --git a/app/[...slug]/page.tsx b/app/[...slug]/page.tsx
@@ -0,0 +1,60 @@
+import { notFound } from "next/navigation"
+import { Metadata } from "next"
+import { allPages } from "contentlayer/generated"
+
+import { Mdx } from "@/components/mdx-components"
+
+interface PageProps {
+  params: {
+    slug: string[]
+  }
+}
+
+async function getPageFromParams(params: PageProps["params"]) {
+  const slug = params?.slug?.join("/")
+  const page = allPages.find((page) => page.slugAsParams === slug)
+
+  if (!page) {
+    null
+  }
+
+  return page
+}
+
+export async function generateMetadata({
+  params,
+}: PageProps): Promise<Metadata> {
+  const page = await getPageFromParams(params)
+
+  if (!page) {
+    return {}
+  }
+
+  return {
+    title: page.title,
+    description: page.description,
+  }
+}
+
+export async function generateStaticParams(): Promise<PageProps["params"][]> {
+  return allPages.map((page) => ({
+    slug: page.slugAsParams.split("/"),
+  }))
+}
+
+export default async function PagePage({ params }: PageProps) {
+  const page = await getPageFromParams(params)
+
+  if (!page) {
+    notFound()
+  }
+
+  return (
+    <article className="py-6 prose dark:prose-invert">
+      <h1>{page.title}</h1>
+      {page.description && <p className="text-xl">{page.description}</p>}
+      <hr />
+      <Mdx code={page.body.code} />
+    </article>
+  )
+}
diff --git a/app/api/hello/route.ts b/app/api/hello/route.ts
@@ -0,0 +1,3 @@
+export async function GET(request: Request) {
+  return new Response('Hello, Next.js!')
+}
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,43 @@
+import Link from "next/link"
+import "./globals.css"
+import { Inter } from "next/font/google"
+import { ThemeProvider } from "@/components/theme-provider"
+import { Analytics } from "@/components/analytics"
+import { ModeToggle } from "@/components/mode-toggle"
+
+const inter = Inter({ subsets: ["latin"] })
+
+export const metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+}
+
+interface RootLayoutProps {
+  children: React.ReactNode
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <html lang="en">
+      <body
+        className={`antialiased min-h-screen bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-50 ${inter.className}`}
+      >
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <div className="max-w-2xl mx-auto py-10 px-4">
+            <header>
+              <div className="flex items-center justify-between">
+                <ModeToggle />
+                <nav className="ml-auto text-sm font-medium space-x-6">
+                  <Link href="/">Home</Link>
+                  <Link href="/about">About</Link>
+                </nav>
+              </div>
+            </header>
+            <main>{children}</main>
+          </div>
+          <Analytics />
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,17 @@
+import { allPosts } from "@/.contentlayer/generated"
+import Link from "next/link"
+
+export default function Home() {
+  return (
+    <div className="prose dark:prose-invert">
+      {allPosts.map((post) => (
+        <article key={post._id}>
+          <Link href={post.slug}>
+            <h2>{post.title}</h2>
+          </Link>
+          {post.description && <p>{post.description}</p>}
+        </article>
+      ))}
+    </div>
+  )
+}
diff --git a/app/posts/[...slug]/page.tsx b/app/posts/[...slug]/page.tsx
@@ -0,0 +1,64 @@
+import { notFound } from "next/navigation"
+import { allPosts } from "contentlayer/generated"
+
+import { Metadata } from "next"
+import { Mdx } from "@/components/mdx-components"
+
+interface PostProps {
+  params: {
+    slug: string[]
+  }
+}
+
+async function getPostFromParams(params: PostProps["params"]) {
+  const slug = params?.slug?.join("/")
+  const post = allPosts.find((post) => post.slugAsParams === slug)
+
+  if (!post) {
+    null
+  }
+
+  return post
+}
+
+export async function generateMetadata({
+  params,
+}: PostProps): Promise<Metadata> {
+  const post = await getPostFromParams(params)
+
+  if (!post) {
+    return {}
+  }
+
+  return {
+    title: post.title,
+    description: post.description,
+  }
+}
+
+export async function generateStaticParams(): Promise<PostProps["params"][]> {
+  return allPosts.map((post) => ({
+    slug: post.slugAsParams.split("/"),
+  }))
+}
+
+export default async function PostPage({ params }: PostProps) {
+  const post = await getPostFromParams(params)
+
+  if (!post) {
+    notFound()
+  }
+
+  return (
+    <article className="py-6 prose dark:prose-invert">
+      <h1 className="mb-2">{post.title}</h1>
+      {post.description && (
+        <p className="text-xl mt-0 text-slate-700 dark:text-slate-200">
+          {post.description}
+        </p>
+      )}
+      <hr className="my-4" />
+      <Mdx code={post.body.code} />
+    </article>
+  )
+}
diff --git a/components/analytics.tsx b/components/analytics.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import { Analytics as VercelAnalytics } from "@vercel/analytics/react"
+
+export function Analytics() {
+  return <VercelAnalytics />
+}
diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image"
+import { useMDXComponent } from "next-contentlayer/hooks"
+
+const components = {
+  Image,
+}
+
+interface MdxProps {
+  code: string
+}
+
+export function Mdx({ code }: MdxProps) {
+  const Component = useMDXComponent(code)
+
+  return <Component components={components} />
+}
diff --git a/components/mode-toggle.tsx b/components/mode-toggle.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import { useTheme } from "next-themes"
+
+export function ModeToggle() {
+  const { setTheme, theme } = useTheme()
+
+  return (
+    <button
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      className="border rounded-md w-6 h-6 flex items-center justify-center">
+      <span className="sr-only">Toggle mode</span>
+      {theme !== "dark" ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="w-4 h-4">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+          />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="w-4 h-4">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+          />
+        </svg>
+      )}
+    </button>
+  )
+}
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import type { ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
diff --git a/content/pages/about.mdx b/content/pages/about.mdx
@@ -0,0 +1,22 @@
+---
+title: About
+description: About the site
+---
+
+Blandit libero volutpat sed cras ornare arcu. Cursus sit amet dictum sit amet. Nunc vel risus commodo viverra maecenas accumsan. Libero id faucibus nisl tincidunt eget nullam non nisi est. Varius quam quisque id diam vel quam. Id donec ultrices tincidunt arcu non.
+
+## Consent
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat sed cras ornare arcu. Nibh ipsum consequat nisl vel pretium lectus quam id leo. A arcu cursus vitae congue. Amet justo donec enim diam. Vel pharetra vel turpis nunc eget lorem. Gravida quis blandit turpis cursus in. Semper auctor neque vitae tempus. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Imperdiet nulla malesuada pellentesque elit eget.
+
+Felis donec et odio pellentesque diam volutpat commodo sed.
+
+Tortor consequat id porta nibh. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Scelerisque fermentum dui faucibus in. Tortor posuere ac ut consequat semper viverra.
+
+## Information we collect
+
+Amet justo donec enim diam. In hendrerit gravida rutrum quisque non. Hac habitasse platea dictumst quisque sagittis purus sit.
+
+## How we use your Information
+
+Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Consectetur adipiscing elit pellentesque habitant. Ut tristique et egestas quis ipsum suspendisse ultrices gravida.