Merge pull request #36 from madrilene/jinja-njk

add Jinja plugin for njk

.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"
+      }
+    }
+  ]
 }

package-lock.json

@@ -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",

package.json

@@ -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"

src/_includes/components/card.njk

@@ -11,11 +11,13 @@
     {% endif %}
     <div class="cluster">
       <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 %}
       </span>
     </div>

src/_includes/components/date.njk

@@ -1,5 +1,3 @@
 <time datetime="{{ definedDate | toIsoString }}">
-  {{
+  {{ definedDate | formatDate('MMMM D, YYYY') }}
-    definedDate | formatDate('MMMM D, YYYY')
-  }}
 </time>

src/_includes/components/edit-on.njk

@@ -3,9 +3,7 @@
   <p class="text-step-min-1">
     {{ meta[page.lang].blog.githubEdit }}
     <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
     >.
   </p>

src/_includes/components/gallery.njk

@@ -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>
 
-  <button data-index="{{ loop.index }}">{% eleventyImage item.image, item.alt %}</button>
+    <button data-index="{{ loop.index }}">
-
+      {% eleventyImage item.image, item.alt %}
+    </button>
   {% endfor %}
 </div>
 

src/_includes/components/pagination.njk

@@ -5,21 +5,33 @@
     <ol class="pagination | cluster" role="list">
       <li>
         {% 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 }}
+          </a>
+        {% else %}
+          {{ meta[metaKey].paginationPrevious }}
+        {% endif %}
       </li>
       {% if meta[metaKey].paginationNumbers %}
-			{%- for pageEntry in pagination.pages %}
+        {%- 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 %}>
+            <a
-						{{ loop.index }}</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 %}
+        {%- endfor -%}
       {% endif %}
       <li>
         {% if pagination.href.next %}
           <a href="{{ pagination.href.next }}">{{ meta[metaKey].paginationNext }}</a>
-				{% else %} {{ meta[metaKey].paginationNext }} {% endif %}
+        {% else %}
+          {{ meta[metaKey].paginationNext }}
+        {% endif %}
       </li>
     </ol>
   </nav>

src/_includes/components/post-tags.njk

@@ -1,9 +1,7 @@
 {% if tags.size > 1 %}
   <div class="my-s-m cluster">
     {% for tag in tags %}
-  <a href="/tags/{{ tag }}">
+      <a href="/tags/{{ tag }}"> {{ tag }} </a>
-    {{ tag }}
-  </a>
     {% endfor %}
   </div>
 {% endif %}

src/_includes/partials/footer.njk

@@ -1,8 +1,14 @@
 <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 }}">
+      <nav
-        &copy; {% 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 }}"
+      >
+        &copy; {% year %}
+        <a href="/" {% if page.url == "/" %}aria-current="page"{% endif %}
+          >{{ meta.siteName }} <small>{{ pkg.version }}</small>
+        </a>
 
         {% for item in navigation.bottom %}
           <a
@@ -19,9 +25,12 @@
       </nav>
 
       <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 }}">
+        <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>
@@ -34,8 +43,6 @@
               <div aria-hidden="true">{% include 'svg/platform-' + key + '.svg' %}</div>
             </a>
           {% endif %}
-
-
         {% endfor %}
       </nav>
     </div>
@@ -45,10 +52,9 @@
 
     <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>
+        >Made with <span>{% include 'svg/heart.svg' %}</span> by
-			by {{ meta.creator.name }}</a
+        {{ meta.creator.name }}</a
       >
     </div>
   </div>
-
 </footer>

src/_includes/partials/header.njk

@@ -1,8 +1,12 @@
 <a href="#main" class="skip-link">{{ meta.skipContent }}</a>
 
 <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
+      href="/"
+      class="logo | cluster"
+      {% if page.url == "/" %}aria-current="page"{% endif %}
+    >
       {% include "svg/star.svg" %}
       <span>{{ meta.siteName }}</span>
     </a>

src/_includes/partials/menu.njk

@@ -1,5 +1,5 @@
 <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

src/_includes/partials/meta-info.njk

@@ -3,7 +3,8 @@
 <meta
   name="description"
   content="
-  {% if discover.description %} {{ discover.description }}
+  {% if discover.description %}
+    {{ discover.description }}
   {% elif description %}
     {{ description }}
   {% else %}
@@ -45,22 +46,23 @@
 />
 <meta
   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 %}"
 />
 <meta
   property="og:image:alt"
-  content="{% if (layout == 'post') %}{% else %}{{ meta.opengraph_default_alt }}
+  content="{% if (layout == 'post') %}
+
+  {% else %}
+    {{ meta.opengraph_default_alt }}
   {% endif %}"
 />
 <meta
   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:locale" content="{{ meta.locale }}" />

src/_layouts/base.njk

@@ -1,6 +1,6 @@
 {% set assetHash = helpers.random() %}
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="{{ meta.lang }}">
   <head>
     <!-- charset/http-equiv/viewport -->
@@ -9,7 +9,8 @@
 
     <!-- title -->
     <title>
-      {% if discover.title %} {{ discover.title }}
+      {% if discover.title %}
+        {{ discover.title }}
       {% elif title %}
         {{ title }}
       {% else %}
@@ -23,14 +24,18 @@
 
     <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,7 +57,7 @@
     />
 
     <!-- preloads in page data -->
-    {% if preloads -%}
+    {%- if preloads -%}
       <!-- prettier-ignore -->
       <link rel="preload"
             href="{{ preloads.href }}"
@@ -66,7 +71,8 @@
     <!-- masonry fallback, if true in frontmatter -->
     {% if masonry %}
       <script src="/assets/scripts/masonry.js?{{ assetHash }}" defer></script>
-    {% endif %} {% if youtube %}
+    {% endif %}
+    {% if youtube %}
       <!-- youtube, if true in frontmatter -->
       <script
         type="module"

src/_layouts/blog.njk

@@ -20,7 +20,8 @@ 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 %}
+    {% set itemList = pagination.items %}
+    {% for item in itemList %}
       <!-- activate tags -->
       {% set activateTags = true %}
       <!-- set date context -->
@@ -28,7 +29,8 @@ masonry: true
       <!-- set heading context -->
       {% set headingContext = "h2" %}
       <!-- include card -->
-    {% include 'components/card.njk' %} {% endfor %}
+      {% include 'components/card.njk' %}
+    {% endfor %}
   </ul>
 
   <!-- set collection to paginate -->
@@ -38,6 +40,6 @@ masonry: true
   <!-- 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 'components/pagination.njk' %}
+  {% endif %}
 </article>
-

src/_layouts/home.njk

@@ -12,9 +12,7 @@ masonry: true
   </header>
 
   <article class="full | region">
-    <div class="wrapper flow prose">
+    <div class="wrapper flow prose">{{ content | safe }}</div>
-      {{ content | safe }}
-    </div>
   </article>
 
   <section class="full | region">
@@ -33,13 +31,15 @@ masonry: true
         data-layout="50-50"
       >
         <!-- loop posts -->
-        {% set itemList = collections.posts %} {% for item in itemList.slice(0, 4) %}
+        {% 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 %}
+          {% include 'components/card.njk' %}
+        {% endfor %}
       </ul>
     </div>
   </section>

src/_layouts/post.njk

@@ -9,22 +9,28 @@ schema: blog
 
     {% if image %}
       <!-- image -->
-    {% eleventyImage image, alt or title, null, "eager", "feature" %} {% endif %} {% if
+      {% eleventyImage image, alt or title, null, "eager", "feature" %}
-    credit %}
+    {% 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 >
+      {% set definedDate = date %} {% include "components/date.njk" %}
-      1 %}
+      {%
+        if tags.length >
+        1
+      %}
         <!-- tags -->
         {% for tag in tags %}{% if tag != "posts" %}
-      <a class="button post-tag" href="/tags/{{ tag }}">
+          <a class="button post-tag" href="/tags/{{ tag }}"> {{ tag }} </a>
-        {{ tag }}
+        {% endif %}{% endfor %}
-      </a>
+      {% endif %}
-      {% endif %} {% endfor %} {% endif %}
     </p>
 
     {{ content | safe }}

src/pages/built-with.njk

@@ -9,9 +9,7 @@ grid:
 ---
 
 <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
     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"

src/pages/styleguide.njk

@@ -37,7 +37,7 @@ customGradients:
       <p>{{ designTokens.colors.description }}</p>
 
       <ul role="list">
-        {%- for color in designTokens.colors.items %}
+        {%- for color in designTokens.colors.items -%}
           <li>
             <div style="background-color: var(--color-{{ color.name | slugify }}"></div>
 
@@ -45,27 +45,27 @@ customGradients:
               <code>var(--color-{{ color.name | slugify }})</code>
             </p>
           </li>
-        {%- endfor %}
+        {%- 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 %}
+        {%- for color in customColors -%}
           <li>
             <div style="background-color: var({{ color.property }})"></div>
             <p>
               <code>{{ color.property }}</code>
             </p>
           </li>
-        {%- endfor %}
+        {%- endfor -%}
       </ul>
 
       <h3 class="heading-line | mt-l-xl">Gradients</h3>
 
       <ul role="list">
-        {%- for gradient in customGradients %}
+        {%- for gradient in customGradients -%}
           <li>
             <div style="background-image: var({{ gradient.property }})"></div>
 
@@ -75,7 +75,7 @@ customGradients:
               <!-- <code>{{ color.value }}</code> -->
             </p>
           </li>
-        {%- endfor %}
+        {%- endfor -%}
       </ul>
     </section>
   </div>
@@ -84,7 +84,7 @@ customGradients:
     <h2 class="heading-line">Fonts</h2>
 
     <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 }})">
           <h3 style="font-family: var(--font-{{ font.name | slugify }})">
             {{ font.name }}
@@ -93,7 +93,7 @@ customGradients:
           <p><strong>Font Families</strong>: {{ font.value | join(', ') }}</p>
           <code>var(--font-{{ font.name | slugify }})</code>
         </li>
-      {%- endfor %}
+      {%- endfor -%}
     </ul>
   </section>
 
@@ -107,7 +107,7 @@ customGradients:
       </p>
 
       <table class="sizes flow">
-        {%- for size in designTokens.sizes.items %}
+        {%- for size in designTokens.sizes.items -%}
           <tr>
             <th scope="row">
               <h3>{{ size.name }}</h3>
@@ -119,10 +119,12 @@ customGradients:
               </span>
             </td>
             <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 }})">
+                {{ size.name }}
+              </p>
             </td>
           </tr>
-        {%- endfor %}
+        {%- endfor -%}
       </table>
     </section>
   </div>
@@ -137,7 +139,7 @@ customGradients:
     </p>
 
     <table class="spacing flow">
-      {%- for space in designTokens.spacing.items %}
+      {%- for space in designTokens.spacing.items -%}
         <tr>
           <th scope="row">
             <h3>{{ space.name }}</h3>
@@ -151,13 +153,11 @@ customGradients:
           <td>
             <div
               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>
         </tr>
-      {%- endfor %}
+      {%- endfor -%}
     </table>
   </section>
 </article>

src/posts/2023-01-25-opengraph-images.md

@@ -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).

tailwind.config.js

@@ -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}) {