Skip to content

Commit 065edc4

Browse files
nonlin-lin-chaos-order-etc-etalnonlin-lin-chaos-order-etc-etal
committed
Initial commit
Created from https://vercel.com/new
0 parents  commit 065edc4

12 files changed

+461
-0
lines changed

‎.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.DS_Store
2+
node_modules
3+
/.svelte-kit
4+
/package
5+
.vercel_build_output
6+
.vercel

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
engine-strict=true

‎README.md

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# SvelteKit
2+
3+
Example project using SvelteKit with the [SpaceX GraphQL API](https://api.spacex.land/graphql/), deployed to [Vercel](https://vercel.com).
4+
5+
## Deploy Your Own
6+
7+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fvercel%2Ftree%2Fmain%2Fexamples%2Fsveltekit&project-name=sveltekit-vercel&repository-name=sveltekit-vercel&demo-title=SvelteKit%20%2B%20Vercel&demo-description=SvelteKit%20app%20fetching%20data%20from%20the%20SpaceX%20GraphQL%20API.&demo-url=https%3A%2F%2Fsveltekit.examples.vercel.com%2F&demo-image=https%3A%2F%2Fsveltekit.examples.vercel.com%2Ftwitter.png)
8+
9+
_Live Example: https://sveltekit.examples.vercel.com_
10+
11+
## Developing
12+
13+
Once you've created a project and installed dependencies with `npm install`, start a development server:
14+
15+
```bash
16+
npm run dev
17+
18+
# or start the server and open the app in a new browser tab
19+
npm run dev -- --open
20+
```
21+
22+
## Building
23+
24+
This uses the [Vercel Adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-vercel) for SvelteKit.
25+
26+
```bash
27+
npm run build
28+
```

‎jsconfig.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"paths": {
5+
"$lib": ["src/lib"],
6+
"$lib/*": ["src/lib/*"]
7+
}
8+
},
9+
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
10+
}

‎package.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"private": true,
3+
"type": "module",
4+
"scripts": {
5+
"dev": "svelte-kit dev",
6+
"build": "svelte-kit build --verbose",
7+
"preview": "svelte-kit preview"
8+
},
9+
"devDependencies": {
10+
"@sveltejs/adapter-vercel": "next",
11+
"@sveltejs/kit": "next",
12+
"svelte": "^3.38.3"
13+
},
14+
"dependencies": {
15+
"prettier": "^2.3.2",
16+
"prettier-plugin-svelte": "^2.3.1"
17+
},
18+
"prettier": {
19+
"arrowParens": "always",
20+
"singleQuote": true,
21+
"tabWidth": 2,
22+
"trailingComma": "none"
23+
}
24+
}

‎src/app.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="/favicon.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="robots" content="follow, index" />
8+
<title>SpaceX Launches | SvelteKit and Vercel</title>
9+
<meta
10+
content="SvelteKit app fetching data from the SpaceX GraphQL API, deployed to Vercel."
11+
name="description"
12+
/>
13+
<meta
14+
property="og:title"
15+
content="SpaceX Launches | SvelteKit and Vercel"
16+
/>
17+
<meta property="og:image" content="/twitter.png" />
18+
<meta name="twitter:card" content="summary_large_image" />
19+
<meta name="twitter:site" content="@vercel" />
20+
<meta
21+
name="twitter:title"
22+
content="SpaceX Launches | SvelteKit and Vercel"
23+
/>
24+
<meta
25+
name="twitter:description"
26+
content="SvelteKit app fetching data from the SpaceX GraphQL API, deployed to Vercel."
27+
/>
28+
<meta name="twitter:image" content="/twitter.png" />
29+
%svelte.head%
30+
</head>
31+
<body>
32+
<div id="svelte">%svelte.body%</div>
33+
</body>
34+
</html>

‎src/global.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="@sveltejs/kit" />

‎src/routes/index.svelte

+143
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<script context="module">
2+
export async function load({ fetch }) {
3+
const res = await fetch('https://api.spacex.land/graphql', {
4+
method: 'POST',
5+
headers: {
6+
'Content-Type': 'application/json'
7+
},
8+
body: JSON.stringify({
9+
query: `{
10+
launchesPast(limit: 10) {
11+
mission_name
12+
launch_date_local
13+
links {
14+
video_link
15+
}
16+
}
17+
}`
18+
})
19+
});
20+
21+
if (res.ok) {
22+
const { data } = await res.json();
23+
return {
24+
props: {
25+
launches: data.launchesPast
26+
}
27+
};
28+
}
29+
30+
return {
31+
status: res.status,
32+
error: new Error(`Error fetching GraphQL data`)
33+
};
34+
}
35+
</script>
36+
37+
<script>
38+
export let launches;
39+
</script>
40+
41+
<h1>SpaceX Launches</h1>
42+
<p>
43+
This is an example <a
44+
class="link"
45+
target="_blank"
46+
rel="noopener"
47+
href="https://svelte.dev">SvelteKit</a
48+
>
49+
application fetching GraphQL data from the public
50+
<a
51+
class="link"
52+
target="_blank"
53+
rel="noopener"
54+
href="https://api.spacex.land/graphql">SpaceX API</a
55+
>. View source on
56+
<a
57+
class="link"
58+
target="_blank"
59+
rel="noopener"
60+
href="https://github.com/leerob/sveltekit-graphql">GitHub</a
61+
>.
62+
</p>
63+
<ul>
64+
{#each launches as launch}
65+
<li>
66+
<a
67+
class="card-link"
68+
target="_blank"
69+
rel="noopener"
70+
href={launch.links.video_link}
71+
>
72+
<h2>{launch.mission_name}</h2>
73+
<p>{new Date(launch.launch_date_local).toLocaleString()}</p>
74+
</a>
75+
</li>
76+
{/each}
77+
</ul>
78+
<footer>
79+
<p>
80+
Created with <a
81+
class="link"
82+
target="_blank"
83+
rel="noopener"
84+
href="https://svelte.dev">SvelteKit</a
85+
>
86+
and deployed with
87+
<a class="link" target="_blank" rel="noopener" href="https://vercel.com"
88+
>▲ Vercel</a
89+
>.
90+
</p>
91+
</footer>
92+
93+
<style>
94+
:global(body) {
95+
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
96+
monospace;
97+
background-color: #fafafa;
98+
max-width: 650px;
99+
margin: 32px auto;
100+
padding: 0 16px;
101+
}
102+
h1 {
103+
letter-spacing: -0.025em;
104+
}
105+
h2 {
106+
font-size: 18px;
107+
}
108+
ul {
109+
list-style: none;
110+
padding: 0;
111+
margin-top: 32px;
112+
}
113+
li {
114+
border: 1px solid #eaeaea;
115+
border-radius: 8px;
116+
margin-bottom: 16px;
117+
background-color: white;
118+
transition: 0.15s box-shadow ease-in-out;
119+
}
120+
li:hover {
121+
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
122+
}
123+
p {
124+
color: #666;
125+
font-size: 14px;
126+
line-height: 1.75;
127+
}
128+
a {
129+
color: #0070f3;
130+
text-decoration: none;
131+
}
132+
.card-link {
133+
padding: 8px 24px;
134+
display: block;
135+
}
136+
.link {
137+
transition: 0.15s text-decoration ease-in-out;
138+
color: #0761d1;
139+
}
140+
.link:hover {
141+
text-decoration: underline;
142+
}
143+
</style>

‎static/favicon.png

1.53 KB
Loading

‎static/twitter.png

190 KB
Loading

‎svelte.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import vercel from '@sveltejs/adapter-vercel';
2+
3+
export default {
4+
kit: {
5+
adapter: vercel(),
6+
target: '#svelte',
7+
},
8+
};

0 commit comments

Comments
 (0)