feat: トップページを刷新, 各ページ上部に現在の章のタイトルを表示するように (#56)

Author: yas-ako

docs/.vitepress/config.ts

@@ -11,7 +11,7 @@ import { head } from './ga-plugin';
 // https://vitepress.dev/reference/site-config
 
 export default withMermaid({
-    title: "pg-basic text",
+    title: "プログラミング基礎講習会",
     description: "プログラミング基礎講習会テキスト",
     cleanUrls: true,
     markdown: {
@@ -34,11 +34,14 @@ export default withMermaid({
         },
         nav: [
             { text: 'ホーム', link: '/' },
-            { text: 'テキスト', link: '/text/chapter-0/' }
         ],
 
         sidebar: {
             '/cpp/': [
+                {
+                    text: '2025年度版テキスト',
+                    link: '/text/chapter-0/',
+                },
                 {
                     text: 'はじめに',
                     link: '/cpp/preface/',
@@ -57,6 +60,10 @@ export default withMermaid({
                 },
             ],
             '/text/': [
+            {
+                text: '2026年度版テキスト [WIP]',
+                link: '/cpp/preface/',
+            },
             {
                 text: 'About',
                 items: [

docs/.vitepress/theme/ChapterTitle.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData, useRoute } from 'vitepress'
+import type { DefaultTheme } from 'vitepress'
+
+const { theme } = useData()
+const route = useRoute()
+
+function normalize(path: string): string {
+  return path.replace(/\/$/, '')
+}
+
+function findInItems(items: DefaultTheme.SidebarItem[], path: string): boolean {
+  return items.some(item => {
+    if (normalize(item.link ?? '') === path) return true
+    if (item.items) return findInItems(item.items, path)
+    return false
+  })
+}
+
+const chapterTitle = computed(() => {
+  const path = normalize(route.path)
+  const sidebar = theme.value.sidebar as Record<string, DefaultTheme.SidebarItem[]>
+
+  const sidebarKey = Object.keys(sidebar).find(key =>
+    path.startsWith(normalize(key))
+  )
+  if (!sidebarKey) return null
+
+  for (const section of sidebar[sidebarKey]) {
+    if (!section.items) continue
+    if (findInItems(section.items, path)) return section.text
+  }
+  return null
+})
+</script>
+
+<template>
+  <p v-if="chapterTitle" class="chapter-title">{{ chapterTitle }}</p>
+</template>
+
+<style scoped>
+.chapter-title {
+  font-size: 0.85em;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  margin: 0 0 0.25rem;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -1,5 +1,15 @@
+/// <reference types="vite/client" />
+import { h } from 'vue'
 import DefaultTheme from "vitepress/theme";
+import ChapterTitle from './ChapterTitle.vue'
 
 import './custom.css'
 
-export default DefaultTheme
+export default {
+  extends: DefaultTheme,
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      'doc-before': () => h(ChapterTitle),
+    })
+  },
+}

docs/index.md

@@ -8,36 +8,42 @@ hero:
     tagline: "プログラミング基礎講習会テキスト"
     actions:
         - theme: brand
-          text: テキストを開く
-          link: /text/chapter-0/
+          text: テキスト（2026年度版）
+          link: /cpp/preface/
         - theme: alt
           text: このテキストについて
           link: /about
         - theme: alt
           text: プライバシーポリシー
           link: /privacy-policy
 
-features:
-    - title: 0. はじめに
-      details: 講習を受ける上での心構えと環境構築
-      link: /text/chapter-0/
-    - title: I. はじめてのプログラミング
-      details: 「プログラミング」と前提知識を知り、触れる
-      link: /text/chapter-1/
-    - title: II. 変数と入出力
-      details: 入出力と変数・演算で基本的なプログラムの作成
-      link: /text/chapter-2/
-    - title: III. 演算・計算
-      details: 条件分岐や、小数型・文字列型
-      link: /text/chapter-3/
-    - title: IV. 繰り返し処理
-      details: 繰り返し処理と、文字列の操作
-      link: /text/chapter-4/
-    - title: V. Function
-      details: 関数・再帰を用いた実装
-      link: /text/chapter-5/
-    - title: VI. Struct
-      details: 便利にプログラミングをするための概念
-      link: /text/chapter-6/
+
 ---
 
+現在2026年度版のテキストを作成中です。構成の変更や内容の追加などを行っています。執筆が完了した章から順次公開していきます。
+
+- [はじめに](/cpp/preface/)
+  - [この講習会について](/cpp/preface/1)
+  - [このテキストについて](/cpp/preface/2)
+- [1. 環境構築](/cpp/chapter-1/)
+  - [1-A. Macの環境構築](/cpp/chapter-1/1-A)
+  - [1-B. Windowsの環境構築](/cpp/chapter-1/1-B)
+- [2. はじめてのプログラミング](/cpp/chapter-2/)
+  - [2.1 プログラミングの基礎知識](/cpp/chapter-2/1)
+  - [2.2 作業環境の構築](/cpp/chapter-2/2)
+  - [2.3 はじめてのプログラミング](/cpp/chapter-2/3)
+  - [練習問題](/cpp/chapter-2/problems/)
+
+:::details 2025年度版テキスト
+
+こちらは2025年度以前に使用していたテキストです。
+
+- [0. はじめに](/text/chapter-0/)
+- [I. はじめてのプログラミング](/text/chapter-1/)
+- [II. 変数と入出力](/text/chapter-2/)
+- [III. 演算・計算](/text/chapter-3/)
+- [IV. 繰り返し処理](/text/chapter-4/)
+- [V. Function](/text/chapter-5/)
+- [VI. Struct](/text/chapter-6/)
+
+:::