Examples update

.github/workflows/ci.yml

@@ -77,29 +77,21 @@ jobs:
     steps:
       - uses: actions/checkout@master
 
-      - name: "Clone Bevy"
-        run: >
-          cd generate-wasm-examples &&
-          ./clone_bevy.sh
-
       - uses: actions/cache@v3
         with:
           path: |
             ~/.cargo/bin/
             ~/.cargo/registry/index/
             ~/.cargo/registry/cache/
             ~/.cargo/git/db/
-            generate-wasm-examples/bevy/target/
-            content/examples/**/*.wasm
           key: ${{ runner.os }}-generate-wasm-examples-${{ hashFiles('generate-wasm-examples/bevy/Cargo.toml') }}
 
       - uses: dtolnay/rust-toolchain@stable
         with:
           target: wasm32-unknown-unknown
 
       - name: "Build Bevy Examples"
-        run: >
-          cargo install --force wasm-bindgen-cli &&
+        run: |
           cd generate-wasm-examples &&
           ./generate_wasm_examples.sh
 
@@ -109,34 +101,6 @@ jobs:
           path: content/examples
           retention-days: 1
 
-  generate-wasm-examples-webgpu:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@master
-
-      - name: "Clone Bevy"
-        run: >
-          cd generate-wasm-examples &&
-          ./clone_bevy.sh
-
-      - uses: actions/cache@v3
-        with:
-          path: |
-            ~/.cargo/bin/
-            ~/.cargo/registry/index/
-            ~/.cargo/registry/cache/
-            ~/.cargo/git/db/
-            generate-wasm-examples/bevy/target/
-            content/examples/**/*.wasm
-          key: ${{ runner.os }}-generate-wasm-examples-webgpu-${{ hashFiles('generate-wasm-examples/bevy/Cargo.toml') }}
-
-      - uses: dtolnay/rust-toolchain@stable
-
-      - name: "Build Bevy Examples"
-        run: >
-          cd generate-wasm-examples &&
-          ./generate_wasm_examples-webgpu.sh
-
       - uses: actions/upload-artifact@master
         with:
           name: generated-wasm-examples-webgpu
@@ -185,7 +149,7 @@ jobs:
 
   build-website:
     runs-on: ubuntu-latest
-    needs: [markdownlint, generate-assets, generate-errors, generate-wasm-examples, generate-wasm-examples-webgpu, generate-community]
+    needs: [markdownlint, generate-assets, generate-errors, generate-wasm-examples, generate-community]
 
     steps:
       - uses: actions/checkout@master

.github/workflows/deploy.yml

@@ -39,7 +39,7 @@ jobs:
           target: wasm32-unknown-unknown
 
       - name: "Build Bevy Examples"
-        run: cargo install wasm-bindgen-cli && cd generate-wasm-examples && ./generate_wasm_examples.sh && ./generate_wasm_examples-webgpu.sh
+        run: cd generate-wasm-examples && ./generate_wasm_examples.sh
 
       - name: "Build and deploy website"
         if: github.repository_owner == 'bevyengine'

generate-wasm-examples/generate_wasm_examples.sh

@@ -2,105 +2,25 @@
 
 ./clone_bevy.sh
 
+# temporary: fetch tools from main branch
+git init bevy-tools
+cd bevy-tools
+git remote add origin https://github.com/bevyengine/bevy
+git pull --depth=1 origin main
+cd ..
+rm -rf bevy/tools
+cp -r bevy-tools/tools bevy
+rm -rf bevy-tools
 cd bevy
 
-# remove markdown files from assets so that they don't get picked up by Zola
-find assets -type f -name '*.md' -exec rm {} +
-
-# 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
-sed -i.bak 's/fit_canvas_to_parent: false,/fit_canvas_to_parent: true,/' crates/bevy_window/src/window.rs
-
-# setting the asset folder root to the root url of this domain
-sed -i.bak 's/asset_folder: "assets"/asset_folder: "\/assets\/examples\/"/' crates/bevy_asset/src/lib.rs
-
-add_category()
-{
-    category=$1
-    category_path=$2
-    category_slug=`echo $category_path | tr '_' '-'`
-    example_weight=0
-    category_dir="../../content/examples/$category_slug/"
-
-    [ -d "$category_dir" ] || mkdir $category_dir
-
-    # Remove first two arguments
-    shift 2
-
-    # Generate a markdown file for each example
-    # These represent each example page
-    for example in $@
-    do
-        echo "building $category / $example"
-        example_slug=`echo $example | tr '_' '-'`
-        code_filename="$example.rs"
-        [ -d "$category_dir/$example_slug" ] || mkdir $category_dir/$example_slug
-        cp examples/$category_path/$code_filename $category_dir/$example_slug/
-
-        example_file="$category_dir/$example_slug/${example}_bg.wasm"
-        if [ -f "$example_file" ]; then
-            echo "$example_file already exists."
-        else
-            cargo build --release --target wasm32-unknown-unknown --example $example
-        fi
-
-        wasm-bindgen --out-dir $category_dir/$example_slug --no-typescript --target web target/wasm32-unknown-unknown/release/examples/$example.wasm
+cargo run -p example-showcase -- build-website-list --content-folder content --api webgl2
+mv content ../../content/examples
 
-        # Patch generated JS to allow to inject custom `fetch` with loading feedback.
-        # See: https://github.com/bevyengine/bevy-website/pull/355
-        sed -i.bak \
-          -e 's/getObject(arg0).fetch(/window.bevyLoadingBarFetch(/' \
-          -e 's/input = fetch(/input = window.bevyLoadingBarFetch(/' \
-          $category_dir/$example_slug/$example.js
+rm -rf content
 
-        echo "+++
-title = \"$example\"
-template = \"example.html\"
-weight = $example_weight
+cargo run -p example-showcase -- build-website-list --content-folder content --api webgpu
+mv content ../../content/examples-webgpu
 
-[extra]
-code_path = \"content/examples/$category_slug/$example_slug/$code_filename\"
-github_code_path = \"examples/$category_path/$code_filename\"
-header_message = \"Examples\"
-+++" > $category_dir/$example_slug/index.md
-
-        example_weight=$((example_weight+1))
-    done
-
-    # Generate category index
-    echo "+++
-title = \"$category\"
-sort_by = \"weight\"
-weight = $category_weight
-+++" > $category_dir/_index.md
-
-    category_weight=$((category_weight+1))
-}
-
-[ -d "../../content/examples" ] || mkdir ../../content/examples
+# remove markdown files from assets so that they don't get picked up by Zola
+find assets -type f -name '*.md' -exec rm {} +
 cp -r assets/ ../../static/assets/examples/
-
-echo "+++
-title = \"Examples in WebGL2\"
-template = \"examples.html\"
-sort_by = \"weight\"
-
-[extra]
-header_message = \"Examples\"
-+++" > ../../content/examples/_index.md
-
-category_weight=0
-
-# Add categories
-# - first param: the label that will show on the website
-# - second param: `bevy/examples/???` folder name
-# - rest params: space separated list of example files within the folder that want to be used
-add_category 2D 2d sprite sprite_flipping sprite_sheet text2d mesh2d mesh2d_manual 2d_shapes
-add_category 3D 3d 3d_scene lighting load_gltf orthographic parenting pbr spherical_area_lights texture update_gltf_scene 3d_shapes
-add_category UI ui button text text_debug ui
-add_category Audio audio audio
-add_category Shader shader shader_instancing shader_material_glsl shader_material
-add_category ECS ecs iter_combinations
-add_category Tools tools gamepad_viewer
-add_category Games games breakout alien_cake_addict
-add_category "Stress Tests" stress_tests bevymark

templates/example-webgpu.html

@@ -8,7 +8,7 @@
         {% set category = get_section(path=page.ancestors | nth(n=parent_idx)) %}
         <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
         <a class="example__back" href="/examples-webgpu"><i class="icon icon--chevron-left"></i> Back to examples</a>
-        <a class="example__github" href="https://github.com/bevyengine/bevy/blob/main/{{ page.extra.github_code_path }}">
+        <a class="example__github" href="https://github.com/bevyengine/bevy/blob/latest/{{ page.extra.github_code_path }}">
             <i class="icon icon--github"></i> View in GitHub
         </a>
     </div>
@@ -50,7 +50,7 @@ <h2 class="warning">
     #}
     import { progressiveFetch } from '/tools.js';
     import '/restart-audio-context.js'
-    import init from 'https://wasm-examples.pages.dev/{{ category.title }}/{{ page.extra.technical_name }}/wasm_example.js'
+    import init from 'https://bevy-webgpu-examples.pages.dev/{{ category.title }}/{{ page.extra.technical_name }}/wasm_example.js'
 
     const canvasEl = document.getElementById('bevy');
 

templates/example.html

@@ -12,6 +12,14 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
             <i class="icon icon--github"></i> View in GitHub
         </a>
     </div>
+
+    <div class="assets-intro media-content">
+        This example is running in WebGL2 and should work in most browsers. You can check the WebGPU examples <a href="/examples-webgpu">here</a>.
+    </div>
+
+
+    <br />  
+
     <div class="example__canvas bevy-instance">
         <div class="bevy-instance__progress-status" data-progress-status>
             <div class="bevy-instance__progress-file" data-progress-file></div>
@@ -39,7 +47,7 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
     #}
     import { progressiveFetch } from '/tools.js';
     import '/restart-audio-context.js'
-    import init from './{{ page.title }}.js';
+    import init from 'https://bevy-webgl2-examples.pages.dev/{{ category.title }}/{{ page.extra.technical_name }}/wasm_example.js'
 
     const canvasEl = document.getElementById('bevy');
 
@@ -92,6 +100,16 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
         })
     }
     window.bevyLoadingBarFetch = loadingBarFetch;
-    init();
+
+    {#
+    // The following .catch() is a simple filter to remove an exception thrown by winit in
+    // its normal control flow. This exception will always be thrown and is not an error.
+    // Details here: https://github.com/rust-windowing/winit/blob/master/src/platform_impl/web/event_loop/mod.rs
+    #}
+    init().catch((error) => {
+        if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
+            throw error;
+        }
+    });
 </script>
 {% endblock content %}

templates/examples.html

@@ -36,17 +36,7 @@ <h1 class="asset-section" id="{{ section.title | slugify }}">
             {% 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>
+                {{ assets_macros::card(post=post) }}
 
             {% endfor %}
         </div>