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>
2026-08-26 09:19:25 +08:00
parent f8123e829b
commit a0c13f807a
17 changed files with 1021 additions and 0 deletions
@@ -0,0 +1,131 @@
+/* 共用排版：所有版型與風格都吃這一份，顏色與字型一律走 CSS 變數，由風格檔決定。 */
+*, *::before, *::after { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--font);
+  font-size: 16px;
+  line-height: 1.75;
+  -webkit-text-size-adjust: 100%;
+}
+
+.page-head {
+  padding: 2.5rem 0 1.5rem;
+  border-bottom: 2px solid var(--accent);
+}
+
+.page-head h1 {
+  margin: 0 0 .35rem;
+  font-family: var(--font-head);
+  font-size: 2rem;
+  line-height: 1.3;
+  color: var(--head-fg);
+}
+
+.subtitle { margin: 0 0 .5rem; color: var(--muted); font-size: 1.05rem; }
+.subtitle:empty { display: none; }
+
+.meta {
+  margin: 0;
+  color: var(--muted);
+  font-size: .85rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.meta a.source { color: var(--accent); text-decoration: none; word-break: break-all; }
+.meta a.source:hover { text-decoration: underline; }
+
+.content { padding: 1.5rem 0 3rem; }
+
+.content h1, .content h2, .content h3, .content h4 {
+  font-family: var(--font-head);
+  color: var(--head-fg);
+  line-height: 1.35;
+  margin: 2rem 0 .75rem;
+}
+
+.content h1 { font-size: 1.7rem; }
+.content h2 { font-size: 1.4rem; }
+.content h3 { font-size: 1.15rem; }
+.content h4 { font-size: 1rem; }
+
+.content p { margin: 0 0 1rem; }
+.content ul, .content ol { margin: 0 0 1rem; padding-left: 1.5rem; }
+.content li { margin: .25rem 0; }
+.content li input[type="checkbox"] { margin-right: .4rem; }
+
+.content a { color: var(--accent); text-decoration: none; }
+.content a:hover { text-decoration: underline; }
+
+.content blockquote {
+  margin: 1rem 0;
+  padding: .6rem 1rem;
+  border-left: 4px solid var(--accent);
+  background: var(--card);
+  color: var(--muted);
+}
+
+.content code {
+  font-family: var(--font-mono);
+  font-size: .9em;
+  background: var(--code-bg);
+  padding: .15em .4em;
+  border-radius: 4px;
+}
+
+.content pre {
+  margin: 0 0 1rem;
+  padding: 1rem;
+  overflow-x: auto;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.content pre code { background: none; padding: 0; }
+
+/* 表格一律可橫向捲動，寬表格不會把整頁撐開 */
+.table-wrap { overflow-x: auto; margin: 0 0 1.25rem; }
+
+.content table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: .95rem;
+}
+
+.content th, .content td {
+  border: 1px solid var(--border);
+  padding: .5rem .7rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+.content th { background: var(--table-head-bg); color: var(--head-fg); font-weight: 600; }
+.content tbody tr:nth-child(even) { background: var(--stripe); }
+
+.content img { max-width: 100%; height: auto; }
+.content hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
+
+.page-foot {
+  padding: 1.25rem 0 2rem;
+  border-top: 1px solid var(--border);
+  color: var(--muted);
+  font-size: .8rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: .75rem;
+  justify-content: space-between;
+}
+
+.badge {
+  display: inline-block;
+  padding: .1rem .5rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  font-size: .75rem;
+  color: var(--muted);
+}