From 98dc0f30448a39b9efab04c6097fdff20f574c63 Mon Sep 17 00:00:00 2001 From: Lachlan Heywood Date: Wed, 31 Jul 2024 21:05:43 -0400 Subject: [PATCH] feat(pages/home): refactor with additional reuseable components Signed-off-by: Lachlan Heywood --- src/pages/_components/decorate/index.tsx | 28 +++++ src/pages/_components/grid/index.tsx | 36 ++++++ src/pages/_components/grid/styles.module.css | 58 +++++++++ .../_components/section-content/index.tsx | 43 +++++++ .../section-content.module.css | 35 ++++++ .../_components/section-heading/index.tsx | 9 +- src/pages/_components/section/index.tsx | 4 +- .../_components/section/styles.module.css | 1 + .../sketch-sparkles}/img/sparkles.svg | 0 .../_components/sketch-sparkles/index.tsx | 15 +++ .../sketch-sparkles.module.css | 12 ++ .../case-studies/case-studies.module.css | 16 --- .../_index/_components/case-studies/index.tsx | 43 +++++-- .../get-involved/get-involved.module.css | 102 +--------------- .../_index/_components/get-involved/index.tsx | 112 +++++++++--------- .../get-involved/wednesday.module.css | 77 ++++++++++++ .../_components/get-involved/wednesday.tsx | 43 +++++++ .../get-started/get-started.module.css | 58 +-------- .../_index/_components/get-started/index.tsx | 53 +++++---- .../_index/_components/kubernetes/index.tsx | 71 +++++++---- .../kubernetes/kubernetes.module.css | 16 --- .../index.tsx | 17 +-- .../platform-engineering/use-cases.module.css | 18 +++ .../_components/wasmcloud-ecosystem/index.tsx | 38 +++--- .../logo-scroller.module.css | 1 + .../wasmcloud-ecosystem.module.css | 4 - .../wasmcloud-technology/index.tsx | 29 ++--- .../wasmcloud-technology.module.css | 8 -- .../wasmcloud-use-cases/use-cases.module.css | 33 ------ .../webassembly-components/index.tsx | 75 +++++++----- .../webassembly-components.module.css | 16 --- .../_components/what-is-wasmcloud/index.tsx | 29 +++-- .../what-is-wasmcloud.module.css | 45 +------ .../_components/why-use-wasmcloud/index.tsx | 29 +++-- src/pages/_index/index.tsx | 18 +-- src/pages/_index/styles.module.css | 3 +- 36 files changed, 679 insertions(+), 516 deletions(-) create mode 100644 src/pages/_components/decorate/index.tsx create mode 100644 src/pages/_components/grid/index.tsx create mode 100644 src/pages/_components/grid/styles.module.css create mode 100644 src/pages/_components/section-content/index.tsx create mode 100644 src/pages/_components/section-content/section-content.module.css rename src/pages/{_index/_components/get-started => _components/sketch-sparkles}/img/sparkles.svg (100%) create mode 100644 src/pages/_components/sketch-sparkles/index.tsx create mode 100644 src/pages/_components/sketch-sparkles/sketch-sparkles.module.css create mode 100644 src/pages/_index/_components/get-involved/wednesday.module.css create mode 100644 src/pages/_index/_components/get-involved/wednesday.tsx delete mode 100644 src/pages/_index/_components/kubernetes/kubernetes.module.css rename src/pages/_index/_components/{wasmcloud-use-cases => platform-engineering}/index.tsx (85%) create mode 100644 src/pages/_index/_components/platform-engineering/use-cases.module.css delete mode 100644 src/pages/_index/_components/wasmcloud-use-cases/use-cases.module.css delete mode 100644 src/pages/_index/_components/webassembly-components/webassembly-components.module.css diff --git a/src/pages/_components/decorate/index.tsx b/src/pages/_components/decorate/index.tsx new file mode 100644 index 00000000..e000d483 --- /dev/null +++ b/src/pages/_components/decorate/index.tsx @@ -0,0 +1,28 @@ +import SvgSparkles from './img/sparkles.svg'; +import { SketchUnderline } from '@site/src/pages/_components/sketch-underline'; +import styles from './styles.module.css'; +import { SketchSparkles } from '../sketch-sparkles'; + +type Props = { + children: string; +}; + +/** + * tagged template function to decorate input with underline `_(.*?)_` and sparkles `\*(.*?)\*` + * @example decorate`Hello _world_ and *everyone*` => <>Hello world and everyone + * @returns ReactNode with heading decorated + */ +function DecorateText({ children }: Props): React.ReactNode { + const result = children.split(/(_.*?_|\*.*?\*)/).map((part, i) => { + if (part.startsWith('_')) { + return {part.slice(1, -1)}; + } + if (part.startsWith('*')) { + return {part.slice(1, -1)}; + } + return part; + }); + return <>{result}; +} + +export { DecorateText }; diff --git a/src/pages/_components/grid/index.tsx b/src/pages/_components/grid/index.tsx new file mode 100644 index 00000000..dd397dcc --- /dev/null +++ b/src/pages/_components/grid/index.tsx @@ -0,0 +1,36 @@ +import { HTMLProps, PropsWithChildren } from 'react'; +import styles from './styles.module.css'; +import clsx from 'clsx'; + +type BaseProps = PropsWithChildren>; + +type GridProps = BaseProps & { + alignLast?: boolean; + center?: boolean; +}; + +type GridItemProps = BaseProps; + +function Grid({ children, className, alignLast, center, ...props }: GridProps) { + return ( +
+ {children} +
+ ); +} + +function GridItem({ children, className, ...props }: GridItemProps) { + return ( +
+ {children} +
+ ); +} + +export { Grid, GridItem }; diff --git a/src/pages/_components/grid/styles.module.css b/src/pages/_components/grid/styles.module.css new file mode 100644 index 00000000..3244ec81 --- /dev/null +++ b/src/pages/_components/grid/styles.module.css @@ -0,0 +1,58 @@ +.grid { + display: flex; + flex-direction: column; + row-gap: 4rem; + column-gap: 2rem; +} + +.gridItem { + display: flex; + flex-direction: column; + align-items: start; + justify-items: start; + gap: 1.25rem; +} + +.grid.alignLast .gridItem > *:last-child { + margin-top: auto; +} + +.grid.center .gridItem { + text-align: center; + align-items: center; +} + +.gridItem:nth-child(1) { + grid-area: a; +} +.gridItem:nth-child(2) { + grid-area: b; +} +.gridItem:nth-child(3) { + grid-area: c; +} + +.gridItem > * { + margin-top: 0; + margin-bottom: 0; +} + +@media (min-width: 768px) { + .grid { + display: grid; + } + .grid:has(.gridItem:nth-child(2)) { + grid-template: 'a b' 1fr / 1fr 1fr; + } + .grid:has(.gridItem:nth-child(3)) { + grid-template: + 'a a b b' 1fr + '. c c .' 1fr / 1fr 1fr 1fr 1fr; + } +} + +@media (min-width: 997px) { + .grid:has(.gridItem:nth-child(3)) { + grid-template: 'a b c' 1fr / 1fr 1fr 1fr; + } +} diff --git a/src/pages/_components/section-content/index.tsx b/src/pages/_components/section-content/index.tsx new file mode 100644 index 00000000..319c9bb6 --- /dev/null +++ b/src/pages/_components/section-content/index.tsx @@ -0,0 +1,43 @@ +import clsx from 'clsx'; +import styles from './section-content.module.css'; +import React from 'react'; + +type Props = { + hasContainer?: boolean; + align?: 'start' | 'center'; + aside?: React.ReactNode; +} & React.HTMLAttributes; + +function SectionContent({ + children, + className, + aside, + align = 'start', + hasContainer = true, + ...props +}: Props) { + return ( +
+ {aside ? ( + <> +
{children}
+ + + ) : ( + children + )} +
+ ); +} + +export { SectionContent }; diff --git a/src/pages/_components/section-content/section-content.module.css b/src/pages/_components/section-content/section-content.module.css new file mode 100644 index 00000000..56f6d43d --- /dev/null +++ b/src/pages/_components/section-content/section-content.module.css @@ -0,0 +1,35 @@ +.content { + display: flex; + flex-direction: column; + align-items: start; + text-align: start; + width: 100%; +} + +.content.alignCenter { + align-items: center; + text-align: center; +} + +.content + .content { + margin-top: 2rem; +} + +.main { + width: 100%; + grid-area: main; +} + +.aside { + width: 100%; + max-width: 300px; + margin: 0 auto; + grid-area: aside; +} + +@media screen and (min-width: 800px) { + .content:has(.aside) { + display: grid; + grid-template: 'main aside' auto / 2fr 1fr; + } +} diff --git a/src/pages/_components/section-heading/index.tsx b/src/pages/_components/section-heading/index.tsx index 0af0dc7f..a2ec3eef 100644 --- a/src/pages/_components/section-heading/index.tsx +++ b/src/pages/_components/section-heading/index.tsx @@ -1,13 +1,18 @@ import React from 'react'; import styles from './styles.module.css'; +import { DecorateText } from '../decorate'; type Props = { as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; } & React.HTMLAttributes; -function SectionHeading({ as = 'h3', className, ...props }: Props) { +function SectionHeading({ as = 'h3', className, children, ...props }: Props) { const Tag = as; - return ; + return ( + + {typeof children === 'string' ? {children} : children} + + ); } export { SectionHeading }; diff --git a/src/pages/_components/section/index.tsx b/src/pages/_components/section/index.tsx index f9377e67..01968f9f 100644 --- a/src/pages/_components/section/index.tsx +++ b/src/pages/_components/section/index.tsx @@ -1,8 +1,10 @@ import React, { PropsWithChildren } from 'react'; import styles from './styles.module.css'; +export type SectionColor = 'dark-gray' | 'light-gray' | 'green' | 'space-blue' | 'yellow'; + type Props = { - color?: 'dark-gray' | 'light-gray' | 'green' | 'space-blue' | 'yellow'; + color?: SectionColor; className?: string; } & React.HTMLAttributes; diff --git a/src/pages/_components/section/styles.module.css b/src/pages/_components/section/styles.module.css index 7c7a1b28..7d8b0c33 100644 --- a/src/pages/_components/section/styles.module.css +++ b/src/pages/_components/section/styles.module.css @@ -17,6 +17,7 @@ from var(--section-button-background) calc(l * 0.9) c h / 1 ); --section-button-hover-color: var(--section-button-color); + --ifm-heading-color: var(--section-color-foreground); background-color: var(--section-color-background); color: var(--section-color-foreground); } diff --git a/src/pages/_index/_components/get-started/img/sparkles.svg b/src/pages/_components/sketch-sparkles/img/sparkles.svg similarity index 100% rename from src/pages/_index/_components/get-started/img/sparkles.svg rename to src/pages/_components/sketch-sparkles/img/sparkles.svg diff --git a/src/pages/_components/sketch-sparkles/index.tsx b/src/pages/_components/sketch-sparkles/index.tsx new file mode 100644 index 00000000..85447b18 --- /dev/null +++ b/src/pages/_components/sketch-sparkles/index.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import styles from './sketch-sparkles.module.css'; +import clsx from 'clsx'; +import SvgSparkles from './img/sparkles.svg'; + +function SketchSparkles({ children, ...props }) { + return ( + + {children} + + + ); +} + +export { SketchSparkles }; diff --git a/src/pages/_components/sketch-sparkles/sketch-sparkles.module.css b/src/pages/_components/sketch-sparkles/sketch-sparkles.module.css new file mode 100644 index 00000000..e3a814cf --- /dev/null +++ b/src/pages/_components/sketch-sparkles/sketch-sparkles.module.css @@ -0,0 +1,12 @@ +.underline { + position: relative; + color: inherit; +} + +.image { + position: absolute; + color: var(--section-color-highlight); + width: 2.5rem; + right: 0; + bottom: 60%; +} diff --git a/src/pages/_index/_components/case-studies/case-studies.module.css b/src/pages/_index/_components/case-studies/case-studies.module.css index 756920a8..a37296aa 100644 --- a/src/pages/_index/_components/case-studies/case-studies.module.css +++ b/src/pages/_index/_components/case-studies/case-studies.module.css @@ -1,15 +1,3 @@ -.studies { - display: flex; - flex-direction: column; - gap: 1rem; - margin-top: 3rem; -} - -.study { - display: flex; - flex-direction: column; -} - .study h4 { color: inherit; font-size: 1.7rem; @@ -17,10 +5,6 @@ font-weight: 500; } -.study img :global(#alttext-image) { - display: none; -} - .study :last-child { margin-top: auto; } diff --git a/src/pages/_index/_components/case-studies/index.tsx b/src/pages/_index/_components/case-studies/index.tsx index d51ecfe2..0212ae39 100644 --- a/src/pages/_index/_components/case-studies/index.tsx +++ b/src/pages/_index/_components/case-studies/index.tsx @@ -1,10 +1,17 @@ -import { Section } from '@site/src/pages/_components/section'; +import { Section, SectionColor } from '@site/src/pages/_components/section'; import { SectionHeading } from '@site/src/pages/_components/section-heading'; import { SectionTag } from '@site/src/pages/_components/section-tag'; import React from 'react'; import styles from './case-studies.module.css'; +import { SectionContent } from '@site/src/pages/_components/section-content'; +import { Grid, GridItem } from '@site/src/pages/_components/grid'; -type Props = {}; +type Props = { + color?: SectionColor; + tag?: React.ReactNode; + heading?: React.ReactNode; + content?: typeof CONTENT; +}; type CaseStudyContent = { name: string; @@ -47,15 +54,25 @@ const CONTENT: [CaseStudyContent, CaseStudyContent] = [ }, ]; -function CaseStudies({}: Props) { +const HEADING = 'Solving real problems for your business'; +const TAG = 'Case Studies'; + +function CaseStudies({ + color = 'light-gray', + tag = TAG, + heading = HEADING, + content = CONTENT, +}: Props) { return ( -
-
- Case Studies - Solving real problems for your business -
- {CONTENT.map((study, i) => ( -
+
+ + {tag} + {heading} + + + + {content.map((study, i) => ( +

{study.name}

@@ -65,10 +82,10 @@ function CaseStudies({}: Props) { View Case Study

-
+ ))} -
-
+ +
); } diff --git a/src/pages/_index/_components/get-involved/get-involved.module.css b/src/pages/_index/_components/get-involved/get-involved.module.css index cd7edbf1..7a1183d2 100644 --- a/src/pages/_index/_components/get-involved/get-involved.module.css +++ b/src/pages/_index/_components/get-involved/get-involved.module.css @@ -1,11 +1,4 @@ -.content { - display: grid; - grid-template-columns: 1fr; - place-items: center; - gap: 2rem; -} - -.content :global(ul) { +.list { margin-top: 3rem; list-style-type: none; padding: 0; @@ -14,107 +7,22 @@ gap: 1rem; } -.content :global(ul li) { +.list li { padding: 0; } -.content :global(ul li img) { +.list li img { display: inline-block; width: 1.875rem; } -.content :global(ul li a) { +.list li a { display: flex; align-items: center; gap: 1.25rem; - color: var(--section-color-foreground); text-decoration: underline; } -.content :global(ul li a:hover) { +.list li a:hover { text-decoration: none; } - -.wednesday { - position: relative; - width: 100%; - max-width: 520px; - background-color: var(--section-color-background); - padding: 4rem 1rem 2rem; - border-radius: 2rem; - overflow: hidden; - background-image: url('/img/pages/home/get-involved/wednesday.png'); - background-size: cover; - background-position: center; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - gap: 2rem; -} - -.wednesday h4 { - color: var(--wasmcloud-color-brand-white); - font-family: var(--ifm-heading-font-family); - margin: 0; - font-size: 3rem; - line-height: 1.1; -} - -.wednesday span { - color: var(--wasmcloud-color-brand-yellow); - font-family: var(--wasmcloud-font-hand); - margin: 0; - font-size: 2.7rem; - position: absolute; - top: 1rem; - left: 1rem; - transform: rotate(-10deg); -} - -.buttons { - display: flex; - flex-direction: column; - gap: 1rem; - align-items: stretch; - justify-content: space-evenly; - margin-top: 1rem; - margin: 1rem auto 0; - max-width: 500px; -} - -.buttons a.button { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - gap: 0.5rem; - padding: 0.8rem 1rem 0.5rem; - background-color: var(--wasmcloud-color-brand-yellow); - color: var(--wasmcloud-color-brand-space-blue); - border: none; - border-radius: 0.5rem; - font-weight: 500; - cursor: pointer; - width: 150px; -} - -.buttons img { - height: 26px; -} - -@media screen and (min-width: 576px) { - .buttons { - width: 100%; - flex-direction: row; - justify-content: space-evenly; - gap: 0; - } -} - -@media screen and (min-width: 996px) { - .content { - grid-template-columns: 1fr 1fr; - } -} diff --git a/src/pages/_index/_components/get-involved/index.tsx b/src/pages/_index/_components/get-involved/index.tsx index c11eaf52..3b851ebe 100644 --- a/src/pages/_index/_components/get-involved/index.tsx +++ b/src/pages/_index/_components/get-involved/index.tsx @@ -1,87 +1,85 @@ import React from 'react'; -import { Section } from '@site/src/pages/_components/section'; +import { Section, SectionColor } from '@site/src/pages/_components/section'; import { SectionHeading } from '@site/src/pages/_components/section-heading'; import { SectionTag } from '@site/src/pages/_components/section-tag'; import useIsLive from '@site/src/pages/_hooks/use-is-live'; import styles from './get-involved.module.css'; import { Links } from '@site/src/constants'; +import { SectionContent } from '@site/src/pages/_components/section-content'; +import Link from '@docusaurus/Link'; +import { Grid, GridItem } from '@site/src/pages/_components/grid'; +import { Wednesday } from './wednesday'; -type Props = {}; +type Props = { + color?: SectionColor; + tag?: React.ReactNode; + heading?: React.ReactNode; + intro?: React.ReactNode; +}; -function GetInvolved({}: Props) { - const { YOUTUBE, PLAYLIST, CALENDAR, ZOOM, GITHUB, SLACK } = Links; - const { countdown, showLinks } = useIsLive(); +const DEFAULT_PROPS: Props = { + color: 'green', + tag: 'Get Involved', + heading: 'Join the community', + intro: ( +

+ Stop in to a wasmCloud Wednesday meeting, host a WebAssembly meetup, drop in on our Slack + channel. There are plenty of ways to get connected with the wider community for support, + insight, use-cases and expertise. +

+ ), +}; + +function GetInvolved({ + color = DEFAULT_PROPS.color, + tag = DEFAULT_PROPS.tag, + heading = DEFAULT_PROPS.heading, + intro = DEFAULT_PROPS.intro, +}: Props) { + const { PLAYLIST, CALENDAR, GITHUB, SLACK } = Links; return ( -
-
- Get Involved - Join the community -
-
-

- Stop in to a wasmCloud Wednesday meeting, host a WebAssembly meetup, drop in on our - Slack channel. There are plenty of ways to get connected with the wider community for - support, insight, use-cases and expertise. -

-
-
-

- wasmCloud Wednesday - {countdown} -

- {showLinks ? ( - - ) : ( - - )} -
-
-
+ + + + + +
); } diff --git a/src/pages/_index/_components/get-involved/wednesday.module.css b/src/pages/_index/_components/get-involved/wednesday.module.css new file mode 100644 index 00000000..6ad01e34 --- /dev/null +++ b/src/pages/_index/_components/get-involved/wednesday.module.css @@ -0,0 +1,77 @@ +.wednesday { + position: relative; + width: 100%; + max-width: 520px; + background-color: var(--section-color-background); + padding: 4rem 1rem 2rem; + border-radius: 2rem; + overflow: hidden; + background-image: url('/img/pages/home/get-involved/wednesday.png'); + background-size: cover; + background-position: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + gap: 2rem; +} + +.wednesday h4 { + color: var(--wasmcloud-color-brand-white); + font-family: var(--ifm-heading-font-family); + margin: 0; + font-size: 3rem; + line-height: 1.1; +} + +.wednesday span { + color: var(--wasmcloud-color-brand-yellow); + font-family: var(--wasmcloud-font-hand); + margin: 0; + font-size: 2.7rem; + position: absolute; + top: 1rem; + left: 1rem; + transform: rotate(-10deg); +} + +.buttons { + display: flex; + flex-direction: column; + gap: 1rem; + align-items: stretch; + justify-content: space-evenly; + margin-top: 1rem; + margin: 1rem auto 0; + max-width: 500px; +} + +.buttons a.button { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + padding: 0.8rem 1rem 0.5rem; + background-color: var(--wasmcloud-color-brand-yellow); + color: var(--wasmcloud-color-brand-space-blue); + border: none; + border-radius: 0.5rem; + font-weight: 500; + cursor: pointer; + width: 150px; +} + +.buttons img { + height: 26px; +} + +@media screen and (min-width: 576px) { + .buttons { + width: 100%; + flex-direction: row; + justify-content: space-evenly; + gap: 0; + } +} diff --git a/src/pages/_index/_components/get-involved/wednesday.tsx b/src/pages/_index/_components/get-involved/wednesday.tsx new file mode 100644 index 00000000..74dd2a09 --- /dev/null +++ b/src/pages/_index/_components/get-involved/wednesday.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +import styles from './wednesday.module.css'; +import useIsLive from '@site/src/pages/_hooks/use-is-live'; +import { Links } from '@site/src/constants'; +import Link from '@docusaurus/Link'; + +function Wednesday(): React.ReactElement { + const { YOUTUBE, PLAYLIST, CALENDAR, ZOOM } = Links; + const { countdown, showLinks } = useIsLive(); + return ( +
+

+ wasmCloud Wednesday + {countdown} +

+ {showLinks ? ( +
+ + + Join Live + + + + Stream Live + +
+ ) : ( +
+ + + Add to Cal + + + + Past Calls + +
+ )} +
+ ); +} + +export { Wednesday }; diff --git a/src/pages/_index/_components/get-started/get-started.module.css b/src/pages/_index/_components/get-started/get-started.module.css index 01eff72b..bca30fc7 100644 --- a/src/pages/_index/_components/get-started/get-started.module.css +++ b/src/pages/_index/_components/get-started/get-started.module.css @@ -8,70 +8,18 @@ white-space: nowrap; } -.sparkles { - position: absolute; - color: var(--section-color-highlight); - width: 2.5rem; +.heading span svg { bottom: -30%; right: 0; } -.grid { - display: grid; - grid-template-columns: 1fr; - gap: 3rem; - margin-top: 2rem; -} - -.gridItem { - display: flex; - flex-direction: column; - align-items: start; - justify-content: center; - gap: 0.5rem; -} - -.gridItem img { - width: 36px; -} - -.gridItem h4 { - color: inherit; +.content h4 { font-size: 1.25rem; } -.gridItem p { - margin-bottom: auto; -} - -.gridItem a { - margin-top: 1rem; -} - -.gridItem > * { - margin: 0; -} - @media (min-width: 768px) { - .sparkles { + .heading span svg { padding-right: 0; bottom: 60%; } - - .grid { - grid-template: - 'a a b b' 1fr - '. c c .' 1fr / repeat(4, 1fr); - column-gap: 1rem; - } - - /* .gridItem:nth-child(2n + 1):last-child { - grid-column: span 2; - } */ -} - -@media (min-width: 997px) { - .grid { - grid-template-columns: repeat(3, 1fr); - } } diff --git a/src/pages/_index/_components/get-started/index.tsx b/src/pages/_index/_components/get-started/index.tsx index 7647dddd..8e9999a0 100644 --- a/src/pages/_index/_components/get-started/index.tsx +++ b/src/pages/_index/_components/get-started/index.tsx @@ -1,35 +1,40 @@ import React from 'react'; -import { Section } from '@site/src/pages/_components/section'; +import { Section, SectionColor } from '@site/src/pages/_components/section'; import { SectionHeading } from '@site/src/pages/_components/section-heading'; import { SectionTag } from '@site/src/pages/_components/section-tag'; import styles from './get-started.module.css'; -import SvgSparkles from './img/sparkles.svg'; -import { SketchUnderline } from '@site/src/pages/_components/sketch-underline'; +import { Grid, GridItem } from '@site/src/pages/_components/grid'; +import { SectionContent } from '@site/src/pages/_components/section-content'; -type Props = {}; +type Props = { + color?: SectionColor; + tag?: React.ReactNode; + /** markdown-ish: _x_ for underline *x* for sparkles */ + heading?: string; +}; -function GetStarted({}: Props) { +function GetStarted({ + color = 'yellow', + tag = 'Get Started', + heading = 'Your _Universal_ Golden Path starts *here*', +}: Props) { return ( -
-
- Get started - - Your Universal Golden Path starts{' '} - - here - - - -
-
+
+ + {tag} + {heading} + + + +

Download the wasmCloud CLI

Get all the dev tooling you need by installing the wasmCloud "wash" CLI

Download wash -
-
+ +

Build your first component

Start building with standard interfaces using one of our examples

@@ -41,17 +46,17 @@ function GetStarted({}: Props) { > See Examples -
-
+ +

Deploy on wasmCloud

Deploy your application with the wasmCloud orchestrator

Read Documentation -
-
-
+ + +
); } diff --git a/src/pages/_index/_components/kubernetes/index.tsx b/src/pages/_index/_components/kubernetes/index.tsx index 5b013a53..40b65247 100644 --- a/src/pages/_index/_components/kubernetes/index.tsx +++ b/src/pages/_index/_components/kubernetes/index.tsx @@ -1,35 +1,54 @@ +import React, { ComponentProps, ReactPropTypes } from 'react'; +import Link from '@docusaurus/Link'; import { Section } from '@site/src/pages/_components/section'; +import { SectionContent } from '@site/src/pages/_components/section-content'; import { SectionHeading } from '@site/src/pages/_components/section-heading'; import { SectionTag } from '@site/src/pages/_components/section-tag'; -import React from 'react'; -import styles from './kubernetes.module.css'; -type Props = {}; +type Props = Partial; -function Kubernetes({}: Props) { +const DEFAULT_CONTENT = { + color: 'dark-gray' as const, + id: 'kubernetes', + tag: 'Kubernetes', + heading: 'Extend Kubernetes with wasmCloud', + intro: ( +

+ Run wasmCloud standalone or on Kubernetes. Leverage WebAssembly components to extend + Kubernetes and distribute applications across clouds, regions, clusters, and edges. +

+ ), + link: { + href: 'https://wasmcloud.com/docs/deployment/k8s/', + text: 'Deploy the wasmCloud k8s Operator', + }, + img: { + src: '/img/pages/home/kubernetes/kubernetes.svg', + alt: '', + }, +}; + +function Kubernetes({ + color = DEFAULT_CONTENT.color, + id = DEFAULT_CONTENT.id, + tag = DEFAULT_CONTENT.tag, + heading = DEFAULT_CONTENT.heading, + intro = DEFAULT_CONTENT.intro, + link = DEFAULT_CONTENT.link, + img = DEFAULT_CONTENT.img, +}: Props) { return ( -
-
-
-
- Kubernetes - Extend Kubernetes with wasmCloud -

- Run wasmCloud standalone or on Kubernetes. Leverage WebAssembly components to extend - Kubernetes and distribute applications across clouds, regions, clusters, and edges. -

-

- - Deploy the wasmCloud k8s Operator - -

-
-
- -
-
-
-
+
+ }> + {tag} + {heading} + {typeof intro === 'string' ?

{intro}

: intro} + {link && ( +

+ {link.text} +

+ )} +
); } diff --git a/src/pages/_index/_components/kubernetes/kubernetes.module.css b/src/pages/_index/_components/kubernetes/kubernetes.module.css deleted file mode 100644 index bdf136e2..00000000 --- a/src/pages/_index/_components/kubernetes/kubernetes.module.css +++ /dev/null @@ -1,16 +0,0 @@ -.content { - display: grid; - grid-template-columns: 1fr; -} - -.image { - display: block; - max-width: 300px; - margin: 0 auto; -} - -@media screen and (min-width: 800px) { - .content { - grid-template-columns: 2fr 1fr; - } -} diff --git a/src/pages/_index/_components/wasmcloud-use-cases/index.tsx b/src/pages/_index/_components/platform-engineering/index.tsx similarity index 85% rename from src/pages/_index/_components/wasmcloud-use-cases/index.tsx rename to src/pages/_index/_components/platform-engineering/index.tsx index 5999b16a..df6fa355 100644 --- a/src/pages/_index/_components/wasmcloud-use-cases/index.tsx +++ b/src/pages/_index/_components/platform-engineering/index.tsx @@ -5,6 +5,7 @@ import React from 'react'; import styles from './use-cases.module.css'; import { SketchUnderline } from '@site/src/pages/_components/sketch-underline'; import { VideoButton } from '@site/src/pages/_components/video-button'; +import { Grid, GridItem } from '@site/src/pages/_components/grid'; type Props = {}; @@ -19,8 +20,8 @@ const SECTION_CONTENT: { tag: string; heading: React.ReactNode; } = { - id: 'use-cases', - tag: 'wasmCloud Use Cases', + id: 'platform-engineering', + tag: 'wasmCloud as a Platform', heading: ( <> The Platform for Platform-Engineering @@ -57,24 +58,24 @@ const VIDEO_CONTENT: [UseCasesContent, UseCasesContent] = [ }, ]; -function WasmCloudUseCases({}: Props) { +function PlatformEngineering({}: Props) { return (
{SECTION_CONTENT.tag} {SECTION_CONTENT.heading} -
+ {VIDEO_CONTENT.map((video, i) => ( -
+

{video.name}

{video.content} -
+ ))} -
+
); } -export { WasmCloudUseCases }; +export { PlatformEngineering }; diff --git a/src/pages/_index/_components/platform-engineering/use-cases.module.css b/src/pages/_index/_components/platform-engineering/use-cases.module.css new file mode 100644 index 00000000..7d252e6e --- /dev/null +++ b/src/pages/_index/_components/platform-engineering/use-cases.module.css @@ -0,0 +1,18 @@ +.content { + margin-top: 4rem; +} + +.item { +} + +.item h4 { + font-size: 1.7rem; + font-weight: 500; +} + +.item :last-child { + margin-top: auto; +} + +@media screen and (min-width: 800px) { +} diff --git a/src/pages/_index/_components/wasmcloud-ecosystem/index.tsx b/src/pages/_index/_components/wasmcloud-ecosystem/index.tsx index 975fe6ab..17585305 100644 --- a/src/pages/_index/_components/wasmcloud-ecosystem/index.tsx +++ b/src/pages/_index/_components/wasmcloud-ecosystem/index.tsx @@ -1,17 +1,19 @@ -import { Section } from '@site/src/pages/_components/section'; -import { SectionHeading } from '@site/src/pages/_components/section-heading'; -import { SectionTag } from '@site/src/pages/_components/section-tag'; import React from 'react'; import styles from './wasmcloud-ecosystem.module.css'; import { LogoScroller } from './logo-scroller'; +import { SectionLayout } from '@site/src/pages/_components/section-layout'; +import { SectionTag } from '@site/src/pages/_components/section-tag'; +import { Section } from '@site/src/pages/_components/section'; +import { SectionContent } from '@site/src/pages/_components/section-content'; +import { SectionHeading } from '@site/src/pages/_components/section-heading'; type Props = {}; function WasmCloudEcosystem({}: Props) { return ( -
-
- wasmCloud Ecosystem +
+ + WasmCloud Ecosystem Wasm-native works with cloud-native

wasmCloud works with the tools you know and love today.

@@ -19,18 +21,20 @@ function WasmCloudEcosystem({}: Props) { Capability Catalog

-
-
-
- - works with this -
- -
- - and this + + +
+
+ + works with this +
+ +
+ + and this +
-
+
); } diff --git a/src/pages/_index/_components/wasmcloud-ecosystem/logo-scroller.module.css b/src/pages/_index/_components/wasmcloud-ecosystem/logo-scroller.module.css index 27162f30..6ec28716 100644 --- a/src/pages/_index/_components/wasmcloud-ecosystem/logo-scroller.module.css +++ b/src/pages/_index/_components/wasmcloud-ecosystem/logo-scroller.module.css @@ -4,6 +4,7 @@ --height: 84px; width: 100%; + overflow: hidden; } .row { diff --git a/src/pages/_index/_components/wasmcloud-ecosystem/wasmcloud-ecosystem.module.css b/src/pages/_index/_components/wasmcloud-ecosystem/wasmcloud-ecosystem.module.css index b2161ecf..613f2ed7 100644 --- a/src/pages/_index/_components/wasmcloud-ecosystem/wasmcloud-ecosystem.module.css +++ b/src/pages/_index/_components/wasmcloud-ecosystem/wasmcloud-ecosystem.module.css @@ -5,10 +5,6 @@ margin: 7rem 0; } -.content { - text-align: center; -} - .callout { position: absolute; transform: rotate(-4deg); diff --git a/src/pages/_index/_components/wasmcloud-technology/index.tsx b/src/pages/_index/_components/wasmcloud-technology/index.tsx index f19a978f..ca644f58 100644 --- a/src/pages/_index/_components/wasmcloud-technology/index.tsx +++ b/src/pages/_index/_components/wasmcloud-technology/index.tsx @@ -5,27 +5,28 @@ import { SectionTag } from '@site/src/pages/_components/section-tag'; import styles from './wasmcloud-technology.module.css'; import ImgQuestionMarks from './images/question-marks.svg'; import ImgArrow from './images/arrow.svg'; +import { SectionContent } from '@site/src/pages/_components/section-content'; type Props = {}; function WasmCloudTechnology({}: Props) { return (
-
-
- wasmCloud Technology - How does it work? -
- - - - what's under -
- the hood? - -
+ + wasmCloud Technology + How does it work? + + +
+ + + + what's under +
+ the hood? +
-
+
); } diff --git a/src/pages/_index/_components/wasmcloud-technology/wasmcloud-technology.module.css b/src/pages/_index/_components/wasmcloud-technology/wasmcloud-technology.module.css index 199690c1..7972a6ce 100644 --- a/src/pages/_index/_components/wasmcloud-technology/wasmcloud-technology.module.css +++ b/src/pages/_index/_components/wasmcloud-technology/wasmcloud-technology.module.css @@ -1,11 +1,3 @@ -.content { - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - .video { position: relative; background-color: var(--section-color-foreground); diff --git a/src/pages/_index/_components/wasmcloud-use-cases/use-cases.module.css b/src/pages/_index/_components/wasmcloud-use-cases/use-cases.module.css deleted file mode 100644 index e92a3de4..00000000 --- a/src/pages/_index/_components/wasmcloud-use-cases/use-cases.module.css +++ /dev/null @@ -1,33 +0,0 @@ -.content { - display: flex; - flex-direction: column; - gap: 4rem; - margin-top: 3rem; -} - -.item { - display: flex; - flex-direction: column; - flex: 1 0 0; -} - -.item h4 { - color: inherit; - font-size: 1.7rem; - font-family: var(--wasmcloud-font-heading); - font-weight: 500; -} - -.item img :global(#alttext-image) { - display: none; -} - -.item :last-child { - margin-top: auto; -} - -@media screen and (min-width: 800px) { - .content { - flex-direction: row; - } -} diff --git a/src/pages/_index/_components/webassembly-components/index.tsx b/src/pages/_index/_components/webassembly-components/index.tsx index d9c11ce9..7233a0f0 100644 --- a/src/pages/_index/_components/webassembly-components/index.tsx +++ b/src/pages/_index/_components/webassembly-components/index.tsx @@ -1,38 +1,55 @@ +import Link from '@docusaurus/Link'; import { Section } from '@site/src/pages/_components/section'; +import { SectionContent } from '@site/src/pages/_components/section-content'; import { SectionHeading } from '@site/src/pages/_components/section-heading'; +import { SectionLayout } from '@site/src/pages/_components/section-layout'; import { SectionTag } from '@site/src/pages/_components/section-tag'; -import React from 'react'; -import styles from './webassembly-components.module.css'; +import React, { ComponentProps } from 'react'; -type Props = {}; +type Props = Partial>; -function WebAssemblyComponents({}: Props) { +const DEFAULT_CONTENT = { + color: 'light-gray' as const, + id: 'webassembly-components', + tag: 'WebAssembly Components', + heading: 'New to Components?', + intro: ( +

+ Leverage WebAssembly components' polyglot programming, security features, and modularity to + build secure, maintainable applications. +

+ ), + link: { + href: 'https://wasmcloud.com/docs/concepts/components', + text: 'Read our components starter guide', + }, + img: { + src: '/img/pages/home/webassembly-components/components.svg', + alt: '', + }, +}; + +function WebAssemblyComponents({ + color = DEFAULT_CONTENT.color, + id = DEFAULT_CONTENT.id, + tag = DEFAULT_CONTENT.tag, + heading = DEFAULT_CONTENT.heading, + intro = DEFAULT_CONTENT.intro, + link = DEFAULT_CONTENT.link, + img = DEFAULT_CONTENT.img, +}: Props) { return ( -
-
-
-
- WebAssembly Components - New to Components? -

- Leverage WebAssembly components' polyglot programming, - security features, and modularity to build secure, maintainable applications. -

-

- - Read our components starter guide - -

-
-
- -
-
-
+
+ }> + {tag} + {heading} + {intro} + {link && ( +

+ {link.text} +

+ )} +
); } diff --git a/src/pages/_index/_components/webassembly-components/webassembly-components.module.css b/src/pages/_index/_components/webassembly-components/webassembly-components.module.css deleted file mode 100644 index bdf136e2..00000000 --- a/src/pages/_index/_components/webassembly-components/webassembly-components.module.css +++ /dev/null @@ -1,16 +0,0 @@ -.content { - display: grid; - grid-template-columns: 1fr; -} - -.image { - display: block; - max-width: 300px; - margin: 0 auto; -} - -@media screen and (min-width: 800px) { - .content { - grid-template-columns: 2fr 1fr; - } -} diff --git a/src/pages/_index/_components/what-is-wasmcloud/index.tsx b/src/pages/_index/_components/what-is-wasmcloud/index.tsx index 5da3f807..e1b68297 100644 --- a/src/pages/_index/_components/what-is-wasmcloud/index.tsx +++ b/src/pages/_index/_components/what-is-wasmcloud/index.tsx @@ -10,6 +10,7 @@ import { } from '../what-is-wasmcloud/switcher'; import { SectionSubheading } from '@site/src/pages/_components/section-subheading'; import styles from './what-is-wasmcloud.module.css'; +import { Grid, GridItem } from '@site/src/pages/_components/grid'; type Props = {}; @@ -144,7 +145,7 @@ const SWITCHER_CONTENT: Array<{ function WhatIsWasmCloud({}: Props) { return ( -
+
{INTRO_CONTENT.tag} {INTRO_CONTENT.heading} @@ -178,18 +179,20 @@ function WhatIsWasmCloudSwitcher({}: Props) { {SWITCHER_CONTENT.map((content, i) => ( {content.title} -
- {content.features.map((feature, i) => ( -
-
{feature.title}
-

{feature.description}

- {feature.link && {feature.linkText}} -
- ))} -
-
- -
+ + + {content.features.map((feature, i) => ( +
+
{feature.title}
+

{feature.description}

+ {feature.link && {feature.linkText}} +
+ ))} + + + + + ))} diff --git a/src/pages/_index/_components/what-is-wasmcloud/what-is-wasmcloud.module.css b/src/pages/_index/_components/what-is-wasmcloud/what-is-wasmcloud.module.css index 8920ff84..7b23edce 100644 --- a/src/pages/_index/_components/what-is-wasmcloud/what-is-wasmcloud.module.css +++ b/src/pages/_index/_components/what-is-wasmcloud/what-is-wasmcloud.module.css @@ -1,26 +1,9 @@ -.content { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr auto; - gap: 1.5rem; - align-items: start; -} - .content[data-active='false'] { display: none; } .heading { - grid-column-start: 1; - grid-column-end: 2; -} - -.contentCopy { - display: flex; - flex-direction: column; - align-items: start; - justify-content: center; - gap: 1.5rem; + margin-bottom: 2rem; } .feature { @@ -30,14 +13,13 @@ gap: 0.1rem; } -.feature :global(h5) { - color: inherit; +.feature h5 { font-size: 1.25rem; line-height: 1.2em; margin: 0; } -.feature :global(p) { +.feature p { font-size: 1.125rem; font-weight: 400; line-height: 1.5em; @@ -149,24 +131,3 @@ --ifm-button-font-weight: 500; } } - -@media screen and (min-width: 800px) { - .list { - } - - .heading { - grid-column-start: 1; - grid-column-end: 3; - } - - .content { - grid-template-columns: 5fr 7fr; - } -} - -@media screen and (min-width: 997px) { - .content { - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr auto; - } -} diff --git a/src/pages/_index/_components/why-use-wasmcloud/index.tsx b/src/pages/_index/_components/why-use-wasmcloud/index.tsx index 62767c5c..672431f4 100644 --- a/src/pages/_index/_components/why-use-wasmcloud/index.tsx +++ b/src/pages/_index/_components/why-use-wasmcloud/index.tsx @@ -3,27 +3,26 @@ import { Section } from '@site/src/pages/_components/section'; import { SectionHeading } from '@site/src/pages/_components/section-heading'; import { SectionTag } from '@site/src/pages/_components/section-tag'; import styles from './why-use-wasmcloud.module.css'; +import { SectionContent } from '@site/src/pages/_components/section-content'; type Props = {}; function WhyUseWasmCloud({}: Props) { return (
-
-
- Why use wasmCloud? - - Productivity. Maintainability. Portability. Reusability. Availability. Security. - -

- WebAssembly components are a finer-grained abstraction for application - composition and a Wasm-specific orchestrator maximizes their full potential. -

-
-
- -
-
+ + Why use wasmCloud? + + Productivity. Maintainability. Portability. Reusability. Availability. Security. + +

+ WebAssembly components are a finer-grained abstraction for application composition and a + Wasm-specific orchestrator maximizes their full potential. +

+ + + +
); } diff --git a/src/pages/_index/index.tsx b/src/pages/_index/index.tsx index e125472b..85004885 100644 --- a/src/pages/_index/index.tsx +++ b/src/pages/_index/index.tsx @@ -1,17 +1,17 @@ import React from 'react'; import Layout from '@theme/Layout'; import styles from './styles.module.css'; -import { Hero } from './_components/hero'; -import { WhatIsWasmCloud } from './_components/what-is-wasmcloud'; -import { WhyUseWasmCloud } from './_components/why-use-wasmcloud'; -import { WasmCloudTechnology } from './_components/wasmcloud-technology'; -import { WebAssemblyComponents } from './_components/webassembly-components'; -import { GetInvolved } from './_components/get-involved'; import { CaseStudies } from './_components/case-studies'; +import { GetInvolved } from './_components/get-involved'; +import { GetStarted } from './_components/get-started'; +import { Hero } from './_components/hero'; import { Kubernetes } from './_components/kubernetes'; +import { PlatformEngineering } from './_components/platform-engineering'; import { WasmCloudEcosystem } from './_components/wasmcloud-ecosystem'; -import { GetStarted } from './_components/get-started'; -import { WasmCloudUseCases } from './_components/wasmcloud-use-cases'; +import { WasmCloudTechnology } from './_components/wasmcloud-technology'; +import { WebAssemblyComponents } from './_components/webassembly-components'; +import { WhatIsWasmCloud } from './_components/what-is-wasmcloud'; +import { WhyUseWasmCloud } from './_components/why-use-wasmcloud'; function ContactForm() { return ( @@ -24,7 +24,7 @@ function ContactForm() { - + {/* TODO: enable once video is produced */} {/* */} diff --git a/src/pages/_index/styles.module.css b/src/pages/_index/styles.module.css index 952bceb9..c01e01bc 100644 --- a/src/pages/_index/styles.module.css +++ b/src/pages/_index/styles.module.css @@ -7,7 +7,8 @@ .main :global(.container) { width: 100%; - margin: 0 auto; + margin-left: auto; + margin-right: auto; padding: 0 1rem; position: relative; }