dev: rearrange shiroa template code

README.md

@@ -1,10 +1,10 @@
 # shiroa
 
-_shiroa_ (_Shiro A_, or _The White_, or _云笺_) is a simple tool for creating modern online (cloud) books in pure typst.
+[_shiroa_](https://github.com/Myriad-Dreamin/shiroa) (_Shiro A_, or _The White_, or _云笺_) is a simple tool for creating modern online (cloud) books in pure typst.
 
 ## Installation (shiroa CLI)
 
-There are multiple ways to install the shiroa CLI tool.
+There are multiple ways to install the [shiroa](https://github.com/Myriad-Dreamin/shiroa) CLI tool.
 Choose any one of the methods below that best suit your needs.
 
 ### Pre-compiled binaries
@@ -49,7 +49,7 @@ See the [Get-started](https://myriad-dreamin.github.io/shiroa/guide/get-started.
 
 We don't provide a watch command, but `shiroa` is designated to embracing all of the approaches to writing typst documents. It's feasible to preview your documents by following approaches (like previewing normal documents):
 
-- (Waiting for ready) once supporting local packages, you can write the book via [Official Web App](https://typst.app).
+- via [Official Web App](https://typst.app).
 
 - via VSCod(e,ium), see [Tinymist](https://marketplace.visualstudio.com/items?itemName=myriad-dreamin.tinymist) and [Typst Preview](https://marketplace.visualstudio.com/items?itemName=mgt19937.typst-preview).
 

contrib/typst/gh-ebook.typ

@@ -8,12 +8,13 @@
 #let resolve-inclusion(inc) = _resolve-inclusion-state.update(it => inc)
 
 #let project(title: "", authors: (), spec: "", content) = {
+  // Set document metadata early
   set document(
     author: authors,
     title: title,
   )
 
-  // inherit from gh-pages
+  // Inherit from gh-pages
   show: _page-project
 
   if title != "" {

contrib/typst/gh-pages.typ

@@ -1,80 +1,51 @@
 // This is important for shiroa to produce a responsive layout
 // and multiple targets.
-#import "@preview/shiroa:0.1.0": get-page-width, target, is-web-target, is-pdf-target, plain-text
+#import "@preview/shiroa:0.1.0": get-page-width, target, is-web-target, is-pdf-target, plain-text, templates
+#import templates: *
 
+// Metadata
 #let page-width = get-page-width()
 #let is-pdf-target = is-pdf-target()
 #let is-web-target = is-web-target()
 
-// todo: move theme style parser to another lib file
-#let theme-target = if target.contains("-") {
-  target.split("-").at(1)
-} else {
-  "light"
-}
-#let theme-style = toml("theme-style.toml").at(theme-target)
-
-#let is-dark-theme = theme-style.at("color-scheme") == "dark"
-#let is-light-theme = not is-dark-theme
-
-#let main-color = rgb(theme-style.at("main-color"))
-#let dash-color = rgb(theme-style.at("dash-color"))
-
+// Theme (Colors)
+#let (
+  style: theme-style,
+  is-dark: is-dark-theme,
+  is-light: is-light-theme,
+  main-color: main-color,
+  dash-color: dash-color,
+  code-extra-colors: code-extra-colors,
+) = book-theme-from(toml("theme-style.toml"), xml: it => xml(it))
+
+// Fonts
 #let main-font = (
   "Charter",
   "Source Han Serif SC",
   "Source Han Serif TC",
   // shiroa's embedded font
   "Linux Libertine",
 )
-
 #let code-font = (
   "BlexMono Nerd Font Mono",
   // shiroa's embedded font
   "DejaVu Sans Mono",
 )
 
-// todo: move code theme parser to another lib file
-#let code-theme-file = theme-style.at("code-theme")
-
-#let code-extra-colors = if code-theme-file.len() > 0 {
-  let data = xml(theme-style.at("code-theme")).first()
-
-  let find-child(elem, tag) = {
-    elem.children.find(e => "tag" in e and e.tag == tag)
-  }
-
-  let find-kv(elem, key, tag) = {
-    let idx = elem.children.position(e => "tag" in e and e.tag == "key" and e.children.first() == key)
-    elem.children.slice(idx).find(e => "tag" in e and e.tag == tag)
-  }
-
-  let plist-dict = find-child(data, "dict")
-  let plist-array = find-child(plist-dict, "array")
-  let theme-setting = find-child(plist-array, "dict")
-  let theme-setting-items = find-kv(theme-setting, "settings", "dict")
-  let background-setting = find-kv(theme-setting-items, "background", "string")
-  let foreground-setting = find-kv(theme-setting-items, "foreground", "string")
-  (bg: rgb(background-setting.children.first()), fg: rgb(foreground-setting.children.first()))
+// Sizes
+#let main-size = if is-web-target {
+  16pt
 } else {
-  (bg: rgb(239, 241, 243), fg: none)
+  10.5pt
 }
+#let heading-sizes = (26pt, 22pt, 14pt, 12pt, main-size)
+#let list-indent = 0.5em
 
-#let make-unique-label(it, disambiguator: 1) = label({
-  let k = plain-text(it).trim()
-  if disambiguator > 1 {
-    k + "_d" + str(disambiguator)
-  } else {
-    k
-  }
-})
-
-#let heading-reference(it, d: 1) = make-unique-label(it.body, disambiguator: d)
+/// The project function defines how your document looks.
+/// It takes your content and some metadata and formats it.
+/// Go ahead and customize it to your liking!
+#let project(title: "Typst Book", authors: (), kind: "page", body) = {
 
-// The project function defines how your document looks.
-// It takes your content and some metadata and formats it.
-// Go ahead and customize it to your liking!
-#let project(title: "Typst Book", authors: (), body) = {
   // set basic document metadata
   set document(
     author: authors,
@@ -104,49 +75,43 @@
     height: auto,
   ) if is-web-target
 
-  // set text style
+  // Set main text
   set text(
     font: main-font,
-    size: 16pt,
+    size: main-size,
     fill: main-color,
     lang: "en",
   )
 
-  let ld = state("label-disambiguator", (:))
-  let update-ld(k) = ld.update(it => {
-    it.insert(k, it.at(k, default: 0) + 1)
-    it
-  })
-  let get-ld(loc, k) = make-unique-label(k, disambiguator: ld.at(loc).at(k))
+  // Set main spacing
+  set enum(
+    indent: list-indent * 0.618,
+    body-indent: list-indent,
+  )
+  set list(
+    indent: list-indent * 0.618,
+    body-indent: list-indent,
+  )
+  set par(leading: 0.7em)
+  set block(spacing: 0.7em * 1.5)
 
-  // render a dash to hint headings instead of bolding it.
+  // Set text, spacing for headings
+  // Render a dash to hint headings instead of bolding it as well if it's for web.
   show heading: set text(weight: "regular") if is-web-target
   show heading: it => {
-    block({
+    let it = {
+      set text(size: heading-sizes.at(it.level))
       if is-web-target {
-        let title = plain-text(it.body)
-        if title != none {
-          let title = title.trim()
-          update-ld(title)
-          context (
-            {
-              let loc = here()
-              let dest = get-ld(loc, title)
-              let h = measure(it.body).height
-              place(
-                left,
-                dx: -20pt,
-                [
-                  #set text(fill: dash-color)
-                  #link(loc)[\#] #dest
-                ],
-              )
-            }
-          )
-        }
+        heading-hash(it, hash-color: dash-color)
       }
       it
-    })
+    }
+
+    block(
+      spacing: 0.7em * 1.5 * 1.2,
+      below: 0.7em * 1.2,
+      it,
+    )
   }
 
   // link setting
@@ -163,11 +128,11 @@
         width: 100%,
         inset: (x: 4pt, y: 5pt),
         radius: 4pt,
-        fill: code-extra-colors.at("bg"),
+        fill: code-extra-colors.bg,
         [
-          #set text(fill: code-extra-colors.at("fg")) if code-extra-colors.at("fg") != none
+          #set text(fill: code-extra-colors.fg) if code-extra-colors.fg != none
           #set par(justify: false)
-          #place(right, text(luma(110), it.lang))
+          // #place(right, text(luma(110), it.lang))
           #it
         ],
       )

packages/shiroa/lib.typ

@@ -33,3 +33,6 @@
 #import "supports-text.typ" as text-support: plain-text
 #import "media.typ"
 #import "utils.typ": get-book-meta, get-build-meta
+
+// Part IV: Templates, todo: move me to a new package
+#import "templates.typ"

packages/shiroa/meta-and-state.typ

@@ -29,11 +29,13 @@
 /// Whether the current compilation is for _pdf_
 #let is-pdf-target() = target.starts-with("pdf")
 
+/// Derived book variables from `sys.args`
 #let book-sys = (
   target: target,
   page-width: page-width,
   is-web-target: is-web-target(),
   is-pdf-target: is-pdf-target(),
 )
 
+/// Store the calculated metadata of the book.
 #let book-meta-state = state("book-meta", none)

packages/shiroa/summary.typ

@@ -1,6 +1,7 @@
 
 #import "utils.typ": _store-content
 #import "meta-and-state.typ": book-meta-state
+#import "supports-link.typ": link2page, cross-link-path-label
 
 /// Show template in [book.typ](https://myriad-dreamin.github.io/shiroa/format/book.html)
 ///

packages/shiroa/template-link.typ

@@ -0,0 +1,43 @@
+
+#import "supports-text.typ": plain-text
+
+#let make-unique-label(it, disambiguator: 1) = label({
+  let k = plain-text(it).trim()
+  if disambiguator > 1 {
+    k + "_d" + str(disambiguator)
+  } else {
+    k
+  }
+})
+
+#let label-disambiguator = state("label-disambiguator", (:))
+#let update-label-disambiguator(k) = label-disambiguator.update(it => {
+  it.insert(k, it.at(k, default: 0) + 1)
+  it
+})
+#let get-label-disambiguator(loc, k) = make-unique-label(k, disambiguator: label-disambiguator.at(loc).at(k))
+
+#let heading-reference(it, d: 1) = make-unique-label(it.body, disambiguator: d)
+
+#let heading-hash(it, hash-color: blue) = {
+  let title = plain-text(it.body)
+  if title != none {
+    let title = title.trim()
+    update-label-disambiguator(title)
+    context (
+      {
+        let loc = here()
+        let dest = get-label-disambiguator(loc, title)
+        let h = measure(it.body).height
+        place(
+          left,
+          dx: -20pt,
+          [
+            #set text(fill: hash-color)
+            #link(loc)[\#] #dest
+          ],
+        )
+      }
+    )
+  }
+}

packages/shiroa/template-theme.typ

@@ -0,0 +1,53 @@
+
+#import "sys.typ": target
+
+#let book-theme-from(preset, xml: xml, target: target) = {
+  // todo: move theme style parser to another lib file
+  let theme-target = if target.contains("-") {
+    target.split("-").at(1)
+  } else {
+    "light"
+  }
+  let theme-style = preset.at(theme-target)
+
+  let is-dark-theme = theme-style.at("color-scheme") == "dark"
+  let is-light-theme = not is-dark-theme
+
+  let main-color = rgb(theme-style.at("main-color"))
+  let dash-color = rgb(theme-style.at("dash-color"))
+
+  let code-theme-file = theme-style.at("code-theme")
+
+  let code-extra-colors = if code-theme-file.len() > 0 {
+    let data = xml(theme-style.at("code-theme")).first()
+
+    let find-child(elem, tag) = {
+      elem.children.find(e => "tag" in e and e.tag == tag)
+    }
+
+    let find-kv(elem, key, tag) = {
+      let idx = elem.children.position(e => "tag" in e and e.tag == "key" and e.children.first() == key)
+      elem.children.slice(idx).find(e => "tag" in e and e.tag == tag)
+    }
+
+    let plist-dict = find-child(data, "dict")
+    let plist-array = find-child(plist-dict, "array")
+    let theme-setting = find-child(plist-array, "dict")
+    let theme-setting-items = find-kv(theme-setting, "settings", "dict")
+    let background-setting = find-kv(theme-setting-items, "background", "string")
+    let foreground-setting = find-kv(theme-setting-items, "foreground", "string")
+    (bg: rgb(background-setting.children.first()), fg: rgb(foreground-setting.children.first()))
+  } else {
+    (bg: rgb(239, 241, 243), fg: none)
+  }
+
+
+  (
+    style: theme-style,
+    is-dark: is-dark-theme,
+    is-light: is-light-theme,
+    main-color: main-color,
+    dash-color: dash-color,
+    code-extra-colors: code-extra-colors,
+  )
+}

packages/shiroa/templates.typ

@@ -0,0 +1,2 @@
+#import "template-link.typ": *
+#import "template-theme.typ": *

packages/shiroa/typst.toml

@@ -2,6 +2,10 @@
 name = "shiroa"
 version = "0.1.0"
 entrypoint = "lib.typ"
-authors = ["Myriad-Dreamin"]
+authors = ["Myriad-Dreamin <https://github.com/Myriad-Dreamin>"]
 license = "Apache-2.0"
+homepage = "https://myriad-dreamin.github.io/shiroa"
+repository = "https://github.com/Myriad-Dreamin/shiroa"
+keywords = ["book", "web"]
+categories = ["book"]
 description = "A simple tool for creating modern online books in pure typst."