feat: refactor note management and add automated config generation

- Removed the old update_notes.py script and replaced it with a new version in the scripts directory that scans for Markdown notes and generates a JavaScript configuration file.
- Introduced a GitHub Actions workflow to automate the regeneration of the config.js file on pushes to the main branch.
- Added a new CSS file for styling the application, including themes and responsive design.
- Created a new JavaScript file for handling the front-end logic, including theme toggling, note rendering, and table of contents generation.
- Updated the config.js file with the latest note paths and titles.

Author: luffydod

.github/workflows/update-notes.yml

@@ -0,0 +1,43 @@
+name: Update Notes Config
+
+on:
+  push:
+    branches:
+      - main
+    paths-ignore:
+      - assets/js/config.js
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  update-config:
+    if: github.actor != 'github-actions[bot]'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.x'
+
+      - name: Regenerate config.js
+        run: python scripts/update_notes.py
+
+      - name: Commit updated config.js
+        shell: bash
+        run: |
+          if git diff --quiet -- assets/js/config.js; then
+            echo "assets/js/config.js is already up to date"
+            exit 0
+          fi
+
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git add assets/js/config.js
+          git commit -m "chore: update generated notes config"
+          git push

README.md

@@ -5,4 +5,11 @@
 [![GitHub Pages](https://img.shields.io/badge/GitHub-Pages-blue?logo=github)](https://luffydod.github.io/ConfigNote)
 
 ## 🔄 维护与更新
-本项目由个人持续维护中^_^
+本项目由个人持续维护中^_^
+
+### 自动更新 config.js
+仓库已支持 GitHub Actions 自动执行 scripts/update_notes.py。
+
+当 main 分支收到代码推送时，工作流会自动运行脚本并检查 assets/js/config.js 是否有变化；如果有变化，会由 Actions 自动提交回仓库。
+
+工作流文件见 [.github/workflows/update-notes.yml](.github/workflows/update-notes.yml)。

style.css assets/css/style.cssstyle.css renamed to assets/css/style.css

@@ -470,15 +470,15 @@ a:hover {
     .container {
         padding: 1rem;
     }
-    
+
     .hero {
         padding: 2rem 0;
     }
-    
+
     .hero-title {
         font-size: 2rem;
     }
-    
+
     .glass-panel {
         padding: 1.5rem;
     }
@@ -545,12 +545,12 @@ a:hover {
     .note-container {
         flex-direction: column;
     }
-    
+
     .toc-sidebar {
         width: 100%;
         position: static;
         max-height: none;
         margin-top: 1.5rem;
-        order: -1; 
+        order: -1;
     }
-}
+}

app.js assets/js/app.jsapp.js renamed to assets/js/app.js

@@ -15,7 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
     function initTheme() {
         const savedTheme = localStorage.getItem('theme');
         const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        
+
         if (savedTheme === 'dark' || (!savedTheme && systemDark)) {
             document.documentElement.setAttribute('data-theme', 'dark');
             moonIcon.classList.add('hidden');
@@ -30,10 +30,10 @@ document.addEventListener('DOMContentLoaded', () => {
     themeToggle.addEventListener('click', () => {
         const currentTheme = document.documentElement.getAttribute('data-theme');
         const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-        
+
         document.documentElement.setAttribute('data-theme', newTheme);
         localStorage.setItem('theme', newTheme);
-        
+
         if (newTheme === 'dark') {
             moonIcon.classList.add('hidden');
             sunIcon.classList.remove('hidden');
@@ -48,7 +48,7 @@ document.addEventListener('DOMContentLoaded', () => {
         if (!notesConfig || notesConfig.length === 0) {
             notesGrid.innerHTML = `
                 <div style="grid-column: 1 / -1; text-align: center; color: var(--text-secondary); padding: 2rem;">
-                    没有发现笔记。请运行 <code>python3 update_notes.py</code> 来生成配置。
+                    没有发现笔记。请运行 <code>python3 scripts/update_notes.py</code> 来生成配置。
                 </div>`;
             return;
         }
@@ -104,23 +104,23 @@ document.addEventListener('DOMContentLoaded', () => {
                 <div class="spinner"></div>
                 <p>加载笔记中...</p>
             </div>`;
-        
+
         githubEditLink.href = `${GITHUB_REPO_URL}${notePath}`;
 
         try {
             // Append a unique query param to bypass cache during development
             const resp = await fetch(notePath + '?v=' + new Date().getTime());
             if (!resp.ok) throw new Error(`HTTP error! status: ${resp.status}`);
             const text = await resp.text();
-            
+
             // Parse Markdown to HTML
             const html = marked.parse(text);
             markdownContent.innerHTML = html;
-            
+
             markdownContent.querySelectorAll('pre code').forEach((block) => {
                 hljs.highlightElement(block);
             });
-            
+
             buildTableOfContents();
             addCopyButtons();
         } catch (error) {
@@ -129,7 +129,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 <div style="color: #ef4444; padding: 2rem; text-align: center;">
                     <h2>无法加载笔记 😢</h2>
                     <p style="margin-top: 1rem;">找不到文件: <code>${notePath}</code></p>
-                    <p style="margin-top: 0.5rem; font-size: 0.9em; color: var(--text-secondary);">请检查路径是否正确，或重新生成 config.js。</p>
+                    <p style="margin-top: 0.5rem; font-size: 0.9em; color: var(--text-secondary);">请检查路径是否正确，或重新生成 assets/js/config.js。</p>
                 </div>
             `;
         }
@@ -139,10 +139,10 @@ document.addEventListener('DOMContentLoaded', () => {
     function buildTableOfContents() {
         const tocList = document.getElementById('toc-list');
         if (!tocList) return;
-        
+
         tocList.innerHTML = '';
         const headings = markdownContent.querySelectorAll('h1, h2, h3, h4');
-        
+
         if (headings.length === 0) {
             tocList.innerHTML = '<li style="color: var(--text-secondary); font-size: 0.875rem;">无目录结构</li>';
             return;
@@ -155,13 +155,13 @@ document.addEventListener('DOMContentLoaded', () => {
                 if (!id) id = `heading-${index}`;
                 let uniqueId = id;
                 let counter = 1;
-                while(document.getElementById(uniqueId)) {
+                while (document.getElementById(uniqueId)) {
                     uniqueId = `${id}-${counter}`;
                     counter++;
                 }
                 heading.id = uniqueId;
             }
-            
+
             const level = parseInt(heading.tagName.substring(1));
             tocHTML += `<li class="toc-h${level}"><a href="#${heading.id}">${heading.textContent}</a></li>`;
         });
@@ -177,15 +177,14 @@ document.addEventListener('DOMContentLoaded', () => {
                 const targetId = e.target.getAttribute('href').substring(1);
                 const targetElement = document.getElementById(targetId);
                 if (targetElement) {
-                    const yOffset = -80; 
+                    const yOffset = -80;
                     const y = targetElement.getBoundingClientRect().top + window.pageYOffset + yOffset;
-                    window.scrollTo({top: y, behavior: 'smooth'});
+                    window.scrollTo({ top: y, behavior: 'smooth' });
                 }
             }
         });
     }
 
-
     // --- Code Copy ---
     function addCopyButtons() {
         const preBlocks = markdownContent.querySelectorAll('pre');
@@ -194,16 +193,16 @@ document.addEventListener('DOMContentLoaded', () => {
             button.className = 'copy-btn';
             button.title = 'Copy code';
             button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
-            
+
             button.addEventListener('click', async () => {
                 const codeBlock = pre.querySelector('code');
                 if (!codeBlock) return;
-                
+
                 try {
                     await navigator.clipboard.writeText(codeBlock.innerText);
                     button.classList.add('copied');
                     button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
-                    
+
                     setTimeout(() => {
                         button.classList.remove('copied');
                         button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
@@ -212,7 +211,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     console.error('Failed to copy text: ', err);
                 }
             });
-            
+
             pre.appendChild(button);
         });
     }
@@ -237,4 +236,4 @@ document.addEventListener('DOMContentLoaded', () => {
     // Bootstrap
     initTheme();
     handleRoute();
-});
+});

config.js assets/js/config.jsconfig.js renamed to assets/js/config.js

@@ -1,13 +1,9 @@
-// DO NOT EDIT manually. Generated by update_notes.py
+// DO NOT EDIT manually. Generated by scripts/update_notes.py
 const notesConfig = [
     {
         "title": "agent rules",
         "path": "agent_rules/README.md"
     },
-    {
-        "title": "OpenClaw Codebase Patterns",
-        "path": "agent_rules/openclaw/copilot.instructions.md"
-    },
     {
         "title": "😽 Docker",
         "path": "docker/README.md"
@@ -16,10 +12,6 @@ const notesConfig = [
         "title": "👿 novnc",
         "path": "docker/novnc/README.md"
     },
-    {
-        "title": "😨 1. test",
-        "path": "emoji4md/test.md"
-    },
     {
         "title": "😻 git",
         "path": "git/README.md"
@@ -44,14 +36,6 @@ const notesConfig = [
         "title": "Agent Skills",
         "path": "skills/README.md"
     },
-    {
-        "title": "ROS2 Development Skill",
-        "path": "skills/ros2_base.md"
-    },
-    {
-        "title": "ROS2 Web Integration Skill",
-        "path": "skills/ros2_web_integration_skill.md"
-    },
     {
         "title": "😣 SSH",
         "path": "ssh/README.md"

index.html

@@ -15,7 +15,7 @@
     <link rel="stylesheet"
         href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dracula.min.css">
     <!-- Custom CSS -->
-    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./assets/css/style.css">
 </head>
 
 <body>
@@ -104,8 +104,8 @@ <h1 class="hero-title">📝 ConfigNote</h1>
     <!-- Scripts -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-    <script src="./config.js"></script>
-    <script src="./app.js"></script>
+    <script src="./assets/js/config.js"></script>
+    <script src="./assets/js/app.js"></script>
 </body>
 
 </html>

scripts/update_notes.py

@@ -0,0 +1,69 @@
+#!/usr/bin/env python3
+import json
+import os
+from pathlib import Path
+
+# 忽略的目录和文件
+IGNORE_DIRS = {'.git', 'docs', 'js', 'css', 'assets', 'public', 'scripts'}
+README_FILENAME = 'README.md'
+REPO_ROOT = Path(__file__).resolve().parent.parent
+CONFIG_OUTPUT_PATH = REPO_ROOT / 'assets' / 'js' / 'config.js'
+
+
+def get_markdown_title(filepath):
+    """尝试从 markdown 文件中读取第一个一级标题作为标题。"""
+    try:
+        with open(filepath, 'r', encoding='utf-8') as file:
+            for line in file:
+                if line.startswith('# '):
+                    return line[2:].strip()
+    except Exception as error:
+        print(f"Error reading {filepath}: {error}")
+
+    return Path(filepath).parent.name or Path(filepath).name
+
+
+def scan_notes(root_dir):
+    notes = []
+
+    for dirpath, dirnames, filenames in os.walk(root_dir):
+        current_dir = Path(dirpath)
+        dirnames[:] = [name for name in dirnames if not name.startswith('.') and name not in IGNORE_DIRS]
+
+        if current_dir == root_dir:
+            continue
+
+        if README_FILENAME not in filenames:
+            continue
+
+        filepath = current_dir / README_FILENAME
+        rel_path = filepath.relative_to(root_dir).as_posix()
+
+        notes.append({
+            'title': get_markdown_title(filepath),
+            'path': rel_path,
+        })
+
+    notes.sort(key=lambda note: note['path'])
+    return notes
+
+
+def generate_config_js(notes, output_path=CONFIG_OUTPUT_PATH):
+    """生成给前端使用的 JS 配置文件。"""
+    output_path.parent.mkdir(parents=True, exist_ok=True)
+    config_content = (
+        "// DO NOT EDIT manually. Generated by scripts/update_notes.py\n"
+        f"const notesConfig = {json.dumps(notes, ensure_ascii=False, indent=4)};\n"
+    )
+
+    with open(output_path, 'w', encoding='utf-8') as file:
+        file.write(config_content)
+
+    print(f"✅ 成功生成配置，共找到 {len(notes)} 篇笔记。")
+    print(f"数据已写入到 {output_path}")
+
+
+if __name__ == '__main__':
+    print('开始扫描 Markdown 笔记...')
+    notes = scan_notes(REPO_ROOT)
+    generate_config_js(notes)