Skip to content

Commit

Permalink
Revert "Revert "Add marketing material to SvelteKit homepage (#72)" (#74
Browse files Browse the repository at this point in the history 
)"

This reverts commit eef420a.
  • Loading branch information
@Rich-Harris @benmccann
Rich-Harris authored and benmccann committed Dec 31, 2021
1 parent 0464053 commit 90ca454
Show file tree
Hide file tree
Showing 2 changed files with 194 additions and 5 deletions.
Binary file added sites/kit.svelte.dev/src/images/page-speed.webp
View file
Binary file not shown.
199 changes: 194 additions & 5 deletions sites/kit.svelte.dev/src/routes/index.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,51 @@

<script>
import Machine from '$img/svelte-kit-machine.webp?w=1440;800&format=avif;webp;png&meta'
import { Hero, Blurb } from '@sveltejs/site-kit';
import PageSpeed from '$img/page-speed.webp?format=avif;webp;png&meta'
import { Blurb, Hero } from '@sveltejs/site-kit';
const groupBy = (items, key) => items.reduce(
(result, item) => ({
...result,
[item[key]]: [
...(result[item[key]] || []),
item,
],
}),
{},
);
const imageGroups = Object.values(groupBy(PageSpeed, 'format'));
// adapter animation
const adapters = Object.entries({
'Vercel': '@sveltejs/adapter-vercel',
'Netlify': '@sveltejs/adapter-netlify',
'Cloudflare': '@sveltejs/adapter-cloudflare',
'your own server': '@sveltejs/adapter-node',
'static hosting': '@sveltejs/adapter-static',
'Firebase': 'svelte-adapter-firebase',
'Deno': 'svelte-adapter-deno',
'AppEngine': 'svelte-adapter-appengine'
});
let i = 0;
let host;
let adapter;
function updateAdapter() {
[host, adapter] = adapters[i];
i = (i + 1) % adapters.length;
setTimeout(updateAdapter, 1500);
}
updateAdapter();
// page speed widget
let url = '';
function openPageSpeed() {
window.open(`https://pagespeed.web.dev/report?url=${encodeURIComponent(url)}`);
}
</script>

<svelte:head>
Expand Down Expand Up @@ -74,10 +118,7 @@
</p>

<p>
Read the <a href="https://svelte.dev/blog/whats-the-deal-with-sveltekit" class="cta"
>introductory blog</a
>
post to learn more.
<a href="https://node.new/sveltekit">Try on StackBlitz</a> or create a project locally.
</p>
</div>

Expand All @@ -93,6 +134,113 @@ npm run dev -- --open
</Blurb>
</div>

<div class="section page-speed">
<h3>Fast By Default</h3>

<p>SvelteKit builds instant, optimized bundles with the Svelte compiler and code-splitting.</p>

<div style="margin:1em 0">
<picture>
{#each imageGroups as imageGroup}
<source type={'image/' + imageGroup[0].format} srcset={imageGroup.map(image => `${image.src} ${image.width === 787 ? '1x' : '2x'}`).join(', ')}/>
{#if imageGroup[0].format === 'png'}
<img src={imageGroup[0].src} alt="Perfect Google Page Speed Score of 100" />
{/if}
{/each}
</picture>
</div>
</div>

<div class="section adapters">
<h3>Deploy Anywhere</h3>

Deploy to {host}

<pre class="code"><code>import adapter from '{adapter}';

export default &#123;
kit: &#123;
adapter: adapter()
}
}</code></pre>
</div>

<div id="features" class="section">
<div>
<h4>🛠️ SSR, SPA, SSG, and In-Between</h4>
<p>Generate HTML on the server or client at build-time or run-time.</p>
<a href="/docs#ssr-and-javascript">Documentation →</a>
</div>

<div>
<h4>⚡️ Lightning Fast Code Changes</h4>
<p>Instant Hot Module Replacement (HMR) regardless of app size.</p>
<a href="/docs#introduction-what-is-sveltekit">Documentation →</a>
</div>

<div>
<h4>🔩 Existing Universe of Plugins</h4>
<p>Use Vite and Rollup plugins to customize your build.</p>
<a href="/docs#configuration-vite">Documentation →</a>
</div>

<div>
<h4>🚀 File System Routing</h4>
<p>Routing with navigation that is instantaneous for an app-like feel.</p>
<a href="/docs#routing">Documentation →</a>
</div>

<div>
<h4>🔍 SEO Optimized</h4>
<p>SSR and dynamic rendering for full seach engine support.</p>
<a href="/docs#ssr-and-javascript">Documentation →</a>
</div>

<div>
<h4>🔑 IDE and TypeScript Support</h4>
<p>Officially supported IDE extension and type definitions in every package.</p>
<a href="/docs#introduction-getting-started">Documentation →</a>
</div>

<div>
<h4>💡 Single-Line Integrations</h4>
<p>Easily setup Tailwind, PostCSS, Sass, Less, Jest and much more.</p>
<a href="/docs#additional-resources-integrations">Documentation →</a>
</div>

<div>
<h4>🏗 Build Your Backend</h4>
<p>Build API endpoints in SvelteKit or fetch data from another server.</p>
<a href="/docs#routing-endpoints">Documentation →</a>
</div>


<div>
<h4>📶 Offline Support</h4>
<p>Service worker support for building offline functionality and PWAs.</p>
<a href="/docs#modules-$service-worker">Documentation →</a>
</div>


<div>
<h4>💨 Prefetching</h4>
<p>Fetch resources for a page as soon as the user hovers a link.</p>
<a href="/docs#anchor-options-sveltekit-prefetch">Documentation →</a>
</div>

<div>
<h4>📦 Library Packaging</h4>
<p>Preview reusable components in the browser and package them up.</p>
<a href="/docs#packaging">Documentation →</a>
</div>

<div>
<h4>👪 A Vibrant Community</h4>
<p>Leverage community solutions for i18n, image optimization, and more.</p>
<a href="https://sveltesociety.dev/">Community →</a>
</div>
</div>

<style>
:global(.hero-container:dir(rtl)) {
max-inline-size: 116rem;
Expand All @@ -105,6 +253,14 @@ npm run dev -- --open
color: var(--second-text);
}
.code {
max-width: 525px;
text-align: left;
padding: 1em;
background: var(--back-light);
box-shadow: inset 1px 1px 3px rgba(81, 81, 81, 0.2);
}
.orange-highlight {
color: var(--prime);
}
Expand All @@ -118,4 +274,37 @@ npm run dev -- --open
margin-block-start: -12em;
}
}
.section {
position: relative;
margin: 0 auto 10rem auto;
padding: 0 var(--side-nav);
max-width: 120rem;
}
.page-speed {
text-align: center;
}
.adapters {
max-width: 525px;
text-align: center;
}
h3 {
margin-bottom: 0.8rem;
}
#features {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 3.5em 5em;
grid-template-areas:
". ."
". .";
}
#features h4 {
margin-bottom: 0.8rem;
}
</style>

0 comments on commit 90ca454

Please sign in to comment.