feat(observatory): launch HTTP Observatory

client/src/app.tsx

@@ -34,6 +34,7 @@ const Translations = React.lazy(() => import("./translations"));
 const WritersHomepage = React.lazy(() => import("./writers-homepage"));
 const Sitemap = React.lazy(() => import("./sitemap"));
 const Playground = React.lazy(() => import("./playground"));
+const Observatory = React.lazy(() => import("./observatory"));
 
 function Layout({ pageType, children }) {
   const { pathname } = useLocation();
@@ -246,6 +247,14 @@ export function App(appProps: HydrationData) {
                 </LazyStandardLayout>
               }
             />
+            <Route
+              path="observatory/*"
+              element={
+                <LazyStandardLayout>
+                  <Observatory />
+                </LazyStandardLayout>
+              }
+            />
             <Route
               path="/search"
               element={

client/src/observatory/index.scss

@@ -0,0 +1,312 @@
+@use "../ui/vars" as *;
+
+.observatory {
+  background: var(--observatory-bg);
+  min-height: 80vh;
+
+  .observatory-header {
+    background: var(--background-primary);
+    padding: 1.5rem 1rem;
+
+    .inner {
+      column-gap: 3rem;
+      display: grid;
+      grid-template-columns: minmax(min-content, 46rem) max-content;
+      justify-content: center;
+      margin: 0 auto;
+
+      * {
+        grid-column: 1;
+      }
+
+      section.place.side {
+        grid-column: 2;
+        grid-row: 1 / span 4;
+        margin: 0;
+
+        @media screen and (max-width: $screen-lg) {
+          grid-column: 1;
+          grid-row: auto;
+          justify-self: end;
+        }
+      }
+    }
+
+    h1 .accent {
+      color: var(--observatory-accent);
+    }
+
+    p {
+      color: var(--observatory-color-secondary);
+    }
+
+    form {
+      .progress,
+      .error {
+        align-items: center;
+        background: var(--observatory-alert);
+        display: flex;
+        height: 3rem;
+        justify-content: center;
+      }
+
+      .progress {
+        background: var(--observatory-bg-secondary);
+        color: var(--observatory-accent);
+      }
+
+      .input-group {
+        display: flex;
+        height: 3rem;
+
+        input {
+          background: var(--observatory-bg);
+          border: 1px solid var(--observatory-bg-secondary);
+          flex-grow: 1;
+          padding: 0 0.75rem;
+        }
+
+        button {
+          background: var(--button-primary-default);
+          color: var(--background-primary);
+          font: var(--type-emphasis-m);
+          padding: 0 2rem;
+
+          &:hover {
+            background: var(--button-primary-hover);
+          }
+
+          &:active {
+            background: var(--button-primary-active);
+          }
+        }
+      }
+
+      label {
+        align-items: center;
+        display: flex;
+        margin: 1.75rem 0;
+      }
+
+      input[type="checkbox"] {
+        height: 1.25rem;
+        margin: 0;
+        margin-right: 0.5rem;
+        width: 1.25rem;
+      }
+    }
+  }
+
+  .observatory-results {
+    column-gap: 3rem;
+    display: grid;
+    grid-template-columns: minmax(min-content, 64rem) max-content;
+    justify-content: center;
+    margin: 0 auto;
+    padding: 1.5rem 1rem;
+
+    * {
+      grid-column: 1;
+    }
+
+    section.place.side {
+      grid-column: 2;
+      grid-row: 1 / span 4;
+      margin: 0;
+
+      @media screen and (max-width: $screen-lg) {
+        grid-column: 1;
+        grid-row: auto;
+        justify-self: center;
+      }
+    }
+
+    h1 {
+      margin-bottom: 3rem;
+    }
+
+    h2 {
+      font-size: 1.375rem;
+      font-weight: 600;
+      letter-spacing: 0.03125rem;
+      margin-bottom: 1rem;
+      margin-top: 0;
+    }
+  }
+
+  table,
+  .box {
+    background: var(--observatory-table-bg);
+    border: 1px solid var(--observatory-border);
+    border-radius: 0.5rem;
+    margin-bottom: 3.75rem;
+  }
+
+  table {
+    border-collapse: separate;
+    border-spacing: 0;
+    overflow: hidden;
+
+    td {
+      overflow-wrap: anywhere;
+    }
+
+    th,
+    td {
+      border: none;
+      padding: 1.5rem;
+
+      :first-child {
+        margin-top: 0;
+      }
+
+      :last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &.overall {
+      th {
+        background: var(--observatory-table-bg);
+        color: var(--observatory-color-secondary);
+        padding-bottom: 0;
+      }
+    }
+
+    &.fancy {
+      th {
+        background: var(--observatory-bg-secondary);
+        color: var(--observatory-accent);
+      }
+
+      tr:nth-child(2n) {
+        background: var(--observatory-bg);
+      }
+    }
+
+    &.tests {
+      th,
+      td {
+        &:first-of-type {
+          width: 30%;
+        }
+
+        &:nth-of-type(n + 2):nth-of-type(-n + 3) {
+          text-align: center;
+        }
+      }
+
+      td:last-of-type {
+        font-size: 0.875rem;
+      }
+
+      a {
+        color: var(--observatory-color);
+        font-weight: 500;
+        text-decoration: underline;
+
+        &:hover,
+        &:active {
+          text-decoration: none;
+        }
+      }
+
+      .icon {
+        height: 1.4rem;
+        width: 1.4rem;
+      }
+
+      .icon-alert-circle {
+        background-color: var(--observatory-alert);
+      }
+
+      .icon-check-circle {
+        background-color: var(--observatory-check);
+      }
+    }
+
+    &.headers {
+      th,
+      td {
+        &:first-of-type {
+          width: 30%;
+        }
+      }
+    }
+  }
+
+  .box {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    padding: 1.5rem;
+  }
+
+  #recommendations {
+    .recommendation {
+      display: none;
+
+      &:first-child {
+        display: block;
+      }
+
+      :first-child {
+        margin-top: 0;
+      }
+
+      :last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .rescan {
+      align-items: center;
+      display: flex;
+      gap: 1.5rem;
+
+      p {
+        margin: 0;
+        margin-right: auto;
+      }
+    }
+  }
+
+  .grade {
+    background: var(--grade-bg);
+    border: 1px solid var(--grade-border);
+    border-radius: 0.125em;
+    box-sizing: content-box;
+    color: #fff;
+    display: inline-block;
+    font-weight: 600;
+    line-height: 3;
+    text-align: center;
+    width: 3em;
+  }
+
+  .grade-a {
+    --grade-bg: rgb(45, 136, 45);
+    --grade-border: rgb(17, 102, 17);
+  }
+
+  .grade-b {
+    --grade-bg: rgb(170, 170, 57);
+    --grade-border: rgb(128, 128, 21);
+  }
+
+  .grade-c {
+    --grade-bg: rgb(170, 112, 57);
+    --grade-border: rgb(128, 73, 21);
+  }
+
+  .grade-d,
+  .grade-e {
+    --grade-bg: rgb(101, 39, 112);
+    --grade-border: rgb(74, 16, 84);
+  }
+
+  .grade-f {
+    --grade-bg: rgb(170, 57, 57);
+    --grade-border: rgb(128, 21, 21);
+  }
+}