bookish-press 0.5.23 → 0.5.25

package/dist/components/page/Edition.svelte

@@ -29,6 +29,8 @@ $: {
     // Set the theme, whatever it is, and change it when the edition changes
     setTheme(edition.getTheme() ?? BookishTheme);
 }
+// The CSS to set on the edition.
+let themeCSS;
 // Set the theme on mount.
 onMount(() => {
     setTheme(edition.getTheme() ?? BookishTheme);
@@ -36,74 +38,25 @@ onMount(() => {
 // Redirect old hash routes by simply replacing their hash before routing.
 if (typeof window !== 'undefined' && window.location.hash.startsWith('#/'))
     goto(location.hash.replace('#', ''));
-/** Given a theme, sets the appropriate CSS rules in the browser to apply the theme.*/
+/** Given a theme, sets the appropriate CSS rules in the browser to apply the theme. */
 function setTheme(theme) {
-    // Allow for prerendering; rely on mount callback to set the theme.
-    if (typeof document === 'undefined')
-        return;
-    // If the theme is being unset, make sure we've removed any overrding style declaration.
-    // This let's the default theme kick in.
-    let themeTagImports = document.getElementById('bookish-theme-imports');
-    let themeTagCSS = document.getElementById('bookish-theme');
-    // We only want to set it if it's actually different than what's currently set.
-    // Otherwise during editing we get lots of jittery changes on each edit, because the
-    // whole edition is rerendering. To check this, we set a data attribute on the style tag containing
-    // a stringify of the theme set. We do this separately for the imports, since they can have more
-    // major changes than the spacing and color sizes, changing fonts especially.
-    const themeTagCSSValue = themeTagCSS?.dataset.css;
-    const themeTagImportsValue = themeTagImports?.dataset.imports;
-    const newThemeTagCSSValue = JSON.stringify(theme);
-    const newThemeTagImportsValue = JSON.stringify(theme?.imports);
-    if (theme !== null) {
-        // If the imports changed, update theme.
-        if (themeTagImportsValue !== newThemeTagImportsValue) {
-            // If it's being set, create a new style tag.
-            const newThemeImportsTag = document.createElement('style');
-            // Give it an ID so we can remove it later.
-            newThemeImportsTag.setAttribute('id', 'bookish-theme-imports');
-            newThemeImportsTag.dataset.imports = newThemeTagImportsValue;
-            // Insert any import statements, then any rules.
-            const css = `${(theme.imports ?? [])
-                .map((url) => `@import url(${url});`)
-                .join('\n')}`;
-            newThemeImportsTag.appendChild(document.createTextNode(css));
-            document.head.appendChild(newThemeImportsTag);
-            // Remove the old tag
-            themeTagImports?.remove();
-        }
-        // If the rules changed, update them.
-        if (themeTagCSSValue !== newThemeTagCSSValue) {
-            // If it's being set, create a new style tag.
-            const newThemeCSSTag = document.createElement('style');
-            // Give it an ID so we can remove it later.
-            newThemeCSSTag.setAttribute('id', 'bookish-theme');
-            newThemeCSSTag.dataset.css = newThemeTagCSSValue;
-            // Insert any import statements, then any rules.
-            const css = `
-                    ${(theme.imports ?? [])
-                .map((url) => `@import url(${url});`)
-                .join('\n')}
-                    .bookish {
-                        ${theme.light ? toRules(theme.light) : ''}
-                        ${theme.fonts ? toRules(theme.fonts) : ''}
-                        ${theme.sizes ? toRules(theme.sizes) : ''}
-                        ${theme.weights ? toRules(theme.weights) : ''}
-                        ${theme.spacing ? toRules(theme.spacing) : ''}
-                    }
-                    .dark {
-                        ${theme.dark ? toRules(theme.dark) : ''}
-                    }`;
-            newThemeCSSTag.appendChild(document.createTextNode(css));
-            document.head.appendChild(newThemeCSSTag);
-            // Remove the old tag
-            themeTagCSS?.remove();
-        }
-    }
-    else {
-        // Remove the old tags, unsetting the theme.
-        themeTagImports?.remove();
-        themeTagCSS?.remove();
-    }
+    if (theme === null)
+        theme = BookishTheme;
+    themeCSS = `
+            ${(theme.imports ?? [])
+        .map((url) => `@import url(${url});`)
+        .join('\n')}
+            .bookish {
+                ${theme.light ? toRules(theme.light) : ''}
+                ${theme.fonts ? toRules(theme.fonts) : ''}
+                ${theme.sizes ? toRules(theme.sizes) : ''}
+                ${theme.weights ? toRules(theme.weights) : ''}
+                ${theme.spacing ? toRules(theme.spacing) : ''}
+            }
+            .dark {
+                ${theme.dark ? toRules(theme.dark) : ''}
+            }
+        `;
 }
 function toRules(set) {
     return Object.keys(set)
@@ -124,6 +77,19 @@ function toRules(set) {
 }
 </script>
 
+<!-- Keep the imports up to date -->
+<svelte:head>
+    {@html '<' + `style>${themeCSS}</style>`}
+
+    <meta property="og:title" content={edition.getTitle()} />
+    <meta property="og:image" content={edition.getImage('cover')} />
+    <meta property="og:description" content={edition.getDescription()} />
+    <!-- <meta
+        property="og:url"
+        content="https://criticallyconsciouscomputing.org"
+    /> -->
+</svelte:head>
+
 <main class="bookish {$darkMode ? ' dark' : ''}">
     <slot />
 </main>

package/dist/components/page/Page.svelte

@@ -1,11 +1,8 @@
 <script>import { onMount } from 'svelte';
-import { building } from '$app/environment';
 import Loading from './Loading.svelte';
 export let title;
 export let afterLoaded = undefined;
-// If we're building, we're loaded. This ensures that prerendering doesn't get blocked.
-// See: https://kit.svelte.dev/docs/modules
-let loaded = building;
+let loaded = false;
 let lastHeight = 0;
 let intervalID = null;
 let mountTime = Date.now();

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "bookish-press",
     "private": false,
-    "version": "0.5.23",
+    "version": "0.5.25",
     "type": "module",
     "description": "A platform for reading and writing readable, accessible, beautiful online books.",
     "license": "MIT",