Commit 53643e3
Changed files (5)
src
contents
_lib
posts
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];
+ }
}