Add files

This commit is contained in:
Riley S 2021-07-05 03:03:21 -04:00
commit 57e73bb0d8
37 changed files with 7497 additions and 0 deletions

3
.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
.DS_Store
node_modules
public/build

5
.idea/.gitignore vendored Normal file
View File

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

12
.idea/booru.iml Normal file
View File

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

8
.idea/modules.xml Normal file
View File

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

18
.routify/config.js Normal file
View File

@ -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"
}

264
.routify/routes.js Normal file
View File

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

5
.routify/urlIndex.json Normal file
View File

@ -0,0 +1,5 @@
[
"/admin/index",
"/index",
"/posts/index"
]

3
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"recommendations": ["svelte.svelte-vscode", "bradlc.vscode-tailwindcss"]
}

64
README.md Normal file
View File

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

6357
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

41
package.json Normal file
View File

@ -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"
}
}

5
postcss.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
plugins: [
require('tailwindcss'),
]
};

BIN
public/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

16
public/index.html Normal file
View File

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

81
rollup.config.js Normal file
View File

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

10
src/App.svelte Normal file
View File

@ -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} />

View File

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

7
src/Layout/Footer.svelte Normal file
View File

@ -0,0 +1,7 @@
<footer>Copyright &copy; {new Date().getFullYear()} Riley S.</footer>
<style>
footer
{
grid-area: footer;
}
</style>

24
src/Layout/Header.svelte Normal file
View File

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

View File

@ -0,0 +1,7 @@
<script></script>
<li><slot /></li>
<style>
li { @apply p-2; }
</style>

View File

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

View File

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

18
src/Main/Root.svelte Normal file
View File

@ -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}/>

View File

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

View File

@ -0,0 +1,6 @@
<script>
export let params = {}
</script>
This is post {params.id}

View File

@ -0,0 +1 @@
<h1>4.0.4</h1>

31
src/ModeSwitcher.svelte Normal file
View File

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

8
src/Tailwindcss.svelte Normal file
View File

@ -0,0 +1,8 @@
<style global>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
svg { @apply inline; }
}
</style>

10
src/main.ts Normal file
View File

@ -0,0 +1,10 @@
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;

View File

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

View File

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

View File

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

91
src/pages/index.svelte Normal file
View File

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

View File

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

View File

@ -0,0 +1,6 @@
<script>
import MainLayout from "../../Layout/MainLayout.svelte";
</script>
<MainLayout>
Hello World
</MainLayout>

20
tailwind.config.js Normal file
View File

@ -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')
],
}

6
tsconfig.json Normal file
View File

@ -0,0 +1,6 @@
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}