Giving credit where credit is due, this page is based off of the Credits page from Lea Verou.
This site was built using Eleventy, hosted on GitHub Pages, with previews deployed with Netlify. Certificate courtesy of GitHub Pages and Let’s Encrypt.
Libraries #
Fonts #
:root {
--sl-font-sans: "Oswald", sans-serif;
--sl-font-mono: "Fira Mono", monospace;
--sl-font-serif: "Lato", sans-serif;
--bs-font-sans-serif: "Lato", serif;
}
- Oswald
- Headers, specified through general
<H>
tags and CSS classes
- Headers, specified through general
- Lato
- Paragraphs, specified through general
<p>
tags and CSS classes
- Paragraphs, specified through general
- Fira Mono
- Code blocks, specified through general
<code>
tags and CSS classes
- Code blocks, specified through general
Icons #
A custom icon component (icon-component.js) is used to render icons as web components with Font Awesome as the preferred icon library.
<fa-icon type="brands" name="github" size="md"></fa-icon>
Plugins #
- eleventy-plugin-inclusive-language to check for inclusive language
- eleventy-plugin-rss to automatically generate an RSS feed
- eleventy-plugin-syntaxhighlight to highlight code blocks (seen on this page)
- eleventy-plugin-toc to automatically generate a linked table of contents. I use an
if content | toc
to show this only if the page has linkable headings. - markdown-it-anchor adds IDs to markdown headings in order to create anchor links. Used in combination with the table of contents plugin.
- markdown-it-eleventy-img used for image processing of vector and raster images.
- markdown-it-highlightjs - highlights code blocks at build time utilizing PrismJS syntax highlighting.
- eleventy-plugin-emoji-readtime calculates the reading time of blog posts (i.e. any page using the
blog
layout) based on the number of words. A tag with the time to read is added to the top of a page where the FrontMatter hasreadtime: true
.