From 5a0089b70b451d127d2c33d645b1782f1a7e1039 Mon Sep 17 00:00:00 2001 From: Cole Peters Date: Wed, 4 Oct 2023 12:50:13 -0500 Subject: [PATCH] Add new global nav & dedicated pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add new global nav & dedicated pages Show colour picker in mobile menu WIP new pages, mobile menu updates Correct header/layout spacing Adjust layout Add dedicated showcase page Add new Why Enhance page Don't be silly eslint Whoops 😅 Cleanup Link h1 and Axol Cleanup Moar cleanup hoo boy I better squash these Yup definitely squashing after this --- app/docs/md/learn/showcase.md | 36 --- app/docs/md/learn/why-enhance.md | 42 --- app/docs/nav-data.mjs | 12 - app/elements/docs/header.mjs | 210 -------------- app/elements/docs/layout.mjs | 16 +- app/elements/docs/nav.mjs | 2 +- app/elements/docs/theme-toggle.mjs | 6 +- app/elements/editorial-header.mjs | 10 + app/elements/enhance-header.mjs | 265 ++++++++++++++++++ .../landing/axol/on-rainbow-and-cloud.mjs | 1 + app/elements/landing/intro.mjs | 2 +- app/elements/landing/stable-forever.mjs | 1 - .../showcase.mjs => showcase/project.mjs} | 40 ++- app/elements/white-to-blue.mjs | 11 + app/head.mjs | 32 ++- app/pages/index.html | 101 +------ app/pages/showcase.html | 96 +++++++ app/pages/why-enhance.html | 121 ++++++++ styleguide.json | 11 +- 19 files changed, 591 insertions(+), 424 deletions(-) delete mode 100644 app/docs/md/learn/showcase.md delete mode 100644 app/docs/md/learn/why-enhance.md delete mode 100644 app/elements/docs/header.mjs create mode 100644 app/elements/editorial-header.mjs create mode 100644 app/elements/enhance-header.mjs rename app/elements/{doc/showcase.mjs => showcase/project.mjs} (51%) create mode 100644 app/elements/white-to-blue.mjs create mode 100644 app/pages/showcase.html create mode 100644 app/pages/why-enhance.html diff --git a/app/docs/md/learn/showcase.md b/app/docs/md/learn/showcase.md deleted file mode 100644 index f23e7b5f..00000000 --- a/app/docs/md/learn/showcase.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Showcase ---- - -We regularly build new example applications to demonstrate what's possible with Enhance (spoiler: the sky's the limit). Along with our own example applications, you'll also find real world applications here, built by users of Enhance. - - - -Want to have your Enhance project featured? [Open a PR](https://github.com/enhance-dev/enhance.dev/pulls) or [let us know on Discord](https://enhance.dev/discord)! - - - - -Enhance Music is a music library and audio player app built with HTML and CSS, and progressively enhanced with a couple pinches of JavaScript. Despite being built as a traditional multipage website, Enhance Music features an audio player that persists across page loads, and some gorgeous interactive UI built entirely with web standards. - - - -Our movies app is built with Enhance and The Movie Database API. With a strong focus on simplicity, performance, progressive enhancement, and offline local development capabilities, this application is set to transform your understanding of what can be done by focusing on the web platform. - - - -The job board for web performance professionals and people who want to work in the web performance industry. - - - -With wildfire season well upon us in North America, it’s a good idea to keep an eye on local air quality. Let’s get some real time data from the US EPA’s AirNow program. Even with a limited API request budget, we can get snappy results by caching and refreshing data on demand. All with features already built into Enhance. - - - -With clean and easy to follow code, and a modern, responsive interface, this example application demonstrates just how sophisticated you can get when building UI with web standards. This example app can also serve as a starting point for your own portfolio. - - - -Stories created by a group of friends while playing Dungeons & Dragons. - - diff --git a/app/docs/md/learn/why-enhance.md b/app/docs/md/learn/why-enhance.md deleted file mode 100644 index e1e28e3f..00000000 --- a/app/docs/md/learn/why-enhance.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Why Enhance? ---- - -Our mission is to enable anyone to build multi-page dynamic web apps while staying as close to the platform as possible. Enhance fills in the gaps to make building for the backend, and the browser a seamless experience for web authors and consumers. - -Modern JavaScript frameworks bring more problems than they solve; recreating native web platform features adding unnecessary weight and complexity, which is challenging to unravel. - -Enhance provides a dependable foundation built on standards-based web platform features, allowing developers to create web applications that are lightweight, flexible, and future-proof. - -Our criteria for success are: - -1. Author and deliver HTML pages - - - -**Enhance** should allow developers to write components as pure functions that return HTML. Then render them on the server to deliver complete HTML immediately available to the end user. - - - -2. Use Web Standards - - - -**Enhance** should take care of the tedious parts, allowing you to use today's Web Platform standards more efficiently. As new standards and platform features become generally available, Enhance will make way for them. - - - -3. Progressively enhance working HTML - - - -**Enhance** should allow for easy progressive enhancement so that working HTML can be further developed to add additional functionality with JavaScript. - - - -Now we spend more time adding new features and less time chasing breaking changes from dependencies. Your app can scale without ever-increasing build times and JavaScript payloads. - -With direct access to all available browser APIs (like forms, validation, and style encapsulation), there is no need to cobble together libraries and polyfills to develop a complex application. -Skeleton screens and spinners be gone. Flashes of unstyled content (FOUC) or layout shifts from delayed JavaScript don't belong anymore. - -Using just HTML, CSS, and a sprinkling of JavaScript, Enhance can build complex dynamic applications in harmony with the Web Platform, allowing developers to spend their time on interesting domain problems leading to more engaging products with less thrash. diff --git a/app/docs/nav-data.mjs b/app/docs/nav-data.mjs index d3e6c415..f9f84289 100644 --- a/app/docs/nav-data.mjs +++ b/app/docs/nav-data.mjs @@ -12,18 +12,6 @@ export const data = [ label: 'Learn', slug: 'learn', items: [ - { - type: TYPE.link, - slug: 'why-enhance', - label: 'Why Enhance?', - description: 'Our core philosophy', - }, - { - type: TYPE.link, - slug: 'showcase', - label: 'Showcase', - description: 'Built with Enhance', - }, { type: TYPE.category, slug: 'get-started', diff --git a/app/elements/docs/header.mjs b/app/elements/docs/header.mjs deleted file mode 100644 index 5503bc80..00000000 --- a/app/elements/docs/header.mjs +++ /dev/null @@ -1,210 +0,0 @@ -import arc from '@architect/functions' - -export default function DocsHeader({ html, state }) { - const { store } = state - const { searchTerm, sidebarData } = store - - // check if today is Nov 30: Blue Beanie Day - const today = new Date() - const isBlueBeanieDay = today.getMonth() === 11 - 1 && today.getDate() === 30 - - const navItems = [] - if (sidebarData?.length > 0) { - sidebarData - .filter((i) => i.type === 'tab') - .forEach((tab) => { - navItems.push( - `
  • - ${tab.label} -
    • ` - ) - }) - } - - return html` - - - - - - - - - - - - - ` -} diff --git a/app/elements/docs/layout.mjs b/app/elements/docs/layout.mjs index 34cf3afd..8ceb8262 100644 --- a/app/elements/docs/layout.mjs +++ b/app/elements/docs/layout.mjs @@ -37,7 +37,6 @@ export default function DocsLayout({ html, state }) { /* single col */ :host { display: grid; - grid-template-rows: minmax(auto, 8rem) auto; grid-template-areas: 'header' 'content'; @@ -67,7 +66,7 @@ export default function DocsLayout({ html, state }) { overflow: auto; height: 100vh; - grid-template-columns: 16rem 1fr; + grid-template-columns: var(--docs-nav-width) 1fr; grid-template-rows: minmax(auto, 4.5rem) auto; grid-template-areas: 'header header' @@ -94,12 +93,10 @@ export default function DocsLayout({ html, state }) { @media (min-width: 72em) { /* 3-col */ :host { - position: fixed; overflow: auto; height: 100vh; - width: 100vw; - grid-template-columns: 16rem 4fr 16rem; + grid-template-columns: var(--docs-nav-width) 1fr var(--docs-nav-width); grid-template-areas: 'header header header' 'sidebar content outline' @@ -113,11 +110,12 @@ export default function DocsLayout({ html, state }) { - + - +
    diff --git a/app/elements/docs/nav.mjs b/app/elements/docs/nav.mjs index e28dab46..bf5abee8 100644 --- a/app/elements/docs/nav.mjs +++ b/app/elements/docs/nav.mjs @@ -1,6 +1,6 @@ function List(items, classes = []) { return ` -
      +
        ${items .map((item) => { return ` diff --git a/app/elements/docs/theme-toggle.mjs b/app/elements/docs/theme-toggle.mjs index bea400a6..d5f3b1a7 100644 --- a/app/elements/docs/theme-toggle.mjs +++ b/app/elements/docs/theme-toggle.mjs @@ -8,16 +8,16 @@ export default function DocsThemeToggle({ html }) { width: ${size}px; } input + svg { - opacity: 0.3; padding-bottom: 2px; + color: var(--purple-princess); } input:hover + svg, input:checked + svg { opacity: 1; - color: var(--black-princess); + color: var(--rift-white); } input:checked + svg { - border-bottom: 2px solid var(--black-princess); + border-bottom: 2px solid var(--rift-white); } diff --git a/app/elements/editorial-header.mjs b/app/elements/editorial-header.mjs new file mode 100644 index 00000000..550a8d7d --- /dev/null +++ b/app/elements/editorial-header.mjs @@ -0,0 +1,10 @@ +export default function EditorialHeader({ html }) { + return html` + + + ` +} diff --git a/app/elements/enhance-header.mjs b/app/elements/enhance-header.mjs new file mode 100644 index 00000000..5f10ec72 --- /dev/null +++ b/app/elements/enhance-header.mjs @@ -0,0 +1,265 @@ +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') + + return html` + + + + + +
        + + + + +
        + ${isDocs + ? '' + : ''} + + +
        +
        + + + + + + ` +} diff --git a/app/elements/landing/axol/on-rainbow-and-cloud.mjs b/app/elements/landing/axol/on-rainbow-and-cloud.mjs index d16b293b..e668de1e 100644 --- a/app/elements/landing/axol/on-rainbow-and-cloud.mjs +++ b/app/elements/landing/axol/on-rainbow-and-cloud.mjs @@ -3,6 +3,7 @@ export default function AxolOnRainbowAndCloud({ html }) { + ` + return html` -
        + ${contributor ? '' : axolStyles} +
        -

        ${title}

        -

        +

        ${title}

        +

        diff --git a/app/elements/white-to-blue.mjs b/app/elements/white-to-blue.mjs new file mode 100644 index 00000000..6278db20 --- /dev/null +++ b/app/elements/white-to-blue.mjs @@ -0,0 +1,11 @@ +export default function WhiteToBlue({ html }) { + return html` + + + ` +} diff --git a/app/head.mjs b/app/head.mjs index 4c1da27d..63a19643 100644 --- a/app/head.mjs +++ b/app/head.mjs @@ -3,21 +3,13 @@ import { getStyles } from '@enhance/arc-plugin-styles' /** @type {import('@enhance/types').EnhanceHeadFn} */ export default function Head(state) { - const { store } = state + const { req, store } = state const { doc = {} } = store const { title: docTitle } = doc const title = docTitle ? `${docTitle} — Enhance` : 'Enhance' - const docsCSS = docTitle - ? ` - - - - ` - : '' + store.path = req.path || '' return /* html */ ` @@ -35,10 +27,14 @@ export default function Head(state) { )}"> + + + + - ${docsCSS} + @@ -57,6 +53,20 @@ export default function Head(state) { font-weight: 400 900; font-style: italic; } + + html, + body { + font-family: Rubik, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + overflow-x: hidden; + text-rendering: optimizeLegibility; + } + + @media (prefers-reduced-motion: no-preference) { + html { + scroll-behavior: smooth; + } + } + ` diff --git a/app/pages/index.html b/app/pages/index.html index 0c5edfd1..cbd1db8a 100644 --- a/app/pages/index.html +++ b/app/pages/index.html @@ -29,78 +29,18 @@ } } - html, - body { - font-family: Rubik, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - overflow-x: hidden; - text-rendering: optimizeLegibility; - } - - @media (prefers-reduced-motion: no-preference) { - html { - scroll-behavior: smooth; - } - } - body { font-size: var(--landing-text-0); } - nav { + .header-wrapper { + display: block; background-color: #c9ecff; - background-image: linear-gradient(to bottom, hsla(0deg 0% 100% / 0.85), hsla(0deg 0% 100% / 0.35)); - color: var(--rift); - z-index: 3; - } - - .nav-content { - width: 85vw; - } - - nav h1 img { - aspect-ratio: 56 / 51; - translate: 0 -6.25%; - width: 2.5rem; - } - - nav a:not(.get-started) { - color: var(--dark-purple); - transition: color 0.15s ease; - } - - nav a:not(.get-started):hover { - color: var(--princess); - } - - nav a:not(.get-started):focus-visible { - outline-offset: 2px; - } - - .get-started { - background: var(--dark-purple); - border-radius: 5px; - color: white; - } - - .get-started:after { - content: ''; - position: absolute; - inset: -2px; - box-shadow: 0 0 0 2px var(--dark-purple); - border-radius: 6px; - opacity: 0; - transform: scale(0.75); - transition: opacity 150ms linear, transform 150ms linear; - } - - .get-started:focus { - outline: none; - } - - .get-started:hover:after, - .get-started:focus:after { - opacity: 1; - transform: scale(1); + background-image: linear-gradient( + to bottom, + hsla(0deg 0% 100% / 0.85), + hsla(0deg 0% 100% / 0.35) + ); } .clip { @@ -169,30 +109,11 @@ } - +
        + +
        diff --git a/app/pages/showcase.html b/app/pages/showcase.html new file mode 100644 index 00000000..2a2232eb --- /dev/null +++ b/app/pages/showcase.html @@ -0,0 +1,96 @@ + + + + + + +
        +
        +

        + Start with HTML. + 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. +

        +

        + In this showcase, you’ll find some of our own example projects, as well as real world applications built by Enhance users across the globe. +

        + +
        +

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

        +
        + + + + + +
        + + +
        + + Enhance Music is a music library and audio player app built with HTML and CSS, and progressively enhanced with a couple pinches of JavaScript. Despite being built as a traditional multipage website, Enhance Music features an audio player that persists across page loads, and some gorgeous interactive UI built entirely with web standards. + + + + Our movies app is built with Enhance and The Movie Database API. With a strong focus on simplicity, performance, progressive enhancement, and offline local development capabilities, this application is set to transform your understanding of what can be done by focusing on the web platform. + + + + The job board for web performance professionals and people who want to work in the web performance industry. + + + + With wildfire season well upon us in North America, it’s a good idea to keep an eye on local air quality. Let’s get some real time data from the US EPA’s AirNow program. Even with a limited API request budget, we can get snappy results by caching and refreshing data on demand. All with features already built into Enhance. + + + + With clean and easy to follow code, and a modern, responsive interface, this example application demonstrates just how sophisticated you can get when building UI with web standards. This example app can also serve as a starting point for your own portfolio. + + + + Stories created by a group of friends while playing Dungeons & Dragons. + +
        +         + +
        + + diff --git a/app/pages/why-enhance.html b/app/pages/why-enhance.html new file mode 100644 index 00000000..bec08499 --- /dev/null +++ b/app/pages/why-enhance.html @@ -0,0 +1,121 @@ + + + + + + + +
        +
        +

        + Why + Enhance? +

        + +
        +

        + Our mission is to enable anyone to build multi-page dynamic web apps while staying as close to the web platform as possible. +

        +

        + Enhance fills in the gaps to make building for both the backend and the browser a seamless experience for web authors and consumers. +

        +
        + + + +
        + +
        +

        + Modern JavaScript frameworks introduce more problems than they solve by attempting to recreate native web platform features, while at the same time adding unnecessary weight and complexity. This is challenging to unravel, especially when your framework or application dependencies break. +

        +

        + Enhance approaches things differently. It provides a dependable foundation built on standards-based web platform features, while offering quality of life improvements for developers and happy paths to delivering exceptional user experience. This allows developers to create web applications that are lightweight, flexible, and future-proof. +

        + + + +

        + 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 +

        +

        + With Enhance, you spend more time adding new features to your projects and less time chasing breaking changes from dependencies. Your app can scale without ever-increasing build times and JavaScript payloads. +

        +

        + With direct access to all available browser APIs (like forms, validation, and style encapsulation), there is no need to cobble together libraries and polyfills to develop a complex application. Skeleton screens and spinners be gone! Flashes of unstyled content (FOUC) or layout shifts from delayed JavaScript don’t belong anymore. +

        +

        + 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! +

        + + +
        + + +
        +         + + + diff --git a/styleguide.json b/styleguide.json index b895733d..3bb2fdc4 100644 --- a/styleguide.json +++ b/styleguide.json @@ -50,11 +50,12 @@ "rift": "#01040D", "smoke": "#F3F3F3" }, - "properties": [ - { - "bg-gradient": "linear-gradient(125deg, var(--orange), var(--magenta), var(--purple))" - } - ], + "properties": { + "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)" + }, "queries": { "lg": "48em", "xl": "72em"