[refactor] split Web source code into simple modules based on TSX, MD…

…X, DOM Renderer, Bootstrap & Parcel
kaiyuanshe · Jun 19, 2024 · 3200697 · 3200697
1 parent 68b2a1c
commit 3200697
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 72 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,9 @@
 # downloaded content
-downloads
+downloads
+
+# Web front-end
+node_modules/
+package-lock.json
+yarn.lock
+.parcel-cache/
+dist/
diff --git a/.parcelrc b/.parcelrc
@@ -0,0 +1,6 @@
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.{md,mdx}": ["parcel-transformer-mdx"]
+    }
+}
diff --git a/index.html b/index.html
@@ -4,77 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>癌症患者支援数据库</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 20px;
-        }
-        .guide {
-            margin-bottom: 20px;
-        }
-        .guide h3 {
-            margin: 0 0 5px;
-        }
-        .guide a {
-            color: blue;
-            text-decoration: none;
-        }
-        .section {
-            margin-bottom: 40px;
-        }
-        .section h2 {
-            border-bottom: 2px solid #000;
-            padding-bottom: 10px;
-        }
-    </style>
+    <link
+        rel="stylesheet"
+        href="https://unpkg.com/[email protected]/dist/css/bootstrap-utilities.min.css"
+    >
+    <script type="module" src="src/index.tsx"></script>
 </head>
-<body>
-    <h1>癌症患者支援数据库</h1>
-    <p><a href="https://github.com/xycjscs/KnowledgeBase-xiaoyibao" target="_blank">访问GitHub页面</a></p>
-
-    <div id="nutrition" class="section">
-        <h2>营养建议</h2>
-        <div class="guides"></div>
-    </div>
-
-    <div id="psychological" class="section">
-        <h2>心理支持</h2>
-        <div class="guides"></div>
-    </div>
-
-    <div id="hyperuricemia" class="section">
-        <h2>高尿酸血症指南</h2>
-        <div class="guides"></div>
-    </div>
-
-    <script>
-        async function fetchAndRenderData(url, containerId) {
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                const container = document.getElementById(containerId).querySelector('.guides');
-                data.forEach(guide => {
-                    const guideElement = document.createElement('div');
-                    guideElement.classList.add('guide');
-                    guideElement.innerHTML = `
-                        <h3>《${guide.name}》</h3>
-                        <p>${guide.description}</p>
-                        <p><strong>作者:</strong> ${guide.author}</p>
-                        <p><a href="${guide.link}" target="_blank">阅读指南</a></p>
-                        <p></p>
-                    `;
-                    container.appendChild(guideElement);
-                });
-            } catch (error) {
-                console.error('Error fetching data:', error);
-            }
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            fetchAndRenderData('nutritionDB.json', 'nutrition');
-            fetchAndRenderData('PsychologicalDB.json', 'psychological');
-            fetchAndRenderData('HyperuricemiaDB.json', 'hyperuricemia');
-        });
-    </script>
+<body class="m-4">
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@xiaoyibao/knowledge-base",
+  "version": "0.2.0",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "dom-renderer": "^2.1.8",
+    "web-utility": "^4.4.0"
+  },
+  "devDependencies": {
+    "@parcel/config-default": "~2.12.0",
+    "parcel": "~2.12.0",
+    "parcel-transformer-mdx": "^0.3.2"
+  },
+  "scripts": {
+    "clean": "rm -rf .parcel-cache/ dist/",
+    "start": "npm run clean  &&  parcel index.html",
+    "build": "npm run clean  &&  parcel build index.html --public-url ."
+  }
+}
diff --git a/src/component/GuideCard.tsx b/src/component/GuideCard.tsx
@@ -0,0 +1,19 @@
+import NutritionDB from "../data/nutritionDB.json";
+
+export type Guide = (typeof NutritionDB)[0];
+
+export const GuideCard = ({ name, description, author, link }: Guide) => (
+  <li className="guide">
+    <h3 className="mb-1">《{name}》</h3>
+    <p>{description}</p>
+    <p>
+      <strong>作者:</strong> {author}
+    </p>
+    <p>
+      <a className="text-decoration-none" href={link} target="_blank">
+        阅读指南
+      </a>
+    </p>
+    <p></p>
+  </li>
+);
diff --git a/src/component/GuideSection.tsx b/src/component/GuideSection.tsx
@@ -0,0 +1,17 @@
+import { Guide, GuideCard } from "./GuideCard";
+
+export interface GuideSectionProps extends Record<"id" | "title", string> {
+  data: Guide[];
+}
+
+export const GuideSection = ({ id, title, data }: GuideSectionProps) => (
+  <section id={id}>
+    <h2 className="border-bottom border-black border-2 pb-2">{title}</h2>
+
+    <ul className="d-flex flex-column gap-4 guides">
+      {data.map((guide) => (
+        <GuideCard {...guide} />
+      ))}
+    </ul>
+  </section>
+);
diff --git a/HyperuricemiaDB.json → src/data/HyperuricemiaDB.json b/HyperuricemiaDB.json → src/data/HyperuricemiaDB.json
diff --git a/PsychologicalDB.json → src/data/PsychologicalDB.json b/PsychologicalDB.json → src/data/PsychologicalDB.json
diff --git a/nutritionDB.json → src/data/nutritionDB.json b/nutritionDB.json → src/data/nutritionDB.json
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,6 @@
+import { DOMRenderer } from "dom-renderer";
+import { documentReady } from "web-utility";
+
+import IndexPage from "./page/index.mdx";
+
+documentReady.then(() => new DOMRenderer().render(<IndexPage />));
diff --git a/src/page/index.mdx b/src/page/index.mdx
@@ -0,0 +1,19 @@
+import { GuideSection } from "../component/GuideSection";
+
+import HyperuricemiaDB from "../data/HyperuricemiaDB.json";
+import PsychologicalDB from "../data/PsychologicalDB.json";
+import NutritionDB from "../data/nutritionDB.json";
+
+# 癌症患者支援数据库
+
+[访问 GitHub 页面](https://github.com/xycjscs/KnowledgeBase-xiaoyibao)
+
+<GuideSection id="nutrition" title="营养建议" data={NutritionDB} />
+
+<GuideSection id="psychological" title="心理支持" data={PsychologicalDB} />
+
+<GuideSection
+  id="hyperuricemia"
+  title="高尿酸血症指南"
+  data={HyperuricemiaDB}
+/>
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "dom-renderer"
+  }
+}