Deploy examples on website in wasm (#225)

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 %}