add basics

package.json

@@ -1,24 +1,30 @@
 {
-  "private": true,
+	"private": true,
-  "type": "module",
+	"type": "module",
-  "scripts": {
+	"scripts": {
-    "dev": "svelte-kit dev",
+		"dev": "svelte-kit dev",
-    "build": "svelte-kit build --verbose",
+		"build": "svelte-kit build --verbose",
-    "preview": "svelte-kit preview"
+		"preview": "svelte-kit preview"
-  },
+	},
-  "devDependencies": {
+	"devDependencies": {
-    "@sveltejs/adapter-vercel": "next",
+		"@sveltejs/adapter-vercel": "next",
-    "@sveltejs/kit": "next",
+		"@sveltejs/kit": "next",
-    "svelte": "^3.38.3"
+		"autoprefixer": "^10.3.1",
-  },
+		"cssnano": "^5.0.6",
-  "dependencies": {
+		"postcss": "^8.3.5",
-    "prettier": "^2.3.2",
+		"postcss-load-config": "^3.1.0",
-    "prettier-plugin-svelte": "^2.3.1"
+		"svelte": "^3.38.3",
-  },
+		"svelte-preprocess": "^4.7.4",
-  "prettier": {
+		"tailwindcss": "^2.2.4"
-    "arrowParens": "always",
+	},
-    "singleQuote": true,
+	"dependencies": {
-    "tabWidth": 2,
+		"prettier": "^2.3.2",
-    "trailingComma": "none"
+		"prettier-plugin-svelte": "^2.3.1"
-  }
+	},
+	"prettier": {
+		"arrowParens": "always",
+		"singleQuote": true,
+		"tabWidth": 2,
+		"trailingComma": "none"
+	}
 }

postcss.config.cjs

@@ -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;

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%

src/app.postcss

@@ -0,0 +1,4 @@
+@tailwind base;
+/* Write your global styles here, in PostCSS syntax */
+@tailwind components;
+@tailwind utilities

src/routes/__layout.svelte

@@ -0,0 +1,2 @@
+<script>import "../app.postcss";</script>
+<slot></slot>

src/routes/index.svelte

@@ -1,80 +1,21 @@
 <script context="module">
-  export async function load({ fetch }) {
+  import { goto } from '$app/navigation'
-    const res = await fetch('https://api.spacex.land/graphql', {
+  let ign;
-      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) {
+  function redir() {
-      const { data } = await res.json();
+    goto(`https://25karma.xyz/player/${ign}`)
-      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>
+<h1>Statpixel</h1>
-<p>
+
-  This is an example <a
+<form on:submit|preventDefault={redir}> 
-    class="link"
+  <input bind:value={ign} placeholder="Enter your IGN"> 
-    target="_blank"
+  <button type="submit">Go</button>
-    rel="noopener"
+</form>
-    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
@@ -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> -->

svelte.config.js

@@ -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
+  })]
 };
+

tailwind.config.cjs

@@ -0,0 +1,12 @@
+const config = {
+	mode: "jit",
+	purge: [
+		"./src/**/*.{html,js,svelte,ts}",
+	],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};
+
+module.exports = config;