From 0cf028530203dddaf23cdfcba1454225acda9c69 Mon Sep 17 00:00:00 2001
From: Isabella Brookes <hello@isabellabrookes.com>
Date: Tue, 9 Jul 2024 00:09:36 +0200
Subject: [PATCH] chore: fix prettier liquid plugin to recognize html files

---
 .prettierrc               |  11 +++-
 README.md                 |   5 +-
 _includes/blog.html       |  78 +++++++++++------------
 _includes/event-card.html |  16 ++---
 _includes/events.html     |  21 +++---
 _includes/head.html       |  21 +++---
 _includes/header.html     |  12 ++--
 _includes/links.html      | 130 +++++++++++++++++++-------------------
 _layouts/blog.html        |  22 +++----
 _layouts/event.html       |   3 +-
 _layouts/page.html        |   1 -
 _layouts/translated.html  |  25 ++++----
 admin/index.html          |  13 ++--
 docs/installation.md      |  12 +++-
 package.json              |   3 +-
 15 files changed, 199 insertions(+), 174 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 69bafdc..0e65ca8 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,13 @@
 {
   "plugins": ["@shopify/prettier-plugin-liquid"],
-  "singleQuote": true
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "liquid-html",
+        "singleQuote": false
+      }
+    }
+  ]
 }
diff --git a/README.md b/README.md
index 1d5e010..5acbfef 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,13 @@
 # TWC The Netherlands
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/05f9fda5-6fd8-418d-9cee-67882c0f5dba/deploy-status)](https://app.netlify.com/sites/twc-site-nl/deploys)
-[![i18n-en](https://img.shields.io/badge/i18n-en-orange.svg)](./_i18n/en.yml)
-[![i18n-nl](https://img.shields.io/badge/i18n-nl-orange.svg)](./_i18n/nl.yml)
 [![website](https://img.shields.io/badge/website-url-blue.svg)](https://techwerkers.nl/)
 [![production](https://img.shields.io/badge/production-url-blue.svg)](https://app.netlify.com/sites/twc-site-nl/deploys)
 [![Twitter: nederlandtwc](https://img.shields.io/twitter/follow/nederlandtwc.svg?style=social)](https://twitter.com/nederlandtwc)
 
+[![i18n-en](https://img.shields.io/badge/i18n-en-orange.svg)](./_i18n/en.yml)
+[![i18n-nl](https://img.shields.io/badge/i18n-nl-orange.svg)](./_i18n/nl.yml)
+
 > This repository is responsible for most content visible on the website [techwerkers.nl](https://techwerkers.nl). The site is made with a static site generator called [Jekyll](https://jekyllrb.com/) in a language called Ruby.
 
 ## Install
diff --git a/_includes/blog.html b/_includes/blog.html
index f060114..c4089b2 100644
--- a/_includes/blog.html
+++ b/_includes/blog.html
@@ -1,47 +1,47 @@
-{% unless page.permalink == "/blog" %}
-<a href="/blog">{% t home.blog.more %}</a>
+{% unless page.permalink == '/blog' %}
+  <a href="/blog">{% t home.blog.more %}</a>
 {% endunless %}
 <ul
   class="list -no-list-style l-stack -vertical"
   style="--stack-spacing: 1.5rem"
 >
-  {% assign limit = include.limit %} {% assign sorted_posts = site.blog |
-  filter_tags: include.tags | sort: 'date' | reverse %} {% for post in
-  sorted_posts limit: limit %} {% assign author = site.data.authors[post.author]
-  | default: site.data.authors['techworkersber'] %}
+  {% assign limit = include.limit %}
+  {% assign sorted_posts = site.blog | filter_tags: include.tags | sort: 'date' | reverse %}
+  {% for post in sorted_posts limit: limit %}
+    {% assign author = site.data.authors[post.author] | default: site.data.authors.techworkersber %}
 
-  <li>
-    <article
-      class="event-card__info-column l-stack -vertical"
-      style="--stack-spacing: 0.5rem"
-      aria-labelledby="news-{{ post.title | slugify }}"
-    >
-      <section class="l-stack -horizontal" style="--stack-spacing: 1rem">
-        <div class="l-stack -horizontal" style="--stack-spacing: 0.25rem">
-          {% if author.picture %}
-          <img
-            class="h-rounded"
-            style="--circle-size: 1.75rem"
-            src="{{author.picture}}"
-            alt="{{author.name}}"
-          />
-          {% endif %}
-          <span>{{ author.name }}</span>
-        </div>
-        <time class="aside" datetime="{{ post.date | date: '%Y-%m-%d' }}"
-          >{{ post.date | localize: site.lang, '%-d %B %Y' }}</time
-        >
-      </section>
-      {% if limit %}
-      <h3 class="event-card__title" id="news-{{ post.title | slugify }}">
-        <a href="{{ post.url }}" class="event-card__link">{{ post.title }}</a>
-      </h3>
-      {% else %}
-      <h2 class="event-card__title" id="news-{{ post.title | slugify }}">
-        <a href="{{ post.url }}" class="event-card__link">{{ post.title }}</a>
-      </h2>
-      {% endif %}
-    </article>
-  </li>
+    <li>
+      <article
+        class="event-card__info-column l-stack -vertical"
+        style="--stack-spacing: 0.5rem"
+        aria-labelledby="news-{{ post.title | slugify }}"
+      >
+        <section class="l-stack -horizontal" style="--stack-spacing: 1rem">
+          <div class="l-stack -horizontal" style="--stack-spacing: 0.25rem">
+            {% if author.picture %}
+              <img
+                class="h-rounded"
+                style="--circle-size: 1.75rem"
+                src="{{author.picture}}"
+                alt="{{author.name}}"
+              >
+            {% endif %}
+            <span>{{ author.name }}</span>
+          </div>
+          <time class="aside" datetime="{{ post.date | date: '%Y-%m-%d' }}">
+            {{- post.date | localize: site.lang, '%-d %B %Y' -}}
+          </time>
+        </section>
+        {% if limit %}
+          <h3 class="event-card__title" id="news-{{ post.title | slugify }}">
+            <a href="{{ post.url }}" class="event-card__link">{{ post.title }}</a>
+          </h3>
+        {% else %}
+          <h2 class="event-card__title" id="news-{{ post.title | slugify }}">
+            <a href="{{ post.url }}" class="event-card__link">{{ post.title }}</a>
+          </h2>
+        {% endif %}
+      </article>
+    </li>
   {% endfor %}
 </ul>
diff --git a/_includes/event-card.html b/_includes/event-card.html
index 9e5dca2..cc9bc7e 100644
--- a/_includes/event-card.html
+++ b/_includes/event-card.html
@@ -22,17 +22,15 @@
       class="event-card__info-column l-stack -vertical"
       style="--stack-spacing: 0.25rem"
     >
-      <time class="aside event-card__date" datetime="{{ event.date }}"
-        >{{ event.date | localize: site.lang }}</time
-      >
+      <time class="aside event-card__date" datetime="{{ event.date }}">{{ event.date | localize: site.lang }}</time>
       {% if include.limit %}
-      <h3 class="event-card__title">
-        <a href="{{ event.url }}" class="event-card__link">{{ event.title }}</a>
-      </h3>
+        <h3 class="event-card__title">
+          <a href="{{ event.url }}" class="event-card__link">{{ event.title }}</a>
+        </h3>
       {% else %}
-      <h2 class="event-card__title">
-        <a href="{{ event.url }}" class="event-card__link">{{ event.title }}</a>
-      </h2>
+        <h2 class="event-card__title">
+          <a href="{{ event.url }}" class="event-card__link">{{ event.title }}</a>
+        </h2>
       {% endif %}
     </div>
   </article>
diff --git a/_includes/events.html b/_includes/events.html
index 6a3dfdd..e65ab26 100644
--- a/_includes/events.html
+++ b/_includes/events.html
@@ -1,15 +1,20 @@
-{% unless page.permalink == "/events" %}
-<a href="/events">{% t home.events.more %}</a>
+{% unless page.permalink == '/events' %}
+  <a href="/events">{% t home.events.more %}</a>
 {% endunless %}
 <ul
   class="list -no-list-style l-stack -vertical"
   style="--stack-spacing: 1.5rem"
   role="list"
 >
-  {% assign events = site.events | filter_tags: include.tags | reverse %} {%
-  assign future_events = events | where_exp: "event", "event.date >= site.time"
-  %} {% if include.limit and future_events.size > 0 %} {% for event in
-  future_events reversed limit: include.limit %} {% include event-card.html %}
-  {% endfor %} {% else %} {% for event in events limit: include.limit %} {%
-  include event-card.html %} {% endfor %} {% endif %}
+  {% assign events = site.events | filter_tags: include.tags | reverse %}
+  {% assign future_events = events | where_exp: 'event', 'event.date >= site.time' %}
+  {% if include.limit and future_events.size > 0 %}
+    {% for event in future_events reversed limit: include.limit %}
+      {% include event-card.html %}
+    {% endfor %}
+  {% else %}
+    {% for event in events limit: include.limit %}
+      {% include event-card.html %}
+    {% endfor %}
+  {% endif %}
 </ul>
diff --git a/_includes/head.html b/_includes/head.html
index 86e2e9d..435a745 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,15 +1,18 @@
 <head>
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>
-    {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape
-    }}{% endif %}
+    {% if page.title -%}
+      {{- page.title | escape -}}
+    {%- else -%}
+      {{- site.title | escape -}}
+    {%- endif %}
   </title>
   <meta
     name="description"
     content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}"
-  />
+  >
   <style>
     {% capture styles %}
       {% include main.scss %}
@@ -22,8 +25,8 @@
     type="application/rss+xml"
     title="{{ site.title | escape }}"
     href="{{ 'feed.xml' | relative_url }}"
-  />
-  <link rel="shortcut icon" href="/assets/favicon.png" type="image/x-icon" />
-  <link rel="icon" href="/assets/favicon.png" type="image/x-icon" />
+  >
+  <link rel="shortcut icon" href="/assets/favicon.png" type="image/x-icon">
+  <link rel="icon" href="/assets/favicon.png" type="image/x-icon">
   {% seo %}
 </head>
diff --git a/_includes/header.html b/_includes/header.html
index b9882e0..bfc2874 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -10,14 +10,14 @@ <h1 class="logo">{{ site.title }}</h1>
       <div id="navBtn">menu</div>
       <ul id="nav" class="dropdown__menu hide">
         {% for link in site.header_themes %}
-        <li>
-          <a href="{{link.url}}"
-            >{{ site.translations[site.lang].pages[link.text] }}</a
-          >
-        </li>
+          <li>
+            <a href="{{link.url}}">{{ site.translations[site.lang].pages[link.text] }}</a>
+          </li>
         {% endfor %}
       </ul>
     </li>
-    <li><a href="{% translate_link join %}">{% t connect.subscribe %}</a></li>
+    <li>
+      <a href="{% translate_link join %}">{% t connect.subscribe %}</a>
+    </li>
   </ul>
 </header>
diff --git a/_includes/links.html b/_includes/links.html
index ab5885c..c61212e 100644
--- a/_includes/links.html
+++ b/_includes/links.html
@@ -1,69 +1,69 @@
 {% unless page.hide_form %}
-<div class="social-links">
-  <form
-    name="subscribe"
-    class="join-form"
-    method="POST"
-    action="/welcome"
-    data-netlify="true"
-  >
-    <div class="control">
-      <label for="name">{% t connect.name %}</label>
-      <input class="input-text" id="name" type="text" required name="name" />
-    </div>
-    <div class="control">
-      <label for="email">{% t connect.email %}</label>
-      <input class="input-text" id="email" type="email" required name="email" />
-    </div>
-    <div class="control">
-      <label for="social1">{% t connect.public_link %} #1</label>
-      <input
-        class="input-text"
-        id="social1"
-        required
-        type="text"
-        name="social_media_1"
-        placeholder="{% t connect.public_link_placeholder %}"
-      />
-    </div>
-    <div class="control">
-      <label for="social2">{% t connect.public_link %} #2</label>
-      <input
-        class="input-text"
-        id="social2"
-        required
-        type="text"
-        name="social_media_2"
-        placeholder="{% t connect.public_link_placeholder %}"
-      />
-    </div>
-    <div class="control">
-      <label for="company">{% t connect.company %}</label>
-      <input
-        class="input-text"
-        required
-        id="company"
-        type="text"
-        name="company"
-      />
-    </div>
+  <div class="social-links">
+    <form
+      name="subscribe"
+      class="join-form"
+      method="POST"
+      action="/welcome"
+      data-netlify="true"
+    >
+      <div class="control">
+        <label for="name">{% t connect.name %}</label>
+        <input class="input-text" id="name" type="text" required name="name">
+      </div>
+      <div class="control">
+        <label for="email">{% t connect.email %}</label>
+        <input class="input-text" id="email" type="email" required name="email">
+      </div>
+      <div class="control">
+        <label for="social1">{% t connect.public_link %} #1</label>
+        <input
+          class="input-text"
+          id="social1"
+          required
+          type="text"
+          name="social_media_1"
+          placeholder="{% t connect.public_link_placeholder %}"
+        >
+      </div>
+      <div class="control">
+        <label for="social2">{% t connect.public_link %} #2</label>
+        <input
+          class="input-text"
+          id="social2"
+          required
+          type="text"
+          name="social_media_2"
+          placeholder="{% t connect.public_link_placeholder %}"
+        >
+      </div>
+      <div class="control">
+        <label for="company">{% t connect.company %}</label>
+        <input
+          class="input-text"
+          required
+          id="company"
+          type="text"
+          name="company"
+        >
+      </div>
 
-    <div>
-      <input class="input-text" id="referrer" type="hidden" name="referrer" />
-    </div>
-    <div class="control">
-      <label for="how_did_hear">{% t connect.how_did_hear %}</label>
-      <input
-        class="input-text"
-        id="how_did_hear"
-        type="text"
-        name="how_did_hear"
-      />
-    </div>
+      <div>
+        <input class="input-text" id="referrer" type="hidden" name="referrer">
+      </div>
+      <div class="control">
+        <label for="how_did_hear">{% t connect.how_did_hear %}</label>
+        <input
+          class="input-text"
+          id="how_did_hear"
+          type="text"
+          name="how_did_hear"
+        >
+      </div>
 
-    <button class="subscribe-button" type="submit">
-      {% t connect.subscribe %}
-    </button>
-  </form>
-</div>
+      <button class="subscribe-button" type="submit">
+        {% t connect.subscribe %}
+      </button>
+    </form>
+  </div>
 {% endunless %}
diff --git a/_layouts/blog.html b/_layouts/blog.html
index f761dd7..3143aff 100644
--- a/_layouts/blog.html
+++ b/_layouts/blog.html
@@ -1,32 +1,32 @@
 ---
 layout: default
 ---
-
 <!-- {% assign author = site.data.authors[page.author] %} -->
 <!-- Output author details if some exist. -->
 <article class="post">
   <header class="post-header">
     <a href="/blog">{% t 'home.blog.more_articles' %}</a>
     <h1 class="post-title">{{ page.title | escape }}</h1>
-    {% assign author = site.data.authors[page.author] | default:
-    site.data.authors['techworkersber'] %}
+    {% assign author = site.data.authors[page.author] | default: site.data.authors.techworkersber %}
     <section class="l-stack -horizontal -space-large">
       {% if author.picture %}
-      <img
-        class="h-rounded"
-        style="--circle-size: 4.5rem"
-        src="{{author.picture}}"
-        alt="{{author.name}}"
-      />
+        <img
+          class="h-rounded"
+          style="--circle-size: 4.5rem"
+          src="{{author.picture}}"
+          alt="{{author.name}}"
+        >
       {% endif %}
       <div class="l-stack -vertical" style="--stack-spacing: 1rem">
-        <div><b>{{ author.name }}</b></div>
+        <div>
+          <b>{{ author.name }}</b>
+        </div>
         <time class="aside" datetime="{{ page.date | date: '%Y-%m-%d' }}">
           {{ page.date | localize: site.lang, '%-d %B %Y' }}
         </time>
       </div>
       {% if page.translator %}
-      <span> And translated by {{ page.translator }} </span>
+        <span> And translated by {{ page.translator }} </span>
       {% endif %}
     </section>
   </header>
diff --git a/_layouts/event.html b/_layouts/event.html
index 58e9dda..1aebafc 100644
--- a/_layouts/event.html
+++ b/_layouts/event.html
@@ -1,7 +1,6 @@
 ---
 layout: default
 ---
-
 <style>
   h1,
   .main-wrapper h2,
@@ -12,7 +11,7 @@
 </style>
 <article class="post">
   <header>
-    <a href="/events">{%t home.events.more %}</a>
+    <a href="/events">{% t home.events.more %}</a>
     <h1 class="post-title">{{ page.title | escape }}</h1>
   </header>
   <div class="post-content">
diff --git a/_layouts/page.html b/_layouts/page.html
index 05cc955..1a7f65d 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -1,5 +1,4 @@
 ---
 layout: default
 ---
-
 <div class="rich-text">{{ content }}</div>
diff --git a/_layouts/translated.html b/_layouts/translated.html
index ff25c83..0d48771 100644
--- a/_layouts/translated.html
+++ b/_layouts/translated.html
@@ -1,16 +1,17 @@
 ---
 layout: default
 ---
-
 {% if page.namespace %}
-<div align="right">
-  {% assign languages = page.languages | default: site.languages %} {% for lang
-  in languages %} {% if languages.size == 1 %} {% elsif site.lang == lang %}
-  <b>{% t langs.{{ lang }} %}</b>
-  {% else %}
-  <a href="{% tl {{ page.namespace }} {{ lang }} %}"
-    >{% t langs.{{ lang }} %}</a
-  >
-  {% endif %} {% endfor %}
-</div>
-{% endif %} {{ content }}
+  <div align="right">
+    {% assign languages = page.languages | default: site.languages %}
+    {% for lang in languages %}
+      {% if languages.size == 1 %}
+      {% elsif site.lang == lang %}
+        <b>{% t langs.{{ lang }} %}</b>
+      {% else %}
+        <a href="{% tl {{ page.namespace }} {{ lang }} %}">{% t langs.{{ lang }} %}</a>
+      {% endif %}
+    {% endfor %}
+  </div>
+{% endif %}
+{{ content }}
diff --git a/admin/index.html b/admin/index.html
index 2ecaa8a..244d1ec 100644
--- a/admin/index.html
+++ b/admin/index.html
@@ -1,8 +1,8 @@
 <!doctype html>
 <html>
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Content Manager</title>
   </head>
   <body>
@@ -17,10 +17,11 @@
       CMS.registerPreviewStyle('/assets/css/preview-styles.css');
     </script>
 
-    <!-- Add a menu:
-   Log in / Sign up - when the user is not logged in
-   Username / Log out - when the user is logged in
-  -->
+    <!--
+      Add a menu:
+      Log in / Sign up - when the user is not logged in
+      Username / Log out - when the user is logged in
+    -->
     <div data-netlify-identity-menu></div>
   </body>
 </html>
diff --git a/docs/installation.md b/docs/installation.md
index 5b3b800..1232938 100644
--- a/docs/installation.md
+++ b/docs/installation.md
@@ -1,19 +1,27 @@
 # Installation
 
+## Formatting
+
+Install prettier and precommit hooks: `npm install`
+You can manually run prettier using: `npx prettier . --write`
+
+### Skip pre-commit hooks
+
+1. To skip pre-commit hooks, use `git commit --no-verify` or `git commit -n`
+1. Alternatively, you could not run `npm install`; opting to install prettier and the plugin globally `npm install -g prettier @shopify/prettier-plugin-liquid``
+
 ## With Docker (recommended)
 
 We use Docker to have a reproducible development environment.
 Before proceeding, install [Docker Compose](https://docs.docker.com/compose/install/) on your system.
 
 1. Make sure you're using node >=20
-1. Install prettier and precommit hooks: `npm install`
 1. Start the application with the command: `docker-compose up`
 1. (Optional) Execute other commands in the Docker container: `docker exec -it twc-site-nl-jekyll-1 /bin/bash`
 1. Access the application in a browser at `localhost:4000`
 
 ## Without Docker
 
-1. Install prettier and precommit hooks: `npm install`
 1. Install dependencies: `bundle install`
 1. Start a local server: `bundle exec jekyll serve`
 1. Verify all internal links are valid: `bundle exec rake`
diff --git a/package.json b/package.json
index 4b51e4a..70a078f 100644
--- a/package.json
+++ b/package.json
@@ -19,5 +19,6 @@
   },
   "lint-staged": {
     "*.{js,css,md}": "prettier . --write"
-  }
+  },
+  "dependencies": {}
 }