From 29189a5c977dc38a49de53cef19419becf8fe887 Mon Sep 17 00:00:00 2001 From: Myriad-Dreamin Date: Sun, 16 Jun 2024 19:51:16 +0800 Subject: [PATCH 1/2] docs: add some comments --- packages/shiroa/meta-and-state.typ | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/shiroa/meta-and-state.typ b/packages/shiroa/meta-and-state.typ index cc5cdd1..d9f303c 100644 --- a/packages/shiroa/meta-and-state.typ +++ b/packages/shiroa/meta-and-state.typ @@ -29,6 +29,7 @@ /// 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, @@ -36,4 +37,5 @@ is-pdf-target: is-pdf-target(), ) +/// Store the calculated metadata of the book. #let book-meta-state = state("book-meta", none) From 856e334066e8dafbebe767a8cce1e3f0033a74ee Mon Sep 17 00:00:00 2001 From: Myriad-Dreamin Date: Mon, 17 Jun 2024 17:35:35 +0800 Subject: [PATCH 2/2] dev: rearrange shiroa template code --- README.md | 6 +- contrib/typst/gh-ebook.typ | 3 +- contrib/typst/gh-pages.typ | 139 +++++++++++------------------ packages/shiroa/lib.typ | 3 + packages/shiroa/summary.typ | 1 + packages/shiroa/template-link.typ | 43 +++++++++ packages/shiroa/template-theme.typ | 53 +++++++++++ packages/shiroa/templates.typ | 2 + packages/shiroa/typst.toml | 6 +- 9 files changed, 164 insertions(+), 92 deletions(-) create mode 100644 packages/shiroa/template-link.typ create mode 100644 packages/shiroa/template-theme.typ create mode 100644 packages/shiroa/templates.typ diff --git a/README.md b/README.md index b64d193..bb1604c 100644 --- a/README.md +++ b/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). diff --git a/contrib/typst/gh-ebook.typ b/contrib/typst/gh-ebook.typ index fcae82c..57d3171 100644 --- a/contrib/typst/gh-ebook.typ +++ b/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 != "" { diff --git a/contrib/typst/gh-pages.typ b/contrib/typst/gh-pages.typ index c277924..35e10ee 100644 --- a/contrib/typst/gh-pages.typ +++ b/contrib/typst/gh-pages.typ @@ -1,25 +1,24 @@ // 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", @@ -27,54 +26,26 @@ // 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 ], ) diff --git a/packages/shiroa/lib.typ b/packages/shiroa/lib.typ index 26a3734..8b6dea0 100644 --- a/packages/shiroa/lib.typ +++ b/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" diff --git a/packages/shiroa/summary.typ b/packages/shiroa/summary.typ index 52804b5..1a7246c 100644 --- a/packages/shiroa/summary.typ +++ b/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) /// diff --git a/packages/shiroa/template-link.typ b/packages/shiroa/template-link.typ new file mode 100644 index 0000000..1ffc8c9 --- /dev/null +++ b/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 + ], + ) + } + ) + } +} diff --git a/packages/shiroa/template-theme.typ b/packages/shiroa/template-theme.typ new file mode 100644 index 0000000..8a6d029 --- /dev/null +++ b/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, + ) +} diff --git a/packages/shiroa/templates.typ b/packages/shiroa/templates.typ new file mode 100644 index 0000000..753e818 --- /dev/null +++ b/packages/shiroa/templates.typ @@ -0,0 +1,2 @@ +#import "template-link.typ": * +#import "template-theme.typ": * \ No newline at end of file diff --git a/packages/shiroa/typst.toml b/packages/shiroa/typst.toml index ff1efd1..cd021f4 100644 --- a/packages/shiroa/typst.toml +++ b/packages/shiroa/typst.toml @@ -2,6 +2,10 @@ name = "shiroa" version = "0.1.0" entrypoint = "lib.typ" -authors = ["Myriad-Dreamin"] +authors = ["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."