mirror of
https://github.com/LukeHagar/vercel.git
synced 2025-12-09 04:22:07 +00:00
[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
34
examples/sveltekit/src/app.html
Normal file
34
examples/sveltekit/src/app.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="robots" content="follow, index" />
|
||||
<title>SpaceX Launches | SvelteKit and Vercel</title>
|
||||
<meta
|
||||
content="SvelteKit app fetching data from the SpaceX GraphQL API, deployed to Vercel."
|
||||
name="description"
|
||||
/>
|
||||
<meta
|
||||
property="og:title"
|
||||
content="SpaceX Launches | SvelteKit and Vercel"
|
||||
/>
|
||||
<meta property="og:image" content="/twitter.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@vercel" />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content="SpaceX Launches | SvelteKit and Vercel"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="SvelteKit app fetching data from the SpaceX GraphQL API, deployed to Vercel."
|
||||
/>
|
||||
<meta name="twitter:image" content="/twitter.png" />
|
||||
%svelte.head%
|
||||
</head>
|
||||
<body>
|
||||
<div id="svelte">%svelte.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
1
examples/sveltekit/src/global.d.ts
vendored
Normal file
1
examples/sveltekit/src/global.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="@sveltejs/kit" />
|
||||
143
examples/sveltekit/src/routes/index.svelte
Normal file
143
examples/sveltekit/src/routes/index.svelte
Normal file
@@ -0,0 +1,143 @@
|
||||
<script context="module">
|
||||
export async function load({ fetch }) {
|
||||
const res = await fetch('https://api.spacex.land/graphql', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: `{
|
||||
launchesPast(limit: 10) {
|
||||
mission_name
|
||||
launch_date_local
|
||||
links {
|
||||
video_link
|
||||
}
|
||||
}
|
||||
}`
|
||||
})
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const { data } = await res.json();
|
||||
return {
|
||||
props: {
|
||||
launches: data.launchesPast
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status: res.status,
|
||||
error: new Error(`Error fetching GraphQL data`)
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export let launches;
|
||||
</script>
|
||||
|
||||
<h1>SpaceX Launches</h1>
|
||||
<p>
|
||||
This is an example <a
|
||||
class="link"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://svelte.dev">SvelteKit</a
|
||||
>
|
||||
application fetching GraphQL data from the public
|
||||
<a
|
||||
class="link"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://api.spacex.land/graphql">SpaceX API</a
|
||||
>. View source on
|
||||
<a
|
||||
class="link"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://github.com/leerob/sveltekit-graphql">GitHub</a
|
||||
>.
|
||||
</p>
|
||||
<ul>
|
||||
{#each launches as launch}
|
||||
<li>
|
||||
<a
|
||||
class="card-link"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href={launch.links.video_link}
|
||||
>
|
||||
<h2>{launch.mission_name}</h2>
|
||||
<p>{new Date(launch.launch_date_local).toLocaleString()}</p>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<footer>
|
||||
<p>
|
||||
Created with <a
|
||||
class="link"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://svelte.dev">SvelteKit</a
|
||||
>
|
||||
and deployed with
|
||||
<a class="link" target="_blank" rel="noopener" href="https://vercel.com"
|
||||
>▲ Vercel</a
|
||||
>.
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
background-color: #fafafa;
|
||||
max-width: 650px;
|
||||
margin: 32px auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
h1 {
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: 32px;
|
||||
}
|
||||
li {
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
background-color: white;
|
||||
transition: 0.15s box-shadow ease-in-out;
|
||||
}
|
||||
li:hover {
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
a {
|
||||
color: #0070f3;
|
||||
text-decoration: none;
|
||||
}
|
||||
.card-link {
|
||||
padding: 8px 24px;
|
||||
display: block;
|
||||
}
|
||||
.link {
|
||||
transition: 0.15s text-decoration ease-in-out;
|
||||
color: #0761d1;
|
||||
}
|
||||
.link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user