pid.brain.run

Open Graph images

2023-01-25T00:00:00Z

When you share your blog posts, a thumbnail image may appear - the image we define in our meta data as an Open Graph Image (og:image).

This starter generates these images for your blog posts automatically.

The fallback and default image for all other pages is the image set as opengraph_default in the meta.js global data file.

meta-info.njk

<meta
  property="og:image"
  content="{{ meta.url }}
  {% if (layout == 'post') %}/assets/images/social-preview/{{ title | slugify }}-preview.jpeg
  {% else %}{{ meta.meta_data.opengraph_default }}
  {% endif %}"
/>

To change the look and behaviour of those images and replace the SVG background edit src/social-preview.njk. The implementation is based on Bernard Nijenhuis article.

Post with all the markdown

2022-11-02T00:00:00Z

A lot of markdown packages are installed to help you write your posts. You can configure them in config/plugins/markdown.js.

As of my personal preference, there are some presets. For example the automatic conversion of web pages to links (lenesaile.com) and the automatic addition of target: '_blank' and rel: 'noreferrer noopener' for external links (all links with the pattern/^https?:/).

This is a small pitfall! Take care to not prefix your internal links with your domain, or else they will be treated ad external as well. To link internally use this pattern:

An internal link to the [about page](/about/)

h2 Heading

h3 Heading

h4 Heading

Muffin bonbon jujubes cheesecake chupa chups shortbread ice cream cotton candy cake. Jelly-o biscuit dessert danish dessert pastry tootsie roll lemon drops gingerbread. Cheesecake donut marzipan sweet roll icing muffin halvah. Dragée donut cake biscuit pie carrot cake sesame snaps jelly-o gummi bears.

Soufflé topping shortbread lemon.

hr

Typographic replacements

The replacement converts this input:

(c) (C) (r) (R) (tm) (TM) (p) (P) +-
test.. test... test..... test?..... test!....
!!!!!! ???? ,, -- ---
"Smartypants, double quotes" and 'single quotes'

To this:

Emphasis

This is bold text
This is italic text
~~Strikethrough~~

Blockquote

rbread. Cheesecake donut marzipan sweet roll icing muffin halvah. Dragée donut cake biscuit pie carrot cake sesame snaps jelly-o gummi bears. Cotton candy cookie croissant fruitcake.

Lists

Unordered lists

Create a list by starting a line with +, -, or *
Sub-lists are made by indenting 2 spaces:
Very simple!

Ordered lists

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa

Code

Syntax highlighting

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

Tables

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Post with a video

2022-10-31T00:00:00Z

This starter uses Justin Ribeiro’s lite-youtube web component. Add youtube: true to frontmatter to activate.

Post with an image

2022-10-12T00:00:00Z

This starter uses Eleventy’s build-time image transformations. Find more info on https://www.11ty.dev/docs/plugins/image/ and edit settings in config/shortcodes/imagePlaceholder.

For now there are three image sizes: 320px, 570px and 820px.
820px is the maximum size, equivalent to the width set for our content wrapper in prose.css: --wrapper-max-width: 55rem;.

The sizes attribute is set to sizes = '(min-width: 55rem) 820px, 100vw'.

If you want to adjust the wrapper width you should also adjust the image size in the shortcode accordingly.

Syntax

{% imagePlaceholder "path to image", "alt text", "caption - optional!" %}

Add your own sizes attribute (note how I set an empty string for the caption):

{% imagePlaceholder "path to image", "alt text", "", "(min-width:30em)  50vw, 100vw" %}

Example image with a caption

An interesting caption text.

CSS

You can change the CSS for the page and blog post images in ./src/assets/css/blocks/page.css and ./src/assets/css/blocks/blog.css:

.page img {
  max-inline-size: 100%;
  block-size: auto;
}

.blog img {
  max-inline-size: 100%;
  block-size: auto;
}

Post with some code

2022-09-01T00:00:00Z

This theme uses 11ty’s Syntax Highlighting Plugin, a pack of Eleventy plugins for PrismJS syntax highlighting. No browser/client JavaScript, highlight transformations are all done at build-time.

const cards = [...document.querySelectorAll('.card')];
cards.forEach(card => {
  card.style.cursor = 'pointer';
  let down,
    up,
    link = card.querySelector('a');
  card.onmousedown = () => (down = +new Date());
  card.onmouseup = () => {
    up = +new Date();
    if (up - down < 200) {
      link.click();
    }
  };
});

// © Heydon Pickering

form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

/* © Josh Comeau */

Edit styles in css/blocks/code.css

Post with 301 redirects

2022-08-28T00:00:00Z

URLs usually change over time, as you use another CMS or optimize your file structure.

A 301 is used when a page has permanently changed location.
Informing about this change is indispensable if you want to keep your incoming links working, be it from organic Google search or other pages that have linked to your content.

Aleksandr Hovhannisyan came up with an elegant solution for Eleventy and Netlify. To directly cover several possible previous routes it is created as an array. You can find the loop in _redirects.njk.

Usage

Frontmatter:
---
redirectFrom: ['/old-route/', '/optionally-another-old-route/']
---

Post with fetched content

2022-08-28T00:00:00Z

Eleventy Fetch fetches and caches resources - at configurable intervals.

This is an example of fetching external data.
In this case, my public repositories (with more than zero stargazer) and a cache duration of 1 day.

Endpoint editable in _data/github.js.