Merge pull request #5 from paveg/customized-style

Customized style

.eslintrc.json

@@ -2,12 +2,11 @@
   "extends": [
     "next",
     "next/core-web-vitals",
-    "prettier",
-    "plugin:tailwindcss/recommended"
-  ],
-  "plugins": [
-    "unused-imports"
+    "plugin:tailwindcss/recommended",
+    "prettier"
   ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["unused-imports"],
   "rules": {
     "import/order": "error",
     "unused-imports/no-unused-imports": "error"

.github/workflows/eslint.yml

@@ -11,10 +11,10 @@ name: ESLint
 
 on:
   push:
-    branches: ["main"]
+    branches: ['main']
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: ["main"]
+    branches: ['main']
 
 jobs:
   eslint:

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "typescript.tsdk": "node_modules/.pnpm/[email protected]/node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
-}
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "cSpell.words": ["contentlayer"]
+}

app/[...slug]/page.tsx

@@ -1,52 +1,52 @@
-import { notFound } from "next/navigation"
-import { Metadata } from "next"
-import { allPages } from "contentlayer/generated"
+import { notFound } from 'next/navigation';
+import { Metadata } from 'next';
+import { allPages } from 'contentlayer/generated';
 
-import { Mdx } from "@/components/mdx-components"
+import { Mdx } from '@/components/mdx-components';
 
 interface PageProps {
   params: {
-    slug: string[]
-  }
+    slug: string[];
+  };
 }
 
-async function getPageFromParams(params: PageProps["params"]) {
-  const slug = params?.slug?.join("/")
-  const page = allPages.find((page) => page.slugAsParams === slug)
+async function getPageFromParams(params: PageProps['params']) {
+  const slug = params?.slug?.join('/');
+  const page = allPages.find((page) => page.slugAsParams === slug);
 
   if (!page) {
-    null
+    null;
   }
 
-  return page
+  return page;
 }
 
 export async function generateMetadata({
   params,
 }: PageProps): Promise<Metadata> {
-  const page = await getPageFromParams(params)
+  const page = await getPageFromParams(params);
 
   if (!page) {
-    return {}
+    return {};
   }
 
   return {
     title: page.title,
     description: page.description,
-  }
+  };
 }
 
-export async function generateStaticParams(): Promise<PageProps["params"][]> {
+export async function generateStaticParams(): Promise<PageProps['params'][]> {
   return allPages.map((page) => ({
-    slug: page.slugAsParams.split("/"),
-  }))
+    slug: page.slugAsParams.split('/'),
+  }));
 }
 
 export default async function PagePage({ params }: PageProps) {
-  const page = await getPageFromParams(params)
+  const page = await getPageFromParams(params);
 
   if (!page) {
-    notFound()
+    notFound();
   }
 
   return (
@@ -56,5 +56,5 @@ export default async function PagePage({ params }: PageProps) {
       <hr />
       <Mdx code={page.body.code} />
     </article>
-  )
+  );
 }

app/api/hello/route.ts

@@ -1,3 +1,3 @@
 export async function GET(request: Request) {
-  return new Response('Hello, Next.js!')
+  return new Response('Hello, Next.js!');
 }

app/layout.tsx

@@ -1,44 +1,44 @@
-import Link from "next/link"
-import "./globals.css"
-import { Inter } from "next/font/google"
-import { Providers } from "@/components/providers"
-import { Analytics } from "@/components/analytics"
-import { ModeToggle } from "@/components/mode-toggle"
-import { cfg } from "@/utils/constants"
+import '@/styles/globals.css';
+import { Inter as FontSans } from 'next/font/google';
+import { SpeedInsights } from '@vercel/speed-insights/next';
+import { Providers } from '@/components/providers';
+import { Analytics } from '@/components/analytics';
+import { cfg } from '@/utils/constants';
+import { TailwindIndicator } from '@/components/tailwind-indicator';
+import { LayoutFooter } from '@/components/layouts/footer';
+import { LayoutHeader } from '@/components/layouts/header';
 
-const inter = Inter({ subsets: ["latin"] })
+const fontSans = FontSans({
+  subsets: ['latin'],
+  variable: '--font-sans',
+});
 
 export const metadata = {
   title: cfg.siteTitle,
   description: cfg.siteDescription,
-}
+};
 
 interface RootLayoutProps {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`min-h-screen bg-white text-slate-900 antialiased dark:bg-slate-950 dark:text-slate-50 ${inter.className}`}
+        className={`min-h-screen bg-white font-sans text-slate-900 antialiased dark:bg-slate-950 dark:text-slate-50 ${fontSans.variable}`}
       >
         <Providers>
           <div className="mx-auto max-w-2xl px-4 py-10">
-            <header>
-              <div className="flex items-center justify-between">
-                <ModeToggle />
-                <nav className="ml-auto space-x-6 text-sm font-medium">
-                  <Link href="/">Home</Link>
-                  <Link href="/about">About</Link>
-                </nav>
-              </div>
-            </header>
+            <LayoutHeader />
             <main>{children}</main>
+            <LayoutFooter />
           </div>
           <Analytics />
+          <SpeedInsights />
+          <TailwindIndicator />
         </Providers>
       </body>
     </html>
-  )
+  );
 }

app/page.tsx

@@ -1,11 +1,10 @@
-import Link from "next/link"
-import { allPosts } from "@/.contentlayer/generated"
-import { PostNotFound } from "@/components/post-not-found"
+import Link from 'next/link';
+import { allPosts } from '@/.contentlayer/generated';
+import { PostNotFound } from '@/components/post-not-found';
 
 export default function Home() {
-  console.info(allPosts.length)
   if (allPosts.length === 0) {
-    return <PostNotFound />
+    return <PostNotFound />;
   }
 
   return (
@@ -19,5 +18,5 @@ export default function Home() {
         </article>
       ))}
     </div>
-  )
+  );
 }

app/posts/[...slug]/page.tsx

@@ -1,64 +1,90 @@
-import { notFound } from "next/navigation"
-import { Metadata } from "next"
-import { allPosts } from "contentlayer/generated"
+import { notFound } from 'next/navigation';
+import { Metadata } from 'next';
+import { allPosts } from 'contentlayer/generated';
 
-import { Mdx } from "@/components/mdx-components"
+import { Mdx } from '@/components/mdx-components';
+import { TableOfContents } from '@/components/table-of-contents';
+import '@/styles/codes/prism-dracula.css';
 
 interface PostProps {
   params: {
-    slug: string[]
-  }
+    slug: string[];
+  };
 }
 
-async function getPostFromParams(params: PostProps["params"]) {
-  const slug = params?.slug?.join("/")
-  const post = allPosts.find((post) => post.slugAsParams === slug)
+const formatDate = (date: string, locale = 'en-JP') => {
+  const row = new Date(date).toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+
+  return row;
+};
+
+async function getPostFromParams(params: PostProps['params']) {
+  const slug = params?.slug?.join('/');
+  const post = allPosts.find((post) => post.slugAsParams === slug);
 
   if (!post) {
-    null
+    null;
   }
 
-  return post
+  return post;
 }
 
 export async function generateMetadata({
   params,
 }: PostProps): Promise<Metadata> {
-  const post = await getPostFromParams(params)
+  const post = await getPostFromParams(params);
 
   if (!post) {
-    return {}
+    return {};
   }
 
   return {
     title: post.title,
     description: post.description,
-  }
+  };
 }
 
-export async function generateStaticParams(): Promise<PostProps["params"][]> {
+export async function generateStaticParams(): Promise<PostProps['params'][]> {
   return allPosts.map((post) => ({
-    slug: post.slugAsParams.split("/"),
-  }))
+    slug: post.slugAsParams.split('/'),
+  }));
 }
 
 export default async function PostPage({ params }: PostProps) {
-  const post = await getPostFromParams(params)
+  const post = await getPostFromParams(params);
 
   if (!post) {
-    notFound()
+    notFound();
   }
 
+  // TODO: Improve tailwindCSS
+  // TODO: Add post date and the hero image
   return (
-    <article className="prose py-6 dark:prose-invert">
-      <h1 className="mb-2">{post.title}</h1>
-      {post.description && (
-        <p className="mt-0 text-xl text-slate-700 dark:text-slate-200">
-          {post.description}
+    <article className="prose py-6 transition-colors dark:prose-invert">
+      <h1 className="mb-4">{post.title}</h1>
+      {post.date && (
+        <p className="text-sm text-slate-700 dark:text-slate-200">
+          {formatDate(post.date)}
         </p>
       )}
       <hr className="my-4" />
-      <Mdx code={post.body.code} />
+      <div
+        className="lg:grid lg:grid-cols-4 lg:gap-x-6"
+        style={{ gridTemplateRows: 'auto 1fr' }}
+      >
+        <div className="py-4 lg:col-span-3">
+          <Mdx code={post.body.code} />
+        </div>
+        <aside>
+          <div className="hidden lg:sticky lg:top-24 lg:col-span-1 lg:block">
+            <TableOfContents source={post.body.raw} />
+          </div>
+        </aside>
+      </div>
     </article>
-  )
+  );
 }

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

components/analytics.tsx

@@ -1,7 +1,7 @@
-"use client"
+'use client';
 
-import { Analytics as VercelAnalytics } from "@vercel/analytics/react"
+import { Analytics as VercelAnalytics } from '@vercel/analytics/react';
 
 export function Analytics() {
-  return <VercelAnalytics />
+  return <VercelAnalytics />;
 }