Add a front page to docs site for the v2 update to FAST Element

.prettierrc

@@ -6,7 +6,6 @@
     "singleQuote": false,
     "trailingComma": "es5",
     "bracketSpacing": true,
-    "jsxBracketSameLine": false,
     "arrowParens": "avoid",
     "htmlWhitespaceSensitivity": "ignore",
     "endOfLine": "auto"

sites/website/docusaurus.config.js

@@ -1,3 +1,5 @@
+import {themes as prismThemes} from 'prism-react-renderer';
+
 module.exports = {
     title: "FAST",
     tagline: "The adaptive interface system for modern web experiences",
@@ -13,11 +15,21 @@ module.exports = {
         mermaid: true,
     },
     themes: [
-        require.resolve("@docusaurus/theme-live-codeblock"),
+        "@docusaurus/theme-live-codeblock",
         "@docusaurus/theme-mermaid",
     ],
     staticDirectories: ["static"],
     themeConfig: {
+        prism: {
+            theme: prismThemes.vsDark,
+        },
+        announcementBar: {
+            id: 'version',
+            content:
+              '<code>@microsoft/fast-element</code> v2 is out! 🎉️',
+            backgroundColor: 'var(--ifm-color-success-darkest)',
+            textColor: 'var(--ifm-color-white)',
+        },
         colorMode: {
             defaultMode: "dark",
         },
@@ -140,14 +152,7 @@ module.exports = {
                     sidebarPath: "./sidebars.js",
                     // Refer to https://github.com/microsoft/fast/issues/5865 effects of using true
                     showLastUpdateTime: false,
-                    // remarkPlugins: [require("mdx-mermaid")],
-                    // The "includeCurrentVersion" plugin includes the ./docs folder of the docs - setting to false as current docs are in progress
-                    // TODO: remove when ready to display both the current and legacy versions (line 155)
-                    includeCurrentVersion: false,
-                    // The "lastVersion" plugin sets which version the /docs route refers to
-                    // TODO: update lastVersion to "current" when ready for /docs route to be set to the current version (line 158)
                     lastVersion: "current",
-                    // TODO: Uncomment to begin displaying the doc versions labels (lines 160-167)
                     versions: {
                         current: {
                             label: "2.x",

sites/website/src/css/custom.css

@@ -70,13 +70,6 @@ html[data-theme="dark"] .DocSearch-Hit[aria-selected="true"] a mark {
     color: var(--ifm-color-primary) !important;
 }
 
-.docusaurus-highlight-code-line {
-    background-color: #212121;
-    display: block;
-    margin: 0 calc(-1 * var(--ifm-pre-padding));
-    padding: 0 var(--ifm-pre-padding);
-}
-
 .example-dialog::part(control) {
     --dialog-width: 400px;
     --dialog-height: auto;
@@ -87,3 +80,276 @@ html[data-theme="dark"] .DocSearch-Hit[aria-selected="true"] a mark {
     background: var(--ifm-color-primary);
     color: var(--ifm-color-secondary);
 }
+
+/**
+ * Any CSS for the front page
+ */
+.frontpage {
+    --body-font: aktiv-grotesk, "Segoe UI", Arial, Helvetica, sans-serif;
+    --base-height-multiplier: 10;
+    --base-horizontal-spacing-multiplier: 3;
+    --control-corner-radius: 4;
+    --density: 0;
+    --design-unit: 4;
+    --direction: ltr;
+    --disabled-opacity: 0.3;
+    --stroke-width: 1;
+    --focus-stroke-width: 2;
+    --type-ramp-base-font-size: 14px;
+    --type-ramp-base-line-height: 20px;
+    --type-ramp-minus-1-font-size: 12px;
+    --type-ramp-minus-1-line-height: 16px;
+    --type-ramp-minus-2-font-size: 10px;
+    --type-ramp-minus-2-line-height: 16px;
+    --type-ramp-plus-1-font-size: 16px;
+    --type-ramp-plus-1-line-height: 24px;
+    --type-ramp-plus-2-font-size: 20px;
+    --type-ramp-plus-2-line-height: 28px;
+    --type-ramp-plus-3-font-size: 22px;
+    --type-ramp-plus-3-line-height: 30px;
+    --type-ramp-plus-4-font-size: 28px;
+    --type-ramp-plus-4-line-height: 38px;
+    --type-ramp-plus-5-font-size: 36px;
+    --type-ramp-plus-5-line-height: 46px;
+    --type-ramp-plus-6-font-size: 40px;
+    --type-ramp-plus-6-line-height: 52px;
+    --neutral-color: #808080;
+    --accent-color: #da1a5f;
+    --foreground-on-accent-rest: #ffffff;
+    --foreground-on-accent-hover: #ffffff;
+    --foreground-on-accent-active: #ffffff;
+    --foreground-on-accent-focus: #ffffff;
+    --foreground-on-accent-rest-large: #000000;
+    --foreground-on-accent-hover-large: #000000;
+    --foreground-on-accent-active-large: #ffffff;
+    --foreground-on-accent-focus-large: #000000;
+    --neutral-layer-card-container: #101010;
+    --neutral-layer-floating: #292929;
+    --neutral-layer-1: #181818;
+    --neutral-layer-2: #101010;
+    --neutral-layer-3: #000000;
+    --neutral-layer-4: #000000;
+    --fill-color: #181818;
+    --accent-fill-rest: #c01754;
+    --accent-fill-hover: #da1a5f;
+    --accent-fill-active: #a01346;
+    --accent-fill-focus: #c01754;
+    --accent-foreground-rest: #e1477e;
+    --accent-foreground-hover: #e55e8e;
+    --accent-foreground-active: #df3874;
+    --accent-foreground-focus: #e1477e;
+    --neutral-fill-rest: #2b2b2b;
+    --neutral-fill-hover: #333333;
+    --neutral-fill-active: #262626;
+    --neutral-fill-focus: #181818;
+    --neutral-fill-input-rest: #181818;
+    --neutral-fill-input-hover: #181818;
+    --neutral-fill-input-active: #181818;
+    --neutral-fill-input-focus: #181818;
+    --neutral-fill-stealth-rest: #181818;
+    --neutral-fill-stealth-hover: #262626;
+    --neutral-fill-stealth-active: #212121;
+    --neutral-fill-stealth-focus: #181818;
+    --neutral-fill-strong-rest: #838383;
+    --neutral-fill-strong-hover: #979797;
+    --neutral-fill-strong-active: #767676;
+    --neutral-fill-strong-focus: #838383;
+    --neutral-fill-layer-rest: #212121;
+    --focus-stroke-outer: #717171;
+    --focus-stroke-inner: #350617;
+    --neutral-foreground-hint: #838383;
+    --neutral-foreground-rest: #e5e5e5;
+    --neutral-stroke-rest: #5a5a5a;
+    --neutral-stroke-hover: #808080;
+    --neutral-stroke-active: #424242;
+    --neutral-stroke-focus: #5a5a5a;
+    --neutral-stroke-divider-rest: #2e2e2e;
+    --clear-button-hover: #404040;
+    --clear-button-active: #3b3b3b;
+    --tree-item-expand-collapse-hover: #333333;
+    --tree-item-expand-collapse-selected-hover: #383838;
+    --base-layer-luminance: 0.09;
+    --wrapper-gutter: 20px;
+    --wrapper-max-width: 8px;
+    background-color: var(--fill-color);
+    color: var(--neutral-foreground-rest);
+    font-family: var(--body-font);
+    font-size: var(--type-ramp-base-font-size);
+    line-height: var(--type-ramp-base-line-height);
+    margin: 0;
+    padding: 20px;
+    display: grid;
+    grid-auto-rows: minmax(0, auto);
+    grid-template-columns: 1fr;
+}
+
+.section {
+    box-sizing: border-box;
+    color: var(--neutral-foreground-rest);
+    grid-column: span 2;
+    margin: var(--section-height-spacing-mobile);
+    padding: 20px 0;
+    align-items: center;
+    display: flex;
+    flex-flow: row wrap;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    text-align: center;
+}
+
+.section > svg {
+    width: 200px;
+}
+
+.section-badge {
+    --badge-fill-primary: var(--neutral-fill-focus);
+    --badge-color-primary: var(--accent-foreground-rest);
+    margin-bottom: calc(var(--base-height-multiplier) * 1px);
+    box-sizing: border-box;
+    font-family: var(--body-font);
+    font-size: var(--type-ramp-minus-1-font-size);
+    line-height: var(--type-ramp-minus-1-line-height);
+    display: inline-block;
+    align-items: center;
+    flex-direction: column;
+    box-sizing: border-box;
+    text-align: center;
+    color: var(--badge-color-primary);
+    background-color: var(--badge-fill-primary);
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 4px);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    border: calc(var(--stroke-width) * 1px) solid transparent;
+}
+
+.section-heading {
+    font-size: var(--type-ramp-plus-5-font-size);
+    line-height: var(--type-ramp-plus-5-line-height);
+}
+
+.section-paragraph {
+    font-size: var(--type-ramp-plus-1-font-size);
+    line-height: var(--type-ramp-plus-1-line-height);
+}
+
+.section-heading,
+.section-paragraph {
+    margin: 0 0 calc(var(--base-height-multiplier) * 2px);
+}
+
+.section-decoration {
+    border: none;
+    display: flex;
+    flex-direction: column;
+    grid-column: span 2;
+    height: 58px;
+    justify-content: space-between;
+    margin: calc(var(--design-unit) * 5px) calc(50% - 1.5px);
+}
+
+.section-decoration::after,
+.section-decoration::before {
+    background-color: var(--accent-fill-rest);
+    content: "";
+    width: 3px;
+}
+
+.section-decoration::before {
+    border-radius: 50%;
+    height: 3px;
+}
+
+.section-decoration:after {
+    border-radius: calc(var(--corner-radius) * 1px);
+    height: calc(var(--type-ramp-plus-5-font-size) + var(--design-unit) * 1px);
+}
+
+.theme-code-block {
+    overflow: auto;
+    width: inherit;
+}
+
+pre {
+    text-align: left;
+}
+
+li {
+    text-align: start;
+}
+
+.section-showcase {
+    display: flex;
+}
+
+.section-showcase-item-link {
+    color: white;
+    text-decoration: none;
+    text-align: center;
+    border-radius: 3px;
+    font-size: var(--type-ramp-base-font-size);
+    transition: all 0.3s ease-out 0s;
+}
+
+.section-showcase-item svg {
+    height: 30px;
+    width: 54px;
+    fill: white;
+    stroke: white;
+    margin: 8px 20px;
+}
+
+[role="banner"] code {
+    background-color: rgba(0, 0, 0, 0.1);
+    border: 0.1rem solid rgba(255, 255, 255, 0.1);
+}
+
+@media screen and (min-width: 900px) {
+    .frontpage {
+        --type-ramp-base-font-size: 14px;
+        --type-ramp-base-line-height: 20px;
+        --type-ramp-minus-1-font-size: 12px;
+        --type-ramp-minus-1-line-height: 16px;
+        --type-ramp-minus-2-font-size: 10px;
+        --type-ramp-minus-2-line-height: 16px;
+        --type-ramp-plus-1-font-size: 16px;
+        --type-ramp-plus-1-line-height: 24px;
+        --type-ramp-plus-2-font-size: 20px;
+        --type-ramp-plus-2-line-height: 28px;
+        --type-ramp-plus-3-font-size: 28px;
+        --type-ramp-plus-3-line-height: 36px;
+        --type-ramp-plus-4-font-size: 34px;
+        --type-ramp-plus-4-line-height: 44px;
+        --type-ramp-plus-5-font-size: 46px;
+        --type-ramp-plus-5-line-height: 56px;
+        --type-ramp-plus-6-font-size: 60px;
+        --type-ramp-plus-6-line-height: 72px;
+        --wrapper-gutter: 5vw;
+        --wrapper-max-width: 800px;
+        grid-template-columns:
+            minmax(var(--wrapper-gutter), 1fr) minmax(0, var(--wrapper-max-width))
+            minmax(var(--wrapper-gutter), 1fr);
+    }
+
+    .section,
+    .section-decoration {
+        grid-column: 2;
+    }
+
+    .section {
+        margin: var(--section-height-spacing);
+        padding: 40px 0;
+        max-width: 900px;
+    }
+
+    .section-showcase-item svg {
+        height: 40px;
+        width: 80px;
+        margin: 15px 40px;
+    }
+
+    .theme-code-block {
+        width: unset;
+    }
+}