Deploy examples on website in wasm

.github/workflows/ci.yml

@@ -15,6 +15,14 @@ jobs:
  - name: "Build Bevy Error Codes"
  run: cd generate-errors && ./generate_errors.sh
 
+ - uses: actions-rs/toolchain@v1
+ with:
+ toolchain: stable
+ target: wasm32-unknown-unknown
+
+ - name: "Build Bevy Examples"
+ run: cargo install wasm-bindgen-cli && cd generate-wasm-examples && ./generate_wasm_examples.sh
+
  - name: "Build website"
  uses: shalzz/zola-deploy-action@master
  env:

.gitignore

@@ -3,3 +3,4 @@ public
 .idea/
 content/assets
 content/learn/errors
+content/examples

generate-wasm-examples/.gitignore

@@ -0,0 +1 @@
+bevy/

generate-wasm-examples/generate_wasm_examples.sh

@@ -0,0 +1,77 @@
+#!/bin/sh
+
+git init bevy
+cd bevy
+git remote add origin https://github.com/bevyengine/bevy
+git pull --depth=1 origin main
+
+# remove markdown files from assets so that they don't get picked up by Zola
+find assets -type f -name '*.md' -exec rm {} +
+
+# setting the default width of a window to 1024
+sed -i.bak 's/width: 1280.,/width: 1024.,/' crates/bevy_window/src/window.rs
+
+# setting a canvas by default to help with integration
+sed -i.bak 's/canvas: None,/canvas: Some("#bevy".to_string()),/' crates/bevy_window/src/window.rs
+
+# disable msaa on any example that may set it
+sed -i.bak 's/Msaa { samples: 4 }/Msaa { samples: 1 }/' examples/*/*.rs
+
+
+add_category()
+{
+ category=$1
+ category_path=`echo $category | tr '[:upper:]' '[:lower:]'`
+ example_weight=0
+
+ mkdir ../../content/examples/$category_path
+
+ shift
+ for example in $@
+ do
+ echo "building $category / $example"
+ mkdir ../../content/examples/$category_path/$example
+ cp -r assets ../../content/examples/$category_path/$example
+ cp examples/$category_path/$example.rs ../../content/examples/$category_path/$example/
+ # need to disable default features to not have bevy_audio
+ cargo build --release --target wasm32-unknown-unknown --no-default-features --features "render,bevy_winit,png" --example $example
+ wasm-bindgen --out-dir ../../content/examples/$category_path/$example --no-typescript --target web target/wasm32-unknown-unknown/release/examples/$example.wasm
+ echo "+++
+title = \"$example\"
+template = \"example.html\"
+weight = $example_weight
+
+[extra]
+header_message = \"Examples\"
++++" > ../../content/examples/$category_path/$example/index.md
+
+ example_weight=$((example_weight+1))
+ done
+
+ echo "+++
+title = \"$category\"
+sort_by = \"weight\"
+weight = $category_weight
++++" > ../../content/examples/$category_path/_index.md
+
+ category_weight=$((category_weight+1))
+}
+
+mkdir ../../content/examples
+
+echo "+++
+title = \"Bevy Examples in WebGL2\"
+template = \"examples.html\"
+sort_by = \"weight\"
+
+[extra]
+header_message = \"Examples\"
++++" > ../../content/examples/_index.md
+
+category_weight=0
+
+add_category 2d rect sprite sprite_flipping sprite_sheet text2d
+add_category 3d 3d_scene lighting load_gltf orthographic parenting pbr texture update_gltf_scene
+add_category UI button text text_debug ui
+add_category Game breakout alien_cake_addict
+add_category Tools bevymark

templates/example.html

@@ -0,0 +1,25 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="book-content">
+ <div class="media-content">
+ <script type="module">
+ import init from './{{ page.title }}.js';
+ init()
+ </script>
+ <div><a href="/examples">Back to examples</a></div>
+ <canvas id="bevy" width="1024" height="720"></canvas>
+ <div>
+ {{ page.components[1] }} / {{ page.title }} -
+ <a href="https://github.com/bevyengine/bevy/blob/latest/examples/{{ page.components[1] }}/{{ page.title }}.rs">
+ See this example in Bevy github repo
+ </a>
+ </div>
+ {% set code = load_data(path="content/examples/" ~ page.components[1] ~ "/" ~ page.title ~ "/" ~ page.title ~ ".rs") %}
+ {% set data = "```rust
+" ~ code ~ "```" %}
+
+ {{data | markdown(inline=true) | safe}}
+ </div>
+</div>
+{% endblock content %}

templates/examples.html

@@ -0,0 +1,66 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="assets">
+ <input type="checkbox" style="display: none" id="show-book-nav" />
+ <nav class="book-nav" role="navigation">
+ <ul class="book-nav-sections-container book-nav-sections">
+ {% for subsection in section.subsections %}
+ {% set section = get_section(path=subsection) %}
+ <li class="book-nav-section">
+ <a href="#{{ section.title | slugify }}" class="book-nav-section-title">{{ section.title }}</a>
+ {% if section.subsections %}
+ <ul class="book-nav-sections book-nav-sections-indented">
+ {% set subsections = section.subsections %}
+ {% if section.extra.sort_order_reversed %}
+ {% set subsections = section.subsections | reverse %}
+ {% endif %}
+ {% for subsection in subsections %}
+ {% set section = get_section(path=subsection) %}
+ <li class="book-nav-section">
+ <a href="#{{ section.title | slugify }}" class="book-nav-section-title">{{ section.title }}</a>
+ </li>
+
+ {% endfor %}
+ </ul>
+ {% endif %}
+ </li>
+ {% endfor %}
+ </ul>
+ </nav>
+ <div class="book-content">
+ {% for subsection in section.subsections %}
+ {% set section = get_section(path=subsection) %}
+
+ <h1 id="{{ section.title | slugify }}" class="asset-section">
+ {{ section.title }}<a class="anchor-link" href="#{{ section.title | slugify }}">#</a>
+ </h1>
+
+ {% if section.pages %}
+ <div class="card-list padded-content">
+ {% set pages = section.pages %}
+ {% if section.extra.sort_order_reversed %}
+ {% set pages = section.pages | reverse %}
+ {% endif %}
+ {% for post in pages %}
+
+ <a class="card" href="/examples/{{ section.title | slugify }}/{{ post.title | slugify }}/"
+ id="{{ post.title | slugify }}">
+ {% if post.extra.image %}
+ <div class="card-image card-image-default">
+ <img src="{{ get_url(path=post.extra.image) }}" />
+ </div>
+ {% endif %}
+ <div class="card-text">
+ <div class="card-title">{{ post.title }}</div>
+ </div>
+ </a>
+
+ {% endfor %}
+ </div>
+ {% endif %}
+
+ {% endfor %}
+ </div>
+</div>
+{% endblock content %}