add basics
This commit is contained in:
parent
50453979c1
commit
d94a520ec0
File diff suppressed because it is too large
Load Diff
50
package.json
50
package.json
|
|
@ -1,24 +1,30 @@
|
|||
{
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "svelte-kit dev",
|
||||
"build": "svelte-kit build --verbose",
|
||||
"preview": "svelte-kit preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-vercel": "next",
|
||||
"@sveltejs/kit": "next",
|
||||
"svelte": "^3.38.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"prettier": "^2.3.2",
|
||||
"prettier-plugin-svelte": "^2.3.1"
|
||||
},
|
||||
"prettier": {
|
||||
"arrowParens": "always",
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "svelte-kit dev",
|
||||
"build": "svelte-kit build --verbose",
|
||||
"preview": "svelte-kit preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-vercel": "next",
|
||||
"@sveltejs/kit": "next",
|
||||
"autoprefixer": "^10.3.1",
|
||||
"cssnano": "^5.0.6",
|
||||
"postcss": "^8.3.5",
|
||||
"postcss-load-config": "^3.1.0",
|
||||
"svelte": "^3.38.3",
|
||||
"svelte-preprocess": "^4.7.4",
|
||||
"tailwindcss": "^2.2.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"prettier": "^2.3.2",
|
||||
"prettier-plugin-svelte": "^2.3.1"
|
||||
},
|
||||
"prettier": {
|
||||
"arrowParens": "always",
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
const tailwindcss = require("tailwindcss");
|
||||
const autoprefixer = require("autoprefixer");
|
||||
const cssnano = require("cssnano");
|
||||
|
||||
const mode = process.env.NODE_ENV;
|
||||
const dev = mode === "development";
|
||||
|
||||
const config = {
|
||||
plugins: [
|
||||
//Some plugins, like postcss-nested, need to run before Tailwind,
|
||||
tailwindcss(),
|
||||
//But others, like autoprefixer, need to run after,
|
||||
autoprefixer(),
|
||||
!dev && cssnano({
|
||||
preset: "default",
|
||||
})
|
||||
],
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
13
src/app.html
13
src/app.html
|
|
@ -5,25 +5,24 @@
|
|||
<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>
|
||||
<title>Statpixel</title>
|
||||
<meta
|
||||
content="SvelteKit app fetching data from the SpaceX GraphQL API, deployed to Vercel."
|
||||
content="A website for hypixel stats"
|
||||
name="description"
|
||||
/>
|
||||
<meta
|
||||
property="og:title"
|
||||
content="SpaceX Launches | SvelteKit and Vercel"
|
||||
content="Statpixel"
|
||||
/>
|
||||
<meta property="og:image" content="/twitter.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@vercel" />
|
||||
<meta name="twitter:site" content="@zeromomentum121" />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content="SpaceX Launches | SvelteKit and Vercel"
|
||||
content="Statpixel"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="SvelteKit app fetching data from the SpaceX GraphQL API, deployed to Vercel."
|
||||
content="A website for hypixel stats"
|
||||
/>
|
||||
<meta name="twitter:image" content="/twitter.png" />
|
||||
%svelte.head%
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
@tailwind base;
|
||||
/* Write your global styles here, in PostCSS syntax */
|
||||
@tailwind components;
|
||||
@tailwind utilities
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<script>import "../app.postcss";</script>
|
||||
<slot></slot>
|
||||
|
|
@ -1,80 +1,21 @@
|
|||
<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
|
||||
}
|
||||
}
|
||||
}`
|
||||
})
|
||||
});
|
||||
import { goto } from '$app/navigation'
|
||||
let ign;
|
||||
|
||||
if (res.ok) {
|
||||
const { data } = await res.json();
|
||||
return {
|
||||
props: {
|
||||
launches: data.launchesPast
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status: res.status,
|
||||
error: new Error(`Error fetching GraphQL data`)
|
||||
};
|
||||
function redir() {
|
||||
goto(`https://25karma.xyz/player/${ign}`)
|
||||
}
|
||||
</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>
|
||||
<h1>Statpixel</h1>
|
||||
|
||||
<form on:submit|preventDefault={redir}>
|
||||
<input bind:value={ign} placeholder="Enter your IGN">
|
||||
<button type="submit">Go</button>
|
||||
</form>
|
||||
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
Created with <a
|
||||
|
|
@ -90,7 +31,7 @@
|
|||
</p>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
<!-- <style>
|
||||
:global(body) {
|
||||
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
|
||||
monospace;
|
||||
|
|
@ -140,4 +81,4 @@
|
|||
.link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</style> -->
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import preprocess from "svelte-preprocess";
|
||||
import vercel from '@sveltejs/adapter-vercel';
|
||||
|
||||
export default {
|
||||
|
|
@ -5,4 +6,8 @@ export default {
|
|||
adapter: vercel(),
|
||||
target: '#svelte',
|
||||
},
|
||||
preprocess: [preprocess({
|
||||
"postcss": true
|
||||
})]
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
const config = {
|
||||
mode: "jit",
|
||||
purge: [
|
||||
"./src/**/*.{html,js,svelte,ts}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
Loading…
Reference in New Issue