From 2e8e030c980888713a1ef81af7fd77e8ac600406 Mon Sep 17 00:00:00 2001 From: Cole Peters Date: Tue, 14 Nov 2023 11:51:49 -0600 Subject: [PATCH] Incorporate @begin/masthead (#180) * Incorporate @begin/masthead * Fix body offset on default bp * Set overflows on html AND body * Bump masthead --- app/api/docs/$$.mjs | 2 +- app/docs/md/routing/lifecycle.md | 3 +- app/elements/begin-masthead.mjs | 1 + app/elements/doc/content.mjs | 15 +- app/elements/doc/enhance-diagram.mjs | 198 ------------ app/elements/docs/layout.mjs | 122 +++---- app/elements/docs/nav.mjs | 3 +- app/elements/editorial-header.mjs | 10 - app/elements/enhance-header.mjs | 302 ------------------ app/elements/landing/axol/no-js-required.mjs | 2 +- app/elements/landing/intro.mjs | 4 +- app/elements/landing/liftoff.mjs | 26 +- app/elements/landing/no-js-required.mjs | 10 +- .../landing/progressive-by-design.mjs | 2 +- app/elements/landing/scoped-dom-updates.mjs | 2 +- app/elements/landing/ssr-web-components.mjs | 2 +- app/elements/landing/stable-forever.mjs | 21 +- app/elements/landing/the-ground.mjs | 3 +- app/elements/marketing-nav.mjs | 19 ++ app/elements/masthead/begin-logo.mjs | 1 + app/elements/masthead/deploy-button.mjs | 1 + app/elements/masthead/product-link.mjs | 1 + app/elements/masthead/section-dropdown.mjs | 1 + app/elements/masthead/section-link.mjs | 1 + app/elements/masthead/slice.mjs | 1 + app/elements/masthead/symbols.mjs | 1 + app/head.mjs | 24 +- app/pages/docs/$$.html | 49 +++ app/pages/index.html | 28 +- app/pages/showcase.html | 34 +- app/pages/why-enhance.html | 42 ++- package-lock.json | 133 +++++++- package.json | 1 + public/img/docs/routing-lifecycle.svg | 55 ++++ public/img/landing/dont-miss-a-thing.svg | 2 +- styleguide.json | 5 +- 36 files changed, 474 insertions(+), 653 deletions(-) create mode 100644 app/elements/begin-masthead.mjs delete mode 100644 app/elements/doc/enhance-diagram.mjs delete mode 100644 app/elements/editorial-header.mjs delete mode 100644 app/elements/enhance-header.mjs create mode 100644 app/elements/marketing-nav.mjs create mode 100644 app/elements/masthead/begin-logo.mjs create mode 100644 app/elements/masthead/deploy-button.mjs create mode 100644 app/elements/masthead/product-link.mjs create mode 100644 app/elements/masthead/section-dropdown.mjs create mode 100644 app/elements/masthead/section-link.mjs create mode 100644 app/elements/masthead/slice.mjs create mode 100644 app/elements/masthead/symbols.mjs create mode 100644 public/img/docs/routing-lifecycle.svg diff --git a/app/api/docs/$$.mjs b/app/api/docs/$$.mjs index d632ea3c..d7b45a0e 100644 --- a/app/api/docs/$$.mjs +++ b/app/api/docs/$$.mjs @@ -13,7 +13,7 @@ import redirects from '../../lib/docs-redirects.mjs' const arcdown = new Arcdown({ pluginOverrides: { markdownItToc: { - containerClass: 'toc mbe2 mis-2', + containerClass: 'toc mbe2 mis-2 leading2', listType: 'ul', }, }, diff --git a/app/docs/md/routing/lifecycle.md b/app/docs/md/routing/lifecycle.md index 860bc408..973bcf7b 100644 --- a/app/docs/md/routing/lifecycle.md +++ b/app/docs/md/routing/lifecycle.md @@ -8,8 +8,7 @@ The journey of an HTTP request through Enhance isn't complicated, but it's helpf - - + ## Routing diff --git a/app/elements/begin-masthead.mjs b/app/elements/begin-masthead.mjs new file mode 100644 index 00000000..c81eeb47 --- /dev/null +++ b/app/elements/begin-masthead.mjs @@ -0,0 +1 @@ +export { Masthead as default } from '@begin/masthead' diff --git a/app/elements/doc/content.mjs b/app/elements/doc/content.mjs index 7ced9502..7c082cef 100644 --- a/app/elements/doc/content.mjs +++ b/app/elements/doc/content.mjs @@ -1,9 +1,6 @@ export default function DocContent({ html }) { return html` - - - - - - - -
- ${doc.title ? `

${doc.title}

` : ''} ${doc.html} -
- - - - ${doc.tocHtml?.indexOf('
  • ') > 0 - ? /* html */ ` -
    -

    On this page

    - ${doc.tocHtml} -
    ` - : ''} - + + + + +
    + +
    + ${doc.title ? `

    ${doc.title}

    ` : ''} ${doc.html} +
    +     +
    + +
  • ') > 0 + ? /* html */ ` +
    +

    On this page

    + ${doc.tocHtml} +
    ` + : ''} + + diff --git a/app/elements/docs/nav.mjs b/app/elements/docs/nav.mjs index 198e7d5c..d89adf6a 100644 --- a/app/elements/docs/nav.mjs +++ b/app/elements/docs/nav.mjs @@ -28,7 +28,7 @@ function Doc(item) { function Category(item) { return `
    -
    ${ +
    ${ item.label }
    ${Description(item)} @@ -55,7 +55,6 @@ export default function DocsNav({ html, state }) { - - ` -} diff --git a/app/elements/enhance-header.mjs b/app/elements/enhance-header.mjs deleted file mode 100644 index 764d9038..00000000 --- a/app/elements/enhance-header.mjs +++ /dev/null @@ -1,302 +0,0 @@ -export default function Header({ html, state }) { - const { store } = state - const { path, searchTerm } = store - - // check if today is Nov 30: Blue Beanie Day - const today = new Date() - const isBlueBeanieDay = today.getMonth() === 11 - 1 && today.getDate() === 30 - - function createLink(route, label) { - const isActive = path.includes(route) - return isActive - ? `${label}` - : `${label}` - } - - const globalNavItems = ` -
      -
    • ${createLink('/docs', 'Docs')}
      • -
    • ${createLink('/showcase', 'Showcase')}
      • -
    • ${createLink('/why-enhance', 'Why Enhance?')}
      • -
    - ` - - const isDocs = path.includes('docs') - - const darkModeExtras = ` - --docsearch-footer-background: var(--smoke-halite); - --docsearch-hit-background: var(--white-denim); - --docsearch-hit-color: var(--rift); - --docsearch-modal-background: var(--smoke-halite); - --docsearch-searchbox-background: hsla(0deg 0% 0% / 0.5); - --docsearch-searchbox-focus-background: var(--white-denim); - --docsearch-text-color: var(--rift-white); - --mobile-nav-background: hsla(0deg 0% 0% / 0.66); - ` - - const docsExtras = isDocs - ? `` - : '' - - return html` - - - ${docsExtras} - - -
    - - - - - - - -
    - ${isDocs - ? '' - : ''} - - - - -
    - - - -
    - - - ` -} diff --git a/app/elements/landing/axol/no-js-required.mjs b/app/elements/landing/axol/no-js-required.mjs index 591f3edb..4d97ee06 100644 --- a/app/elements/landing/axol/no-js-required.mjs +++ b/app/elements/landing/axol/no-js-required.mjs @@ -23,7 +23,7 @@ export default function AxolNoJSRequired({ html }) { src="/_public/img/landing/axol.svg" alt="" class="axol relative z1" /> -
    diff --git a/app/elements/landing/intro.mjs b/app/elements/landing/intro.mjs index 69c2b99b..3b08f338 100644 --- a/app/elements/landing/intro.mjs +++ b/app/elements/landing/intro.mjs @@ -81,8 +81,8 @@ export default function LandingIntro({ html }) { } landing-marquee [slot='text'] { - -webkit-text-stroke: 0.33vw white; - color: transparent; + font-weight: 200; + color: white; font-size: 15vw; } diff --git a/app/elements/landing/liftoff.mjs b/app/elements/landing/liftoff.mjs index 3739e9dd..7f4ebc3a 100644 --- a/app/elements/landing/liftoff.mjs +++ b/app/elements/landing/liftoff.mjs @@ -31,6 +31,21 @@ export default function Liftoff({ html }) { text-fill-color: transparent; font-size: min(10rem, 10vw); margin-block: var(--space-l); + text-indent: 0.05em; + } + + .kern-a, + .kern-ea, + .kern-ft { + letter-spacing: 0; + } + + .kern-lway { + letter-spacing: -0.04em; + } + + .kern-ift { + letter-spacing: -0.06em; } p { @@ -72,11 +87,12 @@ export default function Liftoff({ html }) { } -

    - Always
    - Ready
    +

    + Always
    + Ready
    for
    - liftoff!
    + liftoff!

    -

    +

    Enhance apps are designed with deployment in mind. When you're ready to launch, we've got you covered with diff --git a/app/elements/landing/no-js-required.mjs b/app/elements/landing/no-js-required.mjs index 798e45f7..78f798ad 100644 --- a/app/elements/landing/no-js-required.mjs +++ b/app/elements/landing/no-js-required.mjs @@ -282,7 +282,7 @@ export default function NoJsRequired({ html }) {

    Build your entire app
    - with accessible HTML + with accessible HTML

    -
    File-based routing
    +
    File-based routing
    Organize your pages as easily as a desktop folder.
    -
    Database-backed APIs
    +
    Database-backed APIs
    Access and store data with simple JavaScript functions.
    -
    SSR composable HTML Custom Elements
    +
    SSR composable HTML Custom Elements
    Build reusable components with HTML and scoped CSS.
    -
    Web Component progressive enhancement
    +
    Web Component progressive enhancement
    Add client-side interaction just where you need it.
    diff --git a/app/elements/landing/progressive-by-design.mjs b/app/elements/landing/progressive-by-design.mjs index bd1f7056..727f2eae 100644 --- a/app/elements/landing/progressive-by-design.mjs +++ b/app/elements/landing/progressive-by-design.mjs @@ -44,7 +44,7 @@ export default function ProgressiveByDesign({ html }) { width: 100vw; } -

    +

    Progressive By Design

    diff --git a/app/elements/landing/scoped-dom-updates.mjs b/app/elements/landing/scoped-dom-updates.mjs index ba1a7c93..fdbb1d11 100644 --- a/app/elements/landing/scoped-dom-updates.mjs +++ b/app/elements/landing/scoped-dom-updates.mjs @@ -57,7 +57,7 @@ export default function ScopedDOMUpdates({ html }) {
    -

    +

    No need for a full page render to update one element

    diff --git a/app/elements/landing/ssr-web-components.mjs b/app/elements/landing/ssr-web-components.mjs index 3a2a042c..6eff565e 100644 --- a/app/elements/landing/ssr-web-components.mjs +++ b/app/elements/landing/ssr-web-components.mjs @@ -43,7 +43,7 @@ export default function SSRWebComponents({ html }) { SSR diff --git a/app/elements/landing/stable-forever.mjs b/app/elements/landing/stable-forever.mjs index dd786149..fdb3b1b5 100644 --- a/app/elements/landing/stable-forever.mjs +++ b/app/elements/landing/stable-forever.mjs @@ -93,6 +93,16 @@ export default function WebNative({ html }) { margin-left: -0.025em; } + .kern-st { + letter-spacing: -0.075em; + } + + .kern-s, + .kern-ab, + .kern-ev { + letter-spacing: 0; + } + .container p:first-of-type { font-size: var(--landing-text-1); margin-bottom: var(--space-m); @@ -153,7 +163,7 @@ export default function WebNative({ html }) { @@ -167,12 +177,13 @@ export default function WebNative({ html }) {

    -

    - Stable
    - Forever +

    + Stable
    + Forever

    -

    +

    The web platform has what you need and never goes out of fashion

    diff --git a/app/elements/landing/the-ground.mjs b/app/elements/landing/the-ground.mjs index a39b9c20..12f19d9d 100644 --- a/app/elements/landing/the-ground.mjs +++ b/app/elements/landing/the-ground.mjs @@ -11,10 +11,9 @@ export default function TheGround({ html, state }) { ` : `

    - + +

    + Home +

    + + +

    + Why Enhance? +

    +     + +

    + Docs +

    +     + ` +} diff --git a/app/elements/masthead/begin-logo.mjs b/app/elements/masthead/begin-logo.mjs new file mode 100644 index 00000000..fd5cad5a --- /dev/null +++ b/app/elements/masthead/begin-logo.mjs @@ -0,0 +1 @@ +export { BeginLogo as default } from '@begin/masthead' diff --git a/app/elements/masthead/deploy-button.mjs b/app/elements/masthead/deploy-button.mjs new file mode 100644 index 00000000..8bf71ece --- /dev/null +++ b/app/elements/masthead/deploy-button.mjs @@ -0,0 +1 @@ +export { DeployButton as default } from '@begin/masthead' diff --git a/app/elements/masthead/product-link.mjs b/app/elements/masthead/product-link.mjs new file mode 100644 index 00000000..b1b1f3d4 --- /dev/null +++ b/app/elements/masthead/product-link.mjs @@ -0,0 +1 @@ +export { ProductLink as default } from '@begin/masthead' diff --git a/app/elements/masthead/section-dropdown.mjs b/app/elements/masthead/section-dropdown.mjs new file mode 100644 index 00000000..77b449e1 --- /dev/null +++ b/app/elements/masthead/section-dropdown.mjs @@ -0,0 +1 @@ +export { SectionDropdown as default } from '@begin/masthead' diff --git a/app/elements/masthead/section-link.mjs b/app/elements/masthead/section-link.mjs new file mode 100644 index 00000000..cfe5e6b7 --- /dev/null +++ b/app/elements/masthead/section-link.mjs @@ -0,0 +1 @@ +export { SectionLink as default } from '@begin/masthead' diff --git a/app/elements/masthead/slice.mjs b/app/elements/masthead/slice.mjs new file mode 100644 index 00000000..9c728c83 --- /dev/null +++ b/app/elements/masthead/slice.mjs @@ -0,0 +1 @@ +export { Slice as default } from '@begin/masthead' diff --git a/app/elements/masthead/symbols.mjs b/app/elements/masthead/symbols.mjs new file mode 100644 index 00000000..c020212b --- /dev/null +++ b/app/elements/masthead/symbols.mjs @@ -0,0 +1 @@ +export { Symbols as default } from '@begin/masthead' diff --git a/app/head.mjs b/app/head.mjs index fcab9563..7e4b4f6c 100644 --- a/app/head.mjs +++ b/app/head.mjs @@ -43,24 +43,27 @@ export default function Head(state) { ` diff --git a/app/pages/docs/$$.html b/app/pages/docs/$$.html index 06c0b267..4a8c3b64 100644 --- a/app/pages/docs/$$.html +++ b/app/pages/docs/$$.html @@ -1 +1,50 @@ + + + + Docs +
    + +

    + Home +

    +     + +

    + Why Enhance +

    +     + +

    + Docs +

    + +     +
    +
    + Home + Docs + + Why Enhance? + +
    +     diff --git a/app/pages/index.html b/app/pages/index.html index 42aca75f..6f747a2f 100644 --- a/app/pages/index.html +++ b/app/pages/index.html @@ -30,6 +30,10 @@ } body { + margin-block-start: var(--masthead-max-height); + } + + body > *:not(begin-masthead) { font-size: var(--landing-text-0); } @@ -96,13 +100,31 @@ transform: scale(0.985); } } + + begin-masthead { + --max-inline-size: 100vw; + } + + @media screen and (min-width: 56em) { + begin-masthead { + --max-inline-size: var(--editorial-width); + } + } -
    - -
    + + Home + +
    + Home + Docs + + Why Enhance? + +
    +     diff --git a/app/pages/showcase.html b/app/pages/showcase.html index 61b23db2..446f2964 100644 --- a/app/pages/showcase.html +++ b/app/pages/showcase.html @@ -1,10 +1,14 @@ - - -
    + +
    + Home + Docs + + Why Enhance? + +
    +     + +

    Start with HTML. - Build your wildest dreams. + Build your wildest dreams.

    With Enhance’s foundation in web standards, exceptionally fast performance, and peerless stability, the only limit to what you can build is your imagination. @@ -54,7 +76,7 @@

    -

    Want to have your Enhance project featured? Open a pull request or let us know on Discord!

    +

    Want to have your Enhance project featured? Open a pull request or let us know on Discord!

    diff --git a/app/pages/why-enhance.html b/app/pages/why-enhance.html index bec08499..c1d5210d 100644 --- a/app/pages/why-enhance.html +++ b/app/pages/why-enhance.html @@ -1,4 +1,8 @@ - + + Why Enhance? + +
    + Home + Docs + + Why Enhance? + +
    +     -
    +

    Why - Enhance? + Enhance?

    @@ -70,31 +94,31 @@

    -

    +

    Our criteria for success

    -

    +

    Author and deliver HTML pages

    Enhance should allow developers to write components as pure functions that return HTML. These functions should render on the server to deliver complete HTML, available immediately to the end user.

    -

    +

    Use web standards

    Enhance should take care of the tedious parts of development, allowing you to use today’s web platform features more efficiently. As new standards and platform features become generally available, Enhance will make way for them.

    -

    +

    Progressively enhance working HTML

    Enhance should allow for easy progressive enhancement, so that working HTML can be further upgraded to include additional functionality with JavaScript.

    -

    +

    The result

    @@ -107,7 +131,7 @@

    Using just HTML, CSS, and a sprinkling of JavaScript, Enhance unlocks the delivery of complex dynamic applications in harmony with the web platform. It empowers developers to spend their time on interesting domain problems, leading to more engaging products with less thrash.

    - Experience how joyful web development can be — get started with Enhance today! + Experience how joyful web development can be — get started with Enhance today!

    diff --git a/package-lock.json b/package-lock.json index cdbddae5..7534a720 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@architect/functions": "^5.3.3", "@begin/data": "^4.0.2", + "@begin/masthead": "github:beginner-corp/masthead", "@docsearch/js": "^3.3.0", "@enhance/arc-plugin-enhance": "^6.2.4", "@enhance/arc-plugin-styles": "^3.0.4", @@ -1848,6 +1849,94 @@ "version": "1.0.0", "license": "MIT" }, + "node_modules/@begin/masthead": { + "version": "0.0.1", + "resolved": "git+ssh://git@github.com/beginner-corp/masthead.git#e736276b295290ae7089034eb927390128b6ae9a", + "dependencies": { + "@enhance/arc-plugin-enhance": "^9.0.0", + "@enhance/styles-cribsheet": "^0.0.9" + } + }, + "node_modules/@begin/masthead/node_modules/@architect/functions": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@architect/functions/-/functions-7.0.0.tgz", + "integrity": "sha512-6HumTH9885uMAZ9yIEBUi8RmgzFTQoGefd6CD6sNkVzoZM2QCyk4BRfKvo8hdgm+AxDjkZdvA/4kaj5K7680Bg==", + "dependencies": { + "cookie": "^0.5.0", + "cookie-signature": "^1.2.1", + "csrf": "^3.1.0", + "node-webtokens": "^1.0.4", + "run-parallel": "^1.2.0", + "run-waterfall": "^1.1.7", + "uid-safe": "^2.1.5" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@begin/masthead/node_modules/@enhance/arc-plugin-enhance": { + "version": "9.1.2", + "resolved": "https://registry.npmjs.org/@enhance/arc-plugin-enhance/-/arc-plugin-enhance-9.1.2.tgz", + "integrity": "sha512-f5GWNWU1CG40WstMYj/jaWyAqC9qzETFHOYhGb151CPL5Ch9mKQsndSb6gxmTmQScmhYPE7cdEaaH1OwUZQEBg==", + "dependencies": { + "@architect/asap": "^6.0.3", + "@architect/functions": "^7.0.0", + "@architect/plugin-bundles": "^3.2.0", + "@begin/data": "^4.0.2", + "@enhance/arc-plugin-rollup": "^2.0.0", + "@enhance/arc-plugin-styles": "^5.0.0", + "@enhance/enhance-style-transform": "^0.1.2", + "@enhance/import-transform": "^4.0.0", + "@enhance/ssr": "^3.5.0", + "glob": "^9.2.1", + "header-timers": "^0.1.0", + "path-to-regexp": "^6.2.1" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@begin/masthead/node_modules/@enhance/arc-plugin-styles": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@enhance/arc-plugin-styles/-/arc-plugin-styles-5.0.0.tgz", + "integrity": "sha512-tkJqgL39U3t4tCqsKToLYHZJfe3jp3L9e9gR9EWvmIYvzjR/pErRB19gZoL7cFwjtpiQ6Bo6DcZZiu2z9NS69g==", + "dependencies": { + "@architect/functions": "^5.3.1", + "@architect/inventory": "^3.3.4", + "@enhance/styles": "^6.1.4" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@begin/masthead/node_modules/@enhance/arc-plugin-styles/node_modules/@architect/functions": { + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/@architect/functions/-/functions-5.4.1.tgz", + "integrity": "sha512-F13FBUvVHjerUaSdnXIC3pZUnI10lxyVZ7HsrU8vM2qB5pFNqw5EgqcnVgORz/eqCcqevpIKayQ9yOUf/HuBAA==", + "dependencies": { + "cookie": "^0.5.0", + "cookie-signature": "^1.2.0", + "csrf": "^3.1.0", + "node-webtokens": "^1.0.4", + "run-parallel": "^1.2.0", + "run-waterfall": "^1.1.7", + "uid-safe": "^2.1.5" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@begin/masthead/node_modules/@enhance/styles": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/@enhance/styles/-/styles-6.1.4.tgz", + "integrity": "sha512-Q7898G5bfII7WfjJMjs2ZNFDKK41mVng7tK3kveyDhZqQbJznfVsWSReCAmTFd+/AmbqgjIeK0wdJpqQ2ozytg==", + "dependencies": { + "color-to-hsla": "^0.1.1" + }, + "bin": { + "enhance-styles": "cli.mjs" + } + }, "node_modules/@begin/parse5": { "version": "0.0.4", "dependencies": { @@ -1979,8 +2068,9 @@ } }, "node_modules/@enhance/ssr": { - "version": "3.4.1", - "license": "Apache-2.0", + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/@enhance/ssr/-/ssr-3.5.1.tgz", + "integrity": "sha512-5H/nslcM+wzFytkc5AJ8A4Vf/xBuykz0u0vWQBknNflVbenZeO8hqnG1+Pbuo8CXEqaIxtGPh/4zGgzZkwqa3Q==", "dependencies": { "@begin/parse5": "^0.0.4", "nanoid": "^4.0.1" @@ -1999,6 +2089,15 @@ "enhance-styles": "cli.mjs" } }, + "node_modules/@enhance/styles-cribsheet": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/@enhance/styles-cribsheet/-/styles-cribsheet-0.0.9.tgz", + "integrity": "sha512-jfUisdojvxWGSu+t7oSvI2lqzuylJz3XMpEZEWXxHtdN/i44lY2XpLUwqekcHpsN2PNkMK4GrrCCbaZUcfrxFg==", + "dependencies": { + "@enhance/arc-plugin-enhance": "^6.1.3", + "css-tree": "^2.3.1" + } + }, "node_modules/@enhance/types": { "version": "0.5.0", "dev": true, @@ -3885,6 +3984,18 @@ "node": ">= 0.8" } }, + "node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, "node_modules/date-format": { "version": "4.0.3", "dev": true, @@ -5474,6 +5585,11 @@ "node": ">=8" } }, + "node_modules/header-timers": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/header-timers/-/header-timers-0.1.1.tgz", + "integrity": "sha512-lpf/csJ+hcLTx4FvbX3oj2LCk8ixQ5Ne7zDBdSAxZ4WHQxnpW7GJwQznZY8KImeRFtWvMLeUZIIN5FSA51bRAQ==" + }, "node_modules/highlight.js": { "version": "11.7.0", "license": "BSD-3-Clause", @@ -6789,6 +6905,11 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==" + }, "node_modules/mdurl": { "version": "1.0.1", "license": "MIT" @@ -9147,6 +9268,14 @@ "node": ">=0.10.0" } }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-resolve": { "version": "0.6.0", "license": "MIT", diff --git a/package.json b/package.json index 703f63e1..e6adf96d 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "dependencies": { "@architect/functions": "^5.3.3", "@begin/data": "^4.0.2", + "@begin/masthead": "github:beginner-corp/masthead", "@docsearch/js": "^3.3.0", "@enhance/arc-plugin-enhance": "^6.2.4", "@enhance/arc-plugin-styles": "^3.0.4", diff --git a/public/img/docs/routing-lifecycle.svg b/public/img/docs/routing-lifecycle.svg new file mode 100644 index 00000000..0511990b --- /dev/null +++ b/public/img/docs/routing-lifecycle.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/landing/dont-miss-a-thing.svg b/public/img/landing/dont-miss-a-thing.svg index 0c89b343..1136a0c0 100644 --- a/public/img/landing/dont-miss-a-thing.svg +++ b/public/img/landing/dont-miss-a-thing.svg @@ -1,3 +1,3 @@ -DON’T MISS A THING! +DON’T MISS A THING! diff --git a/styleguide.json b/styleguide.json index c7651564..fdde1bcf 100644 --- a/styleguide.json +++ b/styleguide.json @@ -21,7 +21,7 @@ "sans": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'", "mono": "Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", "roboto": "'Roboto Mono', monospace", - "rubik": "'Rubik', sans-serif" + "montserrat": "'Montserrat', sans-serif" }, "grid": { "steps": 6 @@ -54,7 +54,8 @@ "bg-gradient": "linear-gradient(125deg, var(--orange), var(--magenta), var(--purple))", "docs-nav-width": "16rem", "nav-height": "4rem", - "editorial-width": "max(320px - var(--space-0), 87.5vw)" + "editorial-width": "max(320px - var(--space-0), 87.5vw)", + "docs-max-width": "100rem" }, "queries": { "lg": "56em",