Wrap the page header and add share button

site/lib/_sass/base/_base.scss

@@ -30,27 +30,12 @@ h1, h2, h3, h4, h5, h6 {
 
 h1, .h1 {
   font-family: var(--site-ui-fontFamily);
-  font-size: 3rem;
+  font-size: 2.75rem;
+  font-weight: 500;
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.material-symbols {
-  font-family: var(--site-icon-fontFamily);
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
-
 h2, .h2 {
   font-size: 1.5rem;
 }
@@ -71,6 +56,22 @@ h6, .h6 {
   font-size: 0.9375rem;
 }
 
+.material-symbols {
+  font-family: var(--site-icon-fontFamily);
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
 dd {
   margin-left: 1rem;
 }

site/lib/_sass/components/_breadcrumbs.scss

@@ -1,12 +1,11 @@
 nav.breadcrumbs {
   align-items: center;
-  margin-block-start: 0.25rem;
-  margin-block-end: 1rem;
 
   ol.breadcrumb-list {
     margin: 0;
-    border-radius: 0.375rem;
-    padding: 0.375rem 0;
+    padding: 0;
+    border-radius: var(--site-radius);
+    font-size: 0.925rem;
 
     align-items: center;
     list-style: none;
@@ -29,7 +28,7 @@ nav.breadcrumbs {
       }
 
       &.active a {
-        color: var(--site-base-fgColor-alt);
+        color: var(--site-base-fgColor-lighter);
         cursor: default;
         text-decoration: none;
       }
@@ -41,6 +40,8 @@ nav.breadcrumbs {
 
     .material-symbols {
       user-select: none;
+      font-size: 1.25rem;
+      color: var(--site-base-fgColor-lighter);
     }
   }
 }

site/lib/_sass/components/_content.scss

@@ -45,8 +45,42 @@ article {
   }
 
   #site-content-title {
-    margin-bottom: 1rem;
+    position: relative;
+    font-family: var(--site-ui-fontFamily);
+    margin-block-end: 1.5rem;
     scroll-margin-top: calc(var(--site-header-height) + var(--site-subheader-height) + 1.25rem);
+
+    &.wrap {
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+
+      background-color: var(--site-raised-bgColor);
+      padding: 1rem;
+      border-radius: var(--site-radius);
+    }
+
+    h1 {
+      text-wrap: pretty;
+    }
+
+    .page-description {
+      margin-block: 0;
+    }
+
+    #page-header-options {
+      position: absolute;
+      top: 0.75rem;
+      right: 0.75rem;
+
+      > button {
+        color: var(--site-base-fgColor-alt);
+      }
+
+      .dropdown-content {
+        right: -0.5rem;
+      }
+    }
   }
 
   h1,

site/lib/_sass/components/_dropdown.scss

@@ -4,12 +4,12 @@
   .dropdown-content {
     display: none;
     position: absolute;
-    background-color: var(--site-chrome-bgColor);
-    color: var(--site-chrome-fgColor);
+    background-color: var(--site-raised-bgColor);
     box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.2);
     border-radius: calc(var(--site-radius) * 1.25);
     width: max-content;
-    border: var(--site-chrome-borderColor) 1px solid;
+    border: rgba(0, 0, 0, 0.15) 1px solid;
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
     z-index: var(--site-z-dropdown);
 
     .dropdown-divider {
@@ -36,6 +36,7 @@
           a, button {
             display: flex;
             align-items: center;
+            justify-content: flex-start;
             flex-direction: row;
             width: 100%;
             gap: 0.4rem;

site/lib/_sass/components/_site-switcher.scss

@@ -11,6 +11,10 @@
 
   .dropdown-content {
     right: -0.5rem;
+    background-color: var(--site-chrome-bgColor);
+    color: var(--site-chrome-fgColor);
+    border: var(--site-chrome-borderColor) 1px solid;
+    box-shadow: none;
   }
 }
 

site/lib/_sass/components/_theming.scss

@@ -3,6 +3,10 @@
 
   > .dropdown-content {
     right: -0.5rem;
+    background-color: var(--site-chrome-bgColor);
+    color: var(--site-chrome-fgColor);
+    border: var(--site-chrome-borderColor) 1px solid;
+    box-shadow: none;
 
     .material-symbols {
       font-size: 20px;

site/lib/jaspr_options.dart

@@ -15,18 +15,20 @@ import 'package:dart_dev_site/src/components/common/client/feedback.dart'
     as prefix4;
 import 'package:dart_dev_site/src/components/common/client/on_this_page_button.dart'
     as prefix5;
-import 'package:dart_dev_site/src/components/dartpad/dartpad_injector.dart'
+import 'package:dart_dev_site/src/components/common/client/page_header_options.dart'
     as prefix6;
-import 'package:dart_dev_site/src/components/layout/menu_toggle.dart'
+import 'package:dart_dev_site/src/components/dartpad/dartpad_injector.dart'
     as prefix7;
-import 'package:dart_dev_site/src/components/layout/site_switcher.dart'
+import 'package:dart_dev_site/src/components/layout/menu_toggle.dart'
     as prefix8;
-import 'package:dart_dev_site/src/components/layout/theme_switcher.dart'
+import 'package:dart_dev_site/src/components/layout/site_switcher.dart'
     as prefix9;
-import 'package:dart_dev_site/src/components/pages/glossary_search_section.dart'
+import 'package:dart_dev_site/src/components/layout/theme_switcher.dart'
     as prefix10;
-import 'package:dart_dev_site/src/components/pages/lint_filter_search_section.dart'
+import 'package:dart_dev_site/src/components/pages/glossary_search_section.dart'
     as prefix11;
+import 'package:dart_dev_site/src/components/pages/lint_filter_search_section.dart'
+    as prefix12;
 
 /// Default [JasprOptions] for use with your jaspr project.
 ///
@@ -73,30 +75,35 @@ JasprOptions get defaultJasprOptions => JasprOptions(
       'src/components/common/client/on_this_page_button',
     ),
 
-    prefix6.DartPadInjector: ClientTarget<prefix6.DartPadInjector>(
+    prefix6.PageHeaderOptions: ClientTarget<prefix6.PageHeaderOptions>(
+      'src/components/common/client/page_header_options',
+      params: _prefix6PageHeaderOptions,
+    ),
+
+    prefix7.DartPadInjector: ClientTarget<prefix7.DartPadInjector>(
       'src/components/dartpad/dartpad_injector',
-      params: _prefix6DartPadInjector,
+      params: _prefix7DartPadInjector,
     ),
 
-    prefix7.MenuToggle: ClientTarget<prefix7.MenuToggle>(
+    prefix8.MenuToggle: ClientTarget<prefix8.MenuToggle>(
       'src/components/layout/menu_toggle',
     ),
 
-    prefix8.SiteSwitcher: ClientTarget<prefix8.SiteSwitcher>(
+    prefix9.SiteSwitcher: ClientTarget<prefix9.SiteSwitcher>(
       'src/components/layout/site_switcher',
     ),
 
-    prefix9.ThemeSwitcher: ClientTarget<prefix9.ThemeSwitcher>(
+    prefix10.ThemeSwitcher: ClientTarget<prefix10.ThemeSwitcher>(
       'src/components/layout/theme_switcher',
     ),
 
-    prefix10.GlossarySearchSection:
-        ClientTarget<prefix10.GlossarySearchSection>(
+    prefix11.GlossarySearchSection:
+        ClientTarget<prefix11.GlossarySearchSection>(
           'src/components/pages/glossary_search_section',
         ),
 
-    prefix11.LintFilterSearchSection:
-        ClientTarget<prefix11.LintFilterSearchSection>(
+    prefix12.LintFilterSearchSection:
+        ClientTarget<prefix12.LintFilterSearchSection>(
           'src/components/pages/lint_filter_search_section',
         ),
   },
@@ -115,7 +122,12 @@ Map<String, dynamic> _prefix3CopyButton(prefix3.CopyButton c) => {
 Map<String, dynamic> _prefix4FeedbackComponent(prefix4.FeedbackComponent c) => {
   'issueUrl': c.issueUrl,
 };
-Map<String, dynamic> _prefix6DartPadInjector(prefix6.DartPadInjector c) => {
+Map<String, dynamic> _prefix6PageHeaderOptions(prefix6.PageHeaderOptions c) => {
+  'title': c.title,
+  'sourceUrl': c.sourceUrl,
+  'issueUrl': c.issueUrl,
+};
+Map<String, dynamic> _prefix7DartPadInjector(prefix7.DartPadInjector c) => {
   'title': c.title,
   'theme': c.theme,
   'height': c.height,

site/lib/src/components/common/client/page_header_options.dart

@@ -0,0 +1,135 @@
+// Copyright (c) 2025, the Dart project authors. Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'package:jaspr/jaspr.dart';
+import 'package:universal_web/js_interop.dart';
+import 'package:universal_web/web.dart' as web;
+
+import '../button.dart';
+import '../dropdown.dart';
+
+@client
+final class PageHeaderOptions extends StatefulComponent {
+  const PageHeaderOptions({
+    required this.title,
+    this.sourceUrl,
+    this.issueUrl,
+    super.key,
+  });
+
+  final String title;
+  final String? sourceUrl;
+  final String? issueUrl;
+
+  @override
+  State<PageHeaderOptions> createState() => _PageHeaderOptionsState();
+}
+
+final class _PageHeaderOptionsState extends State<PageHeaderOptions> {
+  bool _isShareSupported = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _checkShareSupport();
+  }
+
+  void _checkShareSupport() {
+    if (kIsWeb) {
+      try {
+        // Check if the share API is available.
+        _isShareSupported = web.window.navigator.canShare(_shareData);
+      } catch (_) {
+        _isShareSupported = false;
+      }
+      setState(() {});
+    }
+  }
+
+  String get _currentBaseUrl =>
+      web.window.location.origin + web.window.location.pathname;
+
+  web.ShareData get _shareData => web.ShareData(
+    url: _currentBaseUrl,
+    title: component.title,
+  );
+
+  @override
+  Component build(BuildContext _) => Dropdown(
+    id: 'page-header-options',
+    children: [
+      const DropdownToggle(
+        Button(icon: 'more_vert', title: 'View page options.'),
+      ),
+      DropdownContent(
+        nav(
+          classes: 'dropdown-menu',
+          attributes: {
+            'role': 'menu',
+          },
+          [
+            ul(
+              [
+                li(
+                  [
+                    if (_isShareSupported)
+                      Button(
+                        icon: 'share',
+                        content: 'Share page',
+                        onClick: () {
+                          web.window.navigator
+                              .share(_shareData)
+                              .toDart
+                              .ignore();
+                        },
+                      )
+                    else
+                      Button(
+                        icon: 'copy',
+                        content: 'Copy link',
+                        onClick: () {
+                          web.window.navigator.clipboard
+                              .writeText(_currentBaseUrl)
+                              .toDart
+                              .ignore();
+                        },
+                      ),
+                  ],
+                ),
+                if (component.sourceUrl case final sourceUrl?)
+                  li(
+                    [
+                      Button(
+                        icon: 'docs',
+                        content: 'View source',
+                        href: sourceUrl,
+                        attributes: const {
+                          'target': '_blank',
+                          'rel': 'noopener',
+                        },
+                      ),
+                    ],
+                  ),
+                if (component.issueUrl case final issueUrl?)
+                  li(
+                    [
+                      Button(
+                        icon: 'bug_report',
+                        content: 'Report issue',
+                        href: issueUrl,
+                        attributes: const {
+                          'target': '_blank',
+                          'rel': 'noopener',
+                        },
+                      ),
+                    ],
+                  ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    ],
+  );
+}