Docs: Add documentation microsite (#8)

.changeset/quick-tools-type.md

@@ -0,0 +1,5 @@
+---
+'tailwindcss-opentype': minor
+---
+
+Add documentation microsite

.eslintignore

@@ -0,0 +1,2 @@
+!.eslintrc.js
+!.eleventy.js

.gitignore

@@ -2,3 +2,4 @@
 .DS_Store
 node_modules
 dist
+docs/src/assets/styles.css

README.md

@@ -11,26 +11,13 @@
 npm install tailwindcss-opentype
 ```
 
-### Font Variant Ligatures
-
-| Class                        | Properties                                    |
-|------------------------------|-----------------------------------------------|
-| `common-ligatures`           | `font-variant-ligatures: common-ligatures`    |
-| `no-common-ligatures`        | `font-variant-ligatures: no-common-ligatures` |
-| `discretionary-ligatures`    | `font-variant-ligatures: discretionary-ligatures` |
-| `no-discretionary-ligatures` | `font-variant-ligatures: no-discretionary-ligatures` |
-| `contextual`                 | `font-variant-ligatures: contextual`          |
-| `no-contextual`              | `font-variant-ligatures: no-contextual`       |
-
-These utilities are composable so you can enable multiple `font-variant-ligatures` features by combining multiple classes in your HTML.
+**📚 Read the [full documentation](https://tailwindcss-opentype.netlify.app).**
 
 ## Thanks
 
-- [Utility OpenType](https://github.com/kennethormandy/utility-opentype) by [@kennethormandy](https://github.com/kennethormandy)
-- [OpenType Features](https://sparanoid.com/lab/opentype-features/) by [@sparanoid](https://github.com/sparanoid)
+-   [Utility OpenType](https://github.com/kennethormandy/utility-opentype) by [@kennethormandy](https://github.com/kennethormandy)
+-   [OpenType Features](https://sparanoid.com/lab/opentype-features/) by [@sparanoid](https://github.com/sparanoid)
 
 [npm-url]: https://www.npmjs.com/package/tailwindcss-opentype
-
 [npm-img]: https://img.shields.io/npm/v/tailwindcss-opentype.svg?style=flat-square
-
 [npm-dls]: https://img.shields.io/npm/dt/tailwindcss-opentype.svg?style=flat-square

docs/.eleventy.js

@@ -0,0 +1,62 @@
+const eleventyNavigationPlugin = require('@11ty/eleventy-navigation')
+const eleventyRemark = require('@fec/eleventy-plugin-remark')
+const dedent = require('dedent')
+
+module.exports = function (eleventyConfig) {
+    eleventyConfig.addPassthroughCopy({
+        'docs/src/assets/fonts': './assets/fonts',
+    })
+    eleventyConfig.addPassthroughCopy({ 'docs/src/public': '.' })
+    eleventyConfig.addPlugin(eleventyNavigationPlugin)
+    eleventyConfig.addPlugin(eleventyRemark, {
+        plugins: [
+            {
+                plugin: 'remark-autolink-headings',
+                options: {},
+            },
+            require('./remark/sample'),
+            // require('./remark/prose'),
+        ],
+    })
+
+    eleventyConfig.addFilter('badge', function (content) {
+        return dedent`
+        <span aria-hidden="true" class="inline-flex self-center mx-4 h-6 w-px align-middle bg-grey-700 bg-opacity-20"></span>
+        <span class="align-middle inline-flex items-center px-3 py-1 rounded-full text-sm font-medium leading-4 bg-teal-100 text-teal-900 tracking-tight">
+            <kbd>${content}</kbd>
+        </span>`.replace(/\n/g, '')
+    })
+
+    // let markdown = markdownIt({
+    //     html: true,
+    //     breaks: true,
+    // })
+
+    // eleventyConfig.setLibrary(
+    //     'md',
+    //     markdown
+    //         .use(markdownItAnchor, {
+    //             permalink: true,
+    //             permalinkClass:
+    //                 'absolute ml-[-1em] pr-[0.5em] !no-underline !text-grey-400 opacity-0 group-hover:opacity-100',
+    //         })
+    //         .use(markdownItClass, {
+    //             h2: 'group flex whitespace-pre-wrap',
+    //             h3: 'group flex whitespace-pre-wrap',
+    //         })
+    // )
+
+    return {
+        dir: {
+            input: 'docs/src',
+            data: 'data',
+            includes: 'includes',
+            layouts: 'layouts',
+            output: 'docs/dist',
+        },
+        // pathPrefix:
+        //     process.env.NODE_ENV === 'production'
+        //         ? '/tailwindcss-opentype/'
+        //         : '',
+    }
+}

docs/remark/prism-diff-highlight.js

@@ -0,0 +1,86 @@
+// https://github.com/PrismJS/prism/blob/master/plugins/diff-highlight/prism-diff-highlight.js
+module.exports = (Prism) => {
+    let LANGUAGE_REGEX = /diff-([\w-]+)/i
+    let HTML_TAG = /<\/?(?!\d)[^\s>/=$<%]+(?:\s(?:\s*[^\s>/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/gi
+    // this will match a line plus the line break while ignoring the line breaks HTML tags may contain.
+    let HTML_LINE = RegExp(
+        /(?:__|[^\r\n<])*(?:\r\n?|\n|(?:__|[^\r\n<])(?![^\r\n]))/.source.replace(
+            /__/g,
+            function () {
+                return HTML_TAG.source
+            },
+        ),
+        'gi',
+    )
+
+    let PREFIXES = Prism.languages.diff.PREFIXES
+
+    Prism.hooks.add('before-sanity-check', function (env) {
+        let lang = env.language
+        if (LANGUAGE_REGEX.test(lang) && !env.grammar) {
+            env.grammar = Prism.languages[lang] = Prism.languages.diff
+        }
+    })
+    Prism.hooks.add('before-tokenize', function (env) {
+        let lang = env.language
+        if (LANGUAGE_REGEX.test(lang) && !Prism.languages[lang]) {
+            Prism.languages[lang] = Prism.languages.diff
+        }
+    })
+
+    Prism.hooks.add('wrap', function (env) {
+        let diffLanguage, diffGrammar
+        if (env.language !== 'diff') {
+            let langMatch = LANGUAGE_REGEX.exec(env.language)
+            if (!langMatch) {
+                return // not a language specific diff
+            }
+
+            diffLanguage = langMatch[1]
+            diffGrammar = Prism.languages[diffLanguage]
+        }
+
+        // one of the diff tokens without any nested tokens
+        if (env.type in PREFIXES) {
+            /** @type {string} */
+            let content = env.content.replace(HTML_TAG, '') // remove all HTML tags
+
+            /** @type {string} */
+            let decoded = content.replace(/&lt;/g, '<').replace(/&amp;/g, '&')
+
+            // remove any one-character prefix
+            let code = decoded.replace(/(^|[\r\n])./g, '$1')
+
+            // highlight, if possible
+            let highlighted
+            if (diffGrammar) {
+                highlighted = Prism.highlight(code, diffGrammar, diffLanguage)
+            } else {
+                highlighted = Prism.util.encode(code)
+            }
+
+            // get the HTML source of the prefix token
+            let prefixToken = new Prism.Token('prefix', PREFIXES[env.type], [
+                /\w+/.exec(env.type)[0],
+            ])
+            let prefix = Prism.Token.stringify(prefixToken, env.language)
+
+            // add prefix
+            let lines = []
+            let m
+            HTML_LINE.lastIndex = 0
+            while ((m = HTML_LINE.exec(highlighted))) {
+                lines.push(prefix + m[0])
+            }
+            if (/(?:^|[\r\n]).$/.test(decoded)) {
+                // because both "+a\n+" and "+a\n" will map to "a\n" after the line prefixes are removed
+                lines.push(prefix)
+            }
+            env.content = lines.join('')
+
+            if (diffGrammar) {
+                env.classes.push('language-' + diffLanguage)
+            }
+        }
+    })
+}

docs/remark/prose.js

@@ -0,0 +1,37 @@
+function prose() {
+    return (tree) => {
+        let insideProse = false
+
+        tree.children = tree.children.flatMap((node, i) => {
+            console.log('inside:', insideProse)
+            console.log('node:', node)
+            // if (insideProse && isJsNode(node)) {
+            //     insideProse = false
+            //     return [{ type: 'jsx', value: '</div>' }, node]
+            // }
+            if (!insideProse) {
+                insideProse = true
+                return [
+                    {
+                        type: 'html',
+                        value: '<div class="prose">',
+                        // tagName: 'div',
+                        // properties: { class: 'prose' },
+                    },
+                    node,
+                    ...(i === tree.children.length - 1
+                        ? [{ type: 'html', value: '</div>' }]
+                        : []),
+                ]
+            }
+
+            if (i === tree.children.length - 1 && insideProse) {
+                return [node, { type: 'html', value: '</div>' }]
+            }
+
+            return [node]
+        })
+    }
+}
+
+module.exports = prose

docs/remark/sample.js

@@ -0,0 +1,123 @@
+const Prism = require('prismjs')
+const loadLanguages = require('prismjs/components/')
+loadLanguages()
+require('./prism-diff-highlight')(Prism)
+const visit = require('unist-util-visit')
+const unified = require('unified')
+const parse = require('rehype-parse')
+const dedent = require('dedent')
+
+const previewBackground = {
+    amber: 'bg-gradient-to-r from-amber-50 to-amber-100 accent-amber',
+    orange: 'bg-gradient-to-r from-orange-50 to-orange-100 accent-orange',
+    rose: 'bg-gradient-to-r from-rose-50 to-rose-100 accent-rose',
+    fuchsia: 'bg-gradient-to-r from-fuchsia-50 to-fuchsia-100 accent-fuchsia',
+    indigo: 'bg-gradient-to-r from-indigo-50 to-indigo-100 accent-indigo',
+    emerald: 'bg-gradient-to-r from-emerald-50 to-teal-100 accent-emerald',
+}
+
+function highlightCode(code, prismLanguage) {
+    let isDiff = prismLanguage.startsWith('diff-')
+    let language = isDiff ? prismLanguage.substr(5) : prismLanguage
+    let grammar = Prism.languages[isDiff ? 'diff' : language]
+
+    if (!grammar) {
+        // eslint-disable-next-line no-console
+        console.warn(`Unrecognised language: ${prismLanguage}`)
+        return Prism.util.encode(code)
+    }
+
+    let highlighted = Prism.highlight(code, grammar, prismLanguage)
+
+    return language === 'html'
+        ? highlighted.replace(
+              /\*\*(.*?)\*\*/g,
+              (_, text) =>
+                  `<span class="code-highlight bg-code-highlight">${text}</span>`,
+          )
+        : highlighted
+}
+
+function codeSample() {
+    return (tree) => {
+        visit(tree, 'code', (node) => {
+            if (node.lang !== 'html') return
+
+            let hasPreview = false
+            // let previewClassName
+            let previewCode
+            let snippetCode = node.value
+                .replace(
+                    /<template\s+(?:class="([^"]*)"\s+)?preview(?:\s+class="([^"]*)")?>(.*?)<\/template>/is,
+                    (m, class1, class2, content) => {
+                        hasPreview = true
+                        // previewClassName = class1 || class2
+                        previewCode = content
+                        return ''
+                    },
+                )
+                .trim()
+
+            if (!hasPreview) return
+            if (!snippetCode) snippetCode = previewCode
+
+            snippetCode = highlightCode(dedent(snippetCode).trim(), 'html')
+            let snippetHast = unified().use(parse).parse(snippetCode)
+
+            let meta = node.meta ? node.meta.trim().split(/\s+/) : []
+            let color = meta.find((x) => !/^resizable(:|$)/.test(x))
+
+            let previewHast = unified().use(parse).parse(previewCode)
+            let preview = {
+                type: 'element',
+                tagName: 'div',
+                properties: {
+                    class: [
+                        'rounded-t-xl overflow-hidden p-10 code-sample',
+                        previewBackground[color],
+                    ],
+                },
+                children: [previewHast.children[0].children[1].children[0]],
+            }
+
+            let snippet = {
+                type: 'element',
+                tagName: 'div',
+                properties: { class: 'overflow-hidden rounded-b-xl' },
+                children: [
+                    {
+                        type: 'element',
+                        tagName: 'pre',
+                        properties: {
+                            class: `scrollbar-none overflow-x-auto !m-0 !p-6 text-sm leading-snug !rounded-none language-${node.lang} text-white`,
+                        },
+                        children: [
+                            {
+                                type: 'element',
+                                tagName: 'code',
+                                properties: { class: 'language-html' },
+                                children: (node.data &&
+                                    node.data.hChildren) || [
+                                    snippetHast.children[0].children[1],
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            }
+
+            let n = node
+
+            n.type = 'code-sample'
+            if (!n.data) n.data = {}
+
+            n.data.hName = 'div'
+            n.data.hProperties = {
+                className: ['relative overflow-hidden mb-8'],
+            }
+            n.data.hChildren = [preview, snippet]
+        })
+    }
+}
+
+module.exports = codeSample