<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
     xmlns:atom="http://www.w3.org/2005/Atom"
     xmlns:content="http://purl.org/rss/1.0/modules/content/"
     xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>Blogtini</title>
    <link>https://blogtini.com/</link>
    <description>Recent content in Blogtini</description>
    <lastBuildDate>Wed, 28 Oct 2026 00:00:00 GMT</lastBuildDate>
    <atom:link href="https://blogtini.com/index.xml" rel="self" type="application/rss+xml"/>
    <generator>blogtini.com</generator>
    <item>
      <title>The Librarian theme</title>
      <link>https://blogtini.com/2026-10-librarian-theme/</link>
      <guid>https://blogtini.com/2026-10-librarian-theme/</guid>
      <pubDate>Wed, 28 Oct 2026 00:00:00 GMT</pubDate>
      <category domain="category">website</category>
      <category domain="category">features</category>
      <category domain="tag">blogtini</category>
      <category domain="tag">themes</category>
      <category domain="tag">libraries</category>
      <category domain="tag">typography</category>
      <description>Blogtini has a brand new theme -- and this one is ours. Not a port: Librarian was made from scratch, for blogtini, and you won't find it anywhere else.</description>
      <media:content url="https://blogtini.com/img/librarian-catalog.png" medium="image">
        <media:description>[The Librarian theme: posts as a drawer of library catalog cards]</media:description>
      </media:content>
      <content:encoded><![CDATA[Blogtini has a brand new theme -- and this one is ours.  Not a port: **Librarian** was made from scratch,
for blogtini, and you won't find it anywhere else.

Every post becomes a typewritten library catalog card.  Each post page gets a "DATE DUE" slip in its margin.
The search box, subjects & theme picker live in oak card catalog drawers, with brass label holders & pulls.
And the red rubber stamp on every card?  That's the post's **estimated reading time**, stamped as its loan period.

This post is already showing itself in Librarian (unless you've picked another theme).
**[Try it on the whole site](#theme=librarian)** -- your pick lasts 24 hours, just for you, and the theme picker
at the bottom of any page switches back anytime.  To make it your own site's theme, put `theme: librarian` in your
`config.yml`.

![Finding aids: card catalog drawers for search, subjects, categories and the theme picker](../img/librarian-drawers.png)


## Reading a card
Here's how each part of a real catalog card maps to a post:

```
┌─────────────────────────────────────────────┐
│ WEBS   Jaquith, Tracey.                     │
│ .L30     The Librarian theme / Tracey       │
│ 2026   Jaquith. -- October 28, 2026.        │
│            1,240 words : front., 2 ill.     │
│                                             │
│        Blogtini has a brand new theme ...   │
│                                             │
│        1. website. 2. features. ...         │
│        I. Title.          ╔═════════════╗   │
│                           ║ LOAN PERIOD ║   │
│                  (o)      ║    6 MIN    ║   │
│                           ╚═════════════╝   │
└─────────────────────────────────────────────┘
```

- **Call number** (top left): the post's first subject, a
  [Cutter number](https://en.wikipedia.org/wiki/Cutter_Expansive_Classification) made from its title
  (a letter & two digits, like a library's), and the year.  It's a little made up, but it's ours.
- **Main entry**: the author, last name first -- when a post has one.
- **Title & date**, then the **collation**: a book's card says how many pages & illustrations it has.  Ours counts
  words & images, and a post's featured image is its **frontispiece** (`front.`) -- the picture facing a
  book's title page.
- A **summary**, then the **tracings**: the subjects a card is filed under.  Each one links to every post with that
  tag or category.
- The **punched hole** at the bottom, where the drawer's rod goes through.
- The **stamp**: reading time, at about 213 words a minute.  Each post's stamp lands at its own slight angle, with
  slightly uneven ink.

![A post page, with its DATE DUE slip in the margin](../img/librarian-post.png)


## Built on Tufte CSS
Posts are set in [Tufte CSS](https://edwardtufte.github.io/tufte-css/): Edward Tufte's book typography, with its
wide right margin for notes.  That margin is where the DATE DUE slip goes, and where a featured image's caption
appears.  The body text is ET Book; the cards are typed in Courier Prime.

The rest follows the library idea:
- **Finding aids** (an archivist's word for the guides to a collection): the search, subjects, categories & theme
  picker drawers, at the end of every page
- **Subject headings**: the tags page is laid out like a book's index, with dotted leaders
- **Previous / Next on the shelf**: a post's neighbors
- **Ask a librarian**: the contact page
- **Colophon**: the footer
- **Shh!**: the comment form asks you to keep it down
- **The reading room after hours**: the dark scheme, for nighttime readers

Like everything else in blogtini, it doesn't call out to anyone else's servers.  Tufte CSS & the fonts are
self-hosted alongside the theme -- no font CDNs.


## Reading time, for every theme
The reading time behind the stamps is now shared by all the themes.  Future Imperfect's "4-Minute Read" and
Striped's clock use it too.  Don't want it?  `reading_time: false` in your `config.yml` turns them all off
(Librarian drops its stamps & slips).


## Show off any theme
Two more new things, for every theme:
- A post can pick its own theme: `theme: librarian` in its front matter, like this post.
  (A viewer's own pick from the theme picker still wins.)
- A link can switch a viewer to a theme, just like the theme picker: `[Try it](#theme=librarian)` in a post's
  markdown -- or share a link like https://blogtini.com/#theme=librarian]]></content:encoded>
    </item>
    <item>
      <title>Blogtini v2</title>
      <link>https://blogtini.com/2026-10-blogtini-v2/</link>
      <guid>https://blogtini.com/2026-10-blogtini-v2/</guid>
      <pubDate>Mon, 26 Oct 2026 00:00:00 GMT</pubDate>
      <category domain="category">website</category>
      <category domain="category">features</category>
      <category domain="tag">blogtini</category>
      <category domain="tag">markdown</category>
      <category domain="tag">javascript</category>
      <category domain="tag">comments</category>
      <category domain="tag">themes</category>
      <category domain="tag">privacy</category>
      <category domain="tag">versions</category>
      <description>Blogtini v2 is here! Instantly previewable 10+ themes! Your posts are still just markdown files in a free git repo -- and now they hold up better everywhere: for crawlers, feed readers, link previews, people without JavaScript, and (we hope) the far future.</description>
      <media:content url="https://blogtini.com/img/v2-comments.png" medium="image">
        <media:description>[Editorial theme showing nested comments with the new identicons]</media:description>
      </media:content>
      <content:encoded><![CDATA[Blogtini v2 is here!  Instantly previewable 10+ themes!
Your posts are still just markdown files in a free git repo -- and now they hold up better
everywhere: for crawlers, feed readers, link previews, people without JavaScript, and (we hope) the far future.

The promise is unchanged:
**no build step is required.  An optional minimal build step makes it better.**


# Themes, themes, themes

Ten themes now ship with blogtini, including ports of many favorites from [HTML5 UP](https://html5up.net):
future imperfect, editorial, massively, phantom, striped, forty, strata, helios, strongly typed, and grid.

Pick one in your `config.yml`:
```yml
theme: editorial
```
Or try them live with the theme picker -- your pick (and your light/dark choice) sticks for a day, just for you.


# Comments, rebuilt

- **One file.**  Every comment on your site now lives in a single `comments.json` at the top of your repo.
  No build step is needed to show them -- merge a comment's pull request, and it's live.
- **Still moderated.**  Each new comment arrives as a pull request
  (via [staticmin](https://github.com/traceypooh/staticmin), our tiny Staticman on Netlify).
  Each one lands in a random "slot" in the file, so two pending comments almost never conflict --
  even with GitHub's web "Merge" button.
- **No emails stored.**  Not even as a checksum.  Each commenter gets a private, site-specific id instead.
- **Your Gravatar, kept local.**  If you have a [Gravatar](https://gravatar.com), a copy comes along with your
  comment, into the site's `avatars/` folder -- so readers' browsers never call out to gravatar.com.
  No Gravatar?  You get your own colorful identicon, made right in the page.
- **Replies nest properly**, and comments are oldest first, like a conversation.

Try it: leave a comment below!


# Fail open

If the JavaScript never loads -- blocked, offline, or a thousand years from now
-- your page still shows its text after a moment, instead of staying blank.
It's just a markdown file, after all.


# One feed to rule them all

The optional build now writes one rich `index.xml`:
your RSS feed (with summaries, images, and full text),
your sitemap, *and* the site's search index
-- in one request, instead of fetching every post.
No build?  A hand-made `index.xml`, `index.txt`, or `sitemap.xml` still works.

The build is now one script that runs on [Deno](https://deno.com) *or* Node -- even in the iOS Code App,
with a press of ▶.

Add `--seo` for a tiny head line atop each post: its title and image, for link previews.


# Privacy

Reading a blogtini site with comments no longer sends anything to gravatar.com.
Blogtini's libraries all come from
[esm.ext.archive.org](https://esm.ext.archive.org) (the Internet Archive's own mirror)
-- as do pinned, versioned releases of blogtini itself, like before.


**🎉 Here's to v2! 🎉**]]></content:encoded>
    </item>
    <item>
      <title>Blogtini Turns One!</title>
      <link>https://blogtini.com/2025-02-blogtini-turns-one/</link>
      <guid>https://blogtini.com/2025-02-blogtini-turns-one/</guid>
      <pubDate>Fri, 14 Feb 2025 00:00:00 GMT</pubDate>
      <category domain="category">website</category>
      <category domain="category">features</category>
      <category domain="tag">blogtini</category>
      <category domain="tag">markdown</category>
      <category domain="tag">javascript</category>
      <category domain="tag">comments</category>
      <category domain="tag">email</category>
      <category domain="tag">versions</category>
      <description>Blogtini is now feature complete with everything working! See below for the major features finally finished.</description>
      <media:content url="https://blogtini.com/img/comments.jpg" medium="image"/>
      <content:encoded><![CDATA[Blogtini is now feature complete with everything working!  See below for the major features finally finished.


# Comments

We use [Staticman](https://github.com/eduardoboucas/staticman) for comments.

We've created a free lightweight setup for comments using https://netlify.com "serverless edge" functions.  More information can be seen here: https://github.com/traceypooh/staticmin


# Contact (email) blog maintainer

The contact form is setup -- https://formspree.io is a good option to use and this blog uses it as an example.


# Versioning

Releases now get tagged (eg: `1.0.8`).

Blog sites can opt to use a **specific version** of blogtini, in their site's top-level `theme.js` like this:
```js
import 'https://esm.ext.archive.org/gh/traceypooh/blogtini@1.0.8/index.js?bundle=false'
```
(The default theme then comes from that same version, too.)

Optionally, sites can pick a non-default theme by name in their `config.yml` -- it comes from that same version, too, eg:
```yml
theme: grid
```


# Light/dark mode

Light/dark mode is improved with multiple cosmetic bugs fixed.

There is a new [💡] icon in the top nav bar to toggle between light & dark modes if desired.
(Otherwise, local time & system preferences are used).


# Styling & CSS

This is an internal detail -- but now all markup is created via Web Components, and all the CSS is "inline" inside the web components JS files.  This allows for clean versioning of all CSS, since all the JS files are versioned.


**❤️ Happy Saint Valentine's Day! ❤️**]]></content:encoded>
    </item>
    <item>
      <title>Blogtini SEO</title>
      <link>https://blogtini.com/2024-07-blogtini-seo/</link>
      <guid>https://blogtini.com/2024-07-blogtini-seo/</guid>
      <pubDate>Sat, 06 Jul 2024 00:00:00 GMT</pubDate>
      <category domain="category">website</category>
      <category domain="tag">metadata</category>
      <category domain="tag">search engines</category>
      <category domain="tag">blogtini</category>
      <description>We're now working on improved Search Engine Optimization by adding [head] element tags and JSON-LD</description>
      <media:content url="https://blogtini.com/img/seo.jpg" medium="image"/>
      <content:encoded><![CDATA[We're now working on improved Search Engine Optimization by adding [head] element tags and
[JSON-LD](https://schema.org/BlogPosting)

Looking into a GitHub Actions step to create/update the `sitemap.xml` file as well as dynamically prepend a head with metadata and JSON-LD to the start of blog markdown `.html` files.

Also of interest is sharing markdown blog posts to social networks and pasting links into text messages.  We want the card-like preview with title and image relevant to the blog post to work.]]></content:encoded>
    </item>
    <item>
      <title>Blogtini @ DWebCamp</title>
      <link>https://blogtini.com/2023-06-blogtini-dwebcamp/</link>
      <guid>https://blogtini.com/2023-06-blogtini-dwebcamp/</guid>
      <pubDate>Fri, 23 Jun 2023 00:00:00 GMT</pubDate>
      <category domain="category">website</category>
      <category domain="category">talks</category>
      <category domain="tag">slides</category>
      <category domain="tag">talk</category>
      <category domain="tag">markdown</category>
      <category domain="tag">javascript</category>
      <category domain="tag">blog</category>
      <category domain="tag">website</category>
      <category domain="tag">blogtini</category>
      <description>Here's the slides from my talk at DWebCamp 2023 https://dwebcamp.org/ --&gt; https://tracey.archive.org/dweb-2023</description>
      <media:content url="https://blogtini.com/img/light-and-van-and-trees-vertical_0FLra81.jpg#bottom" medium="image"/>
      <content:encoded><![CDATA[Here's the slides from my talk at DWebCamp 2023 https://dwebcamp.org/ --> https://tracey.archive.org/dweb-2023]]></content:encoded>
    </item>
    <item>
      <title>Blogtini Themes and Web Components - Update</title>
      <link>https://blogtini.com/2023-06-blogtini-themes-and-web-components-updates/</link>
      <guid>https://blogtini.com/2023-06-blogtini-themes-and-web-components-updates/</guid>
      <pubDate>Thu, 15 Jun 2023 00:00:00 GMT</pubDate>
      <category domain="category">website</category>
      <category domain="tag">markdown</category>
      <category domain="tag">javascript</category>
      <category domain="tag">blog</category>
      <category domain="tag">website</category>
      <category domain="tag">blogtini</category>
      <description>Working with the amazing Renior, another volunteer … We've been splitting up the main (javascript) post &quot;crawling&quot; and processing, from the formatting.</description>
      <media:content url="https://blogtini.com/img/theme-picker.png#top" medium="image"/>
      <content:encoded><![CDATA[Working with the amazing
[Renior, another volunteer](https://twitter.com/renoirb) ... We've been splitting up the main (javascript) post "crawling" and processing, from the formatting.

## Themes
That gives us very easy to create themes!  A theme can reuse formating or "business logic" from other themes -- or come up with any number of new ways to display pages and/or the entire site.

The above image shows the theme picker from the top nav menu.

## Web Components
We settled on
[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
which are browser native (as opposed to `react`).

Tracey likes [lit](https://lit.dev/) since it is a lightweight/minimal setup atop
native web components.  But a theme can use any style of web components they like.

## Example
Once the posts are all parsed from your site, they are stored in a browser cache (`localStorage` or `indexedDB`).

When you arrive at a blog post, a page, or a list of posts for a given tag, etc.
the main javascript can simply rewrite the page `<body>` tag to:

```html
<bt-body>
  <bt-posts>
    <bt-post url="first-post-with-tag/"></bt-post>
    <bt-post url="second-post-with-tag/"></bt-post>
    ...
  </bt-posts>
</bt-body>
```

Each web component is its own javacript file that knows how to render the given section.

For example, this is the default theme's
[bt-post](https://blogtini.com/theme/future-imperfect/bt-post.js)
file/component.

Here is a [second theme](https://blogtini.com/theme/grid/index.js) and how it sets itself up --
as overrides to the main theme.]]></content:encoded>
    </item>
    <item>
      <title>Blogtini @ DWebCamp</title>
      <link>https://blogtini.com/2022-08-blogtini-dwebcamp/</link>
      <guid>https://blogtini.com/2022-08-blogtini-dwebcamp/</guid>
      <pubDate>Fri, 26 Aug 2022 00:00:00 GMT</pubDate>
      <category domain="category">website</category>
      <category domain="category">talks</category>
      <category domain="tag">slides</category>
      <category domain="tag">talk</category>
      <category domain="tag">markdown</category>
      <category domain="tag">javascript</category>
      <category domain="tag">blog</category>
      <category domain="tag">website</category>
      <category domain="tag">blogtini</category>
      <description>Here's the slides from my talk at DWebCamp 2022 https://2022.dwebcamp.org/</description>
      <media:content url="https://blogtini.com/img/cn-nighttime-campfire-hero.jpg" medium="image"/>
      <content:encoded><![CDATA[Here's the slides from my talk at DWebCamp 2022 https://2022.dwebcamp.org/

https://tracey.archive.org/dweb-2022]]></content:encoded>
    </item>
    <item>
      <title>blogtini update</title>
      <link>https://blogtini.com/2022-07-blogtini-update/</link>
      <guid>https://blogtini.com/2022-07-blogtini-update/</guid>
      <pubDate>Mon, 25 Jul 2022 00:00:00 GMT</pubDate>
      <category domain="category">website</category>
      <category domain="tag">geek</category>
      <category domain="tag">coding</category>
      <category domain="tag">javascript</category>
      <category domain="tag">markdown</category>
      <category domain="tag">blogtini</category>
      <description>I'm now moving towards a setup that is entirely markdown and js.</description>
      <media:content url="https://tracey.archive.org/dweb-2022/i/view-source.jpg" medium="image"/>
      <content:encoded><![CDATA[I'm now moving towards a setup that is entirely `markdown` and `js`.

I've got client-side searching woriking dynamically with `lunr`.

I'm setting up two `.git` hooks to run a small script before a `git commit` and after a `git merge`.

Then we should be pretty close to a fully automatically updated `sitemap.xml` and `staticman` setup for comments.]]></content:encoded>
    </item>
    <item>
      <title>About the Pooh</title>
      <link>https://blogtini.com/about/</link>
      <guid>https://blogtini.com/about/</guid>
      <pubDate>Mon, 16 Mar 2009 00:00:00 GMT</pubDate>
      <category domain="category">website</category>
      <category domain="tag">tracey</category>
      <category domain="tag">geek</category>
      <category domain="tag">markdown</category>
      <category domain="tag">javascript</category>
      <category domain="tag">devops</category>
      <category domain="tag">video</category>
      <category domain="tag">design</category>
      <category domain="type">page</category>
      <description>I'm into software, UI/UX, video, devops, biking, time-lapse photography, sewing, design, lighting, and interior decorating.</description>
      <media:content url="https://blogtini.com/img/traceymonet.jpg" medium="image"/>
      <content:encoded><![CDATA[## A little (more about me)

I'm into software, UI/UX, video, devops, biking, time-lapse photography, sewing, design, lighting, and
interior decorating.

I have a twin!
![tracey with twin](https://www.hunterleebrown.com/photos/tracey/TraceyGrabs009.jpg)
It's true!


## My Work
I'm presently working at
[Internet Archive](https://archive.org).


# About this site
I modeled this after my personal website https://traceypooh.com that uses
[Hugo](http://gohugo.io/) -- a static site engine written in Go.
(I migrated from wordpress).

- I now write in _Markdown_ - very natural and simple.
- I copied most of the them features from: [Hugo Future Imperfect Slim](https://github.com/pacollins/hugo-future-imperfect-slim), porting from `Go` templates to pure `javascript`
- We can use GitHub or GitLab to host the entire website in a single code repository.
  - It _very_ nicely auto builds/deploy upon each `git push`.
  - It's totally free except for any optional domain name (for modest annual fee, typically ~$20 USD/yr)]]></content:encoded>
    </item>
  </channel>
</rss>
