Commit 53643e3

HPCesia <me@hpcesia.com>
2026-03-16 13:48:07
ToC in side support
1 parent a9547a1
Changed files (5)
src
contents
styles
article
src/contents/_lib/components/marginnote.typ
@@ -1,12 +1,38 @@
 #import "@preview/bullseye:0.1.0": target
+#import "../utils/renderer-check.typ": is-renderer
 
-#let marginnote(content) = context {
+/// Margin notes.
+///
+///
+/// - content (content):
+/// - block (boolean): Whether to render as a block element. Default is `false`.
+///   - When `block: false`:
+///     - In HTML output with `block: false`, it just like footnotes in web but no numbering,
+///     wrapped in a span with class "marginnote".
+///     - In Feed HTML output, it will be a footnote without numbering.
+///     - In PDF output, it will be a footnotes without numbering.
+///   - When `block: true`:
+///     - In HTML output with `block: true`, it will be wrapped in a div with class "marginnote".
+///     - In PDF output, it will be a normal content wrapped in `#block()`.
+/// -> content
+#let marginnote(content, block: false) = context {
   if target() == "html" {
-    return html.span(
-      class: "marginnote",
-      content,
-    )
+    return if block {
+      html.div(
+        class: "marginnote",
+        content,
+      )
+    } else {
+      if is-renderer("tybios") {
+        footnote(numbering: (..i) => "", content)
+      } else {
+        html.span(
+          class: "marginnote",
+          content,
+        )
+      }
+    }
   } else {
-    return footnote(numbering: (..i) => "", content)
+    return if block { std.block(content) } else { footnote(numbering: (..i) => "", content) }
   }
 }
src/contents/_lib/templates/footnote.typ
@@ -1,7 +1,8 @@
 #import "@preview/bullseye:0.1.0": show-target
+#import "../utils/renderer-check.typ": is-renderer
 
 #let side-footnote-html(body) = {
-  show footnote: it => if (sys.inputs.at("x-renderer", default: "astro-typst") == "tybios") { it } else {
+  show footnote: it => if is-renderer("tybios") { it } else {
     let number = counter(footnote).display(it.numbering)
     let fn-id = "fn-" + number
     let ref-id = "fnref-" + number
src/contents/_lib/utils/renderer-check.typ
@@ -0,0 +1,3 @@
+/// - renderer (str):
+/// -> boolean
+#let is-renderer(renderer) = sys.inputs.at("x-renderer", default: "astro-typst") == renderer
src/contents/posts/typst-syntax.typ
@@ -13,7 +13,7 @@
   ),
 )<frontmatter>
 
-#outline()
+#tybios.marginnote(block: true)[#outline()]
 
 This is not a reference to Typst syntax, see #link("https://typst.app/docs/reference/")[Typst Reference] for that.
 This is a demonstration of what you can do with Typst syntax in Tybios.
src/styles/article/sidenote.css
@@ -1,10 +1,23 @@
 .marginnote {
   @apply relative block my-1;
   @variant max-md {
-    @apply w-[95%] float-left ml-4 mr-2 my-1;
+    &:not(:has(nav[role="doc-toc"])) {
+      @apply w-[90%] float-left ml-8 mr-2 my-1;
+    }
   }
   @variant md {
     @apply w-1/2 mr-[calc(-1/2*100%)] float-right clear-right;
     @apply pl-4;
   }
+
+  & > :first-child {
+    @apply mt-0;
+  }
+  & > :last-child {
+    @apply mb-0;
+  }
+
+  > nav[role="doc-toc"] > h2 {
+    @apply mt-[0.5em];
+  }
 }