Commit 82fc9b0

HPCesia <me@hpcesia.com>
2026-03-13 08:58:24
Add blockquote style
1 parent 30a185d
Changed files (5)
src
contents
styles
src/contents/_lib/templates/blockquote.typ
@@ -0,0 +1,14 @@
+#import "@preview/bullseye:0.1.0": show-target
+
+#let blockquote-template-html(body) = {
+  show quote.where(block: true): it => {
+    html.blockquote(it.body)
+    html.elem("p", attrs: (class: "blockquote-attribution"), it.attribution)
+  }
+  body
+}
+
+#let blockquote-template(body) = {
+  show: show-target(html: blockquote-template-html)
+  body
+}
src/contents/_lib/tybios.typ
@@ -5,6 +5,7 @@
 #let post-template(body) = {
   import "./mathyml/src/lib.typ": to-mathml
 
+  import "./templates/blockquote.typ": blockquote-template
   import "./templates/font.typ": font-template
   import "./templates/footnote.typ": footnote-template
   import "./templates/heading.typ": heading-template
@@ -12,6 +13,7 @@
 
   show math.equation: to-mathml
 
+  show: blockquote-template
   show: font-template
   show: footnote-template
   show: heading-template
src/contents/posts/typst-syntax.typ
@@ -47,6 +47,14 @@ like #link(label("figure:sine-diagram"))[the sine diagram figure] or #link(label
 
 See more imformation about links in #link("https://typst.app/docs/reference/model/link/")[Typst Reference: link].
 
+= Blockquotes
+
+Use ```typ #quote(block: true, attribution: "Author Name")[Content]``` to create a blockquote with attribution.
+
+#quote(block: true, attribution: [Robert A. Heinlein])[
+  A human being should be able to change a diaper, plan an invasion, butcher a hog, conn a ship, design a building, write a sonnet, balance accounts, build a wall, set a bone, comfort the dying, take orders, give orders, cooperate, act alone, solve equations, analyse a new problem, pitch manure, program a computer, cook a tasty meal, fight efficiently, die gallantly. Specialization is for insects.
+]
+
 = Raw Blocks
 
 This is an inline raw block `println!("Hello, world!");`.
src/styles/article/blockquote.css
@@ -0,0 +1,11 @@
+blockquote {
+  @apply mt-5 mb-5 mx-4 text-neutral-700 dark:text-neutral-400;
+}
+
+p.blockquote-attribution {
+  @apply mx-4 text-right text-sm lg:text-base text-neutral-700 dark:text-neutral-400;
+
+  &::before {
+    content: "—";
+  }
+}
src/styles/article/index.css
@@ -3,6 +3,10 @@ article,
   @import "./anchor.css";
 }
 article,
+.article-blockquote {
+  @import "./blockquote.css";
+}
+article,
 .article-figure {
   @import "./figure.css";
 }