https://faffweasel.com/ 2026-05-06T05:33:28.286Z Phill https://faffweasel.com/posts/template-variables 2026-05-04T05:33:28.286Z 2026-05-06T05:33:28.286Z Phill <p>Template variables let you insert dynamic content into any post or page.</p> <h2 id="recent-posts">Recent Posts</h2> <p>The five most recent posts on this blog:</p> <p></p> <h2 id="posts-by-tag">Posts by Tag</h2> <p>Posts tagged "demo":</p> <p></p> <h2 id="all-tags">All Tags</h2> <p>Every tag used on this blog:</p> <p></p> <h2 id="blog-metadata">Blog Metadata</h2> <p>This blog is called <strong></strong> and lives at .</p> <h2 id="navigation">Navigation</h2> <p></p> <p></p> <h2 id="subscribe-form">Subscribe Form</h2> <p>The <code></code> shortcode renders an inline subscribe form. Enable it in the admin config, then add the shortcode to any post, page, or sidebar.</p> https://faffweasel.com/posts/images-and-embeds 2026-05-03T05:33:28.286Z 2026-05-06T05:33:28.286Z Phill <h2 id="uploaded-image">Uploaded Image</h2> <p>Images uploaded through the admin panel are stripped of metadata and served from storage.</p> <h2 id="youtube">YouTube</h2> <p>A YouTube URL on its own line becomes a privacy-enhanced embed. No cookies are set until the viewer clicks play.</p> <div class="tt-embed tt-embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" loading="lazy" title="YouTube video" allowfullscreen></iframe></div> <h2 id="spotify">Spotify</h2> <p>A Spotify track URL works the same way:</p> <div class="tt-embed tt-embed-spotify"><iframe src="https://open.spotify.com/embed/track/4cOdK2wGLETKBW3PvgPWqT" loading="lazy" title="Spotify embed"></iframe></div> <h2 id="vimeo">Vimeo</h2> <div class="tt-embed tt-embed-vimeo"><iframe src="https://player.vimeo.com/video/148751763" loading="lazy" title="Vimeo video" allowfullscreen></iframe></div> <h2 id="images-in-context">Images in Context</h2> <p>Images can sit between paragraphs like any other content. The theme controls max-width and spacing. A good theme ensures images don't overflow their container on mobile.</p> https://faffweasel.com/posts/tables-and-structured-content 2026-05-02T05:33:28.286Z 2026-05-06T05:33:28.286Z Phill <p></p> <h2 id="comparison-table">Comparison Table</h2> <table> <thead> <tr> <th>Feature</th> <th>Supported</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Markdown</td> <td>Yes</td> <td>GFM flavour including tables</td> </tr> <tr> <td>Code highlighting</td> <td>Yes</td> <td>Via highlight.js</td> </tr> <tr> <td>RSS feed</td> <td>Yes</td> <td>Atom format</td> </tr> <tr> <td>Search</td> <td>Yes</td> <td>Pagefind, client-side</td> </tr> <tr> <td>Custom CSS</td> <td>Yes</td> <td>Sanitised for safety</td> </tr> <tr> <td>Embeds</td> <td>Partial</td> <td>YouTube, Spotify, Vimeo</td> </tr> <tr> <td>Comments</td> <td>No</td> <td>By design</td> </tr> <tr> <td>Tracking</td> <td>No</td> <td>By design</td> </tr> </tbody> </table> <h2 id="alignment">Alignment</h2> <p>Tables support column alignment:</p> <table> <thead> <tr> <th align="left">Left</th> <th align="center">Centre</th> <th align="right">Right</th> </tr> </thead> <tbody> <tr> <td align="left">Text</td> <td align="center">Text</td> <td align="right">Text</td> </tr> <tr> <td align="left">Longer text</td> <td align="center">Longer text</td> <td align="right">Longer text</td> </tr> <tr> <td align="left">1</td> <td align="center">2</td> <td align="right">3</td> </tr> </tbody> </table> <h2 id="task-lists">Task Lists</h2> <p>GFM task lists render as checkboxes:</p> <ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" checked disabled> Set up the database</li> <li class="task-list-item"><input type="checkbox" checked disabled> Create admin account</li> <li class="task-list-item"><input type="checkbox" disabled> Write content</li> <li class="task-list-item"><input type="checkbox" disabled> Configure theme</li> <li class="task-list-item"><input type="checkbox" disabled> Deploy</li> </ul> <h2 id="nested-content">Nested Content</h2> <p>Lists can nest:</p> <ul> <li>Top level <ul> <li>Second level <ul> <li>Third level</li> </ul> </li> <li>Back to second</li> </ul> </li> <li>Back to top</li> </ul> <h3 id="subheading">Subheading</h3> <h4 id="subsubheading">Subsubheading</h4> https://faffweasel.com/posts/code-and-syntax-highlighting 2026-05-01T05:33:28.286Z 2026-05-06T05:33:28.286Z Phill <p>Code blocks get automatic syntax highlighting. Here are examples across a few languages.</p> <h2 id="javascript">JavaScript</h2> <pre><code class="hljs language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">greet</span>(<span class="hljs-params">name</span>) { <span class="hljs-keyword">const</span> message = <span class="hljs-string">`Hello, <span class="hljs-subst">${name}</span>!`</span>; <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(message); <span class="hljs-keyword">return</span> message; } <span class="hljs-comment">// Arrow function variant</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">greet</span> = (<span class="hljs-params">name</span>) => <span class="hljs-string">`Hello, <span class="hljs-subst">${name}</span>!`</span>; </code></pre> <h2 id="css">CSS</h2> <pre><code class="hljs language-css"><span class="hljs-selector-pseudo">:root</span> { <span class="hljs-attr">--color-bg</span>: <span class="hljs-number">#f4f4f0</span>; <span class="hljs-attr">--color-text</span>: <span class="hljs-number">#1a1a1a</span>; <span class="hljs-attr">--color-accent</span>: <span class="hljs-number">#007070</span>; } <span class="hljs-selector-class">.container</span> { <span class="hljs-attribute">max-width</span>: <span class="hljs-number">720px</span>; <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto; <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span class="hljs-number">1rem</span>; } </code></pre> <h2 id="sql">SQL</h2> <pre><code class="hljs language-sql"><span class="hljs-keyword">select</span> title, slug, published_at <span class="hljs-keyword">from</span> posts <span class="hljs-keyword">where</span> is_published <span class="hljs-operator">=</span> <span class="hljs-literal">true</span> <span class="hljs-keyword">and</span> published_at <span class="hljs-operator">&#x3C;=</span> now() <span class="hljs-keyword">order</span> <span class="hljs-keyword">by</span> published_at <span class="hljs-keyword">desc</span> limit <span class="hljs-number">10</span>; </code></pre> <h2 id="bash">Bash</h2> <pre><code class="hljs language-bash"><span class="hljs-meta">#!/bin/bash</span> <span class="hljs-built_in">echo</span> <span class="hljs-string">"Deploying..."</span> npm run build rsync -avz dist/ server:/var/www/blog/ <span class="hljs-built_in">echo</span> <span class="hljs-string">"Done."</span> </code></pre> <h2 id="inline-code">Inline Code</h2> <p>Use <code>npm run dev</code> to start the dev server. The config lives in <code>src/lib/config.ts</code>. Environment variables go in <code>.env</code>.</p> https://faffweasel.com/posts/features-of-this-blog 2026-04-30T05:33:28.286Z 2026-05-06T05:33:28.286Z Phill <p>This blog runs on a self-hostable engine with a few features worth showing off. This post is a quick tour.</p> <h2 id="typography">Typography</h2> <p>Body text is set in the theme's body font. <strong>Bold</strong>, <em>italic</em>, <del>strikethrough</del>, and <code>inline code</code> all work as expected. Here's a <a href="/blog">link to the blog archive</a> and an <a href="https://example.com" rel="noopener noreferrer" target="_blank">external link</a> that opens in a new tab.</p> <blockquote> <p>Blockquotes are useful for pulling out a key point. They can span multiple lines and contain <strong>formatting</strong> just like regular text.</p> </blockquote> <h2 id="lists">Lists</h2> <p>Unordered:</p> <ul> <li>First item</li> <li>Second item with a longer description that wraps to demonstrate line height and indentation</li> <li>Third item</li> </ul> <p>Ordered:</p> <ol> <li>Clone the repository</li> <li>Set up the database</li> <li>Configure your settings</li> <li>Deploy</li> </ol> <h2 id="horizontal-rule">Horizontal Rule</h2> <p>Content above.</p> <hr> <p>Content below.</p> <h2 id="footnotes">Footnotes</h2> <p>This engine supports footnotes^{<a href="#user-content-fn-1" id="user-content-user-content-fnref-1" data-footnote-ref aria-describedby="user-content-footnote-label">1</a>} which are useful for citations and asides^{<a href="#user-content-fn-2" id="user-content-user-content-fnref-2" data-footnote-ref aria-describedby="user-content-footnote-label">2</a>}.</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="user-content-footnote-label">Footnotes</h2> <ol> <li id="user-content-user-content-fn-1"> <p>Footnotes appear at the bottom of the post. <a href="#user-content-fnref-1" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-user-content-fn-2"> <p>They're auto-numbered and linked both ways. <a href="#user-content-fnref-2" data-footnote-backref="" aria-label="Back to reference 2" class="data-footnote-backref">↩</a></p> </li> </ol> </section> https://faffweasel.com/posts/start-here 2026-04-29T05:33:28.286Z 2026-05-06T05:33:28.286Z Phill <p>Welcome to Tintype, a self-hostable blog engine.</p> <p>The posts and pages on this blog are examples showing what Tintype can do. Delete them when you're ready, or keep them around as reference.</p> <p>A suggested tour:</p> <ul> <li><a href="/posts/features-of-this-blog">Features of This Blog</a>: overview of what Tintype supports</li> <li><a href="/posts/code-and-syntax-highlighting">Code and Syntax Highlighting</a>: for developer-oriented writing</li> <li><a href="/posts/tables-and-structured-content">Tables and Structured Content</a>: markdown tables, task lists, TOCs</li> <li><a href="/posts/images-and-embeds">Images and Embeds</a>: image handling and link embeds</li> <li><a href="/posts/template-variables">Template Variables</a>: dynamic content in posts and pages</li> </ul> <p>You can edit anything from the admin panel. Start there, or just start writing.</p>