Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move mkDocs CSS and JS resource calls from template to config #508

Merged
merged 1 commit into from
Nov 13, 2023
Merged

Move mkDocs CSS and JS resource calls from template to config #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 24 additions & 2 deletions mkdocs.yml
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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 %}
Loading