feat(whatislove-dev): add styles to article og image wd-557 (#559)

apps/whatislove-dev/eleventy.config.js

@@ -11,7 +11,7 @@ import { parseHTML } from 'linkedom'
 import markdownIt from 'markdown-it'
 import { existsSync, readFileSync } from 'node:fs'
 import { mkdir, readFile, writeFile } from 'node:fs/promises'
-import { basename, extname } from 'node:path'
+import { basename, extname, join } from 'node:path'
 import svgo from 'svgo'
 
 import { default as environment } from './src/data/environment.js'
@@ -56,7 +56,6 @@ let CollectionPath = /** @type {const} */ ({
 	PAGES: `src/pages/!(404)/index.njk`,
 })
 
-let isDevelopment = environment.COMMON.ENVIRONMENT === `development`
 let rawPackageJson = await readFile(new URL(`package.json`, import.meta.url))
 let packageJson = /** @type {(text: string) => PackageJson} */ (JSON.parse)(
 	rawPackageJson.toString(),
@@ -80,7 +79,7 @@ md.use(
  */
 let init = (config) => {
 	// ignores
-	if (!isDevelopment) {
+	if (environment.APP.FLAGS.IS_PRODUCTION) {
 		config.ignores.add(Path.PAGE.FORM)
 	}
 
@@ -159,6 +158,25 @@ let init = (config) => {
 		return getShuffledItems(/** @type {unknown[]} */ (items))
 	})
 
+	config.addNunjucksAsyncShortcode(
+		`inlineImage`,
+		/**
+		 * @param {string} path
+		 * @returns {Promise<string>}
+		 */
+		async (path) => {
+			let extension = extname(path).slice(1)
+			let imgPath = join(config.dir.input, path)
+			let base64Image = await readFile(imgPath, `base64`)
+
+			if (extension === `svg`) {
+				extension = `svg+xml`
+			}
+
+			return `data:image/${extension};base64,${base64Image}`
+		},
+	)
+
 	// copy
 	for (let url of Path.COPY) {
 		config.addPassthroughCopy(url)
@@ -252,7 +270,7 @@ let init = (config) => {
 						lightningcss.Features.MediaQueries |
 						lightningcss.Features.Nesting,
 					minify: true,
-					sourceMap: isDevelopment,
+					sourceMap: environment.APP.FLAGS.IS_DEVELOPMENT,
 					targets: lightningcss.browserslistToTargets(
 						browserslist(packageJson.browserslist),
 					),
@@ -291,7 +309,7 @@ let init = (config) => {
 					bundle: true,
 					entryPoints: [url],
 					minify: true,
-					sourcemap: isDevelopment,
+					sourcemap: environment.APP.FLAGS.IS_DEVELOPMENT,
 					target: `es2020`,
 					write: false,
 				})

apps/whatislove-dev/packages.d.ts

@@ -1,5 +1,9 @@
 declare module '@11ty/eleventy' {
 	class UserConfig {
+		dir: {
+			input: string
+		}
+
 		ignores: Set<string>
 
 		addPassthroughCopy(
@@ -37,6 +41,13 @@ declare module '@11ty/eleventy' {
 			newPluginCb: (value: unknown) => unknown,
 			pluginOptions?: Record<string, unknown>,
 		): void
+
+		addNunjucksAsyncShortcode(
+			name: string,
+			addNunjucksAsyncShortcodeCb: (
+				path: string,
+			) => Promise<unknown> | unknown,
+		): void
 	}
 
 	export { UserConfig }

apps/whatislove-dev/src/data/environment.js

@@ -1,15 +1,19 @@
 import 'dotenv/config'
 import process from 'node:process'
 
+let { DEVTO_API_KEY, ENVIRONMENT, WEBMENTION_API_KEY } = process.env
+
 let data = {
 	API: {
-		DEVTO_API_KEY: /** @type {string} */ (process.env[`DEVTO_API_KEY`]),
-		WEBMENTION_API_KEY: /** @type {string} */ (
-			process.env[`WEBMENTION_API_KEY`]
-		),
+		DEVTO_API_KEY: /** @type {string} */ (DEVTO_API_KEY),
+		WEBMENTION_API_KEY: /** @type {string} */ (WEBMENTION_API_KEY),
 	},
-	COMMON: {
-		ENVIRONMENT: /** @type {string} */ (process.env[`ENVIRONMENT`]),
+	APP: {
+		ENVIRONMENT: /** @type {string} */ (ENVIRONMENT),
+		FLAGS: {
+			IS_DEVELOPMENT: ENVIRONMENT === `development`,
+			IS_PRODUCTION: ENVIRONMENT !== `development`,
+		},
 	},
 }
 

apps/whatislove-dev/src/data/mentions.js

@@ -266,7 +266,9 @@ let getWebMentionsPageMention = async () => {
 
 /** @returns {Promise<PagesMentions>} */
 let loader = async () => {
-	let mentionLoaders = [getDevtoPageMention, getWebMentionsPageMention]
+	let mentionLoaders = environment.APP.FLAGS.IS_PRODUCTION
+		? [getDevtoPageMention, getWebMentionsPageMention]
+		: []
 	let allPagesMentions = /** @type {PagesMentions} */ ({})
 
 	for (let mentionLoader of mentionLoaders) {

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

@@ -9,9 +9,11 @@
 {% set mentionData = mentions[page.url] %}
 {% set lastChangelogItem = changelogs | last %}
 
-{% setAsync "ogUrl" %}
-	{% ogImage "includes/og-article-image.njk", { title: title, tags: tags } %}
-{% endsetAsync %}
+{% if environment.APP.FLAGS.IS_PRODUCTION %}
+	{% setAsync "ogUrl" %}
+		{% ogImage "includes/og-article-image.njk", { title: title, tags: tags } %}
+	{% endsetAsync %}
+{% endif %}
 
 {% block font %}
 	<link rel="preload" href="/fonts/monaspace-neon.woff2" crossorigin="anonymous" as="font" type="font/woff2" />

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

@@ -47,14 +47,14 @@ stickersCount: 0
 			</button>
 			<img
 				src="/images/vladyslav-zubko.png"
-				width="226"
+				width="238"
 				height="300"
-				sizes="226px"
+				sizes="238px"
 				loading="eager"
 				fetchpriority="high"
 				decoding="async"
 				alt="{{ global.author }} Portrait."
-				eleventy:widths="226,452"
+				eleventy:widths="238,476"
 				eleventy:formats="avif,webp,png"
 			/>
 			<header class="intro__header">

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

@@ -98,7 +98,7 @@
 	mask-image: linear-gradient(
 		to bottom,
 		hsl(var(--color-intro-image-mask) / 80%) 40%,
-		hsla(var(--color-intro-image-mask) / 0%) 95%
+		hsl(var(--color-intro-image-mask) / 0%) 95%
 	);
 
 	@media (--width-tablet) {
@@ -108,9 +108,8 @@
 
 .intro img {
 	display: block;
-	inline-size: 226px;
+	inline-size: 238px;
 	block-size: auto;
-	padding-inline: 6px;
 	filter: drop-shadow(-6px 4px 0 hsl(var(--color-red-200)));
 }
 

apps/whatislove-dev/src/styles/blocks/tag-list.css

@@ -18,6 +18,7 @@
 	background-size: var(--background-size-page);
 	border-radius: 3px;
 
+	/* do not forget to add new colors to OG tags */
 	&[class*="--html"] {
 		--background-color: var(--color-green-100);
 	}