From 3200697064c400bdeab8bf64f167d0c0561983bf Mon Sep 17 00:00:00 2001 From: South Drifted Date: Wed, 19 Jun 2024 21:21:10 +0000 Subject: [PATCH] [refactor] split Web source code into simple modules based on TSX, MDX, DOM Renderer, Bootstrap & Parcel --- .gitignore | 9 ++- .parcelrc | 6 ++ index.html | 77 ++----------------- package.json | 19 +++++ src/component/GuideCard.tsx | 19 +++++ src/component/GuideSection.tsx | 17 ++++ .../data/HyperuricemiaDB.json | 0 .../data/PsychologicalDB.json | 0 nutritionDB.json => src/data/nutritionDB.json | 0 src/index.tsx | 6 ++ src/page/index.mdx | 19 +++++ tsconfig.json | 8 ++ 12 files changed, 108 insertions(+), 72 deletions(-) create mode 100644 .parcelrc create mode 100644 package.json create mode 100644 src/component/GuideCard.tsx create mode 100644 src/component/GuideSection.tsx rename HyperuricemiaDB.json => src/data/HyperuricemiaDB.json (100%) rename PsychologicalDB.json => src/data/PsychologicalDB.json (100%) rename nutritionDB.json => src/data/nutritionDB.json (100%) create mode 100644 src/index.tsx create mode 100644 src/page/index.mdx create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore index 4bcf93e..a82d4dd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,9 @@ # downloaded content -downloads \ No newline at end of file +downloads + +# Web front-end +node_modules/ +package-lock.json +yarn.lock +.parcel-cache/ +dist/ diff --git a/.parcelrc b/.parcelrc new file mode 100644 index 0000000..7dac642 --- /dev/null +++ b/.parcelrc @@ -0,0 +1,6 @@ +{ + "extends": "@parcel/config-default", + "transformers": { + "*.{md,mdx}": ["parcel-transformer-mdx"] + } +} \ No newline at end of file diff --git a/index.html b/index.html index 861487d..80fa43a 100644 --- a/index.html +++ b/index.html @@ -4,77 +4,12 @@ 癌症患者支援数据库 - + + - -

癌症患者支援数据库

-

访问GitHub页面

- -
-

营养建议

-
-
- -
-

心理支持

-
-
- -
-

高尿酸血症指南

-
-
- - + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..5234b87 --- /dev/null +++ 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 new file mode 100644 index 0000000..525c9e5 --- /dev/null +++ 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) => ( +
  • +

    《{name}》

    +

    {description}

    +

    + 作者: {author} +

    +

    + + 阅读指南 + +

    +

    +
    • +); diff --git a/src/component/GuideSection.tsx b/src/component/GuideSection.tsx new file mode 100644 index 0000000..3346d32 --- /dev/null +++ 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) => ( +
    +

    {title}

    + + +
    +); diff --git a/HyperuricemiaDB.json b/src/data/HyperuricemiaDB.json similarity index 100% rename from HyperuricemiaDB.json rename to src/data/HyperuricemiaDB.json diff --git a/PsychologicalDB.json b/src/data/PsychologicalDB.json similarity index 100% rename from PsychologicalDB.json rename to src/data/PsychologicalDB.json diff --git a/nutritionDB.json b/src/data/nutritionDB.json similarity index 100% rename from nutritionDB.json rename to src/data/nutritionDB.json diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..d272abd --- /dev/null +++ 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()); diff --git a/src/page/index.mdx b/src/page/index.mdx new file mode 100644 index 0000000..540d0b9 --- /dev/null +++ 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) + + + + + + diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..4018dd2 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "esModuleInterop": true, + "resolveJsonModule": true, + "jsx": "react-jsx", + "jsxImportSource": "dom-renderer" + } +}