What is a blog?

  • Technical: A page with set of posts usually shown in reverse order
  • User Needs: Show news/updates; usually more polished or "featured" content (not so much a notebook)

Note: The functionality of a blog and a news section are pretty much identical from a technical perspective. So in everything we write here about blogs also can be used to implement news.

Job Stories

Overall story

When publishing my site/garden I often want a section of news or articles so that people can read the latest updates or articles.

This high-level story breaks down into two parts:

  • Index page listing posts
  • Way to create/designate blog posts

Index page

When publishing my site, I want to have a blog/article index page that lists my articles in latest first order.

Creating blogs/articles

When publishing my site, I want a way to create or designate pages as blog posts so that they show up on the blog/article index page.

  • Can have this as a dedicated folder e.g. /blog/
  • Or just a special type of note e.g. there is frontmatter field: blog: true or something
  • Frontmatter: some requirements e.g. to have a date field for the publication date.

MVP Design

Features

  • Simple way to make a note into a blog/article
  • Simple way to show a list of blog posts in reverse date order.

Specifically:

  • Can make a blog post by creating something in a blog folder OR adding type: blog (case insensitive?)
  • List of blog posts show up under /blog/ (with pagination)
  • Presentation - simple and functional (cf Next.js or Vercel blog, or Tailwind CSS)
  • Pagination - infinite scroll would be nice.

Implementation

As a default, follow Pliny however we have quite a few changes. We cover specific items.

Index page

Make the searchable blogs list a component, which users can use in any of their pages - even on the home page.

  • This way it's an "opt-in" out of the box
  • "/blog" URL is not reserved for the blogs list.
  • We could even use query params for the search terms.
  • Regarding pagination: see section below. Summary: don't have pagination just load more / infinite scroll.

Individual blog page

  • Use layout approach instead of having blog/[...slug]
  • Use our SEO or Pliny's? Can we use our own SEO (do we need to update it?)
  • Frontmatter for blog: TODO

Pagination

We probably want to take a look at Google's Pagination Documentation.

Discussion (now maybe irrelevant if we go for load more etc):

  • Change pagination to use query params instead of /page/<nr> paths. For this, we would only need a single blog/index.js page. Not really sure what we gain from this.

Questions

  • Do we want to support blog pages in the current (default) app template, or do we want to create a new "blog" template? Use the current template.
  • Do we provide an example / Obsidian template for blog (in docs for now) yes we do.
  • How to make it opt-in: For now, ok to make this hard-coded (KISS).
    • Idea A (simpler): /pages/blog could be renamed to e.g. /pages/_blog and we could define a new property in the config file for specifying what path should point to it (could be /blog by default) and use next redirects to handle it. I don't think redirects are good.
    • Idea B: Create a new package, an add-on that could be added by npx flowershow add blog, which would create /pages/blog and add Blog type to content layer config.