From 1154d8f552646505e16b48cf03a7e8bdd51e7bac Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Mon, 30 Oct 2023 18:22:06 +0100 Subject: [PATCH] Move mkDocs CSS and JS resource calls from template to config --- mkdocs.yml | 26 ++++++++++++++++++++-- src/docs/_assets/stylesheets/extra.css | 8 +++---- src/docs/_overrides/main.html | 30 ++++---------------------- 3 files changed, 31 insertions(+), 33 deletions(-) diff --git a/mkdocs.yml b/mkdocs.yml index 144ebde6..b9aa3477 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -45,9 +45,31 @@ theme: - navigation.sections - navigation.footer +# Additional CSS. Mind the order! extra_css: - # CSS Tweaks - - docs/_assets/stylesheets/extra.css + - https://unpkg.com/prismjs@1.29.0/themes/prism-twilight.min.css # Prism JS syntax highlighting + - docs/_assets/stylesheets/extra.css # mkDocs theme tweaks + - docs/_assets/generated/docs-custom-properties.css # Load React UI CSS custom properties to make them accessible in the document root (outside shadowDOM) so we can preview colors etc. + +# Additional JS. Mind the order! +extra_javascript: + # First load dependencies + - https://unpkg.com/@babel/standalone@7.20.15/babel.min.js + - https://unpkg.com/react@17.0.2/umd/react.development.js + - https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js + - https://unpkg.com/@floating-ui/core@1.0.0/dist/floating-ui.core.umd.min.js + - https://unpkg.com/@floating-ui/dom@1.0.0/dist/floating-ui.dom.umd.min.js + - https://unpkg.com/@floating-ui/react-dom@1.0.0/dist/floating-ui.react-dom.umd.min.js + - docs/_assets/generated/react-ui.js + - docs/_assets/js/ruiIcon.js + - docs/_assets/js/ruiSwatch.js + + # Then load and init Docoff + - https://unpkg.com/@react-ui-org/docoff@0.5.4/public/generated/bundle.js + + # Then load non-Docoff code highlighiting + - https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js + - https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js # Must be open to external connections since MkDocs run in a docker container dev_addr: '0.0.0.0:8000' diff --git a/src/docs/_assets/stylesheets/extra.css b/src/docs/_assets/stylesheets/extra.css index ea8fe2e8..1b5e3710 100644 --- a/src/docs/_assets/stylesheets/extra.css +++ b/src/docs/_assets/stylesheets/extra.css @@ -1,5 +1,3 @@ -@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap'); - :root { /* Visual configuration of the `` and `` code */ /* The Prism theme CSS file, for options see: https://unpkg.com/browse/prismjs/themes/ */ @@ -10,13 +8,13 @@ --docoff-code-font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace; /* Visual configuration of the `` live preview */ - --docoff-preview-border-color: rgb(206, 212, 222); + --docoff-preview-border-color: #ced4de; --docoff-preview-border-radius: 0.35em; - /* To simplify multiple component presentation we add margin to all top level elements*/ + /* To simplify multiple component presentation we add margin to all top level elements */ --docoff-preview-children-margin: 0.25em; /* To improve component presentation we add padding inside the shadow DOM */ --docoff-preview-padding: 1em; - /*Custom preview CSS file, typically this would be the CSS of your component */ + /* Custom preview CSS file, typically this would be the CSS of your component */ --docoff-preview-css: /docs/_assets/generated/react-ui.css; /* Visual configuration of the `` element */ diff --git a/src/docs/_overrides/main.html b/src/docs/_overrides/main.html index f5f5aecb..2f787ad3 100644 --- a/src/docs/_overrides/main.html +++ b/src/docs/_overrides/main.html @@ -1,30 +1,8 @@ {% extends "base.html" %} -{% block libs %} - - - - - -{% endblock %} - -{% block scripts %} +{% block site_meta %} {{ super() }} - - - - - - - - - - - - - - - - - + + + {% endblock %}