_includes/shortcodes/head-tag.js

/**
* @file Defines a shortcode for the `<head>` markup
* @author Reuben L. Lillie <reubenlillie@gmail.com>
* @see {@link https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions JavaScript template functions in 11ty}
*/


/**
* A JavaScript Template module for the `<head>`
* @module _includes/shortcodes/head-tag
* @param {Object} eleventyConfig 11ty’s Config API
*/

export default function (eleventyConfig) {

/**
* HTML `<head>` markup
* @method
* @name headTag
* @param {Object} data 11ty’s data object
* @return {String} HTML template literal
* @example `${this.headTag(data)}`
*/

eleventyConfig.addShortcode('headTag', function (data) {
return `<head>
${this.titleTag(data)}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
${this.authorMeta(data)}
${this.description(data)}
${this.socialMeta(data)}
${this.favicon(data)}
<style>
${this.minifyCSS(this.fileToString('_includes/assets/css/inline.css'))}
</style>
<link rel="preload" href="/_includes/assets/fonts/spiffy-sans/SpiffySans-Light-kern-latin.woff2" as="font" type="font/woff2" crossorigin>
<!--link rel="preload" href="/_includes/assets/fonts/spiffy-sans/SpiffySans-LightItalic-kern-latin.woff2" as="font" type="font/woff2" crossorigin-->
<link rel="preload" href="/_includes/assets/fonts/spiffy-sans/SpiffySans-SemiBold-kern-latin.woff2" as="font" type="font/woff2" crossorigin>
<!--link rel="preload" href="/_includes/assets/fonts/spiffy-sans/SpiffySans-SemiBoldItalic-kern-latin.woff2" as="font" type="font/woff2" crossorigin-->
<script async>
${this.minifyJS(`(function () {
if( "fonts" in document ) {
var light = new FontFace("Spiffy Sans", "url(/_includes/assets/fonts/spiffy-sans/SpiffySans-Light-latin-extended.woff2) format('woff2'), url(/_includes/assets/fonts/spiffy-sans/SpiffySans-Light-latin-extended.woff) format('woff')")
// var lightItalic = new FontFace("Spiffy Sans", "url(/_includes/assets/fonts/spiffy-sans/SpiffySans-LightItalic-latin-extended.woff2) format('woff2'), url(/_includes/assets/fonts/spiffy-sans/SpiffySans-LightItalic-latin-extended.woff) format('woff')", {style: 'italic'})
var bold = new FontFace("Spiffy Sans", "url(/_includes/assets/fonts/spiffy-sans/SpiffySans-SemiBold-latin-extended.woff2) format('woff2'), url(/_includes/assets/fonts/spiffy-sans/SpiffySans-SemiBold-latin-extended.woff) format('woff')", { weight: "700" })
// var boldItalic = new FontFace("Spiffy Sans", "url(/_includes/assets/fonts/spiffy-sans/SpiffySans-SemiBoldItalic-latin-extended.woff2) format('woff2'), url(/_includes/assets/fonts/spiffy-sans/SpiffySans-SemiBoldItalic-latin-extended.woff) format('woff')", { style: 'italic', weight: "700" })
Promise.all([ bold.load(), light.load() ]).then(function(fonts) {
fonts.forEach(function(font) {
document.fonts.add(font)
})
})
}

if(!("fonts" in document) &amp;&amp; "head" in document) {
// Awkwardly dump the second stage @font-face blocks in the head
var style = document.createElement("style");
// Note: Edge supports WOFF2
style.innerHTML = "@font-face { font-family: Spiffy Sans; src: url(/_includes/assets/fonts/spiffy-sans/SpiffySans-Light-latin-extended.woff2) format('woff2'), url(/_includes/assets/fonts/spiffy-sans/SpiffySans-Light-latin-extended.woff) format('woff'); } @font-face { font-family: Spiffy Sans; font-weight: 700; src: url(/_includes/assets/fonts/spiffy-sans/SpiffySans-SemiBold-latin-extended.woff2) format('woff2'), url(/_includes/assets/fonts/spiffy-sans/SpiffySans-SemiBold-latin-extended.woff) format('woff'); }";
document.head.appendChild(style);
}
})()
`

)}
&lt;/script>
${this.externalCSS(data)}
&lt;/head>`
})

}