Improve example page (#350)

- This doesn't change the listing layout, **but** improves the sidebar category labels - Tweaks example generation script to include labels for categories instead of using folder name - Tweak single example page layout <img width="209" alt="image" src="https://user-images.githubusercontent.com/188612/163731632-3abf4e78-31a3-4288-a5f3-24363c62b3bd.png"> <img width="843" alt="image" src="https://user-images.githubusercontent.com/188612/163731643-012820a0-377b-4bc3-a7e4-567081b807be.png"> <img width="354" alt="image" src="https://user-images.githubusercontent.com/188612/163731664-9b7d9cac-4e35-4aa0-92ef-17bf7b0f32fc.png">
bevyengine · Apr 17, 2022 · 8e245c8 · 8e245c8
1 parent 389f6ab
commit 8e245c8
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 24 deletions.
diff --git a/generate-wasm-examples/generate_wasm_examples.sh b/generate-wasm-examples/generate_wasm_examples.sh
@@ -18,12 +18,16 @@ sed -i.bak 's/asset_folder: "assets"/asset_folder: "\/assets\/examples\/"/' crat
 add_category()
 {
     category=$1
-    category_path=`echo $category | tr '[:upper:]' '[:lower:]'`
+    category_path=$2
     example_weight=0
 
     mkdir ../../content/examples/$category_path
 
-    shift
+    # 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"
@@ -43,6 +47,7 @@ header_message = \"Examples\"
         example_weight=$((example_weight+1))
     done
 
+    # Generate category index
     echo "+++
 title = \"$category\"
 sort_by = \"weight\"
@@ -66,11 +71,15 @@ header_message = \"Examples\"
 
 category_weight=0
 
-add_category 2d rect sprite sprite_flipping sprite_sheet text2d mesh2d mesh2d_manual
-add_category 3d 3d_scene lighting load_gltf orthographic parenting pbr spherical_area_lights texture update_gltf_scene
-add_category UI button text text_debug ui
-add_category audio audio
-add_category shader shader_instancing shader_material_glsl shader_material
-add_category ecs iter_combinations
-add_category Games breakout alien_cake_addict
-add_category stress_tests bevymark
+# 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 rect sprite sprite_flipping sprite_sheet text2d mesh2d mesh2d_manual
+add_category 3D 3d 3d_scene lighting load_gltf orthographic parenting pbr spherical_area_lights texture update_gltf_scene
+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 Games games breakout alien_cake_addict
+add_category "Stress Tests" stress_tests bevymark
diff --git a/sass/components/_example.scss b/sass/components/_example.scss
@@ -0,0 +1,56 @@
+.example {
+    padding: 0 16px;
+
+    &__header {
+        display: grid;
+        gap: 8px;
+        margin: 16px 0 8px;
+        align-items: baseline;
+        grid-template-columns: 1fr 1fr;
+        grid-template-areas:
+            'title title'
+            'back  github'
+        ;
+
+        @media #{$bp-tablet-portrait-up} {
+            margin: 24px 0 8px;
+            grid-template-areas: 'back title github';
+            grid-template-columns: 150px 1fr 150px;
+        }
+    }
+
+    &__title {
+        grid-area: title;
+        margin: 0;
+        font-size: 1.75rem;
+        text-align: center;
+    }
+
+    &__back,
+    &__github {
+        font-size: 1rem;
+
+        @include override-anchor {
+            color: #aaa;
+        }
+
+        &:hover {
+            color: $color-white;
+        }
+    }
+
+    &__back {
+        grid-area: back;
+    }
+
+    &__github {
+        grid-area: github;
+        text-align: right;
+    }
+
+    &__canvas {
+        width: 100% !important;
+        height: auto !important;
+        border-radius: $border-radius;
+    }
+}
diff --git a/sass/components/_icon.scss b/sass/components/_icon.scss
@@ -3,6 +3,7 @@
 
     display: inline-block;
     background-color: currentColor;
+    vertical-align: text-bottom;
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-size: contain;
@@ -15,6 +16,7 @@
         ('chevron-down', 15),
         ('chevron-left', 9),
         ('chevron-right', 9),
+        ('github', 24),
         ('pencil', 19),
         ('times', 16),
     );

diff --git a/sass/site.scss b/sass/site.scss
@@ -22,6 +22,7 @@
 @import "components/book-footer";
 @import "components/book-nav";
 @import "components/card";
+@import "components/example";
 @import "components/headerbar";
 @import "components/icon";
 @import "components/sponsors";

diff --git a/static/assets/icon-github.svg b/static/assets/icon-github.svg
diff --git a/templates/example.html b/templates/example.html
@@ -1,25 +1,28 @@
 {% extends "layouts/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>
+<div class="example">
+    <div class="example__header">
+        {% set total_ancestors = page.ancestors | length %}
+        {% set parent_idx = total_ancestors - 1 %}
+        {% 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"><i class="icon icon--chevron-left"></i> Back to examples</a>
+        <a class="example__github" href="https://github.com/bevyengine/bevy/blob/latest/examples/{{ page.components[1] }}/{{ page.title }}.rs">
+            <i class="icon icon--github"></i> View in GitHub
+        </a>
+    </div>
+    <canvas class="example__canvas" id="bevy"></canvas>
+    <div class="example__code media-content">
         {% 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>
+<script type="module">
+    import init from './{{ page.title }}.js';
+    init();
+</script>
 {% endblock content %}