forked from xycjscs/KnowledgeBase-xiaoyibao
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[refactor] split Web source code into simple modules based on TSX, MD…
…X, DOM Renderer, Bootstrap & Parcel
- Loading branch information
Showing
12 changed files
with
108 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,9 @@ | ||
# downloaded content | ||
downloads | ||
downloads | ||
|
||
# Web front-end | ||
node_modules/ | ||
package-lock.json | ||
yarn.lock | ||
.parcel-cache/ | ||
dist/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"extends": "@parcel/config-default", | ||
"transformers": { | ||
"*.{md,mdx}": ["parcel-transformer-mdx"] | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ." | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); |
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 />)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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} | ||
/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"compilerOptions": { | ||
"esModuleInterop": true, | ||
"resolveJsonModule": true, | ||
"jsx": "react-jsx", | ||
"jsxImportSource": "dom-renderer" | ||
} | ||
} |