Skip to content

Commit 9ab07c7

Browse files
colepeterscolepeters
committed
More WIP WASM landing!
1 parent 9691e2c commit 9ab07c7

File tree

9 files changed

+213
-6
lines changed

9 files changed

+213
-6
lines changed

‎app/elements/wasm/container.mjs

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
export default function Container({ html }) {
1+
export default function Container ({ html }) {
22
return html`
33
<style>
44
:host {
55
display: block;
66
margin-inline: auto;
77
max-inline-size: var(--editorial-width);
8-
padding-inline: var(--space-0);
98
}
109
</style>
1110
<slot></slot>

‎app/elements/wasm/discord.mjs

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
export default function Discord ({ html }) {
2+
return html`
3+
<style>
4+
h2 {
5+
color: white;
6+
}
7+
8+
.card {
9+
background-color: white;
10+
color: var(--dark);
11+
border-radius: 0.25em;
12+
}
13+
14+
p {
15+
max-inline-size: 48ch;
16+
}
17+
18+
a {
19+
background-color: var(--blue);
20+
color: white;
21+
border-radius: 0.25em;
22+
}
23+
24+
a:after {
25+
content: '';
26+
position: absolute;
27+
inset: -2px;
28+
box-shadow: 0 0 0 2px var(--blue);
29+
border-radius: 6px;
30+
opacity: 0;
31+
transform: scale(0.75);
32+
transition: opacity 150ms linear, transform 150ms linear;
33+
}
34+
35+
a:focus {
36+
outline: none;
37+
}
38+
39+
a:hover:after,
40+
a:focus:after {
41+
opacity: 1;
42+
transform: scale(1);
43+
}
44+
</style>
45+
46+
<h2 class="text4 font-bold tracking-1">Get involved</h2>
47+
48+
<div class="card p2 mb2 leading3">
49+
<p class="text1 mbe0">
50+
<span class="font-bold">Enhance WASM is an open source initiative,</span> and we’re looking for collaborators to join us on our mission of making server side rendered web components accessible to all web&nbsp;developers.
51+
</p>
52+
<p class="mbe0">
53+
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&nbsp;between!
54+
</p>
55+
<p>
56+
If you’re enthusiastic about getting involved, let’s start talking!
57+
</p>
58+
<div class="mbs4 mbe0">
59+
<a class="pi2 pb0 text1 font-bold relative" href="https://enhance.dev/discord">
60+
Join us on Discord
61+
</a>
62+
</div>
63+
</div>
64+
`
65+
}

‎app/elements/wasm/implementations.mjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function Implementations ({ html }) {
4848
4949
.logo-grid img {
5050
inline-size: clamp(100px, 16.667vw, 16rem);
51-
max-block-size: 4rem;
51+
max-block-size: 5rem;
5252
}
5353
</style>
5454
<section>

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export default function IntroCopy ({ html }) {
33
<style>
44
article {
55
max-inline-size: 64ch;
6+
color: var(--dark);
67
}
78
</style>
89
<wasm-container>
@@ -12,7 +13,7 @@ export default function IntroCopy ({ html }) {
1213
Author your components in friendly, standards based syntax. Reuse them across <span class="font-bold">multiple languages, frameworks, and servers</span>.
1314
Upgrade them using familiar client side code when needed.
1415
</p>
15-
<p class="mbs0">Your path to resilient, cross platform interfaces begins here.</p>
16+
<p class="mbs0">Your path to resilient, cross platform interfaces begins <a href="#cta" class="underline font-bold">here</a>.</p>
1617
</article>
1718
</wasm-container>
1819
`

‎app/elements/wasm/lower-section.mjs

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default function LowerSection ({ html }) {
2+
return html`
3+
<style>
4+
:host {
5+
display: block;
6+
background-color: var(--indigo);
7+
padding-block: var(--space-4) var(--space-8);
8+
}
9+
</style>
10+
<a id="cta"></a>
11+
<slot></slot>
12+
`
13+
}

‎app/elements/wasm/repos.mjs

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
const examples = [
2+
{
3+
label: 'C#',
4+
url: 'https://github.com/enhance-dev/enhance-ssr-c-sharp'
5+
},
6+
{
7+
label: 'Deno',
8+
url: 'https://github.com/enhance-dev/enhance-ssr-deno'
9+
},
10+
{
11+
label: 'Go',
12+
url: 'https://github.com/enhance-dev/enhance-ssr-go'
13+
},
14+
{
15+
label: 'Java',
16+
url: 'https://github.com/enhance-dev/enhance-ssr-java'
17+
},
18+
{
19+
label: 'PHP',
20+
url: 'https://github.com/enhance-dev/enhance-ssr-php'
21+
},
22+
{
23+
label: 'Python',
24+
url: 'https://github.com/enhance-dev/enhance-ssr-python'
25+
},
26+
{
27+
label: 'Ruby',
28+
url: 'https://github.com/enhance-dev/enhance-ssr-ruby'
29+
},
30+
{
31+
label: 'Ruby on Rails',
32+
url: 'https://github.com/enhance-dev/enhance-ssr-ruby-on-rails'
33+
},
34+
{
35+
label: 'Rust',
36+
url: 'https://github.com/enhance-dev/enhance-ssr-rust'
37+
},
38+
]
39+
40+
const examplesList = examples.map(i => `<li>
41+
<a class="inline-block pi0 pb-4 relative" href="${i.url}">${i.label}</a>
42+
</li>`).join('')
43+
44+
const github = `<svg class="inline-block mie-2" viewbox="0 0 98 96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/></svg>`
45+
46+
export default function Repos ({ html }) {
47+
return html`
48+
<style>
49+
h2 {
50+
color: white;
51+
}
52+
53+
a {
54+
color: var(--blue);
55+
}
56+
57+
.card {
58+
background-color: white;
59+
color: var(--dark);
60+
border-radius: 0.25em;
61+
}
62+
63+
svg {
64+
max-block-size: 1.5em;
65+
inline-size: auto;
66+
}
67+
68+
hr {
69+
border-block-start: 1px solid #ddd;
70+
}
71+
72+
.examples a {
73+
background: var(--lily);
74+
border-radius: 0.25em;
75+
}
76+
77+
.examples a:after {
78+
content: '';
79+
position: absolute;
80+
inset: -2px;
81+
box-shadow: 0 0 0 2px var(--lily);
82+
border-radius: 6px;
83+
opacity: 0;
84+
transform: scale(0.75);
85+
transition: opacity 150ms linear, transform 150ms linear;
86+
}
87+
88+
.examples a:focus {
89+
outline: none;
90+
}
91+
92+
.examples a:hover:after,
93+
.examples a:focus:after {
94+
opacity: 1;
95+
transform: scale(1);
96+
}
97+
</style>
98+
99+
<h2 class="text4 font-bold tracking-1">Get started</h2>
100+
101+
<div class="card p2 mb2">
102+
<h3 class="text-1 uppercase font-semibold tracking2 mbe0 flex align-items-center leading0">
103+
${github} Starter projects
104+
</h3>
105+
<ul class="font-bold text1 leading4 list-none flex flex-wrap gap0 examples">
106+
${examplesList}
107+
</ul>
108+
109+
<hr class="mb2">
110+
111+
<h3 class="text-1 uppercase font-semibold tracking2 mbe0 flex align-items-center leading0">
112+
${github} Download & contribute
113+
</h3>
114+
<p class="text1 font-bold">
115+
<a class="underline" href="https://github.com/enhance-dev/enhance-ssr-wasm">
116+
enhance-ssr-wasm
117+
</a>
118+
</p>
119+
120+
</div>
121+
`
122+
}

‎app/elements/wasm/sky.mjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export default function Sky ({ html }) {
33
<style>
44
:host {
55
display: block;
6-
background-image: linear-gradient(to bottom, #fff0fe, #c9ecff, #7e60f3);
6+
background-image: linear-gradient(to bottom, #fff0fe, #c9ecff, var(--indigo));
77
padding-block-start: clamp(var(--space-7), 12vw, 16em);
88
position: relative;
99
z-index: 1;

‎app/pages/wasm.html

+7
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,10 @@
2323
<wasm-implementations></wasm-implementations>
2424
</div>
2525
</wasm-sky>
26+
<wasm-lower-section>
27+
<wasm-container class="grid col-1 col-2-lg gap2">
28+
<wasm-discord></wasm-discord>
29+
<wasm-repos></wasm-repos>
30+
</wasm-container>
31+
</wasm-lower-section>
32+
<landing-footer class="pb4"></landing-footer>

‎public/img/wasm-landing/cloud-divider-bottom.svg

+1-1
Loading

0 commit comments

Comments
 (0)