Skip to content

Commit 9691e2c

Browse files
colepeterscolepeters
committed
WIP WASM landing!
1 parent 94eda7b commit 9691e2c

24 files changed

+1881
-17
lines changed

‎app/api/wasm.mjs

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import navDataLoader from '../docs/nav-data.mjs'
2+
3+
/** @type {import('@enhance/types').EnhanceApiFn} */
4+
export async function get({ query }) {
5+
const { thanks } = query
6+
7+
const cacheControl =
8+
process.env.ARC_ENV === 'production'
9+
? 'max-age=86400'
10+
: 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0'
11+
12+
const navData = navDataLoader('docs', '/wasm')
13+
14+
return {
15+
headers: {
16+
'cache-control': cacheControl,
17+
},
18+
json: {
19+
thanks,
20+
navData,
21+
},
22+
}
23+
}

‎app/elements/wasm/container.mjs

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default function Container({ html }) {
2+
return html`
3+
<style>
4+
:host {
5+
display: block;
6+
margin-inline: auto;
7+
max-inline-size: var(--editorial-width);
8+
padding-inline: var(--space-0);
9+
}
10+
</style>
11+
<slot></slot>
12+
`
13+
}

‎app/elements/wasm/heading.mjs

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
export default function Heading({ html }) {
2+
return html`
3+
<style>
4+
h1 {
5+
color: var(--dark-purple);
6+
}
7+
8+
h1 span:first-of-type {
9+
font-size: clamp(1.5em, 3.75vw, 4.5em);
10+
}
11+
12+
h1 span:last-of-type {
13+
font-size: clamp(2.125em, 9vw, 11.5em);
14+
}
15+
16+
abbr {
17+
text-decoration: unset;
18+
}
19+
</style>
20+
<h1 class="text-center uppercase leading1">
21+
<span class="block font-semibold tracking2">Write once,</span>
22+
<span class="block font-black">
23+
<abbr title="Server Side Render">SSR</abbr> anywhere
24+
</span>
25+
</h1>
26+
`
27+
}

‎app/elements/wasm/implementations.mjs

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
const logos = [
2+
'deno',
3+
'django',
4+
'dot-net',
5+
'go',
6+
'java',
7+
'node',
8+
'php',
9+
'python',
10+
'rails',
11+
'ruby',
12+
'rust',
13+
'wordpress',
14+
]
15+
16+
export default function Implementations ({ html }) {
17+
const images = logos.map(name => `<img class="object-contain" src="/_public/img/wasm-landing/logo-${name}.svg" alt="${name} logo" />`).join('')
18+
19+
return html`
20+
<style>
21+
:host {
22+
display: block;
23+
position: relative;
24+
z-index: -3;
25+
}
26+
27+
.axol-banner {
28+
inline-size: clamp(250px, 33vw, 450px);
29+
translate: 0 -100%;
30+
}
31+
32+
.cloud-top,
33+
.cloud-bottom {
34+
max-inline-size: none;
35+
}
36+
37+
.cloud-top {
38+
margin-block-start: -27.5%;
39+
}
40+
41+
figure {
42+
background-color: #e5f7ff;
43+
}
44+
45+
.logo-grid {
46+
gap: var(--space-6) var(--space-0);
47+
}
48+
49+
.logo-grid img {
50+
inline-size: clamp(100px, 16.667vw, 16rem);
51+
max-block-size: 4rem;
52+
}
53+
</style>
54+
<section>
55+
<img class="cloud-top si-100vw" src="/_public/img/wasm-landing/cloud-divider-top.svg" alt="" />
56+
<figure class="relative pbs4">
57+
<img class="absolute inset-bs-0 inset-i-0 mi-auto axol-banner" src="/_public/img/wasm-landing/axol-wasm-banner.svg" alt="Every server, any language" />
58+
<wasm-container>
59+
<div class="logo-grid flex flex-wrap align-items-center justify-content-center">
60+
${images}
61+
</div>
62+
</wasm-container>
63+
</figure>
64+
<img class="cloud-bottom si-100vw" src="/_public/img/wasm-landing/cloud-divider-bottom.svg" alt="" />
65+
</section>
66+
`
67+
}

‎app/elements/wasm/intro-copy.mjs

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export default function IntroCopy ({ html }) {
2+
return html`
3+
<style>
4+
article {
5+
max-inline-size: 64ch;
6+
}
7+
</style>
8+
<wasm-container>
9+
<article class="mi-auto text0 text1-lg font-medium">
10+
<p>
11+
<span class="font-bold">Enhance WASM</span> is bringing server side rendered web components to <span class="font-bold">everyone</span>.
12+
Author your components in friendly, standards based syntax. Reuse them across <span class="font-bold">multiple languages, frameworks, and servers</span>.
13+
Upgrade them using familiar client side code when needed.
14+
</p>
15+
<p class="mbs0">Your path to resilient, cross platform interfaces begins here.</p>
16+
</article>
17+
</wasm-container>
18+
`
19+
}

‎app/elements/wasm/sky.mjs

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
export default function Sky ({ html }) {
2+
return html`
3+
<style>
4+
:host {
5+
display: block;
6+
background-image: linear-gradient(to bottom, #fff0fe, #c9ecff, #7e60f3);
7+
padding-block-start: clamp(var(--space-7), 12vw, 16em);
8+
position: relative;
9+
z-index: 1;
10+
}
11+
12+
@keyframes sunshine {
13+
0% {
14+
scale: 1;
15+
opacity: 0.5;
16+
}
17+
100% {
18+
scale: 1.5;
19+
opacity: 0.875;
20+
}
21+
}
22+
23+
[slot="heading"] {
24+
translate: 0 -25%;
25+
}
26+
27+
#sunlight {
28+
background-image: radial-gradient(
29+
circle at center,
30+
#ffe9b0,
31+
transparent 66%
32+
);
33+
aspect-ratio: 1 / 1;
34+
width: 75vw;
35+
translate: 0 -33%;
36+
animation: 4s sunshine linear alternate infinite;
37+
animation-fill-mode: forward;
38+
z-index: -1;
39+
}
40+
41+
#purple-cloud-right {
42+
inline-size: 40vw;
43+
opacity: 0.5;
44+
translate: 25% -100%;
45+
z-index: -2;
46+
}
47+
48+
#purple-cloud-left {
49+
inline-size: 40vw;
50+
opacity: 0.4;
51+
translate: -20% 0;
52+
z-index: -2;
53+
}
54+
</style>
55+
56+
<figure id="sunlight" class="absolute inset-bs-0 inset-i-0 mi-auto"></figure>
57+
58+
<figure id="purple-cloud-right" class="absolute inset-ie-0">
59+
<img src="/_public/img/landing/cloud-purple-wide.svg" alt="" />
60+
</figure>
61+
62+
<slot name="heading"></slot>
63+
64+
<figure id="purple-cloud-left" class="absolute inset-is-0">
65+
<img src="/_public/img/landing/cloud-purple-medium.svg" alt="" />
66+
</figure>
67+
68+
<slot name="body"></slot>
69+
`
70+
}

‎app/head.mjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export default function Head(state) {
8686
}
8787
8888
begin-masthead {
89-
--inline-padding: var(--space--2);
89+
--inline-padding: var(--space-0);
9090
--max-inline-size: 100vw;
9191
--accent: var(--mid-purple);
9292
font-size: var(--text-0);

‎app/pages/wasm.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<style scope="global">
2+
body {
3+
background: white;
4+
margin-block-start: var(--masthead-max-height);
5+
}
6+
</style>
7+
8+
<begin-masthead product="Enhance" active="products" breakpoint="56em">
9+
<span slot="product-page">Enhance WASM</span>
10+
<product-nav slot="product-nav"></product-nav>
11+
<div slot="product-nav-lg" class="flex align-items-center">
12+
<masthead-product-link href="/">Home</masthead-product-link>
13+
<masthead-product-link href="/docs">Docs</masthead-product-link>
14+
<masthead-product-link active href="/wasm">Enhance WASM</masthead-product-link>
15+
<masthead-product-link href="/why-enhance">Why Enhance?</masthead-product-link>
16+
</div>
17+
</begin-masthead>
18+
19+
<wasm-sky class="text0 leading4">
20+
<wasm-heading slot="heading"></wasm-heading>
21+
<div slot="body">
22+
<wasm-intro-copy class="block mb8"></wasm-intro-copy>
23+
<wasm-implementations></wasm-implementations>
24+
</div>
25+
</wasm-sky>

‎package.json

+1-16
Original file line numberDiff line numberDiff line change
@@ -40,24 +40,9 @@
4040
},
4141
"eslintConfig": {
4242
"extends": [
43-
"@architect/eslint-config",
44-
"plugin:prettier/recommended"
45-
],
46-
"plugins": [
47-
"prettier"
43+
"@architect/eslint-config"
4844
],
4945
"rules": {
50-
"prettier/prettier": [
51-
"error",
52-
{
53-
"semi": false,
54-
"singleQuote": true,
55-
"tabWidth": 2,
56-
"useTabs": false,
57-
"trailingComma": "es5",
58-
"bracketSameLine": true
59-
}
60-
],
6146
"filenames/match-regex": "off"
6247
},
6348
"parserOptions": {

‎public/img/wasm-landing/axol-wasm-banner.svg

+36
Loading

0 commit comments

Comments
 (0)