mirror of
https://github.com/les-briques-du-web/les-briques-du-web-website.git
synced 2026-03-10 08:51:22 +00:00
53 lines
2.4 KiB
JavaScript
53 lines
2.4 KiB
JavaScript
/**
|
||
* @file Defines a shortcode for the page header
|
||
* @author Reuben L. Lillie <reubenlillie@gmail.com>
|
||
* @author Horacio Gonzalez <horacio.gonzalez@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 page header
|
||
* @module _includes/shortcodes/site-header
|
||
* @param {Object} eleventyConfig 11ty’s Config API
|
||
*/
|
||
export default eleventyConfig =>
|
||
|
||
/**
|
||
* The page header markup
|
||
* @method
|
||
* @name siteHeader
|
||
* @param {Object} data 11ty’s data object
|
||
* @return {String} The rendered shortcode
|
||
* @example `${this.siteHeader(data)}`
|
||
* @see {@link https://www.11ty.dev/docs/data/ Using data in 11ty}
|
||
*/
|
||
eleventyConfig.addShortcode('siteHeader', function (data) {
|
||
var l10n = data.site[data.locale]
|
||
// Inform screen readers when the home page link is for the current page
|
||
return /* html */ `
|
||
|
||
<header>
|
||
<div class="top-content">
|
||
<div class="logo">
|
||
<a href="${data.site.baseUrl}">
|
||
<img src="${data.site.baseUrl}${data.site.logo.url}" alt="logo">
|
||
</a>
|
||
</div>
|
||
|
||
<input type="checkbox" id="menu-burger" class="visually-hidden" aria-label="Menu"/>
|
||
|
||
<label for="menu-burger">
|
||
<svg class="icon icon-menu" id="menu" viewBox="0 0 448 512">
|
||
<path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
|
||
</svg>
|
||
<svg class="icon icon-close" id="close" viewBox="0 0 352 512">
|
||
<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
|
||
</svg>
|
||
</label>
|
||
|
||
${this.nav(data.collections.nav, data.page, '', l10n.nav.primary)}
|
||
|
||
</div>
|
||
</header>`
|
||
})
|