Redesign: 雑記 by swallow - トップページ刷新、ナビバー整理

docs/dgx-spark-dual/index.md

@@ -437,7 +437,7 @@ vllm serve <model> --tensor-parallel-size 2 --max-model-len 4096
 
 - [NVIDIA DGX Spark Playbooks](https://build.nvidia.com/spark/)
 - [vLLM ドキュメント](https://docs.vllm.ai/)
-- [DGX SparkでMiniMax-M2.5を動かす](/dgx-spark-minimax/)
+- [DGX SparkでMiniMax-M2.5を動かす](/blog/dgx-spark-minimax/)
 
 ---
 

docs/index.md

@@ -1,32 +1,14 @@
 ---
-slug: /
 sidebar_position: 1
-title: swallow tech notes
+title: Blog
+slug: /
 ---
 
-# swallow tech notes
+# 📝 Blog
 
-AI・インフラ・開発の技術メモ
+技術記事や思ったことなど。
 
-## 記事一覧
+## DGX Spark
 
-### DGX Spark
-
-- [DGX SparkでMiniMax-M2.5-REAP-172Bを動かす](/dgx-spark-minimax/)
-- [DGX Spark デュアル構成ガイド](/dgx-spark-dual/) 🆕
-
-## スクリプト
-
-記事で紹介しているスクリプトはダウンロードして使用できます。
-
-```bash
-# DGX Spark セットアップ（デュアル構成）
-curl -sL https://docs.techswan.online/scripts/dgx-spark-setup.sh | bash -s -- all
-
-# モデル起動
-curl -sL https://docs.techswan.online/scripts/dgx-spark-serve.sh | bash -s -- minimax-m25
-```
-
-## リンク
-
-- [Giteaリポジトリ](https://gitea.swallow.wjg.jp/koide/note-articles)
+- [DGX Spark デュアル構成ガイド](/blog/dgx-spark-dual) - 2台接続で256GB環境を構築
+- [DGX SparkでMiniMax-M2.5-REAP-172Bを動かす](/blog/dgx-spark-minimax) - 172Bモデルを動かす

docusaurus.config.ts

@@ -3,21 +3,17 @@ import type {Config} from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
-  title: 'swallow tech notes',
-  tagline: 'AI・インフラ・開発の技術メモ',
+  title: '雑記 by swallow',
+  tagline: '技術・思考・作ったもの',
   favicon: 'img/favicon.ico',
 
   future: {
     v4: true,
   },
 
-  // TODO: 本番URLに変更
   url: 'https://docs.techswan.online',
   baseUrl: '/',
 
-  organizationName: 'koide',
-  projectName: 'note-articles',
-
   onBrokenLinks: 'warn',
   onBrokenMarkdownLinks: 'warn',
 
@@ -32,10 +28,11 @@ const config: Config = {
       {
         docs: {
           sidebarPath: './sidebars.ts',
-          routeBasePath: '/',  // docsをルートに
-          editUrl: 'https://gitea.swallow.wjg.jp/koide/note-articles/src/branch/main/',
+          routeBasePath: '/blog',
+          breadcrumbs: true,
+          sidebarCollapsed: false,
         },
-        blog: false,  // ブログは無効化
+        blog: false,
         theme: {
           customCss: './src/css/custom.css',
         },
@@ -49,41 +46,34 @@ const config: Config = {
       respectPrefersColorScheme: true,
     },
     navbar: {
-      title: 'swallow tech notes',
+      title: '雑記 by swallow',
       items: [
         {
-          type: 'docSidebar',
-          sidebarId: 'docsSidebar',
+          to: '/blog',
+          label: 'Blog',
           position: 'left',
-          label: '記事一覧',
         },
         {
-          href: 'https://gitea.swallow.wjg.jp/koide/note-articles',
-          label: 'Gitea',
-          position: 'right',
+          to: '/works',
+          label: 'Works',
+          position: 'left',
         },
       ],
     },
     footer: {
       style: 'dark',
-      links: [
-        {
-          title: 'Links',
-          items: [
-            {
-              label: 'Gitea',
-              href: 'https://gitea.swallow.wjg.jp/koide/note-articles',
-            },
-          ],
-        },
-      ],
-      copyright: `© ${new Date().getFullYear()} swallow. Built with Docusaurus.`,
+      copyright: `© ${new Date().getFullYear()} swallow`,
     },
     prism: {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
       additionalLanguages: ['bash', 'json', 'yaml', 'python'],
     },
+    // 目次の設定
+    tableOfContents: {
+      minHeadingLevel: 2,
+      maxHeadingLevel: 4,
+    },
   } satisfies Preset.ThemeConfig,
 };
 

sidebars.ts

@@ -1,14 +1,12 @@
 import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
 
+// サイドバーは目次のみ表示（記事一覧は非表示）
+// 各記事ページでは自動生成される目次を使用
 const sidebars: SidebarsConfig = {
-  docsSidebar: [
+  blogSidebar: [
     {
-      type: 'category',
-      label: 'DGX Spark',
-      items: [
-        'dgx-spark-minimax/index',
-        'dgx-spark-dual/index',
-      ],
+      type: 'autogenerated',
+      dirName: '.',
     },
   ],
 };

src/pages/index.module.css

@@ -1,23 +1,146 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
+.main {
+  min-height: calc(100vh - 60px);
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
+.hero {
+  padding: 4rem 2rem;
+  text-align: center;
+  background: linear-gradient(180deg, var(--ifm-background-surface-color) 0%, var(--ifm-background-color) 100%);
+}
+
+.heroInner {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.heroTitle {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.heroSubtitle {
+  font-size: 1.25rem;
+  color: var(--ifm-color-emphasis-600);
+  margin: 0;
+}
+
+.content {
+  max-width: 800px;
+  margin: 0 auto;
   padding: 2rem;
+}
+
+.section {
+  margin-bottom: 3rem;
+}
+
+.sectionTitle {
+  font-size: 1.5rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+/* Posts */
+.posts {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.postCard {
+  display: block;
+  padding: 1.25rem;
+  border-radius: 8px;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+}
+
+.postCard:hover {
+  border-color: var(--ifm-color-primary);
+  transform: translateY(-2px);
+  text-decoration: none;
+  color: inherit;
+}
+
+.postTitle {
+  font-size: 1.1rem;
+  margin: 0 0 0.5rem 0;
+}
+
+.postMeta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.875rem;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.postDate {
+}
+
+.postTag {
+  background: var(--ifm-color-emphasis-100);
+  padding: 0.125rem 0.5rem;
+  border-radius: 4px;
+}
+
+/* Works */
+.works {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 1rem;
+}
+
+.workCard {
+  display: block;
+  padding: 1.25rem;
+  border-radius: 8px;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+}
+
+.workCard:hover {
+  border-color: var(--ifm-color-primary);
+  transform: translateY(-2px);
+  text-decoration: none;
+  color: inherit;
+}
+
+.workName {
+  font-size: 1.1rem;
+  margin: 0 0 0.5rem 0;
+}
+
+.workDescription {
+  font-size: 0.9rem;
+  color: var(--ifm-color-emphasis-600);
+  margin: 0;
+}
+
+.moreLink {
+  display: inline-block;
+  margin-top: 1rem;
+  font-size: 0.9rem;
+  color: var(--ifm-color-primary);
+}
+
+.moreLink:hover {
+  text-decoration: underline;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .heroTitle {
+    font-size: 2rem;
+  }
+  
+  .content {
+    padding: 1rem;
   }
 }
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

src/pages/index.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import styles from './index.module.css';
+
+function HomepageHeader() {
+  return (
+    <header className={styles.hero}>
+      <div className={styles.heroInner}>
+        <h1 className={styles.heroTitle}>👋 swallow</h1>
+        <p className={styles.heroSubtitle}>
+          AI・インフラ・開発が好きなエンジニア
+        </p>
+      </div>
+    </header>
+  );
+}
+
+function RecentPosts() {
+  const posts = [
+    {
+      title: 'DGX Spark デュアル構成ガイド',
+      date: '2026-02-19',
+      tag: 'DGX Spark',
+      url: '/blog/dgx-spark-dual',
+    },
+    {
+      title: 'DGX SparkでMiniMax-M2.5-REAP-172Bを動かす',
+      date: '2026-02-18',
+      tag: 'DGX Spark',
+      url: '/blog/dgx-spark-minimax',
+    },
+  ];
+
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>📝 最近書いたもの</h2>
+      <div className={styles.posts}>
+        {posts.map((post, idx) => (
+          <Link key={idx} to={post.url} className={styles.postCard}>
+            <h3 className={styles.postTitle}>{post.title}</h3>
+            <div className={styles.postMeta}>
+              <span className={styles.postDate}>{post.date}</span>
+              <span className={styles.postTag}>{post.tag}</span>
+            </div>
+          </Link>
+        ))}
+      </div>
+      <Link to="/blog" className={styles.moreLink}>
+        すべての記事を見る →
+      </Link>
+    </section>
+  );
+}
+
+function Works() {
+  const works = [
+    {
+      name: 'Tundoc',
+      description: 'ドキュメント管理ツール',
+      url: 'https://tundoc.techswan.online/',
+    },
+  ];
+
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>🛠 作ったもの</h2>
+      <div className={styles.works}>
+        {works.map((work, idx) => (
+          <a
+            key={idx}
+            href={work.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.workCard}
+          >
+            <h3 className={styles.workName}>{work.name}</h3>
+            <p className={styles.workDescription}>{work.description}</p>
+          </a>
+        ))}
+      </div>
+      <Link to="/works" className={styles.moreLink}>
+        もっと見る →
+      </Link>
+    </section>
+  );
+}
+
+export default function Home(): React.JSX.Element {
+  return (
+    <Layout
+      title="ホーム"
+      description="swallowの雑記。技術・思考・作ったもの。"
+    >
+      <main className={styles.main}>
+        <HomepageHeader />
+        <div className={styles.content}>
+          <RecentPosts />
+          <Works />
+        </div>
+      </main>
+    </Layout>
+  );
+}

src/pages/works.module.css

@@ -0,0 +1,70 @@
+.main {
+  min-height: calc(100vh - 60px);
+  padding: 2rem;
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.title {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.subtitle {
+  color: var(--ifm-color-emphasis-600);
+  margin-bottom: 2rem;
+}
+
+.works {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.workCard {
+  display: block;
+  padding: 1.5rem;
+  border-radius: 12px;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+}
+
+.workCard:hover {
+  border-color: var(--ifm-color-primary);
+  transform: translateY(-4px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  text-decoration: none;
+  color: inherit;
+}
+
+.workName {
+  font-size: 1.25rem;
+  margin: 0 0 0.75rem 0;
+}
+
+.workDescription {
+  font-size: 0.95rem;
+  color: var(--ifm-color-emphasis-700);
+  margin: 0 0 1rem 0;
+  line-height: 1.5;
+}
+
+.workTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.workTag {
+  font-size: 0.75rem;
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-color-emphasis-700);
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+}

src/pages/works.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import styles from './works.module.css';
+
+const works = [
+  {
+    name: 'Tundoc',
+    description: 'ドキュメント管理ツール。Markdownでドキュメントを管理・公開できる。',
+    url: 'https://tundoc.techswan.online/',
+    tags: ['Web', 'Documentation'],
+  },
+  // 他のプロジェクトがあれば追加
+];
+
+export default function Works(): React.JSX.Element {
+  return (
+    <Layout
+      title="Works"
+      description="swallowが作ったもの"
+    >
+      <main className={styles.main}>
+        <div className={styles.container}>
+          <h1 className={styles.title}>🛠 Works</h1>
+          <p className={styles.subtitle}>作ったもの・関わったもの</p>
+          
+          <div className={styles.works}>
+            {works.map((work, idx) => (
+              <a
+                key={idx}
+                href={work.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles.workCard}
+              >
+                <h2 className={styles.workName}>{work.name}</h2>
+                <p className={styles.workDescription}>{work.description}</p>
+                <div className={styles.workTags}>
+                  {work.tags.map((tag, tagIdx) => (
+                    <span key={tagIdx} className={styles.workTag}>{tag}</span>
+                  ))}
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      </main>
+    </Layout>
+  );
+}