fy-docs 0.1.8

Cargo subcommand for building and previewing Typst specification documents
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

<!DOCTYPE html>
<html lang="{{LANG}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{TITLE}} ยท fy-docs</title>
<script>
  (function () {
    var stored;
    try { stored = localStorage.getItem('fydocs-theme'); } catch (_) { stored = null; }
    if (stored === 'dark') stored = 'navy';
    if (!stored) stored = 'preference';
    var theme = stored === 'preference'
      ? (matchMedia('(prefers-color-scheme: dark)').matches ? 'navy' : 'light')
      : stored;
    var root = document.documentElement;
    ['light', 'rust', 'coal', 'navy', 'ayu', 'dark'].forEach(function (n) { root.classList.remove(n); });
    root.classList.add(theme);
  })();
</script>
<link rel="stylesheet" href="fy-docs.css">
<link rel="stylesheet" href="typst.css">
</head>
<body>
<div class="fy-shell">
  <header class="fy-topbar">
    <div class="fy-toolbar-left">
      <button id="fy-sidebar-toggle" class="fy-icon-btn" aria-expanded="true" aria-controls="doc-sidebar" title="{{SIDEBAR_TOGGLE}}">
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
          <line x1="3" y1="5" x2="21" y2="5"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="19" x2="11" y2="19"/>
        </svg>
      </button>
      <div class="fy-theme-wrap">
        <button id="fy-theme-toggle" class="fy-icon-btn" aria-expanded="false" aria-haspopup="true" title="{{THEME}}">
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M12 22a10 10 0 1 1 10-10c0 1.7-1.3 3-3 3h-1.6a1.4 1.4 0 0 0-1 2.4c.3.3.5.7.5 1.1A1.5 1.5 0 0 1 15.4 22Z"/>
            <circle cx="7.5" cy="11.5" r="1.1" fill="currentColor" stroke="none"/><circle cx="10" cy="7.5" r="1.1" fill="currentColor" stroke="none"/><circle cx="14.5" cy="7" r="1.1" fill="currentColor" stroke="none"/><circle cx="17.5" cy="10.5" r="1.1" fill="currentColor" stroke="none"/>
          </svg>
        </button>
        <div id="fy-theme-menu" class="fy-theme-menu" role="menu" aria-label="{{THEME}}" hidden>
          <button role="menuitemradio" data-theme="preference">{{SYSTEM_THEME}}</button>
          <button role="menuitemradio" data-theme="light">Light</button>
          <button role="menuitemradio" data-theme="rust">Rust</button>
          <button role="menuitemradio" data-theme="coal">Coal</button>
          <button role="menuitemradio" data-theme="navy">Navy</button>
          <button role="menuitemradio" data-theme="ayu">Ayu</button>
        </div>
      </div>
      <div class="fy-search-wrap">
        <button id="fy-search-toggle" class="fy-icon-btn" aria-expanded="false" aria-controls="fy-search-panel" title="{{SEARCH}}">
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m16 16 4.5 4.5"/></svg>
        </button>
        <div id="fy-search-panel" class="fy-search-panel" hidden>
          <label for="fy-search-input">{{SEARCH_DOCUMENT}}</label>
          <input id="fy-search-input" type="search" autocomplete="off" placeholder="{{SEARCH_PLACEHOLDER}}">
          <div id="fy-search-results" class="fy-search-results" aria-live="polite"></div>
        </div>
      </div>
      {{LANG_MENU}}
    </div>
    <div class="fy-toolbar-title">{{TITLE}}</div>
    <div class="fy-toolbar-right">
      <button id="fy-print" class="fy-icon-btn" title="{{PRINT}}">
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9V3h12v6"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1-2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 14h12v7H6z"/></svg>
      </button>
      {{GITHUB_LINK}}
    </div>
  </header>
  <div class="fy-columns">
    <div id="fy-scrim" class="fy-scrim" aria-hidden="true"></div>
    <aside id="doc-sidebar" class="fy-sidebar">
      <div class="fy-sidebar-brand">{{NAME}}</div>
      <div class="fy-sidebar-title">{{TABLE_OF_CONTENTS}}</div>
    </aside>
    <div id="fy-sidebar-resize" class="fy-sidebar-resize" aria-hidden="true"></div>
    <main class="fy-content">
      <div class="fy-page">
        <div id="doc-body" class="fy-doc fy-doc-embedded">
{{BODY}}
        </div>
      </div>
    </main>
  </div>
</div>
<script src="fy-docs.js" defer></script>
<script src="live.js"></script>
</body>
</html>