Merge pull request #36 from madrilene/jinja-njk
add Jinja plugin for njk
This commit is contained in:
Lene Saile
GitHub
commit
921d56d2d3
22 changed files with 361 additions and 281 deletions
11
.prettierrc
11
.prettierrc
|
|
@ -5,5 +5,14 @@
|
||||||
"bracketSpacing": false,
|
"bracketSpacing": false,
|
||||||
"quoteProps": "consistent",
|
"quoteProps": "consistent",
|
||||||
"trailingComma": "none",
|
"trailingComma": "none",
|
||||||
"arrowParens": "avoid"
|
"arrowParens": "avoid",
|
||||||
|
"plugins": ["prettier-plugin-jinja-template"],
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": "*.njk",
|
||||||
|
"options": {
|
||||||
|
"parser": "jinja-template"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
26
package-lock.json
generated
26
package-lock.json
generated
|
|
@ -46,6 +46,7 @@
|
||||||
"postcss-import": "^16.0.0",
|
"postcss-import": "^16.0.0",
|
||||||
"postcss-import-ext-glob": "^2.0.1",
|
"postcss-import-ext-glob": "^2.0.1",
|
||||||
"postcss-js": "^4.0.0",
|
"postcss-js": "^4.0.0",
|
||||||
|
"prettier-plugin-jinja-template": "^1.3.2",
|
||||||
"rimraf": "^5.0.0",
|
"rimraf": "^5.0.0",
|
||||||
"sanitize-html": "^2.7.2",
|
"sanitize-html": "^2.7.2",
|
||||||
"slugify": "^1.6.5"
|
"slugify": "^1.6.5"
|
||||||
|
|
@ -5378,6 +5379,31 @@
|
||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/prettier": {
|
||||||
|
"version": "3.2.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
|
||||||
|
"integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
|
||||||
|
"dev": true,
|
||||||
|
"peer": true,
|
||||||
|
"bin": {
|
||||||
|
"prettier": "bin/prettier.cjs"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/prettier-plugin-jinja-template": {
|
||||||
|
"version": "1.3.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/prettier-plugin-jinja-template/-/prettier-plugin-jinja-template-1.3.2.tgz",
|
||||||
|
"integrity": "sha512-ROglSKajIA4TRxM5othKfhc+dZrWYaVoJW/0EHlN0WwCXS1FmF/2mtfDkJW4wSTBqu7re1svsYMAu+oMGf6T9Q==",
|
||||||
|
"dev": true,
|
||||||
|
"peerDependencies": {
|
||||||
|
"prettier": "^3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/pretty-hrtime": {
|
"node_modules/pretty-hrtime": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
|
||||||
|
|
|
||||||
|
|
@ -57,6 +57,7 @@
|
||||||
"postcss-import": "^16.0.0",
|
"postcss-import": "^16.0.0",
|
||||||
"postcss-import-ext-glob": "^2.0.1",
|
"postcss-import-ext-glob": "^2.0.1",
|
||||||
"postcss-js": "^4.0.0",
|
"postcss-js": "^4.0.0",
|
||||||
|
"prettier-plugin-jinja-template": "^1.3.2",
|
||||||
"rimraf": "^5.0.0",
|
"rimraf": "^5.0.0",
|
||||||
"sanitize-html": "^2.7.2",
|
"sanitize-html": "^2.7.2",
|
||||||
"slugify": "^1.6.5"
|
"slugify": "^1.6.5"
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,23 @@
|
||||||
<li class="card">
|
<li class="card">
|
||||||
<div class="flow">
|
<div class="flow">
|
||||||
{% if headingContext === "h2" %}
|
{% if headingContext === "h2" %}
|
||||||
<h2>
|
<h2>
|
||||||
<a href="{{ item.url | url }}">{{ item.data.title }}</a>
|
<a href="{{ item.url | url }}">{{ item.data.title }}</a>
|
||||||
</h2>
|
</h2>
|
||||||
{% else %}
|
{% else %}
|
||||||
<h3>
|
<h3>
|
||||||
<a href="{{ item.url | url }}">{{ item.data.title }}</a>
|
<a href="{{ item.url | url }}">{{ item.data.title }}</a>
|
||||||
</h3>
|
</h3>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="cluster">
|
<div class="cluster">
|
||||||
<span class="text-step-min-1">
|
<span class="text-step-min-1">
|
||||||
{% set definedDate = item.date %} {% include "components/date.njk" %} {% if
|
{% set definedDate = item.date %}
|
||||||
activateTags and item.data.tags.length > 1 %}
|
{% include "components/date.njk" %}
|
||||||
<span class="button post-tag">
|
{%
|
||||||
{{ item.data.tags[1] }}
|
if
|
||||||
</span>
|
activateTags and item.data.tags.length > 1
|
||||||
|
%}
|
||||||
|
<span class="button post-tag"> {{ item.data.tags[1] }} </span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
<time datetime="{{ definedDate | toIsoString }}">
|
<time datetime="{{ definedDate | toIsoString }}">
|
||||||
{{
|
{{ definedDate | formatDate('MMMM D, YYYY') }}
|
||||||
definedDate | formatDate('MMMM D, YYYY')
|
|
||||||
}}
|
|
||||||
</time>
|
</time>
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,10 @@
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
{% for item in itemList %}
|
{% for item in itemList %}
|
||||||
<details id="{{ item.data.title | slugify }}">
|
<details id="{{ item.data.title | slugify }}">
|
||||||
<summary>{{ item.data.title }}</summary>
|
<summary>{{ item.data.title }}</summary>
|
||||||
{{ item.templateContent | safe }}
|
{{ item.templateContent | safe }}
|
||||||
</details>
|
</details>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,10 @@
|
||||||
{% if meta.viewRepo.allow %}
|
{% if meta.viewRepo.allow %}
|
||||||
<hr />
|
<hr />
|
||||||
<p class="text-step-min-1">
|
<p class="text-step-min-1">
|
||||||
{{ meta[page.lang].blog.githubEdit }}
|
{{ meta[page.lang].blog.githubEdit }}
|
||||||
<a
|
<a
|
||||||
href="{{ pkg.repository.url | url | replace('.git', '/tree/main/') }}{{
|
href="{{ pkg.repository.url | url | replace('.git', '/tree/main/') }}{{ page.inputPath }}"
|
||||||
page.inputPath
|
>{{ meta.viewRepo.infoText }}</a
|
||||||
}}"
|
>.
|
||||||
>{{ meta.viewRepo.infoText }}</a
|
</p>
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -4,14 +4,14 @@
|
||||||
style="--grid-min-item-size: clamp(16rem, 50vw, 20rem)"
|
style="--grid-min-item-size: clamp(16rem, 50vw, 20rem)"
|
||||||
>
|
>
|
||||||
{% for item in gallery %}
|
{% for item in gallery %}
|
||||||
|
<dialog class="flow modal{{ loop.index }}">
|
||||||
|
<button class="button" autofocus>Close</button>
|
||||||
|
{% eleventyImage item.image, item.alt, item.caption %}
|
||||||
|
</dialog>
|
||||||
|
|
||||||
<dialog class="flow modal{{ loop.index }}">
|
<button data-index="{{ loop.index }}">
|
||||||
<button class="button" autofocus>Close</button>
|
{% eleventyImage item.image, item.alt %}
|
||||||
{% eleventyImage item.image, item.alt, item.caption %}
|
</button>
|
||||||
</dialog>
|
|
||||||
|
|
||||||
<button data-index="{{ loop.index }}">{% eleventyImage item.image, item.alt %}</button>
|
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,38 @@
|
||||||
<section class="region">
|
<section class="region">
|
||||||
<nav role="navigation" aria-labelledby="pagination_label">
|
<nav role="navigation" aria-labelledby="pagination_label">
|
||||||
<span id="pagination_label" hidden>{{ meta[metaKey].paginationLabel }}</span>
|
<span id="pagination_label" hidden>{{ meta[metaKey].paginationLabel }}</span>
|
||||||
<span id="prefix" hidden>{{ meta[metaKey].paginationPage }}</span>
|
<span id="prefix" hidden>{{ meta[metaKey].paginationPage }}</span>
|
||||||
<ol class="pagination | cluster" role="list">
|
<ol class="pagination | cluster" role="list">
|
||||||
<li>
|
<li>
|
||||||
{% if pagination.href.previous %}
|
{% if pagination.href.previous %}
|
||||||
<a href="{{ pagination.href.previous }}"> {{ meta[metaKey].paginationPrevious }} </a>
|
<a href="{{ pagination.href.previous }}">
|
||||||
{% else %} {{ meta[metaKey].paginationPrevious }} {% endif %}
|
{{ meta[metaKey].paginationPrevious }}
|
||||||
</li>
|
</a>
|
||||||
{% if meta[metaKey].paginationNumbers %}
|
{% else %}
|
||||||
{%- for pageEntry in pagination.pages %}
|
{{ meta[metaKey].paginationPrevious }}
|
||||||
<li>
|
{% endif %}
|
||||||
<a href="{{ pagination.hrefs[ loop.index0 ] }}" id="link_{{ loop.index }}" aria-labelledby="prefix link_{{ loop.index }}" {% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page" {% endif %}>
|
</li>
|
||||||
{{ loop.index }}</a>
|
{% if meta[metaKey].paginationNumbers %}
|
||||||
</li>
|
{%- for pageEntry in pagination.pages -%}
|
||||||
{%- endfor %}
|
<li>
|
||||||
{% endif %}
|
<a
|
||||||
<li>
|
href="{{ pagination.hrefs[ loop.index0 ] }}"
|
||||||
{% if pagination.href.next %}
|
id="link_{{ loop.index }}"
|
||||||
<a href="{{ pagination.href.next }}">{{ meta[metaKey].paginationNext }}</a>
|
aria-labelledby="prefix link_{{ loop.index }}"
|
||||||
{% else %} {{ meta[metaKey].paginationNext }} {% endif %}
|
{% if page.url == pagination.hrefs[ loop.index0 ] %}aria-current="page"{% endif %}
|
||||||
</li>
|
>
|
||||||
</ol>
|
{{ loop.index }}</a
|
||||||
</nav>
|
>
|
||||||
</section>
|
</li>
|
||||||
|
{%- endfor -%}
|
||||||
|
{% endif %}
|
||||||
|
<li>
|
||||||
|
{% if pagination.href.next %}
|
||||||
|
<a href="{{ pagination.href.next }}">{{ meta[metaKey].paginationNext }}</a>
|
||||||
|
{% else %}
|
||||||
|
{{ meta[metaKey].paginationNext }}
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,7 @@
|
||||||
{% if tags.size > 1 %}
|
{% if tags.size > 1 %}
|
||||||
<div class="my-s-m cluster">
|
<div class="my-s-m cluster">
|
||||||
{% for tag in tags %}
|
{% for tag in tags %}
|
||||||
<a href="/tags/{{ tag }}">
|
<a href="/tags/{{ tag }}"> {{ tag }} </a>
|
||||||
{{ tag }}
|
{% endfor %}
|
||||||
</a>
|
</div>
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -1,54 +1,60 @@
|
||||||
<footer class="site-foot">
|
<footer class="site-foot">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="site-foot__inner">
|
<div class="site-foot__inner">
|
||||||
<nav class="site-foot__inner text-step-0" aria-label="{{ meta.navigation.ariaBottom }}">
|
<nav
|
||||||
© {% year %} <a href="/"{% if page.url == "/" %} aria-current="page"{% endif %}>{{ meta.siteName }} <small>{{ pkg.version }}</small> </a>
|
class="site-foot__inner text-step-0"
|
||||||
|
aria-label="{{ meta.navigation.ariaBottom }}"
|
||||||
|
>
|
||||||
|
© {% year %}
|
||||||
|
<a href="/" {% if page.url == "/" %}aria-current="page"{% endif %}
|
||||||
|
>{{ meta.siteName }} <small>{{ pkg.version }}</small>
|
||||||
|
</a>
|
||||||
|
|
||||||
{% for item in navigation.bottom %}
|
{% for item in navigation.bottom %}
|
||||||
<a
|
<a
|
||||||
href="{{ item.url }}"
|
href="{{ item.url }}"
|
||||||
{{
|
{{
|
||||||
helpers.getLinkActiveState(item.url,
|
helpers.getLinkActiveState(item.url,
|
||||||
page.url)
|
page.url)
|
||||||
|
|
|
|
||||||
safe
|
safe
|
||||||
}}
|
}}
|
||||||
>{{ item.text }}</a
|
>{{ item.text }}</a
|
||||||
>
|
>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<nav class="site-foot__inner" aria-label="{{ meta.navigation.ariaPlatforms }}">
|
<nav class="site-foot__inner" aria-label="{{ meta.navigation.ariaPlatforms }}">
|
||||||
|
<!-- gets the first item from the feed loop set in meta -->
|
||||||
|
<a
|
||||||
|
href="{{ meta.blog.feedLinks[0].url }}"
|
||||||
|
rel="alternate"
|
||||||
|
type="{{ meta.blog.feedLinks[0].type }}"
|
||||||
|
>
|
||||||
|
<span class="visually-hidden">{{ meta.blog.feedLinks[0].title }}</span>
|
||||||
|
<div aria-hidden="true">{% include 'svg/rss.svg' %}</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
<!-- gets the first item from the feed loop set in meta -->
|
{% for key, value in personal.platforms %}
|
||||||
<a href="{{ meta.blog.feedLinks[0].url }}" rel="alternate" type="{{ meta.blog.feedLinks[0].type }}">
|
{% if value != "" %}
|
||||||
<span class="visually-hidden">{{ meta.blog.feedLinks[0].title }}</span>
|
<!-- regular platforms -->
|
||||||
<div aria-hidden="true">{% include 'svg/rss.svg' %}</div>
|
<a href="{{ value }}" rel="me">
|
||||||
</a>
|
<span class="visually-hidden">{{ key | capitalize }}</span>
|
||||||
|
<div aria-hidden="true">{% include 'svg/platform-' + key + '.svg' %}</div>
|
||||||
{% for key, value in personal.platforms %}
|
</a>
|
||||||
{% if value != "" %}
|
{% endif %}
|
||||||
<!-- regular platforms -->
|
{% endfor %}
|
||||||
<a href="{{ value }}" rel="me">
|
</nav>
|
||||||
<span class="visually-hidden">{{ key | capitalize }}</span>
|
|
||||||
<div aria-hidden="true">{% include 'svg/platform-' + key + '.svg' %}</div>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
|
|
||||||
{% endfor %}
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- theme switch -->
|
<!-- theme switch -->
|
||||||
{% include 'components/theme-switch.njk' %}
|
{% include 'components/theme-switch.njk' %}
|
||||||
|
|
||||||
<div class="text-center mt-m-l">
|
<div class="text-center mt-m-l">
|
||||||
<a class="creator text-step-min-1" href="{{ meta.creator.website }}"
|
<a class="creator text-step-min-1" href="{{ meta.creator.website }}"
|
||||||
>Made with <span>{% include 'svg/heart.svg' %}</span>
|
>Made with <span>{% include 'svg/heart.svg' %}</span> by
|
||||||
by {{ meta.creator.name }}</a
|
{{ meta.creator.name }}</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</footer>
|
||||||
</footer>
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,15 @@
|
||||||
<a href="#main" class="skip-link">{{ meta.skipContent }}</a>
|
<a href="#main" class="skip-link">{{ meta.skipContent }}</a>
|
||||||
|
|
||||||
<header class="wrapper">
|
<header class="wrapper">
|
||||||
<div class="repel ontop" style="--gap: 0;">
|
<div class="repel ontop">
|
||||||
<a href="/" class="logo | cluster"{% if page.url == "/" %} aria-current="page"{% endif %}>
|
<a
|
||||||
{% include "svg/star.svg" %}
|
href="/"
|
||||||
<span>{{ meta.siteName }}</span>
|
class="logo | cluster"
|
||||||
</a>
|
{% if page.url == "/" %}aria-current="page"{% endif %}
|
||||||
|
>
|
||||||
|
{% include "svg/star.svg" %}
|
||||||
|
<span>{{ meta.siteName }}</span>
|
||||||
|
</a>
|
||||||
{% include "partials/menu.njk" %}
|
{% include "partials/menu.njk" %}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
<nav id="mainnav" class="site-nav" aria-label="{{ meta.navigation.ariaTop }}">
|
<nav id="mainnav" class="site-nav" aria-label="{{ meta.navigation.ariaTop }}">
|
||||||
<ul class="cluster" style="--gap: 0" role="list">
|
<ul class="cluster" role="list">
|
||||||
{% for item in navigation.top %}
|
{% for item in navigation.top %}
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
class="nav"
|
class="nav"
|
||||||
href="{{ item.url }}"
|
href="{{ item.url }}"
|
||||||
{{
|
{{
|
||||||
helpers.getLinkActiveState(item.url,
|
helpers.getLinkActiveState(item.url,
|
||||||
page.url)
|
page.url)
|
||||||
|
|
|
|
||||||
safe
|
safe
|
||||||
}}
|
}}
|
||||||
>{{ item.text }}</a
|
>{{ item.text }}</a
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,12 @@
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="
|
content="
|
||||||
{% if discover.description %} {{ discover.description }}
|
{% if discover.description %}
|
||||||
|
{{ discover.description }}
|
||||||
{% elif description %}
|
{% elif description %}
|
||||||
{{ description }}
|
{{ description }}
|
||||||
{% else %}
|
{% else %}
|
||||||
{{ meta.siteDescription }}
|
{{ meta.siteDescription }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
|
|
@ -32,8 +33,8 @@
|
||||||
<link rel="author" href="humans.txt" />
|
<link rel="author" href="humans.txt" />
|
||||||
|
|
||||||
{% if personal.social.mastodon %}
|
{% if personal.social.mastodon %}
|
||||||
<!-- Mastodon verified site -->
|
<!-- Mastodon verified site -->
|
||||||
<link rel="me" href="{{ personal.social.mastodon }}" />
|
<link rel="me" href="{{ personal.social.mastodon }}" />
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<!-- Open Graph meta -->
|
<!-- Open Graph meta -->
|
||||||
|
|
@ -45,22 +46,23 @@
|
||||||
/>
|
/>
|
||||||
<meta
|
<meta
|
||||||
property="og:image"
|
property="og:image"
|
||||||
content="{{ meta.url }}{% if (layout == 'post') %}/assets/og-images/{{
|
content="{{ meta.url }}{% if (layout == 'post') %}
|
||||||
title | slugify
|
/assets/og-images/{{ title | slugify }}-preview.jpeg
|
||||||
}}-preview.jpeg
|
{% else %}
|
||||||
{% else %}{{ meta.opengraph_default }}
|
{{ meta.opengraph_default }}
|
||||||
{% endif %}"
|
{% endif %}"
|
||||||
/>
|
/>
|
||||||
<meta
|
<meta
|
||||||
property="og:image:alt"
|
property="og:image:alt"
|
||||||
content="{% if (layout == 'post') %}{% else %}{{ meta.opengraph_default_alt }}
|
content="{% if (layout == 'post') %}
|
||||||
{% endif %}"
|
|
||||||
|
{% else %}
|
||||||
|
{{ meta.opengraph_default_alt }}
|
||||||
|
{% endif %}"
|
||||||
/>
|
/>
|
||||||
<meta
|
<meta
|
||||||
property="og:description"
|
property="og:description"
|
||||||
content="{% if description %}{{ description }}{% else %}{{
|
content="{% if description %}{{ description }}{% else %}{{ meta.siteDescription }}{% endif %}"
|
||||||
meta.siteDescription
|
|
||||||
}}{% endif %}"
|
|
||||||
/>
|
/>
|
||||||
<meta property="og:site_name" content="{{ meta.siteName }}" />
|
<meta property="og:site_name" content="{{ meta.siteName }}" />
|
||||||
<meta property="og:locale" content="{{ meta.locale }}" />
|
<meta property="og:locale" content="{{ meta.locale }}" />
|
||||||
|
|
@ -70,12 +72,12 @@
|
||||||
|
|
||||||
<!-- RSS Autodiscovery. Loops over meta.blog.feedLinks -->
|
<!-- RSS Autodiscovery. Loops over meta.blog.feedLinks -->
|
||||||
{% for feedLink in meta.blog.feedLinks %}
|
{% for feedLink in meta.blog.feedLinks %}
|
||||||
<link
|
<link
|
||||||
rel="alternate"
|
rel="alternate"
|
||||||
type="{{ feedLink.type }}"
|
type="{{ feedLink.type }}"
|
||||||
title="{{ feedLink.title }}: {{ meta.siteName }}"
|
title="{{ feedLink.title }}: {{ meta.siteName }}"
|
||||||
href="{{ feedLink.url }}"
|
href="{{ feedLink.url }}"
|
||||||
/>
|
/>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
<!-- Favicon: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs -->
|
<!-- Favicon: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs -->
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{% set assetHash = helpers.random() %}
|
{% set assetHash = helpers.random() %}
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="{{ meta.lang }}">
|
<html lang="{{ meta.lang }}">
|
||||||
<head>
|
<head>
|
||||||
<!-- charset/http-equiv/viewport -->
|
<!-- charset/http-equiv/viewport -->
|
||||||
|
|
@ -9,28 +9,33 @@
|
||||||
|
|
||||||
<!-- title -->
|
<!-- title -->
|
||||||
<title>
|
<title>
|
||||||
{% if discover.title %} {{ discover.title }}
|
{% if discover.title %}
|
||||||
|
{{ discover.title }}
|
||||||
{% elif title %}
|
{% elif title %}
|
||||||
{{ title }}
|
{{ title }}
|
||||||
{% else %}
|
{% else %}
|
||||||
{{ meta.siteName }}
|
{{ meta.siteName }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</title>
|
</title>
|
||||||
|
|
||||||
<!-- 4 synchronous js -->
|
<!-- 4 synchronous js -->
|
||||||
<!-- load theme toggle first to avoid color flashing on page load and inline render blocking js -->
|
<!-- load theme toggle first to avoid color flashing on page load and inline render blocking js -->
|
||||||
{% set jsthemetoggle %} {% include "theme-toggle-inline.js" %} {% endset %}
|
{% set jsthemetoggle %}{% include "theme-toggle-inline.js" %}{% endset %}
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
<!-- prettier-ignore -->
|
<!-- prettier-ignore -->
|
||||||
{{ jsthemetoggle | jsmin | safe }}
|
{
|
||||||
|
{
|
||||||
|
jsthemetoggle | jsmin | safe;
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- inline base schema -->
|
<!-- inline base schema -->
|
||||||
{% include "schemas/base-schema.njk" %}
|
{% include "schemas/base-schema.njk" %}
|
||||||
|
|
||||||
<!-- inline blogpost schema -->
|
<!-- inline blogpost schema -->
|
||||||
{% if schema == 'blog' %} {%- include "schemas/blogpost-schema.njk" %} {% endif %}
|
{% if schema == 'blog' %}{%- include "schemas/blogpost-schema.njk" -%}{% endif %}
|
||||||
|
|
||||||
<link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
|
<link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
|
||||||
|
|
||||||
|
|
@ -52,12 +57,12 @@
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- preloads in page data -->
|
<!-- preloads in page data -->
|
||||||
{% if preloads -%}
|
{%- if preloads -%}
|
||||||
<!-- prettier-ignore -->
|
<!-- prettier-ignore -->
|
||||||
<link rel="preload"
|
<link rel="preload"
|
||||||
href="{{ preloads.href }}"
|
href="{{ preloads.href }}"
|
||||||
as="{{ preloads.as }}"
|
as="{{ preloads.as }}"
|
||||||
{% if preloads.type %}type={{ preloads.type }}{% endif %}{% if preloads.imagesrcset %}imagesrcset="{{ preloads.imagesrcset }}" {% endif %}
|
{% if preloads.type %}type={{ preloads.type }}{% endif %}{% if preloads.imagesrcset %}imagesrcset="{{ preloads.imagesrcset }}"{% endif %}
|
||||||
{% if preloads.crossorigin %}crossorigin{% endif %} />
|
{% if preloads.crossorigin %}crossorigin{% endif %} />
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
|
@ -65,18 +70,19 @@
|
||||||
|
|
||||||
<!-- masonry fallback, if true in frontmatter -->
|
<!-- masonry fallback, if true in frontmatter -->
|
||||||
{% if masonry %}
|
{% if masonry %}
|
||||||
<script src="/assets/scripts/masonry.js?{{ assetHash }}" defer></script>
|
<script src="/assets/scripts/masonry.js?{{ assetHash }}" defer></script>
|
||||||
{% endif %} {% if youtube %}
|
{% endif %}
|
||||||
<!-- youtube, if true in frontmatter -->
|
{% if youtube %}
|
||||||
<script
|
<!-- youtube, if true in frontmatter -->
|
||||||
type="module"
|
<script
|
||||||
src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"
|
type="module"
|
||||||
></script>
|
src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"
|
||||||
|
></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<!-- easteregg js, if true in meta -->
|
<!-- easteregg js, if true in meta -->
|
||||||
{% if meta.easteregg %}
|
{% if meta.easteregg %}
|
||||||
<script src="/assets/scripts/easteregg.js?{{ assetHash }}" defer></script>
|
<script src="/assets/scripts/easteregg.js?{{ assetHash }}" defer></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<!-- everything else: meta tags, icons, open graph etc. -->
|
<!-- everything else: meta tags, icons, open graph etc. -->
|
||||||
|
|
|
||||||
|
|
@ -20,15 +20,17 @@ masonry: true
|
||||||
|
|
||||||
<ul class="blogcards | grid" role="list" data-rows="masonry" data-layout="50-50">
|
<ul class="blogcards | grid" role="list" data-rows="masonry" data-layout="50-50">
|
||||||
<!-- loop posts -->
|
<!-- loop posts -->
|
||||||
{% set itemList = pagination.items %} {% for item in itemList %}
|
{% set itemList = pagination.items %}
|
||||||
<!-- activate tags -->
|
{% for item in itemList %}
|
||||||
{% set activateTags = true %}
|
<!-- activate tags -->
|
||||||
<!-- set date context -->
|
{% set activateTags = true %}
|
||||||
{% set definedDate = item.date %}
|
<!-- set date context -->
|
||||||
<!-- set heading context -->
|
{% set definedDate = item.date %}
|
||||||
{% set headingContext = "h2" %}
|
<!-- set heading context -->
|
||||||
<!-- include card -->
|
{% set headingContext = "h2" %}
|
||||||
{% include 'components/card.njk' %} {% endfor %}
|
<!-- include card -->
|
||||||
|
{% include 'components/card.njk' %}
|
||||||
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- set collection to paginate -->
|
<!-- set collection to paginate -->
|
||||||
|
|
@ -37,7 +39,7 @@ masonry: true
|
||||||
{% set metaKey = "blog" %}
|
{% set metaKey = "blog" %}
|
||||||
<!-- if the number of items in the collection is greater than the number of items shown on one page -->
|
<!-- if the number of items in the collection is greater than the number of items shown on one page -->
|
||||||
{% if collectionToPaginate.length > pagination.size %}
|
{% if collectionToPaginate.length > pagination.size %}
|
||||||
<!-- include pagination -->
|
<!-- include pagination -->
|
||||||
{% include 'components/pagination.njk' %} {% endif %}
|
{% include 'components/pagination.njk' %}
|
||||||
|
{% endif %}
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,9 +12,7 @@ masonry: true
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<article class="full | region">
|
<article class="full | region">
|
||||||
<div class="wrapper flow prose">
|
<div class="wrapper flow prose">{{ content | safe }}</div>
|
||||||
{{ content | safe }}
|
|
||||||
</div>
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<section class="full | region">
|
<section class="full | region">
|
||||||
|
|
@ -23,7 +21,7 @@ masonry: true
|
||||||
<!-- blog intro text is optional. -->
|
<!-- blog intro text is optional. -->
|
||||||
|
|
||||||
{% if blog.intro %}
|
{% if blog.intro %}
|
||||||
<p>{{ blog.intro }}</p>
|
<p>{{ blog.intro }}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<ul
|
<ul
|
||||||
|
|
@ -33,13 +31,15 @@ masonry: true
|
||||||
data-layout="50-50"
|
data-layout="50-50"
|
||||||
>
|
>
|
||||||
<!-- loop posts -->
|
<!-- loop posts -->
|
||||||
{% set itemList = collections.posts %} {% for item in itemList.slice(0, 4) %}
|
{% set itemList = collections.posts %}
|
||||||
<!-- activate tags -->
|
{% for item in itemList.slice(0, 4) %}
|
||||||
{% set activateTags = true %}
|
<!-- activate tags -->
|
||||||
<!-- set heading context -->
|
{% set activateTags = true %}
|
||||||
{% set headingContext = "h3" %}
|
<!-- set heading context -->
|
||||||
<!-- card -->
|
{% set headingContext = "h3" %}
|
||||||
{% include 'components/card.njk' %} {% endfor %}
|
<!-- card -->
|
||||||
|
{% include 'components/card.njk' %}
|
||||||
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -8,23 +8,29 @@ schema: blog
|
||||||
<h1 class="gradient-text">{{ title }}</h1>
|
<h1 class="gradient-text">{{ title }}</h1>
|
||||||
|
|
||||||
{% if image %}
|
{% if image %}
|
||||||
<!-- image -->
|
<!-- image -->
|
||||||
{% eleventyImage image, alt or title, null, "eager", "feature" %} {% endif %} {% if
|
{% eleventyImage image, alt or title, null, "eager", "feature" %}
|
||||||
credit %}
|
{% endif %}
|
||||||
<!-- credit -->
|
{%
|
||||||
<p class="credit feature | text-step-min-1">© {{ credit }}</p>
|
if
|
||||||
|
credit
|
||||||
|
%}
|
||||||
|
<!-- credit -->
|
||||||
|
<p class="credit feature | text-step-min-1">© {{ credit }}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<p class="meta | cluster" style="--gutter: var(--space-xs-s)">
|
<p class="meta | cluster" style="--gutter: var(--space-xs-s)">
|
||||||
<!-- date -->
|
<!-- date -->
|
||||||
{% set definedDate = date %} {% include "components/date.njk" %} {% if tags.length >
|
{% set definedDate = date %} {% include "components/date.njk" %}
|
||||||
1 %}
|
{%
|
||||||
<!-- tags -->
|
if tags.length >
|
||||||
{% for tag in tags %} {% if tag != "posts" %}
|
1
|
||||||
<a class="button post-tag" href="/tags/{{ tag }}">
|
%}
|
||||||
{{ tag }}
|
<!-- tags -->
|
||||||
</a>
|
{% for tag in tags %}{% if tag != "posts" %}
|
||||||
{% endif %} {% endfor %} {% endif %}
|
<a class="button post-tag" href="/tags/{{ tag }}"> {{ tag }} </a>
|
||||||
|
{% endif %}{% endfor %}
|
||||||
|
{% endif %}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,7 @@ grid:
|
||||||
---
|
---
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
A list of sites based on / built with Eleventy Excellent.<br />
|
A list of sites based on / built with Eleventy Excellent. Add yours by submitting a
|
||||||
|
|
||||||
Add yours by submitting a
|
|
||||||
<a
|
<a
|
||||||
href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request"
|
href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
|
|
|
||||||
|
|
@ -37,45 +37,45 @@ customGradients:
|
||||||
<p>{{ designTokens.colors.description }}</p>
|
<p>{{ designTokens.colors.description }}</p>
|
||||||
|
|
||||||
<ul role="list">
|
<ul role="list">
|
||||||
{%- for color in designTokens.colors.items %}
|
{%- for color in designTokens.colors.items -%}
|
||||||
<li>
|
<li>
|
||||||
<div style="background-color: var(--color-{{ color.name | slugify }}"></div>
|
<div style="background-color: var(--color-{{ color.name | slugify }}"></div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<code>var(--color-{{ color.name | slugify }})</code>
|
<code>var(--color-{{ color.name | slugify }})</code>
|
||||||
</p>
|
</p>
|
||||||
</li>
|
</li>
|
||||||
{%- endfor %}
|
{%- endfor -%}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h3 class="heading-line | mt-l-xl">Custom colors</h3>
|
<h3 class="heading-line | mt-l-xl">Custom colors</h3>
|
||||||
<p>in <code>variables.css</code>. Some only change for dark theme.</p>
|
<p>in <code>variables.css</code>. Some only change for dark theme.</p>
|
||||||
|
|
||||||
<ul role="list">
|
<ul role="list">
|
||||||
{%- for color in customColors %}
|
{%- for color in customColors -%}
|
||||||
<li>
|
<li>
|
||||||
<div style="background-color: var({{ color.property }})"></div>
|
<div style="background-color: var({{ color.property }})"></div>
|
||||||
<p>
|
<p>
|
||||||
<code>{{ color.property }}</code>
|
<code>{{ color.property }}</code>
|
||||||
</p>
|
</p>
|
||||||
</li>
|
</li>
|
||||||
{%- endfor %}
|
{%- endfor -%}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h3 class="heading-line | mt-l-xl">Gradients</h3>
|
<h3 class="heading-line | mt-l-xl">Gradients</h3>
|
||||||
|
|
||||||
<ul role="list">
|
<ul role="list">
|
||||||
{%- for gradient in customGradients %}
|
{%- for gradient in customGradients -%}
|
||||||
<li>
|
<li>
|
||||||
<div style="background-image: var({{ gradient.property }})"></div>
|
<div style="background-image: var({{ gradient.property }})"></div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<code>{{ gradient.property }}</code>
|
<code>{{ gradient.property }}</code>
|
||||||
<br />
|
<br />
|
||||||
<!-- <code>{{ color.value }}</code> -->
|
<!-- <code>{{ color.value }}</code> -->
|
||||||
</p>
|
</p>
|
||||||
</li>
|
</li>
|
||||||
{%- endfor %}
|
{%- endfor -%}
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -84,16 +84,16 @@ customGradients:
|
||||||
<h2 class="heading-line">Fonts</h2>
|
<h2 class="heading-line">Fonts</h2>
|
||||||
|
|
||||||
<ul class="fonts flow">
|
<ul class="fonts flow">
|
||||||
{%- for font in designTokens.fonts.items %}
|
{%- for font in designTokens.fonts.items -%}
|
||||||
<li class="font" style="font-family: var(--font-{{ font.name | slugify }})">
|
<li class="font" style="font-family: var(--font-{{ font.name | slugify }})">
|
||||||
<h3 style="font-family: var(--font-{{ font.name | slugify }})">
|
<h3 style="font-family: var(--font-{{ font.name | slugify }})">
|
||||||
{{ font.name }}
|
{{ font.name }}
|
||||||
</h3>
|
</h3>
|
||||||
<p>{{ font.description }}</p>
|
<p>{{ font.description }}</p>
|
||||||
<p><strong>Font Families</strong>: {{ font.value | join(', ')}}</p>
|
<p><strong>Font Families</strong>: {{ font.value | join(', ') }}</p>
|
||||||
<code>var(--font-{{ font.name | slugify }})</code>
|
<code>var(--font-{{ font.name | slugify }})</code>
|
||||||
</li>
|
</li>
|
||||||
{%- endfor %}
|
{%- endfor -%}
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -107,22 +107,24 @@ customGradients:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<table class="sizes flow">
|
<table class="sizes flow">
|
||||||
{%- for size in designTokens.sizes.items %}
|
{%- for size in designTokens.sizes.items -%}
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">
|
<th scope="row">
|
||||||
<h3>{{ size.name }}</h3>
|
<h3>{{ size.name }}</h3>
|
||||||
</th>
|
</th>
|
||||||
<td>
|
<td>
|
||||||
<span class="flow">
|
<span class="flow">
|
||||||
<p>{{ size.min }}px to {{ size.max }}px</p>
|
<p>{{ size.min }}px to {{ size.max }}px</p>
|
||||||
<code>var(--size-{{ size.name | slugify }})</code>
|
<code>var(--size-{{ size.name | slugify }})</code>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="sizes-example">
|
<td class="sizes-example">
|
||||||
<p style="font-size:var(--size-{{ size.name | slugify }})">{{ size.name }}</p>
|
<p style="font-size:var(--size-{{ size.name | slugify }})">
|
||||||
</td>
|
{{ size.name }}
|
||||||
</tr>
|
</p>
|
||||||
{%- endfor %}
|
</td>
|
||||||
|
</tr>
|
||||||
|
{%- endfor -%}
|
||||||
</table>
|
</table>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -137,27 +139,25 @@ customGradients:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<table class="spacing flow">
|
<table class="spacing flow">
|
||||||
{%- for space in designTokens.spacing.items %}
|
{%- for space in designTokens.spacing.items -%}
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">
|
<th scope="row">
|
||||||
<h3>{{ space.name }}</h3>
|
<h3>{{ space.name }}</h3>
|
||||||
</th>
|
</th>
|
||||||
<td>
|
<td>
|
||||||
<span class="flow">
|
<span class="flow">
|
||||||
<p>{{ space.min }}px to {{ space.max }}px</p>
|
<p>{{ space.min }}px to {{ space.max }}px</p>
|
||||||
<code>var(--space-{{ space.name | slugify }})</code>
|
<code>var(--space-{{ space.name | slugify }})</code>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div
|
<div
|
||||||
class="space"
|
class="space"
|
||||||
style="height:var(--space-{{ space.name | slugify }}); width:var(--space-{{
|
style="height:var(--space-{{ space.name | slugify }}); width:var(--space-{{ space.name | slugify }});"
|
||||||
space.name | slugify
|
></div>
|
||||||
}});"
|
</td>
|
||||||
></div>
|
</tr>
|
||||||
</td>
|
{%- endfor -%}
|
||||||
</tr>
|
|
||||||
{%- endfor %}
|
|
||||||
</table>
|
</table>
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -17,4 +17,4 @@ The fallback and default image for all other pages is the image set as `opengrap
|
||||||
|
|
||||||
{% eleventyImage "./src/" + meta.opengraph_default, meta.opengraph_default_alt, "This is what the general OG image for non-blog posts looks like" %}
|
{% eleventyImage "./src/" + meta.opengraph_default, meta.opengraph_default_alt, "This is what the general OG image for non-blog posts looks like" %}
|
||||||
|
|
||||||
A more detailed explanation can be found in the [docs](/get-started/#docs).
|
A more detailed explanation can be found in the [docs](/get-started/#open-graph-images).
|
||||||
|
|
|
||||||
|
|
@ -66,8 +66,20 @@ module.exports = {
|
||||||
|
|
||||||
// Disables Tailwind's reset etc
|
// Disables Tailwind's reset etc
|
||||||
corePlugins: {
|
corePlugins: {
|
||||||
preflight: false
|
preflight: false,
|
||||||
|
textOpacity: false,
|
||||||
|
backgroundOpacity: false,
|
||||||
|
borderOpacity: false
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Prevents Tailwind's core components
|
||||||
|
blocklist: ['container'],
|
||||||
|
|
||||||
|
// Prevents Tailwind from generating that wall of empty custom properties
|
||||||
|
experimental: {
|
||||||
|
optimizeUniversalDefaults: true
|
||||||
|
},
|
||||||
|
|
||||||
plugins: [
|
plugins: [
|
||||||
// Generates custom property values from tailwind config
|
// Generates custom property values from tailwind config
|
||||||
plugin(function ({addComponents, config}) {
|
plugin(function ({addComponents, config}) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue