feat(whatislove-dev): add links to external resources for comments wd…

…-567 (#568)

* feat(whatislove-dev): add content--flow modifier wd-567

* feat(whatislove-dev): add links to external resources for comments wd-567

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

@@ -58,12 +58,16 @@
 					</ul>
 				{% endcall %}
 			{% endif %}
-			<div class="article__content content">{{ content | safe }}</div>
+			<div class="article__content content content--flow">{{ content | safe }}</div>
 			<section class="article__mentions mentions">
 				<header class="mentions__header">
 					<h2 class="mentions__title">Webmentions</h2>
-					<p class="mentions__description">
-						If you liked this article and think others should read it, please share it.
+					<p class="mentions__description content">
+						If you liked this article and think others should read it, please share it. Leave comments on
+						platforms such as
+						<a href="https://dev.to/" target="_blank" rel="noreferrer noopener">dev.to</a>,
+						<a href="https://twitter.com" target="_blank" rel="noreferrer noopener">twitter.com</a>, etc.,
+						and they will magically appear here ✨
 					</p>
 				</header>
 				<ul class="mentions__stats-list">
@@ -105,7 +109,7 @@
 								<time class="mentions__date" datetime="{{ mention.date | dateISO }}">
 									{{ mention.date | dateFormatted }}
 								</time>
-								<div class="mentions__content content">{{ mention.content | safe }}</div>
+								<div class="mentions__content content content--flow">{{ mention.content | safe }}</div>
 								<a
 									class="mentions__origin action"
 									href="{{ mention.url }}"
@@ -118,7 +122,7 @@
 					</ul>
 				{% endif %}
 				<div class="mentions__form-wrapper">
-					<p class="mentions__form-description">
+					<p class="mentions__form-description content">
 						These are
 						<a href="https://indieweb.org/webmention" target="_blank" rel="noreferrer noopener">
 							webmentions

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

@@ -12,15 +12,9 @@ stickersCount: 3
 {% block content %}
 	<div class="not-found box">
 		<h1 class="not-found__title">Not found</h1>
-		<p class="not-found__desc">
+		<p class="not-found__desc content">
 			Yeah, I also don't like broken links. Please,
-			<a
-				class="not-found__desc-link"
-				href="{{ global.repo }}/issues/new"
-				target="_blank"
-				rel="noreferrer noopener"
-				>create an issue</a
-			>
+			<a href="{{ global.repo }}/issues/new" target="_blank" rel="noreferrer noopener">create an issue</a>
 			if you truly ended up here <i>unexpectedly</i>.
 		</p>
 	</div>

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

@@ -2,8 +2,10 @@
 	--gap: 20px;
 	--gap-list: 8px;
 
-	display: grid;
-	gap: var(--gap);
+	&[class*="--flow"] {
+		display: grid;
+		gap: var(--gap);
+	}
 
 	p {
 		margin: 0;

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

@@ -139,11 +139,6 @@
 .mentions__form-description {
 	margin: 0;
 	color: hsl(var(--color-gray-100));
-
-	a {
-		color: hsl(var(--color-red-100));
-		text-underline-offset: 3px;
-	}
 }
 
 .mentions__origin {

apps/whatislove-dev/src/styles/blocks/not-found.css

@@ -21,8 +21,3 @@
 .not-found__desc {
 	margin: 0;
 }
-
-.not-found__desc-link {
-	color: hsl(var(--color-red-100));
-	text-underline-offset: 3px;
-}

apps/whatislove-dev/src/transforms/change-external-link-target/change-external-link-target.transform.js

@@ -1,8 +1,10 @@
-let CONTENT_BLOCK = /** @type {const} */ (`content`)
+let CONTENT_FLOW_BLOCK = /** @type {const} */ (`content--flow`)
 
 /** @param {globalThis} window */
 let changeExternalLinkTarget = (window) => {
-	let contentNodes = window.document.querySelectorAll(`.${CONTENT_BLOCK}`)
+	let contentNodes = window.document.querySelectorAll(
+		`.${CONTENT_FLOW_BLOCK}`,
+	)
 
 	if (contentNodes.length === 0) {
 		return