ci(whatislove-dev): uncomment linthtml wd-365

apps/whatislove-dev/lint-staged.config.js

@@ -8,7 +8,11 @@ let config = {
 		() => `npm run ci:lint:js -w apps/whatislove-dev`,
 		() => `npm run ci:lint:type -w apps/whatislove-dev`,
 	],
-	'**/*.njk': [() => `npm run ci:lint:bem -w apps/whatislove-dev`],
+	'**/*.njk': [
+		() => `npm run ci:lint:bem -w apps/whatislove-dev`,
+		() => `npm run ci:lint:html -w apps/whatislove-dev`,
+		() => `npm run ci:lint:markup -w apps/whatislove-dev`,
+	],
 }
 
 export default config

apps/whatislove-dev/linthtml.config.js

@@ -2,7 +2,8 @@
 let config = {
 	extends: `linthtml-config-htmlacademy`,
 	rules: {
-		'doctype-first': false,
+		'no-surrounding-whitespace': false,
+		'tag-close': false,
 	},
 }
 

apps/whatislove-dev/package.json

@@ -10,7 +10,7 @@
 		"build:clean": "rm -rf build",
 		"build": "npm run build:clean && npx @11ty/eleventy",
 		"ci:lint:markup": "w3c-html-validator \"build\" '--ignore=/“sizes” attribute must also be specified/'",
-		"_ci:lint:html": "npx @linthtml/linthtml \"src/**/*.njk\"",
+		"ci:lint:html": "npx @linthtml/linthtml \"build/**/*.html\"",
 		"ci:lint:bem": "bemlint \"build/**/*.html\" --errors",
 		"ci:lint:css": "stylelint \"src/**/*.css\"",
 		"ci:lint:js": "eslint \"./**/*\"",
@@ -26,7 +26,7 @@
 		"@11ty/eleventy": "3.0.0-alpha.10",
 		"@11ty/eleventy-img": "5.0.0-beta.4",
 		"@11ty/eleventy-plugin-rss": "1.2.0",
-		"@linthtml/linthtml": "0.10.0-beta.5",
+		"@linthtml/linthtml": "0.10.0-beta.8",
 		"@shikijs/markdown-it": "1.5.2",
 		"@sindresorhus/slugify": "2.2.1",
 		"@types/11ty__eleventy-img": "2.0.5",

apps/whatislove-dev/src/includes/accordion.njk

@@ -4,7 +4,7 @@
 		<div class="accordion__content">{{ caller() }}</div>
 		{% if defaultOpenedWidth %}
 			<!-- prettier-ignore-start -->
-			<script>
+			<script type="module" async>
 				document.currentScript.closest('details').open = window.innerWidth > {{ defaultOpenedWidth }}
 			</script>
 			<!-- prettier-ignore-end -->

apps/whatislove-dev/src/includes/channel.njk

@@ -22,7 +22,6 @@
 		<div class="channel__content">
 			<div class="channel__picture-wrapper">
 				<img
-					class="channel__image"
 					src="/images/telegram-avatar.jpg"
 					width="66"
 					height="66"
@@ -34,7 +33,7 @@
 				/>
 				{{ icon(className='channel__picture-object', name='telegram', width=22, height=22) }}
 			</div>
-			<a class="channel__link" href="{{ global.channelUrl }}" target="_blank">t.me/whatislove_dev</a>
+			<a class="channel__link" href="{{ global.channelUrl }}" target="_blank" rel="noreferrer noopener">t.me/whatislove_dev</a>
 			<p class="channel__description">
 				I run a Telegram channel, sharing insightful dev publications and resources. Thx, peace, frogs, love ✌️
 			</p>

apps/whatislove-dev/src/includes/footer.njk

@@ -1,13 +1,17 @@
 <footer class="footer box">
 	<ul class="footer__links-list">
 		<li class="footer__links-item">
-			<a class="footer__link" href="{{ global.repo }}/issues/new" target="_blank">Report Issue</a>
+			<a class="footer__link" href="{{ global.repo }}/issues/new" target="_blank" rel="noreferrer noopener">
+				Report Issue
+			</a>
 		</li>
 		<li class="footer__links-item">
 			<a class="footer__link" href="/feed.xml">RSS</a>
 		</li>
 		<li class="footer__links-item">
-			<a class="footer__link" href="{{ global.channelUrl }}" target="_blank">Telegram Channel</a>
+			<a class="footer__link" href="{{ global.channelUrl }}" target="_blank" rel="noreferrer noopener">
+				Telegram Channel
+			</a>
 		</li>
 		<li class="footer__links-item">
 			<a class="footer__link" href="/sitemap.xml">Sitemap</a>
@@ -19,7 +23,9 @@
 			href="https://🕸💍.ws/previous"
 			aria-label="Webring go previous"
 		></a>
-		<a class="footer__webring-main" href="https://🕸💍.ws" target="_blank">🕸️ IndieWeb Webring 💍</a>
+		<a class="footer__webring-main" href="https://🕸💍.ws" target="_blank" rel="noreferrer noopener">
+			🕸️ IndieWeb Webring 💍
+		</a>
 		<a
 			class="footer__webring-link footer__webring-link--next action"
 			href="https://🕸💍.ws/next"
@@ -29,6 +35,8 @@
 	<p class="footer__copyright">&copy; 2020 – {{ global.currentYear }} {{ global.author }}. All rights reserved.</p>
 	<p class="footer__credits">
 		Built using {{ eleventy.generator }} with <span class="footer__credits-icon">❤️</span> / Design by
-		<a class="footer__credits-designer" href="https://t.me/listiqq" target="_blank"> Dima Listiq </a>
+		<a class="footer__credits-designer" href="https://t.me/listiqq" target="_blank" rel="noreferrer noopener">
+			Dima Listiq
+		</a>
 	</p>
 </footer>

apps/whatislove-dev/src/includes/header.njk

@@ -114,7 +114,14 @@
 				<a class="header__menu-link" href="/files/vladyslav-zubko-cv.pdf">CV</a>
 			</li>
 			<li class="header__menu-item header__menu-item--careers">
-				<a class="header__menu-link" href="https://careers.whatislove.dev/" target="_blank">Careers</a>
+				<a
+					class="header__menu-link"
+					href="https://careers.whatislove.dev"
+					target="_blank"
+					rel="noreferrer noopener"
+				>
+					Careers
+				</a>
 			</li>
 		</ul>
 		{{ settings(className='header__settings') }}

apps/whatislove-dev/src/includes/settings.njk

@@ -1,5 +1,6 @@
 {% macro settings(className) %}
-	<section class="{{ className }} settings settings--theme" aria-label="Theme switcher">
+	<section class="{{ className }} settings settings--theme">
+		<h2 class="settings__title visually-hidden">Theme switcher</h2>
 		<label class="settings__theme-label">
 			<input class="settings__theme-control" type="radio" name="theme" value="light" aria-label="Light" />
 		</label>

apps/whatislove-dev/src/includes/shapes.njk

@@ -1,16 +1,16 @@
-<svg class="shapes visually-hidden">
+<svg class="shapes visually-hidden" width="0" height="0">
 	<path
 		class="shapes__text-curve"
 		id="text-curved"
 		d="M0 0C0 15.913 6.32141 31.1742 17.5736 42.4264C28.8258 53.6786 44.087 60 60 60C75.913 60 91.1742 53.6786 102.426 42.4264C113.679 31.1742 120 15.913 120 0"
 	/>
 	<filter class="shapes__sticker" id="sticker">
-		<feMorphology in="SourceAlpha" result="Dilated" operator="dilate" radius="4"></feMorphology>
-		<feFlood flood-color="#ffffff" result="OutlineColor"></feFlood>
-		<feComposite in="OutlineColor" in2="Dilated" operator="in" result="Outline"></feComposite>
-		<feMerge>
-			<feMergeNode in="Outline"></feMergeNode>
-			<feMergeNode in="SourceGraphic"></feMergeNode>
-		</feMerge>
+		<femorphology in="SourceAlpha" result="Dilated" operator="dilate" radius="4" />
+		<feflood flood-color="#ffffff" result="OutlineColor" />
+		<fecomposite in="OutlineColor" in2="Dilated" operator="in" result="Outline" />
+		<femerge>
+			<femergenode in="Outline" />
+			<femergenode in="SourceGraphic" />
+		</femerge>
 	</filter>
 </svg>

apps/whatislove-dev/src/layouts/article.njk

@@ -10,7 +10,7 @@
 {% set lastChangelogItem = changelogs | last %}
 
 {% block font %}
-	<link rel="preload" href="/fonts/monaspace-neon.woff2" crossorigin as="font" type="font/woff2" />
+	<link rel="preload" href="/fonts/monaspace-neon.woff2" crossorigin="anonymous" as="font" type="font/woff2" />
 {% endblock %}
 
 {% block content %}
@@ -104,6 +104,7 @@
 									class="mentions__origin action"
 									href="{{ mention.url }}"
 									target="_blank"
+									rel="noreferrer noopener"
 									aria-label="View original"
 								></a>
 							</li>
@@ -112,10 +113,14 @@
 				{% endif %}
 				<div class="mentions__form-wrapper">
 					<p class="mentions__form-description">
-						These are <a href="https://indieweb.org/webmention" target="_blank">webmentions</a> via the
-						<a href="https://indieweb.org/" target="_blank">IndieWeb</a> and
-						<a href="https://webmention.io/" target="_blank">webmention.io</a>. Mention this post from your
-						site:
+						These are
+						<a href="https://indieweb.org/webmention" target="_blank" rel="noreferrer noopener">
+							webmentions
+						</a>
+						via the
+						<a href="https://indieweb.org/" target="_blank" rel="noreferrer noopener">IndieWeb</a> and
+						<a href="https://webmention.io/" target="_blank" rel="noreferrer noopener">webmention.io</a>.
+						Mention this post from your site:
 					</p>
 					<form
 						class="mentions__form"

apps/whatislove-dev/src/layouts/page.njk

@@ -13,8 +13,20 @@
 
 		<link rel="stylesheet" href="/styles/index.css" />
 
-		<link rel="preload" href="/fonts/red-hat-display-variable.woff2" crossorigin as="font" type="font/woff2" />
-		<link rel="preload" href="/fonts/saira-extra-condensed-400.woff2" crossorigin as="font" type="font/woff2" />
+		<link
+			rel="preload"
+			href="/fonts/red-hat-display-variable.woff2"
+			crossorigin="anonymous"
+			as="font"
+			type="font/woff2"
+		/>
+		<link
+			rel="preload"
+			href="/fonts/saira-extra-condensed-400.woff2"
+			crossorigin="anonymous"
+			as="font"
+			type="font/woff2"
+		/>
 		{% block font %}{% endblock %}
 
 		<link rel="icon" href="/images/favicons/favicon.ico" sizes="any" />

apps/whatislove-dev/src/pages/form/index.njk

@@ -103,5 +103,5 @@ stickersCount: 5
 		</form>
 	</div>
 
-	<script src="https://cdn.tailwindcss.com" defer></script>
+	<script src="https://cdn.tailwindcss.com" async></script>
 {% endblock %}

apps/whatislove-dev/src/pages/index/index.njk

@@ -41,12 +41,11 @@ stickersCount: 0
 					aria-hidden="true"
 				>
 					<text x="30">
-						<textPath class="intro__paw-text" xlink:href="#text-curved">{{ LAPKA_PHRASE }}</textPath>
+						<textpath class="intro__paw-text" href="#text-curved">{{ LAPKA_PHRASE }}</textpath>
 					</text>
 				</svg>
 			</button>
 			<img
-				class="intro__photo"
 				src="/images/vladyslav-zubko.png"
 				width="226"
 				height="300"
@@ -74,7 +73,7 @@ stickersCount: 0
 	<div class="main__row main__row--experience-stickers box">
 		<section class="experience">
 			<h2 class="experience__title">Experience</h2>
-			<form class="experience__form">
+			<form class="experience__form" action="/timeline">
 				<label class="experience__form-label">
 					<input
 						class="experience__form-control visually-hidden"

apps/whatislove-dev/src/scripts/pages/main/libs/components/timeline/libs/components/timeline-list/libs/helpers/get-timeline-template/get-timeline-template.helper.js

@@ -15,15 +15,15 @@ let getTimelineTemplate = (timeline) => {
 	)
 	let originStringNode = getStringWitCheck(
 		origin,
-		`<a class="timeline__item-origin" href="${origin}" target="_blank">${originDesc}</a>`,
+		`<a class="timeline__item-origin" href="${origin}" target="_blank" rel="noreferrer noopener">${originDesc}</a>`,
 	)
 	let descStringNode = getStringWitCheck(
 		desc,
 		`<p class="timeline__item-description">${desc}</p>`,
 	)
 	let linkStringNode = getStringWitCheck(
 		link,
-		`<a class="timeline__item-link" href="${link}" target="_blank">${linkDesc}</a>`,
+		`<a class="timeline__item-link" href="${link}" target="_blank" rel="noreferrer noopener">${linkDesc}</a>`,
 	)
 	let endDateStringNode = getStringWitCheck(
 		endDate,

apps/whatislove-dev/src/styles/blocks/channel.css

@@ -126,7 +126,7 @@
 	position: relative;
 }
 
-.channel__image {
+.channel img {
 	display: block;
 	inline-size: 66px;
 	block-size: auto;

apps/whatislove-dev/src/styles/blocks/intro.css

@@ -106,7 +106,7 @@
 	}
 }
 
-.intro__photo {
+.intro img {
 	display: block;
 	inline-size: 226px;
 	block-size: auto;

apps/whatislove-dev/src/transforms/replace-img-wrapper/replace-img-wrapper.transform.js

@@ -11,12 +11,19 @@ let replaceImgWrapper = (window) => {
 	let pictureNodes = contentNode.querySelectorAll(`p > picture`)
 
 	for (let pictureNode of pictureNodes) {
+		let imgNode = /** @type {HTMLImageElement} */ (
+			pictureNode.querySelector(`img`)
+		)
 		let paragraphNode = /** @type {HTMLParagraphElement} */ (
 			pictureNode.parentNode
 		)
 		let figureNode = window.document.createElement(`figure`)
+		let figureCaptionNode = window.document.createElement(`figcaption`)
+
+		figureCaptionNode.textContent = imgNode.alt
 
 		figureNode.append(pictureNode)
+		figureNode.append(figureCaptionNode)
 
 		paragraphNode.replaceWith(figureNode)
 	}