SUNLITVALLEYGREGIFICATION-OVERVIEW

Sunlit Valley · Gregification 整合包的介绍站。纯静态，零依赖，可直接丢给 Netlify。

快速开始

npm run dev      # http://localhost:8080
npm run build    # 产出 dist/
npm run preview  # 用 dist/ 起服务器，模拟线上

没有 npm install 这一步 —— 没有任何依赖，脚本只用 Node 内置模块。

内容

• Hero — 包名、一句话定位、417 模组 / 63 章节 / 2198 任务 / 21 仓库
• 实时状态条 — 每 5 分钟对 dx.frp-cat.com:62618 做一次 Minecraft Server List Ping，显示在线人数 / 上限 / 延迟 / MOTD
• 背景音乐 — Web Audio 现场合成的 D 大调轻快循环（I–V–vi–IV，92 BPM），不加载任何音频文件；右下角可开关，首次交互自动起播，关掉后记住选择
• 六条改动主线 — 神秘工业、生物湿件、深空当铺、中州联动、太空计划、农业与美食
• 主要模组 — 15 个撑起主线的模组家族，每张卡片底下一行是跟着一起进包的附属
• 进度线 L0–L4 — 要素地基 → 桥 → 产能 → 生物 → 任务引导
• 21 个开源仓库 — 可按「移植 14 / 原创 6 / 整合包 1」筛选，全部指向 github.com/MineRealms
• 技术栈 — 运行环境、核心模组、内容管线

结构

index.html            单页，所有内容内联
assets/styles.css     亮色扁平主题（无阴影，靠边框分层）
assets/app.js         仓库筛选 + 滚动淡入（IntersectionObserver）
scripts/build.js      产物生成：复制到 dist/ 并做完整性校验
scripts/serve.js      零依赖静态服务器（本地预览用，含 /api/status 代理）
scripts/ping-check.mjs 命令行自检：node scripts/ping-check.mjs host:port
netlify/functions/status.mjs  Server List Ping（TCP 手搓协议，零依赖）
netlify.toml          command=npm run build, publish=dist, functions=netlify/functions
tools/scrape_wiki.py  把官方 wiki 整站扒成 data/wiki/（标准库，可断点续爬）

官方 wiki 存档

教程页的原料来自 https://sunlitvalley.miraheze.org（Society: Sunlit Valley Wiki， MediaWiki 1.46）。用 tools/scrape_wiki.py 整站抓下来：

python tools/scrape_wiki.py            # 增量：已存在的页面跳过
python tools/scrape_wiki.py --refresh  # 全量重抓
python tools/scrape_wiki.py --list     # 只看页面清单

产出 data/wiki/：

文件	内容
index.json	站点信息 + 150 个页面清单（含目录/摘要/图片）+ Main Page 的导航表
pages/<slug>.json	每页 wikitext / 清洗后的 html / sections / links / images / revid
images/<hash>-<name>	页面里引用到的图片（355 张，约 3.2MB）

清洗规则：去掉 mw-editsection 编辑按钮、拆掉 mw-heading 外层 div、只保留标题 id / 表格 colspan / rowspan 这类必要属性；站内链接改成 #/wiki/<页面> + data-wiki， 红链标 data-missing="1"；Special:/File:/Category: 等命名空间链接改回原站绝对地址。

data/wiki/ 不进 dist（build.js 里显式跳过），教程页会另外生成精简包。

服务器状态是怎么拿到的

浏览器不能开裸 TCP，所以 SLP 放在 Netlify Function 里跑：

浏览器 ──fetch /api/status──▶ Function ──TCP handshake + status request──▶ dx.frp-cat.com:62618
        ◀── JSON ────────────        ◀── JSON（MOTD/players/version）────

• 前端 setInterval 300000ms（5 分钟），页面重新可见且已过期时补一次
• 函数侧 cache-control: public, max-age=60, s-maxage=120，多人同时打开不会把服务器 ping 爆
• 超时 8 秒，失败返回 {ok:false}，前端降级成「不可达」而不是空白
• 兜底链路：/api/status 拿到的不是 JSON（静态托管没配 Function 时它会回落成 index.html） → 自动改走公开的 api.mcsrvstat.us/3/<host:port>，页面上会标「公共 API」
• npm run build 会把 netlify/ 一起复制进 dist/，所以把 dist 拖到 Netlify Drop 也能带上 Function
• 换服：改 netlify/functions/status.mjs 里的 MC_HOST / MC_PORT 环境变量，或直接改默认值

构建校验

npm run build 除了复制文件，还会检查：

1. 四个源文件都存在
2. HTML 引用了 assets/styles.css 与 assets/app.js
3. HTML 有 <meta charset> 与 viewport
4. 筛选按钮上的计数与实际卡片数一致（改内容忘记更新计数会直接构建失败）
5. assets/app.js 通过 node --check
6. 首页有实时状态条（id="live" 且带 data-endpoint="/api/status"）
7. netlify/functions/status.mjs 存在且通过 node --check
8. netlify.toml 里配了 functions 目录与 /api/status 重写

部署到 Netlify

拖拽

先 npm run build，把 dist/ 拖到 https://app.netlify.com/drop 。

连 Git（推荐）

1. 建一个空仓库，例如 MineRealms/SUNLITVALLEYGREGIFICATION-OVERVIEW
2. 推送：

   git remote add origin https://github.com/MineRealms/SUNLITVALLEYGREGIFICATION-OVERVIEW.git
   git branch -M main
   git push -u origin main

3. Netlify → New site from Git → 选该仓库
4. 构建设置会自动读 netlify.toml（npm run build / dist），直接 Deploy

之后每次 push 到 main 自动重新发布。

改内容

• 加仓库：在 #repoGrid 里复制一个 <a class="repo" data-kind="port|original|pack"> 块，同时改筛选按钮上的计数（不改会构建失败）
• 加特色：在 .cards 里复制一个 <article class="card">
• 改配色：assets/styles.css 顶部的 :root 变量