Build PWA app for each Blueprint

WordPress · Jan 6, 2025 · ef0e5d5 · ef0e5d5
1 parent fdf53ba
commit ef0e5d5
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 0 deletions.
diff --git a/.github/workflows/postprocess.yml b/.github/workflows/postprocess.yml
@@ -18,6 +18,8 @@ jobs:
               run: npm install -g prettier
             - name: Run reindex_postprocess.py
               run: python reindex_postprocess.py
+            - name: Run PWA build
+              run: python build_pwa.py
             - name: Run Prettier
               run: prettier --write blueprints/**/*.json
             - name: Check for uncommitted changes

diff --git a/build_pwa.py b/build_pwa.py
@@ -0,0 +1,63 @@
+import os
+import json
+import shutil
+
+# Define the base directory where blueprints are located
+BLUEPRINTS_DIR = 'blueprints'
+TEMPLATE_DIR = 'pwa-template'
+
+def read_template(file_path):
+    with open(file_path, 'r') as file:
+        return file.read()
+
+def build_pwa_for_folder(folder_path):
+    # Read blueprint.json
+    blueprint_path = os.path.join(folder_path, 'blueprint.json')
+    if not os.path.exists(blueprint_path):
+        print(f"Skipping {folder_path}, no blueprint.json found.")
+        return
+
+    with open(blueprint_path, 'r') as f:
+        blueprint = json.load(f)
+
+    # Extract necessary fields
+    title = blueprint['meta']['title']
+    description = blueprint['meta']['description']
+    start_url = blueprint.get('landingPage', '/')
+
+    # 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))
+
+    with open(os.path.join(folder_path, 'index.html'), 'w') as f:
+        f.write(index_html_content)
+
+    # Read and format manifest.json template
+    manifest_json_template = read_template(os.path.join(TEMPLATE_DIR, 'manifest.json'))
+    manifest_json_content = manifest_json_template.replace('{{PWA_NAME}}', title)\
+                                                  .replace('{{PWA_SHORT_NAME}}', title.split()[0])\
+                                                  .replace('{{PWA_DESCRIPTION}}', description)\
+                                                  .replace('{{PWA_START_URL}}', start_url)
+
+    with open(os.path.join(folder_path, 'manifest.json'), 'w') as f:
+        f.write(manifest_json_content)
+
+    # Ensure icons directory exists
+    icons_dir = os.path.join(folder_path, 'icons')
+    if not os.path.exists(icons_dir):
+        os.makedirs(icons_dir)
+        # Copy default icons
+        default_icons_dir = os.path.join(TEMPLATE_DIR, 'icons')
+        for icon in os.listdir(default_icons_dir):
+            shutil.copy(os.path.join(default_icons_dir, icon), icons_dir)
+
+def main():
+    # Traverse each folder in blueprints directory
+    for folder_name in os.listdir(BLUEPRINTS_DIR):
+        folder_path = os.path.join(BLUEPRINTS_DIR, folder_name)
+        if os.path.isdir(folder_path):
+            build_pwa_for_folder(folder_path)
+
+if __name__ == "__main__":
+    main()
diff --git a/pwa-template/icons/logo-192.png b/pwa-template/icons/logo-192.png
diff --git a/pwa-template/icons/logo-256.png b/pwa-template/icons/logo-256.png
diff --git a/pwa-template/icons/logo-384.png b/pwa-template/icons/logo-384.png
diff --git a/pwa-template/icons/logo-512.png b/pwa-template/icons/logo-512.png
diff --git a/pwa-template/index.html b/pwa-template/index.html
@@ -0,0 +1,61 @@
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>{{PWA_NAME}}</title>
+		<link rel="manifest" href="manifest.json" />
+	</head>
+
+	<body style="margin: 0; padding: 0">
+		<header
+			style="
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 4px;
+				height: 30px;
+				border-bottom: 1px solid #e0e0e0;
+			"
+		>
+			<h1>{{PWA_NAME}}</h1>
+			<button id="install" hidden>Install</button>
+		</header>
+		<iframe
+			id="wp"
+			style="width: 100%; height: calc(100vh - 39px); border: 0"
+		></iframe>
+		<script type="module" async>
+            /**
+             * Install PWA button
+             */
+            let installPrompt = null;
+            const installButton = document.getElementById("install");
+            window.addEventListener("beforeinstallprompt", (event) => {
+                event.preventDefault();
+                installPrompt = event;
+                installButton.removeAttribute("hidden");
+            });
+            installButton.addEventListener("click", async () => {
+                if (!installPrompt) {
+                    return;
+                }
+                const result = await installPrompt.prompt();
+                disableInAppInstallPrompt();
+            });
+
+            function disableInAppInstallPrompt() {
+                installPrompt = null;
+                installButton.setAttribute("hidden", "");
+            }
+
+            // Boot Playground
+                import { startPlaygroundWeb } from "https://playground.wordpress.net/client/index.js";
+            const client = await startPlaygroundWeb({
+                iframe: document.getElementById("wp"),
+                remoteUrl: `https://playground.wordpress.net/remote.html`,
+                blueprint: {{BLUEPRINT}}
+            });
+            await client.isReady();
+		</script>
+	</body>
+</html>
diff --git a/pwa-template/manifest.json b/pwa-template/manifest.json
@@ -0,0 +1,35 @@
+{
+    "name": "{{PWA_NAME}}",
+    "short_name": "{{PWA_SHORT_NAME}}",
+    "description": "{{PWA_DESCRIPTION}}",
+    "start_url": "{{PWA_START_URL}}",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#0073aa",
+    "categories": [
+        "rss",
+        "social web"
+    ],
+    "icons": [
+        {
+            "src": "icons/logo-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/logo-256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/logo-384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/logo-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}