Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions .github/workflows/demo-gh-pages.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
name: Deploy the demo to GitHub Pages

on:
push:
branches: [ "release" ]
pull_request:
branches: [ "release" ]

# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false

jobs:
# Build job
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Pages
uses: actions/configure-pages@v5

- name: Set up JDK 17
uses: actions/setup-java@v4
with:
java-version: "17"
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:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
16 changes: 16 additions & 0 deletions demo/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -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"))
}
45 changes: 45 additions & 0 deletions demo/side-by-side-site/index.html
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion demo/src/jsMain/resources/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion demo/src/wasmJsMain/resources/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading