Re-design

web-platform-dx · Dec 19, 2024 · 604b417 · 604b417
1 parent d1e1ce1
commit 604b417
Show file tree

Hide file tree

Showing 19 changed files with 580 additions and 348 deletions.
diff --git a/site/_includes/feature_list_views.njk b/site/_includes/feature_list_views.njk
@@ -0,0 +1,10 @@
+<ul class="views">
+  <li>Filter by：</li>
+  <li><a href="/features">All</a></li>
+  <li><a href="/newly-available" class="baseline-low">Newly available</a></li>
+  <li><a href="/widely-available" class="baseline-high">Widely available</a></li>
+  <li><a href="/limited-availability" class="baseline-false">Limited availability</a></li>
+  <li><a href="/one-missing-engine" class="baseline-false">One missing engine</a></li>
+  <!-- <li><a href="/groups">Groups</a></li>
+  <li><a href="/browse">Browse features</a></li> -->
+</ul>
diff --git a/site/_includes/layout.njk b/site/_includes/layout.njk
@@ -1,5 +1,5 @@
 ---
-siteTitle: Web features explorer
+siteTitle: Web platform features explorer
 ---
 <!DOCTYPE html>
 <html lang="en">
@@ -12,29 +12,19 @@ siteTitle: Web features explorer
   </head>
   <body>
 
-    <header><a href="/">{{ siteTitle }}</a></header>
+    <header>
+      <a href="/">{{ siteTitle }}</a>
 
-    <nav>
-      <ul>
-        <li class="monthly"><a href="/release-notes">Release notes</a></li>
-        <li class="baseline-low"><a href="/newly-available">Newly available</a></li>
-        <li class="baseline-high"><a href="/widely-available">Widely available</a></li>
-        <li class="nobaseline"><a href="/limited-availability">Limited availability</a></li>
-        <li class="nobaseline"><a href="/one-missing-engine">One missing engine</a></li>
-        <li><a href="/all">All</a></li>
-        <li><a href="/groups">Groups</a></li>
-        <li><a href="/browse">Browse features</a></li>
-      </ul>
-    </nav>
+      <nav>
+        <ul>
+          <li><a href="/release-notes/{{ perMonth[0].date | slugify }}">Release notes</a></li>
+          <li><a href="/features">Explore all features</a></li>
+          <li><a href="/about">About</a></li>
+        </ul>
+      </nav>
+    </header>
 
-    <main>
-      {{ content | safe }}
-    </main>
-
-    <footer>
-      <p>Generated on {{ versions.date }} using <a href="https://github.com/web-platform-dx/web-features/">web-features</a> <code>{{ versions.webFeatures }}</code> and <a href="https://github.com/mdn/browser-compat-data/">browser-compat-data</a> <code>{{ versions.bcd }}</code></p>
-      <p>Source code: <a href="https://github.com/web-platform-dx/web-features-explorer">web-features-explorer GitHub repo</a>.</p>
-    </footer>
+    {{ content | safe }}
 
   </body>
 </html>
diff --git a/site/about.njk b/site/about.njk
@@ -0,0 +1,16 @@
+---
+title: About this website
+layout: layout.njk
+---
+
+<main>
+  <h1>{{ title }}</h1>
+
+  <p>The Web platform features explorer website is a project from the <a href="https://www.w3.org/community/webdx/">W3C WebDX Community Group</a> (WebDX CG). Its goal is to provide a visualization of the data from the <a href="https://github.com/web-platform-dx/web-features">web-features</a> repository, which the WebDX CG maintains.</p>
+
+  <p>In addition to displaying the web-features data, this website also links the data to other resources, such as browser-compat-data, MDN documentation, specifications, vendor positions, origin trials, and more.</p>
+
+  <p>The website also displays Baseline information for each web feature. To learn more about Baseline, see <a href="https://web-platform-dx.github.io/web-features/">What is Baseline?</a>.</p>
+
+  <p>The website's content was last generated on {{ versions.date }} using <a href="https://github.com/web-platform-dx/web-features/">web-features</a> <code>{{ versions.webFeatures }}</code> and <a href="https://github.com/mdn/browser-compat-data/">browser-compat-data</a> <code>{{ versions.bcd }}</code>. The source code of the website is at <a href="https://github.com/web-platform-dx/web-features-explorer">web-features-explorer GitHub repo</a>.</p>
+</main>
diff --git a/site/all.njk b/site/all.njk
@@ -3,12 +3,16 @@ title: All features
 layout: layout.njk
 ---
 
-<h1>{{ title }}</h1>
+<main class="explore-features">
+  {% include "feature_list_views.njk" %}
+
+  <h1>{{ title }}</h1>
 
-<ul class="features">
-  {% for feature in allFeatures %}
-    <li>
-      {% include "feature_short.njk" %}
-    </li>
-  {% endfor %}
-</ul>
+  <ul class="features">
+    {% for feature in allFeatures %}
+      <li>
+        {% include "feature_short.njk" %}
+      </li>
+    {% endfor %}
+  </ul>
+</main>