refactor to more idiomatic jaspr code

Author: schultek

site/lib/_sass/_site.scss

@@ -29,14 +29,14 @@
 @use 'components/misc';
 @use 'components/next-prev-nav';
 @use 'components/os-selector';
+@use 'components/pagenav';
 @use 'components/pill';
 @use 'components/quiz';
 @use 'components/sidebar';
 @use 'components/side-menu';
 @use 'components/site-switcher';
 @use 'components/tabs';
 @use 'components/theming';
-@use 'components/toc';
 @use 'components/tooltip';
 @use 'components/trailing';
 

site/lib/_sass/components/_header.scss

@@ -167,3 +167,26 @@ body.open_menu #menu-toggle span.material-symbols {
     }
   }
 }
+
+#site-subheader {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+
+  position: sticky;
+  top: var(--site-header-height);
+  z-index: var(--site-z-subheader);
+  height: var(--site-subheader-height);
+
+  font-family: var(--site-ui-fontFamily);
+  font-size: 0.875rem;
+
+  background-color: var(--site-base-bgColor);
+  border-bottom: 0.1rem solid var(--site-outline-variant);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
+
+  @media (width < 240px), (width >= 1200px) {
+    display: none;
+  }
+}

site/lib/_sass/components/_toc.scss renamed to site/lib/_sass/components/_pagenav.scss

@@ -1,30 +1,4 @@
-#toc-top {
-  font-family: var(--site-ui-fontFamily);
-
-  display: none;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-content: center;
-  height: var(--site-subheader-height);
-
-  @media (min-width: 240px) {
-    display: flex;
-  }
-
-  @media (min-width: 1200px) {
-    display: none;
-  }
-
-  position: sticky;
-  top: var(--site-header-height);
-
-  background-color: var(--site-base-bgColor);
-  border-bottom: 0.1rem solid var(--site-outline-variant);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
-
-  font-size: 0.875rem;
-  z-index: var(--site-z-subheader);
+#pagenav {
 
   >button.dropdown-button {
     display: flex;
@@ -58,25 +32,21 @@
   }
 
   .toc-current {
-    flex-wrap: nowrap;
-    white-space: nowrap;
-    overflow: hidden;
-
     display: none;
 
     @media (min-width: 320px) {
       display: flex;
     }
-  }
-
-  #current-header {
-    color: var(--site-base-fgColor-alt);
 
+    flex-wrap: nowrap;
+    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    color: var(--site-base-fgColor-alt);
   }
 
-  .dropdown-content {
+  #pagenav-content {
     position: absolute;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
     border-bottom: 0.1rem solid var(--site-outline-variant);
@@ -106,7 +76,7 @@
       max-width: 24rem;
     }
 
-    >a {
+    a#return-to-top {
       margin: 0.4rem 0;
       padding: 0.1rem;
       font-size: 1rem;
@@ -134,7 +104,7 @@
       }
     }
 
-    >nav {
+    nav {
       padding: 0.6rem 0 0.8rem;
     }
   }

site/lib/_sass/components/_side-menu.scss

@@ -1,4 +1,4 @@
-.styled-toc-list {
+.toc-list {
   margin: 0;
   --toc-indent: 0;
 

site/lib/_sass/components/_tooltip.scss

@@ -1,7 +1,7 @@
 .tooltip-wrapper {
   position: relative;
 
-  a.tooltip-target {
+  .tooltip-target a {
     color: inherit;
     text-decoration: underline;
     text-decoration-style: dotted;
@@ -10,14 +10,13 @@
   .tooltip {
     visibility: hidden;
 
-    display: flex;
+    display: block;
     position: absolute;
     z-index: var(--site-z-floating);
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
 
-    flex-flow: column nowrap;
     width: 16rem;
 
     background: var(--site-raised-bgColor);
@@ -26,20 +25,22 @@
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
     padding: 0.8rem;
 
-    font-size: 1rem;
+    font-size: 0.875rem;
     font-weight: normal;
     font-style: normal;
 
+    .tooltip-content {
+      display: flex;
+      flex-flow: column nowrap;
+      color: var(--site-secondary-textColor);
+    }
+
     .tooltip-header {
       font-size: 1.2rem;
       font-weight: 500;
       margin-bottom: 0.25rem;
     }
 
-    .tooltip-content {
-      font-size: 0.875rem;
-      color: var(--site-secondary-textColor);
-    }
   }
 
   // On non-touch devices, show tooltip on hover or focus.
@@ -53,10 +54,10 @@
     }
   }
 
-  // On touch devices, show tooltip on click (see global_scripts.dart).
+  // On touch devices, show tooltip on click.
   @media all and (pointer: coarse) {
     .tooltip.visible {
       visibility: visible;
     }
   }
-}
+}

site/lib/main.dart

@@ -21,6 +21,7 @@ import 'src/components/pages/expansion_list.dart';
 import 'src/components/pages/learning_resource_index.dart';
 import 'src/components/tutorial/progress_ring.dart';
 import 'src/components/tutorial/quiz.dart';
+import 'src/components/util/component_ref.dart';
 import 'src/extensions/registry.dart';
 import 'src/layouts/catalog_page_layout.dart';
 import 'src/layouts/doc_layout.dart';
@@ -36,7 +37,7 @@ void main() {
   // Initializes the server environment with the generated default options.
   Jaspr.initializeApp(options: defaultJasprOptions);
 
-  runApp(_docsFlutterDevSite);
+  runApp(ComponentRefScope(child: _docsFlutterDevSite));
 }
 
 Component get _docsFlutterDevSite => ContentApp.custom(