{
  "version": "https://jsonfeed.org/version/1.1",
  "title": "colophon · mixed e2e",
  "home_page_url": "https://blog.i0.pm",
  "authors": [
    {
      "name": "Me"
    }
  ],
  "items": [
    {
      "id": "https://blog.i0.pm/post-with-multimedia/",
      "url": "https://blog.i0.pm/post-with-multimedia/",
      "title": "A post with multimedia",
      "summary": "A showcase of colophon's rich rendering — hero, embeds, math, callouts, mermaid and code.",
      "content_html": "\u003cp\u003eThis post exercises colophon's rich rendering: a hero banner (above), a preview image\n(used on the index and social cards), images embedded mid-article, LaTeX maths, styled\ncallouts, a Mermaid diagram, and syntax-highlighted code. Yes.\u003c/p\u003e\n\u003cdiv class=\"callout callout-note\" data-callout=\"note\"\u003e\n\u003cdiv class=\"callout-title\"\u003eHow this renders\u003c/div\u003e\n\u003cdiv class=\"callout-body\"\u003e\n\u003cp\u003ecolophon emits \u003cstrong\u003eprogressive-enhancement HTML\u003c/strong\u003e: every special block carries its raw\nsource as text, tagged by type. With JavaScript a theme upgrades it (KaTeX, Mermaid,\nhighlight.js); without JavaScript you still get readable text.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003ch2 id=\"embedded-images\"\u003eEmbedded images\u003c/h2\u003e\n\u003cp\u003eObsidian \u003ccode\u003e![[embed]]\u003c/code\u003e attachments are resolved vault-wide and copied next to the page:\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://pub-d5c2f354a50f4560977c04c2f7d1b93a.r2.dev/post-with-multimedia/assets/Gemini_Generated_Image_f8wujwf8wujwf8wu.png\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003eYou can also give an embed alt text with a pipe:\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://pub-d5c2f354a50f4560977c04c2f7d1b93a.r2.dev/post-with-multimedia/assets/Gemini_Generated_Image_z2b4tkz2b4tkz2b4.png\" alt=\"An abstract generated banner\"\u003e\u003c/p\u003e\n\u003ch2 id=\"maths\"\u003eMaths\u003c/h2\u003e\n\u003cp\u003eInline maths like \u003cspan class=\"math math-inline\"\u003eE = mc^2\u003c/span\u003e and \u003cspan class=\"math math-inline\"\u003ea^2 + b^2 = c^2\u003c/span\u003e sit in the flow of a sentence, while\ndisplay maths stands alone:\u003c/p\u003e\n\u003cp\u003e\u003cdiv class=\"math math-display\"\u003e\\int_0^\\infty e^{-x^2}\\,dx = \\frac{\\sqrt{\\pi}}{2}\u003c/div\u003e\u003c/p\u003e\n\u003cp\u003e(Plain prose with currency such as $5 and $10 is left alone, not treated as maths.)\u003c/p\u003e\n\u003cdiv class=\"callout callout-warning\" data-callout=\"warning\"\u003e\n\u003cdiv class=\"callout-title\"\u003eWarning\u003c/div\u003e\n\u003cdiv class=\"callout-body\"\u003e\n\u003cp\u003eMaths and diagrams need JavaScript to typeset. The raw \u003ccode\u003e$…$\u003c/code\u003e / diagram source is the\ngraceful fallback when it is absent.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003ch2 id=\"callouts\"\u003eCallouts\u003c/h2\u003e\n\u003cdiv class=\"callout callout-tip\" data-callout=\"tip\"\u003e\n\u003cdiv class=\"callout-title\"\u003ePro tip\u003c/div\u003e\n\u003cdiv class=\"callout-body\"\u003e\n\u003cp\u003eCallouts support \u003cstrong\u003emarkdown\u003c/strong\u003e inside: \u003ccode\u003einline code\u003c/code\u003e, \u003ca href=\"https://example.com\"\u003elinks\u003c/a\u003e,\nand lists:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eone\u003c/li\u003e\n\u003cli\u003etwo\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003ch2 id=\"diagrams\"\u003eDiagrams\u003c/h2\u003e\n\u003cpre class=\"mermaid\"\u003eflowchart LR\n    A[Markdown] --\u0026gt; B{colophon}\n    B --\u0026gt;|build| C[Static HTML]\n    B --\u0026gt;|publish| D[Cloudflare Pages]\n\u003c/pre\u003e\n\u003ch2 id=\"code\"\u003eCode\u003c/h2\u003e\n\u003cpre\u003e\u003ccode class=\"language-go\"\u003epackage main\n\nimport \u0026#34;fmt\u0026#34;\n\nfunc main() {\n    fmt.Println(\u0026#34;hello from colophon\u0026#34;)\n}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cpre\u003e\u003ccode class=\"language-bash\"\u003ecolophon build --env preview\ncolophon serve\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch2 id=\"linking-across-entries\"\u003eLinking across entries\u003c/h2\u003e\n\u003cp\u003eWikilinks stitch the site together, and they resolve across \u003cstrong\u003eevery source\u003c/strong\u003e — not just this\nvault. This note links straight to \u003ca href=\"/posts/hello-world/\"\u003ethe hello-world post\u003c/a\u003e (which lives in the\nproject's \u003ccode\u003econtent/\u003c/code\u003e folder) and to \u003ca href=\"/archive/template-1/\"\u003ea second vault note\u003c/a\u003e. An unresolved link\nlike a note that does not exist degrades to plain text rather than a broken link.\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003etags\u003c/code\u003e in this post's frontmatter (\u003ccode\u003etest\u003c/code\u003e, \u003ccode\u003eshowcase\u003c/code\u003e) render as links below — each opens\na page listing every post that shares the tag, so readers can move sideways across entries.\u003c/p\u003e\n\u003cp\u003eThat is the full multimedia stack rendered from a single Obsidian note.\u003c/p\u003e\n",
      "date_published": "2026-06-15T00:00:00Z"
    },
    {
      "id": "https://blog.i0.pm/archive/template-1/",
      "url": "https://blog.i0.pm/archive/template-1/",
      "title": "A second new post",
      "summary": "A one-line summary used in feeds and link previews.",
      "content_html": "\u003cp\u003eWrite your post in Markdown.\u003c/p\u003e\n\u003cp\u003eLink to other notes with \u003ccode\u003ewikilinks\u003c/code\u003e or \u003ccode\u003ealiased text\u003c/code\u003e. The folder this\nnote lives in becomes its URL path.\u003c/p\u003e\n\u003cp\u003eSet \u003ccode\u003edraft: false\u003c/code\u003e when it's ready to publish.\u003c/p\u003e\n\u003cp\u003eThis post came from my obsidian vault.\u003c/p\u003e\n",
      "date_published": "2026-06-15T00:00:00Z"
    },
    {
      "id": "https://blog.i0.pm/posts/hello-world/",
      "url": "https://blog.i0.pm/posts/hello-world/",
      "title": "Hello from the Cloudflare e2e fixture",
      "summary": "This page was generated by colophon and deployed to Cloudflare Pages via the direct-upload publisher. If you can read it at a *.pages.dev URL, the end-to-end deploy path works.",
      "content_html": "\u003cp\u003eThis page was generated by \u003cstrong\u003ecolophon\u003c/strong\u003e and deployed to \u003cstrong\u003eCloudflare Pages\u003c/strong\u003e via the\ndirect-upload publisher. If you can read it at a \u003ccode\u003e*.pages.dev\u003c/code\u003e URL, the end-to-end\ndeploy path works.\u003c/p\u003e\n",
      "date_published": "2026-06-14T00:00:00Z"
    }
  ]
}