[frameworks][examples] Add support for zero-config SvelteKit (#6482)

While we already have support for [SvelteKit](https://sveltekit-delta.vercel.app) on Vercel with the [File System API](https://vercel.com/docs/more/adding-your-framework), this makes the Svelte logo show up and adds an example. I also updated the Svelte example to match their default template and guide the user to use SvelteKit if they want functions.

https://sveltekit.examples.vercel.com
This commit is contained in:
Lee Robinson
2021-07-23 09:17:22 -05:00
committed by GitHub
parent 868fc6159c
commit 8950cd9685
22 changed files with 785 additions and 283 deletions

View File

@@ -1,48 +1,30 @@
<script>
import { onMount } from "svelte";
export let date;
onMount(async () => {
const res = await fetch("/api/date");
const newDate = await res.text();
date = newDate;
});
export let name;
</script>
<main>
<h1>Svelte + Node.js API</h1>
<h2>
Deployed with
<a href="https://vercel.com/docs" target="_blank" rel="noreferrer noopener">
Vercel
</a>
!
</h2>
<p>
<a
href="https://github.com/vercel/vercel/tree/main/examples/svelte"
target="_blank"
rel="noreferrer noopener">
This project
</a>
is a
<a href="https://svelte.dev/">Svelte</a>
app with three directories,
<code>/public</code>
for static assets,
<code>/src</code>
for components and content, and
<code>/api</code>
which contains a serverless
<a href="https://nodejs.org/en/">Node.js</a>
function. See
<a href="/api/date">
<code>api/date</code>
for the Date API with Node.js
</a>
.
</p>
<br />
<h2>The date according to Node.js is:</h2>
<p>{date ? date : 'Loading date...'}</p>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>