Skip to content

Commit 1154d8f

Browse files
committed
Move mkDocs CSS and JS resource calls from template to config
1 parent 4d292ba commit 1154d8f

File tree

3 files changed

+31
-33
lines changed

3 files changed

+31
-33
lines changed

mkdocs.yml

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,31 @@ theme:
4545
- navigation.sections
4646
- navigation.footer
4747

48+
# Additional CSS. Mind the order!
4849
extra_css:
49-
# CSS Tweaks
50-
- docs/_assets/stylesheets/extra.css
50+
- https://unpkg.com/[email protected]/themes/prism-twilight.min.css # Prism JS syntax highlighting
51+
- docs/_assets/stylesheets/extra.css # mkDocs theme tweaks
52+
- 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.
53+
54+
# Additional JS. Mind the order!
55+
extra_javascript:
56+
# First load dependencies
57+
- https://unpkg.com/@babel/[email protected]/babel.min.js
58+
- https://unpkg.com/[email protected]/umd/react.development.js
59+
- https://unpkg.com/[email protected]/umd/react-dom.development.js
60+
- https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.core.umd.min.js
61+
- https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.dom.umd.min.js
62+
- https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.react-dom.umd.min.js
63+
- docs/_assets/generated/react-ui.js
64+
- docs/_assets/js/ruiIcon.js
65+
- docs/_assets/js/ruiSwatch.js
66+
67+
# Then load and init Docoff
68+
- https://unpkg.com/@react-ui-org/[email protected]/public/generated/bundle.js
69+
70+
# Then load non-Docoff code highlighiting
71+
- https://unpkg.com/[email protected]/components/prism-core.min.js
72+
- https://unpkg.com/[email protected]/plugins/autoloader/prism-autoloader.min.js
5173

5274
# Must be open to external connections since MkDocs run in a docker container
5375
dev_addr: '0.0.0.0:8000'

src/docs/_assets/stylesheets/extra.css

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@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');
2-
31
:root {
42
/* Visual configuration of the `<docoff-react-preview>` and `<docoff-react-base>` code */
53
/* The Prism theme CSS file, for options see: https://unpkg.com/browse/prismjs/themes/ */
@@ -10,13 +8,13 @@
108
--docoff-code-font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
119

1210
/* Visual configuration of the `<docoff-react-preview>` live preview */
13-
--docoff-preview-border-color: rgb(206, 212, 222);
11+
--docoff-preview-border-color: #ced4de;
1412
--docoff-preview-border-radius: 0.35em;
15-
/* To simplify multiple component presentation we add margin to all top level elements*/
13+
/* To simplify multiple component presentation we add margin to all top level elements */
1614
--docoff-preview-children-margin: 0.25em;
1715
/* To improve component presentation we add padding inside the shadow DOM */
1816
--docoff-preview-padding: 1em;
19-
/*Custom preview CSS file, typically this would be the CSS of your component */
17+
/* Custom preview CSS file, typically this would be the CSS of your component */
2018
--docoff-preview-css: /docs/_assets/generated/react-ui.css;
2119

2220
/* Visual configuration of the `<docoff-placeholder>` element */

src/docs/_overrides/main.html

Lines changed: 4 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,8 @@
11
{% extends "base.html" %}
22

3-
{% block libs %}
4-
<!-- We need to load CSS custom properties to make them accessible in the document root (outside shadowDOM) so we can preview colors etc. -->
5-
<link rel="stylesheet" href="/docs/_assets/generated/docs-custom-properties.css" />
6-
7-
<!-- We load Prism by hand to match the style used by Docoff -->
8-
<link rel="stylesheet" href="https://unpkg.com/[email protected]/themes/prism-twilight.min.css" />
9-
{% endblock %}
10-
11-
{% block scripts %}
3+
{% block site_meta %}
124
{{ super() }}
13-
<!-- First load dependencies -->
14-
<script crossorigin src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
15-
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
16-
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
17-
<script crossorigin src="https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.core.umd.min.js"></script>
18-
<script crossorigin src="https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.dom.umd.min.js"></script>
19-
<script crossorigin src="https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.react-dom.umd.min.js"></script>
20-
<script src="/docs/_assets/generated/react-ui.js" type="application/javascript"></script>
21-
<script src="/docs/_assets/js/ruiIcon.js" type="application/javascript"></script>
22-
<script src="/docs/_assets/js/ruiSwatch.js" type="application/javascript"></script>
23-
24-
<!-- Then load and init Docoff -->
25-
<script crossorigin src="https://unpkg.com/@react-ui-org/[email protected]/public/generated/bundle.js"></script>
26-
27-
<!-- Then load non-Docoff code highlighiting -->
28-
<script src="https://unpkg.com/[email protected]/components/prism-core.min.js"></script>
29-
<script src="https://unpkg.com/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script>
5+
<link rel="preconnect" href="https://fonts.googleapis.com" />
6+
<link rel="preconnect" href="https://fonts.gstatic.com" />
7+
<link rel="preconnect" href="https://unpkg.com" />
308
{% endblock %}

0 commit comments

Comments
 (0)