Fix doc for publication

[aphillips]

Somehow we have a link to i18n-drafts/style/respec_2022.css in the doc. This violates specberus rules. The stylesheet in question doesn't appear to be important to the functionality of the document. This is the only thing blocking me pushing to TR. (I did some "quick fixes" without waiting for review, but want to validate what we're doing and what I'm not understanding with the PR before I push the glossary up to TR again--and before I probably run into similar with specdev)

---

Preview | Diff

[netlify[bot]]

✅ Deploy Preview for i18n-glossary ready!

Name	Link
🔨 Latest commit	dc0d7986d6ebc5bed2428b1a55821d27f277eea6
🔍 Latest deploy log	https://app.netlify.com/sites/i18n-glossary/deploys/6446a56b4580b70008fe7163
😎 Deploy Preview	https://deploy-preview-46--i18n-glossary.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[r12a]

The link element with the data-import attribute is intended to suck the contents of an external CSS style sheet into the source code during the Respec build process (so no need to refer to it in the echidna file). However, the glossary page is missing some javascript that would complete that process. You can see it properly implemented if you look at one of the gap-analysis docs – all of those documents use the CSS from a single style sheet, making style changes easier to maintain, while at the same time respecting the publication requirements.

Since this applies the styling for our style guidelines, it's probably worth applying it here. To do that, follow these steps:

[1] add the following between the respec configuration script and the style element: <link rel="stylesheet" data-import href="https://w3c.github.io/i18n-drafts/style/respec_2022.css">

[2] do not mention this style sheet in echidna (as you did)

[3] add the following to the end of the respecConfig declaration:

    postProcess: [
        async function importStyleSheet() { 
            const elems = document.querySelectorAll(`link[rel='stylesheet'][data-import]`)
            await Promise.all(
                [...elems].map(async link => {
                    const text = await fetch(link.href).then(r => r.text())
                    const style = document.createElement("style")
                    style.textContent = text
                    link.replaceWith(style)
                    })
                )
            }
        ],

When respec builds the file you should now see the contents of the style sheet embedded into the top of the glossary file's source code.

[aphillips]

Thank you @r12a!!

I found that the data-include feature of ReSpec does the same thing without having to add the javascript (and it is a documented feature of ReSpec). This produces output that seems to meet all of the requirements and you might want to ape this elsewhere (including of using the postprocess directive). Have a look?

[aphillips]

I'm going to merge this so I can run all of the tools and see if I can't push out to TR.

[aphillips]

Success!!