feat(gitea): 新增 HTML 匯出與範本風格設定

What:新增 html-export 與 html-style 兩支技能、tools/html-render.sh 與 tools/html-style.sh 兩支工具,以及六種版型乘五種風格的 HTML 範本。

Why:wiki 頁與議題要拿給 Gitea 以外的人看時,只能複製 markdown;不同類型的文件也該有各自的版面,不是每份都長一樣。

How:版型(report、slide、dashboard、spec、timeline、onepager)決定內容怎麼排,風格(minimal、corporate、dark、print、vivid)決定看起來長怎樣,兩者自由搭配。哪一種頁面套哪一組由設定決定:專案的 .jsc/html-styles 優先,其次 $JSC_HOME/html-styles.conf,對不到退 DEFAULT,再對不到才用內建的 report/minimal。產出是單一 HTML 檔,CSS 與腳本全部內嵌。

Who:需要把 wiki 頁或議題寄給客戶、主管或跨團隊同事的人。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-26 09:19:25 +08:00
co-authored by Claude Opus 5
parent f8123e829b
commit a0c13f807a
17 changed files with 1021 additions and 0 deletions
+52
View File
@@ -0,0 +1,52 @@
<!-- 看板:每個 h2 一張卡片並排,適合進度、狀態、維護清單 -->
<!doctype html>
<html lang="zh-Hant" data-layout="{{LAYOUT}}" data-style="{{STYLE_NAME}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{TITLE}}</title>
<style>{{BASE}}</style>
<style>{{STYLE}}</style>
<style>
.shell { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }
.content { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; align-items: start; }
.jsc-section {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1.1rem 1.25rem;
overflow: hidden;
}
.jsc-section h2 { margin-top: 0; font-size: 1.15rem; }
.jsc-section table { font-size: .88rem; background: var(--bg); }
.jsc-section pre { background: var(--bg); }
/* 只有一段內容時不要孤零零一張窄卡片 */
.content.single { grid-template-columns: minmax(0, 1fr); }
@media print { .content { display: block; } .jsc-section { page-break-inside: avoid; margin-bottom: 1rem; } }
</style>
</head>
<body>
<div class="shell">
<header class="page-head">
<h1>{{TITLE}}</h1>
<p class="subtitle">{{SUBTITLE}}</p>
<p class="meta">{{SOURCE}}<span class="generated">產生時間:{{GENERATED}}</span></p>
</header>
<main class="content" id="content">{{CONTENT}}</main>
<footer class="page-foot">
<span class="badge">{{LAYOUT}}/{{STYLE_NAME}}</span>
<span>本頁由 jsc-gitea:html-export 產生</span>
</footer>
</div>
<script>{{BASE_JS}}</script>
<script>
(function () {
var content = document.getElementById('content');
jsc.wrapTables(content);
var cards = jsc.splitBySection(content);
if (cards.length < 2) content.classList.add('single');
})();
</script>
</body>
</html>