Skip to content

Commit c0d9e48

Browse files
aaronfrankeaaronfranke
authored
Merge pull request #582 from Calinou/deploy-html5-demos
Deploy exported HTML5 demos to GitHub Pages
2 parents fc03211 + 36db05c commit c0d9e48

File tree

6 files changed

+249
-0
lines changed

6 files changed

+249
-0
lines changed

‎.github/dist/.nojekyll‎

Whitespace-only changes.

‎.github/dist/export_presets.cfg‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
[preset.0]
2+
3+
name="HTML5"
4+
platform="HTML5"
5+
runnable=true
6+
custom_features=""
7+
export_filter="all_resources"
8+
include_filter=""
9+
exclude_filter=""
10+
export_path=""
11+
script_export_mode=1
12+
script_encryption_key=""
13+
14+
[preset.0.options]
15+
16+
custom_template/debug=""
17+
custom_template/release=""
18+
variant/export_type=0
19+
vram_texture_compression/for_desktop=true
20+
vram_texture_compression/for_mobile=false
21+
html/custom_html_shell=""
22+
html/head_include=""
23+
html/full_window_size=true

‎.github/dist/footer.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!-- The list of demos will be inserted above by the CI process. -->
2+
</ul>
3+
<h2>Unavailable demos</h2>
4+
<ul>
5+
<li><code>2d/hdr/</code>: Not supported on HTML5 yet.
6+
<li><code>3d/voxel/</code>: Not supported on HTML5 yet.
7+
<li><code>audio/device_changer/</code>: Not supported on HTML5 due to browser limitations.
8+
<li><code>loading/background_load/</code>: Not supported on HTML5 yet.
9+
<li><code>loading/multiple_threads_loading/</code>: Not supported on HTML5 yet.
10+
<li><code>loading/threads/</code>: Not supported on HTML5 yet.
11+
<li><code>misc/matrix_transform/</code>: Results are only visible in the editor.
12+
<li><code>mobile/android_iap/</code>: Only relevant on native Android.
13+
<li><code>mobile/sensors/</code>: Not supported on HTML5 yet.
14+
<li><code>mono/*/</code>: Not available yet (requires Mono-enabled HTML5 build).</li>
15+
<li><code>networking/*/</code>: Doesn't make sense to be hosted on a static host, as the server must be hosted on the same origin due to the browser's same-origin policy.</li>
16+
<li><code>plugins/*/</code>: Only effective within the editor.</li>
17+
</ul>
18+
</body>
19+
</html>

‎.github/dist/header.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Godot demos exported to HTML5</title>
7+
<style>
8+
:root {
9+
--background-color: #fff;
10+
--text-color: #222;
11+
--link-color: hsl(220, 100%, 45%);
12+
--link-underline-color: hsla(220, 100%, 45%, 0.3);
13+
}
14+
15+
@media (prefers-color-scheme: dark) {
16+
:root {
17+
--background-color: #222;
18+
--text-color: #eee;
19+
--link-color: hsl(200, 100%, 70%);
20+
--link-underline-color: hsla(200, 100%, 70%, 0.3);
21+
}
22+
}
23+
24+
*:focus {
25+
/* More visible outline for better keyboard navigation. */
26+
outline: 0.125rem solid hsl(220, 100%, 62.5%);
27+
/* Make the outline always appear above other elements. */
28+
position: relative;
29+
}
30+
31+
html {
32+
background-color: var(--background-color);
33+
color: var(--text-color);
34+
}
35+
36+
body {
37+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
38+
max-width: 50rem;
39+
margin: 0 auto;
40+
padding: 0.75rem;
41+
line-height: 1.618rem;
42+
}
43+
44+
h2 {
45+
margin-top: 2.5rem;
46+
}
47+
48+
a {
49+
color: var(--link-color);
50+
text-decoration-color: var(--link-underline-color);
51+
text-decoration-thickness: 0.125rem;
52+
}
53+
54+
a:hover {
55+
filter: brightness(117.5%);
56+
}
57+
58+
a:active {
59+
filter: brightness(82.5%);
60+
}
61+
62+
ul {
63+
padding-left: 0;
64+
}
65+
66+
li {
67+
display: block;
68+
}
69+
70+
li a {
71+
display: inline-block;
72+
width: 100%;
73+
height: 4rem;
74+
margin-left: 0.5rem;
75+
}
76+
77+
li a:hover {
78+
background-color: hsla(0, 0%, 50%, 0.1);
79+
}
80+
</style>
81+
</head>
82+
<body>
83+
<h1>Godot demo projects</h1>
84+
<p>
85+
This page lists
86+
<a href="https://github.com/godotengine/godot-demo-projects">official Godot demo projects</a>
87+
exported to HTML5 for testing purposes. These projects are deployed automatically
88+
on every commit on the <code>master</code> branch of the repository.
89+
</p>
90+
<p>
91+
The HTML5 exports on this page are provided for demonstration purposes only.
92+
Some of these demos may not function or render correctly on HTML5,
93+
especially on mobile devices.
94+
For best performance, it's recommended to
95+
<a href="https://godotengine.org/download">download</a> a native editor
96+
and run the demo project by importing its files in the project manager.
97+
</p>
98+
<p>
99+
See the
100+
<a href="https://docs.godotengine.org/en/stable/getting_started/workflow/export/exporting_for_web.html">Exporting for the Web</a>
101+
documentation for information on exporting your own projects to HTML5.
102+
</p>
103+
104+
<h2>List of demos</h2>
105+
<ul>
106+
<!-- The list of demos will be inserted below by the CI process. -->

‎.github/workflows/export_html5.yml‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
name: Export projects to HTML5 and deploy to GitHub Pages
2+
on:
3+
push:
4+
branches:
5+
- master
6+
7+
env:
8+
GODOT_VERSION: 3.2.3
9+
10+
jobs:
11+
export-html5:
12+
name: Export projects to HTML5 and deploy to GitHub Pages
13+
runs-on: ubuntu-20.04
14+
container:
15+
image: barichello/godot-ci:3.2.3
16+
steps:
17+
- name: Checkout
18+
uses: actions/[email protected]
19+
20+
- name: Setup
21+
run: |
22+
mkdir -p ~/.local/share/godot/templates/
23+
mv /root/.local/share/godot/templates/$GODOT_VERSION.stable ~/.local/share/godot/templates/$GODOT_VERSION.stable
24+
25+
- name: Export projects to HTML5
26+
run: |
27+
apt-get update -qq && apt-get install -qqq imagemagick
28+
29+
# Don't export Mono demos (not supported yet), demos that can't be run in HTML5
30+
# since they're platform-specific or demos that are currently broken in HTML5.
31+
# Remember to update `.github/dist/footer.html` when updating the list of excluded demos.
32+
rm -rf \
33+
2d/hdr/ \
34+
3d/voxel/ \
35+
audio/device_changer/ \
36+
loading/background_load/ \
37+
loading/multiple_threads_loading/ \
38+
loading/threads/ \
39+
misc/matrix_transform/ \
40+
mobile/android_iap/ \
41+
mobile/sensors/ \
42+
mono/ \
43+
networking/ \
44+
plugins/
45+
46+
for panorama in 3d/material_testers/backgrounds/*.hdr; do
47+
# Decrease the resolution to get below the 20 MB per-file limit.
48+
# Otherwise, the website can't be deployed as files larger than 20 MB
49+
# can't be pushed to GitHub anymore.
50+
mogrify -resize 75% "$panorama"
51+
done
52+
53+
BASEDIR="$PWD"
54+
55+
# Use absolute paths so that we can `cd` without having to go back to the parent directory manually.
56+
for demo in */*/; do
57+
echo ""
58+
echo "================================"
59+
echo "Exporting demo $demo..."
60+
echo "================================"
61+
62+
mkdir -p "$BASEDIR/.github/dist/$demo"
63+
cd "$BASEDIR/$demo"
64+
65+
# Copy an export template preset file configured for HTML5 exporting.
66+
# This way, we don't have to commit `export_presets.cfg` for each project.
67+
cp "$BASEDIR/.github/dist/export_presets.cfg" .
68+
godot --export "HTML5" "$BASEDIR/.github/dist/$demo/index.html"
69+
70+
# Replace the WASM file with a symbolic link to avoid duplicating files in the pushed branch.
71+
# (WASM files are identical across projects, but not PCK or HTML files.)
72+
mv -f "$BASEDIR/.github/dist/$demo/index.wasm" "$BASEDIR/.github/dist/index.wasm"
73+
# The symlink must be relative as it needs to point to a file within the pushed repository.
74+
ln -s "../../index.wasm" "$BASEDIR/.github/dist/$demo/index.wasm"
75+
76+
# Append the demo to the list of demos for the website.
77+
PROJECT_NAME=$(cat project.godot | grep "config/name" | cut -d '"' -f 2 | tr -d "\n")
78+
echo "<li><a href='$demo'><img width="64" height="64" src="$demo/favicon.png" alt=""> $PROJECT_NAME</a></li>" >> "$BASEDIR/.github/dist/demos.html"
79+
done
80+
81+
cat "$BASEDIR/.github/dist/header.html" "$BASEDIR/.github/dist/demos.html" "$BASEDIR/.github/dist/footer.html" > "$BASEDIR/.github/dist/index.html"
82+
83+
# Clean up files that don't need to be deployed.
84+
rm -f "$BASEDIR/.github/dist/header.html" "$BASEDIR/.github/dist/demos.html" "$BASEDIR/.github/dist/footer.html" "$BASEDIR/.github/dist/export_presets.cfg"
85+
86+
# Installing rsync is needed in order to deploy to GitHub Pages. Without it, the build will fail.
87+
- name: Install rsync 📚
88+
run: |
89+
apt-get update -qq && apt-get install -qqq rsync
90+
- name: Deploy to GitHub Pages 🚀
91+
uses: JamesIves/github-pages-deploy-action@releases/v3
92+
with:
93+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
94+
# The branch the action should deploy to.
95+
BRANCH: gh-pages
96+
# The folder the action should deploy.
97+
FOLDER: .github/dist
98+
# Artifacts are large; don't keep the branch's history.
99+
SINGLE_COMMIT: true

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
.import/
66
export.cfg
77
export_presets.cfg
8+
# Dummy HTML5 export presets file for continuous integration
9+
!.github/dist/export_presets.cfg
810

911
# Imported translations (automatically generated from CSV files)
1012
*.translation

0 commit comments

Comments
 (0)