style: add prettier plugin for njk files wd-218 (#219)

eslint.config.js

@@ -86,7 +86,7 @@ let perfectionistConfig = {
 		'perfectionist/sort-named-imports': [
 			`error`,
 			{
-				'type': `alphabetical`,
+				type: `alphabetical`,
 			},
 		],
 	},

package.json

@@ -37,6 +37,7 @@
 		"lint-staged": "15.1.0",
 		"node-w3c-validator": "2.0.2",
 		"prettier": "3.1.0",
+		"prettier-plugin-jinja-template": "1.3.1",
 		"prettier-plugin-jsdoc": "1.1.1",
 		"simple-git-hooks": "2.9.0",
 		"stylelint": "15.11.0",

prettier.config.js

@@ -12,13 +12,14 @@ let config = {
 		{
 			files: `*.njk`,
 			options: {
-				'parser': `html`,
+				parser: `jinja-template`,
+				printWidth: 120,
 			},
 		},
 	],
-	plugins: [`prettier-plugin-jsdoc`],
+	plugins: [`prettier-plugin-jsdoc`, `prettier-plugin-jinja-template`],
 	printWidth: 80,
-	quoteProps: `preserve`,
+	quoteProps: `consistent`,
 	semi: false,
 	singleQuote: true,
 	trailingComma: `all`,

source/includes/live-logo.njk

@@ -1,21 +1,17 @@
-<svg
-	class="{{ liveLogoClassName }} live-logo"
-	width="65"
-	height="45"
-	viewBox="0 0 242 167"
-	aria-hidden="true"
->
-	<path
-		class="live-logo__logo-icon live-logo__logo-icon--letter"
-		d="M80.7999 166.2C80.6999 166.2 80.6 166.2 80.5 166.2C78.1 166.1 76 164.7 75 162.6L0.699952 9.70002C-0.900048 6.50002 0.499967 2.6 3.69997 1C6.89997 -0.599997 10.7999 0.800003 12.3999 4L81.6 146.3L101.2 115C103.1 112 107.1 111 110.2 112.9C113.2 114.8 114.2 118.8 112.3 121.9L86.5 163.1C85.2 165.1 83.0999 166.2 80.7999 166.2Z"
-	/>
-	<path
-		class="live-logo__logo-icon live-logo__logo-icon--letter"
-		d="M155.2 166.2C155.1 166.2 155 166.2 154.9 166.2C152.5 166.1 150.4 164.7 149.4 162.6L74.9998 9.70007C73.3998 6.50007 74.7998 2.60006 77.9998 1.00006C81.1998 -0.599939 85.0998 0.800061 86.6998 4.00006L155.9 146.3L186.5 97.4001C195.9 79.7001 193.1 75.5 187.6 67.3C184.5 62.6 174.3 46.7001 173.1 44.9001C169.4 39.7001 159.9 26.1001 166 12.2001C168.5 6.40007 175.9 0.300049 183.7 0.300049C192.5 0.300049 198.7 3.70007 202.7 8.10007C207.1 3.00007 213.5 0.300049 221.2 0.300049C230.6 0.300049 237.3 6.60006 239.5 12.5001C243.3 22.3001 241.5 34.1001 234.6 44.9001L197.6 103.9C197.6 103.9 197.6 103.9 197.6 104C197.4 104.3 197.3 104.5 197.1 104.8L160.5 163.1C159.5 165.1 157.4 166.2 155.2 166.2ZM183.8 13.4001C181.8 13.4001 178.7 15.7001 178 17.5001C175.8 22.6001 177.5 28.6001 183.9 37.6001C184 37.7001 184 37.8001 184.1 37.9001C184.2 38.1001 195.3 55.5001 198.4 60.1001C200.6 63.4001 202.6 66.5001 203.9 69.9001L223.8 38.1001C228.4 30.9001 229.8 23.1 227.6 17.3C227.3 16.5 225.3 13.5001 221.4 13.5001C211.3 13.5001 210 21.7001 209.9 24.2001C209.8 27.6001 207.1 30.3001 203.7 30.4001C200.3 30.6001 197.4 28.0001 197 24.7001C196.6 22.7001 194.7 13.4001 183.8 13.4001Z"
-	/>
-	<path
-		class="live-logo__logo-icon live-logo__logo-icon--heart"
-		fill="red"
-		d="M196.9 70.1001C199.7 75.7001 207.6 76.2 210.9 70.8L229.3 41.4001C234.3 33.5001 237 23.5 233.6 14.8C232.4 11.8 228.2 6.80005 221.3 6.80005C210.9 6.80005 206.5 12.9001 204.6 17.7001C204.1 19.1001 202.1 19.2 201.5 17.8C199.3 12.9 194.3 6.80005 183.8 6.80005C178.9 6.80005 173.7 10.9 172 14.8C167.9 24.3 173.2 33.8001 178.5 41.2001C178.5 41.2001 189.7 58.8001 192.9 63.6001C194.5 65.9001 195.8 68.0001 196.9 70.1001Z"
-	/>
-</svg>
+{% macro liveLogo(className) %}
+	<svg class="{{ className }} live-logo" width="65" height="45" viewBox="0 0 242 167" aria-hidden="true">
+		<path
+			class="live-logo__logo-icon live-logo__logo-icon--letter"
+			d="M80.7999 166.2C80.6999 166.2 80.6 166.2 80.5 166.2C78.1 166.1 76 164.7 75 162.6L0.699952 9.70002C-0.900048 6.50002 0.499967 2.6 3.69997 1C6.89997 -0.599997 10.7999 0.800003 12.3999 4L81.6 146.3L101.2 115C103.1 112 107.1 111 110.2 112.9C113.2 114.8 114.2 118.8 112.3 121.9L86.5 163.1C85.2 165.1 83.0999 166.2 80.7999 166.2Z"
+		/>
+		<path
+			class="live-logo__logo-icon live-logo__logo-icon--letter"
+			d="M155.2 166.2C155.1 166.2 155 166.2 154.9 166.2C152.5 166.1 150.4 164.7 149.4 162.6L74.9998 9.70007C73.3998 6.50007 74.7998 2.60006 77.9998 1.00006C81.1998 -0.599939 85.0998 0.800061 86.6998 4.00006L155.9 146.3L186.5 97.4001C195.9 79.7001 193.1 75.5 187.6 67.3C184.5 62.6 174.3 46.7001 173.1 44.9001C169.4 39.7001 159.9 26.1001 166 12.2001C168.5 6.40007 175.9 0.300049 183.7 0.300049C192.5 0.300049 198.7 3.70007 202.7 8.10007C207.1 3.00007 213.5 0.300049 221.2 0.300049C230.6 0.300049 237.3 6.60006 239.5 12.5001C243.3 22.3001 241.5 34.1001 234.6 44.9001L197.6 103.9C197.6 103.9 197.6 103.9 197.6 104C197.4 104.3 197.3 104.5 197.1 104.8L160.5 163.1C159.5 165.1 157.4 166.2 155.2 166.2ZM183.8 13.4001C181.8 13.4001 178.7 15.7001 178 17.5001C175.8 22.6001 177.5 28.6001 183.9 37.6001C184 37.7001 184 37.8001 184.1 37.9001C184.2 38.1001 195.3 55.5001 198.4 60.1001C200.6 63.4001 202.6 66.5001 203.9 69.9001L223.8 38.1001C228.4 30.9001 229.8 23.1 227.6 17.3C227.3 16.5 225.3 13.5001 221.4 13.5001C211.3 13.5001 210 21.7001 209.9 24.2001C209.8 27.6001 207.1 30.3001 203.7 30.4001C200.3 30.6001 197.4 28.0001 197 24.7001C196.6 22.7001 194.7 13.4001 183.8 13.4001Z"
+		/>
+		<path
+			class="live-logo__logo-icon live-logo__logo-icon--heart"
+			fill="red"
+			d="M196.9 70.1001C199.7 75.7001 207.6 76.2 210.9 70.8L229.3 41.4001C234.3 33.5001 237 23.5 233.6 14.8C232.4 11.8 228.2 6.80005 221.3 6.80005C210.9 6.80005 206.5 12.9001 204.6 17.7001C204.1 19.1001 202.1 19.2 201.5 17.8C199.3 12.9 194.3 6.80005 183.8 6.80005C178.9 6.80005 173.7 10.9 172 14.8C167.9 24.3 173.2 33.8001 178.5 41.2001C178.5 41.2001 189.7 58.8001 192.9 63.6001C194.5 65.9001 195.8 68.0001 196.9 70.1001Z"
+		/>
+	</svg>
+{% endmacro %}

source/includes/settings.njk

@@ -1,72 +1,70 @@
-<ul class="{{ settingsClassName }} settings">
-	<li class="settings__item">
-		<fieldset
-			class="settings__item-fieldset settings__item-fieldset--theme"
-		>
-			<legend class="visually-hidden">Color theme</legend>
-			<label class="settings__item-wrapper">
-				<input
-					class="settings__item-control settings__item-control--light"
-					type="radio"
-					name="theme"
-					value="light"
-				/>
-				<span class="visually-hidden">Light</span>
-			</label>
-			<label class="settings__item-wrapper">
-				<input
-					class="settings__item-control settings__item-control--auto"
-					type="radio"
-					name="theme"
-					value="auto"
-					checked
-				/>
-				<span class="visually-hidden">Auto</span>
-			</label>
-			<label class="settings__item-wrapper">
-				<input
-					class="settings__item-control settings__item-control--dark"
-					type="radio"
-					name="theme"
-					value="dark"
-				/>
-				<span class="visually-hidden">Dark</span>
-			</label>
-		</fieldset>
-	</li>
-	<li class="settings__item">
-		<fieldset
-			class="settings__item-fieldset settings__item-fieldset--motion"
-		>
-			<legend class="visually-hidden">Reduced Motion</legend>
-			<label class="settings__item-wrapper">
-				<input
-					class="settings__item-control settings__item-control--nopreference"
-					type="radio"
-					name="motion"
-					value="no-preference"
-				/>
-				<span class="visually-hidden">No Preference</span>
-			</label>
-			<label class="settings__item-wrapper">
-				<input
-					class="settings__item-control settings__item-control--auto"
-					type="radio"
-					name="motion"
-					value="auto"
-					checked
-				/>
-				<span class="visually-hidden">Auto</span>
-			</label>
-			<label class="settings__item-wrapper">
-				<input
-					class="settings__item-control settings__item-control--reduce"
-					type="radio"
-					name="motion"
-					value="reduce"
-				/>
-				<span class="visually-hidden">Reduce</span>
-			</label>
-		</fieldset>
-	</li>
-</ul>
+{% macro settings(className) %}
+	<ul class="{{ className }} settings">
+		<li class="settings__item">
+			<fieldset class="settings__item-fieldset settings__item-fieldset--theme">
+				<legend class="visually-hidden">Color theme</legend>
+				<label class="settings__item-wrapper">
+					<input
+						class="settings__item-control settings__item-control--light"
+						type="radio"
+						name="theme"
+						value="light"
+					/>
+					<span class="visually-hidden">Light</span>
+				</label>
+				<label class="settings__item-wrapper">
+					<input
+						class="settings__item-control settings__item-control--auto"
+						type="radio"
+						name="theme"
+						value="auto"
+						checked
+					/>
+					<span class="visually-hidden">Auto</span>
+				</label>
+				<label class="settings__item-wrapper">
+					<input
+						class="settings__item-control settings__item-control--dark"
+						type="radio"
+						name="theme"
+						value="dark"
+					/>
+					<span class="visually-hidden">Dark</span>
+				</label>
+			</fieldset>
+		</li>
+		<li class="settings__item">
+			<fieldset class="settings__item-fieldset settings__item-fieldset--motion">
+				<legend class="visually-hidden">Reduced Motion</legend>
+				<label class="settings__item-wrapper">
+					<input
+						class="settings__item-control settings__item-control--nopreference"
+						type="radio"
+						name="motion"
+						value="no-preference"
+					/>
+					<span class="visually-hidden">No Preference</span>
+				</label>
+				<label class="settings__item-wrapper">
+					<input
+						class="settings__item-control settings__item-control--auto"
+						type="radio"
+						name="motion"
+						value="auto"
+						checked
+					/>
+					<span class="visually-hidden">Auto</span>
+				</label>
+				<label class="settings__item-wrapper">
+					<input
+						class="settings__item-control settings__item-control--reduce"
+						type="radio"
+						name="motion"
+						value="reduce"
+					/>
+					<span class="visually-hidden">Reduce</span>
+				</label>
+			</fieldset>
+		</li>
+	</ul>
+{% endmacro %}

source/includes/social-list.njk

@@ -1,36 +1,34 @@
-<ul class="{{ socialListClassName }} social-list">
-	<li class="social-list__item">
-		<a
-			class="social-list__item-link social-list__item-link--github"
-			href="https://github.com/what1s1ove"
-			target="_blank"
-			rel="noreferrer"
-		>
-			<span class="social-list__item-title visually-hidden">GitHub</span>
-		</a>
-	</li>
-	<li class="social-list__item">
-		<a
-			class="social-list__item-link social-list__item-link--linkedin"
-			href="https://www.linkedin.com/in/what1s1ove"
-			target="_blank"
-			rel="noreferrer"
-		>
-			<span class="social-list__item-title visually-hidden"
-				>Linkedin</span
+{% macro socialList(className) %}
+	<ul class="{{ className }} social-list">
+		<li class="social-list__item">
+			<a
+				class="social-list__item-link social-list__item-link--github"
+				href="https://github.com/what1s1ove"
+				target="_blank"
+				rel="noreferrer"
 			>
-		</a>
-	</li>
-	<li class="social-list__item">
-		<a
-			class="social-list__item-link social-list__item-link--telegram"
-			href="https://t.me/dugga"
-			target="_blank"
-			rel="noreferrer"
-		>
-			<span class="social-list__item-title visually-hidden"
-				>Telegram</span
+				<span class="social-list__item-title visually-hidden">GitHub</span>
+			</a>
+		</li>
+		<li class="social-list__item">
+			<a
+				class="social-list__item-link social-list__item-link--linkedin"
+				href="https://www.linkedin.com/in/what1s1ove"
+				target="_blank"
+				rel="noreferrer"
 			>
-		</a>
-	</li>
-</ul>
+				<span class="social-list__item-title visually-hidden"> Linkedin </span>
+			</a>
+		</li>
+		<li class="social-list__item">
+			<a
+				class="social-list__item-link social-list__item-link--telegram"
+				href="https://t.me/dugga"
+				target="_blank"
+				rel="noreferrer"
+			>
+				<span class="social-list__item-title visually-hidden"> Telegram </span>
+			</a>
+		</li>
+	</ul>
+{% endmacro %}

source/layouts/page.njk

@@ -1,5 +1,5 @@
-{% set title = global.title if page.url == '/' else title + ' – ' + global.title
-%} {% set desc = desc if desc else global.desc %}
+{% set title = global.title if page.url == '/' else title + ' | ' + global.title %}
+{% set description = description if description else global.description %}
 
 <!doctype html>
 <html class="page" lang="en">
@@ -12,37 +12,22 @@
 
 		<link rel="stylesheet" href="/styles/index.css" />
 
-		<link
-			rel="preload"
-			href="/fonts/roboto-400.woff2"
-			crossorigin
-			as="font"
-			type="font/woff2"
-		/>
-		<link
-			rel="preload"
-			href="/fonts/roboto-700.woff2"
-			crossorigin
-			as="font"
-			type="font/woff2"
-		/>
+		<link rel="preload" href="/fonts/roboto-400.woff2" crossorigin as="font" type="font/woff2" />
+		<link rel="preload" href="/fonts/roboto-700.woff2" crossorigin as="font" type="font/woff2" />
 
 		<link rel="icon" href="/favicon.ico" sizes="any" />
 		<link rel="icon" href="/images/icons/icon.svg" type="image/svg+xml" />
 		<link rel="manifest" href="/manifest.json" />
 
-		<meta name="description" content="{{ desc }}" />
+		<meta name="description" content="{{ description }}" />
 		<meta name="generator" content="{{ eleventy.generator }}" />
 
 		<meta property="og:type" content="website" />
 		<meta property="og:title" content="{{ title }}" />
-		<meta property="og:description" content="{{ desc }}" />
+		<meta property="og:description" content="{{ description }}" />
 		<meta property="og:url" content="{{ global.domain + page.url }}" />
 
-		<meta
-			property="og:image"
-			content="{{ global.domain }}/images/logo-social.og.png"
-		/>
+		<meta property="og:image" content="{{ global.domain }}/images/logo-social.og.png" />
 		<meta property="og:image:width" content="1200" />
 		<meta property="og:image:height" content="630" />