feat: init nextjs base blog

Author: eottabom

.github/workflows/deploy.yml

@@ -0,0 +1,35 @@
+name: Deploy Next.js to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build and Export
+        run: |
+          npm run build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./out

.gitignore

@@ -1,5 +0,0 @@
-_site/
-
-.gitignore
-.idea/compiler.xml
-.idea/checkstyle-idea.xml

components/AdSense.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+export default function AdSense() {
+  useEffect(() => {
+    try {
+      (window as any).adsbygoogle = (window as any).adsbygoogle || [];
+      (window as any).adsbygoogle.push({});
+    } catch (e) {
+      console.error('AdSense error', e);
+    }
+  }, []);
+
+  return (
+    <ins
+      className="adsbygoogle"
+      style={{ display: 'block', textAlign: 'center', margin: '1rem 0' }}
+      data-ad-client="ca-pub-5103032140213770"
+      data-ad-slot="1100099846"
+      data-ad-format="auto"
+      data-full-width-responsive="true"
+    ></ins>
+  );
+}

components/Footer.tsx

@@ -0,0 +1,27 @@
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
+export default function Footer() {
+  return (
+    <footer className="bg-slate-800 text-gray-400 px-6 py-6 text-sm">
+      <div className="flex flex-col md:flex-row justify-between items-center text-sm">
+        <div className="mb-2 md:mb-0">© 2025 Eottabom's Lab. All rights reserved.</div>
+        <div className="flex items-center space-x-6">
+          <a
+            href="mailto:[email protected]"
+            className="flex items-center gap-2 hover:text-white transition"
+          >
+            <i className="fas fa-envelope text-base" aria-hidden="true" />
+            <span>Email</span>
+          </a>
+          <a
+            href="https://github.com/eottabom"
+            className="flex items-center gap-2 hover:text-white transition"
+          >
+            <i className="fab fa-github text-base" aria-hidden="true" />
+            <span>GitHub</span>
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/Header.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+import ThemeToggle from './ThemeToggle';
+
+type HeaderProps = {
+  isDark: boolean;
+};
+
+export default function Header({ isDark }: { isDark: boolean }) {
+  return (
+    <header className="flex justify-end items-center px-6 py-4">
+      <div className="flex gap-6 items-center">
+        <Link href="/" className={`${isDark ? "text-white" : "text-black"} hover:text-blue-300`}>
+          <span className="font-bold">Main</span>
+        </Link>
+        <Link href="/post" className={`${isDark ? "text-white" : "text-black"} hover:text-blue-300 font-bold`}>
+          Post
+        </Link>
+        <Link href="/about" className={`${isDark ? "text-white" : "text-black"} hover:text-blue-300 font-bold`}>
+          About
+        </Link>
+        <ThemeToggle />
+      </div>
+    </header>
+  );
+}

components/Highlight.tsx

@@ -0,0 +1,28 @@
+type HighlightProps = {
+    color?: 'red' | 'blue' | 'green' | 'yellow';
+    children: React.ReactNode;
+};
+
+const colorClassMap = {
+    red: 'text-red-600',
+    blue: 'text-blue-600',
+    green: 'text-green-600',
+    yellow: 'text-yellow-600',
+};
+
+export function Highlight({ color = 'red', children }: HighlightProps) {
+    const colorClass = colorClassMap[color] ?? 'text-red-600';
+    return <span className={`${colorClass} font-bold`}>{children}</span>;
+}
+
+export function RedText({ children }: { children: React.ReactNode }) {
+    return <Highlight color="red">{children}</Highlight>;
+}
+
+export function BlueText({ children }: { children: React.ReactNode }) {
+    return <Highlight color="blue">{children}</Highlight>;
+}
+
+export function GreenText({ children }: { children: React.ReactNode }) {
+    return <Highlight color="green">{children}</Highlight>;
+}

components/Panel.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+
+type InfoPanelType =
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'success'
+  | 'note'
+  | 'tip'
+  | 'neutral'
+  | 'quote';
+
+type InfoPanelProps = {
+  type?: InfoPanelType;
+  children: ReactNode;
+};
+
+export default function InfoPanel({ type = 'info', children }: InfoPanelProps) {
+  const styles: Record<InfoPanelType, string> = {
+    info: 'bg-blue-50 border-l-4 border-blue-400 text-blue-900',
+    warning: 'bg-yellow-50 border-l-4 border-yellow-400 text-yellow-900',
+    danger: 'bg-red-50 border-l-4 border-red-400 text-red-900',
+    success: 'bg-green-50 border-l-4 border-green-400 text-green-900',
+    note: 'bg-purple-50 border-l-4 border-purple-400 text-purple-900',
+    tip: 'bg-cyan-50 border-l-4 border-cyan-400 text-cyan-900',
+    neutral: 'bg-gray-50 border-l-4 border-gray-400 text-gray-900',
+    quote: 'bg-indigo-50 border-l-4 border-indigo-400 text-indigo-900',
+  };
+
+  return (
+    <div className={`px-4 py-2 my-4 rounded ${styles[type]}`}>
+      <div className="prose-sm">{children}</div>
+    </div>
+  );
+}

components/ThemeToggle.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { useState, useEffect } from 'react';
+import { Monitor, Moon, Sun } from 'lucide-react';
+
+export default function ThemeToggle() {
+  const { theme, setTheme, systemTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  const cycleOrder = ['system', 'dark', 'light'] as const;
+  type ThemeValue = typeof cycleOrder[number];
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  const current = theme === 'system' ? systemTheme : theme;
+
+  const getIcon = (mode: ThemeValue) => {
+    switch (mode) {
+      case 'system':
+        return <Monitor className="w-5 h-5" />;
+      case 'dark':
+        return <Moon className="w-5 h-5" />;
+      case 'light':
+        return <Sun className="w-5 h-5" />;
+      default:
+        return <Monitor className="w-5 h-5" />;
+    }
+  };
+
+  const handleClick = () => {
+    const currentIndex = cycleOrder.indexOf(theme as ThemeValue);
+    const nextIndex = (currentIndex + 1) % cycleOrder.length;
+    setTheme(cycleOrder[nextIndex]);
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className="p-2 rounded-md border border-gray-300 dark:border-gray-600 hover:border-blue-500 transition"
+      aria-label="Toggle Theme"
+    >
+      {getIcon(theme as ThemeValue)}
+    </button>
+  );
+}

hooks/useTocObserver.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+type TocItem = {
+    id: string;
+    text: string;
+};
+
+export function useTocObserver(): [TocItem[], string] {
+    const [toc, setToc] = useState<TocItem[]>([]);
+    const [activeId, setActiveId] = useState<string>('');
+
+    useEffect(() => {
+        const headers = Array.from(document.querySelectorAll('h3[id]')) as HTMLHeadingElement[];
+
+        const items = headers.map((h) => ({
+            id: h.id,
+            text: h.textContent ?? '',
+        }));
+        setToc(items);
+
+        const handleObserver = (entries: IntersectionObserverEntry[]) => {
+            const visible = entries.find((entry) => entry.isIntersecting);
+            if (visible?.target.id) {
+                setActiveId(visible.target.id);
+            }
+        };
+
+        const observer = new IntersectionObserver(handleObserver, {
+            rootMargin: '0px 0px -80% 0px',
+            threshold: 1.0,
+        });
+
+        headers.forEach((h) => observer.observe(h));
+
+        return () => observer.disconnect();
+    }, []);
+
+    return [toc, activeId];
+}

lib/posts.ts

@@ -0,0 +1,107 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { serialize } from 'next-mdx-remote/serialize';
+import remarkGfm from 'remark-gfm';
+import rehypeSlug from 'rehype-slug';
+import rehypePrism from 'rehype-prism-plus';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import remarkDirective from 'remark-directive';
+import remarkDirectiveTransformer from './remarkDirectiveTransformer';
+
+const postsDirectory = path.join(process.cwd(), 'posts');
+
+type PostFrontmatter = {
+  title: string;
+  date: string;
+  tags?: string[];
+  summary?: string;
+  description?: string;
+  [key: string]: any;
+};
+
+type PostData = PostFrontmatter & {
+  id: string;
+  mdxSource: Awaited<ReturnType<typeof serialize>>;
+};
+
+export function getAllMdxFiles(dirPath = postsDirectory): string[] {
+  let results: string[] = [];
+  const list = fs.readdirSync(dirPath);
+  list.forEach((file) => {
+    const filePath = path.join(dirPath, file);
+    const stat = fs.statSync(filePath);
+    if (stat && stat.isDirectory()) {
+      results = results.concat(getAllMdxFiles(filePath));
+    } else if (file.endsWith('.mdx')) {
+      results.push(filePath);
+    }
+  });
+  return results;
+}
+
+function extractIdFromFilename(fullPath: string): string {
+  return path.basename(fullPath, '.mdx');
+}
+
+export function getAllPostIds(): { params: { id: string } }[] {
+  const allFiles = getAllMdxFiles();
+  return allFiles.map((fullPath) => ({
+    params: {
+      id: extractIdFromFilename(fullPath),
+    },
+  }));
+}
+
+export async function getPostData(id: string): Promise<PostData> {
+  const allFiles = getAllMdxFiles();
+  const matchPath = allFiles.find((fp) => path.basename(fp, '.mdx') === id);
+  if (!matchPath) throw new Error(`Post not found: ${id}`);
+
+  const fileContents = fs.readFileSync(matchPath, 'utf8');
+  const { content, data } = matter(fileContents);
+
+  const mdxSource = await serialize(content, {
+    mdxOptions: {
+      remarkPlugins: [remarkGfm, remarkDirective, remarkDirectiveTransformer],
+      rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings, rehypePrism],
+    },
+    scope: data,
+  });
+
+  return {
+    id,
+    mdxSource,
+    ...(data as PostFrontmatter),
+  };
+}
+
+export async function getSortedPostsDataWithContent(): Promise<PostData[]> {
+  const allFiles = getAllMdxFiles();
+
+  const allPostsData: PostData[] = await Promise.all(
+    allFiles.map(async (fullPath) => {
+      const id = extractIdFromFilename(fullPath);
+      const fileContents = fs.readFileSync(fullPath, 'utf8');
+      const { content, data } = matter(fileContents);
+      const mdxSource = await serialize(content, {
+        mdxOptions: {
+          remarkPlugins: [remarkGfm],
+          rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
+          format: 'mdx',
+        },
+        scope: data,
+      });
+
+      return {
+        id,
+        mdxSource,
+        ...(data as PostFrontmatter),
+      };
+    })
+  );
+
+  return allPostsData.sort(
+    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+  );
+}