Yuri Vyatkin | Personal Website

Color Settings

2020-09-01T17:44:03Z

Customizing almost all the colors is easy…assuming you’re familiar with how colors work in TailwindCSS.

Check out the /src/_data/colors.js file for instructions and examples of how to customize the colors around the system.

It should be easy to add your own customizations and settings given the comments and the code in the layouts.

NOTE: Technically you could include any additional TailwindCSS classes with the color settings. Check out the excerptCustom setting below for an example of what I included to manage the display of the excerpts on the blog listing page.
But it’s not always practical due to display variations required on different views.

/**
 * ===== Excerpts on Post Lists
 */
excerptDefault: 'text-gray-600',
excerptCustom: 'text-sm leading-relaxed italic text-gray-600',

Here’s a sample snippet from the /src/_data/colors.js file showing how to completely customize the main navbar above:

NOTE: I’d love to have more color variants…for exmaple lighter text colors for some elements. But you’ll find you get dinged in Lighthouse reports if you don’t have sufficient color contrast ratio.

/**
 * Reason for both 'xxxDefault' and 'xxxCustom'
 *  I could have only provided ONE set of settings. But knowing how users
 *  actually use a system, at some point they'll want to revert to the
 *  original color set...or at least reference it.
 *  Providing a 'Default' and 'Custom' set allows you to keep the original
 *  colors for future reference while setting 'Custom' overrides for entire
 *  sets or individual elements.
 *
 *    If you don't care about keeping them as reference, you can just
 *      change the "xxxDefault" key values.
 *
 *    "xxxCustom" values will always override "xxxDefault" values.
 *
 * ~~~~~ Cusomization tip ~~~~~
 *    To quickly create a full set of custom colors,
 *    simply select and copy the set of "Default" elements
 *    and 'replace paste' them in the "Custom" area.
 *    Then just change the "color" value in the middle.
 *    This will help keep the customization values looking correct
 *    and wil ensure no errors in "text", "bg", and "border" values.
 */
navDefault: {
  barBg: 'bg-white',
  text: 'text-teal-500',
  textActive: 'text-teal-600',
  textHover: 'text-teal-600',
  textActiveBg: 'bg-teal-100',
  textFocus: 'text-teal-500',
  mobileBg: '',
  mobileBgActive: 'bg-teal-700',
  mobileBgHover: 'bg-teal-100',
  mobileBgFocus: 'bg-teal-300',
  mobileText: 'text-teal-500',
  mobileTextActive: 'text-teal-300',
  mobileTextHover: 'text-teal-600',
  mobileTextFocus: 'text-teal-700',
  mobileButton: 'text-teal-500',
  mobileButtonHover: 'text-teal-600',
  mobileButtonBgHover: 'bg-teal-100',
},
/**
 *  NOTE: You MUST keep all Custom variable keys, even if their values
 *  are empty and you don't intend to use them.
 *  If you delete any variable keys, 11ty won't work.
 */
navCustom: {
   barBg: '',
   text: 'text-gray-700',
   textActive: 'text-gray-800',
   textHover: 'text-gray-800',
   textActiveBg: 'bg-gray-100',
   textFocus: 'text-gray-500',
   mobileBg: '',
   mobileBgActive: 'bg-gray-700',
   mobileBgHover: 'bg-gray-100',
   mobileBgFocus: 'bg-gray-300',
   mobileText: 'text-gray-500',
   mobileTextActive: 'text-gray-300',
   mobileTextHover: 'text-gray-600',
   mobileTextFocus: 'text-gray-700',
   mobileButton: 'text-gray-500',
   mobileButtonHover: 'text-gray-600',
   mobileButtonBgHover: 'bg-gray-100',
},

Here’s how to manage buttons farther down in the /src/_data/colors.js file:

/**
 * ===== Buttons =====
 */
buttonDefault: {
  text: 'text-white',
  textHover: 'text-white',
  bg: 'bg-teal-700',
  bgHover: 'bg-teal-700',
  border: 'border-teal-900',
},
buttonCustom: {
  text: '',
  textHover: '',
  bg: '',
  bgHover: '',
  border: '',
},

Managing Social Share, Author, and Footer Icons

2020-09-02T17:44:03Z

As easily as you can manage colors, you can also control the display, or not, the SVG icons around the site.

NOTE: We are a Font Awesome Pro member and the SVGs in the /src/assets/svg directory are Font Awesome SVGs that have been modified to work specifically with TailwindCSS and the customizations of this system. If you want to add your own SVGs you’ll probably need to modify them and please be sure to follow the attribution license.

Footer Social Icons

For example, the icons in the Footer are controlled in the /src/_data/social.json to allow Editors to manage without them having to work in the /src/_data/structure.js file where they might create some damage.

NOTE: The JSON array in /src/_data/social.json doesn’t look quite like this flattened JSON, but it’ll be obvious how to manage it.

{
	"dribbble":   "https://www.dribbble.com/",
	"github":     "https://www.github.com/",
	"instagram":  "https://www.instagram.com/",
	"linkedin":   "http://www.linkedin.com/",
	"piedpiper":  "http://www.piedpiper.com/",
	"pinterest":  "https://www.pinterest.com/",
	"rss":        "/feed.xml",
	"twitter":    "https://www.twitter.com/",
	"youtube":    "https://www.youtube.com/"
}

To disable a specific platform, just set it’s value to either “” or false. (both work)

{
	"dribbble":   "",
	"github":     "https://www.github.com/",
	"instagram":  "https://www.instagram.com/",
	"linkedin":   "http://www.linkedin.com/",
	"piedpiper":  "http://www.piedpiper.com/",
	"pinterest":  "https://www.pinterest.com/",
	"rss":        "/feed.xml/",
	"twitter":    "https://www.twitter.com/",
	"youtube":    false
}

Author Social Icons

The same is true for the social links in the /src/_data/authors.json where you manage social links for each author.

Adding SVG Icons to Content in Your .md Posts

The post SVG - Shortcode goes into detai on how to manage all the SVG Sprites in the system and how to add them to your Post and Pages markdown content via a Shortcode.

Post Social Share Icons

Posts details, such as this page, have “Social Share” icons built in so readers can easily share to their favorite platform. These SVGs, alond with the native share code for each platform are managed in the /src/_includes/components/socialshare.njk file.

And in the /src/_data/structure.js file you can globally disable Footer and Post Share icons:

	g_showFooterSocialIcons: true,
	g_showSocialShareIcons: true,

Also in the /src/_data/structure.js file you can globally disable the Author link in Post List and Detail views:

	g_showAuthors: true,

NOTE: We don’t support Facebook and deleted our Profiles and Pages back in 2017. If you want FB support you should be able to easily add it given all the examples across the /src/_data/* files and templates.

Wrap & Columns - Shortcodes

2020-09-03T17:44:03Z

The columns below use the wrap, columns, and cols shortcodes as shown in the following code.

Additional instructions are included in the /utils/paired-shortcodes.js file.

NOTE: in Markdown you must provide an empty line above a heading, as in the ## Columns below or else it won’t be processed by Markdown.

The wrap wrapper is optional and only used if you want to include any content within the “block.”
For example, if you wanted to wrap the columns in a background color (like below) and include the header or other content in that block.

ALSO NOTE: All the border, rounded, and background color stuff is optional and for example only. Margins and Padding are minimal on the cols shortcode (p-4, m-2)) in order to preserve responsive spacing.

{% wrap "px-2 mt-8 rounded-lg pb-2 border border-gray-300 bg-gray-200" %}

  ### Columns Example

  {% columns %}

    {% cols "bg-gray-100 rounded-lg" %}
      Left column
    {% endcols %}

    {% cols "bg-gray-100 rounded-lg" %}
      Right column
    {% endcols %}

  {% endcolumns %}

{% endwrap %}

Columns Example

Left column

Right column

Description List - Shortcodes

2020-09-04T17:44:03Z

This post uses the paired shortcode wrap and Description List paired shortcodes dl (description list), dt (description term), and dd (description description).

The wrap paired shortcode used in the exmaple is optional and is used to wrap the entire list in a rounded border with a gray-200 background.

💡 See the /src/utils/paired-shortcodes.js file for full description and usage examples.

Frequently asked questions

How can I create Definition Lists in Markdown?: Use my cool shortcodes described above and in the code example below.
How many List items can I have?: As many as you want. Just keep adding more `dt` and `dd` blocks like this one.
Is it possible to have background colors, borders, etc.?: Yep. Just use the `wrap` shortcode, like in this example, and style it however you want.

{% wrap "px-2 mt-8 mb-12 rounded-lg pb-2 border border-gray-300 bg-gray-200" %}

  ## Frequently asked questions

  {% dl %}

    {% dt %}
      How can I create Definition Lists in Markdown?
    {% enddt %}
    {% dd "text-gray-600" %}
      Use my cool shortcodes described above and in the code example below.
    {% enddd %}

    {% dt %}
      How many List items can I have?
    {% enddt %}
    {% dd "text-gray-600" %}
      As many as you want. Just keep adding more `dt` and `dd` blocks like this one.
    {% enddd %}

    {% dt %}
      Is it possible to have background colors, borders, etc.?
    {% enddt %}
    {% dd "text-gray-600" %}
      Yep. Just use the `wrap` shortcode, like in this example, and style it however you want.
    {% enddd %}

  {% enddl %}

{% endwrap %}

Blockquotes - Shortcodes

2020-09-05T17:44:03Z

Basic Markdown Blockquote

Below is a basic blockquote in Markdown.

> this is a blockquote. this is a blockquote.

Which generates this:

this is a blockquote. this is a blockquote.

The minimal styling is managed in /src/assets/css/tailwind.css which sets left padding and margins of 1rem (16px) and a left border of 4px colored gray-500:

blockquote {
	@apply pl-4 m-4 border-l-4 border-gray-500;
}

Blockquote Paired Shortcode

With a simple bq shortcode, you can override the default CSS and style it however you like. For example:

{% bq "p-4 border-red-500 italic text-blue-500 border-t-4 bg-gray-200" %}
this is another blockquote via the `bq` paired shortcode located in `/utils/paired-shorcodes.js`.
{% endbq %}

Generates the customized blockquote below:

this is another blockquote via the `bq` paired shortcode located in `/utils/paired-shorcodes.js`.

Adding Emoji to Blockquotes (or anywhere you want)

Because this system uses markdown-it-emoji we can insert Emojis anywhere by using their :code: as in the exmaple below:

> :bulb: **NOTE:** A blockquote with a nice Emoji to draw attention.

Generates the following blockquote:

💡 NOTE: A blockquote with a nice Emoji to draw attention.

Featured Post Images

2020-09-06T17:44:03Z

Just like in Wordpress, it’s easy to add a Featured Image to display at the top of the page.

Unlike in Wordpress, you can also easily manage the height of the Featured Image at any of the TailwindCSS breakpoints.

💡 TIP: You could also use the “hero” Frontmatter settings, examples in the index.md file for all the options and features for a video, graphic, carousel, or split hero section.

How to manage Featured Post Images in this system

Local Image
- Create an image in your favorite image editor.
- Generally it’s best if the image is landscape and not portrait orientation.
- Place it wherever you like in the /src/assets/images/ directory or sub-directories.
- Enter the path to the image relative to /src/assets/images/
  - For example, if the image file is “featured-image.jpg” and you placed it in /src/assets/images/2020/09/ then you’d enter 2020/09/featured-image.jpg in the images:feature: frontmatter.
External Image
- If you’d like to use an externally hosted image (like from Unsplash)
- Enter the full URL in the images:feature: frontmatter.

Set Featured Image Height

Default image height is currently set to h-48 md-1/3 which is basic TailwindCSS except for that custom theme height at medium and above of md-1/3 which is set in /tailwind.config.js.

You can override this with any TailwindCSS height settings, plus the custom settings in /tailwind.config.js for any of TailwindCSS’s default breakpoints.

Set Featured Image Position

Lastly, you can set the image’s position within the container by using TailwindCCS’s Object Position.

Default is set to object-center but if your image’s focus area is off center, you can try object-left or object-right to see if that placement is better

For example, this page’s frontmatter currently looks like this:

# /src/posts/2020-09-06-featured-images.md
title: Featured Post Images
date: 2020-09-06T17:44:03.000Z
excerpt: Easily add featured images (heros) just like in Wordpress.
author: shane-robinson
seo:
  title:
  description:
  image: 2020/09/featured-image.jpg
images: # relative to /src/assets/images/
  feature: 2020/09/featured-image.jpg # https://source.unsplash.com/random/800x600
  thumb: 2020/09/featured-image.jpg
  align: object-left # object-center (default) - other options at https://tailwindcss.com/docs/object-position
  height: h-64 md:h-1/3 # optional. Default = h-48 md:h-1/3
tags:
  - featured-image
  - hero
  - frontmatter
  - tailwindcss

Full Frontmatter Example

2020-09-07T17:44:03Z

Currently, the frontmatter in the index.md file houses all the values and controls currently available…even if they aren’t used on the home page.

Any of the frontmatter elements used on the home page can be used on ANY Page or Post in this system.

As of this posting, the index.md frontmatter looks like this:

# This is a full listing of available Frontmatter options, available for any content (.md) file.
title: Let's talk about static sites!
layout: page
excerpt: # used for page excerpts and META (will be overwritten if SEO used below)
author: shane-robinson # only displayed on Post lists and detail views. Defaults to _data/meta.authorURL
eleventyNavigation: # Required if want to display in Main Nav Bar
  key: main # "main" is required
  title: Welcome # as it will appear in the nav
  order: 1 # order to display in the nav (index = 1)
seo: # SEO values are used for OG and will overwrite 'title' and 'excerpt' above
  title:
  description:
  image: # used for OG:image and Twitter:image. Overrides default set in _data/meta.siteImage
hero: graphic # options: carousel, graphic, video, split (text & image)
heroSettings:
  height:
    mobile: # options = h-1/1 (default = full screen), h-1/2, h-1/3, h-3/4, h-9/10, h-48 (12rem, 192px), h-56 (14rem, 224px), h-64 (16rem, 256px)
    desktop: # leave blank to inherit "mobile" height (default = full screen)
  bg:
    color: # default bg-black
    image: home/copter.jpg # relative to /assets/images/
    imagePosition: # options = bg-center (default), bg-left, bg-right
    video: pixabay-john-macdougall.mp4 # local relative /assets/video/, or full https://... if remote?
    opacityMobile: opacity-50 # options opacity-n, 5, 10, 15, 20, 25, 50, 75, 100 (default)
    opacityDesktop: opacity-75 # Leave blank to inherit opacityMobile, use same options as opacityMobile
  headingText: Exploring the limits of the possible
  headingTextColor: # default = text-white (can use any TailwindCSS text-[color]-[xxx])
  headingTextCase: # default = as typed - options: uppercase, lowercase, capitalize
  subheadingText: My observations and musing in the areas of curiosity
  subheadingTextColor: # Leave empty to inherit headingTextColor or default (text-white) or use any text-[color]-[xxx]
  buttonText: Contact Me # no button generated if left blank
  buttonURL: /contact/ # full url required. Example: https://thisdomain.com/somepage/
  buttonTextColor: # leave blank to inherit from /src/_data/colors.buttonCustom or buttonDefault
  buttonBgColor: # leave blank to inherit from /src/_data/colors.buttonCustom.bg or buttonDefault.bg
  buttonBgHover: # leave blank to inherit from /src/_data/colors.buttonCustom.bgHover or buttonDefault.bgHover
  buttonBorder: # leave blank to inherit from /src/_data/colors.buttonCustom.border or buttonDefault.border
  carousel:
    images:
      - home/6.jpg
      - home/7.jpg
      - home/8.jpg
      - home/9.jpg

YouTube Video Embed

2020-09-08T17:44:03Z

This system ships with a custom YouTube Embed shortcode that makes it easy to embed as many videos in your markdown posts/pages as you like.

Features

Only requires the YouTube ID (with default fall back).
Allows you to set “Title” which is required for Accessibility (with default fall back to “YouTube Video”).
Allows you to set custom ratio to display older videos correctly (with default fall back to 16:9).
Allows you to set the clip start time in “mm:ss” format (optional).

Usage

Find the YouTube video you want to embed and grab the video ID. In the following example the video ID is oHg5SJYRHA0.

https://www.youtube.com/watch?v=oHg5SJYRHA0

We put the video ID in the first attribute.

Title in the second.

Also, in this particular example, the video is older and is not in the 16:9 format ratio. So we’ll take advantage of setting a custom ratio in the last attribute. I arrived at “8:6” by checking the size of the video’s embed, which is 1217 x 913, which divides to 1.33…as does 8/6.

And we can leave the fourth attribure, start time completely off because we want the video to start at the beginning. If we wanted it to start at 1:30 we would simple put “1:30” in the third attribute.

NOTE: If you want the video to display at regular 16:9 ratio and start at the beginning, you don’t even need to provide the empty third and fouth attributes. And if you just wanted the accessible Title to be the default “YouTube Video”, you wouldn’t even need the second attribute.

{% youtube "oHg5SJYRHA0", "Fun Title Here", "8:6" %}

SVG - Shortcode

2020-09-09T17:44:03Z

This template uses the eleventy-plugin-svg-sprite package which compiles an SVG Sprite and installs a shortcode to display SVG in any file (Markdown, Nunjucks etc).

🔥 Massive Thank You to Ryan Scherler and his Eventy Starter where I first learned about the svg-sprite package. Thanks also to Patrick Chong for creating eleventy-plugin-svg-sprite.

SVG Sprites : Managing Display, Colors, & Links

NOTE: The post, Managing Social Share, Author, and Footer Icons goes into a bit of detail on how to manage those elements.

SVG Sprites live in the /src/assets/svg/ directory and are currently used in this system on:

The icons in the Footer
- Manage their colors in /src/_data/colors.js
- Manage which icons display and their links in /src/_data/social.json
- Disable them competely in /src/_data/structure.js by setting g_showFooterSocialIcons: false.
The logo (both desktop and mobile) in the Nav Bar
- Manage their colors in /src/_data/colors.js
- Create your own and name them logo.svg and logo_mobile.svg and replace the current files in /src/assets/svg/ directory
The Social Share icons on Post Details
- Manage their colors in /src/_data/colors.js
- Manage their functionality in /src/_includes/components/socialshare.njk
- Disable them completely in /src/_data/structure.js by setting g_showSocialShareIcons: false or disable individual plaforms by setting their values to false.
The Author’s social websites on the Author Details
- Manage their colors in /src/_data/colors.js
- Manage which icons display and their links in /src/_data/authors.json for each Author

Adding Your Own SVGs to the System

If you want to add your own SVGs for use with the SVG Sprite system and SVG Shortcode, you’ll have to first add them to the /src/assets/svg/ directory and make sure they are named using the same syntax as the SVGs already present.

You should also open those SVGs in your text/coding editor and see how they have been modified for accessibility and to return the best Lighthouse optimization scores.

Using SVG Sprites in .md Content

If you’re happily typing along on that next great blog post and you realize what it really needs is a SVG, you’re in luck!

Just use the SVG Shortcode installed by eleventy-plugin-svg-sprite to insert a SVG anywhere and control its size, color, padding, position, float, etc. For example, the following code returns the GitHub SVG floating to the left:

{% svg "github", "mt-1 mr-2 h-10 w-10 text-blue-500 float-left" %}

Site META, OG, and Twitter Cards

2020-09-10T17:44:03Z

This system ships with the ability to manage full site META, open graph, and Twitter card data and images.

Managing Top Level Data

Using the /src/_data/meta.js file, you can set top level site data, fallback data, and misc data such as Author and Addres information.

One of the first things you’ll want to do upon installing and gonfiguring this 11ty starter will be to change the values in this file to your default site data.

module.exports = {
	siteURL: process.env.URL || 'http://localhost:8080',
	siteName: "Shane Robinson's 11ty | TailwindCSS | Alpine.js Template",
	siteDescription:
		'A highly configurable 11ty template to quickly spin up a fully functional website with TailwindCSS and Alpine.js baked in.',
	siteImage: '/assets/images/site/default.png',
	lang: 'en',
	locale: 'en_us',
	authorName: 'Shane Robinson',
	authorURL: 'shane-robinson',
	authorEmail: 'shane@shanerobinson.com',
	twitterSite: '@shanerobinson',
	twitterCreator: '@shanerobinson',
	address: {
		street: '123 Main Street',
		city: 'Anytown',
		state: 'KZ',
		zip: '54321',
		phoneDisplay: '+1 (123) 456-7890',
		phoneCall: '+11234567890',
		email: 'hello@domain.com',
	},
}

Managing META and SEO at the Page and Post Level

Using Frontmatter in the Posts and Pages .md files, you can override the default values setup in the /src/_data/meta.js file above.

Take for example this very page’s Frontmatter:

---
title: Site META, OG, and Twitter Cards
date: 2020-09-10T17:44:03.000Z
excerpt: Manage Site META data, open graph, and Twitter Card content at the Post and Page level
author: shane-robinson
seo:
  title:
  description:
  image: 2020/09/twitter-card-image.png
images: # relative to /src/assets/images/
  feature:
  thumb: 2020/09/twitter-card-image.png
  align: # object-center (default) - other options at https://tailwindcss.com/docs/object-position
  height: # optional. Default = h-48 md:h-1/3
tags:
  - meta
  - open-graph
  - twitter
  - structure
  - customization
  - frontmatter
---

The seo: image: 2020/09/twitter-card-image.png will be used as the Twitter card and Open Graph image if you view the HTML source of this page.

You can also see that same image is used for the images: thumb:. I thought about having a single image but thought some editors may want to have separate control over individual images used for OG and Twitter and the thumbnail displayed on the Posts Listing and Tags Listing pages.

NOTE: There’s an entire post about managing Feature Post Images which you can see if left blank in this Post.

Fallback Data

Take a look at the /src/_includes/head.njk file and you’ll see how the HTML HEAD content is generated based on what data is available.

For example, in a Post’s Frontmatter, if the Editor does NOT provide seo: title: content, then the og:description looks for the frontmatter excerpt value and if that doesn’t exist then it finally falls back to the meta.siteDescription in the /src/_data/meta.js file.

Here’s the OG and Twitter card snippets from the /src/_includes/partials/head.njk file:

{#- Open Graph #}
<meta property="og:site_name" content="{{ meta.title }}" />
<meta
	property="og:title"
	content="{{ seo.title or title }} | {{ meta.siteName }}"
/>
<meta
	property="og:description"
	content="{{ seo.description or excerpt or meta.siteDescription }}"
/>
<meta property="og:url" content="{{ absolutePageUrl }}" />
<meta property="og:locale" content="{{ meta.locale }}" />
<meta
	property="og:image"
	content="{{ ogImage | url | absoluteUrl(build.url) }}"
/>
{#- Twitter Card #}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="{{ meta.twitterSite }}" />
<meta name="twitter:creator" content="{{ meta.twitterCreator }}" />
<meta
	name="twitter:title"
	content="{{ seo.title or title }} | {{ meta.siteName }}"
/>
<meta
	name="twitter:description"
	content="{{ seo.description or excerpt or meta.siteDescription }}"
/>
<meta
	name="twitter:image"
	content="{{ ogImage | url | absoluteUrl(build.url) }}"
/>

NOTE: There’s probably no reason to have a separate /src/_includes/partials/head.njk file. Its contents could just as easily live in the /src/_includes/layouts/base.njk file. But it is easier and cleaner to work in separate files… Same with the footer.njk file. It could just be inserted into the base.njk file. I may combine them in the future?

Manage Hero Graphics, Carousels, Splits, and Video

2020-09-11T17:44:03Z

This system ships with default support for full width Hero content of almost any height. This page is a live example of a graphic hero set to h-1/2 height.

Full screen images/graphics
Full screen carousels/sliders
Full screen background videos
And full screen splits (text one side, image the other)

An Editor can easily manage all this via Frontmatter. There are two parts to managing Hero frontmatter:

hero:
heroSettings:

💡 NOTE: You don’t need ANY of the hero: or heroSettings: frontmatter elements if you’re not using a Hero. Check any of the other .md Post files and you’ll see no Hero frontmatter there.

1. Frontmatter -> hero:

In the hero: frontmatter key you choose from carousel, graphic, split, video.

Based on these setting, the appropriate /src/_includes/components/* will be engaged. If hero; if left blank, no components will be loaded.

Also, if a hero: carousel is selected, the /src/_includes/layouts/base.njk file will load the required CSS and JS for the Flickity carousel.

🔥 IMPORTANT: Always test your Hero across desktop and mobile devices to make sure the hero height is sufficient to carry any text and button content. I’m using this page’s setting as an example of a h-1/2 height graphic hero that looks great on desktop but has too much text/button for h-1/2 height on mobile. So in this case you may want to adjust the height to be h-1/1 on mobile and h-1/2 on sm: or md: screens.

2. Frontmatter -> heroSettings:

Here’s where it gets complicated for Editors. There are a series of required frontmatter heroSettings. Some are shared across the different heros. Some are specific to one hero type or another.

I’ve commented the heroSettings keys in this and the /src/index.md files and hopefully those comments are enough to get you on your way. Here’s the current relevant frontmatter for this page:

hero: graphic # options: carousel, graphic, video, split (text & image)
heroSettings:
  height:
    mobile: h-1/2 # options = h-1/1 (default = full screen), h-1/2, h-1/3, h-3/4, h-9/10, h-48 (12rem, 192px), h-56 (14rem, 224px), h-64 (16rem, 256px)
    desktop: # leave blank to inherit "mobile" height (default = full screen)
  headingText: Is your data lost in the forest, or the trees?
  headingTextColor: # text-gray-800 # default = text-white (can use any TailwindCSS text-[color]-[xxx])
  subheadingText: This is some pithy text that explains why you should hire us without reading any further. Or is it farther?
  subheadingTextColor: # Leave empty to inherit headingTextColor or default (text-white) or use any text-[color]-[xxx]
  buttonText: Contact Us... # no button generated if left blank
  buttonURL: /contact/ # full url required. Example: https://thisdomain.com/somepage/
  buttonTextColor: # leave blank to inherit from /src/_data/colors.buttonCustom or buttonDefault
  buttonBgColor: # leave blank to inherit from /src/_data/colors.buttonCustom.bg or buttonDefault.bg
  bg:
    image: home/copter.jpg # image URL
    imagePosition: left # options = left, center, right
    opacityMobile: opacity-50 # options opacity-n, 5, 10, 15, 20, 25, 50, 75, 100 (default)
    opacityDesktop: opacity-75 # Leave blank to inherit opacityMobile, use same options as opacityMobile
  carousel:
    images:
      - /assets/images/home/6.jpg
      - /assets/images/home/7.jpg
      - /assets/images/home/8.jpg
      - /assets/images/home/9.jpg
  video:
    url: /assets/video/forestfire.mp4 # local relative to site root, or full https://... if remote?
    opacityMobile: opacity-50 # options 25, 50, 75, 100 (default)
    opacityDesktop: # options md:opacity-25, md:opacity-50, md:opacity-75, md:opacity-100 (default)

🔥 IMPORTANT: When writing or modifying YAML Frontmatter it’s VERY IMPORTANT to make sure you have the indents correct. I have VSCode configured to use 2 spaces for tab. 4 spaces can mess up markdown parsing so it’s very important (if you’re just getting started with programming and markdown) to configure your code editor correctly and watch those spaces/tabs in your YAML Frontmatter.

Configuring TailwindCSS

2020-09-12T17:44:03Z

The TailwindCSS settings for this system are very basic. But there are a few settings to note.

tailwind.css

Because TailwindCSS uses Normalize.css to set sensible defaults for all browsers, we lose basic formatting on many top level elements like Headers, <a> and <p> tags, etc. So you’ll want to set your own overrides in the /src/assets/css/tailwind.css file. Here are the current settings for this system as of the writing of this post.

🔥 NOTE: We do set a couple text colors in this file. So if you’re looking for them in the /src/_data/colors.js file, I left a comment there at the top to look here in the /src/assets/css/tailwind.css file.

/* /src/assets/css/tailwind.css  */
@tailwind base;

h1,
h2,
h3,
h4,
h5,
h6 {
	@apply font-semibold text-gray-700;
}
h1 {
	@apply text-4xl;
}
h2 {
	@apply pt-12 text-3xl;
}
h3 {
	@apply text-2xl;
}
h4 {
	@apply text-xl;
}
h5 {
	@apply text-lg;
}
p a,
li a,
blockquote a,
dd a {
	@apply font-medium text-indigo-700;
}
p {
	@apply mt-4;
}
.wrapper > p:first-of-type {
	@apply p-0 m-0;
}

ol {
	@apply pt-4 ml-8 list-decimal;
}
ul {
	@apply pt-4 ml-8 list-disc;
}
blockquote {
	@apply pl-4 m-4 border-l-4 border-gray-500;
}
code {
	@apply p-1 text-sm bg-gray-200 border border-gray-300 rounded-lg;
}
pre code {
	@apply bg-transparent border-0 rounded-none;
}

@tailwind components;

@tailwind utilities;

tailwind.config.js

This system also uses TailwindCSS’ built-in support for PurgeCSS. And because the system uses _data files to control some CSS classes, we have to include them in the /tailwind.config.js settings file so those CSS classes are NOT purged.

And while we’re in the /tailwind.config.js file, let’s take a peek at those custom theme height values that were setup to allow Editors to control the Hero and Featured Images heights:

(always check the TailwindCSS Release Notes page for info on the other settings.)

// /tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
	purge: [
		'./src/**/*.html',
		'./src/**/*.njk',
		'./src/**/*.md',
		'./src/_data/colors.js',
		'./src/_data/structure.js',
	],
	experimental: {
		applyComplexClasses: true,
	},
	future: {
		removeDeprecatedGapUtilities: true,
	},
	theme: {
		extend: {
			// created my own heights so can specify for Heros
			height: (theme) => ({
				'1/2': '50vh',
				'3/4': '75vh',
				'9/10': '90vh',
				'1/1': '100vh',
				'1/3': 'calc(100vh / 3)',
				'1/4': 'calc(100vh / 4)',
				'1/5': 'calc(100vh / 5)',
			}),
		},
	},
	variants: {},
	plugins: [require('@tailwindcss/custom-forms')],
}

v1.1.0 Brings Draft Posts

2020-09-20T17:44:03Z

After quietly launching v1.0.0 yesterday (Saturday, Sep. 19, 2020) I was reorganizing my TODO list on this project and saw the “Someday: Drafts” item.

Only intending to do a bit of searching for those who may have already tackled “drafts” in 11ty, I quickly realized I could leverage 11ty’s Collections and environment variables in a simple conditional using custom filtering in the .eleventy.js config file.

NOTE: I’m still interested in refactoring this conditional into a more elegant, less repetitive solution. I’ve found the optional chaining (?.) operator and it seems exactly what I want to do… But I haven’t yet figured out how to implement it within the return part of the .addCollection function.

If you’re reading this and you know how, please ping me on Twitter.

/** .eleventy.js 
 * 
 * Collections
 * ============================
 *
 * POST Collection set so we can check status of "draft:" frontmatter.
 * If set "true" then post will NOT be processed in PRODUCTION env.
 * If "false" or NULL it will be published in PRODUCTION.
 * Every Post will ALWAYS be published in DEVELOPMENT so you can preview locally.
 */
eleventyConfig.addCollection('post', (collection) => {
  if (process.env.ELEVENTY_ENV !== 'production')
    return [...collection.getFilteredByGlob('./src/posts/*.md')]
  else
    return [...collection.getFilteredByGlob('./src/posts/*.md')]
      .filter((post) => !post.data.draft)
})

Then just add a draft: true/false key/value to the Post Frontmatter:

If draft: true the Post will not be processed by 11ty in a production environment.
The Post will ALWAYS be processed by 11ty if:
- draft: false
- draft:
- Or if draft: frontmatter is completely omitted…as in already published Posts.

Once again… Something I thought was going to be difficult and/or frustrating to figure out was a breeze in 11ty!