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