[Docs] - Re-organized pages, updated theming

Author: matthew-carroll

doc/website/source/_data.yaml

@@ -37,12 +37,20 @@ navigation:
     - title: "Get Started"
       url: /get-started
 
+    - title: Galleries
+      tag: gallery
+      sortBy: navOrder
+
+    - title: Timelines
+      tag: timeline
+      sortBy: navOrder
+
     - title: Golden Scenes
-      tag: scenes
+      tag: golden-scenes
       sortBy: navOrder
 
-    - title: How it Works
-      tag: how-it-works
+    - title: Failure Scenes
+      tag: failure-scenes
       sortBy: navOrder
 
     - title: Flutter's Implementation

doc/website/source/_includes/components/highlightJs.jinja

@@ -23,13 +23,15 @@
 
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/obsidian.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/dart.min.js"></script>
-    <script>hljs.highlightAll();</script>
+    <script>
+      hljs.highlightAll();
+    </script>
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
 
     <link rel="stylesheet" href="/styles/docs_page_layout.css">
-    <link rel="stylesheet" href="/styles/docs_page_layout_light.css">
     <link rel="stylesheet" href="/styles/docs_page_layout_dark.css">
   </head>
 
@@ -97,11 +99,17 @@
 
         <!-- Page/article content -->
         <main class="page-content col-12 col-lg-10 col-xl-8">
+          {% if headerImage is defined %}
+          <header class="image">
+            <img class="background" src="{{ headerImage }}">
+          </header>
+          {% else %}
           <header>
             <h1>{{  title  }}</h1>
           </header>
+          {% endif %}
 
-         {{   content   }}
+          {{   content   }}
         </main>
 
         <!-- Table of contents for the page/article on desktop -->
@@ -126,12 +134,12 @@
       // - not in an "onload" function - because we need this code to
       // run before anything is painted. Otherwise we get a flicker from
       // light mode to dark mode on load.
-      var brightness = localStorage.getItem('brightness');
-      if (brightness === "light" || brightness === null) {
-        goToLightMode();
-      } else {
+      //var brightness = localStorage.getItem('brightness');
+      //if (brightness === "light" || brightness === null) {
+      //  goToLightMode();
+      //} else {
         goToDarkMode();
-      }
+      //}
 
       // Configure the global text search input.
       //docsearch({
@@ -158,10 +166,6 @@
         // For Algolia Docsearch bar theme
         html.setAttribute("data-theme", "light");
 
-        var button = document.getElementById("brightness-button");
-        button.classList.remove("fa-sun");
-        button.classList.add("fa-moon");
-
         localStorage.setItem('brightness', 'light');
       }
 
@@ -172,10 +176,6 @@
         // For Algolia Docsearch bar theme
         html.setAttribute("data-theme", "dark");
 
-        var button = document.getElementById("brightness-button");
-        button.classList.remove("fa-moon");
-        button.classList.add("fa-sun");
-
         localStorage.setItem('brightness', 'dark');
       }
     </script>

doc/website/source/_includes/layouts/docs_page.jinja

@@ -0,0 +1 @@
+tags: failure-scenes

doc/website/source/failure-scenes/_data.yaml

@@ -1,6 +1,6 @@
 ---
-title: Failures
-navOrder: 40
+title: What is a Failure Scene?
+navOrder: 10
 ---
 Building on the concept of [Golden Scenes](/golden-scenes/what-is-it), `flutter_test_goldens` introduces
 the concept of "Failure Scenes". A Failure Scene is just like a Golden Scene, except instead of painting

doc/website/source/golden-scenes/failures.md renamed to doc/website/source/failure-scenes/failures.md

@@ -0,0 +1 @@
+tags: gallery

doc/website/source/gallery/_data.yaml

@@ -1,6 +1,7 @@
 ---
 title: Gallery
 navOrder: 20
+headerImage: /images/gallery.png
 ---
 A gallery is a Golden Scene, which includes a variety of different widgets
 and/or widget configurations.

doc/website/source/golden-scenes/gallery.md renamed to doc/website/source/gallery/gallery.md

@@ -0,0 +1,22 @@
+---
+title: Single Shot
+navOrder: 10
+headerImage: /images/single_shot_website_header.png
+---
+A "single shot" is a gallery that displays only one golden image. Most golden use-cases
+involve multiple related golden images, but sometimes you only need one. That's when you
+should use a `SingleShot`.
+
+```dart
+void main() {
+  testGoldenScene("Calendar", (tester) async {
+    await SingleShot("Calendar", fileName: "shadcn-calendar") //
+        .fromWidget(ShadCalendar())
+        .inScaffold(shadcnItemScaffold)
+        .withLayout(ShadcnSingleShotSceneLayout(
+          shadcnWordmarkProvider: shadcnWordmarkProvider,
+        ))
+        .run(tester);   
+  });
+}
+```

doc/website/source/gallery/single-shot.md

@@ -11,5 +11,5 @@ dev_dependencies:
 With the packaged added, you may want to accomplish a variety of goals:
 
  * [Write a gallery test](/golden-scenes/gallery)
- * [Write a film strip test](/golden-scenes/filmstrip)
+ * [Write a timeline test](/golden-scenes/filmstrip)
  * [Add focus and semantic tracking](/golden-metadata/payload)

doc/website/source/get-started.md

@@ -1 +1 @@
-tags: scenes
+tags: golden-scenes