Move mkDocs CSS and JS resource calls from template to config

Author: adamkudrna

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/[email protected]/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/[email protected]/babel.min.js
+  - https://unpkg.com/[email protected]/umd/react.development.js
+  - https://unpkg.com/[email protected]/umd/react-dom.development.js
+  - https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.core.umd.min.js
+  - https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.dom.umd.min.js
+  - https://unpkg.com/@floating-ui/[email protected]/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/[email protected]/public/generated/bundle.js
+
+  # Then load non-Docoff code highlighiting
+  - https://unpkg.com/[email protected]/components/prism-core.min.js
+  - https://unpkg.com/[email protected]/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'

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 `<docoff-react-preview>` and `<docoff-react-base>` 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 `<docoff-react-preview>` 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 `<docoff-placeholder>` element */

src/docs/_overrides/main.html

@@ -1,30 +1,8 @@
 {% extends "base.html" %}
 
-{% block libs %}
-  <!-- We need to load CSS custom properties to make them accessible in the document root (outside shadowDOM) so we can preview colors etc. -->
-  <link rel="stylesheet" href="/docs/_assets/generated/docs-custom-properties.css" />
-
-  <!-- We load Prism by hand to match the style used by Docoff -->
-  <link rel="stylesheet" href="https://unpkg.com/[email protected]/themes/prism-twilight.min.css" />
-{% endblock %}
-
-{% block scripts %}
+{% block site_meta %}
   {{ super() }}
-  <!-- First load dependencies -->
-  <script crossorigin src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
-  <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
-  <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
-  <script crossorigin src="https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.core.umd.min.js"></script>
-  <script crossorigin src="https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.dom.umd.min.js"></script>
-  <script crossorigin src="https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.react-dom.umd.min.js"></script>
-  <script src="/docs/_assets/generated/react-ui.js" type="application/javascript"></script>
-  <script src="/docs/_assets/js/ruiIcon.js" type="application/javascript"></script>
-  <script src="/docs/_assets/js/ruiSwatch.js" type="application/javascript"></script>
-
-  <!-- Then load and init Docoff -->
-  <script crossorigin src="https://unpkg.com/@react-ui-org/[email protected]/public/generated/bundle.js"></script>
-
-  <!-- Then load non-Docoff code highlighiting -->
-  <script src="https://unpkg.com/[email protected]/components/prism-core.min.js"></script>
-  <script src="https://unpkg.com/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link rel="preconnect" href="https://unpkg.com" />
 {% endblock %}