🌲frmn.dev

Poetry Plugin on Quartz

3 min read

Transformers Plugin

Create the transformers plugin named poetry.ts

quartz/plugins/transformers/poetry.ts
import { QuartzTransformerPlugin } from "../types"
import { Root } from "mdast"
import { visit } from "unist-util-visit"
 
export const Poetry: QuartzTransformerPlugin = () => ({
    name: "Poetry",
    markdownPlugins() {
        return [
            () => (tree: Root, _file) => {
                visit(tree, "code", (node) => {
                    if (node.lang === "poetry") {
                        node.type = "html" as "code"
                        node.value = `<pre class="poetry">${node.value}</pre>`
                    }
                })
            },
        ]
    },
})

And add to index.ts file

quartz/plugins/transformers/index.ts
export { Poetry } from "./poetry"

Configure the Header Component

My changes:

quartz/components/Head.tsx
    const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
     const path = url.pathname as FullSlug
     const baseDir = fileData.slug === "404" ? path : pathToRoot(fileData.slug!)
     const iconPath = joinSegments(baseDir, "static/icon.png")
     const fontStylePath = joinSegments(baseDir, "static/font/font-style.css")
 
     // Url of current page
     const socialUrl =
       fileData.slug === "404" ? url.toString() : joinSegments(url.toString(), fileData.slug!)
 
     const usesCustomOgImage = ctx.cfg.plugins.emitters.some(
       (e) => e.name === CustomOgImagesEmitterName,
     )
     const ogImageDefaultPath = `https://${cfg.baseUrl}/static/og-image.png`
 
     return (
       <head>
         <title>{title}</title>
         <meta charSet="utf-8" />
         {cfg.theme.cdnCaching && cfg.theme.fontOrigin === "googleFonts" && (
           <>
             <link rel="preconnect" href="https://fonts.googleapis.com" />
             <link rel="preconnect" href="https://fonts.gstatic.com" />
             <link href={fontStylePath} rel="stylesheet" type="text/css" spa-preserve />
             <link rel="stylesheet" href={googleFontHref(cfg.theme)} />
             {cfg.theme.typography.title && (
               <link rel="stylesheet" href={googleFontSubsetHref(cfg.theme, cfg.pageTitle)} />

Styling

Make some config in custom.css

quartz/styles/custom.scss
pre.poetry {
    font-size: 1.2rem;
    font-family: biro_script;
    border: none;
    padding: 0;
    position: unset;
}

Fonts

Create font-style.css, I use Biro Script by Ingo Zimmermann (ingoFonts) as a poetry font

quartz/static/font/font-style.css
@font-face {
  font-family: "biro_script";
  src:
    url("biro_script_standard_us.woff2") format("woff2"), /* Preferred */
    url("biro_script_standard_us.woff") format("woff"); /* Fallback */
  font-weight: normal;
  font-style: normal;
}

Why both format are in the CSS?

Including both ensures maximum compatibility across browsers:

  • woff2 is listed first — modern browsers that support it will use it.
  • woff acts as a fallback for older browsers that don’t support woff2.

Details and the difference:

FeatureWOFFWOFF2
Full NameWeb Open Font FormatWeb Open Font Format 2
CompressionModerateBetter (uses Brotli compression)
File SizeLargerSmaller (up to ~30% smaller)
Browser SupportOlder + Modern browsersOnly modern browsers (Chrome 36+, Firefox 39+, Edge, Safari 10+)
PerformanceSlowerFaster due to smaller file size

Site Config

Now, we can enable the plugin in the quartz.config.ts

quartz.config.ts
  plugins: {
    transformers: [
      Plugin.FrontMatter(),
      Plugin.CreatedModifiedDate({
        priority: ["frontmatter", "git", "filesystem"],
      }),
      Plugin.Poetry(),
      Plugin.SyntaxHighlighting({
        theme: {
          light: "github-light",
          dark: "github-dark",
        },
        keepBackground: false,
      }),

Project Structure

The file/code changed in the project structure is something like this:

.
├── quartz/
│   ├── components/
│   │   └── Head.tsx
│   ├── plugins/
│   │   └── transformers/
│   │       ├── index.ts
│   │       └── poetry.ts
│   ├── static/
│   │   └── font/
│   │       ├── biro_script_standard_us.woff2
│   │       ├── biro_script_standard_us.woff
│   │       └── font-style.css
│   └── styles/
│       └── custom.scss
└── quartz.config.ts

Result

You can wrap the text in code block using triple backtick (```) and add the poetry after that

Example:

```poetry
This is example poetry
Using custom font
aesthetic right?
```

Output:

This is example poetry
Using custom font
aesthetic right?

Quartz

Graph View