Merge branch 'main' into feature/linter-individual-pages

Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (7.0.5)
+    activesupport (7.0.5.1)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -60,7 +60,7 @@ GEM
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
     mini_portile2 (2.8.2)
-    minitest (5.18.0)
+    minitest (5.18.1)
     nokogiri (1.15.2)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)

_config.yml

@@ -96,30 +96,30 @@ og_image_vers: "?2"
 alert:
   important: >-
     <aside class="alert alert-warning" role="alert" markdown="1">
-    <i class="fas fa-exclamation-circle"></i> **Important:**
+    <i class="material-icons" aria-hidden="true">error</i> **Important:**
   info: >-
     <aside class="alert alert-info" role="alert" markdown="1">
-    <i class="fas fa-info-circle"></i>
+    <i class="material-icons" aria-hidden="true">info</i>
   note: >-
     <aside class="alert alert-info" role="alert" markdown="1">
-    <i class="fas fa-info-circle"></i> **Note:**
+    <i class="material-icons" aria-hidden="true">info</i> **Note:**
   flutter-note: >-
     <aside class="alert alert-info" role="alert" markdown="1">
     <img src="/assets/img/shared/flutter/icon/64.png" width="24" alt="Flutter logo"> **Flutter note:**
   version-note: >-
     <aside class="alert alert-info" role="alert" markdown="1">
-    <i class="fas fa-code-branch"></i> **Version note:**
+    <i class="material-icons" aria-hidden="true">merge_type</i> **Version note:**
   secondary: >-
     <aside class="alert alert-secondary" role="alert" markdown="1">
   tip: >-
     <aside class="alert alert-success" role="alert" markdown="1">
-    <i class="far fa-lightbulb"></i> **Tip:**
+    <i class="material-icons" aria-hidden="true">tips_and_updates</i> **Tip:**
   warn: >-
     <aside class="alert alert-warning" role="alert" markdown="1">
-    <i class="fas fa-exclamation-triangle"></i>
+    <i class="material-icons" aria-hidden="true">report_problem</i>
   warning: >-
     <aside class="alert alert-warning" role="alert" markdown="1">
-    <i class="fas fa-exclamation-triangle"></i> **Warning:**
+    <i class="material-icons" aria-hidden="true">report_problem</i> **Warning:**
   end: </aside>
 
 why:

src/_includes/head.html

@@ -63,10 +63,6 @@
   <link href="https://fonts.googleapis.com/css2?family=Google+Sans+Mono:wght@400;500;700&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet">
-  <script
-    src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
-    data-auto-replace-svg="nest">
-  </script>
 
   <link rel="stylesheet" href="{{ '/assets/css/main.css' | append: cache_bust }}">
   {% for css in page.css -%}

src/_sass/_dash.scss

@@ -67,6 +67,11 @@ $dash-max-width: 1330px;
     color: $dash-dark-grey;
     margin-top: 16px;
 
+    & svg {
+      width: 1em;
+      height: 1em;
+    }
+
     @include bootstrap.media-breakpoint-down(md) {
       font-size: 14px;
       margin-left: 30px;
@@ -75,6 +80,7 @@ $dash-max-width: 1330px;
 
     a {
       color: $dash-dark-grey;
+      vertical-align: bottom;
 
       &:hover, &:focus, &:active {
         color: $white-base;

src/_sass/components/_code.scss

@@ -17,6 +17,14 @@ pre {
   &.prettyprint {
     @include pre-defaults;
     border: none;
+
+    .highlight-diagnostics & {
+      .highlight {
+        border-bottom: 2px $red-500 dashed;
+        background: inherit;
+        padding: 0;
+      }
+    }
   }
 
   .highlight {

src/_sass/site.scss

@@ -573,6 +573,12 @@ h3.popover-header {
   margin-top: 1rem;
   padding: 30px 30px;
 
+  i.material-icons {
+    font-size: 20px;
+    user-select: none;
+    vertical-align: -4px;
+  }
+
   code {
     background-color: transparent;
   }
@@ -662,10 +668,20 @@ ul.nav-list {
     $padding-x: bootstrap.$btn-padding-x * 0.5;
     padding-left: $padding-x;
     padding-right: $padding-x;
+    border: none;
+    box-shadow: none;
+
+    &:hover, &:focus-visible {
+      color: $brand-primary;
+    }
+
+    &:active {
+      color: lighten($brand-primary, 25%);
+    }
   }
 
-  .fa-sm {
-    font-size: 14px;
+  .material-icons {
+    font-size: 18px;
   }
 }
 

src/_tutorials/web/get-started.md

@@ -82,7 +82,7 @@ More information:
 
 ## 3. Get CLI tools or an IDE (or both)
 
-<i class="fas fa-terminal dark"></i>
+<i class="material-icons">terminal</i>
 If you like to use the command line, install [webdev][]:
 
 ```terminal
@@ -97,7 +97,7 @@ For a list of available IDEs, see the
 
 ## 4. Create a web app
 
-<i class="fas fa-terminal dark"></i>
+<i class="material-icons">terminal</i>
 To create a web app from the command line, use these commands:
 
 ```terminal
@@ -111,7 +111,7 @@ create a project using the template named **Bare-bones Web App**.
 
 ## 5. Run the app
 
-<i class="fas fa-terminal dark"></i>
+<i class="material-icons">terminal</i>
 To run the app from the command line, use [webdev][] to build and serve the app:
 
 ```terminal

src/index.html

@@ -38,7 +38,9 @@
     <div class="callout-oss">
         <p>Dart is free and open source
             &nbsp;<a href="https://github.com/dart-lang/" title="Dart project GitHub organization"
-            class="no-automatic-external"><i class="fab fa-github fa-sm"></i></a>
+            class="no-automatic-external">
+                <svg><use href="/assets/img/social/github.svg#github"></use></svg>
+            </a>
         </p>
     </div>
 
@@ -415,7 +417,7 @@ <h2>Try Dart in your browser</h2>
             <label for="dartpad-select" class="sr-only">Select an example:</label>
             <select id="dartpad-select"></select>
             <div id="dartpad-host"></div>
-            <h3>Want more practice? <a href="/language">Learn the language</a>, 
+            <h3>Want more practice? <a href="/language">Learn the language</a>,
                 explore the <a href="/guides/libraries/library-tour">core libraries</a>,
                 or <a href="/tutorials/server/get-started">build a command-line app</a>.</h3>
         </div>

src/tools/diagnostic-messages.md

@@ -1,6 +1,7 @@
 ---
 title: Diagnostic messages
 description: Details for diagnostics produced by the Dart analyzer.
+body_class: highlight-diagnostics
 ---
 {%- comment %}
 WARNING: Do NOT EDIT this file directly. It is autogenerated by the script in