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:
@@ -0,0 +1,90 @@
|
||||
<!-- 投影片:一個 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>
|
||||
body { display: flex; flex-direction: column; min-height: 100vh; }
|
||||
.shell { flex: 1; display: flex; flex-direction: column; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 1.5rem; }
|
||||
.page-head { padding: 1.5rem 0 1rem; }
|
||||
.page-head h1 { font-size: 1.5rem; }
|
||||
.content { flex: 1; padding: 0; }
|
||||
.jsc-section { display: none; padding: 1.5rem 0; }
|
||||
.jsc-section.is-active { display: block; animation: fade .18s ease-out; }
|
||||
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
|
||||
.jsc-section h2 { margin-top: 0; font-size: 2rem; }
|
||||
.jsc-section p, .jsc-section li { font-size: 1.15rem; }
|
||||
.deck-bar {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .75rem;
|
||||
padding: .75rem 0 1.25rem;
|
||||
background: var(--bg);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.deck-bar button {
|
||||
font: inherit;
|
||||
color: var(--fg);
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: .35rem .9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.deck-bar button:hover { border-color: var(--accent); color: var(--accent); }
|
||||
.deck-pos { color: var(--muted); font-size: .9rem; margin-left: auto; }
|
||||
@media print {
|
||||
.jsc-section, .jsc-section.is-active { display: block; page-break-after: always; }
|
||||
.deck-bar { display: none; }
|
||||
}
|
||||
</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>
|
||||
<div class="deck-bar">
|
||||
<button type="button" id="prev">← 上一頁</button>
|
||||
<button type="button" id="next">下一頁 →</button>
|
||||
<span class="badge">{{LAYOUT}}/{{STYLE_NAME}}</span>
|
||||
<span class="deck-pos" id="pos"></span>
|
||||
</div>
|
||||
</div>
|
||||
<script>{{BASE_JS}}</script>
|
||||
<script>
|
||||
(function () {
|
||||
var content = document.getElementById('content');
|
||||
jsc.wrapTables(content);
|
||||
var slides = jsc.splitBySection(content);
|
||||
var at = 0;
|
||||
var pos = document.getElementById('pos');
|
||||
|
||||
function show(i) {
|
||||
if (!slides.length) return;
|
||||
at = Math.max(0, Math.min(slides.length - 1, i));
|
||||
slides.forEach(function (s, n) { s.classList.toggle('is-active', n === at); });
|
||||
pos.textContent = (at + 1) + ' / ' + slides.length;
|
||||
window.scrollTo({ top: 0 });
|
||||
}
|
||||
|
||||
document.getElementById('prev').addEventListener('click', function () { show(at - 1); });
|
||||
document.getElementById('next').addEventListener('click', function () { show(at + 1); });
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'ArrowLeft' || e.key === 'PageUp') show(at - 1);
|
||||
if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') show(at + 1);
|
||||
});
|
||||
show(0);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user