Skip to content

Commit

Permalink
Move mkDocs CSS and JS resource calls from template to config
Browse files Browse the repository at this point in the history
  • Loading branch information
adamkudrna committed Nov 13, 2023
1 parent 4d292ba commit 1154d8f
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 33 deletions.
26 changes: 24 additions & 2 deletions mkdocs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
8 changes: 3 additions & 5 deletions src/docs/_assets/stylesheets/extra.css
Original file line number Diff line number Diff line change
@@ -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/ */
Expand All @@ -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 */
Expand Down
30 changes: 4 additions & 26 deletions src/docs/_overrides/main.html
Original file line number Diff line number Diff line change
@@ -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 %}

0 comments on commit 1154d8f

Please sign in to comment.