Initial draft of roadmap page

content/roadmap/_index.md

@@ -0,0 +1,7 @@
++++
+title = "Roadmap"
+template = "roadmap.html"
+page_template = "project-page.html"
+[extra]
+header_message = "Roadmap"
++++

content/roadmap/engine-improvements/_index.md

@@ -0,0 +1,4 @@
++++
+title = "Engine Improvements"
+page_template = "project-page.html"
++++

content/roadmap/engine-improvements/audio/index.md

@@ -0,0 +1,11 @@
++++
+title = "Audio"
+weight = 0
+description = "Audio Improvements"
+
+[extra]
+technical_name = "audio"
+link = "/roadmap/engine-improvements/audio"
++++
+
+Bevy's current audio solution is currently inadequate.

content/roadmap/engine-improvements/widgets/index.md

@@ -0,0 +1,10 @@
++++
+title = "Widgets"
+weight = 0
+description = "New ui widgets"
+
+[extra]
+technical_name = "widgets"
+link = "/roadmap/engine-improvements/widgets"
++++
+

content/roadmap/tooling/_index.md

@@ -0,0 +1,4 @@
++++
+title = "Tooling"
+page_template = "project-page.html"
++++

content/roadmap/tooling/bevy-scene-notation/index.md

@@ -0,0 +1,9 @@
++++
+title = "Bevy Scene Notation"
+weight = 0
+description = ""
+
+[extra]
+technical_name = "bsn"
+link = "/roadmap/tooling/bevy-scene-notation"
++++

content/roadmap/tooling/editor/index.md

@@ -0,0 +1,36 @@
++++
+title = "Editor"
+weight = 0
+description = "A robust editor for scene authoring"
+
+[extra]
+technical_name = "editor"
+link = "/roadmap/tooling/editor"
+image = "editor/prototypes.png"
+show_image = true
+image_subtitle = "One of the prototypes"
+image_subtitle_link = "https://www.figma.com/design/fkYfFPSBgnGkhbQd3HOMsL/Bevy-Editor?node-id=90-2&p=f"
++++
+
+Bevy has long needed a way for users to view, tweak, and process assets and scenes.
+
+## Features
+
+The bevy editor will allow users to author scenes and save them as assets which will make project iteration much easier.
+
+## Next Steps
+
+So far most of the sketchwork of the editor has been done.
+
+We are currently waiting on
+
+- Feathers
+- User preferences
+- Improved tooling
+
+## Contributing
+
+If you're looking to work on making the editor try 
+
+- Contributing work to [feathers](https://arch.org), the ui framework the editor is using
+- Looking over the issues on the [bevy_editor_prototypes](https://arch.org) github

content/roadmap/tooling/inspector/index.md

@@ -0,0 +1,9 @@
++++
+title = "Inspector"
+weight = 0
+description = "A inspector that can see and change components at runtime"
+
+[extra]
+technical_name = "inspector"
+link = "/roadmap/tooling/inspector"
++++

sass/pages/_roadmap.scss

@@ -0,0 +1,49 @@
+.roadmap {
+  .assets-intro {
+    margin-bottom: 20px;
+  }
+
+  .roadmap-section {
+    font-size: 2.4rem;
+    margin: 0 0 20px;
+  }
+}
+
+.project-title {
+  font-size: 2.8rem;
+  font-weight: 800;
+  margin-bottom: 0px;
+  margin-top: 0px;
+}
+
+.project-subtitle {
+  margin-top: 0px;
+  font-size: 1.22rem;
+  font-weight: 200;
+  font-style: italic;
+  color: var(--news-subtitle-color);
+}
+
+.project-content {
+  img {
+    border-radius: $border-radius;
+    max-width: 100%;
+  }
+
+  video {
+    border-radius: $border-radius;
+    max-width: 100%;
+  }
+}
+
+.project-image-subtitle {
+  color: var(--news-feature-image-subtitle);
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: -0.3rem;
+  text-align: center;
+}
+
+.fun-list {
+  color: var(--news-fun-list-color);
+}

sass/site.scss

@@ -66,6 +66,7 @@
 @import "pages/docs";
 @import "pages/donate";
 @import "pages/news";
+@import "pages/roadmap"
 @import "pages/features";
 @import "pages/content";
 @import "pages/migration_guide";

templates/layouts/base.html

@@ -168,6 +168,7 @@
                 {{ header_macros::header_item(name="Getting Started", path="/learn/quick-start/getting-started",
                                 extra_class="main-menu__entry--getting-started", current_path=current_path) }}
                 {{ header_macros::header_item(name="Learn", current_path=current_path) }}
+                {{ header_macros::header_item(name="Roadmap", current_path=current_path) }}
                 {{ header_macros::header_item(name="News", current_path=current_path) }}
                 {{ header_macros::header_item(name="Community", current_path=current_path) }}
                 {{ header_macros::header_item(name="Foundation", current_path=current_path) }}

templates/layouts/projects.html

@@ -0,0 +1,28 @@
+{% extends "layouts/page-with-menu.html" %}
+{% import "macros/assets.html" as assets_macros %}
+{% block page_name %}Roadmap{% endblock page_name %}
+{% block mobile_page_menu %}{{ assets_macros::assets_menu(prefix="page-menu", root=section) }}{% endblock mobile_page_menu %}
+{% block page_menu %}{{ assets_macros::assets_menu(prefix="page-menu", root=section) }}{% endblock page_menu %}
+{% block page_content %}
+  <div class="roadmap">
+    <div class="roadmap-intro media-content">
+      {% block intro %}{% endblock intro %}
+    </div>
+
+    {% for subsection in section.subsections %}
+      {% set section = get_section(path=subsection) %}
+      <h1 class="roadmap-section" id="{{ section.title | slugify }}">
+        {{ section.title }}<a class="anchor-link" href="#{{ section.title | slugify }}">#</a>
+      </h1>
+      {% if section.pages %}
+        <div class="item-grid item-grid--multi-cols">
+          {% set pages = section.pages %}
+          {% if section.extra.sort_order_reversed %}
+            {% set pages = section.pages | reverse %}
+          {% endif %}
+          {% for post in pages %}{{ assets_macros::card(post=post) }}{% endfor %}
+        </div>
+      {% endif %}
+    {% endfor %}
+  </div>
+{% endblock page_content %}

templates/macros/projects.html

@@ -0,0 +1,40 @@
+{% macro project_menu_row(header, max_levels, level) %}
+  {% set id = 'project-menu-' ~ level ~ '-' ~ header.title | slugify %}
+  {% set label_class = "tree-menu__label" %}
+  {% set total_children = header.children | length %}
+  {% set has_children = total_children > 0 %}
+  {% set show_children = has_children and level < max_levels %}
+  {% if show_children %}
+    {% set label_class = label_class
+        ~ " tree-menu__label--with-chevron" %}
+    <input id="{{ id }}" class="tree-menu__state" type="checkbox" checked>
+  {% endif %}
+  <li class="tree-menu__item">
+    <div class="{{ label_class }}">
+      <a class="tree-menu__link" href="{{ header.permalink | safe }}">{{ header.title }}</a>
+      {% if show_children %}
+        <label class="tree-menu__toggle" for="{{ id }}">
+          <img class="tree-menu__chevron"
+                src="/assets/icon-chevron-down.svg"
+                alt="A chevron, or V-shaped symbol"
+                width="15"
+                height="24" />
+        </label>
+      {% endif %}
+    </div>
+    {% if show_children %}
+      <ul class="tree-menu">
+        {% for sub_header in header.children %}
+          {{ self::project_menu_row(header=sub_header, max_levels=max_levels, level=level + 1) }}
+        {% endfor %}
+      </ul>
+    {% endif %}
+  </li>
+{% endmacro %}
+{% macro project_menu(toc, max_levels) %}
+  {% if toc %}
+    <ul class="tree-menu" data-highlight-intrapage-link>
+      {% for header in toc %}{{ self::project_menu_row(header=header, max_levels=max_levels, level=1) }}{% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}

templates/project-page.html

@@ -0,0 +1,42 @@
+{% extends "layouts/page-with-menu.html" %}
+{% import "macros/projects.html" as projects_macros %}
+{% block page_with_menu_extra_class %}page-with-menu--news{% endblock page_with_menu_extra_class %}
+{% block page_name %}Post{% endblock page_name %}
+{% block mobile_page_menu %}{{ projects_macros::project_menu(toc=page.toc, max_levels=1) }}{% endblock mobile_page_menu %}
+{% block page_menu %}{{ projects_macros::project_menu(toc=page.toc, max_levels=1) }}{% endblock page_menu %}
+
+{% block head_extensions %}
+  <script defer src="/highlight-intrapage-link.js"></script>
+{% endblock head_extensions %}
+
+{% block page_content %}
+  <h1 class="project-title">{{ page.title }}</h1>
+  {% if page.extra.image and page.extra.show_image %}
+    <div class="media-content project-content project-content__hero-image">
+      {% if page.extra.image_subtitle %}
+        <img src="{{ page.extra.image }}" alt="{{ page.extra.image_subtitle }}" style="aspect-ratio: auto 16 / 9" />
+      {% else %}
+        <img src="{{ page.extra.image }}" alt="An image representing the article" style="aspect-ratio: auto 16 / 9" />
+      {% endif %}
+      {% if page.extra.image_subtitle %}
+        {% if page.extra.image_subtitle_link %}
+          <div class="project-image-subtitle">
+            <a href="{{ page.extra.image_subtitle_link }}">{{ page.extra.image_subtitle }}</a>
+          </div>
+        {% else %}
+          <div class="project-image-subtitle">{{ page.extra.image_subtitle }}</div>
+        {% endif %}
+      {% endif %}
+    </div>
+  {% endif %}
+  <div class="media-content project-content">
+    {{ page.content | safe }}
+  </div>
+  <script type="module">
+  import { enable_image_compare } from '/components.js';
+
+  document.addEventListener("DOMContentLoaded", function () {
+    enable_image_compare();
+  });
+  </script>
+{% endblock page_content %}

templates/roadmap.html

@@ -0,0 +1,5 @@
+{% extends "layouts/projects.html" %}
+
+{% block intro %}
+Things that need to be done before 1.0
+{% endblock intro %}