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,
|
||||
"quoteProps": "consistent",
|
||||
"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-ext-glob": "^2.0.1",
|
||||
"postcss-js": "^4.0.0",
|
||||
"prettier-plugin-jinja-template": "^1.3.2",
|
||||
"rimraf": "^5.0.0",
|
||||
"sanitize-html": "^2.7.2",
|
||||
"slugify": "^1.6.5"
|
||||
|
|
@ -5378,6 +5379,31 @@
|
|||
"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": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@
|
|||
"postcss-import": "^16.0.0",
|
||||
"postcss-import-ext-glob": "^2.0.1",
|
||||
"postcss-js": "^4.0.0",
|
||||
"prettier-plugin-jinja-template": "^1.3.2",
|
||||
"rimraf": "^5.0.0",
|
||||
"sanitize-html": "^2.7.2",
|
||||
"slugify": "^1.6.5"
|
||||
|
|
|
|||
|
|
@ -1,21 +1,23 @@
|
|||
<li class="card">
|
||||
<div class="flow">
|
||||
{% if headingContext === "h2" %}
|
||||
<h2>
|
||||
<a href="{{ item.url | url }}">{{ item.data.title }}</a>
|
||||
</h2>
|
||||
<h2>
|
||||
<a href="{{ item.url | url }}">{{ item.data.title }}</a>
|
||||
</h2>
|
||||
{% else %}
|
||||
<h3>
|
||||
<a href="{{ item.url | url }}">{{ item.data.title }}</a>
|
||||
</h3>
|
||||
<h3>
|
||||
<a href="{{ item.url | url }}">{{ item.data.title }}</a>
|
||||
</h3>
|
||||
{% endif %}
|
||||
<div class="cluster">
|
||||
<span class="text-step-min-1">
|
||||
{% set definedDate = item.date %} {% include "components/date.njk" %} {% if
|
||||
activateTags and item.data.tags.length > 1 %}
|
||||
<span class="button post-tag">
|
||||
{{ item.data.tags[1] }}
|
||||
</span>
|
||||
{% set definedDate = item.date %}
|
||||
{% include "components/date.njk" %}
|
||||
{%
|
||||
if
|
||||
activateTags and item.data.tags.length > 1
|
||||
%}
|
||||
<span class="button post-tag"> {{ item.data.tags[1] }} </span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
<time datetime="{{ definedDate | toIsoString }}">
|
||||
{{
|
||||
definedDate | formatDate('MMMM D, YYYY')
|
||||
}}
|
||||
{{ definedDate | formatDate('MMMM D, YYYY') }}
|
||||
</time>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
</ul>
|
||||
|
||||
{% for item in itemList %}
|
||||
<details id="{{ item.data.title | slugify }}">
|
||||
<summary>{{ item.data.title }}</summary>
|
||||
{{ item.templateContent | safe }}
|
||||
</details>
|
||||
<details id="{{ item.data.title | slugify }}">
|
||||
<summary>{{ item.data.title }}</summary>
|
||||
{{ item.templateContent | safe }}
|
||||
</details>
|
||||
{% endfor %}
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
{% if meta.viewRepo.allow %}
|
||||
<hr />
|
||||
<p class="text-step-min-1">
|
||||
{{ meta[page.lang].blog.githubEdit }}
|
||||
<a
|
||||
href="{{ pkg.repository.url | url | replace('.git', '/tree/main/') }}{{
|
||||
page.inputPath
|
||||
}}"
|
||||
>{{ meta.viewRepo.infoText }}</a
|
||||
>.
|
||||
</p>
|
||||
<hr />
|
||||
<p class="text-step-min-1">
|
||||
{{ meta[page.lang].blog.githubEdit }}
|
||||
<a
|
||||
href="{{ pkg.repository.url | url | replace('.git', '/tree/main/') }}{{ page.inputPath }}"
|
||||
>{{ meta.viewRepo.infoText }}</a
|
||||
>.
|
||||
</p>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
style="--grid-min-item-size: clamp(16rem, 50vw, 20rem)"
|
||||
>
|
||||
{% 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 class="button" autofocus>Close</button>
|
||||
{% eleventyImage item.image, item.alt, item.caption %}
|
||||
</dialog>
|
||||
|
||||
<button data-index="{{ loop.index }}">{% eleventyImage item.image, item.alt %}</button>
|
||||
|
||||
<button data-index="{{ loop.index }}">
|
||||
{% eleventyImage item.image, item.alt %}
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,26 +1,38 @@
|
|||
<section class="region">
|
||||
<nav role="navigation" aria-labelledby="pagination_label">
|
||||
<span id="pagination_label" hidden>{{ meta[metaKey].paginationLabel }}</span>
|
||||
<span id="prefix" hidden>{{ meta[metaKey].paginationPage }}</span>
|
||||
<ol class="pagination | cluster" role="list">
|
||||
<li>
|
||||
{% if pagination.href.previous %}
|
||||
<a href="{{ pagination.href.previous }}"> {{ meta[metaKey].paginationPrevious }} </a>
|
||||
{% else %} {{ meta[metaKey].paginationPrevious }} {% endif %}
|
||||
</li>
|
||||
{% if meta[metaKey].paginationNumbers %}
|
||||
{%- for pageEntry in pagination.pages %}
|
||||
<li>
|
||||
<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 %}>
|
||||
{{ loop.index }}</a>
|
||||
</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>
|
||||
<nav role="navigation" aria-labelledby="pagination_label">
|
||||
<span id="pagination_label" hidden>{{ meta[metaKey].paginationLabel }}</span>
|
||||
<span id="prefix" hidden>{{ meta[metaKey].paginationPage }}</span>
|
||||
<ol class="pagination | cluster" role="list">
|
||||
<li>
|
||||
{% if pagination.href.previous %}
|
||||
<a href="{{ pagination.href.previous }}">
|
||||
{{ meta[metaKey].paginationPrevious }}
|
||||
</a>
|
||||
{% else %}
|
||||
{{ meta[metaKey].paginationPrevious }}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% if meta[metaKey].paginationNumbers %}
|
||||
{%- for pageEntry in pagination.pages -%}
|
||||
<li>
|
||||
<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 %}
|
||||
>
|
||||
{{ loop.index }}</a
|
||||
>
|
||||
</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 %}
|
||||
<div class="my-s-m cluster">
|
||||
{% for tag in tags %}
|
||||
<a href="/tags/{{ tag }}">
|
||||
{{ tag }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="my-s-m cluster">
|
||||
{% for tag in tags %}
|
||||
<a href="/tags/{{ tag }}"> {{ tag }} </a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,54 +1,60 @@
|
|||
<footer class="site-foot">
|
||||
<div class="wrapper">
|
||||
<div class="site-foot__inner">
|
||||
<nav 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>
|
||||
<nav
|
||||
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 %}
|
||||
<a
|
||||
href="{{ item.url }}"
|
||||
{{
|
||||
helpers.getLinkActiveState(item.url,
|
||||
page.url)
|
||||
|
|
||||
safe
|
||||
}}
|
||||
>{{ item.text }}</a
|
||||
>
|
||||
<a
|
||||
href="{{ item.url }}"
|
||||
{{
|
||||
helpers.getLinkActiveState(item.url,
|
||||
page.url)
|
||||
|
|
||||
safe
|
||||
}}
|
||||
>{{ item.text }}</a
|
||||
>
|
||||
{% endfor %}
|
||||
</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 -->
|
||||
<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>
|
||||
|
||||
{% for key, value in personal.platforms %}
|
||||
{% if value != "" %}
|
||||
<!-- regular platforms -->
|
||||
<a href="{{ value }}" rel="me">
|
||||
<span class="visually-hidden">{{ key | capitalize }}</span>
|
||||
<div aria-hidden="true">{% include 'svg/platform-' + key + '.svg' %}</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% endfor %}
|
||||
</nav>
|
||||
{% for key, value in personal.platforms %}
|
||||
{% if value != "" %}
|
||||
<!-- regular platforms -->
|
||||
<a href="{{ value }}" rel="me">
|
||||
<span class="visually-hidden">{{ key | capitalize }}</span>
|
||||
<div aria-hidden="true">{% include 'svg/platform-' + key + '.svg' %}</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- theme switch -->
|
||||
{% include 'components/theme-switch.njk' %}
|
||||
<!-- theme switch -->
|
||||
{% include 'components/theme-switch.njk' %}
|
||||
|
||||
<div class="text-center mt-m-l">
|
||||
<a class="creator text-step-min-1" href="{{ meta.creator.website }}"
|
||||
>Made with <span>{% include 'svg/heart.svg' %}</span>
|
||||
by {{ meta.creator.name }}</a
|
||||
>
|
||||
</div>
|
||||
<div class="text-center mt-m-l">
|
||||
<a class="creator text-step-min-1" href="{{ meta.creator.website }}"
|
||||
>Made with <span>{% include 'svg/heart.svg' %}</span> by
|
||||
{{ meta.creator.name }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
<a href="#main" class="skip-link">{{ meta.skipContent }}</a>
|
||||
|
||||
<header class="wrapper">
|
||||
<div class="repel ontop" style="--gap: 0;">
|
||||
<a href="/" class="logo | cluster"{% if page.url == "/" %} aria-current="page"{% endif %}>
|
||||
{% include "svg/star.svg" %}
|
||||
<span>{{ meta.siteName }}</span>
|
||||
</a>
|
||||
<div class="repel ontop">
|
||||
<a
|
||||
href="/"
|
||||
class="logo | cluster"
|
||||
{% if page.url == "/" %}aria-current="page"{% endif %}
|
||||
>
|
||||
{% include "svg/star.svg" %}
|
||||
<span>{{ meta.siteName }}</span>
|
||||
</a>
|
||||
{% include "partials/menu.njk" %}
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
<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 %}
|
||||
<li>
|
||||
<a
|
||||
class="nav"
|
||||
href="{{ item.url }}"
|
||||
{{
|
||||
helpers.getLinkActiveState(item.url,
|
||||
page.url)
|
||||
|
|
||||
safe
|
||||
}}
|
||||
>{{ item.text }}</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="nav"
|
||||
href="{{ item.url }}"
|
||||
{{
|
||||
helpers.getLinkActiveState(item.url,
|
||||
page.url)
|
||||
|
|
||||
safe
|
||||
}}
|
||||
>{{ item.text }}</a
|
||||
>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,12 @@
|
|||
<meta
|
||||
name="description"
|
||||
content="
|
||||
{% if discover.description %} {{ discover.description }}
|
||||
{% if discover.description %}
|
||||
{{ discover.description }}
|
||||
{% elif description %}
|
||||
{{ description }}
|
||||
{{ description }}
|
||||
{% else %}
|
||||
{{ meta.siteDescription }}
|
||||
{{ meta.siteDescription }}
|
||||
{% endif %}
|
||||
"
|
||||
/>
|
||||
|
|
@ -32,8 +33,8 @@
|
|||
<link rel="author" href="humans.txt" />
|
||||
|
||||
{% if personal.social.mastodon %}
|
||||
<!-- Mastodon verified site -->
|
||||
<link rel="me" href="{{ personal.social.mastodon }}" />
|
||||
<!-- Mastodon verified site -->
|
||||
<link rel="me" href="{{ personal.social.mastodon }}" />
|
||||
{% endif %}
|
||||
|
||||
<!-- Open Graph meta -->
|
||||
|
|
@ -45,22 +46,23 @@
|
|||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="{{ meta.url }}{% if (layout == 'post') %}/assets/og-images/{{
|
||||
title | slugify
|
||||
}}-preview.jpeg
|
||||
{% else %}{{ meta.opengraph_default }}
|
||||
content="{{ meta.url }}{% if (layout == 'post') %}
|
||||
/assets/og-images/{{ title | slugify }}-preview.jpeg
|
||||
{% else %}
|
||||
{{ meta.opengraph_default }}
|
||||
{% endif %}"
|
||||
/>
|
||||
<meta
|
||||
property="og:image:alt"
|
||||
content="{% if (layout == 'post') %}{% else %}{{ meta.opengraph_default_alt }}
|
||||
{% endif %}"
|
||||
content="{% if (layout == 'post') %}
|
||||
|
||||
{% else %}
|
||||
{{ meta.opengraph_default_alt }}
|
||||
{% endif %}"
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="{% if description %}{{ description }}{% else %}{{
|
||||
meta.siteDescription
|
||||
}}{% endif %}"
|
||||
content="{% if description %}{{ description }}{% else %}{{ meta.siteDescription }}{% endif %}"
|
||||
/>
|
||||
<meta property="og:site_name" content="{{ meta.siteName }}" />
|
||||
<meta property="og:locale" content="{{ meta.locale }}" />
|
||||
|
|
@ -70,12 +72,12 @@
|
|||
|
||||
<!-- RSS Autodiscovery. Loops over meta.blog.feedLinks -->
|
||||
{% for feedLink in meta.blog.feedLinks %}
|
||||
<link
|
||||
rel="alternate"
|
||||
type="{{ feedLink.type }}"
|
||||
title="{{ feedLink.title }}: {{ meta.siteName }}"
|
||||
href="{{ feedLink.url }}"
|
||||
/>
|
||||
<link
|
||||
rel="alternate"
|
||||
type="{{ feedLink.type }}"
|
||||
title="{{ feedLink.title }}: {{ meta.siteName }}"
|
||||
href="{{ feedLink.url }}"
|
||||
/>
|
||||
{% endfor %}
|
||||
|
||||
<!-- Favicon: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs -->
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% set assetHash = helpers.random() %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="{{ meta.lang }}">
|
||||
<head>
|
||||
<!-- charset/http-equiv/viewport -->
|
||||
|
|
@ -9,28 +9,33 @@
|
|||
|
||||
<!-- title -->
|
||||
<title>
|
||||
{% if discover.title %} {{ discover.title }}
|
||||
{% if discover.title %}
|
||||
{{ discover.title }}
|
||||
{% elif title %}
|
||||
{{ title }}
|
||||
{{ title }}
|
||||
{% else %}
|
||||
{{ meta.siteName }}
|
||||
{{ meta.siteName }}
|
||||
{% endif %}
|
||||
</title>
|
||||
|
||||
<!-- 4 synchronous 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>
|
||||
<!-- prettier-ignore -->
|
||||
{{ jsthemetoggle | jsmin | safe }}
|
||||
{
|
||||
{
|
||||
jsthemetoggle | jsmin | safe;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- inline base schema -->
|
||||
{% include "schemas/base-schema.njk" %}
|
||||
|
||||
<!-- 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 }}" />
|
||||
|
||||
|
|
@ -52,12 +57,12 @@
|
|||
/>
|
||||
|
||||
<!-- preloads in page data -->
|
||||
{% if preloads -%}
|
||||
<!-- prettier-ignore -->
|
||||
<link rel="preload"
|
||||
{%- if preloads -%}
|
||||
<!-- prettier-ignore -->
|
||||
<link rel="preload"
|
||||
href="{{ preloads.href }}"
|
||||
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 %} />
|
||||
{% endif %}
|
||||
|
||||
|
|
@ -65,18 +70,19 @@
|
|||
|
||||
<!-- masonry fallback, if true in frontmatter -->
|
||||
{% if masonry %}
|
||||
<script src="/assets/scripts/masonry.js?{{ assetHash }}" defer></script>
|
||||
{% endif %} {% if youtube %}
|
||||
<!-- youtube, if true in frontmatter -->
|
||||
<script
|
||||
type="module"
|
||||
src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"
|
||||
></script>
|
||||
<script src="/assets/scripts/masonry.js?{{ assetHash }}" defer></script>
|
||||
{% endif %}
|
||||
{% if youtube %}
|
||||
<!-- youtube, if true in frontmatter -->
|
||||
<script
|
||||
type="module"
|
||||
src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"
|
||||
></script>
|
||||
{% endif %}
|
||||
|
||||
<!-- easteregg js, if true in meta -->
|
||||
{% if meta.easteregg %}
|
||||
<script src="/assets/scripts/easteregg.js?{{ assetHash }}" defer></script>
|
||||
<script src="/assets/scripts/easteregg.js?{{ assetHash }}" defer></script>
|
||||
{% endif %}
|
||||
|
||||
<!-- 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">
|
||||
<!-- loop posts -->
|
||||
{% set itemList = pagination.items %} {% for item in itemList %}
|
||||
<!-- activate tags -->
|
||||
{% set activateTags = true %}
|
||||
<!-- set date context -->
|
||||
{% set definedDate = item.date %}
|
||||
<!-- set heading context -->
|
||||
{% set headingContext = "h2" %}
|
||||
<!-- include card -->
|
||||
{% include 'components/card.njk' %} {% endfor %}
|
||||
{% set itemList = pagination.items %}
|
||||
{% for item in itemList %}
|
||||
<!-- activate tags -->
|
||||
{% set activateTags = true %}
|
||||
<!-- set date context -->
|
||||
{% set definedDate = item.date %}
|
||||
<!-- set heading context -->
|
||||
{% set headingContext = "h2" %}
|
||||
<!-- include card -->
|
||||
{% include 'components/card.njk' %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<!-- set collection to paginate -->
|
||||
|
|
@ -37,7 +39,7 @@ masonry: true
|
|||
{% set metaKey = "blog" %}
|
||||
<!-- if the number of items in the collection is greater than the number of items shown on one page -->
|
||||
{% if collectionToPaginate.length > pagination.size %}
|
||||
<!-- include pagination -->
|
||||
{% include 'components/pagination.njk' %} {% endif %}
|
||||
<!-- include pagination -->
|
||||
{% include 'components/pagination.njk' %}
|
||||
{% endif %}
|
||||
</article>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,9 +12,7 @@ masonry: true
|
|||
</header>
|
||||
|
||||
<article class="full | region">
|
||||
<div class="wrapper flow prose">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
<div class="wrapper flow prose">{{ content | safe }}</div>
|
||||
</article>
|
||||
|
||||
<section class="full | region">
|
||||
|
|
@ -23,7 +21,7 @@ masonry: true
|
|||
<!-- blog intro text is optional. -->
|
||||
|
||||
{% if blog.intro %}
|
||||
<p>{{ blog.intro }}</p>
|
||||
<p>{{ blog.intro }}</p>
|
||||
{% endif %}
|
||||
|
||||
<ul
|
||||
|
|
@ -33,13 +31,15 @@ masonry: true
|
|||
data-layout="50-50"
|
||||
>
|
||||
<!-- loop posts -->
|
||||
{% set itemList = collections.posts %} {% for item in itemList.slice(0, 4) %}
|
||||
<!-- activate tags -->
|
||||
{% set activateTags = true %}
|
||||
<!-- set heading context -->
|
||||
{% set headingContext = "h3" %}
|
||||
<!-- card -->
|
||||
{% include 'components/card.njk' %} {% endfor %}
|
||||
{% set itemList = collections.posts %}
|
||||
{% for item in itemList.slice(0, 4) %}
|
||||
<!-- activate tags -->
|
||||
{% set activateTags = true %}
|
||||
<!-- set heading context -->
|
||||
{% set headingContext = "h3" %}
|
||||
<!-- card -->
|
||||
{% include 'components/card.njk' %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -8,23 +8,29 @@ schema: blog
|
|||
<h1 class="gradient-text">{{ title }}</h1>
|
||||
|
||||
{% if image %}
|
||||
<!-- image -->
|
||||
{% eleventyImage image, alt or title, null, "eager", "feature" %} {% endif %} {% if
|
||||
credit %}
|
||||
<!-- credit -->
|
||||
<p class="credit feature | text-step-min-1">© {{ credit }}</p>
|
||||
<!-- image -->
|
||||
{% eleventyImage image, alt or title, null, "eager", "feature" %}
|
||||
{% endif %}
|
||||
{%
|
||||
if
|
||||
credit
|
||||
%}
|
||||
<!-- credit -->
|
||||
<p class="credit feature | text-step-min-1">© {{ credit }}</p>
|
||||
{% endif %}
|
||||
|
||||
<p class="meta | cluster" style="--gutter: var(--space-xs-s)">
|
||||
<!-- date -->
|
||||
{% set definedDate = date %} {% include "components/date.njk" %} {% if tags.length >
|
||||
1 %}
|
||||
<!-- tags -->
|
||||
{% for tag in tags %} {% if tag != "posts" %}
|
||||
<a class="button post-tag" href="/tags/{{ tag }}">
|
||||
{{ tag }}
|
||||
</a>
|
||||
{% endif %} {% endfor %} {% endif %}
|
||||
{% set definedDate = date %} {% include "components/date.njk" %}
|
||||
{%
|
||||
if tags.length >
|
||||
1
|
||||
%}
|
||||
<!-- tags -->
|
||||
{% for tag in tags %}{% if tag != "posts" %}
|
||||
<a class="button post-tag" href="/tags/{{ tag }}"> {{ tag }} </a>
|
||||
{% endif %}{% endfor %}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
{{ content | safe }}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,7 @@ grid:
|
|||
---
|
||||
|
||||
<p>
|
||||
A list of sites based on / built with Eleventy Excellent.<br />
|
||||
|
||||
Add yours by submitting a
|
||||
A list of sites based on / built with Eleventy Excellent. Add yours by submitting 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"
|
||||
rel="noopener"
|
||||
|
|
|
|||
|
|
@ -37,45 +37,45 @@ customGradients:
|
|||
<p>{{ designTokens.colors.description }}</p>
|
||||
|
||||
<ul role="list">
|
||||
{%- for color in designTokens.colors.items %}
|
||||
<li>
|
||||
<div style="background-color: var(--color-{{ color.name | slugify }}"></div>
|
||||
{%- for color in designTokens.colors.items -%}
|
||||
<li>
|
||||
<div style="background-color: var(--color-{{ color.name | slugify }}"></div>
|
||||
|
||||
<p>
|
||||
<code>var(--color-{{ color.name | slugify }})</code>
|
||||
</p>
|
||||
</li>
|
||||
{%- endfor %}
|
||||
<p>
|
||||
<code>var(--color-{{ color.name | slugify }})</code>
|
||||
</p>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
|
||||
<h3 class="heading-line | mt-l-xl">Custom colors</h3>
|
||||
<p>in <code>variables.css</code>. Some only change for dark theme.</p>
|
||||
|
||||
<ul role="list">
|
||||
{%- for color in customColors %}
|
||||
<li>
|
||||
<div style="background-color: var({{ color.property }})"></div>
|
||||
<p>
|
||||
<code>{{ color.property }}</code>
|
||||
</p>
|
||||
</li>
|
||||
{%- endfor %}
|
||||
{%- for color in customColors -%}
|
||||
<li>
|
||||
<div style="background-color: var({{ color.property }})"></div>
|
||||
<p>
|
||||
<code>{{ color.property }}</code>
|
||||
</p>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
|
||||
<h3 class="heading-line | mt-l-xl">Gradients</h3>
|
||||
|
||||
<ul role="list">
|
||||
{%- for gradient in customGradients %}
|
||||
<li>
|
||||
<div style="background-image: var({{ gradient.property }})"></div>
|
||||
{%- for gradient in customGradients -%}
|
||||
<li>
|
||||
<div style="background-image: var({{ gradient.property }})"></div>
|
||||
|
||||
<p>
|
||||
<code>{{ gradient.property }}</code>
|
||||
<br />
|
||||
<!-- <code>{{ color.value }}</code> -->
|
||||
</p>
|
||||
</li>
|
||||
{%- endfor %}
|
||||
<p>
|
||||
<code>{{ gradient.property }}</code>
|
||||
<br />
|
||||
<!-- <code>{{ color.value }}</code> -->
|
||||
</p>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -84,16 +84,16 @@ customGradients:
|
|||
<h2 class="heading-line">Fonts</h2>
|
||||
|
||||
<ul class="fonts flow">
|
||||
{%- for font in designTokens.fonts.items %}
|
||||
<li class="font" style="font-family: var(--font-{{ font.name | slugify }})">
|
||||
<h3 style="font-family: var(--font-{{ font.name | slugify }})">
|
||||
{{ font.name }}
|
||||
</h3>
|
||||
<p>{{ font.description }}</p>
|
||||
<p><strong>Font Families</strong>: {{ font.value | join(', ')}}</p>
|
||||
<code>var(--font-{{ font.name | slugify }})</code>
|
||||
</li>
|
||||
{%- endfor %}
|
||||
{%- for font in designTokens.fonts.items -%}
|
||||
<li class="font" style="font-family: var(--font-{{ font.name | slugify }})">
|
||||
<h3 style="font-family: var(--font-{{ font.name | slugify }})">
|
||||
{{ font.name }}
|
||||
</h3>
|
||||
<p>{{ font.description }}</p>
|
||||
<p><strong>Font Families</strong>: {{ font.value | join(', ') }}</p>
|
||||
<code>var(--font-{{ font.name | slugify }})</code>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
|
@ -107,22 +107,24 @@ customGradients:
|
|||
</p>
|
||||
|
||||
<table class="sizes flow">
|
||||
{%- for size in designTokens.sizes.items %}
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<h3>{{ size.name }}</h3>
|
||||
</th>
|
||||
<td>
|
||||
<span class="flow">
|
||||
<p>{{ size.min }}px to {{ size.max }}px</p>
|
||||
<code>var(--size-{{ size.name | slugify }})</code>
|
||||
</span>
|
||||
</td>
|
||||
<td class="sizes-example">
|
||||
<p style="font-size:var(--size-{{ size.name | slugify }})">{{ size.name }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
{%- for size in designTokens.sizes.items -%}
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<h3>{{ size.name }}</h3>
|
||||
</th>
|
||||
<td>
|
||||
<span class="flow">
|
||||
<p>{{ size.min }}px to {{ size.max }}px</p>
|
||||
<code>var(--size-{{ size.name | slugify }})</code>
|
||||
</span>
|
||||
</td>
|
||||
<td class="sizes-example">
|
||||
<p style="font-size:var(--size-{{ size.name | slugify }})">
|
||||
{{ size.name }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
{%- endfor -%}
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -137,27 +139,25 @@ customGradients:
|
|||
</p>
|
||||
|
||||
<table class="spacing flow">
|
||||
{%- for space in designTokens.spacing.items %}
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<h3>{{ space.name }}</h3>
|
||||
</th>
|
||||
<td>
|
||||
<span class="flow">
|
||||
<p>{{ space.min }}px to {{ space.max }}px</p>
|
||||
<code>var(--space-{{ space.name | slugify }})</code>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div
|
||||
class="space"
|
||||
style="height:var(--space-{{ space.name | slugify }}); width:var(--space-{{
|
||||
space.name | slugify
|
||||
}});"
|
||||
></div>
|
||||
</td>
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
{%- for space in designTokens.spacing.items -%}
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<h3>{{ space.name }}</h3>
|
||||
</th>
|
||||
<td>
|
||||
<span class="flow">
|
||||
<p>{{ space.min }}px to {{ space.max }}px</p>
|
||||
<code>var(--space-{{ space.name | slugify }})</code>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div
|
||||
class="space"
|
||||
style="height:var(--space-{{ space.name | slugify }}); width:var(--space-{{ space.name | slugify }});"
|
||||
></div>
|
||||
</td>
|
||||
</tr>
|
||||
{%- endfor -%}
|
||||
</table>
|
||||
</section>
|
||||
</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" %}
|
||||
|
||||
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
|
||||
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: [
|
||||
// Generates custom property values from tailwind config
|
||||
plugin(function ({addComponents, config}) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue