feat: add remark widont extension

Idea from this article: https://eatmon.co/blog/remove-runts-markdown/

astro.config.mjs

@@ -2,7 +2,7 @@ import mdx from '@astrojs/mdx';
 import preact from '@astrojs/preact';
 import tailwind from '@astrojs/tailwind';
 import { astroImageTools } from 'astro-imagetools';
-import { remarkReadingTime } from './src/utils';
+import { remarkReadingTime, remarkWidont } from './src/utils';
 
 import { defineConfig } from 'astro/config';
 
@@ -17,7 +17,7 @@ export default defineConfig({
 	},
 	integrations: [
 		mdx({
-			remarkPlugins: [remarkReadingTime],
+			remarkPlugins: [remarkReadingTime, remarkWidont],
 		}),
 		tailwind(),
 		preact({ compat: true }),

package.json

@@ -40,7 +40,8 @@
 		"react-dom": "npm:@preact/compat@^17.1.2",
 		"reading-time": "^1.5.0",
 		"sharp": "^0.32.1",
-		"tailwindcss": "^3.3.2"
+		"tailwindcss": "^3.3.2",
+		"unist-util-visit": "^4.1.2"
 	},
 	"devDependencies": {
 		"@types/mdast": "^3.0.11",

pnpm-lock.yaml

@@ -84,6 +84,9 @@ dependencies:
   tailwindcss:
     specifier: ^3.3.2
     version: 3.3.2
+  unist-util-visit:
+    specifier: ^4.1.2
+    version: 4.1.2
 
 devDependencies:
   '@types/mdast':

src/utils/index.ts

@@ -2,6 +2,7 @@ export * from './date';
 export * from './format-posts';
 export * from './pick-two-random-colors';
 export * from './remark-reading-time';
+export * from './remark-widont';
 export * from './sort-by-alphabet';
 export * from './sort-by-date';
 export * from './sort-by-sortkey';

src/utils/remark-widont.ts

@@ -0,0 +1,17 @@
+import { visit } from 'unist-util-visit';
+
+import type { Literal, Node } from 'unist';
+
+export function remarkWidont() {
+	function transformer(tree: Node) {
+		visit(tree, 'text', function (node: Literal<string>) {
+			let wordCount = node.value.split(' ').length;
+
+			if (wordCount >= 3) {
+				node.value = node.value.replace(/ ([^ ]*)$/, '\u00A0$1');
+			}
+		});
+	}
+
+	return transformer;
+}