A work in progress…
A Jekyll site based on the minima theme (version 2.5.1). (The dependence on the gem theme has been overridden, so updates to minima will have no effect on Minimag.)
This repo is designed for development within a Docker container.
The initial construction of this site follows Bill Raymond’s YouTube video “Draft training - Run GitHub Pages in a Docker container,” which was a draft and unlisted as of April 2, 2023.
One departure of Minimag from minima is the implementation of a “card” presentation, including an illustration, for each post’s entry on posts-listing pages. A card has the following elements:
An image component
A text component, made up of subcomponents
A “featured post” will have a horizontal card format such that the image will occupy the top of the card, and the text elements will appear below the image
The posts in a list of not necessarily featured posts will have a vertical card format such that the image will occupy the left part of the card, and the text elements will appear in the right side of the card.
In its out-of-the-box configuration, the URL for a post
2023-04-02-welcome-to-jekyll.markdown is simply
This is in contrast to the default behavior of, the built-in theme minima, where the URL for a post encodes the post’s date and categories. E.g., when the categories are “jekyll” and “update”:
This decision for Minimag was made primarily to allow the date of a post to be updated without changing its URL.
Note: This decision implies that posts now share the same namespace as pages, so there is the possibility of collisions. Names of posts and pages must be chosen to avoid such a collision.
Related to this: The
_posts directory is now flat: there are not spearate folders by date and/or category.
The original default layout assumed:
In Minimag, the default layout is less opininated about the header. The structure of the header is now not defined by the default layout but rather by each other layout that inherit from default. This gives greater flexibility, for example, in placing the navbar either above or below a header banner and/or having a different header structure for, for example, the home page than a post page.
├── _includes ├── _layouts ├── _pages ├── _posts │ └── 2023-04-02-welcome-to-jekyll.markdown ├── _sass ├── about.md ├── assets │ ├── images │ │ └── posts │ │ ├── 2023-04-02-Oakland-Bay-Bridge-east-span-photo-1575649212494-720dd18f9c35.avif │ ├── main.scss │ └── minima-social-icons.svg └── index.md
By default (due to a setting in
_config.yml), every post will inherit the layout
Thus it is not necessary to include
layout: post in the front matter of a post.
There are three types of images for posts: (a)
top-image, and (c) interior images. Types (a) and (b) require special attention in the post’s front matter; type (c) does not.
object-fit: cover, because this (a) does not distort/skew the image’s native aspect ratio and (b) completely fills the alloted space without letterboxing. (See Jim Ratliff, “How the object-fit CSS property works: Comparing the various values,” CodePen.)
default, the default post-card image will be displayed
card-imageis unspecified, specifying
defaultcan have an effect when the post does have a specification for
top-image. In this case, specifying
defaultprevents the specified
top-imagefrom being displayed in the post’s card.
top-imagefor the post is specified,
_layouts/post.htmlso that the image can be rendered in the header portion of that layout.
top-image. Its full height will be displayed at the top of a post, and the remaining content of the post will begin immediately below the bottom of the
top-imageis not mandatory. Thus,
top-imageis specified, it is used at the top of the post.
top-imageis not specified, an image is not displayed at the top of the post.
card-imageshould have a native aspect ratio close to that of the frame in the card into which it must fit.
top-image, it is sufficient to specify that image for
top-image, and leave
card-imageunspecified. In that case the image for
top-imagewill be chosen for
It is intended that images used only in particular posts should be located here:
config.yml now defines two related variables:
url_images: "/assets/images" url_post_images: "/assets/images/posts"
See the post 2023-04-06-displaying-interior-images-with-markdown.markdown for ways that an image can be included in the interior of a post using Markdown syntax:
This site structure is available as open source under the terms of the MIT License.
post.htmlis now the default layout for posts. (No need to specify in front matter of a post.)
_postsdirectory: it’s flat.
site.descriptionexclusively for the jekyll-seo-tag plugin.
updateddatetime for posts (though it still needs to be implemented on each post) and it not yet connected to any sorting functionality.
<nav>landmark role, which had been nested within the banner landmark role,
<header>, to an independent top-level role.
_includes/header.htmland into its own
_includes/nav-role.html, the list items you want to be represented on the navbar.
_includes/header_A.htmlfor how (a) a standalone strip for the site title and/or a logo and (b) the navbar can be separately included in either order.
top-image) to be displayed at the top of each post (above the post’s title). You can specify alt text with
top-image-caption), which can be multi-line, to appear directly below the top-image as a caption.
I should probably use either Google or DuckDuckGo. See “The easiest search option for Jekyll,” WebJeda, July 18, 2016.
Minimag inherits from minima the jekyll-seo-tag plugin. From README_minima.md:
The usage docs for jekyll-seo-tag identify a large number of site-wide variables that this plugin will exploit when they’re present, including
social (and associated properties),
At the page/post level, tThe SEO tag will respect the following YAML front matter if included in a post, page, or document:
title- The title of the post, page, or document
description- A short description of the page's content
image- URL to an image associated with the post, page, or document (e.g.,
author- Page-, post-, or document-specific author information (see Advanced usage)
locale- Page-, post-, or document-specific locale information. Takes priority over existing front matter attribute
Note: Front matter defaults can be used for any of the above values as described in advanced usage with an image example.