Merge remote-tracking branch 'origin/main' into search/show-getting-s…

…tarted

_widget/src/components/welcome/component.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="route welcome">
+        <div v-html="trustyIcon" class="mascot"></div>
+        <h1>We're here to help.</h1>
+        <p>Type a keyword into the search bar above to find relevant support articles.</p>
+    </div>
+</template>
+
+<script>
+import { trustyIcon } from '../../assets/svgs';
+
+import "./style.scss";
+
+export default {
+  props: ['app'],
+  data () {
+    return {
+      trustyIcon
+    };
+  }
+};
+</script>

_widget/src/components/welcome/style.scss

@@ -0,0 +1,24 @@
+#dnsimple-support {
+  .welcome {
+    text-align: center;
+    padding-top: calc(var(--dnsimple-support-widget-padding) * 7);
+
+    h1 {
+      font-weight: bold;
+      color: var(--dnsimple-support-widget-blue);
+      font-size: 160%;
+    }
+
+    p {
+      max-width: 70%;
+      margin: 0 auto;
+      color: var(--dnsimple-support-widget-dark-gray);
+    }
+
+    .mascot {
+      bottom: 0;
+      max-width: 50%;
+      margin: 0 auto calc(var(--dnsimple-support-widget-padding) * 5);
+    }
+  }
+}

content/articles/differences-between-a-cname-alias-url.md

@@ -7,6 +7,12 @@ categories:
 
 # Differences Among A, CNAME, ALIAS, and URL records
 
+
+<div class="aspect-ratio aspect-ratio--16x9 z-0 mb4">
+  <iframe src="https://www.youtube.com/embed/mn07RUxAJRA" class="aspect-ratio--object" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+
 `A`, `CNAME`, `ALIAS`, and `URL` records are all possible solutions to point a host name ("name") to your site. However, they have small differences that affect how the client reaches your site.
 
 `A` and `CNAME` records are standard DNS records. `ALIAS` and `URL` records are custom DNS records provided by DNSimple's [DNS hosting](https://dnsimple.com). Both of them are translated internally into `A` records to ensure compatibility with the DNS protocol.
@@ -29,7 +35,7 @@ Important rules:
 
 Understanding the [difference between `A` name and `CNAME` records](/articles/differences-a-cname-records) will help you decide.
 
-General rules: 
+General rules:
 
 - Use an `A` record if you manage which IP addresses are assigned to a particular machine, or if the IP are fixed (this is the most common case).
 - Use a `CNAME` record if you want to alias one name to another name, and you don't need other records (such as `MX` records for emails) for the same name.

content/assets/css/_typography.scss

@@ -72,7 +72,7 @@ code {
 
 pre {
   display: block;
-  overflow-x: scroll;
+  overflow-x: auto;
   padding: 10px;
   font-size: 100%;
   font-family: $font-monospace;