From 9691e2cd9943dd4c00480bbb9da889ed3f6347a6 Mon Sep 17 00:00:00 2001 From: Cole Peters Date: Fri, 22 Mar 2024 17:12:04 -0500 Subject: [PATCH 1/3] WIP WASM landing! --- app/api/wasm.mjs | 23 + app/elements/wasm/container.mjs | 13 + app/elements/wasm/heading.mjs | 27 + app/elements/wasm/implementations.mjs | 67 ++ app/elements/wasm/intro-copy.mjs | 19 + app/elements/wasm/sky.mjs | 70 ++ app/head.mjs | 2 +- app/pages/wasm.html | 25 + package.json | 17 +- public/img/wasm-landing/axol-wasm-banner.svg | 36 + .../img/wasm-landing/cloud-divider-bottom.svg | 30 + public/img/wasm-landing/cloud-divider-top.svg | 30 + public/img/wasm-landing/logo-deno.svg | 1 + public/img/wasm-landing/logo-django.svg | 38 + public/img/wasm-landing/logo-dot-net.svg | 7 + public/img/wasm-landing/logo-go.svg | 60 ++ public/img/wasm-landing/logo-java.svg | 54 + public/img/wasm-landing/logo-node.svg | 1 + public/img/wasm-landing/logo-php.svg | 96 ++ public/img/wasm-landing/logo-python.svg | 265 +++++ public/img/wasm-landing/logo-rails.svg | 11 + public/img/wasm-landing/logo-ruby.svg | 948 ++++++++++++++++++ public/img/wasm-landing/logo-rust.svg | 57 ++ public/img/wasm-landing/logo-wordpress.svg | 1 + 24 files changed, 1881 insertions(+), 17 deletions(-) create mode 100644 app/api/wasm.mjs create mode 100644 app/elements/wasm/container.mjs create mode 100644 app/elements/wasm/heading.mjs create mode 100644 app/elements/wasm/implementations.mjs create mode 100644 app/elements/wasm/intro-copy.mjs create mode 100644 app/elements/wasm/sky.mjs create mode 100644 app/pages/wasm.html create mode 100644 public/img/wasm-landing/axol-wasm-banner.svg create mode 100644 public/img/wasm-landing/cloud-divider-bottom.svg create mode 100644 public/img/wasm-landing/cloud-divider-top.svg create mode 100644 public/img/wasm-landing/logo-deno.svg create mode 100644 public/img/wasm-landing/logo-django.svg create mode 100644 public/img/wasm-landing/logo-dot-net.svg create mode 100644 public/img/wasm-landing/logo-go.svg create mode 100644 public/img/wasm-landing/logo-java.svg create mode 100644 public/img/wasm-landing/logo-node.svg create mode 100644 public/img/wasm-landing/logo-php.svg create mode 100644 public/img/wasm-landing/logo-python.svg create mode 100644 public/img/wasm-landing/logo-rails.svg create mode 100644 public/img/wasm-landing/logo-ruby.svg create mode 100644 public/img/wasm-landing/logo-rust.svg create mode 100644 public/img/wasm-landing/logo-wordpress.svg diff --git a/app/api/wasm.mjs b/app/api/wasm.mjs new file mode 100644 index 00000000..1668a3ea --- /dev/null +++ b/app/api/wasm.mjs @@ -0,0 +1,23 @@ +import navDataLoader from '../docs/nav-data.mjs' + +/** @type {import('@enhance/types').EnhanceApiFn} */ +export async function get({ query }) { + const { thanks } = query + + const cacheControl = + process.env.ARC_ENV === 'production' + ? 'max-age=86400' + : 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0' + + const navData = navDataLoader('docs', '/wasm') + + return { + headers: { + 'cache-control': cacheControl, + }, + json: { + thanks, + navData, + }, + } +} diff --git a/app/elements/wasm/container.mjs b/app/elements/wasm/container.mjs new file mode 100644 index 00000000..fb0005eb --- /dev/null +++ b/app/elements/wasm/container.mjs @@ -0,0 +1,13 @@ +export default function Container({ html }) { + return html` + + + ` +} diff --git a/app/elements/wasm/heading.mjs b/app/elements/wasm/heading.mjs new file mode 100644 index 00000000..76b5895b --- /dev/null +++ b/app/elements/wasm/heading.mjs @@ -0,0 +1,27 @@ +export default function Heading({ html }) { + return html` + +

+ Write once, + + SSR anywhere + +

+ ` +} diff --git a/app/elements/wasm/implementations.mjs b/app/elements/wasm/implementations.mjs new file mode 100644 index 00000000..13a2a069 --- /dev/null +++ b/app/elements/wasm/implementations.mjs @@ -0,0 +1,67 @@ +const logos = [ + 'deno', + 'django', + 'dot-net', + 'go', + 'java', + 'node', + 'php', + 'python', + 'rails', + 'ruby', + 'rust', + 'wordpress', +] + +export default function Implementations ({ html }) { + const images = logos.map(name => `${name} logo`).join('') + + return html` + +
+ +
+ Every server, any language + +
+ ${images} +
+ +
+ +
+ ` +} diff --git a/app/elements/wasm/intro-copy.mjs b/app/elements/wasm/intro-copy.mjs new file mode 100644 index 00000000..e939f60c --- /dev/null +++ b/app/elements/wasm/intro-copy.mjs @@ -0,0 +1,19 @@ +export default function IntroCopy ({ html }) { + return html` + + +
+

+ Enhance WASM is bringing server side rendered web components to everyone. + Author your components in friendly, standards based syntax. Reuse them across multiple languages, frameworks, and servers. + Upgrade them using familiar client side code when needed. +

+

Your path to resilient, cross platform interfaces begins here.

+
+ + ` +} diff --git a/app/elements/wasm/sky.mjs b/app/elements/wasm/sky.mjs new file mode 100644 index 00000000..b1e02098 --- /dev/null +++ b/app/elements/wasm/sky.mjs @@ -0,0 +1,70 @@ +export default function Sky ({ html }) { + return html` + + +
+ +
+ +
+ + + +
+ +
+ + + ` +} diff --git a/app/head.mjs b/app/head.mjs index be3297ea..40c92989 100644 --- a/app/head.mjs +++ b/app/head.mjs @@ -86,7 +86,7 @@ export default function Head(state) { } begin-masthead { - --inline-padding: var(--space--2); + --inline-padding: var(--space-0); --max-inline-size: 100vw; --accent: var(--mid-purple); font-size: var(--text-0); diff --git a/app/pages/wasm.html b/app/pages/wasm.html new file mode 100644 index 00000000..2b56cce0 --- /dev/null +++ b/app/pages/wasm.html @@ -0,0 +1,25 @@ + + + + Enhance WASM + +
+ Home + Docs + Enhance WASM + Why Enhance? +
+ + + + +
+ + +
+ diff --git a/package.json b/package.json index 3d8980a0..0394b7c2 100644 --- a/package.json +++ b/package.json @@ -40,24 +40,9 @@ }, "eslintConfig": { "extends": [ - "@architect/eslint-config", - "plugin:prettier/recommended" - ], - "plugins": [ - "prettier" + "@architect/eslint-config" ], "rules": { - "prettier/prettier": [ - "error", - { - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "useTabs": false, - "trailingComma": "es5", - "bracketSameLine": true - } - ], "filenames/match-regex": "off" }, "parserOptions": { diff --git a/public/img/wasm-landing/axol-wasm-banner.svg b/public/img/wasm-landing/axol-wasm-banner.svg new file mode 100644 index 00000000..dbefea2f --- /dev/null +++ b/public/img/wasm-landing/axol-wasm-banner.svg @@ -0,0 +1,36 @@ + + + +EVERY SERVER, ANY LANGUAGE. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/wasm-landing/cloud-divider-bottom.svg b/public/img/wasm-landing/cloud-divider-bottom.svg new file mode 100644 index 00000000..839f5ab7 --- /dev/null +++ b/public/img/wasm-landing/cloud-divider-bottom.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/wasm-landing/cloud-divider-top.svg b/public/img/wasm-landing/cloud-divider-top.svg new file mode 100644 index 00000000..e6e4032a --- /dev/null +++ b/public/img/wasm-landing/cloud-divider-top.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/wasm-landing/logo-deno.svg b/public/img/wasm-landing/logo-deno.svg new file mode 100644 index 00000000..f87ef30e --- /dev/null +++ b/public/img/wasm-landing/logo-deno.svg @@ -0,0 +1 @@ +Deno logo \ No newline at end of file diff --git a/public/img/wasm-landing/logo-django.svg b/public/img/wasm-landing/logo-django.svg new file mode 100644 index 00000000..1538f081 --- /dev/null +++ b/public/img/wasm-landing/logo-django.svg @@ -0,0 +1,38 @@ + + + + +]> + + + + + + + + + + + + diff --git a/public/img/wasm-landing/logo-dot-net.svg b/public/img/wasm-landing/logo-dot-net.svg new file mode 100644 index 00000000..d204a090 --- /dev/null +++ b/public/img/wasm-landing/logo-dot-net.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/img/wasm-landing/logo-go.svg b/public/img/wasm-landing/logo-go.svg new file mode 100644 index 00000000..666408bf --- /dev/null +++ b/public/img/wasm-landing/logo-go.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/wasm-landing/logo-java.svg b/public/img/wasm-landing/logo-java.svg new file mode 100644 index 00000000..a5deae22 --- /dev/null +++ b/public/img/wasm-landing/logo-java.svg @@ -0,0 +1,54 @@ + + + + +]> + + + + + + + + + + + + + + + + + diff --git a/public/img/wasm-landing/logo-node.svg b/public/img/wasm-landing/logo-node.svg new file mode 100644 index 00000000..41d044ac --- /dev/null +++ b/public/img/wasm-landing/logo-node.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/wasm-landing/logo-php.svg b/public/img/wasm-landing/logo-php.svg new file mode 100644 index 00000000..e4f137cb --- /dev/null +++ b/public/img/wasm-landing/logo-php.svg @@ -0,0 +1,96 @@ + + + Official PHP Logo + + + + image/svg+xml + + Official PHP Logo + + + Colin Viebrock + + + + + + + + + + + + Copyright Colin Viebrock 1997 - All rights reserved. + + + 1997 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/wasm-landing/logo-python.svg b/public/img/wasm-landing/logo-python.svg new file mode 100644 index 00000000..269bbea5 --- /dev/null +++ b/public/img/wasm-landing/logo-python.svg @@ -0,0 +1,265 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/wasm-landing/logo-rails.svg b/public/img/wasm-landing/logo-rails.svg new file mode 100644 index 00000000..9e8fc413 --- /dev/null +++ b/public/img/wasm-landing/logo-rails.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/img/wasm-landing/logo-ruby.svg b/public/img/wasm-landing/logo-ruby.svg new file mode 100644 index 00000000..59cf324f --- /dev/null +++ b/public/img/wasm-landing/logo-ruby.svg @@ -0,0 +1,948 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/wasm-landing/logo-rust.svg b/public/img/wasm-landing/logo-rust.svg new file mode 100644 index 00000000..dd830c26 --- /dev/null +++ b/public/img/wasm-landing/logo-rust.svg @@ -0,0 +1,57 @@ + + + \ No newline at end of file diff --git a/public/img/wasm-landing/logo-wordpress.svg b/public/img/wasm-landing/logo-wordpress.svg new file mode 100644 index 00000000..72183e90 --- /dev/null +++ b/public/img/wasm-landing/logo-wordpress.svg @@ -0,0 +1 @@ + \ No newline at end of file From 9ab07c7631f634844a6c2cc10f302291be549879 Mon Sep 17 00:00:00 2001 From: Cole Peters Date: Tue, 26 Mar 2024 14:46:30 -0500 Subject: [PATCH 2/3] More WIP WASM landing! --- app/elements/wasm/container.mjs | 3 +- app/elements/wasm/discord.mjs | 65 ++++++++++ app/elements/wasm/implementations.mjs | 2 +- app/elements/wasm/intro-copy.mjs | 3 +- app/elements/wasm/lower-section.mjs | 13 ++ app/elements/wasm/repos.mjs | 122 ++++++++++++++++++ app/elements/wasm/sky.mjs | 2 +- app/pages/wasm.html | 7 + .../img/wasm-landing/cloud-divider-bottom.svg | 2 +- 9 files changed, 213 insertions(+), 6 deletions(-) create mode 100644 app/elements/wasm/discord.mjs create mode 100644 app/elements/wasm/lower-section.mjs create mode 100644 app/elements/wasm/repos.mjs diff --git a/app/elements/wasm/container.mjs b/app/elements/wasm/container.mjs index fb0005eb..e29d944e 100644 --- a/app/elements/wasm/container.mjs +++ b/app/elements/wasm/container.mjs @@ -1,11 +1,10 @@ -export default function Container({ html }) { +export default function Container ({ html }) { return html` diff --git a/app/elements/wasm/discord.mjs b/app/elements/wasm/discord.mjs new file mode 100644 index 00000000..2756599c --- /dev/null +++ b/app/elements/wasm/discord.mjs @@ -0,0 +1,65 @@ +export default function Discord ({ html }) { + return html` + + +

Get involved

+ +
+

+ Enhance WASM is an open source initiative, and we’re looking for collaborators to join us on our mission of making server side rendered web components accessible to all web developers. +

+

+ Whatever your choice of programming language or framework may be, we’d love assistance with optimizing our existing implementations, creating new adapters, improving example applications, reviewing pull requests, and everything in between! +

+

+ If you’re enthusiastic about getting involved, let’s start talking! +

+
+ + Join us on Discord + +
+
+ ` +} diff --git a/app/elements/wasm/implementations.mjs b/app/elements/wasm/implementations.mjs index 13a2a069..23de6794 100644 --- a/app/elements/wasm/implementations.mjs +++ b/app/elements/wasm/implementations.mjs @@ -48,7 +48,7 @@ export default function Implementations ({ html }) { .logo-grid img { inline-size: clamp(100px, 16.667vw, 16rem); - max-block-size: 4rem; + max-block-size: 5rem; }
diff --git a/app/elements/wasm/intro-copy.mjs b/app/elements/wasm/intro-copy.mjs index e939f60c..ad40e224 100644 --- a/app/elements/wasm/intro-copy.mjs +++ b/app/elements/wasm/intro-copy.mjs @@ -3,6 +3,7 @@ export default function IntroCopy ({ html }) { @@ -12,7 +13,7 @@ export default function IntroCopy ({ html }) { Author your components in friendly, standards based syntax. Reuse them across multiple languages, frameworks, and servers. Upgrade them using familiar client side code when needed.

-

Your path to resilient, cross platform interfaces begins here.

+

Your path to resilient, cross platform interfaces begins here.

 ` diff --git a/app/elements/wasm/lower-section.mjs b/app/elements/wasm/lower-section.mjs new file mode 100644 index 00000000..e45baaf6 --- /dev/null +++ b/app/elements/wasm/lower-section.mjs @@ -0,0 +1,13 @@ +export default function LowerSection ({ html }) { + return html` + + + + ` +} diff --git a/app/elements/wasm/repos.mjs b/app/elements/wasm/repos.mjs new file mode 100644 index 00000000..41f12e60 --- /dev/null +++ b/app/elements/wasm/repos.mjs @@ -0,0 +1,122 @@ +const examples = [ + { + label: 'C#', + url: 'https://github.com/enhance-dev/enhance-ssr-c-sharp' + }, + { + label: 'Deno', + url: 'https://github.com/enhance-dev/enhance-ssr-deno' + }, + { + label: 'Go', + url: 'https://github.com/enhance-dev/enhance-ssr-go' + }, + { + label: 'Java', + url: 'https://github.com/enhance-dev/enhance-ssr-java' + }, + { + label: 'PHP', + url: 'https://github.com/enhance-dev/enhance-ssr-php' + }, + { + label: 'Python', + url: 'https://github.com/enhance-dev/enhance-ssr-python' + }, + { + label: 'Ruby', + url: 'https://github.com/enhance-dev/enhance-ssr-ruby' + }, + { + label: 'Ruby on Rails', + url: 'https://github.com/enhance-dev/enhance-ssr-ruby-on-rails' + }, + { + label: 'Rust', + url: 'https://github.com/enhance-dev/enhance-ssr-rust' + }, +] + +const examplesList = examples.map(i => `
  • + ${i.label} +
    • `).join('') + +const github = `` + +export default function Repos ({ html }) { + return html` + + +

    Get started

    + +
    +

    + ${github} Starter projects +

    +
      + ${examplesList} +
    + +
    + +

    + ${github} Download & contribute +

    +

    + + enhance-ssr-wasm + +

    + +
    + ` +} diff --git a/app/elements/wasm/sky.mjs b/app/elements/wasm/sky.mjs index b1e02098..83983152 100644 --- a/app/elements/wasm/sky.mjs +++ b/app/elements/wasm/sky.mjs @@ -3,7 +3,7 @@ export default function Sky ({ html }) { ${modals - .map( - (modalName) => /* html*/ ` + .map( + (modalName) => /* html*/ ` ` - ) - .join('')} + ) + .join('')} ${modals - .map( - (modalName) => /* html*/ ` + .map( + (modalName) => /* html*/ `