By Jody in Releases —

0.54.0: Logos, Cover Images and Featured Images

Version 0.54.0 is out. This release focuses on giving your blog a face: a logo, cover image and description for the site, a featured image for each post, and a sidebar that shows your navigation exactly as you wrote it.

Brand your blog with a logo, cover and description

Settings → site meta now has three new fields alongside the title and copyright owner:

  • Description — one line shown under your title on the homepage. It also becomes the homepage's meta description (and og:description) unless the homepage sets its own.
  • Cover image — a wide image (at least 1600×400) shown as a banner across the top of the homepage.
  • Logo — a square image (at least 256×256) shown round beside your blog's name in the navbar, and in the byline of every post.

When you have a cover image, the homepage banner shows it with your logo overlapping its bottom edge, then your title and description underneath. With a description but no cover, you get just the title and description. With neither, the homepage looks as it did before.

Social sharing picks these up too. Every page that doesn't already set its own og:image gets one from the cover image, falling back to the logo, with the matching twitter:image and twitter:card tags.

Each image field shows a thumbnail of the current image, and a "Remove" checkbox appears once one is set. Uploading a replacement deletes the old image.

Edit a post's meta and you'll find a Featured image field (wide, at least 1200×675). Once set, the image is:

  • shown above the post body at 16:9
  • shown as a thumbnail beside the post in post lists, including the homepage and tag pages
  • used as the post's og:image and twitter:image, with twitter:card set to summary_large_image

The post's meta panel for admins now lists the featured image too. Deleting a post deletes its featured image with it.

Sidebar navigation shown as written

Previously the sidebar rendered every section and nested link group collapsed, then opened the branch holding the current page, or the first section if nothing matched. That meant a blog's navigation rarely looked the way its owner had written it.

Now:

  • every section and nested link group renders expanded
  • the active link is still highlighted, but nothing is auto-collapsed or auto-expanded around it
  • anything in your navigation markdown before the first ## heading is shown as an unlabelled preamble at the top, instead of under a "Top" section
  • the filter box only appears when the sidebar holds 15 or more links, so a short navigation isn't topped by a search field it doesn't need

The burger menu on small screens treats the preamble the same way.

Every page gets a real title

Some pages were being served with an empty or missing <title>, which hurt both browser tabs and search results. Titles now resolve in order:

  • the title the page sets itself, or a title param passed to the layout
  • for a markdown page with no title in its front matter, the text of its first # Heading (inline formatting stripped; a # inside a code block doesn't count)
  • the site title
  • the hostname, as a last resort

Wrapped table cells no longer overlap

Table cells used a line-height of zero, so any cell whose text wrapped onto a second line drew it over the first. Cells now use a normal line-height of 1.5.

Account menu

The signed-in menu in the navbar was labelled with your name. It's now labelled "Account", which reads better when the name is long and makes the menu easier to find.

Reseeding the database

This one is for contributors. There's a new reseed-database command that deletes every row and runs the seeds again without rebuilding the schema, which is much faster than reset-database when the schema is already current. The model tests now use it for every reset after the first in a process.

Upgrading

Bump every package in your project to 0.54.0 (or npx blognami@latest for a new project). This release adds four columns, so run the migrations:

npx blognami migrate-database

No configuration changes are needed. To check it's working, open Settings → site meta and you should see the new Description, Cover image and Logo fields. Upload a logo and it should appear beside your blog's name in the navbar straight away.