Add files

2021-07-05 03:03:21 -04:00 · 2021-07-05 03:03:21 -04:00 · 57e73bb0d8
commit 57e73bb0d8
37 changed files with 7497 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+public/build
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
--- a/.idea/booru.iml
+++ b/.idea/booru.iml
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/booru.iml" filepath="$PROJECT_DIR$/.idea/booru.iml" />
+    </modules>
+  </component>
+</project>
--- a/.routify/config.js
+++ b/.routify/config.js
@ -0,0 +1,18 @@
+module.exports = {
+  "pages": "src/pages",
+  "sourceDir": "public",
+  "routifyDir": ".routify",
+  "ignore": "",
+  "dynamicImports": true,
+  "singleBuild": false,
+  "noHashScroll": false,
+  "distDir": "dist",
+  "hashScroll": true,
+  "extensions": [
+    "html",
+    "svelte",
+    "md",
+    "svx"
+  ],
+  "started": "2021-07-05T07:02:17.932Z"
+}
--- a/.routify/routes.js
+++ b/.routify/routes.js
@ -0,0 +1,264 @@
+
+/**
+ * @roxi/routify 2.18.0
+ * File generated Mon Jul 05 2021 03:02:17 GMT-0400 (Eastern Daylight Time)
+ */
+
+export const __version = "2.18.0"
+export const __timestamp = "2021-07-05T07:02:17.946Z"
+
+//buildRoutes
+import { buildClientTree } from "@roxi/routify/runtime/buildRoutes"
+
+//imports
+
+
+//options
+export const options = {}
+
+//tree
+export const _tree = {
+  "name": "root",
+  "filepath": "/",
+  "root": true,
+  "ownMeta": {},
+  "absolutePath": "src/pages",
+  "children": [
+    {
+      "isFile": true,
+      "isDir": false,
+      "file": "_fallback.svelte",
+      "filepath": "/_fallback.svelte",
+      "name": "_fallback",
+      "ext": "svelte",
+      "badExt": false,
+      "absolutePath": "/Users/riley/booru/src/pages/_fallback.svelte",
+      "importPath": "../src/pages/_fallback.svelte",
+      "isLayout": false,
+      "isReset": false,
+      "isIndex": false,
+      "isFallback": true,
+      "isPage": false,
+      "ownMeta": {},
+      "meta": {
+        "recursive": true,
+        "preload": false,
+        "prerender": true
+      },
+      "path": "/_fallback",
+      "id": "__fallback",
+      "component": () => import('../src/pages/_fallback.svelte').then(m => m.default)
+    },
+    {
+      "isFile": false,
+      "isDir": true,
+      "file": "admin",
+      "filepath": "/admin",
+      "name": "admin",
+      "ext": "",
+      "badExt": false,
+      "absolutePath": "/Users/riley/booru/src/pages/admin",
+      "children": [
+        {
+          "isFile": true,
+          "isDir": false,
+          "file": "index.svelte",
+          "filepath": "/admin/index.svelte",
+          "name": "index",
+          "ext": "svelte",
+          "badExt": false,
+          "absolutePath": "/Users/riley/booru/src/pages/admin/index.svelte",
+          "importPath": "../src/pages/admin/index.svelte",
+          "isLayout": false,
+          "isReset": false,
+          "isIndex": true,
+          "isFallback": false,
+          "isPage": true,
+          "ownMeta": {},
+          "meta": {
+            "recursive": true,
+            "preload": false,
+            "prerender": true
+          },
+          "path": "/admin/index",
+          "id": "_admin_index",
+          "component": () => import('../src/pages/admin/index.svelte').then(m => m.default)
+        }
+      ],
+      "isLayout": false,
+      "isReset": false,
+      "isIndex": false,
+      "isFallback": false,
+      "isPage": false,
+      "ownMeta": {},
+      "meta": {
+        "recursive": true,
+        "preload": false,
+        "prerender": true
+      },
+      "path": "/admin"
+    },
+    {
+      "isFile": false,
+      "isDir": true,
+      "file": "error",
+      "filepath": "/error",
+      "name": "error",
+      "ext": "",
+      "badExt": false,
+      "absolutePath": "/Users/riley/booru/src/pages/error",
+      "children": [
+        {
+          "isFile": true,
+          "isDir": false,
+          "file": "_fallback.svelte",
+          "filepath": "/error/_fallback.svelte",
+          "name": "_fallback",
+          "ext": "svelte",
+          "badExt": false,
+          "absolutePath": "/Users/riley/booru/src/pages/error/_fallback.svelte",
+          "importPath": "../src/pages/error/_fallback.svelte",
+          "isLayout": false,
+          "isReset": false,
+          "isIndex": false,
+          "isFallback": true,
+          "isPage": false,
+          "ownMeta": {},
+          "meta": {
+            "recursive": true,
+            "preload": false,
+            "prerender": true
+          },
+          "path": "/error/_fallback",
+          "id": "_error__fallback",
+          "component": () => import('../src/pages/error/_fallback.svelte').then(m => m.default)
+        }
+      ],
+      "isLayout": false,
+      "isReset": false,
+      "isIndex": false,
+      "isFallback": false,
+      "isPage": false,
+      "ownMeta": {},
+      "meta": {
+        "recursive": true,
+        "preload": false,
+        "prerender": true
+      },
+      "path": "/error"
+    },
+    {
+      "isFile": true,
+      "isDir": false,
+      "file": "index.svelte",
+      "filepath": "/index.svelte",
+      "name": "index",
+      "ext": "svelte",
+      "badExt": false,
+      "absolutePath": "/Users/riley/booru/src/pages/index.svelte",
+      "importPath": "../src/pages/index.svelte",
+      "isLayout": false,
+      "isReset": false,
+      "isIndex": true,
+      "isFallback": false,
+      "isPage": true,
+      "ownMeta": {},
+      "meta": {
+        "recursive": true,
+        "preload": false,
+        "prerender": true
+      },
+      "path": "/index",
+      "id": "_index",
+      "component": () => import('../src/pages/index.svelte').then(m => m.default)
+    },
+    {
+      "isFile": false,
+      "isDir": true,
+      "file": "posts",
+      "filepath": "/posts",
+      "name": "posts",
+      "ext": "",
+      "badExt": false,
+      "absolutePath": "/Users/riley/booru/src/pages/posts",
+      "children": [
+        {
+          "isFile": true,
+          "isDir": false,
+          "file": "[id].svelte",
+          "filepath": "/posts/[id].svelte",
+          "name": "[id]",
+          "ext": "svelte",
+          "badExt": false,
+          "absolutePath": "/Users/riley/booru/src/pages/posts/[id].svelte",
+          "importPath": "../src/pages/posts/[id].svelte",
+          "isLayout": false,
+          "isReset": false,
+          "isIndex": false,
+          "isFallback": false,
+          "isPage": true,
+          "ownMeta": {},
+          "meta": {
+            "recursive": true,
+            "preload": false,
+            "prerender": true
+          },
+          "path": "/posts/:id",
+          "id": "_posts__id",
+          "component": () => import('../src/pages/posts/[id].svelte').then(m => m.default)
+        },
+        {
+          "isFile": true,
+          "isDir": false,
+          "file": "index.svelte",
+          "filepath": "/posts/index.svelte",
+          "name": "index",
+          "ext": "svelte",
+          "badExt": false,
+          "absolutePath": "/Users/riley/booru/src/pages/posts/index.svelte",
+          "importPath": "../src/pages/posts/index.svelte",
+          "isLayout": false,
+          "isReset": false,
+          "isIndex": true,
+          "isFallback": false,
+          "isPage": true,
+          "ownMeta": {},
+          "meta": {
+            "recursive": true,
+            "preload": false,
+            "prerender": true
+          },
+          "path": "/posts/index",
+          "id": "_posts_index",
+          "component": () => import('../src/pages/posts/index.svelte').then(m => m.default)
+        }
+      ],
+      "isLayout": false,
+      "isReset": false,
+      "isIndex": false,
+      "isFallback": false,
+      "isPage": false,
+      "ownMeta": {},
+      "meta": {
+        "recursive": true,
+        "preload": false,
+        "prerender": true
+      },
+      "path": "/posts"
+    }
+  ],
+  "isLayout": false,
+  "isReset": false,
+  "isIndex": false,
+  "isFallback": false,
+  "meta": {
+    "recursive": true,
+    "preload": false,
+    "prerender": true
+  },
+  "path": "/"
+}
+
+
+export const {tree, routes} = buildClientTree(_tree)
+
--- a/.routify/urlIndex.json
+++ b/.routify/urlIndex.json
@ -0,0 +1,5 @@
+[
+  "/admin/index",
+  "/index",
+  "/posts/index"
+]
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode", "bradlc.vscode-tailwindcss"]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,64 @@
+> This repo is now using `main` as the default branch.
+# Svelte + TS + Tailwind 2.1 app
+
+This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/colinbate/svelte-ts-tailwind-template and is based on the official Svelte template with TypeScript pre-enabled and Tailwind CSS configured. Uses Tailwind CSS 2.1 with the JIT compiler enabled. **The JIT feature is in preview and not tied to SemVer, so I've set it to 2.1.2 specifically.**
+
+> Note that this isn't a SvelteKit app, this is a vanilla Svelte template with the above mentioned technologies pre-installed.
+
+> ## Important
+> When building your project in a CI environment, or any other time you want to use `npm run build` you will need to make sure you don't have `NODE_ENV=development` as that will cause Tailwind to use a long running process. You can set `TAILWIND_MODE=build` to get around this without changing `NODE_ENV`. Also note that in many CI environments, setting `NODE_ENV=production` will mean that your `devDependencies` are not installed, which doesn't work for Svelte apps.
+
+To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npx degit colinbate/svelte-ts-tailwind-template svelte-app
+cd svelte-app
+```
+
+*Note that you will need to have [Node.js](https://nodejs.org) >=12.13 installed.*
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte-app
+npm install
+```
+
+...then start [Rollup](https://rollupjs.org):
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+
+By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+
+
+## Building and running in production mode
+
+To create an optimised version of the app:
+
+```bash
+npm run build
+```
+
+You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+
+
+## Single-page app mode
+
+By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
+
+If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
+
+```js
+"start": "sirv public --single"
+```
+
+## Using TypeScript
+
+TypeScript has already been enabled in this template.
+
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,41 @@
+{
+  "name": "svelte-ts-tailwind-app",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "run-p dev:*",
+    "dev:rollup": "rollup -c -w",
+    "dev:routify": "routify",
+    "build": "routify -b && rollup -c",
+    "start": "sirv public --single --host",
+    "validate": "svelte-check"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-typescript": "^8.2.1",
+    "@roxi/routify": "^2.18.0",
+    "@tsconfig/svelte": "^1.0.10",
+    "autoprefixer": "^10.2.5",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.2.13",
+    "postcss-load-config": "^3.0.1",
+    "rollup": "^2.46.0",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "svelte": "^3.37.0",
+    "svelte-check": "^1.5.2",
+    "svelte-preprocess": "^4.7.2",
+    "tailwindcss": "^2.0.4",
+    "tslib": "^2.2.0",
+    "typescript": "^4.2.4"
+  },
+  "dependencies": {
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
+    "@tailwindcss/forms": "^0.3.3",
+    "sirv-cli": "^1.0.11",
+    "svelte-fa": "^2.2.1",
+    "svelte-spa-router": "^3.1.0"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+  ]
+};
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width,initial-scale=1">
+
+	<title>Subooru</title>
+
+	<link rel="icon" type="image/png" href="favicon.png">
+	<link rel="stylesheet" href="/build/bundle.css">
+
+	<script defer type="module" src="/build/main.js"></script>
+</head>
+
+<body class="text-gray-800 bg-gray-200 dark:text-white dark:bg-gray-800" />
+</html>
--- a/rollup.config.js
+++ b/rollup.config.js
@ -0,0 +1,81 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';
+import css from 'rollup-plugin-css-only';
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+	let server;
+	
+	function toExit() {
+		if (server) server.kill(0);
+	}
+
+	return {
+		writeBundle() {
+			if (server) return;
+			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+				stdio: ['ignore', 'inherit', 'inherit'],
+				shell: true
+			});
+
+			process.on('SIGTERM', toExit);
+			process.on('exit', toExit);
+		}
+	};
+}
+
+export default {
+	input: 'src/main.ts',
+	output: {
+		sourcemap: !production,
+		format: 'esm',
+		dir: 'public/build',
+		chunkFileNames:`[name]${production && '-[hash]' || ''}.js`
+	},
+	plugins: [
+		svelte({
+			// enable run-time checks when not in production
+			compilerOptions: {
+				dev: !production,
+			},
+			preprocess: sveltePreprocess({
+				postcss: true,
+			}),
+		}),
+		// we'll extract any component CSS out into
+		// a separate file - better for performance
+		css({ output: 'bundle.css' }),
+		// If you have external dependencies installed from
+		// npm, you'll most likely need these plugins. In
+		// some cases you'll need additional configuration -
+		// consult the documentation for details:
+		// https://github.com/rollup/plugins/tree/master/packages/commonjs
+		resolve({
+			browser: true,
+			dedupe: ['svelte']
+		}),
+		commonjs(),
+		typescript({ sourceMap: !production }),
+
+		// In dev mode, call `npm run start` once
+		// the bundle has been generated
+		!production && serve(),
+
+		// Watch the `public` directory and refresh the
+		// browser on changes when not in production
+		!production && livereload('public'),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser()
+	],
+	watch: {
+		clearScreen: false
+	}
+};
--- a/src/App.svelte
+++ b/src/App.svelte
@ -0,0 +1,10 @@
+<script lang="ts">
+	import ModeSwitcher from './ModeSwitcher.svelte';
+	import Tailwindcss from './Tailwindcss.svelte';
+    import { Router } from "@roxi/routify";
+    import { routes } from "../.routify/routes";
+</script>
+
+<Tailwindcss />
+<ModeSwitcher />
+<Router {routes} />
--- a/src/Components/Button.svelte
+++ b/src/Components/Button.svelte
@ -0,0 +1,137 @@
+<script lang="ts">
+    export let gray = undefined, red = undefined, yellow = undefined, green = undefined, blue = undefined, indigo = undefined, purple = undefined, pink = undefined
+    export let rounded = undefined
+    export let smaller = undefined, small = undefined, base = undefined, large = undefined, larger = undefined
+    const button = true
+</script>
+<button type="button"
+        class:button
+        class:gray class:red class:yellow class:green class:blue class:indigo class:purple class:pink
+        class:no-color={!gray && !red && !yellow && !green && !blue && !indigo && !purple && !pink}
+        class:rounded
+        class:smaller class:small class:base class:large class:larger
+        class:no-size={!smaller && !small && !base && !large && !larger}
+        on:click
+        {...$$restProps}
+>
+    {#if $$slots.leading}
+        <span class="leading"><slot name="leading" /></span>
+    {/if}
+    <slot />
+    {#if $$slots.trailing}
+        <span class="trailing"><slot name="trailing" /></span>
+    {/if}
+</button>
+
+<style>
+    .smaller .leading, .small .leading
+    {
+        @apply -ml-0.5 mr-2 -mt-0.5 h-3.5 w-4;
+    }
+    .base .leading, .no-size .leading
+    {
+        @apply -ml-1 mr-2 -mt-0.5 h-4 w-5;
+    }
+    .large .leading, .larger .leading
+    {
+        @apply -ml-1 mr-3 -mt-0.5 h-4 w-5;
+    }
+
+    .smaller .trailing, .small .trailing
+    {
+        @apply ml-2 -mr-0.5 -mt-0.5 h-3.5 w-4;
+    }
+    .base .trailing, .no-size .trailing
+    {
+        @apply ml-2 -mr-1 -mt-0.5 h-4 w-5;
+    }
+    .large .trailing, .larger .trailing
+    {
+        @apply ml-3 -mr-1 -mt-0.5 h-4 w-5;
+    }
+
+    .button
+    {
+        @apply inline-flex items-center border border-transparent font-medium rounded-md shadow-sm text-white focus:outline-none focus:ring-2;
+    }
+    :global(.dark) .button /* Weirdo mode fix */
+    {
+        @apply ring-offset-black;
+    }
+    .gray
+    {
+        @apply bg-gray-600 hover:bg-gray-700 focus:ring-gray-500;
+    }
+    .red
+    {
+        @apply bg-red-600 hover:bg-red-700 focus:ring-red-500;
+    }
+    .yellow
+    {
+        @apply bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500;
+    }
+    .green
+    {
+        @apply bg-green-600 hover:bg-green-700 focus:ring-green-500;
+    }
+    .blue
+    {
+        @apply bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
+    }
+    .indigo
+    {
+        @apply bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500;
+    }
+    .purple
+    {
+        @apply bg-purple-600 hover:bg-purple-700 focus:ring-purple-500;
+    }
+    .pink
+    {
+        @apply bg-pink-600 hover:bg-pink-700 focus:ring-pink-500;
+    }
+    .rounded
+    {
+        @apply rounded-full;
+    }
+    .no-color
+    {
+        @apply gray;
+    }
+    .smaller
+    {
+        @apply px-2.5 py-1.5 text-xs;
+    }
+    .rounded.smaller
+    {
+        @apply px-3;
+    }
+    .small
+    {
+        @apply px-3 py-2 text-sm leading-4;
+    }
+    .rounded.small
+    {
+        @apply px-3.5;
+    }
+    .base, .rounded.base
+    {
+        @apply px-4 py-2 text-sm;
+    }
+    .large
+    {
+        @apply px-4 py-2 text-base;
+    }
+    .rounded.large
+    {
+        @apply px-5;
+    }
+    .larger, .rounded.larger
+    {
+        @apply px-6 py-3 text-base;
+    }
+    .no-size
+    {
+        @apply base;
+    }
+</style>
--- a/src/Layout/Footer.svelte
+++ b/src/Layout/Footer.svelte
@ -0,0 +1,7 @@
+<footer>Copyright &copy; {new Date().getFullYear()} Riley S.</footer>
+<style>
+    footer
+    {
+        grid-area: footer;
+    }
+</style>
--- a/src/Layout/Header.svelte
+++ b/src/Layout/Header.svelte
@ -0,0 +1,24 @@
+<script></script>
+<header>
+    <nav>
+        <ul>
+            <slot />
+        </ul>
+    </nav>
+</header>
+
+<style>
+    ul
+    {
+        @apply bg-gray-300 w-full flex items-center p-2;
+    }
+    :global(.dark) ul
+    {
+        @apply bg-gray-900
+    }
+    header
+    {
+        @apply p-0;
+        grid-area: header;
+    }
+</style>
--- a/src/Layout/Header/HeaderItem.svelte
+++ b/src/Layout/Header/HeaderItem.svelte
@ -0,0 +1,7 @@
+<script></script>
+
+<li><slot /></li>
+
+<style>
+    li { @apply p-2; }
+</style>
--- a/src/Layout/MainLayout.svelte
+++ b/src/Layout/MainLayout.svelte
@ -0,0 +1,61 @@
+<script>
+    import Footer from "./Footer.svelte";
+    import SidebarItem from "./Sidebar/SidebarItem.svelte";
+    import Header from "./Header.svelte";
+
+    import Fa from 'svelte-fa'
+    import {faImage} from '@fortawesome/free-regular-svg-icons'
+    import HeaderItem from "./Header/HeaderItem.svelte";
+</script>
+
+<div class="container">
+    <Header>
+        <HeaderItem>
+            <span class="sr-only">Logo</span>
+            <Fa fw icon="{faImage}" size="2x"/>
+        </HeaderItem>
+        <HeaderItem>Posts</HeaderItem>
+        <HeaderItem>Comments</HeaderItem>
+        <slot name="header" />
+        <HeaderItem>END ITEM</HeaderItem>
+    </Header>
+    <aside>
+        <SidebarItem title="Navigation">YO YO</SidebarItem>
+        <slot name="sidebar" />
+        <SidebarItem title="Log In"></SidebarItem>
+    </aside>
+    <main><slot /></main>
+    <Footer/>
+</div>
+
+
+<style>
+    .container {
+        display: grid;
+        min-width: 100vw;
+        min-height: 100vh;
+        grid-template-columns: 1fr 5fr;
+        grid-template-rows: auto 1fr auto;
+        grid-template-areas:
+                "header header"
+                "sidebar content"
+                "footer footer";
+        grid-gap: 1rem;
+    }
+
+    .container main {
+        grid-area: content;
+    }
+
+    .container aside {
+        grid-area: sidebar;
+    }
+
+    :global(.dark) .container > * {
+        border: 1px solid #ddd;
+    }
+    .container > * {
+        border: 1px solid #333;
+        padding: 1rem;
+    }
+</style>
--- a/src/Layout/Sidebar/SidebarItem.svelte
+++ b/src/Layout/Sidebar/SidebarItem.svelte
@ -0,0 +1,23 @@
+<script>
+    export let title = ""
+</script>
+<div>
+    <div class="sidebar title">
+        {title}
+    </div>
+    <div class="sidebar">
+        <slot />
+    </div>
+</div>
+
+<style>
+    .sidebar
+    {
+        background: red;
+    }
+    .sidebar.title
+    {
+        text-align: center;
+        font-weight: bolder;
+    }
+</style>
--- a/src/Main/Root.svelte
+++ b/src/Main/Root.svelte
@ -0,0 +1,18 @@
+<script>
+    import Router from 'svelte-spa-router'
+    import Index from './routes/Index.svelte'
+    import Post from './routes/Post.svelte'
+
+    import NotFound from './routes/error/NotFound.svelte'
+    import Button from "../Components/Button.svelte";
+
+    const routes = {
+        // Exact path
+        '/': Index,
+        // Using named parameters, with last being optional
+        '/post/:id': Post,
+        '*': NotFound,
+    }
+</script>
+
+<Router {routes}/>
--- a/src/Main/routes/Index.svelte
+++ b/src/Main/routes/Index.svelte
@ -0,0 +1,69 @@
+<script>
+    import {link} from 'svelte-spa-router'
+    import Button from "../../Components/Button.svelte";
+
+    function getRandomIntInclusive(min, max) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
+    }
+    let num = getRandomIntInclusive(100,1000000)
+
+    let search = "asdf"
+</script>
+<div class="main">
+    <div class="spacing">
+        <h1 class="heading section spacing">Subooru</h1>
+        <div class="section spacing">
+            <ul>
+                <li><a href="/" use:link>Posts</a></li>
+                <li>Comments</li>
+                <li>Tags</li>
+                <li>Wiki</li>
+                <li>Documentation</li>
+            </ul>
+        </div>
+        <div class="flex section spacing">
+                <div class="flex-grow mr-2">
+                    {search}
+                    <input bind:value={search} type="text" class="w-full text-black shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" placeholder="Image Search">
+                </div>
+                <Button rounded blue on:click={() => ++num}>Search</Button>
+        </div>
+    </div>
+    <div class="spacing">
+        {#each num.toString() as d}
+            <img alt={d} src={`https://shimmie.shishnet.org/ext/home/counters/newcounter/${d}.gif`} />
+        {/each}
+    </div>
+    <div class="spacing">
+        Serving {new Intl.NumberFormat().format(num)} posts
+    </div>
+</div>
+
+<style>
+    .heading
+    {
+        @apply text-7xl;
+        -webkit-text-stroke: 0.02em black;
+    }
+    ul li { @apply ml-1 mr-1 inline; }
+    img
+    {
+        @apply inline-block text-white md:h-40 h-20;
+        aspect-ratio: 1/1.66;
+    }
+    .section .spacing
+    {
+        @apply lg:mt-4 lg:mb-4 md:mt-2 md:mb-2 mt-0 mb-0;
+    }
+    .spacing
+    {
+        @apply lg:mt-6 lg:mb-6 md:mt-4 md:mb-4 mt-2 mb-2;
+    }
+    .main
+    {
+        @apply min-h-full flex flex-col items-center justify-center text-center;
+        min-height: -webkit-fill-available;
+    }
+</style>
--- a/src/Main/routes/Post.svelte
+++ b/src/Main/routes/Post.svelte
@ -0,0 +1,6 @@
+<script>
+    export let params = {}
+</script>
+
+This is post {params.id}
+
--- a/src/Main/routes/error/NotFound.svelte
+++ b/src/Main/routes/error/NotFound.svelte
@ -0,0 +1 @@
+<h1>4.0.4</h1>
--- a/src/ModeSwitcher.svelte
+++ b/src/ModeSwitcher.svelte
@ -0,0 +1,31 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  let darkMode = false;
+  const THEME_KEY = 'themePreference';
+
+  function setDarkTheme(dark: boolean) {
+    darkMode = dark;
+    document.documentElement.classList.toggle('dark', darkMode);
+  }
+
+  function toggleMode() {
+    setDarkTheme(!darkMode);
+    window.localStorage.setItem(THEME_KEY, darkMode ? 'dark' : 'light');
+  }
+
+  onMount(() => {
+    const theme = window.localStorage.getItem(THEME_KEY);
+    if (theme === 'dark') {
+      setDarkTheme(true);
+    } else if (theme == null && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      setDarkTheme(true);
+    }
+  });
+</script>
+<div class="absolute top-0 right-0 w-8 h-8 p-2" on:click={toggleMode}>
+  {#if darkMode}
+  <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M279.135 512c78.756 0 150.982-35.804 198.844-94.775 28.27-34.831-2.558-85.722-46.249-77.401-82.348 15.683-158.272-47.268-158.272-130.792 0-48.424 26.06-92.292 67.434-115.836 38.745-22.05 28.999-80.788-15.022-88.919A257.936 257.936 0 0 0 279.135 0c-141.36 0-256 114.575-256 256 0 141.36 114.576 256 256 256zm0-464c12.985 0 25.689 1.201 38.016 3.478-54.76 31.163-91.693 90.042-91.693 157.554 0 113.848 103.641 199.2 215.252 177.944C402.574 433.964 344.366 464 279.135 464c-114.875 0-208-93.125-208-208s93.125-208 208-208z"></path></svg>
+  {:else}
+  <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="sun" class="svg-inline--fa fa-sun fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M494.2 221.9l-59.8-40.5 13.7-71c2.6-13.2-1.6-26.8-11.1-36.4-9.6-9.5-23.2-13.7-36.2-11.1l-70.9 13.7-40.4-59.9c-15.1-22.3-51.9-22.3-67 0l-40.4 59.9-70.8-13.7C98 60.4 84.5 64.5 75 74.1c-9.5 9.6-13.7 23.1-11.1 36.3l13.7 71-59.8 40.5C6.6 229.5 0 242 0 255.5s6.7 26 17.8 33.5l59.8 40.5-13.7 71c-2.6 13.2 1.6 26.8 11.1 36.3 9.5 9.5 22.9 13.7 36.3 11.1l70.8-13.7 40.4 59.9C230 505.3 242.6 512 256 512s26-6.7 33.5-17.8l40.4-59.9 70.9 13.7c13.4 2.7 26.8-1.6 36.3-11.1 9.5-9.5 13.6-23.1 11.1-36.3l-13.7-71 59.8-40.5c11.1-7.5 17.8-20.1 17.8-33.5-.1-13.6-6.7-26.1-17.9-33.7zm-112.9 85.6l17.6 91.2-91-17.6L256 458l-51.9-77-90.9 17.6 17.6-91.2-76.8-52 76.8-52-17.6-91.2 91 17.6L256 53l51.9 76.9 91-17.6-17.6 91.1 76.8 52-76.8 52.1zM256 152c-57.3 0-104 46.7-104 104s46.7 104 104 104 104-46.7 104-104-46.7-104-104-104zm0 160c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z"></path></svg>
+  {/if}
+</div>
--- a/src/Tailwindcss.svelte
+++ b/src/Tailwindcss.svelte
@ -0,0 +1,8 @@
+<style global>
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+  @layer base {
+      svg { @apply inline; }
+  }
+</style>
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,10 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+	props: {
+		name: 'world'
+	}
+});
+
+export default app;
--- a/src/pages/_fallback.svelte
+++ b/src/pages/_fallback.svelte
@ -0,0 +1,29 @@
+<script>
+    import {url} from '@roxi/routify'
+    import MainLayout from "../Layout/MainLayout.svelte";
+    import Fa from 'svelte-fa'
+    import {faSadCry,faArrowAltCircleLeft} from '@fortawesome/free-regular-svg-icons'
+    import Button from "../Components/Button.svelte";
+</script>
+
+<style>
+    .text-huge {
+        font-size: 12rem;
+    }
+    .main {
+        display: grid;
+        place-content: center;
+        @apply h-full w-full text-center
+    }
+
+</style>
+
+<MainLayout>
+    <div class="main">
+        <div class="text-huge"><Fa icon={faSadCry} fw /> 404</div>
+        <div>
+            <div>Page not found.</div>
+            <a href={$url('../')}><Button rounded green><Fa slot="leading" icon={faArrowAltCircleLeft} fw />Go back</Button></a>
+        </div>
+    </div>
+</MainLayout>
--- a/src/pages/admin/index.svelte
+++ b/src/pages/admin/index.svelte
@ -0,0 +1,10 @@
+<script>
+    const isAdmin = false
+    import { leftover, goto } from '@roxi/routify'
+    const [...fragments] = $leftover.split('/')
+
+    if(!isAdmin)
+        $goto('/error/401')
+</script>
+
+HELLO
--- a/src/pages/error/_fallback.svelte
+++ b/src/pages/error/_fallback.svelte
@ -0,0 +1,22 @@
+<script>
+    import {leftover, goto} from '@roxi/routify'
+    import Button from "../../Components/Button.svelte";
+
+</script>
+<div>
+    <p>Error: {$leftover}</p>
+    <p>That's all we know.</p>
+    <p><a href="/"><Button blue rounded>Go Home</Button></a><Button yellow rounded>Go Back</Button></p>
+</div>
+
+<style>
+    div {
+        @apply flex flex-col w-screen h-screen justify-center items-center;
+    }
+    div > *:first-child {
+        @apply text-6xl;
+    }
+    :global(button) {
+        @apply m-1;
+    }
+</style>
--- a/src/pages/index.svelte
+++ b/src/pages/index.svelte
@ -0,0 +1,91 @@
+<script>
+    import {link} from 'svelte-spa-router'
+    import Button from "../Components/Button.svelte";
+
+    const get = async () =>
+    {
+        let res = await fetch('https://nhwh2z1zze.execute-api.us-east-1.amazonaws.com/TotalPosts')
+        let val = await res.text()
+        console.log(val)
+        return val
+    }
+    let query = ""
+</script>
+
+<div class="main">
+    <div class="spacing">
+        <h1 class="heading section spacing">Subooru</h1>
+        <div class="section spacing">
+            <ul>
+                <li><a href="/" use:link>Posts</a></li>
+                <li>Comments</li>
+                <li>Tags</li>
+                <li>Wiki</li>
+                <li>Documentation</li>
+            </ul>
+        </div>
+        <form>
+            <div class="flex section spacing items-baseline">
+                <div class="flex-grow mr-2">
+                    <input bind:value={query} required type="text" class="w-full text-black shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" placeholder="Image Search">
+                </div>
+                <Button rounded blue>Search</Button>
+            </div>
+        </form>
+    </div>
+    {#await get()}
+        <div class="spacing">
+            ...
+        </div>
+        <div class="spacing">
+            Serving ??? posts
+        </div>
+    {:then num}
+        <div class="spacing">
+            {#each num.toString() as d}
+                <img alt={d} src={`https://shimmie.shishnet.org/ext/home/counters/newcounter/${d}.gif`} />
+            {/each}
+        </div>
+        <div class="spacing">
+            Serving {new Intl.NumberFormat().format(num)} posts
+        </div>
+    {:catch ex}
+        <div class="spacing">
+            <div class="text-9xl md:h-40 h-20">😢</div>
+        </div>
+        <div class="spacing">
+            Error loading number of posts.
+        </div>
+    {/await}
+</div>
+
+<style>
+    .heading
+    {
+        @apply text-7xl;
+        -webkit-text-stroke: 0.02em white;
+    }
+    :global(.dark) .heading
+    {
+        -webkit-text-stroke: 0.02em black;
+    }
+    ul li { @apply ml-1 mr-1 inline; }
+    img
+    {
+        @apply inline-block text-white md:h-40 h-20;
+        aspect-ratio: 1/1.66;
+    }
+    .section .spacing
+    {
+        @apply lg:mt-4 lg:mb-4 md:mt-2 md:mb-2 mt-0 mb-0;
+    }
+    .spacing
+    {
+        @apply lg:mt-6 lg:mb-6 md:mt-4 md:mb-4 mt-2 mb-2;
+    }
+    .main
+    {
+        @apply min-h-screen flex flex-col items-center justify-center text-center;
+        min-height: -webkit-fill-available;
+    }
+</style>
--- a/src/pages/posts/[id].svelte
+++ b/src/pages/posts/[id].svelte
@ -0,0 +1,19 @@
+<script>
+    import MainLayout from "../../Layout/MainLayout.svelte";
+    import SidebarItem from "../../Layout/Sidebar/SidebarItem.svelte";
+    import HeaderItem from "../../Layout/Header/HeaderItem.svelte";
+
+    export let id = ""
+</script>
+
+<MainLayout>
+    <svelte:fragment slot="header">
+        <HeaderItem>Header!</HeaderItem>
+    </svelte:fragment>
+    <svelte:fragment slot="sidebar">
+        <SidebarItem title="Sidebar Content">An Item</SidebarItem>
+        <SidebarItem title="Sidebar Content 2">An Item 2</SidebarItem>
+    </svelte:fragment>
+
+    Hello from {id}.
+</MainLayout>
--- a/src/pages/posts/index.svelte
+++ b/src/pages/posts/index.svelte
@ -0,0 +1,6 @@
+<script>
+    import MainLayout from "../../Layout/MainLayout.svelte";
+</script>
+<MainLayout>
+    Hello World
+</MainLayout>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,20 @@
+module.exports = {
+  darkMode: 'class', // This can be 'media' if preferred.
+  //mode: 'jit',
+  purge: [
+    './src/**/*.svelte',
+    './src/**/*.html',
+    './public/**/*.html',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        svelte: '#ff3e00',
+      },
+    },
+  },
+  variants: {},
+  plugins: [
+    require('@tailwindcss/forms')
+  ],
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,6 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
+}