Skip to content

Commit 0eaa317

Browse files
Rich-HarrisRich-Harris
authored
new homepage (#370)
* WIP * add some company logos * grayscale * comment stuff out * add video * align icons * tweaks * tidy up * more * credit marcel * rejig supporters section * the hell * tidy up
1 parent 31f001e commit 0eaa317

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+1429
-1567
lines changed

‎apps/svelte.dev/scripts/get_contributors.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ try {
2222
const base = `https://api.github.com/repos/sveltejs/svelte/contributors`;
2323
const { GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET } = process.env;
2424

25-
const MAX = 24;
25+
const MAX = 48;
2626
const SIZE = 128;
2727

2828
const contributors = [];

‎apps/svelte.dev/scripts/get_donors.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ try {
1818
process.exit(0);
1919
}
2020
} catch {
21-
const MAX = 24;
21+
const MAX = 48;
2222
const SIZE = 128;
2323

2424
const res = await fetch('https://opencollective.com/svelte/members/all.json');

‎apps/svelte.dev/src/routes/+page.svelte‎

Lines changed: 35 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
<script>
2-
import { Blurb, Footer, TrySection } from '@sveltejs/site-kit/home';
2+
import { Footer } from '@sveltejs/site-kit/home';
3+
import { Section } from '@sveltejs/site-kit/components';
34
import Hero from './_home/Hero.svelte';
45
import Supporters from './_home/Supporters/index.svelte';
5-
import WhosUsingSvelte from './_home/WhosUsingSvelte/index.svelte';
6-
import Svelte from './_home/Svelte.svelte';
7-
import Features from './_home/Features.svelte';
8-
import Deployment from './_home/Deployment.svelte';
9-
import Showcase from './_home/Showcase.svelte';
10-
import './_home/common.css';
11-
import HeroSvelteKit from './_home/HeroSvelteKit.svelte';
6+
import Testimonials from './_home/Testimonials.svelte';
7+
import Companies from './_home/Companies.svelte';
8+
import Video from './_home/Video.svelte';
9+
import Community from './_home/Community.svelte';
10+
import './_home/common.css'; /* TODO wut */
1211
</script>
1312

1413
<svelte:head>
@@ -24,99 +23,38 @@
2423

2524
<Hero />
2625

27-
<Blurb>
28-
{#snippet one()}
29-
<div>
30-
<h2>fast</h2>
31-
<p>
32-
Svelte shifts as much work as possible out of the browser and into your build step. No
33-
more manual optimisations — just faster, smaller and more efficient apps.
34-
</p>
35-
</div>
36-
{/snippet}
26+
<Testimonials />
3727

38-
{#snippet two()}
39-
<div>
40-
<h2>fun</h2>
41-
<p>
42-
Write concise components using languages you already know — HTML, CSS and JavaScript. Get
43-
things done without fighting the framework. Code with joy.
44-
</p>
45-
</div>
46-
{/snippet}
28+
<Companies />
4729

48-
{#snippet three()}
49-
<div>
50-
<h2>flexible</h2>
51-
<p>
52-
Svelte scales from tiny widgets all the way to big full-stack applications. State
53-
management, motion primitives, form bindings and more — all built-in.
54-
</p>
55-
</div>
56-
{/snippet}
57-
</Blurb>
30+
<Section>
31+
<figure>
32+
<Video />
33+
<figcaption>
34+
<a href="https://www.offerzen.com/community/svelte-origins-documentary"
35+
>Watch the full Svelte Origins documentary</a
36+
>
37+
</figcaption>
38+
</figure>
39+
</Section>
5840

59-
<TrySection />
60-
61-
<Svelte />
62-
63-
<HeroSvelteKit />
64-
65-
<Features />
66-
67-
<Deployment />
68-
69-
<Showcase />
70-
71-
<WhosUsingSvelte />
41+
<Community />
7242

7343
<Supporters />
7444

75-
<Footer
76-
links={{
77-
resources: [
78-
{
79-
title: 'documentation',
80-
href: '/docs'
81-
},
82-
{
83-
title: 'tutorial',
84-
href: '/tutorial'
85-
},
86-
{
87-
title: 'playground',
88-
href: '/playground'
89-
},
90-
{
91-
title: 'blog',
92-
href: '/blog'
93-
}
94-
],
95-
connect: [
96-
{
97-
title: 'github',
98-
href: 'https://github.com/sveltejs/svelte'
99-
},
100-
{
101-
title: 'opencollective',
102-
href: 'https://opencollective.com/svelte'
103-
},
104-
{
105-
title: 'discord',
106-
href: '/chat'
107-
},
108-
{
109-
title: 'twitter',
110-
href: 'https://twitter.com/sveltejs'
111-
}
112-
]
113-
}}
114-
>
115-
{#snippet license()}
116-
<span>
117-
Svelte is <a href="https://github.com/sveltejs/svelte">free and open source software</a> released
118-
under the MIT license
119-
</span>
120-
{/snippet}
121-
</Footer>
45+
<Footer />
12246
</div>
47+
48+
<style>
49+
figcaption {
50+
font: var(--sk-font-body-small);
51+
}
52+
53+
.home :global {
54+
@media (min-width: 800px) {
55+
h2 {
56+
font: var(--sk-font-h1);
57+
}
58+
}
59+
}
60+
</style>

‎apps/svelte.dev/src/routes/_home/Community.svelte‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<script>
2+
import { Section } from '@sveltejs/site-kit/components';
3+
</script>
4+
5+
<Section --max-width="200rem">
6+
<h2>join our friendly community</h2>
7+
<p>
8+
Our sister organisation, <a href="https://www.sveltesociety.dev/">Svelte Society</a>, organises
9+
events around the globe.
10+
</p>
11+
<p>Find your chapter and join us in <a href="/chat">our Discord server</a>.</p>
12+
13+
<figure>
14+
<enhanced:img
15+
src="./summit.png"
16+
alt="Photos by Marcel Cutts from the 2022 Svelte Summit in Stockholm"
17+
/>
18+
<figcaption>Photos by <a href="https://x.com/marcelcutts">Marcel Cutts</a></figcaption>
19+
</figure>
20+
</Section>
21+
22+
<style>
23+
figure {
24+
position: relative;
25+
}
26+
27+
figcaption {
28+
position: relative;
29+
top: max(-2vw, calc(-0.02 * (120rem + 2 * var(--sk-page-padding-side))));
30+
font: var(--sk-font-body-small);
31+
margin: 0 auto;
32+
padding: 0 var(--sk-page-padding-side);
33+
color: var(--sk-text-4);
34+
text-align: center;
35+
36+
a {
37+
text-wrap: nowrap;
38+
color: inherit;
39+
text-decoration: underline;
40+
}
41+
}
42+
43+
img {
44+
width: 100%;
45+
height: auto;
46+
}
47+
48+
h2,
49+
p {
50+
text-align: center;
51+
}
52+
</style>

‎apps/svelte.dev/src/routes/_home/Companies.svelte‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<div class="companies">
2+
<div class="wing">
3+
<div class="logos">
4+
<enhanced:img src="./companies/ikea.svg" alt="Ikea logo" />
5+
<enhanced:img src="./companies/mullvad.svg" alt="Mullvad logo" />
6+
<enhanced:img src="./companies/stack-overflow.svg" alt="Mullvad logo" />
7+
<enhanced:img src="./companies/yelp.svg" alt="New York Times logo" />
8+
<enhanced:img src="./companies/square.svg" alt="Mullvad logo" />
9+
<enhanced:img src="./companies/apple.svg" alt="Apple logo" />
10+
</div>
11+
</div>
12+
<h2>used by companies you've heard of</h2>
13+
<div class="wing">
14+
<div class="logos">
15+
<enhanced:img src="./companies/spotify.svg" alt="Spotify logo" />
16+
<enhanced:img src="./companies/nyt.svg" alt="New York Times logo" />
17+
<enhanced:img src="./companies/logitech.svg" alt="Logitech logo" />
18+
<enhanced:img src="./companies/decathlon.svg" alt="Decathlon logo" />
19+
<enhanced:img src="./companies/1password.svg" alt="1password logo" />
20+
</div>
21+
</div>
22+
</div>
23+
24+
<style>
25+
.companies {
26+
display: grid;
27+
gap: 1rem;
28+
align-items: center;
29+
margin: 15rem 0 5rem 0;
30+
mask-size: 100%;
31+
mask-image: radial-gradient(ellipse 110rem 500%, white, white 70%, transparent);
32+
}
33+
34+
h2 {
35+
width: 100%;
36+
text-align: center;
37+
margin: 0 auto;
38+
position: absolute;
39+
z-index: 2;
40+
filter: drop-shadow(0 0 1rem var(--sk-back-1)) drop-shadow(0 0 1rem var(--sk-back-1));
41+
padding: 0 var(--sk-page-padding-side);
42+
}
43+
44+
.wing {
45+
position: relative;
46+
height: 4rem;
47+
}
48+
49+
.logos {
50+
display: flex;
51+
height: 100%;
52+
align-items: center;
53+
top: 0;
54+
gap: 4rem;
55+
opacity: 0.5;
56+
57+
.wing:first-child & {
58+
right: 0;
59+
}
60+
61+
.wing:last-child & {
62+
left: 0;
63+
}
64+
65+
img {
66+
height: 100%;
67+
width: auto;
68+
}
69+
}
70+
71+
@media (min-width: 800px) {
72+
.companies {
73+
grid-template-columns: 1fr auto 1fr;
74+
align-items: center;
75+
}
76+
77+
h2 {
78+
position: relative;
79+
width: 12em;
80+
}
81+
82+
.logos {
83+
position: absolute;
84+
}
85+
}
86+
</style>

0 commit comments

Comments
 (0)