extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 14:41:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Docs: Get the Shoelace widgets working on docs site

Browse Source 
Using their CDN with our Shoelace version
This commit is contained in:
nathan 2023-10-27 09:21:27 -06:00
parent 305aaad22c
commit 6e0301d249
4 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
doc/etemplate2/_includes/default.njk
View File

@ -3,6 +3,7 @@
lang="en"
data-layout="{{ layout }}"
data-egroupware-version="{{ meta.version }}"
data-shoelace-version="{{ meta.shoelaceVersion }}"
>
<head>
{# Metadata #}
@ -32,14 +33,13 @@
{# API Viewer Element #}
<script type="module" src="https://jspm.dev/api-viewer-element"></script>
{# Shoelace #}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.shoelaceVersion }}/cdn/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.shoelaceVersion }}/cdn/shoelace-autoloader.js"></script>
{# EGroupware #}
<!--<script src="{{ assetUrl('scripts/etemplate/etemplate2.js') }}" type="module"></script>-->
{# Shoelace #}
<link rel="stylesheet" href="{{ assetUrl('shoelace/themes/light.css') }}" />
<link rel="stylesheet" href="{{ assetUrl('shoelace/themes/dark.css') }}" />
<script type="module" src="{{ assetUrl('shoelace/shoelace.js') }}"></script>
{# Set the initial theme and menu states here to prevent flashing #}
<script>
(() => {
@ -109,7 +109,7 @@
<sl-button size="small" class="repo-button repo-button--star" href="https://github.com/EGroupware/egroupware/stargazers" target="_blank">
<sl-icon slot="prefix" name="star-fill"></sl-icon> Star
</sl-button>
<sl-button size="small" class="repo-button repo-button--twitter" href="https://egroupware.org" target="_blank">
<sl-button size="small" class="repo-button" href="https://egroupware.org" target="_blank">
<sl-icon slot="prefix" name="box-arrow-up-right"></sl-icon> EGroupware
</sl-button>
</div>

9
doc/etemplate2/_utilities/cem.cjs
View File

@ -1,4 +1,5 @@
const customElementsManifest = require('../../dist/custom-elements.json');
const fs = require('fs');
//
// Export it here so we can import it elsewhere and use the same version
@ -87,3 +88,11 @@ module.exports.getAllComponents = function ()
return 0;
});
};
module.exports.getShoelaceVersion = function ()
{
const shoelace = "@shoelace-style/shoelace"
const package = JSON.parse(fs.readFileSync('../../package.json', "utf8")) || {dependencies: {}}
return package.dependencies[shoelace] || "";
}

10
doc/etemplate2/assets/scripts/code-previews.js
View File

@ -81,6 +81,7 @@
}
const egwVersion = document.documentElement.getAttribute('data-egroupware-version');
const shoelaceVersion = document.documentElement.getAttribute('data-shoelace-version');
const reactVersion = '18.2.0';
const cdndir = 'cdn';
const npmdir = 'dist';
@ -218,7 +219,7 @@
if (!isReact)
{
htmlTemplate =
`<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${egwVersion}/${cdndir}/shoelace.js"></script>\n` +
`<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${shoelaceVersion}/cdn/shoelace.js"></script>\n` +
`\n${htmlExample}`;
jsTemplate = '';
}
@ -228,12 +229,11 @@
{
htmlTemplate = '<div id="root"></div>';
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(<App />, 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' +

13
doc/etemplate2/eleventy.config.cjs
View File

@ -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