From 6e0301d249a16b8978aed5fc97ed39e8cef4f4c8 Mon Sep 17 00:00:00 2001 From: nathan Date: Fri, 27 Oct 2023 09:21:27 -0600 Subject: [PATCH] Docs: Get the Shoelace widgets working on docs site Using their CDN with our Shoelace version --- doc/etemplate2/_includes/default.njk | 12 ++++++------ doc/etemplate2/_utilities/cem.cjs | 9 +++++++++ doc/etemplate2/assets/scripts/code-previews.js | 10 +++++----- doc/etemplate2/eleventy.config.cjs | 13 +++---------- 4 files changed, 23 insertions(+), 21 deletions(-) diff --git a/doc/etemplate2/_includes/default.njk b/doc/etemplate2/_includes/default.njk index 52764d27bf..dba2943b75 100644 --- a/doc/etemplate2/_includes/default.njk +++ b/doc/etemplate2/_includes/default.njk @@ -3,6 +3,7 @@ lang="en" data-layout="{{ layout }}" data-egroupware-version="{{ meta.version }}" + data-shoelace-version="{{ meta.shoelaceVersion }}" > {# Metadata #} @@ -32,14 +33,13 @@ {# API Viewer Element #} + {# Shoelace #} + + + {# EGroupware #} - {# Shoelace #} - - - - {# Set the initial theme and menu states here to prevent flashing #} \n` + + `\n` + `\n${htmlExample}`; jsTemplate = ''; } @@ -228,12 +229,11 @@ { htmlTemplate = '
'; jsTemplate = - `import React from 'https://esm.sh/react@${reactVersion}';\n` + `import ReactDOM from 'https://esm.sh/react-dom@${reactVersion}';\n` + - `import { setBasePath } from 'https://esm.sh/@shoelace-style/shoelace@${egwVersion}/${cdndir}/utilities/base-path';\n` + + `import { setBasePath } from 'https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/utilities/base-path';\n` + `\n` + `// Set the base path for Shoelace assets\n` + - `setBasePath('https://esm.sh/@shoelace-style/shoelace@${egwVersion}/${npmdir}/')\n` + + `setBasePath('https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${npmdir}/')\n` + `\n${convertModuleLinks(reactExample)}\n` + `\n` + `ReactDOM.render(, document.getElementById('root'));`; @@ -241,7 +241,7 @@ // CSS templates cssTemplate = - `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${egwVersion}/${cdndir}/themes/${ + `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/themes/${ isDark ? 'dark' : 'light' }.css';\n` + '\n' + diff --git a/doc/etemplate2/eleventy.config.cjs b/doc/etemplate2/eleventy.config.cjs index 0f21b5994f..87f998b044 100644 --- a/doc/etemplate2/eleventy.config.cjs +++ b/doc/etemplate2/eleventy.config.cjs @@ -4,7 +4,7 @@ const path = require('path'); const lunr = require('lunr'); const {capitalCase} = require('change-case'); const {JSDOM} = require('jsdom'); -const {customElementsManifest, getAllComponents} = require('./_utilities/cem.cjs'); +const {customElementsManifest, getAllComponents, getShoelaceVersion} = require('./_utilities/cem.cjs'); const egwFlavoredMarkdown = require('./_utilities/markdown.cjs'); const activeLinks = require('./_utilities/active-links.cjs'); const anchorHeadings = require('./_utilities/anchor-headings.cjs'); @@ -44,6 +44,7 @@ module.exports = function (eleventyConfig) image: 'images/logo.svg', version: customElementsManifest.package.version, components: allComponents, + shoelaceVersion: getShoelaceVersion(), cdndir, npmdir }); @@ -61,15 +62,7 @@ module.exports = function (eleventyConfig) //eleventyConfig.addPassthroughCopy({"../../api/js": "assets/scripts/chunks"}); eleventyConfig.addPassthroughCopy({"../../api/js/etemplate/etemplate2.js": "assets/scripts/etemplate/etemplate2.js"}); - // Shoelace - eleventyConfig.addPassthroughCopy({"../../node_modules/@shoelace-style/shoelace/dist/": "assets/shoelace/"}); - /* - eleventyConfig.addPassthroughCopy({"../../node_modules/@shoelace-style/shoelace/dist/shoelace-autoloader.js": "assets/shoelace/shoelace-autoloader.js"}); - eleventyConfig.addPassthroughCopy({"../../node_modules/@shoelace-style/shoelace/dist/themes/*": "assets/shoelace/themes/"}); - eleventyConfig.addPassthroughCopy({"../../node_modules/@shoelace-style/shoelace/dist/chunks/*": "assets/shoelace/chunks/"}); - eleventyConfig.addPassthroughCopy({"../../node_modules/@shoelace-style/shoelace/dist/assets/*": "assets/shoelace/assets/"}); - eleventyConfig.addPassthroughCopy({"../../node_modules/@shoelace-style/shoelace/dist/components/*": "assets/shoelace/components/"}); - */ + // Shoelace is done via CDN in default.njk // // Copy assets