Split into monorepo & upgrade 11ty to ESM (#96)

Upgrades 11ty docs to ESM. Split into monorepo because TS is configured
to build the plugin into CJS which conflicts with the `module` type used
in the docs package.

Author: stormwarning

.eslintrc.cjs

@@ -8,13 +8,20 @@ const config = {
 	env: {
 		node: true,
 	},
-	ignorePatterns: ['dist', 'docs' /* , '!.eleventy.js' */],
+	ignorePatterns: ['dist'],
 	rules: {
 		'@typescript-eslint/ban-types': 'off',
 		'@typescript-eslint/lines-between-class-members': 'off',
 		'@typescript-eslint/padding-line-between-statements': 'off',
 
+		/**
+		 * Currently conflicting with 'yoda' and 'unicorn/explicit-length-check'.
+		 */
+		'etc/prefer-less-than': 'off',
+
 		'n/file-extension-in-import': ['error', 'always'],
+
+		'no-multi-assign': 'off',
 	},
 	overrides: [
 		{
@@ -34,6 +41,12 @@ const config = {
 				'prefer-let/prefer-let': 'off',
 			},
 		},
+		{
+			files: ['docs/**/*.js'],
+			rules: {
+				'import/no-extraneous-dependencies': 'off',
+			},
+		},
 	],
 }
 

.github/workflows/main.yml

@@ -7,17 +7,23 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+      # https://github.com/actions/checkout
       - name: Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+
+      # https://github.com/pnpm/action-setup
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 10
 
       - name: Setup Node.js 18.x
         uses: actions/setup-node@v3.1.1
         with:
           node-version: 18.x
-          cache: npm
+          cache: pnpm
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: npm run build

.github/workflows/release.yml

@@ -16,14 +16,19 @@ jobs:
         with:
           fetch-depth: 0
 
+      # https://github.com/pnpm/action-setup
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 10
+
       - name: Setup Node.js 18.x
         uses: actions/setup-node@v3.1.1
         with:
           node-version: 18.x
-          cache: npm
+          cache: pnpm
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       # https://github.com/changesets/action
       - name: Create release PR or publish to npm

.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/bin/sh
+
+# Disable hooks in CI.
+[ -n "$CI" ] && exit 0
+
+npx lint-staged

docs/.eleventy.js

@@ -0,0 +1,104 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+
+import eleventyNavigationPlugin from '@11ty/eleventy-navigation'
+import eleventyRemark from '@fec/eleventy-plugin-remark'
+import dedent from 'dedent'
+import { rehype } from 'rehype'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
+import rehypeSlug from 'rehype-slug'
+import { remark } from 'remark'
+import remarkDirective from 'remark-directive'
+
+import { remarkDirectives } from './remark/directives.js'
+import { remarkHeadings } from './remark/headings.js'
+import { remarkSample } from './remark/sample.js'
+
+/** @param {import('@11ty/eleventy').UserConfig} eleventyConfig */
+export default async function config(eleventyConfig) {
+	eleventyConfig.addPassthroughCopy({
+		'src/assets/fonts': './assets/fonts',
+	})
+	eleventyConfig.addPassthroughCopy({
+		'src/assets/images': './assets/images',
+	})
+	eleventyConfig.addPassthroughCopy({ 'src/public': '.' })
+
+	eleventyConfig.addPairedShortcode(
+		'navitem',
+		(content, url, isSelected, isInactive) => {
+			let tag = ''
+
+			if (isInactive) {
+				tag = `<span class="px-3 py-2 relative block text-grey-400">${content}</span>`
+			} else {
+				let linkClass = [
+					'px-3 py-2 transition-colors duration-200 relative block',
+					isSelected && 'text-sky-700',
+					!isSelected && 'hover:text-grey-900 text-grey-500',
+				].join(' ')
+
+				tag = dedent`<a class="${linkClass}" href="${url}">
+						<span class="rounded-md absolute inset-0 bg-sky-50 ${
+							!isSelected && 'opacity-0'
+						}"></span>
+						<span class="relative">${content}</span>
+					</a>`
+			}
+
+			return `<li>${tag}</li>`
+		},
+	)
+
+	eleventyConfig.addPlugin(eleventyNavigationPlugin)
+	eleventyConfig.addPlugin(eleventyRemark, {
+		plugins: [
+			remarkHeadings,
+			remarkDirective,
+			remarkDirectives,
+			remarkSample,
+			// Require('./remark/prose'),
+		],
+	})
+
+	eleventyConfig.addTransform(
+		'rehype',
+		/** @param {string} content */ async (content, outputPath) => {
+			let newContent = content
+
+			if (outputPath?.endsWith('.html')) {
+				let result = await rehype()
+					.use(rehypeSlug)
+					.use(rehypeAutolinkHeadings, {
+						test: (element, index, parent) => parent.tagName !== 'nav',
+						properties: {
+							class:
+								'absolute ml-[-0.75em] md:ml-[-1em] pr-[0.5em] !no-underline !text-grey-400 opacity-0 group-hover:opacity-100',
+						},
+						content: {
+							type: 'text',
+							value: '¶',
+						},
+					})
+					.process(content)
+
+				newContent = result.toString()
+			}
+
+			return newContent
+		},
+	)
+
+	return {
+		dir: {
+			input: 'src',
+			data: 'data',
+			includes: 'includes',
+			layouts: 'layouts',
+			output: 'dist',
+		},
+		// PathPrefix:
+		//     process.env.NODE_ENV === 'production'
+		//         ? '/tailwindcss-opentype/'
+		//         : '',
+	}
+}

docs/eleventy.config.js

@@ -0,0 +1,36 @@
+{
+	"name": "docs",
+	"version": "0.0.0",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "eleventy --config=eleventy.config.js",
+		"dev": "TAILWIND_MODE=watch eleventy --config=eleventy.config.js --serve"
+	},
+	"devDependencies": {
+		"@11ty/eleventy": "3.0.0",
+		"@11ty/eleventy-navigation": "0.3.5",
+		"@11ty/eleventy-plugin-syntaxhighlight": "5.0.0",
+		"@fec/eleventy-plugin-remark": "4.0.0",
+		"@tailwindcss/typography": "0.5.2",
+		"@types/hast": "3.0.4",
+		"@types/mdast": "4.0.4",
+		"autoprefixer": "10.3.4",
+		"dedent": "1.5.3",
+		"hastscript": "9.0.1",
+		"mdast-util-to-hast": "13.2.0",
+		"postcss": "8.4.23",
+		"postcss-cli": "8.3.1",
+		"prismjs": "1.30.0",
+		"rehype": "13.0.2",
+		"rehype-autolink-headings": "7.1.0",
+		"rehype-parse": "9.0.1",
+		"rehype-slug": "6.0.0",
+		"remark": "15.0.1",
+		"remark-directive": "4.0.0",
+		"tailwindcss": "3.3.2",
+		"tailwindcss-opentype": "workspace:*",
+		"unified": "11.0.5",
+		"unist-util-visit": "5.0.0"
+	}
+}