Skip to content

Commit

Permalink
Add a front page to docs site for the v2 update to FAST Element (#6971)
Browse files Browse the repository at this point in the history 
# Pull Request

## 📖 Description

With the project re-alignment goals (#6955) this change seeks to highlight the use of `@microsoft/fast-element` as the package the documentation site is now focused on. This is similar to the previous frontpage for v1, however the content has been amended to get the user started on `@microsoft/fast-element` and states the updated project goals.

![Screenshot_15-7-2024_115919_localhost](https://github.com/user-attachments/assets/b6649a53-aa8c-48fd-a599-b0119c7feab9)

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [x] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/master/CODE_OF_CONDUCT.md#our-standards) for this project.
  • Loading branch information
@janechu
janechu authored Aug 1, 2024
1 parent 97bf709 commit b4b6813
Show file tree
Hide file tree
Showing 4 changed files with 606 additions and 125 deletions.
1 change: 0 additions & 1 deletion .prettierrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
"singleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid",
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto"
Expand Down
21 changes: 13 additions & 8 deletions sites/website/docusaurus.config.js
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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",
},
Expand Down Expand Up @@ -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",
Expand Down
280 changes: 273 additions & 7 deletions sites/website/src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
}
Loading

0 comments on commit b4b6813

Please sign in to comment.