Migrate to docsy

drift_website/build.yaml

@@ -101,6 +101,15 @@ targets:
             - web/**
           exclude:
             - "web/drift_worker.*"
+      sass_builder:
+        generate_for:
+          - web/*.scss
+        options:
+          silenceDeprecations:
+            # Unfixable with bootstrap 5: https://github.com/twbs/bootstrap/issues/40962
+            - import
+            - color-functions
+            - global-builtin
       # These builders should run in the source_gen target
       drift_dev:preparing_builder:
         enabled: false

drift_website/content/index.md

@@ -1,7 +1,6 @@
 ---
 title: Welcome to Drift!
 description: Drift is a reactive persistence library for relational data in Dart and Flutter apps.
-layout: docs
 ---
 
 Drift is a reactive persistence library for Dart and Flutter applications. It's built on top

drift_website/content/setup.md

@@ -20,7 +20,7 @@ If you want to look at an example app for inspiration, a cross-platform Flutter
 
 First, let's add drift to your project's `pubspec.yaml`.
 In addition to the core drift dependencies (`drift` and `drift_dev` to generate code), we're also
-adding a package to open database on the respective platform.
+adding a package to open databases on the respective platform.
 
 <Tabs defaultValue="sqlite3">
   <TabItem label="Flutter (sqlite3)" value="sqlite3_flutter">

drift_website/lib/_style.scss

@@ -1,52 +0,0 @@
-@use "package:jaspr_content_snippets/common";
-@use "package:jaspr_content_snippets/dracula" as dracula;
-
-@use "src/styles/base";
-@use "src/styles/details";
-@use "src/styles/github";
-@use "src/styles/header";
-@use "src/styles/sidebar";
-@use "src/styles/ui";
-@use "src/styles/constants" as c;
-
-@use "src/jaspr";
-
-:root {
-  @include dracula.light;
-}
-
-// TODO: The rest of jaspr_content uses a custom color picker, migrate everything to
-// media queries.
-@media (prefers-color-scheme: dark) {
-  :root {
-    @include dracula.dark;
-  }
-}
-
-.code-block {
-  margin: 1rem 0rem;
-
-  pre {
-    margin-top: 0.25rem;
-    border-radius: 0.375rem;
-    font-size: 0.875em;
-    line-height: 1.71em;
-
-    code {
-      padding: 0.857em 1.14em 0.857em 1.14em;
-
-      display: block;
-      overflow-x: scroll;
-      white-space: pre;
-    }
-  }
-
-  .boolean {
-    color: var(--code-pink);
-  }
-}
-
-.footnotes {
-  margin-top: 1rem;
-  border-top: 1px solid c.$color-separator;
-}

drift_website/lib/_styles.scss

@@ -0,0 +1,18 @@
+@use "package:jaspr_content_snippets/common";
+@use "package:jaspr_content_snippets/dracula" as dracula;
+
+@use "src/styles/admonition";
+@use "src/styles/details";
+@use "src/styles/ui";
+
+@import "package:jaspr_docsy/style";
+
+:root {
+  @include dracula.light;
+}
+
+@include color-mode(dark) {
+  :root {
+    @include dracula.dark;
+  }
+}

drift_website/lib/jaspr_options.dart

@@ -5,16 +5,10 @@
 // Generated with jaspr_builder
 
 import 'package:jaspr/jaspr.dart';
-import 'package:drift_website/src/components/sidebar_toggle_button.dart'
-    as prefix0;
+import 'package:drift_website/src/components/anchors.dart' as prefix0;
 import 'package:drift_website/src/components/web_compatibility.dart' as prefix1;
-import 'package:jaspr_content/components/_internal/tab_bar.dart' as prefix2;
-import 'package:jaspr_content/components/_internal/zoomable_image.dart'
-    as prefix3;
-import 'package:jaspr_content/components/github_button.dart' as prefix4;
-import 'package:jaspr_content/components/image.dart' as prefix5;
-import 'package:jaspr_content/components/tabs.dart' as prefix6;
-import 'package:jaspr_content_snippets/internal/client.dart' as prefix7;
+import 'package:jaspr_content_snippets/internal/client.dart' as prefix2;
+import 'package:jaspr_docsy/internal/tabs.dart' as prefix3;
 
 /// Default [JasprOptions] for use with your jaspr project.
 ///
@@ -34,53 +28,25 @@ import 'package:jaspr_content_snippets/internal/client.dart' as prefix7;
 /// ```
 JasprOptions get defaultJasprOptions => JasprOptions(
   clients: {
-    prefix0.SidebarToggleButton: ClientTarget<prefix0.SidebarToggleButton>(
-      'src/components/sidebar_toggle_button',
+    prefix0.ActiveAnchors: ClientTarget<prefix0.ActiveAnchors>(
+      'src/components/anchors',
     ),
 
     prefix1.WebCompatibilityCheck: ClientTarget<prefix1.WebCompatibilityCheck>(
       'src/components/web_compatibility',
     ),
 
-    prefix2.TabBar: ClientTarget<prefix2.TabBar>(
-      'jaspr_content:components/_internal/tab_bar',
-      params: _prefix2TabBar,
-    ),
-
-    prefix3.ZoomableImage: ClientTarget<prefix3.ZoomableImage>(
-      'jaspr_content:components/_internal/zoomable_image',
-      params: _prefix3ZoomableImage,
-    ),
-
-    prefix4.GitHubButton: ClientTarget<prefix4.GitHubButton>(
-      'jaspr_content:components/github_button',
-      params: _prefix4GitHubButton,
-    ),
-
-    prefix7.CodeBlockCopyButton: ClientTarget<prefix7.CodeBlockCopyButton>(
+    prefix2.CodeBlockCopyButton: ClientTarget<prefix2.CodeBlockCopyButton>(
       'jaspr_content_snippets:internal/client',
     ),
+
+    prefix3.InternalTabHeaders: ClientTarget<prefix3.InternalTabHeaders>(
+      'jaspr_docsy:internal/tabs',
+      params: _prefix3InternalTabHeaders,
+    ),
   },
-  styles: () => [
-    ...prefix2.TabBar.styles,
-    ...prefix3.ZoomableImage.styles,
-
-    ...prefix4.GitHubButton.styles,
-    ...prefix5.Image.styles,
-
-    ...prefix6.Tabs.styles,
-  ],
+  styles: () => [],
 );
 
-Map<String, dynamic> _prefix2TabBar(prefix2.TabBar c) => {
-  'initialValue': c.initialValue,
-  'items': c.items,
-};
-Map<String, dynamic> _prefix3ZoomableImage(prefix3.ZoomableImage c) => {
-  'src': c.src,
-  'alt': c.alt,
-  'caption': c.caption,
-};
-Map<String, dynamic> _prefix4GitHubButton(prefix4.GitHubButton c) => {
-  'repo': c.repo,
-};
+Map<String, dynamic> _prefix3InternalTabHeaders(prefix3.InternalTabHeaders c) =>
+    {'items': c.items};

drift_website/lib/main.dart

@@ -6,12 +6,11 @@
 // Server-specific jaspr import.
 import 'package:jaspr/server.dart';
 
-import 'package:jaspr_content/components/image.dart';
-import 'package:jaspr_content/components/tabs.dart';
 import 'package:jaspr_content/jaspr_content.dart';
 import 'package:jaspr_content/theme.dart';
 import 'package:jaspr_content_snippets/jaspr_content_snippets.dart';
 import 'package:watcher/watcher.dart';
+import 'package:jaspr_docsy/jaspr_docsy.dart';
 
 // This file is generated automatically by Jaspr, do not remove or edit.
 import 'jaspr_options.dart';
@@ -73,13 +72,9 @@ void main() {
           ],
           components: [
             PageRef(),
-            // The <Info> block and other callouts.
-            //Callout(),
             BetterCodeBlock(),
             Collapsible.component(),
-            // Adds zooming and caption support to images.
-            Image(zoom: true),
-            Tabs(),
+            DocsyTabs(),
             renderedSnippetComponent(snippets: generatedSnippets),
             CustomComponent(
               pattern: 'WebCompatibilityCheck',

drift_website/lib/src/components/anchors.dart

@@ -0,0 +1,71 @@
+import 'package:jaspr/browser.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:universal_web/web.dart' as web;
+
+import 'web_compatibility_unsupported.dart'
+    if (dart.library.js_interop) 'web_compatibility_web.dart';
+
+/// In the table of contents section, sets an `.active` class on the current
+/// section that auto-updates as the window is scrolled.
+@client
+final class ActiveAnchors extends StatefulComponent {
+  @override
+  State<StatefulComponent> createState() {
+    return _AnchorsState();
+  }
+}
+
+final class _AnchorsState extends State<ActiveAnchors> {
+  @override
+  void initState() {
+    super.initState();
+
+    final node = context.node as web.Element;
+    final links = node.querySelectorAll('li > a');
+    final allLinks = <web.HTMLAnchorElement>[];
+    final targetToLink = <web.HTMLElement, web.HTMLAnchorElement>{};
+    web.HTMLAnchorElement? active;
+
+    for (var i = 0; i < links.length; i++) {
+      final link = links.item(i)! as web.HTMLAnchorElement;
+      final name = Uri.parse(link.href).fragment;
+      if (web.document.getElementById(name) case web.HTMLElement element) {
+        allLinks.add(link);
+        targetToLink[element] = link;
+      }
+    }
+
+    web.EventStreamProviders.scrollEvent.forTarget(web.window).listen((_) {
+      // Find the last heading with a negative y offset (meaning the user has
+      // scrolled past it).
+      web.HTMLAnchorElement? scrolledPast;
+
+      for (final MapEntry(:key, :value) in targetToLink.entries) {
+        final rect = key.getBoundingClientRect();
+
+        if (rect.top < 50) {
+          scrolledPast = value;
+        } else {
+          break;
+        }
+      }
+
+      if (scrolledPast != active) {
+        for (final link in allLinks) {
+          if (link == active) {
+            link.classList.remove('active');
+          } else if (link == scrolledPast) {
+            link.classList.add('active');
+          }
+        }
+
+        active = scrolledPast;
+      }
+    });
+  }
+
+  @override
+  Component build(BuildContext context) {
+    return const Component.empty();
+  }
+}

drift_website/lib/src/components/footer.dart

@@ -0,0 +1,35 @@
+import 'package:jaspr/jaspr.dart';
+import 'package:jaspr_docsy/jaspr_docsy.dart';
+
+final class DriftFooter extends StatelessComponent {
+  const DriftFooter();
+
+  @override
+  Component build(BuildContext context) {
+    return Footer(
+      left: FooterLinks(
+        children: [
+          FooterLink(
+            title: 'Drift on GitHub',
+            href: 'https://github.com/simolus3/drift',
+            child: i(classes: 'fa-brands fa-github', []),
+          ),
+        ],
+      ),
+      center: span(classes: 'td-footer__authors', [
+        text('©2019–2025'),
+        span(classes: 'td-footer__authors', [
+          text('Simon Binder, Drift authors. Documentation licensed under '),
+          a(href: 'https://creativecommons.org/publicdomain/zero/1.0/', [
+            text('CC0 1.0'),
+          ]),
+          text(', Drift itself is '),
+          a(href: 'https://github.com/simolus3/drift/blob/develop/LICENSE', [
+            text('MIT-licensed'),
+          ]),
+        ]),
+      ]),
+      right: Component.empty(),
+    );
+  }
+}

drift_website/lib/src/components/header.dart

@@ -1,8 +1,7 @@
 import 'package:jaspr/jaspr.dart';
-import 'package:jaspr_content/components/github_button.dart';
+import 'package:jaspr_docsy/jaspr_docsy.dart';
 
 import '../navigation.dart';
-import 'sidebar_toggle_button.dart';
 
 final class DriftHeader extends StatelessComponent {
   const DriftHeader();
@@ -11,20 +10,17 @@ final class DriftHeader extends StatelessComponent {
   Component build(BuildContext context) {
     final currentTab = DriftTab.current(context);
 
-    return header([
-      nav([
-        div([
-          const SidebarToggleButton(),
-          a(href: '/', [text('Drift')]),
-        ]),
-        GitHubButton(repo: 'simolus3/drift'),
-      ]),
-      div(classes: 'tabs', [
+    return Navbar(
+      brand: NavbarBrand(href: '/', title: text('Drift')),
+      items: [
         for (final tab in DriftTab.all)
-          a(classes: tab == currentTab ? 'active' : '', href: tab.page, [
-            text(tab.name),
-          ]),
-      ]),
-    ]);
+          NavbarLink(
+            href: tab.page,
+            active: tab == currentTab,
+            children: [text(tab.name)],
+          ),
+      ],
+      search: NavbarSearchInput(),
+    );
   }
 }

drift_website/lib/src/components/sidebar.dart

@@ -1,5 +1,5 @@
 import 'package:jaspr/jaspr.dart';
-import 'package:jaspr_content/components/_internal/icon.dart';
+import 'package:jaspr_docsy/jaspr_docsy.dart';
 
 import '../navigation.dart';
 
@@ -10,9 +10,16 @@ final class DriftSidebar extends StatelessComponent {
   Component build(BuildContext context) {
     final tab = DriftTab.current(context) ?? DriftTab.docs;
 
-    return nav(classes: 'sidebar', [
-      button(classes: 'sidebar-close', [const CloseIcon(size: 20)]),
-      div([for (final group in tab.groups) group]),
-    ]);
+    return Sidebar(
+      search: NavbarSearchInput(),
+      entries: [
+        SidebarEntry(
+          href: tab.page,
+          title: text(tab.name),
+          activePath: true,
+          children: [for (final group in tab.groups) group],
+        ),
+      ],
+    );
   }
 }

drift_website/lib/src/components/toc.dart

@@ -0,0 +1,47 @@
+import 'package:jaspr/server.dart';
+import 'package:jaspr_content/jaspr_content.dart';
+import 'package:jaspr_content/jaspr_content.dart' as jaspr;
+
+import 'anchors.dart';
+
+final class TableOfContents extends StatelessComponent {
+  const TableOfContents();
+
+  @override
+  Component build(BuildContext context) {
+    final toc = context.page.data['toc'] as jaspr.TableOfContents?;
+    if (toc == null) {
+      return const Component.empty();
+    }
+
+    return fragment([
+      div(classes: 'td-toc', [
+        div(classes: 'td-toc__title', [
+          span(classes: 'td-toc__title__text', [text('On this page')]),
+          a(
+            classes: 'td-toc__title__link',
+            href: '#',
+            attributes: {'title': 'Top of the page'},
+            [],
+          ),
+        ]),
+        nav(id: 'TableOfContents', [ActiveAnchors(), toc.render()]),
+      ]),
+    ]);
+  }
+}
+
+extension on jaspr.TableOfContents {
+  Component render() {
+    return ul([..._buildToc(entries)]);
+  }
+
+  Iterable<Component> _buildToc(List<TocEntry> toc) sync* {
+    for (final entry in toc) {
+      yield li([
+        a(href: '#${entry.id}', [text(entry.text)]),
+        if (entry.children.isNotEmpty) ul([..._buildToc(entry.children)]),
+      ]);
+    }
+  }
+}

drift_website/lib/src/components/web_compatibility_unsupported.dart

@@ -1,3 +1,10 @@
+import 'package:jaspr/jaspr.dart';
+import 'package:universal_web/web.dart' as web;
+
 Future<String> determineDriftWasmCompatibility() async {
   throw UnsupportedError('Only runs on clients');
 }
+
+extension ResolveDomNode on BuildContext {
+  web.Node get node => throw UnsupportedError('Only runs on clients');
+}

drift_website/lib/src/components/web_compatibility_web.dart

@@ -1,4 +1,6 @@
 import 'package:drift/wasm.dart';
+import 'package:jaspr/browser.dart';
+import 'package:universal_web/web.dart' as web;
 
 Future<String> determineDriftWasmCompatibility() async {
   final db = await WasmDatabase.open(
@@ -14,3 +16,13 @@ Chosen implementation: ${db.chosenImplementation}
 Features missing: ${db.missingFeatures}
 ''';
 }
+
+extension ResolveDomNode on BuildContext {
+  web.Node get node {
+    final element = this as BuildableElement;
+    final parent =
+        element.parentRenderObjectElement!.renderObject as DomRenderObject;
+
+    return parent.node;
+  }
+}

drift_website/lib/src/layouts/docs.dart

@@ -1,56 +1,34 @@
 import 'package:jaspr/server.dart';
-import 'package:jaspr_content/jaspr_content.dart';
+import 'package:jaspr_content/jaspr_content.dart' hide TableOfContents;
+import 'package:jaspr_docsy/jaspr_docsy.dart';
 
+import '../components/footer.dart';
 import '../components/header.dart';
 import '../components/sidebar.dart';
+import '../components/toc.dart';
 
-final class DriftDocsLayout extends DocsLayout {
+final class DriftDocsLayout extends DocsyLayout {
   DriftDocsLayout({
+    super.navbar = const DriftHeader(),
+    super.footer = const DriftFooter(),
     super.sidebar = const DriftSidebar(),
-    super.header = const DriftHeader(),
-    super.footer,
+    super.toc = const TableOfContents(),
   });
 
   @override
   Iterable<Component> buildHead(Page page) sync* {
     yield* super.buildHead(page).where((e) => e is! Style);
-    yield link(href: '/style.css', rel: 'stylesheet');
+    yield link(href: '/styles.css', rel: 'stylesheet');
   }
 
   @override
-  Component buildBody(Page page, Component child) {
-    final pageData = page.data.page;
-
-    return fragment([
-      if (this.header case final header?) header,
-      div(classes: 'main-container', [
-        div(classes: 'sidebar-barrier', attributes: {'role': 'button'}, []),
-        if (sidebar case final sidebar?)
-          div(classes: 'sidebar-container', [sidebar]),
-        main_([
-          div([
-            div(classes: 'content-container', [
-              div(classes: 'content-header', [
-                if (pageData['title'] case String title) h1([text(title)]),
-                if (pageData['description'] case String description)
-                  p([text(description)]),
-                if (pageData['image'] case String image)
-                  img(src: image, alt: pageData['imageAlt'] as String?),
-              ]),
-              child,
-              if (this.footer case final footer?)
-                div(classes: 'content-footer', [footer]),
-            ]),
-            aside(classes: 'toc', [
-              if (page.data['toc'] case TableOfContents toc)
-                div([
-                  h3([text('On this page')]),
-                  toc.build(),
-                ]),
-            ]),
-          ]),
-        ]),
-      ]),
-    ]);
+  Component buildContent(Page page, Component child) {
+    return PageContent(page: page, renderedMarkdown: child);
   }
+
+  @override
+  Pattern get name => 'docs';
+
+  @override
+  PageType get type => PageType.page;
 }

drift_website/lib/src/navigation.dart

@@ -1,5 +1,6 @@
 import 'package:jaspr/jaspr.dart';
 import 'package:jaspr_content/jaspr_content.dart';
+import 'package:jaspr_docsy/jaspr_docsy.dart';
 
 import 'components/broken.dart';
 import 'components/inherited_page.dart';
@@ -22,11 +23,12 @@ final class DriftPage extends StatelessComponent {
       return BrokenComponent('$title $definingFile');
     }
 
-    return li([
-      div(classes: currentRoute == referencedPage.url ? 'active' : null, [
-        a(href: referencedPage.url, [text(title)]),
-      ]),
-    ]);
+    return SidebarEntry(
+      href: referencedPage.url,
+      title: text(title),
+      depth: 3,
+      activePath: currentRoute == referencedPage.url,
+    );
   }
 }
 
@@ -38,10 +40,16 @@ final class DriftPageGroup extends StatelessComponent {
 
   @override
   Component build(BuildContext context) {
-    return div(classes: 'sidebar-group', [
-      if (title case final title?) h3([text(title)]),
-      ul([for (final page in pages) page]),
-    ]);
+    return SidebarEntry(
+      href: null,
+      depth: 2,
+      title: switch (title) {
+        null => null,
+        final title => text(title),
+      },
+
+      children: pages,
+    );
   }
 }
 

drift_website/lib/src/styles/_base.scss

@@ -1,84 +0,0 @@
-:root {
-  --primary: oklch(0.623 0.214 259.815);
-  --background: oklch(0.984 0.003 247.858);
-  --background-card: #fefefe;
-  --text: oklch(0.373 0.034 259.733);
-  --content-headings: oklch(0.21 0.034 264.665);
-  --content-lead: oklch(0.446 0.03 256.802);
-  --content-links: oklch(0.21 0.034 264.665);
-  --content-bold: oklch(0.21 0.034 264.665);
-  --content-counters: oklch(0.551 0.027 264.364);
-  --content-bullets: oklch(0.872 0.01 258.338);
-  --content-hr: oklch(0.928 0.006 264.531);
-  --content-quotes: oklch(0.21 0.034 264.665);
-  --content-quote-borders: oklch(0.707 0.165 254.624);
-  --content-captions: oklch(0.551 0.027 264.364);
-  --content-kbd: oklch(0.21 0.034 264.665);
-  --content-kbd-shadows: oklch(0.21 0.034 264.665);
-  --content-code: oklch(0.21 0.034 264.665);
-  --content-pre-code: oklch(0.928 0.006 264.531);
-  --content-pre-bg: oklch(0.278 0.033 256.848);
-  --content-th-borders: oklch(0.872 0.01 258.338);
-  --content-td-borders: oklch(0.928 0.006 264.531);
-
-  @media (prefers-color-scheme: dark) {
-    --primary: oklch(0.809 0.105 251.813);
-    --background: oklch(0.141 0.005 285.823);
-    --background-card: #3f3f2f;
-    --text: oklch(0.928 0.006 264.531);
-    --content-headings: white;
-    --content-lead: oklch(0.707 0.022 261.325);
-    --content-links: white;
-    --content-bold: white;
-    --content-counters: oklch(0.707 0.022 261.325);
-    --content-bullets: oklch(0.446 0.03 256.802);
-    --content-hr: oklch(0.373 0.034 259.733);
-    --content-quotes: oklch(0.967 0.003 264.542);
-    --content-captions: oklch(0.707 0.022 261.325);
-    --content-kbd: white;
-    --content-kbd-shadows: white;
-    --content-code: white;
-    --content-pre-code: oklch(0.872 0.01 258.338);
-    --content-pre-bg: rgb(0 0 0 / 50%);
-    --content-th-borders: oklch(0.446 0.03 256.802);
-    --content-td-borders: oklch(0.373 0.034 259.733);
-  }
-}
-
-:host,html {
-  font-family: 'Open Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  line-height: 1.5em;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  tab-size: 4;
-  font-feature-settings: normal;
-  font-variation-settings: normal;
-  -webkit-tap-highlight-color: transparent;
-}
-
-body {
-  margin: 0;
-  line-height: inherit;
-  -webkit-font-smoothing: antialiased;
-}
-
-hr {
-  height: 0;
-  border-top-style: solid;
-  border-top-width: 1px;
-  color: inherit;
-}
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-b, strong {
-  font-weight: bolder;
-}
-
-small {
-  font-size: 80%;
-}
-

drift_website/lib/src/styles/_details.scss

@@ -35,7 +35,7 @@
   summary {
     @extend .admonition-title;
 
-    display: block;
+    display: block !important;
     min-height: px2rem(20px);
     padding-inline-end: px2rem(36px);
     // Hack: Work around Firefox bug that renders a subpixel outline when

drift_website/lib/src/styles/_github.scss

@@ -1,50 +0,0 @@
-.github-button {
-  display: flex;
-  padding: 0.7rem 0.4rem;
-  border-radius: 8px;
-  align-items: center;
-  column-gap: 0.5rem;
-  font-size: 0.7rem;
-  text-decoration: none;
-  line-height: 1.2em;
-
-  &:hover {
-    background-color: color-mix(in srgb, currentColor 5%, transparent);
-  }
-
-  & * {
-    transition: opacity 200ms ease-in-out;
-  }
-
-  &:hover * {
-    opacity: 1!important;
-  }
-
-  .github-icon {
-    width: 1.2rem;
-  }
-
-  .github-info {
-    display: flex;
-    flex-direction: column;
-
-    & > span:first-child {
-        margin-bottom: 2px;
-        opacity: 0.9;
-        font-family: "monospace";
-    }
-
-    & > span:last-child {
-        display: flex;
-        opacity: 0.7;
-        align-items: center;
-        column-gap: 0.3em;
-        font-size: 0.9em;
-        font-weight: 800;
-
-        span {
-            font-weight: 500;
-        }
-    }
-  }
-}

drift_website/lib/src/styles/_header.scss

@@ -1,65 +0,0 @@
-@use "constants" as *;
-
-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  backdrop-filter: blur(8px);
-
-  nav {
-    height: $nav-height;
-    display: flex;
-    align-items: center;
-    column-gap: 1rem;
-    max-width: 90rem;
-    padding: .25rem 1rem;
-    margin: auto auto;
-
-    @include from-medium {
-        padding: 0.25rem 2rem;
-    }
-
-    & >:first-child {
-        flex-grow: 1;
-        display: inline-flex;
-        align-items: center;
-        gap: 0.75rem;
-        font-weight: 700;
-    }
-
-    & >:not(:first-child) {
-        display: flex;
-        gap: 0.25rem;
-    }
-  }
-
-  .tabs {
-    height: $tabs-height;
-    border-bottom: 1px solid $color-separator;
-    overflow-x: scroll;
-    padding: 0rem 1rem;
-
-    &>a {
-      padding: 0.25rem 1rem;
-    }
-
-    .active {
-      border-bottom: 2px solid var(--primary);
-      font-weight: bold;
-    }
-  }
-}
-
-.sidebar-toggle-button {
-  display: none;
-  justify-content: center;
-  align-items: center;
-  width: 2rem;
-  height: 2rem;
-
-  @include until-large {
-    display: flex;
-  }
-}

drift_website/lib/src/styles/_sidebar.scss

@@ -1,76 +0,0 @@
-.sidebar {
-    position: relative;
-    padding-top: 0.75rem;
-    padding-left: 0.5rem;
-    padding-bottom: 1.25rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-}
-
-@media all and (min-width: 1024px) {
-    .sidebar {
-        padding-top: 0;
-    }
-}
-
-.sidebar .sidebar-close {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-}
-
-@media all and (min-width: 1024px) {
-    .sidebar .sidebar-close {
-        display: none;
-    }
-}
-
-.sidebar .sidebar-group {
-    padding-top: 1.5rem;
-    padding-right: 0.75rem;
-}
-
-.sidebar .sidebar-group h3 {
-    padding-left: 0.75rem;
-    margin-top: 0;
-    margin-bottom: 1rem;
-    font-size: 14px;
-    font-weight: 600;
-}
-
-.sidebar .sidebar-group ul {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-}
-
-.sidebar .sidebar-group li div {
-    display: flex;
-    margin-bottom: 1px;
-    border-radius: 0.375rem;
-    opacity: 0.75;
-    overflow: hidden;
-    transition: all 150ms ease-in-out;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.sidebar .sidebar-group li div:hover {
-    opacity: 1.0;
-    background-color: #0000000d;
-}
-
-.sidebar .sidebar-group li div.active {
-    opacity: 1.0;
-    color: var(--primary);
-    font-weight: 700;
-    background-color: color-mix(in srgb, currentColor 15%, transparent);
-}
-
-.sidebar .sidebar-group li a {
-    display: inline-flex;
-    padding-top: 0.5rem;
-    padding-left: 12px;
-    padding-bottom: 0.5rem;
-    flex-grow: 1;
-}

drift_website/pubspec.yaml

@@ -1,6 +1,7 @@
 name: drift_website
 description: A documentation site built with Jaspr
 version: 0.0.1
+publish_to: none
 
 environment:
   sdk: '>=3.8.0 <4.0.0'
@@ -26,6 +27,9 @@ dependencies:
   jaspr_content_snippets: ^0.1.3
   glob: ^2.1.3
   markdown: ^7.3.0
+  jaspr_docsy:
+    path: /home/simon/src/jaspr_tools/jaspr_docsy
+  universal_web: ^1.1.1
 
 dev_dependencies:
   build_runner: ^2.6.0
@@ -34,7 +38,7 @@ dev_dependencies:
 #  jaspr_lints: ^0.5.1
   lints: ^5.0.0
   json_serializable: ^6.11.1
-  sass_builder: ^2.3.1
+  sass_builder: ^2.4.0
 
   jaspr_cli:
     # This stops jaspr from messing with the builder configuration. Upstream PR:

drift_website/web/style.scss

@@ -1 +0,0 @@
-@use "package:drift_website/style";

drift_website/web/styles.scss

@@ -0,0 +1 @@
+@import "package:drift_website/styles";