Individual pages for diagnostic docs (#6573)

Following the split we did for linter rule documentation, move all
diagnostic docs to their own page at
`/tools/diagnostics/<diagnostic_name>`. This allows for increased focus
and improved loading time when a developer navigates to the
documentation for a diagnostic from their IDE.

As the docs are moved to individual pages, also introduce a new index of
diagnostics at `/tools/diagnostics`. This shares some styles with the
[linter rule index](https://dart.dev/tools/linter-rules#rules) and now
includes diagnostics without extra documentation to serve as a more
complete index. Each diagnostic is included as a card with: its name,
its problem messages, a copy button, and a learn more button if it has a
full page.

Contributes to #4499

**Staged index:**
https://dart-dev--pr6573-feat-diagnostic-message-pages-kre5no9y.web.app/tools/diagnostics
**Staged non-lint diagnostic:**
https://dart-dev--pr6573-feat-diagnostic-message-pages-kre5no9y.web.app/tools/diagnostics/definitely_unassigned_late_local_variable
**Staged lint diagnostic:**
https://dart-dev--pr6573-feat-diagnostic-message-pages-kre5no9y.web.app/tools/diagnostics/prefer_final_locals

---------

Co-authored-by: Amanda Fitch <18406675+antfitch@users.noreply.github.com>

Author: parlough

firebase.json

@@ -120,8 +120,8 @@
       { "source": "/deprecated/sound-problems", "destination": "/language/type-system", "type": 301 },
       { "source": "/devices", "destination": "/overview#platform", "type": 301 },
       { "source": "/dev{,/**}", "destination": "https://api.dart.dev/dev", "type": 301 },
-      { "source": "/diagnostics", "destination": "/tools/diagnostic-messages", "type": 301 },
-      { "source": "/diagnostics/:code*", "destination": "/tools/diagnostic-messages?utm_source=dartdev&utm_medium=redir&utm_id=diagcode&utm_content=:code#:code", "type": 301 },
+      { "source": "/diagnostics", "destination": "/tools/diagnostics", "type": 301 },
+      { "source": "/diagnostics/:code*", "destination": "/tools/diagnostics/:code/?utm_source=dartdev&utm_medium=redir&utm_id=diagcode&utm_content=:code", "type": 301 },
       { "source": "/docs/api{,/**}", "destination": "https://api.dart.dev", "type": 301 },
       { "source": "/docs/cookbook", "destination": "/language", "type": 301 },
       { "source": "/docs/dart-up-and-running/**/ch02", "destination": "/language", "type": 301 },
@@ -410,6 +410,8 @@
       { "source": "/tools/dartium", "destination": "/tools#editors", "type": 301 },
       { "source": "/tools/dartpad/dartpad-best-practices", "destination": "https://doi.org/10.1145/3397537.3397558", "type": 301 },
       { "source": "/tools/debian", "destination": "/get-dart", "type": 301 },
+      { "source": "/tools/diagnostic-messages", "destination": "/tools/diagnostics", "type": 301 },
+      { "source": "/tools/diagnostic-messages/:code*", "destination": "/tools/diagnostics/:code", "type": 301 },
       { "source": "/tools/docgen{,/**}", "destination": "/tools/dart-doc", "type": 301 },
       { "source": "/tools/download-archive{,/**}", "destination": "/get-dart/archive", "type": 301 },
       { "source": "/tools/download-editor", "destination": "/tools", "type": 301 },

src/_data/sidenav.yml

@@ -322,7 +322,7 @@
       - title: Linter rules
         permalink: /tools/linter-rules
       - title: Diagnostic messages
-        permalink: /tools/diagnostic-messages
+        permalink: /tools/diagnostics
   - title: Testing & optimization
     children:
       - title: Testing

src/_includes/head.html

@@ -74,6 +74,10 @@
   {% endfor -%}
   {% endif -%}
 
+  {% if redirectTo and redirectTo != '' -%}
+  <script>window.location.replace('{{redirectTo}}');</script>
+  {% endif -%}
+
   <script src="{{ '/assets/js/os-tabs.js' | append: cache_bust }}"></script>
   <script src="{{ '/assets/js/main.js' | append: cache_bust }}"></script>
 

src/_sass/_site.scss

@@ -16,13 +16,13 @@
 @use 'components/card';
 @use 'components/code';
 @use 'components/content';
+@use 'components/diagnostics';
 @use 'components/filter-search';
 @use 'components/cookie-notice';
 @use 'components/footer';
 @use 'components/form';
 @use 'components/glossary';
 @use 'components/header';
-@use 'components/linter-rules';
 @use 'components/misc';
 @use 'components/next-prev-nav';
 @use 'components/os-tabs';

src/_sass/components/_breadcrumbs.scss

@@ -2,10 +2,11 @@
 
 nav.breadcrumbs {
   align-items: center;
-  margin-block-start: 1rem;
+  margin-block-start: 0.25rem;
   margin-block-end: 1rem;
 
   ol.breadcrumb-list {
+    margin: 0;
     border-radius: 0.375rem;
     padding: 0.375rem 0;
 

src/_sass/components/_card.scss

@@ -56,14 +56,13 @@
 
     .card-content {
       display: flex;
-      align-items: center;
+      flex-direction: column;
       gap: 0.75rem;
       font-size: 0.95rem;
       color: var(--card-text-color, $site-color-body);
 
       p {
         margin: 0;
-        margin-block-end: 0.75rem;
 
         code {
           font-size: 0.95em;

src/_sass/components/_content.scss

@@ -45,7 +45,7 @@ article {
   }
 
   #site-content-title {
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
     scroll-margin: 4.5rem;
   }
 

src/_sass/components/_linter-rules.scss src/_sass/components/_diagnostics.scsssrc/_sass/components/_linter-rules.scss renamed to src/_sass/components/_diagnostics.scss

@@ -1,7 +1,7 @@
 @use '../base/mixins' as *;
 @use '../base/variables' as *;
 
-body.linter-rules {
+body.diagnostics {
   --chip-container-color: transparent;
   --chip-border-color: rgba(0, 0, 0, .35);
   --chip-selected-container-color: rgb(194 229 255);

src/content/assets/js/main.js

@@ -115,6 +115,18 @@ function setupCopyButtons() {
     return;
   }
 
+  const copyButtons = document.querySelectorAll('.copy-button[data-copy]');
+  copyButtons.forEach(button => {
+    button.addEventListener('click', async (e) => {
+      const textToCopy = button.dataset.copy;
+      if (textToCopy) {
+        await navigator.clipboard.writeText(textToCopy);
+      }
+      e.preventDefault();
+    });
+    button.classList.remove('hidden');
+  });
+
   const codeBlocks =
       document.querySelectorAll('.code-block-body');