diff --git a/generate-wasm-examples/generate_wasm_examples.sh b/generate-wasm-examples/generate_wasm_examples.sh index bb65b41486..e4d9a8328d 100755 --- 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 new file mode 100644 index 0000000000..6d723d5092 --- /dev/null +++ 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 index 7d2160b9fc..37946bf117 100644 --- 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 index c3a64b1885..1bec6cec66 100644 --- 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 new file mode 100644 index 0000000000..c4133fd1b9 --- /dev/null +++ b/static/assets/icon-github.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/templates/example.html b/templates/example.html index f8150254ae..71c003125b 100644 --- a/templates/example.html +++ b/templates/example.html @@ -1,20 +1,19 @@ {% extends "layouts/base.html" %} {% block content %} -
-
- -
Back to examples
- -
- {{ page.components[1] }} / {{ page.title }} - - - See this example in Bevy github repo - -
+
+
+ {% set total_ancestors = page.ancestors | length %} + {% set parent_idx = total_ancestors - 1 %} + {% set category = get_section(path=page.ancestors | nth(n=parent_idx)) %} +

{{ category.title }} / {{ page.title }}

+ Back to examples + + View in GitHub + +
+ +
{% set code = load_data(path="content/examples/" ~ page.components[1] ~ "/" ~ page.title ~ "/" ~ page.title ~ ".rs") %} {% set data = "```rust " ~ code ~ "```" %} @@ -22,4 +21,8 @@ {{data | markdown(inline=true) | safe}}
+ {% endblock content %}