Skip to content

Commit b4b6813

Browse files
janechujanechu
authored
Add a front page to docs site for the v2 update to FAST Element (#6971)
# 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.
1 parent 97bf709 commit b4b6813

File tree

4 files changed

+606
-125
lines changed

4 files changed

+606
-125
lines changed

‎.prettierrc

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
"singleQuote": false,
77
"trailingComma": "es5",
88
"bracketSpacing": true,
9-
"jsxBracketSameLine": false,
109
"arrowParens": "avoid",
1110
"htmlWhitespaceSensitivity": "ignore",
1211
"endOfLine": "auto"

‎sites/website/docusaurus.config.js

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import {themes as prismThemes} from 'prism-react-renderer';
2+
13
module.exports = {
24
title: "FAST",
35
tagline: "The adaptive interface system for modern web experiences",
@@ -13,11 +15,21 @@ module.exports = {
1315
mermaid: true,
1416
},
1517
themes: [
16-
require.resolve("@docusaurus/theme-live-codeblock"),
18+
"@docusaurus/theme-live-codeblock",
1719
"@docusaurus/theme-mermaid",
1820
],
1921
staticDirectories: ["static"],
2022
themeConfig: {
23+
prism: {
24+
theme: prismThemes.vsDark,
25+
},
26+
announcementBar: {
27+
id: 'version',
28+
content:
29+
'<code>@microsoft/fast-element</code> v2 is out! 🎉️',
30+
backgroundColor: 'var(--ifm-color-success-darkest)',
31+
textColor: 'var(--ifm-color-white)',
32+
},
2133
colorMode: {
2234
defaultMode: "dark",
2335
},
@@ -140,14 +152,7 @@ module.exports = {
140152
sidebarPath: "./sidebars.js",
141153
// Refer to https://github.com/microsoft/fast/issues/5865 effects of using true
142154
showLastUpdateTime: false,
143-
// remarkPlugins: [require("mdx-mermaid")],
144-
// The "includeCurrentVersion" plugin includes the ./docs folder of the docs - setting to false as current docs are in progress
145-
// TODO: remove when ready to display both the current and legacy versions (line 155)
146-
includeCurrentVersion: false,
147-
// The "lastVersion" plugin sets which version the /docs route refers to
148-
// TODO: update lastVersion to "current" when ready for /docs route to be set to the current version (line 158)
149155
lastVersion: "current",
150-
// TODO: Uncomment to begin displaying the doc versions labels (lines 160-167)
151156
versions: {
152157
current: {
153158
label: "2.x",

‎sites/website/src/css/custom.css

Lines changed: 273 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -70,13 +70,6 @@ html[data-theme="dark"] .DocSearch-Hit[aria-selected="true"] a mark {
7070
color: var(--ifm-color-primary) !important;
7171
}
7272

73-
.docusaurus-highlight-code-line {
74-
background-color: #212121;
75-
display: block;
76-
margin: 0 calc(-1 * var(--ifm-pre-padding));
77-
padding: 0 var(--ifm-pre-padding);
78-
}
79-
8073
.example-dialog::part(control) {
8174
--dialog-width: 400px;
8275
--dialog-height: auto;
@@ -87,3 +80,276 @@ html[data-theme="dark"] .DocSearch-Hit[aria-selected="true"] a mark {
8780
background: var(--ifm-color-primary);
8881
color: var(--ifm-color-secondary);
8982
}
83+
84+
/**
85+
* Any CSS for the front page
86+
*/
87+
.frontpage {
88+
--body-font: aktiv-grotesk, "Segoe UI", Arial, Helvetica, sans-serif;
89+
--base-height-multiplier: 10;
90+
--base-horizontal-spacing-multiplier: 3;
91+
--control-corner-radius: 4;
92+
--density: 0;
93+
--design-unit: 4;
94+
--direction: ltr;
95+
--disabled-opacity: 0.3;
96+
--stroke-width: 1;
97+
--focus-stroke-width: 2;
98+
--type-ramp-base-font-size: 14px;
99+
--type-ramp-base-line-height: 20px;
100+
--type-ramp-minus-1-font-size: 12px;
101+
--type-ramp-minus-1-line-height: 16px;
102+
--type-ramp-minus-2-font-size: 10px;
103+
--type-ramp-minus-2-line-height: 16px;
104+
--type-ramp-plus-1-font-size: 16px;
105+
--type-ramp-plus-1-line-height: 24px;
106+
--type-ramp-plus-2-font-size: 20px;
107+
--type-ramp-plus-2-line-height: 28px;
108+
--type-ramp-plus-3-font-size: 22px;
109+
--type-ramp-plus-3-line-height: 30px;
110+
--type-ramp-plus-4-font-size: 28px;
111+
--type-ramp-plus-4-line-height: 38px;
112+
--type-ramp-plus-5-font-size: 36px;
113+
--type-ramp-plus-5-line-height: 46px;
114+
--type-ramp-plus-6-font-size: 40px;
115+
--type-ramp-plus-6-line-height: 52px;
116+
--neutral-color: #808080;
117+
--accent-color: #da1a5f;
118+
--foreground-on-accent-rest: #ffffff;
119+
--foreground-on-accent-hover: #ffffff;
120+
--foreground-on-accent-active: #ffffff;
121+
--foreground-on-accent-focus: #ffffff;
122+
--foreground-on-accent-rest-large: #000000;
123+
--foreground-on-accent-hover-large: #000000;
124+
--foreground-on-accent-active-large: #ffffff;
125+
--foreground-on-accent-focus-large: #000000;
126+
--neutral-layer-card-container: #101010;
127+
--neutral-layer-floating: #292929;
128+
--neutral-layer-1: #181818;
129+
--neutral-layer-2: #101010;
130+
--neutral-layer-3: #000000;
131+
--neutral-layer-4: #000000;
132+
--fill-color: #181818;
133+
--accent-fill-rest: #c01754;
134+
--accent-fill-hover: #da1a5f;
135+
--accent-fill-active: #a01346;
136+
--accent-fill-focus: #c01754;
137+
--accent-foreground-rest: #e1477e;
138+
--accent-foreground-hover: #e55e8e;
139+
--accent-foreground-active: #df3874;
140+
--accent-foreground-focus: #e1477e;
141+
--neutral-fill-rest: #2b2b2b;
142+
--neutral-fill-hover: #333333;
143+
--neutral-fill-active: #262626;
144+
--neutral-fill-focus: #181818;
145+
--neutral-fill-input-rest: #181818;
146+
--neutral-fill-input-hover: #181818;
147+
--neutral-fill-input-active: #181818;
148+
--neutral-fill-input-focus: #181818;
149+
--neutral-fill-stealth-rest: #181818;
150+
--neutral-fill-stealth-hover: #262626;
151+
--neutral-fill-stealth-active: #212121;
152+
--neutral-fill-stealth-focus: #181818;
153+
--neutral-fill-strong-rest: #838383;
154+
--neutral-fill-strong-hover: #979797;
155+
--neutral-fill-strong-active: #767676;
156+
--neutral-fill-strong-focus: #838383;
157+
--neutral-fill-layer-rest: #212121;
158+
--focus-stroke-outer: #717171;
159+
--focus-stroke-inner: #350617;
160+
--neutral-foreground-hint: #838383;
161+
--neutral-foreground-rest: #e5e5e5;
162+
--neutral-stroke-rest: #5a5a5a;
163+
--neutral-stroke-hover: #808080;
164+
--neutral-stroke-active: #424242;
165+
--neutral-stroke-focus: #5a5a5a;
166+
--neutral-stroke-divider-rest: #2e2e2e;
167+
--clear-button-hover: #404040;
168+
--clear-button-active: #3b3b3b;
169+
--tree-item-expand-collapse-hover: #333333;
170+
--tree-item-expand-collapse-selected-hover: #383838;
171+
--base-layer-luminance: 0.09;
172+
--wrapper-gutter: 20px;
173+
--wrapper-max-width: 8px;
174+
background-color: var(--fill-color);
175+
color: var(--neutral-foreground-rest);
176+
font-family: var(--body-font);
177+
font-size: var(--type-ramp-base-font-size);
178+
line-height: var(--type-ramp-base-line-height);
179+
margin: 0;
180+
padding: 20px;
181+
display: grid;
182+
grid-auto-rows: minmax(0, auto);
183+
grid-template-columns: 1fr;
184+
}
185+
186+
.section {
187+
box-sizing: border-box;
188+
color: var(--neutral-foreground-rest);
189+
grid-column: span 2;
190+
margin: var(--section-height-spacing-mobile);
191+
padding: 20px 0;
192+
align-items: center;
193+
display: flex;
194+
flex-flow: row wrap;
195+
flex-direction: column;
196+
justify-content: center;
197+
width: 100%;
198+
text-align: center;
199+
}
200+
201+
.section > svg {
202+
width: 200px;
203+
}
204+
205+
.section-badge {
206+
--badge-fill-primary: var(--neutral-fill-focus);
207+
--badge-color-primary: var(--accent-foreground-rest);
208+
margin-bottom: calc(var(--base-height-multiplier) * 1px);
209+
box-sizing: border-box;
210+
font-family: var(--body-font);
211+
font-size: var(--type-ramp-minus-1-font-size);
212+
line-height: var(--type-ramp-minus-1-line-height);
213+
display: inline-block;
214+
align-items: center;
215+
flex-direction: column;
216+
box-sizing: border-box;
217+
text-align: center;
218+
color: var(--badge-color-primary);
219+
background-color: var(--badge-fill-primary);
220+
font-weight: 700;
221+
letter-spacing: 0.12em;
222+
padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 4px);
223+
border-radius: calc(var(--control-corner-radius) * 1px);
224+
border: calc(var(--stroke-width) * 1px) solid transparent;
225+
}
226+
227+
.section-heading {
228+
font-size: var(--type-ramp-plus-5-font-size);
229+
line-height: var(--type-ramp-plus-5-line-height);
230+
}
231+
232+
.section-paragraph {
233+
font-size: var(--type-ramp-plus-1-font-size);
234+
line-height: var(--type-ramp-plus-1-line-height);
235+
}
236+
237+
.section-heading,
238+
.section-paragraph {
239+
margin: 0 0 calc(var(--base-height-multiplier) * 2px);
240+
}
241+
242+
.section-decoration {
243+
border: none;
244+
display: flex;
245+
flex-direction: column;
246+
grid-column: span 2;
247+
height: 58px;
248+
justify-content: space-between;
249+
margin: calc(var(--design-unit) * 5px) calc(50% - 1.5px);
250+
}
251+
252+
.section-decoration::after,
253+
.section-decoration::before {
254+
background-color: var(--accent-fill-rest);
255+
content: "";
256+
width: 3px;
257+
}
258+
259+
.section-decoration::before {
260+
border-radius: 50%;
261+
height: 3px;
262+
}
263+
264+
.section-decoration:after {
265+
border-radius: calc(var(--corner-radius) * 1px);
266+
height: calc(var(--type-ramp-plus-5-font-size) + var(--design-unit) * 1px);
267+
}
268+
269+
.theme-code-block {
270+
overflow: auto;
271+
width: inherit;
272+
}
273+
274+
pre {
275+
text-align: left;
276+
}
277+
278+
li {
279+
text-align: start;
280+
}
281+
282+
.section-showcase {
283+
display: flex;
284+
}
285+
286+
.section-showcase-item-link {
287+
color: white;
288+
text-decoration: none;
289+
text-align: center;
290+
border-radius: 3px;
291+
font-size: var(--type-ramp-base-font-size);
292+
transition: all 0.3s ease-out 0s;
293+
}
294+
295+
.section-showcase-item svg {
296+
height: 30px;
297+
width: 54px;
298+
fill: white;
299+
stroke: white;
300+
margin: 8px 20px;
301+
}
302+
303+
[role="banner"] code {
304+
background-color: rgba(0, 0, 0, 0.1);
305+
border: 0.1rem solid rgba(255, 255, 255, 0.1);
306+
}
307+
308+
@media screen and (min-width: 900px) {
309+
.frontpage {
310+
--type-ramp-base-font-size: 14px;
311+
--type-ramp-base-line-height: 20px;
312+
--type-ramp-minus-1-font-size: 12px;
313+
--type-ramp-minus-1-line-height: 16px;
314+
--type-ramp-minus-2-font-size: 10px;
315+
--type-ramp-minus-2-line-height: 16px;
316+
--type-ramp-plus-1-font-size: 16px;
317+
--type-ramp-plus-1-line-height: 24px;
318+
--type-ramp-plus-2-font-size: 20px;
319+
--type-ramp-plus-2-line-height: 28px;
320+
--type-ramp-plus-3-font-size: 28px;
321+
--type-ramp-plus-3-line-height: 36px;
322+
--type-ramp-plus-4-font-size: 34px;
323+
--type-ramp-plus-4-line-height: 44px;
324+
--type-ramp-plus-5-font-size: 46px;
325+
--type-ramp-plus-5-line-height: 56px;
326+
--type-ramp-plus-6-font-size: 60px;
327+
--type-ramp-plus-6-line-height: 72px;
328+
--wrapper-gutter: 5vw;
329+
--wrapper-max-width: 800px;
330+
grid-template-columns:
331+
minmax(var(--wrapper-gutter), 1fr) minmax(0, var(--wrapper-max-width))
332+
minmax(var(--wrapper-gutter), 1fr);
333+
}
334+
335+
.section,
336+
.section-decoration {
337+
grid-column: 2;
338+
}
339+
340+
.section {
341+
margin: var(--section-height-spacing);
342+
padding: 40px 0;
343+
max-width: 900px;
344+
}
345+
346+
.section-showcase-item svg {
347+
height: 40px;
348+
width: 80px;
349+
margin: 15px 40px;
350+
}
351+
352+
.theme-code-block {
353+
width: unset;
354+
}
355+
}

0 commit comments

Comments
 (0)