Style Guide

Flamed Fury Style guide included for my own reference.

A lot of markdown packages are installed to help write posts. They can be configured in config/plugins/markdown.js.

h2 Heading

h3 Heading

h4 Heading

Skate ipsum dolor sit amet, nose blunt mute-air deck sick. Axle axle set baseplate method air. Steve Caballero coper bail crailtap transition. Nose blunt hip fakie China Banks crail slide. McTwist concave Christ air steps nose-bump. Half-flip quarter pipe rails roll-in.

Mini ramp skate or die yeah Bonite nose blunt.

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:

© © ® ® ™ ™ (p) (P) ±
test… test… test… test?.. test!..
!!! ??? , – —
“Smartypants, double quotes” and ‘single quotes’

Emphasis

This is bold text
This is italic text
Strikethrough

Blockquote

Heel flip hanger Skateboarder masonite flail. Nosepicker shoveit dude lipslide. Madonna pivot fakie cab flip camel back. Crail grab masonite cab flip cess slide.

Lists

Unordered lists

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

Ordered lists

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

Code

Syntax highlighting is handled by 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.

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

console.log(foo(5));

*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

Edit styles in css/blocks/code.css

Tables

Links

rel="noreferrer noopener" and target="_blank" is added automatically to external links. Edit styles in css/global/global-styles.css

link text
link with title

Autoconverted link https://github.com/flamedfury (enabled via linkify)

Emojis

Classic markup: 😉 :crush: 😢 :tear: 😆 😋
Shortcuts (emoticons): 😃 😦 😎 😉

Mark

Marked text

Footnotes

Footnote 1 link^[1].
Footnote 2 link^[2].
Inline footnote^[3] definition.
Duplicated footnote reference^[2:1].

*[HTML]: Hyper Text Markup Language

Media

Images

Use Eleventy’s build-time image transformations. More info at https://www.11ty.dev/docs/plugins/image/ and edit settings in config/shortcodes/imagePlaceholder.

Syntax:

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

Image with caption

YouTube

If there is ever a need to include a YouTube video, Justin Ribeiro’s lite-youtube web component takes care off this. Add youtube: true to frontmatter to activate.

Redirects

URLs can change over time, pages are moved around or you update 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/']
---