Skip to content

Commit

Permalink
fix: load theme earlier when using SSG (#557)
Browse files Browse the repository at this point in the history 
* fix: load theme earlier when using SSG

* implement suggestions from code review

* Apply suggestions from code review

Co-authored-by: Maarten Breddels <[email protected]>

---------

Co-authored-by: Maarten Breddels <[email protected]>
  • Loading branch information
@iisakkirotko @maartenbreddels
iisakkirotko and maartenbreddels authored Mar 19, 2024
1 parent 61f6d64 commit 3aaa4b3
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 45 deletions.
4 changes: 4 additions & 0 deletions packages/solara-enterprise/solara_enterprise/ssg.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,10 @@ def _ssg_data(html: str) -> Optional[SSGData]:
rendered_styles = soup.find_all("style")
for style in rendered_styles:
style_html = str(style)
# skip css that was already in the template so we don't include it multiple times
# or such that we do not include the CSS from the theme as ssg build time
if 'class="solara-template-css"' in style_html:
continue
# in case we want to skip the mathjax css
# if "MJXZERO" in style_html:
# continue
Expand Down
5 changes: 2 additions & 3 deletions solara/server/server.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
import ipywidgets
import jinja2
import requests

import solara
import solara.routing
import solara.settings
Expand Down Expand Up @@ -302,9 +301,9 @@ def include_css(path: str) -> Markup:
code = content_utf8
elif embed:
content_utf8 = content.decode("utf-8")
code = f"<style>/*\npath={path}\n*/\n{content_utf8}</style>"
code = f'<style class="solara-template-css">/*\npath={path}\n*/\n{content_utf8}</style>'
else:
code = f'<link rel="stylesheet" type="text/css" href="{url}">'
code = f'<link rel="stylesheet" type="text/css" href="{url}" class="solara-template-css">'
return Markup(code)

def include_js(path: str, module=False) -> Markup:
Expand Down
104 changes: 62 additions & 42 deletions solara/server/templates/solara.html.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,11 @@

{% block header %}


{{ pre_rendered_css | safe }}

{% if vue3 == True %}
<link href="{{cdn}}/@widgetti/[email protected]/dist/main{{ipywidget_major_version}}.css" rel="stylesheet"></link>
<link href="{{cdn}}/@widgetti/[email protected]/dist/main{{ipywidget_major_version}}.css" rel="stylesheet" class="solara-template-css"></link>
{% else %}
<link href="{{cdn}}/@widgetti/[email protected]/dist/main{{ipywidget_major_version}}.css" rel="stylesheet"></link>
<link href="{{cdn}}/@widgetti/[email protected]/dist/main{{ipywidget_major_version}}.css" rel="stylesheet" class="solara-template-css"></link>
{% endif %}


Expand All @@ -27,8 +25,7 @@
{{ resources.include_css("/static/highlight.css") }}
{{ resources.include_css("/static/highlight-dark.css") }}
{{ resources.include_css("/static/assets/style.css") }}
<style id="jupyter-theme-css">
{{ resources.include_css("/static/assets/theme-"~theme.variant~".css") }}
<style id="jupyter-theme-css" class="solara-template-css">
</style>
{{ resources.include_css("/static/assets/custom.css") }}

Expand All @@ -38,9 +35,24 @@
"kernelId": "1234"
}
</script>
<style>
<style class="solara-template-css">
{% include "loader-"~theme.loader~".css" %}
</style>
<!-- Include Vuetify background colours so static html from SSG renders the right general colour theme
before first render. We remove these after Vue takes over rendering to avoid collisions -->
<style id="pre-render-theme">
.theme--light .v-sheet {
background-color: #fff;
border-color: #fff;
color: rgba(0,0,0,.87)
}
.theme--dark .v-sheet {
background-color: #1e1e1e;
border-color: #1e1e1e;
color: #fff
}
</style>
{% endblock header %}
</head>
{% raw -%}
Expand Down Expand Up @@ -175,6 +187,38 @@
{# next div is used in ssg code to see if vue took over rendering #}
<div id="pre-rendered-html-present" style="display: none"></div>
</div>
<script>
var theme = {{ theme | tojson | safe }}
function getThemeVariant() {
if (localStorage.getItem(':solara:theme.variant')) {
return JSON.parse(localStorage.getItem(':solara:theme.variant'))
}
return theme.variant;
}
if (localStorage.getItem(':solara:theme.variant')) {
theme.variant = JSON.parse(localStorage.getItem(':solara:theme.variant'))
}
function prefersDarkScheme() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
}
function inDarkMode() {
if (getThemeVariant() == 'auto') {
return prefersDarkScheme();
}
else {
return getThemeVariant() == 'dark';
}
}
// Init theme
let appContainer = document.getElementById('app');
if (inDarkMode()) {
appContainer.classList.remove('theme--light');
appContainer.classList.add('theme--dark');
} else {
appContainer.classList.remove('theme--dark');
appContainer.classList.add('theme--light');
}
</script>
{% block after_pre_rendered_html %}{% endblock %}
{% if vue3 == True %}
<link href="{{cdn}}/@widgetti/[email protected]/dist/fonts.css" rel="stylesheet"></link>
Expand All @@ -194,6 +238,12 @@
<script>
solara.rootPath = {{ root_path | tojson | safe}};
console.log("rootPath", solara.rootPath);
async function changeThemeCSS(theme) {
let css = await fetch(`${solara.rootPath}/static/assets/theme-${theme}.css`).then(r => r.text());
document.getElementById('jupyter-theme-css').innerHTML = css;
}
changeThemeCSS(inDarkMode() ? 'dark' : 'light');
</script>

{{ resources.include_js("/static/assets/custom.js") }}
Expand All @@ -208,27 +258,6 @@
solara.production = {{ production | tojson | safe }};
const themeVariants = ['light', 'dark', 'auto']
solara.preRendered = {{ pre_rendered_html | safe | length | tojson }} > 0
var theme = {{ theme | tojson | safe }}
function getThemeVariant() {
if (localStorage.getItem(':solara:theme.variant')) {
return JSON.parse(localStorage.getItem(':solara:theme.variant'))
}
return theme.variant;
}
if (localStorage.getItem(':solara:theme.variant')) {
theme.variant = JSON.parse(localStorage.getItem(':solara:theme.variant'))
}
function prefersDarkScheme() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
}
function inDarkMode() {
if (getThemeVariant() == 'auto') {
return prefersDarkScheme();
}
else {
return getThemeVariant() == 'dark';
}
}
</script>

<script>
Expand Down Expand Up @@ -256,11 +285,7 @@
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
this.$vuetify.theme.dark = inDarkMode();
});
if (this.$vuetify.theme.dark) {
this.changeThemeCSS('dark');
} else {
this.changeThemeCSS('light');
}
document.getElementById('pre-render-theme').remove();
},
methods: {
stateReset() {
Expand All @@ -275,10 +300,6 @@
reload() {
location.reload();
},
async changeThemeCSS(theme) {
let css = await fetch(`${solara.rootPath}/static/assets/theme-${theme}.css`).then(r => r.text());
document.getElementById('jupyter-theme-css').innerHTML = css;
}
},
watch: {
kernelBusy: function (value) {
Expand Down Expand Up @@ -325,15 +346,14 @@
}
},
'$vuetify.theme.dark': function (value) {
let app = document.getElementById('app');
if ( value ) {
this.changeThemeCSS('dark');
app.classList.remove('theme--light');
app.classList.add('theme--dark');
appContainer.classList.remove('theme--light');
appContainer.classList.add('theme--dark');
} else {
this.changeThemeCSS('light');
app.classList.remove('theme--dark');
app.classList.add('theme--light');
appContainer.classList.remove('theme--dark');
appContainer.classList.add('theme--light');
}
}
},
Expand Down

0 comments on commit 3aaa4b3

Please sign in to comment.