From 756f9a820371a639c1ad7de113e4277a1cc63965 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 9 Feb 2026 20:51:13 -0500 Subject: [PATCH] feat: #8 inital styles and layout --- greenwood.config.ts | 7 + package-lock.json | 73 +++++++- package.json | 11 +- patches/wc-compiler+0.19.0.patch | 25 +++ src/assets/bluesky.svg | 4 + src/assets/discord.svg | 3 + src/assets/github.svg | 3 + src/assets/tile.svg | 12 ++ src/assets/twitter-logo.svg | 3 + src/assets/wcc-logo-og.png | Bin 0 -> 1730 bytes src/assets/wcc-logo.svg | 5 + src/components/footer/footer.module.css | 21 +++ src/components/footer/footer.tsx | 25 +++ src/components/header/header.module.css | 156 ++++++++++++++++++ src/components/header/header.tsx | 115 +++++++++++++ .../social-tray/social-tray.module.css | 23 +++ src/components/social-tray/social-tray.tsx | 57 +++++++ src/index.html | 31 +++- src/styles/theme.css | 92 +++++++++++ src/types.d.ts | 10 ++ tsconfig.json | 4 +- 21 files changed, 671 insertions(+), 9 deletions(-) create mode 100644 patches/wc-compiler+0.19.0.patch create mode 100644 src/assets/bluesky.svg create mode 100644 src/assets/discord.svg create mode 100644 src/assets/github.svg create mode 100644 src/assets/tile.svg create mode 100644 src/assets/twitter-logo.svg create mode 100644 src/assets/wcc-logo-og.png create mode 100644 src/assets/wcc-logo.svg create mode 100644 src/components/footer/footer.module.css create mode 100644 src/components/footer/footer.tsx create mode 100644 src/components/header/header.module.css create mode 100644 src/components/header/header.tsx create mode 100644 src/components/social-tray/social-tray.module.css create mode 100644 src/components/social-tray/social-tray.tsx create mode 100644 src/styles/theme.css diff --git a/greenwood.config.ts b/greenwood.config.ts index 508bb3e..7760996 100644 --- a/greenwood.config.ts +++ b/greenwood.config.ts @@ -1,8 +1,15 @@ +import { greenwoodPluginImportRaw } from '@greenwood/plugin-import-raw'; +import { greenwoodPluginCssModules } from '@greenwood/plugin-css-modules'; +import { greenwoodPluginImportJsx } from '@greenwood/plugin-import-jsx'; import { replBundlerResourcePlugin } from './repl-bundler-plugin.ts'; import type { Config } from "@greenwood/cli"; const config: Config = { + prerender: true, plugins: [ + greenwoodPluginCssModules(), + greenwoodPluginImportRaw(), + greenwoodPluginImportJsx(), replBundlerResourcePlugin() ] }; diff --git a/package-lock.json b/package-lock.json index f612720..dff7f85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,16 +8,23 @@ "name": "playground.wcc.dev", "version": "1.0.0", "hasInstallScript": true, + "dependencies": { + "geist": "^1.2.0", + "open-props": "^1.7.23" + }, "devDependencies": { - "@greenwood/cli": "~0.34.0-alpha.3", + "@greenwood/cli": "~0.34.0-alpha.4", + "@greenwood/plugin-css-modules": "^0.34.0-alpha.4", + "@greenwood/plugin-import-jsx": "^0.34.0-alpha.4", + "@greenwood/plugin-import-raw": "^0.34.0-alpha.4", "patch-package": "^8.0.1", "typescript": "^5.9.2" } }, "node_modules/@greenwood/cli": { - "version": "0.34.0-alpha.3", - "resolved": "https://registry.npmjs.org/@greenwood/cli/-/cli-0.34.0-alpha.3.tgz", - "integrity": "sha512-W64c9+VsaNfLsB2s+cBb9Hj9TMJ+eOA3jYgLLe+K/FFqxAxmEEZIZ5Cjp1a9Tojuu9XZEBPB5cq5yZi7Ot4bBA==", + "version": "0.34.0-alpha.4", + "resolved": "https://registry.npmjs.org/@greenwood/cli/-/cli-0.34.0-alpha.4.tgz", + "integrity": "sha512-UagmjO9AxuGPf3YKB1YINTMAABTEBbQGNby75At2q7Wpov1wz9aUUB0xrqX8VzyqUM3yIg45uTP8qB3GNnXlBA==", "dev": true, "license": "MIT", "dependencies": { @@ -45,6 +52,49 @@ "node": ">=22.18.0" } }, + "node_modules/@greenwood/plugin-css-modules": { + "version": "0.34.0-alpha.4", + "resolved": "https://registry.npmjs.org/@greenwood/plugin-css-modules/-/plugin-css-modules-0.34.0-alpha.4.tgz", + "integrity": "sha512-gH0LJ0QkyCFOQnxwJRNpVJMoTa33ypVA8gzooGbEu0CzfWS0iuptfuzaD8s2wt4oOt4AXmmH7ICW2Gj5LAmXrQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "acorn": "^8.14.0", + "acorn-walk": "^8.3.4", + "css-tree": "^3.0.0", + "node-html-parser": "^7.0.1" + }, + "peerDependencies": { + "@greenwood/cli": "^0.33.0" + } + }, + "node_modules/@greenwood/plugin-import-jsx": { + "version": "0.34.0-alpha.4", + "resolved": "https://registry.npmjs.org/@greenwood/plugin-import-jsx/-/plugin-import-jsx-0.34.0-alpha.4.tgz", + "integrity": "sha512-PDIglK6CtSNeFileA7mF79jnWacvMVAUtQnXhoBzg9/dGFsYrzYuF85Gv1dDi+mGKNFOME0BzDQwxqt+N9bP/A==", + "dev": true, + "license": "MIT", + "dependencies": { + "astring": "^1.9.0", + "wc-compiler": "~0.19.0" + }, + "peerDependencies": { + "@greenwood/cli": "^0.33.0" + } + }, + "node_modules/@greenwood/plugin-import-raw": { + "version": "0.34.0-alpha.4", + "resolved": "https://registry.npmjs.org/@greenwood/plugin-import-raw/-/plugin-import-raw-0.34.0-alpha.4.tgz", + "integrity": "sha512-oZAnonBzg0zsPzbAWqEVtj+XmBs0UNjtslXxQ/F9FP7qE+hFX+MWVF5E8mDORacHKewOqweIsoz8rdAiSf1tPA==", + "dev": true, + "license": "MIT", + "dependencies": { + "node-html-parser": "^7.0.1" + }, + "peerDependencies": { + "@greenwood/cli": "^0.33.0" + } + }, "node_modules/@hapi/bourne": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@hapi/bourne/-/bourne-3.0.0.tgz", @@ -1659,6 +1709,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/geist": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/geist/-/geist-1.7.0.tgz", + "integrity": "sha512-ZaoiZwkSf0DwwB1ncdLKp+ggAldqxl5L1+SXaNIBGkPAqcu+xjVJLxlf3/S8vLt9UHx1xu5fz3lbzKCj5iOVdQ==", + "license": "SIL OPEN FONT LICENSE", + "peerDependencies": { + "next": ">=13.2.0" + } + }, "node_modules/get-intrinsic": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", @@ -2410,6 +2469,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/open-props": { + "version": "1.7.23", + "resolved": "https://registry.npmjs.org/open-props/-/open-props-1.7.23.tgz", + "integrity": "sha512-+xyrJmxV9QUBFbSwPROYhOg/FLXry+uuPr4R+B5EaE4556Oc18/8ZC/fL5A+/lbRSwNvA0Alh+C0KpyFWLmLZg==", + "license": "MIT" + }, "node_modules/opts": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/opts/-/opts-2.0.2.tgz", diff --git a/package.json b/package.json index 7f2f3c5..71cb7d8 100644 --- a/package.json +++ b/package.json @@ -16,13 +16,20 @@ "type": "module", "scripts": { "dev": "greenwood develop", - "build": "greenwood build", + "build": "NODE_OPTIONS='--import @greenwood/cli/register' greenwood build", "serve": "greenwood serve", "check": "tsc", "postinstall": "patch-package" }, + "dependencies": { + "geist": "^1.2.0", + "open-props": "^1.7.23" + }, "devDependencies": { - "@greenwood/cli": "~0.34.0-alpha.3", + "@greenwood/cli": "~0.34.0-alpha.4", + "@greenwood/plugin-css-modules": "^0.34.0-alpha.4", + "@greenwood/plugin-import-raw": "^0.34.0-alpha.4", + "@greenwood/plugin-import-jsx": "^0.34.0-alpha.4", "patch-package": "^8.0.1", "typescript": "^5.9.2" } diff --git a/patches/wc-compiler+0.19.0.patch b/patches/wc-compiler+0.19.0.patch new file mode 100644 index 0000000..14b3d7a --- /dev/null +++ b/patches/wc-compiler+0.19.0.patch @@ -0,0 +1,25 @@ +diff --git a/node_modules/wc-compiler/src/jsx.d.ts b/node_modules/wc-compiler/src/jsx.d.ts +index 2dc9baa..a2cb857 100644 +--- a/node_modules/wc-compiler/src/jsx.d.ts ++++ b/node_modules/wc-compiler/src/jsx.d.ts +@@ -3,12 +3,17 @@ type IsCSSStyleDeclaration = T extends CSSStyleDeclaration ? string : T; + + // create a utility type to extract the attributes from any given element's DOM interface. + type ElementAttributes = { +- // Extract all properties from the element, including inherited ones. ++ // Extract all properties from the element, including inherited ones + [A in keyof E]?: E[A] extends (...args: any) => any ? any : IsCSSStyleDeclaration; + } & { + class?: string; +-}; +- ++ // have to manage this manually, can't seem to get this from TypeScript itself (not sure if just skill issue? :D) ++ // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1790 ++ // it should be there per https://github.com/mdn/browser-compat-data/pull/21875 ++ // https://github.com/ProjectEvergreen/wcc/issues/236 ++ popovertarget?: string; ++ popovertargetaction?: 'show' | 'hide' | 'toggle'; ++} + // map each HTML tag to a union of its attributes and the global attributes. + type IntrinsicElementsFromDom = { + [E in keyof HTMLElementTagNameMap]: ElementAttributes; diff --git a/src/assets/bluesky.svg b/src/assets/bluesky.svg new file mode 100644 index 0000000..869cc3d --- /dev/null +++ b/src/assets/bluesky.svg @@ -0,0 +1,4 @@ + + Brand Bluesky Streamline Icon: https://streamlinehq.com + + \ No newline at end of file diff --git a/src/assets/discord.svg b/src/assets/discord.svg new file mode 100644 index 0000000..9a46ceb --- /dev/null +++ b/src/assets/discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/github.svg b/src/assets/github.svg new file mode 100644 index 0000000..f34db0f --- /dev/null +++ b/src/assets/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/tile.svg b/src/assets/tile.svg new file mode 100644 index 0000000..fa60659 --- /dev/null +++ b/src/assets/tile.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/twitter-logo.svg b/src/assets/twitter-logo.svg new file mode 100644 index 0000000..a96eb78 --- /dev/null +++ b/src/assets/twitter-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/wcc-logo-og.png b/src/assets/wcc-logo-og.png new file mode 100644 index 0000000000000000000000000000000000000000..36fd47130b0238b599a2e570e9413c1bf019350c GIT binary patch literal 1730 zcmYk72UL?+6vtl}%8;cTL`E28%23FFgfJTkR6zKWAgBz1LJ@lej;#Y}<7Oog3Kfb9 z1*8&oJt7DhfDutFT8ud0ID&-+6(S;_B7I+ip5~mq-0{2rd++;_lictynvRx<763pe zIEaeC&j9$wYN*1q<+^7i04n#xLl|42i@uhZ0bl_Z3ow~X9uN5W`LTommy9bP1WrsR z7B9HCT@eYzm0tp`F@gD=ex*X-6$U(ZdK9+<921w*1vZCMPWJ&^G$2Qi^E*9?x&aOW zZjeDdiiLo%&4=9sNeZ_MxFO^MKJX0pEQE17aA%S@LLY7qAVyHw-CjikfTNQN(3BTP z0Ps)^4g;AU@1kxBTR<)plAx3a6A&Q)F@(h7d$EP&LJ^702Y3X+fXMLTh{#2JKwy#! z`4rg5gF)u-VF?N9;~5mT5R%@7LJCLZRVW}UWMLJBErNZ?P!>-IL0_dUcbOV7EKZ04WI^W4Gk|g z3Sfwc0uw4vn8LvEAP-Zp91eg+6niNRMM@!y22sJ4jwq}ol_g3AMFhqfN>`DB7osHL ziFQ{qa0P{d-VD_I99M4fg-4tIuN>XwGr7VnFE0~9#}?qXdU`(+Mh6&-ii)bLnwq-$ zs#U8sw6wIf*XZc#>gnkl7#bO^-(X^9W^RtfT3A?GTHDyz+S%DVI5;^uJG;2JZrbdI z!{Z4=PZHUS;_dC@8$b;Vq|t&y!onjEI)llKjEdf|D>g1ZF)=wMHFZzg_xsW_G7cO( zbofa2Pd~F*M~|I6os(C<<`k8bl>S;)R&lnn>i6oJn%WC>_4N%+Ev>C>ZI>=z>FB)L zEf9)&di%uJ`}=PU+`Kh7ICSUk-^0Ta$;iV;j~|bYj*UHe_FOtX{^FmBiOETsZ0hCf z=^45F&FtH`xp(gt78V!ZfB5k6cfU9E?w$iBb0O6Bf_)D)0rus9CH?Vu= z5}Dr`i{#U%CYh&8P9WBfw$(LuwpAsyBDK{1@EzaOnyMNaJB~H6P8>Jrb+GTH);l7| zfvoesJ+s*M`SV#nbQ_cvB$o#MqdXsGMf%Y-$R&n?vQ9dw-ar=~MSYvvZY>k_ipY+7=}mOgE&imFM+ zhgTZZ=1DB-@<*m-_)!yD2}!)fVOE`HuH(EUq9QwC?!tR>Id9vgy={l%OP00~8cdr5 z`EZMns-<88Bk7;+dmKFAlAsxX#EzRy3o7s8MSEx1p8fRf zmovLBQujBk#g@w+{Ps4iPj9_RB?dxpa z8SaTGRXv-KxNhX0{c$~;!M}_ijj1CQm;6U{On@;l&qKMhm&_8TK)c-oy?Otvb=uFf^%!# zxi|I%1<7#6rsAt_t+}OVirPCOb0n1xlq_nddW!to46QgV#>e`D1)X+9pAytnfc_H& MZwaF|2gD!y4->7_6aWAK literal 0 HcmV?d00001 diff --git a/src/assets/wcc-logo.svg b/src/assets/wcc-logo.svg new file mode 100644 index 0000000..6eef1a3 --- /dev/null +++ b/src/assets/wcc-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/footer/footer.module.css b/src/components/footer/footer.module.css new file mode 100644 index 0000000..311a99c --- /dev/null +++ b/src/components/footer/footer.module.css @@ -0,0 +1,21 @@ +.container { + display: flex; + justify-content: center; + align-items: center; + padding: var(--size-4); + margin-top: var(--size-6); + gap: var(--size-3); + background-color: var(--color-black); +} + +.logoLink { + display: flex; + flex: 1; +} + +.socialTray { + display: flex; + flex: 2; + color: white; + justify-content: right; +} diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx new file mode 100644 index 0000000..7d58ce9 --- /dev/null +++ b/src/components/footer/footer.tsx @@ -0,0 +1,25 @@ +import styles from './footer.module.css'; +import '../social-tray/social-tray.tsx'; +import wccLogo from '../../assets/wcc-logo.svg?type=raw'; + +export default class Footer extends HTMLElement { + connectedCallback() { + this.render(); + } + + render() { + return ( + + ); + } +} + +customElements.define('wcc-footer', Footer); diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css new file mode 100644 index 0000000..76b43fc --- /dev/null +++ b/src/components/header/header.module.css @@ -0,0 +1,156 @@ +.container { + display: flex; + justify-content: center; + align-items: center; + padding: 0 0 var(--size-2) 0; + margin: var(--size-2) var(--size-3) var(--size-2); + border-bottom: 2px dotted var(--color-gray); + gap: var(--size-3); +} + +.logoLink { + display: flex; + flex: 1; +} + +.badgeContainer { + display: flex; + flex: 1; + align-items: center; + justify-content: right; +} + +.badge { + border: 1px solid var(--color-black); + padding: var(--size-1) var(--size-3); + border-radius: var(--radius-3); + background-color: var(--color-white); + + & img { + vertical-align: middle; + } +} + +.navBar { + display: contents; + flex: 1; + justify-content: center; +} + +.navBarMenu { + display: flex; + gap: var(--size-5); + list-style-type: none; +} + +.navBarMenuItem { + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + cursor: pointer; + font-size: var(--font-size-8); + padding: 0; +} + +.navBarMenuItem a { + text-decoration: none; + color: var(--color-primary); + padding: var(--size-1) var(--size-3); +} + +.mobileMenuContainer { + flex: 1; + width: 100%; + height: 100vh; +} + +.mobileMenuList { + text-align: left; + margin: var(--size-4) 0 0; +} + +.mobileMenuListItem a { + color: var(--color-black); + text-decoration: none; +} + +.navBarMenuItem a.active, +.navBarMenuItem a:hover, +.navBarMenuItem a:focus { + text-decoration: underline; +} + +.navBarMenuItem a.active { + font-weight: extra-bold; + background-color: var(--color-white); + border-radius: var(--radius-3); + padding: var(--size-1) var(--size-3); +} + +.mobileMenuListItem { + list-style-type: none; + margin: 10px 0; + font-size: var(--font-size-5); +} + +.mobileMenuListItem a.active { + text-decoration: underline; +} + +.mobileMenuIcon { + display: none; + border: none; + background-color: transparent; +} + +.mobileMenuBackdrop { + margin: 0; + background-color: #f5f5f58e; + padding: var(--size-5) var(--size-6); + text-align: right; + height: 99vh; +} + +.mobileMenuCloseButton { + background: transparent; + font-size: var(--font-size-5); + cursor: pointer; + border: none; + padding: 0 12px; + color: var(--color-black); +} + +@media screen and (min-width: 480px) { + .container { + justify-content: space-between; + } +} + +@media (max-width: 600px) { + .navBar { + display: flex; + align-items: center; + gap: var(--size-2); + } + + .navBarMenu { + display: none; + } + + .mobileMenuIcon { + display: flex; + cursor: pointer; + } +} + +@media screen and (min-width: 768px) { + .navBar { + display: flex; + gap: var(--size-3); + } + + .navBar > nav { + align-self: center; + } +} diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx new file mode 100644 index 0000000..a28295e --- /dev/null +++ b/src/components/header/header.tsx @@ -0,0 +1,115 @@ +import type { Page } from '@greenwood/cli'; +import wccLogo from '../../assets/wcc-logo.svg?type=raw'; +import mobileMenuIcon from '../../assets/tile.svg?type=raw'; +import styles from './header.module.css'; + +function getNavItemsHtml(navItems: Page[], isMobile: boolean, currentRoute: string): string { + const itemClass = isMobile ? styles.mobileMenuListItem : styles.navBarMenuItem; + + return navItems + .map((item) => { + const { route, label } = item; + const isActiveClass = currentRoute === item.route ? 'class="active"' : ''; + + return ` +
  • + ${label} +
    • + `; + }) + .join(''); +} + +export default class Header extends HTMLElement { + currentRoute: string; + navItems: Page[]; + + constructor() { + super(); + this.currentRoute = ''; + this.navItems = []; + } + + async connectedCallback() { + this.currentRoute = '/playground/'; + this.navItems = [{ + id: 'index', + title: 'Home', + route: 'http://wcc.dev/', + label: 'Home', + }, { + id: 'docs', + title: 'Docs', + route: 'http://wcc.dev/docs/', + label: 'Docs', + }, { + id: 'examples', + title: 'Examples', + route: 'http://wcc.dev/examples/', + label: 'Examples', + }, { + id: 'playground', + title: 'Playground', + route: '/playground/', + label: 'Playground', + }]; + this.render(); + } + + render() { + const mainNavHtml = getNavItemsHtml(this.navItems, false, this.currentRoute); + const mobileNavHtml = getNavItemsHtml(this.navItems, true, this.currentRoute); + + return ( +
    + + {wccLogo} + + +
    + +
    + +
    + + WCC GitHub badge + +
    + + + +
    +
    + + + +
    +
    +
    + ); + } +} + +customElements.define('wcc-header', Header); diff --git a/src/components/social-tray/social-tray.module.css b/src/components/social-tray/social-tray.module.css new file mode 100644 index 0000000..74a7a35 --- /dev/null +++ b/src/components/social-tray/social-tray.module.css @@ -0,0 +1,23 @@ +.socialTray { + display: flex; + gap: var(--size-3); + list-style-type: none; + background-color: var(--color-gray); + width: fit-content; + border: var(--border-size-1) solid #4d4d4d45; + border-radius: var(--radius-6); + align-items: center; + justify-content: center; + cursor: pointer; + padding: var(--size-2); +} + +.socialIcon { + display: flex; + align-items: center; + line-height: 100%; +} + +.socialIcon svg { + fill: var(--color-secondary); +} diff --git a/src/components/social-tray/social-tray.tsx b/src/components/social-tray/social-tray.tsx new file mode 100644 index 0000000..7723816 --- /dev/null +++ b/src/components/social-tray/social-tray.tsx @@ -0,0 +1,57 @@ +import styles from './social-tray.module.css'; +import discordIcon from '../../assets/discord.svg?type=raw'; +import githubIcon from '../../assets/github.svg?type=raw'; +import twitterIcon from '../../assets/twitter-logo.svg?type=raw'; +import blueskyIcon from '../../assets/bluesky.svg?type=raw'; + +export default class SocialTray extends HTMLElement { + connectedCallback() { + this.render(); + } + + render() { + return ( + + ); + } +} + +customElements.define('wcc-social-tray', SocialTray); + +declare global { + interface HTMLElementTagNameMap { + 'wcc-social-tray': SocialTray; + } +} diff --git a/src/index.html b/src/index.html index 1f9ede1..12252e7 100644 --- a/src/index.html +++ b/src/index.html @@ -1,11 +1,36 @@ - WCC - REPL + + WCC + + + + + + + + + + + + + + + + -

    WCC REPL

    + + +

    WCC Playground

    Input

    Output

    + + diff --git a/src/styles/theme.css b/src/styles/theme.css new file mode 100644 index 0000000..202fb8a --- /dev/null +++ b/src/styles/theme.css @@ -0,0 +1,92 @@ +@import 'open-props/borders'; +@import 'open-props/fonts'; +@import 'open-props/shadows'; +@import 'open-props/sizes'; + +@font-face { + font-family: 'Geist-Sans'; + src: url('../../node_modules/geist/dist/fonts/geist-sans/Geist-Regular.woff2') format('truetype'); + font-display: swap; +} + +@font-face { + font-family: 'Geist-Mono'; + src: url('../../node_modules/geist/dist/fonts/geist-mono/GeistMono-Regular.woff2') + format('truetype'); + font-display: swap; +} + +@font-face { + font-family: 'Geist-Sans Bold'; + src: url('../../node_modules/geist/dist/fonts/geist-sans/Geist-Bold.woff2') format('truetype'); + font-display: swap; +} + +:root, +:host { + --color-black: #111111; + --color-white: #ffffff; + --color-gray: #f5f5f5; + --color-primary: #013553; + --color-accent: #3b8ebf; + --color-background: #edefec; + --color-prism-bg: #011627; /* matches Prism background color */ + --font-primary: + 'Geist-Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + --font-primary-bold: 'Geist-Sans Bold'; + --font-secondary: 'Geist-Mono', monospace; +} + +* { + font-family: var(--font-primary); + font-size: var(--font-size-3); + box-sizing: border-box; + padding: 0; + margin: 0; +} + +body { + display: flex; + flex-direction: column; + background-color: var(--color-background); +} + +main { + max-width: 1440px; + margin: 20px auto; + width: 100%; + padding: 0 1rem; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--color-primary); +} + +a, +a:visited { + text-decoration: underline; + color: var(--color-primary); +} + +a:hover, +a:focus { + text-decoration: underline; + background-color: transparent; +} + +/* external links styling */ +.no-show-screen-reader { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} \ No newline at end of file diff --git a/src/types.d.ts b/src/types.d.ts index d687a3b..3773f52 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -1,3 +1,13 @@ +declare module '*.module.css' { + const styles: Readonly>; + export default styles; +} + +declare module '*?type=raw' { + const content: string; + export default content; +} + // needed until TypeScript adds support for this // https://github.com/microsoft/TypeScript/issues/46135 declare module "*.css" { diff --git a/tsconfig.json b/tsconfig.json index 96035f4..401c306 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,7 +9,9 @@ "verbatimModuleSyntax": true, "noEmit": true, "noImplicitAny": true, - "strict": true + "strict": true, + "jsx": "preserve", + "jsxImportSource": "wc-compiler", }, "exclude": ["./public/", "./greenwood/", "node_modules"] }