Add a "side by side" site distribution to the demo and publish it to GitHub Pages

ShreckYe · ShreckYe · commit 1e4a7112979a · 2024-11-04T04:44:33.000+08:00
A corresponding commit: huanshankeji/gradle-common@642cdea
diff --git a/.github/workflows/demo-gh-pages.yml b/.github/workflows/demo-gh-pages.yml
@@ -30,13 +30,23 @@ jobs:
         uses: actions/checkout@v4
       - name: Setup Pages
         uses: actions/configure-pages@v5
-      - name: Build with Jekyll
-        uses: actions/jekyll-build-pages@v1
+
+      - name: Set up JDK 8
+        uses: actions/setup-java@v4
         with:
-          source: ./
-          destination: ./_site
+          java-version: "8"
+          distribution: "temurin"
+
+      - name: Setup Gradle
+        uses: gradle/actions/setup-gradle@v4
+
+      - name: Build the distribution with Gradle Wrapper
+        run: ./gradlew :demo:sideBySideBrowserDistribution
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
+        with:
+          path: demo/build/dist/sideBySide/productionExecutable/
 
   # Deployment job
   deploy:
diff --git a/demo/build.gradle.kts b/demo/build.gradle.kts
@@ -119,3 +119,19 @@ android {
         debugImplementation(compose.uiTooling)
     }
 }
+
+val jsBrowserDistribution by tasks.getting(Copy::class)
+val wasmJsBrowserDistribution by tasks.getting(Copy::class)
+
+tasks.register<Sync>("sideBySideBrowserDistribution") {
+    group = "kotlin browser"
+
+    into(layout.buildDirectory.dir("dist/sideBySide/productionExecutable"))
+    from(jsBrowserDistribution) {
+        into("js-dom")
+    }
+    from(wasmJsBrowserDistribution) {
+        into("wasm-js-canvas")
+    }
+    from(projectDir.resolve("side-by-side-site"))
+}
diff --git a/demo/side-by-side-site/index.html b/demo/side-by-side-site/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
+    <meta charset="UTF-8">
+    <title>Side by side - Compose Multiplatform Material demo</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <style>
+        body {
+            margin: 0;
+            height: 100vh;
+        }
+
+        .row {
+            display: flex;
+            flex-direction: row;
+            height: 100%;
+        }
+
+        .column {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .flex-grow-1 {
+            flex-grow: 1;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="row">
+        <div class="flex-grow-1 column">
+            <h2>JS DOM / Compose HTML</h2>
+            <embed class="flex-grow-1" src="js-dom/index.html">
+        </div>
+        <div class="flex-grow-1 column">
+            <h2>Wasm JS canvas / <code>androidx.compose</code></h2>
+            <embed class="flex-grow-1" src="wasm-js-canvas/index.html">
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/demo/src/jsMain/resources/index.html b/demo/src/jsMain/resources/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta charset="UTF-8">
-    <title>Compose Multiplatform Material demo</title>
+    <title>JS DOM - Compose Multiplatform Material demo</title>
     <meta content="width=device-width, initial-scale=1" name="viewport">
     <style>
         body {
diff --git a/demo/src/wasmJsMain/resources/index.html b/demo/src/wasmJsMain/resources/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Compose Multiplatform Material demo</title>
+    <title>Wasm JS canvas - Compose Multiplatform Material demo</title>
     <link type="text/css" rel="stylesheet" href="styles.css">
     <script src="app.js" type="application/javascript"></script>
 </head>
