create DownloadableSnippet component

Author: schultek

site/lib/_sass/components/_button.scss

@@ -94,3 +94,22 @@ button {
     }
   }
 }
+
+.segmented-button {
+  display: inline-flex;
+
+  a,
+  button {
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+
+      border-right: 1px solid var(--site-outline-variant);
+    }
+
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}

site/lib/_sass/components/_code.scss

@@ -276,29 +276,59 @@ pre {
 }
 
 .code-block-wrapper {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: min-content 1fr;
+  grid-template-columns: 100%;
 
   margin-block-start: 1rem;
   margin-block-end: 1rem;
   border: 1px solid var(--site-inset-borderColor);
   background-color: var(--site-inset-bgColor);
 
+  transition: grid-template-rows 0.3s ease, border-bottom-width 0.3s ease;
+
+  &.collapsed {
+    grid-template-rows: min-content 0fr;
+    border-bottom-width: 0px;
+
+    .collapse-button > .material-symbols {
+      transform: rotate(180deg);
+    }
+  }
+
+  .collapse-button > .material-symbols {
+    transform: rotate(0deg);
+    transform-origin: center;
+    transition: transform 0.3s ease;
+  }
+
   .code-block-header {
+    display: flex;
+    align-items: center;
+
     background-color: var(--site-raised-bgColor);
     border-bottom: 1px solid var(--site-inset-borderColor);
-    font-size: 0.9375rem;
-    font-weight: 500;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
+    
     padding: 0.75rem 0.5rem 0.67rem 1rem;
+    gap: 0.5rem;
+
+    > span:first-child {
+      flex-grow: 1;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      
+      font-size: 0.9375rem;
+      font-weight: 500;
+    }
   }
 
   .code-block-body {
     flex-grow: 1;
 
     position: relative;
     background: none;
+    min-height: 0;
+    overflow: hidden;
 
     .copy-button {
       position: absolute;

site/lib/jaspr_options.dart

@@ -7,41 +7,45 @@
 import 'package:jaspr/jaspr.dart';
 import 'package:docs_flutter_dev_site/src/client/global_scripts.dart'
     as prefix0;
-import 'package:docs_flutter_dev_site/src/components/common/client/cookie_notice.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/collapse_button.dart'
     as prefix1;
-import 'package:docs_flutter_dev_site/src/components/common/client/copy_button.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/cookie_notice.dart'
     as prefix2;
-import 'package:docs_flutter_dev_site/src/components/common/client/download_latest_button.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/copy_button.dart'
     as prefix3;
-import 'package:docs_flutter_dev_site/src/components/common/client/feedback.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/download_button.dart'
     as prefix4;
-import 'package:docs_flutter_dev_site/src/components/common/client/on_this_page_button.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/download_latest_button.dart'
     as prefix5;
-import 'package:docs_flutter_dev_site/src/components/common/client/os_selector.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/feedback.dart'
     as prefix6;
-import 'package:docs_flutter_dev_site/src/components/common/client/simple_tooltip.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/on_this_page_button.dart'
     as prefix7;
-import 'package:docs_flutter_dev_site/src/components/dartpad/dartpad_injector.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/os_selector.dart'
     as prefix8;
-import 'package:docs_flutter_dev_site/src/components/layout/client/pagenav.dart'
+import 'package:docs_flutter_dev_site/src/components/common/client/simple_tooltip.dart'
     as prefix9;
-import 'package:docs_flutter_dev_site/src/components/layout/menu_toggle.dart'
+import 'package:docs_flutter_dev_site/src/components/dartpad/dartpad_injector.dart'
     as prefix10;
-import 'package:docs_flutter_dev_site/src/components/layout/site_switcher.dart'
+import 'package:docs_flutter_dev_site/src/components/layout/client/pagenav.dart'
     as prefix11;
-import 'package:docs_flutter_dev_site/src/components/layout/theme_switcher.dart'
+import 'package:docs_flutter_dev_site/src/components/layout/menu_toggle.dart'
     as prefix12;
-import 'package:docs_flutter_dev_site/src/components/pages/archive_table.dart'
+import 'package:docs_flutter_dev_site/src/components/layout/site_switcher.dart'
     as prefix13;
-import 'package:docs_flutter_dev_site/src/components/pages/glossary_search_section.dart'
+import 'package:docs_flutter_dev_site/src/components/layout/theme_switcher.dart'
     as prefix14;
-import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_filters.dart'
+import 'package:docs_flutter_dev_site/src/components/pages/archive_table.dart'
     as prefix15;
-import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_filters_sidebar.dart'
+import 'package:docs_flutter_dev_site/src/components/pages/glossary_search_section.dart'
     as prefix16;
-import 'package:docs_flutter_dev_site/src/components/tutorial/client/quiz.dart'
+import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_filters.dart'
     as prefix17;
-import 'package:jaspr_content/components/file_tree.dart' as prefix18;
+import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_filters_sidebar.dart'
+    as prefix18;
+import 'package:docs_flutter_dev_site/src/components/tutorial/client/quiz.dart'
+    as prefix19;
+import 'package:jaspr_content/components/file_tree.dart' as prefix20;
 
 /// Default [JasprOptions] for use with your jaspr project.
 ///
@@ -65,119 +69,136 @@ JasprOptions get defaultJasprOptions => JasprOptions(
       'src/client/global_scripts',
     ),
 
-    prefix1.CookieNotice: ClientTarget<prefix1.CookieNotice>(
+    prefix1.CollapseButton: ClientTarget<prefix1.CollapseButton>(
+      'src/components/common/client/collapse_button',
+      params: _prefix1CollapseButton,
+    ),
+
+    prefix2.CookieNotice: ClientTarget<prefix2.CookieNotice>(
       'src/components/common/client/cookie_notice',
     ),
 
-    prefix2.CopyButton: ClientTarget<prefix2.CopyButton>(
+    prefix3.CopyButton: ClientTarget<prefix3.CopyButton>(
       'src/components/common/client/copy_button',
-      params: _prefix2CopyButton,
+      params: _prefix3CopyButton,
+    ),
+
+    prefix4.DownloadButton: ClientTarget<prefix4.DownloadButton>(
+      'src/components/common/client/download_button',
+      params: _prefix4DownloadButton,
     ),
 
-    prefix3.DownloadLatestButton: ClientTarget<prefix3.DownloadLatestButton>(
+    prefix5.DownloadLatestButton: ClientTarget<prefix5.DownloadLatestButton>(
       'src/components/common/client/download_latest_button',
-      params: _prefix3DownloadLatestButton,
+      params: _prefix5DownloadLatestButton,
     ),
 
-    prefix4.FeedbackComponent: ClientTarget<prefix4.FeedbackComponent>(
+    prefix6.FeedbackComponent: ClientTarget<prefix6.FeedbackComponent>(
       'src/components/common/client/feedback',
-      params: _prefix4FeedbackComponent,
+      params: _prefix6FeedbackComponent,
     ),
 
-    prefix5.OnThisPageButton: ClientTarget<prefix5.OnThisPageButton>(
+    prefix7.OnThisPageButton: ClientTarget<prefix7.OnThisPageButton>(
       'src/components/common/client/on_this_page_button',
     ),
 
-    prefix6.OsSelector: ClientTarget<prefix6.OsSelector>(
+    prefix8.OsSelector: ClientTarget<prefix8.OsSelector>(
       'src/components/common/client/os_selector',
     ),
 
-    prefix7.SimpleTooltip: ClientTarget<prefix7.SimpleTooltip>(
+    prefix9.SimpleTooltip: ClientTarget<prefix9.SimpleTooltip>(
       'src/components/common/client/simple_tooltip',
-      params: _prefix7SimpleTooltip,
+      params: _prefix9SimpleTooltip,
     ),
 
-    prefix8.DartPadInjector: ClientTarget<prefix8.DartPadInjector>(
+    prefix10.DartPadInjector: ClientTarget<prefix10.DartPadInjector>(
       'src/components/dartpad/dartpad_injector',
-      params: _prefix8DartPadInjector,
+      params: _prefix10DartPadInjector,
     ),
 
-    prefix9.PageNav: ClientTarget<prefix9.PageNav>(
+    prefix11.PageNav: ClientTarget<prefix11.PageNav>(
       'src/components/layout/client/pagenav',
-      params: _prefix9PageNav,
+      params: _prefix11PageNav,
     ),
 
-    prefix10.MenuToggle: ClientTarget<prefix10.MenuToggle>(
+    prefix12.MenuToggle: ClientTarget<prefix12.MenuToggle>(
       'src/components/layout/menu_toggle',
     ),
 
-    prefix11.SiteSwitcher: ClientTarget<prefix11.SiteSwitcher>(
+    prefix13.SiteSwitcher: ClientTarget<prefix13.SiteSwitcher>(
       'src/components/layout/site_switcher',
     ),
 
-    prefix12.ThemeSwitcher: ClientTarget<prefix12.ThemeSwitcher>(
+    prefix14.ThemeSwitcher: ClientTarget<prefix14.ThemeSwitcher>(
       'src/components/layout/theme_switcher',
     ),
 
-    prefix13.ArchiveTable: ClientTarget<prefix13.ArchiveTable>(
+    prefix15.ArchiveTable: ClientTarget<prefix15.ArchiveTable>(
       'src/components/pages/archive_table',
-      params: _prefix13ArchiveTable,
+      params: _prefix15ArchiveTable,
     ),
 
-    prefix14.GlossarySearchSection:
-        ClientTarget<prefix14.GlossarySearchSection>(
+    prefix16.GlossarySearchSection:
+        ClientTarget<prefix16.GlossarySearchSection>(
           'src/components/pages/glossary_search_section',
         ),
 
-    prefix15.LearningResourceFilters:
-        ClientTarget<prefix15.LearningResourceFilters>(
+    prefix17.LearningResourceFilters:
+        ClientTarget<prefix17.LearningResourceFilters>(
           'src/components/pages/learning_resource_filters',
         ),
 
-    prefix16.LearningResourceFiltersSidebar:
-        ClientTarget<prefix16.LearningResourceFiltersSidebar>(
+    prefix18.LearningResourceFiltersSidebar:
+        ClientTarget<prefix18.LearningResourceFiltersSidebar>(
           'src/components/pages/learning_resource_filters_sidebar',
         ),
 
-    prefix17.InteractiveQuiz: ClientTarget<prefix17.InteractiveQuiz>(
+    prefix19.InteractiveQuiz: ClientTarget<prefix19.InteractiveQuiz>(
       'src/components/tutorial/client/quiz',
-      params: _prefix17InteractiveQuiz,
+      params: _prefix19InteractiveQuiz,
     ),
   },
-  styles: () => [...prefix18.FileTree.styles],
+  styles: () => [...prefix20.FileTree.styles],
 );
 
-Map<String, dynamic> _prefix2CopyButton(prefix2.CopyButton c) => {
+Map<String, dynamic> _prefix1CollapseButton(prefix1.CollapseButton c) => {
+  'classes': c.classes,
+  'title': c.title,
+};
+Map<String, dynamic> _prefix3CopyButton(prefix3.CopyButton c) => {
   'toCopy': c.toCopy,
   'buttonText': c.buttonText,
   'classes': c.classes,
   'title': c.title,
 };
-Map<String, dynamic> _prefix3DownloadLatestButton(
-  prefix3.DownloadLatestButton c,
+Map<String, dynamic> _prefix4DownloadButton(prefix4.DownloadButton c) => {
+  'name': c.name,
+};
+Map<String, dynamic> _prefix5DownloadLatestButton(
+  prefix5.DownloadLatestButton c,
 ) => {'os': c.os, 'arch': c.arch};
-Map<String, dynamic> _prefix4FeedbackComponent(prefix4.FeedbackComponent c) => {
+Map<String, dynamic> _prefix6FeedbackComponent(prefix6.FeedbackComponent c) => {
   'issueUrl': c.issueUrl,
 };
-Map<String, dynamic> _prefix7SimpleTooltip(prefix7.SimpleTooltip c) => {
+Map<String, dynamic> _prefix9SimpleTooltip(prefix9.SimpleTooltip c) => {
   'target': c.target.toId(),
   'content': c.content.toId(),
 };
-Map<String, dynamic> _prefix8DartPadInjector(prefix8.DartPadInjector c) => {
+Map<String, dynamic> _prefix10DartPadInjector(prefix10.DartPadInjector c) => {
   'title': c.title,
   'theme': c.theme,
   'height': c.height,
   'runAutomatically': c.runAutomatically,
 };
-Map<String, dynamic> _prefix9PageNav(prefix9.PageNav c) => {
+Map<String, dynamic> _prefix11PageNav(prefix11.PageNav c) => {
   'title': c.title,
   'content': c.content.toId(),
 };
-Map<String, dynamic> _prefix13ArchiveTable(prefix13.ArchiveTable c) => {
+Map<String, dynamic> _prefix15ArchiveTable(prefix15.ArchiveTable c) => {
   'os': c.os,
   'channel': c.channel,
 };
-Map<String, dynamic> _prefix17InteractiveQuiz(prefix17.InteractiveQuiz c) => {
+Map<String, dynamic> _prefix19InteractiveQuiz(prefix19.InteractiveQuiz c) => {
   'title': c.title,
   'questions': c.questions.map((i) => i.toJson()).toList(),
 };

site/lib/main.dart

@@ -20,6 +20,7 @@ import 'src/components/pages/archive_table.dart';
 import 'src/components/pages/devtools_release_notes_index.dart';
 import 'src/components/pages/expansion_list.dart';
 import 'src/components/pages/learning_resource_index.dart';
+import 'src/components/tutorial/downloadable_snippet.dart';
 import 'src/components/tutorial/progress_ring.dart';
 import 'src/components/tutorial/quiz.dart';
 import 'src/components/tutorial/summary_card.dart';
@@ -105,6 +106,7 @@ List<CustomComponent> get _embeddableComponents => [
   const Quiz(),
   const ProgressRing(),
   const SummaryCard(),
+  const DownloadableSnippet(),
   CustomComponent(
     pattern: RegExp('OSSelector', caseSensitive: false),
     builder: (_, _, _) => const OsSelector(),

site/lib/src/components/common/button.dart

@@ -94,3 +94,17 @@ enum ButtonStyle {
     ButtonStyle.text => 'text-button',
   };
 }
+
+class SegmentedButton extends StatelessComponent {
+  const SegmentedButton({
+    super.key,
+    required this.children,
+  });
+
+  final List<Component> children;
+
+  @override
+  Component build(BuildContext context) {
+    return span(classes: ['segmented-button'].toClasses, children);
+  }
+}