-
Notifications
You must be signed in to change notification settings - Fork 410
Add banner to warn user of required feature flags for examples #2313
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
Sigma-dev
wants to merge
2
commits into
bevyengine:main
Choose a base branch
from
Sigma-dev:feat/show-examples-required-feature-flags
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,138 +1,150 @@ | ||
| {% extends "layouts/base.html" %} | ||
| {% block content %} | ||
| <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> | ||
| <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="{% block examples_url %}{% endblock examples_url %}"><i class="icon icon--chevron-left"></i> Back to examples</a> | ||
| <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> | ||
| <div class="example__canvas bevy-instance"> | ||
| <noscript> | ||
| <aside class="example__callout media-content callout callout--plain callout--warning"> | ||
| Examples require JavaScript to be enabled. Please enable JavaScript to run examples. | ||
| </aside> | ||
| </noscript> | ||
| <div class="bevy-instance__progress-status" data-progress-status> | ||
| <div class="bevy-instance__progress-file" data-progress-file></div> | ||
| <div class="bevy-instance__progress-track"> | ||
| <div class="bevy-instance__progress-bar" data-progress-bar></div> | ||
| </div> | ||
| </div> | ||
| <canvas class="bevy-instance__canvas" id="bevy" width="1280" height="720"></canvas> | ||
| <aside class="example__callout media-content callout callout--plain callout--{% block callout_modifier %}{% endblock callout_modifier %}"> | ||
| {% block callout %}{% endblock callout %} | ||
| <i class="icon icon--github"></i> View in GitHub | ||
| </a> | ||
| </div> | ||
| <div class="example__canvas bevy-instance"> | ||
| <noscript> | ||
| <aside class="example__callout media-content callout callout--plain callout--warning"> | ||
| Examples require JavaScript to be enabled. Please enable JavaScript to run examples. | ||
| </aside> | ||
| </div> | ||
| {% if page.content %} | ||
| <div class="example__explanation media-content"> | ||
| {{ page.content | safe }} | ||
| </noscript> | ||
| <div class="bevy-instance__progress-status" data-progress-status> | ||
| <div class="bevy-instance__progress-file" data-progress-file></div> | ||
| <div class="bevy-instance__progress-track"> | ||
| <div class="bevy-instance__progress-bar" data-progress-bar></div> | ||
| </div> | ||
| </div> | ||
| <canvas class="bevy-instance__canvas" id="bevy" width="1280" height="720"></canvas> | ||
| <aside class="example__callout media-content callout callout--plain callout--{% block callout_modifier %}{% endblock callout_modifier %}"> | ||
| {% block callout %}{% endblock callout %} | ||
| </aside> | ||
| {% if page.extra.required_features %} | ||
| <aside class="callout callout--warning"> | ||
| <h3 class="warning">Optional feature flag</h3> | ||
| <p> | ||
| The code in this example requires {% if page.extra.required_features | length > 1 | ||
| %}these feature flags{% else %}this feature flag{% endif %} to be enabled in order to function: | ||
| {% for feature in page.extra.required_features %} | ||
| <code>"{{ feature }}"</code>{% if not loop.last %}, {% endif %} | ||
| {%- endfor %}. | ||
| </p> | ||
| </aside> | ||
| {% endif %} | ||
| <div class="example__code-tabs tabs"> | ||
| {% set filename = page.extra.code_path | split(pat="/") | last %} | ||
| <input class="tabs__radio" name="tabs" tabindex="1" type="radio" id="tab0" checked="checked"> | ||
| <label class="tabs__label" for="tab0"><code>{{ filename }}</code></label> | ||
| <div class="tabs__panel" tabindex="1"> | ||
| <div class="example__code media-content"> | ||
| {% set code = load_data(path=page.extra.code_path) %} | ||
| {% set code_md = "```rust" ~ newline ~ code ~ "```" %} | ||
| {{ code_md | markdown(inline=true) | safe }} | ||
| </div> | ||
| </div> | ||
| {% if page.content %} | ||
| <div class="example__explanation media-content"> | ||
| {{ page.content | safe }} | ||
| </div> | ||
| {% endif %} | ||
| <div class="example__code-tabs tabs"> | ||
| {% set filename = page.extra.code_path | split(pat="/") | last %} | ||
| <input class="tabs__radio" name="tabs" tabindex="1" type="radio" id="tab0" checked="checked"> | ||
| <label class="tabs__label" for="tab0"><code>{{ filename }}</code></label> | ||
| <div class="tabs__panel" tabindex="1"> | ||
| <div class="example__code media-content"> | ||
| {% set code = load_data(path=page.extra.code_path) %} | ||
| {% set code_md = "```rust" ~ newline ~ code ~ "```" %} | ||
| {{ code_md | markdown(inline=true) | safe }} | ||
| </div> | ||
| </div> | ||
|
|
||
| {% for shader in page.extra.shader_code_paths %} | ||
| <input class="tabs__radio" tabindex="1" name="tabs" type="radio" id="tab{{ loop.index }}"> | ||
| <label class="tabs__label" for="tab{{ loop.index }}"><code>{{ shader }}</code></label> | ||
| <div class="tabs__panel" tabindex="1"> | ||
| <div class="example__code media-content"> | ||
| {% set code = load_data(path="static/assets/examples/" ~ shader) %} | ||
| {% set code_md = "```wgsl" ~ newline ~ code ~ "```" %} | ||
| {{ code_md | markdown(inline=true) | safe }} | ||
| </div> | ||
|
|
||
| {% for shader in page.extra.shader_code_paths %} | ||
| <input class="tabs__radio" tabindex="1" name="tabs" type="radio" id="tab{{ loop.index }}"> | ||
| <label class="tabs__label" for="tab{{ loop.index }}"><code>{{ shader }}</code></label> | ||
| <div class="tabs__panel" tabindex="1"> | ||
| <div class="example__code media-content"> | ||
| {% set code = load_data(path="static/assets/examples/" ~ shader) %} | ||
| {% set code_md = "```wgsl" ~ newline ~ code ~ "```" %} | ||
| {{ code_md | markdown(inline=true) | safe }} | ||
| </div> | ||
| </div> | ||
| {% endfor %} | ||
| </div> | ||
| {% endfor %} | ||
| </div> | ||
| <script type="module"> | ||
| {# | ||
| </div> | ||
| <script type="module"> | ||
| {# | ||
| // Hi curious user! | ||
| // This approach to add loading feedback on web is a big HACK. Please review `generate_wasm_examples.sh` | ||
| // to see the patches we're applying to the JS file to accept a custom `fetch`. This is a temporary | ||
| // workaround until Bevy has an in-engine mode for showing loading feedback. See: | ||
| // https://github.com/bevyengine/bevy-website/pull/355 | ||
| #} | ||
|
|
||
| import { progressiveFetch } from '/tools.js'; | ||
| import '/restart-audio-context.js' | ||
| import init from '{% block wasm_base_url %}{% endblock wasm_base_url %}/{{ category.title }}/{{ page.extra.technical_name }}/wasm_example.js' | ||
| import { progressiveFetch } from '/tools.js'; | ||
| import '/restart-audio-context.js' | ||
| import init from '{% block wasm_base_url %}{% endblock wasm_base_url %}/{{ category.title }}/{{ page.extra.technical_name }}/wasm_example.js' | ||
|
|
||
| const canvasEl = document.getElementById('bevy'); | ||
| const canvasEl = document.getElementById('bevy'); | ||
|
|
||
| let once = false; | ||
| const observer_callback = (_mutations, _observer) => { | ||
| if (!once) { | ||
| // Lock the canvas aspect ratio to prevent the fit_canvas_to_parent setting from creating a feedback loop causing the canvas to grow on resize | ||
| canvasEl.style.aspectRatio = canvasEl.attributes.width.value / canvasEl.attributes.height.value; | ||
| once = true; | ||
| } | ||
| }; | ||
| let once = false; | ||
| const observer_callback = (_mutations, _observer) => { | ||
| if (!once) { | ||
| // Lock the canvas aspect ratio to prevent the fit_canvas_to_parent setting from creating a feedback loop causing the canvas to grow on resize | ||
| canvasEl.style.aspectRatio = canvasEl.attributes.width.value / canvasEl.attributes.height.value; | ||
| once = true; | ||
| } | ||
| }; | ||
|
|
||
| const observer = new MutationObserver(observer_callback); | ||
| const observer = new MutationObserver(observer_callback); | ||
|
|
||
| const config = { attributeFilter: ['width', 'height'] }; | ||
| const config = { attributeFilter: ['width', 'height'] }; | ||
|
|
||
| observer.observe(canvasEl, config); | ||
| observer.observe(canvasEl, config); | ||
|
|
||
| const progressStatusEl = document.querySelector('[data-progress-status]'); | ||
| const progressFileEl = document.querySelector('[data-progress-file]'); | ||
| const progressBarEl = document.querySelector('[data-progress-bar]'); | ||
| let hideProgressTimeoutId; | ||
| const progressStatusEl = document.querySelector('[data-progress-status]'); | ||
| const progressFileEl = document.querySelector('[data-progress-file]'); | ||
| const progressBarEl = document.querySelector('[data-progress-bar]'); | ||
| let hideProgressTimeoutId; | ||
|
|
||
| async function loadingBarFetch(resource) { | ||
| return progressiveFetch(resource, { | ||
| start: ({ filename }) => { | ||
| progressStatusEl.style.display = 'block'; | ||
| progressFileEl.textContent = filename; | ||
| async function loadingBarFetch(resource) { | ||
| return progressiveFetch(resource, { | ||
| start: ({ filename }) => { | ||
| progressStatusEl.style.display = 'block'; | ||
| progressFileEl.textContent = filename; | ||
|
|
||
| if (hideProgressTimeoutId) { | ||
| clearTimeout(hideProgressTimeoutId); | ||
| } | ||
| }, | ||
| update: ({ isIndeterminate, loadedPercent }) => { | ||
| progressBarEl.classList.toggle('bevy-instance__progress-bar--indeterminate', isIndeterminate); | ||
| progressBarEl.style.width = loadedPercent + '%'; | ||
| }, | ||
| finish: () => { | ||
| {# | ||
| if (hideProgressTimeoutId) { | ||
| clearTimeout(hideProgressTimeoutId); | ||
| } | ||
| }, | ||
| update: ({ isIndeterminate, loadedPercent }) => { | ||
| progressBarEl.classList.toggle('bevy-instance__progress-bar--indeterminate', isIndeterminate); | ||
| progressBarEl.style.width = loadedPercent + '%'; | ||
| }, | ||
| finish: () => { | ||
| {# | ||
| // This is a little hack to avoid progress-bar flashing between assets. The thing | ||
| // is that we don't know how many assets are going to load, so we don't know which | ||
| // one is the last one. If a new asset starts loading within 50ms, then this timeout | ||
| // is cleared and the progress element stays visible, avoiding the flashing. | ||
| // The downside is that the progress bar shows for a brief moment once the wasm starts. | ||
| #} | ||
| hideProgressTimeoutId = setTimeout(() => { | ||
| progressStatusEl.style.display = 'none'; | ||
| }, 50); | ||
| } | ||
| }) | ||
| } | ||
| window.bevyLoadingBarFetch = loadingBarFetch; | ||
| hideProgressTimeoutId = setTimeout(() => { | ||
| progressStatusEl.style.display = 'none'; | ||
| }, 50); | ||
| } | ||
| }) | ||
| } | ||
| window.bevyLoadingBarFetch = loadingBarFetch; | ||
|
|
||
| {# | ||
| {# | ||
| // 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> | ||
| 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 %} | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think having this header text as "Optional feature flag" is confusing. If I am understanding this issue correctly the feature flag is not optional for this example, which is described with added clarity below.
Maybe "Feature flag required for example" or "Feature flag details" provide more clarity?
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree, I think "Feature flag required" is a better name, I will make the change