♻️ Update codes

.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,25 +1,25 @@
-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"
+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 fontSans = FontSans({
-  subsets: ["latin"],
-  variable: "--font-sans"
-})
+  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) {
@@ -40,5 +40,5 @@ export default function RootLayout({ children }: RootLayoutProps) {
         </Providers>
       </body>
     </html>
-  )
+  );
 }

app/page.tsx

@@ -1,10 +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() {
   if (allPosts.length === 0) {
-    return <PostNotFound />
+    return <PostNotFound />;
   }
 
   return (
@@ -18,5 +18,5 @@ export default function Home() {
         </article>
       ))}
     </div>
-  )
+  );
 }

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

@@ -1,53 +1,64 @@
-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 { TableOfContents } from "@/components/table-of-contents"
+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
@@ -56,15 +67,13 @@ export default async function PostPage({ params }: PostProps) {
     <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">{post.date}... TODO: formatting</p>
-      )}
-      {post.description && (
-        <p className="mt-0 text-xl text-slate-700 dark:text-slate-200">
-          {post.description}
+        <p className="text-sm text-slate-700 dark:text-slate-200">
+          {formatDate(post.date)}
         </p>
       )}
       <hr className="my-4" />
-      <div className="lg:grid lg:grid-cols-4 lg:gap-x-6"
+      <div
+        className="lg:grid lg:grid-cols-4 lg:gap-x-6"
         style={{ gridTemplateRows: 'auto 1fr' }}
       >
         <div className="py-4 lg:col-span-3">
@@ -77,5 +86,5 @@ export default async function PostPage({ params }: PostProps) {
         </aside>
       </div>
     </article>
-  )
+  );
 }

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 />;
 }

components/layouts/footer.tsx

@@ -1,19 +1,26 @@
-import { GitHubLogoIcon, InstagramLogoIcon, TwitterLogoIcon } from "@radix-ui/react-icons"
-import Link from "next/link"
-import { cfg } from "@/utils/constants"
-import { Button } from "@/components/ui/button"
+import {
+  GitHubLogoIcon,
+  InstagramLogoIcon,
+  TwitterLogoIcon,
+} from '@radix-ui/react-icons';
+import Link from 'next/link';
+import { cfg } from '@/utils/constants';
+import { Button } from '@/components/ui/button';
 
-const iconClasses = "h-5 w-5"
+const iconClasses = 'h-5 w-5';
 
 export const LayoutFooter = () => {
-  const today = new Date()
-  const startYear = 2023
+  const today = new Date();
+  const startYear = 2023;
 
   return (
     <footer>
-      <div className="py-10 md:px-8 md:py-0">
+      <div className="p-4 lg:px-8">
         <div className="flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
-          &copy; {startYear}-{today.getFullYear()} {cfg.author}. All rights reserved.
+          <p className="text-sm text-slate-700 dark:text-slate-200">
+            &copy; {startYear}-{today.getFullYear()} {cfg.author}. All rights
+            reserved.
+          </p>
           <div>
             <Button variant="ghost" size="icon" asChild>
               <Link
@@ -46,5 +53,5 @@ export const LayoutFooter = () => {
         </div>
       </div>
     </footer>
-  )
-}
+  );
+};

components/layouts/header.tsx

@@ -1,5 +1,5 @@
-import Link from "next/link"
-import { ModeToggle } from "@/components/mode-toggle"
+import Link from 'next/link';
+import { ModeToggle } from '@/components/mode-toggle';
 
 export const LayoutHeader = () => {
   return (
@@ -12,5 +12,5 @@ export const LayoutHeader = () => {
         </nav>
       </div>
     </header>
-  )
-}
+  );
+};