711ty, an Eleventy Starter A mildly opinionated Eleventy starter. Your Name Here youremailaddress@example.com 2023-09-05T00:00:00Z https://711ty.dev/ Using 711ty 2023-09-05T00:00:00Z https://711ty.dev/posts/using-711ty/ There’s a little bit of housekeeping to do in order to make this template your own.

Update configuration data

711ty uses a config file to store project specific values. This file can be found in .seven11ty.js. You’ll want to update the following values to suit your project:

module.exports = {
	// Directory structure
	dir: {
		input: 'src',
		output: 'www',
		includes: 'views',
		layouts: 'views/layouts',
		data: 'data',
		// ⬇ only 711ty uses these
		assets: 'assets',
		styles: 'assets/styles',
		images: 'assets/images',
	},

	// Control which files Eleventy will process
	// e.g.: *.md, *.njk, *.html, *.liquid
	templateFormats: ['md', 'njk'],

	// Pre-process files with: (default: `liquid`)
	templateEngine: 'njk',

	// Image formats and quality to generate
	// Pass `same` to generate responsive images in the input format
	// Documentation: https://sharp.pixelplumbing.com/api-output
	imageFormats: {
		// Uncomment AVIF for smaller images but longer build times
		// avif: 30,
		webp: 60,
		same: 75,
	},
};

Update template metadata

Eleventy uses global data files to conveniently expose data to every template in an Eleventy project. In this template global data files can be found under src/data.

This template uses site.js to pull in useful default global values. These of course can be overridden in your content frontmatter thanks to Eleventys data cascade.

// Required. The name of your project.
title: '711ty, an Eleventy Starter',

// Required. A brief description of your project.
description: 'A mildly opinionated Eleventy starter.',

// Required. A short name used exclusively in webmanifest.njk. Keep it under 12 characters to minimize the possibility of truncation. Can be safely deleted if you delete webmanifest.njk.
shortName: '711ty',

// Required. SEO indexing behaviour.
robots: 'index, follow',

// Required. Used exclusively in webmanifest.njk. This sometimes affects how an OS displays your site. Can be safely deleted if you delete webmanifest.njk.
themeColor: '#00e2e6',

// Required. Used exclusively in webmanifest.njk. Recommend using the same value as body background color in your CSS. Can be safely deleted if you delete webmanifest.njk.
backgroundColor: '#ffffff',

// Required. lang attribute for the <html> tag. Used by screen readers and search engines to determine the language of a page. Can be safely deleted if you delete webmanifest.njk.
lang: 'en',

// Optional. locale attribute for the <html> tag. Used by screen readers and search engines to determine the language of a page. Can be safely deleted if you delete webmanifest.njk.
locale: 'en_US',

// Optional. Delete block if not used. Author values for project.
author: {
	name: "Author Name",
	email: "author@email.com",
	url: 'https://example.com/about-me/',
	github: 'https://github.com/your-name-here',
	handle: 'your-name-here',
},

// Optional. Pagination values for project.
paginate: 6,

// Optional. Delete block if you don't require link tags related to your idenity. Duplicate as many objects as you need!
identity: [
	{
		rel: 'me',
		url: 'URL-GOES-HERE',
	},
	{
		rel: 'pgpkey',
		url: 'URL-GOES-HERE',
	},
],

// Optional. Delete block if you don't require Opengraph.
og: {
	locale: 'en_US',
	type: 'website',
	image: {
		rel: '/og-default.jpg',
		alt: 'Default OG image displayed here',
	},
},

You’ll also need to update development and production urls to your project requirements. These can be found in src/data/env.js:

const devUrl = 'http://localhost:8080';
const prodUrl = 'https://example.com';

Favicons and Opengraph

Favicons

Favicons are stored under src/static/favicons and are automatically passed through to their relevant directories on build. All you need to do is create the images for your project.

Opengraph

A default Opengraph image can be found under src/static and is named og-default.jpg. Much like the favicons all you need to do is create a relevant default image to be used.

You can of course delete this file if you don’t require Opengraph in your project. Please also update ./11ty/passthroughs.js and remove this line:

eleventyConfig.addPassthroughCopy({ "src/static/og-default.jpg": "/og-default.jpg" });

Responsive images

This template uses Eleventy Image to generate responsive images and handles this all in /11ty/shortcodes/. You will want to adapt widths, sizes and formats to suit your projects needs:

const image = async function (src, alt, sizes = '90vw, (min-width: 1280px) 1152px') {
	let metadata = await Image(src, {
		widths: [320, 640, 960, 1280, 1600, 1920],
		formats: ['avif', 'jpeg'],
	});

	let imageAttributes = {
		alt,
		sizes,
		loading: 'lazy',
		decoding: 'async',
	};

	return Image.generateHTML(metadata, imageAttributes);
};

You can of course use this markup to create a new shortcode for other use cases. Be sure to import this in /11ty/shortcodes/index.js though.

And now you’re ready to go!

]]> Markdown Demo 2023-09-05T00:00:00Z https://711ty.dev/posts/markdown-demo/ This is the part of the post that will appear as the excerpt.

Fresher than you, I’m fresher than you. Foot up, my foot up. Man this here like rollin’ dice. Boy, I’m drinkin’, park it in my lot, 7-11. Legs movin’ side to side. I know you care. Flexin’ while my hands up. Smack it, smack it in the air. Man this here like rollin’ dice. Ooh wee BB freaky deaky. Nefertiti, edges kinky. Wave your hands side to side. Clap, clap, clap, clap, clap it. Don’t you drop that alcohol. Rock that kufi[1], dye dashiki[2]. Fresher than you™.

Wave your hands side to side, put it in the air. Girl, I’m tryna kick it with ya. Clap, clap, clap, like you don’t care. (I know you care)

I know I’m thinkin’ bout that alcohol. Spinnin’ while my hands up then I’m tippin’ all my hands up. Legs movin’ side to side. Never drop that alcohol. I’m spinnin’, I’m spinnin’, I’m spinnin’ while my hands up (drank). Here is an inline note.[3] Rock that kufi, dye dashiki. Mad 'cause I’m so fresh. Smack it, smack it in the air, smack it, smack it in the air. I spin around, and I kick it with ya.

Lists

Unordered

  • Create a list by starting a line with +, -, or *
  • Sub-lists are made by indenting 2 spaces:
    • Marker character change forces new list start:
      • I’m spinnin’
      • I’m spinnin’
      • I’m spinnin’ while my hands up
  • Very easy!

Ordered

  1. Clap
  2. Clap
  3. Clap like you don’t care
  4. You can use sequential numbers…
  5. …or keep all the numbers as 1.

Start numbering with offset:

  1. seven
  2. eleven

Tables

Lyric Notes
Rock that kufi, dye dashiki A dashiki is a colorful garment widely worn in West Africa that covers the top half of the body.
Nefertiti, edges kinky Queen Nefertiti was one of the greatest rulers to preside over Egypt and one of the most beautiful women in history
This trick about to go off A trick is a flirty, coquette-ish woman who gets around.

Code

Syntax highlighting

// Add above your Eleventy config
const markdownIt = require("markdown-it");

// Add within your config module
const md = new markdownIt({
  html: true,
});

eleventyConfig.addFilter("markdown", (content) => {
  return md.render(content);
});

  1. Here is the footnote. ↩︎

  2. Here’s one with multiple blocks.
    Subsequent paragraphs are indented to show that they belong to the previous footnote. ↩︎

  3. Inlines notes are easier to write, since you don’t have to pick an identifier and move down to type the note. ↩︎

]]> A Post with Images 2023-09-04T00:00:00Z https://711ty.dev/posts/a-post-with-images/ This is the part of the post that will appear as the excerpt.

The rest of this post will only appear on the post’s page.

Markdown images will automatically use the responsive picture shortcode.

Time-lapse of a blue and white train moving fast through a stationPhoto by Brianna Tucker on Unsplash

You can use the figure shortcode to add a caption to an image. The image content can be a picture shortcode or img tag.

The depths of space showing an immense variety of colour across millions of stars.
Photo by Emily Bauman on Unsplash

Or you can use the picture shortcode directly.

The depths of space showing an immense variety of colour across millions of stars.Photo by Eric Ward on Unsplash

Think me see she pink bikini. Shoulders sideways, smack it, smack it in the air. Sweatin’ out my blow out, sweatin’ out my presses. Smack it, smack it in the air, legs movin’ side to side. This trick about to go off, mad 'cause I’m so fresh. Hold that cup like alcohol.

A final paragraph.

]]> Embed Everything! 2023-09-03T00:00:00Z https://711ty.dev/posts/embed-everything/ This post demonstrates how to embed content using Embed Everything.

https://www.youtube.com/watch?v=OSAOsm1u-OE

Fresher than you, I’m fresher than you. Foot up, my foot up. Man this here like rollin’ dice. Boy, I’m drinkin’, park it in my lot, 7-11. Legs movin’ side to side. I know you care. Flexin’ while my hands up. Smack it, smack it in the air. Man this here like rollin’ dice. Ooh wee BB freaky deaky. Nefertiti, edges kinky. Wave your hands side to side. Clap, clap, clap, clap, clap it. Don’t you drop that alcohol. Rock that kufi, dye dashiki. Fresher than you.

https://open.spotify.com/track/02M6vucOvmRfMxTXDUwRXu

I know I’m thinkin’ bout that alcohol. Spinnin’ while my hands up then I’m tippin’ all my hands up. Legs movin’ side to side. Never drop that alcohol. I’m spinnin’, I’m spinnin’, I’m spinnin’ while my hands up (drank). Rock that kufi, dye dashiki. Mad 'cause I’m so fresh. Smack it, smack it in the air, smack it, smack it in the air. I spin around, and I kick it with ya.

https://vimeo.com/162657471

Wave your hands side to side, put it in the air. Girl, I’m tryna kick it with ya. Clap, clap, clap, like you don’t care. (I know you care). Think me see she pink bikini. Shoulders sideways, smack it, smack it in the air. Sweatin’ out my blow out, sweatin’ out my presses. Smack it, smack it in the air, legs movin’ side to side. This trick about to go off, mad 'cause I’m so fresh. Hold that cup like alcohol.

]]>