Persist site

Author: bgrgicak

.github/workflows/postprocess.yml

@@ -20,6 +20,8 @@ jobs:
               run: python reindex_postprocess.py
             - name: Run PWA build
               run: python build_pwa.py
+              env:
+                  PWA_HOME_PATH: /blueprints/
             - name: Run Prettier
               run: prettier --write blueprints/**/*.json
             - name: Check for uncommitted changes

build_pwa.py

@@ -5,6 +5,7 @@
 # Define the base directory where blueprints are located
 BLUEPRINTS_DIR = 'blueprints'
 TEMPLATE_DIR = 'pwa-template'
+PWA_HOME_PATH = os.getenv('PWA_HOME_PATH', '/')
 
 def read_template(file_path):
     with open(file_path, 'r') as file:
@@ -23,12 +24,14 @@ def build_pwa_for_folder(folder_path):
     # Extract necessary fields
     title = blueprint['meta']['title']
     description = blueprint['meta']['description']
-    start_url = blueprint.get('landingPage', '/')
+    start_url = PWA_HOME_PATH + folder_path + "/"
+    slug = folder_path.split('/')[-1]
 
     # Read and format index.html template
     index_html_template = read_template(os.path.join(TEMPLATE_DIR, 'index.html'))
     index_html_content = index_html_template.replace('{{PWA_NAME}}', title)\
-                                            .replace('{{BLUEPRINT}}', json.dumps(blueprint, indent=2))
+                                            .replace('{{BLUEPRINT}}', json.dumps(blueprint, indent=2))\
+                                            .replace('{{PWA_SLUG}}', slug)
 
     with open(os.path.join(folder_path, 'index.html'), 'w') as f:
         f.write(index_html_content)

pwa-template/index.html

@@ -6,7 +6,8 @@
 		<link rel="manifest" href="manifest.json" />
         <style>
             :root {
-                --header-height: 55px;
+                --header-height: 39px;
+                --header-padding: 8px;
             }
 
             body {
@@ -19,7 +20,7 @@
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-                padding: 8px;
+                padding: var(--header-padding);
                 background-color: #1e2327;
             }
 
@@ -44,7 +45,7 @@
 
             #wp {
                 width: 100%;
-                height: calc(100vh - var(--header-height));
+                height: calc(100vh - var(--header-height) - (2 * var(--header-padding)));
                 border: 0;
             }
 
@@ -74,11 +75,7 @@
             window.addEventListener("beforeinstallprompt", (event) => {
                 event.preventDefault();
                 installPrompt = event;
-                if (isInstallHeaderHidden()) {
-                    hideInstallHeader();
-                } else {
-                    showInstallHeader();
-                }
+                showInstallHeader();
             });
             installButton.addEventListener("click", async () => {
                 if (!installPrompt) {
@@ -89,15 +86,8 @@
                 hideInstallHeader();
             });
             closeInstallButton.addEventListener("click", () => {
-                saveHideInstallHeader();
                 hideInstallHeader();
             });
-            function saveHideInstallHeader() {
-                localStorage.setItem("hideInstallHeader", "true");
-            }
-            function isInstallHeaderHidden() {
-                return localStorage.getItem("hideInstallHeader") === "true";
-            }
             function hideInstallHeader() {
                 document.body.classList.add("hide-install-header");
             }
@@ -107,12 +97,34 @@
 
             // Boot Playground
             import { startPlaygroundWeb } from "https://playground.wordpress.net/client/index.js";
+            const slug = "{{PWA_SLUG}}";
+
+            function isWordPressInstalled(slug) {
+                return localStorage.getItem(`wordpress-installed-for-${slug}`) === 'true';
+            }
+            function setWordPressInstalled(slug) {
+                localStorage.setItem(`wordpress-installed-for-${slug}`, 'true');
+            }
+            const shouldInstallWordPress = !isWordPressInstalled(slug);
             const client = await startPlaygroundWeb({
                 iframe: document.getElementById("wp"),
                 remoteUrl: `https://playground.wordpress.net/remote.html`,
+                mounts: [
+                    {
+                        mountpoint: '/wordpress',
+                        device: {
+                            type: 'opfs',
+                            path: `/pwa-sites/${slug}`,
+                        },
+                    },
+                ],
+                shouldInstallWordPress,
                 blueprint: {{BLUEPRINT}}
             });
             await client.isReady();
+            if (shouldInstallWordPress) {
+                setWordPressInstalled(slug);
+            }
 		</script>
 	</body>
 </html>