Add files
This commit is contained in:
commit
57e73bb0d8
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
public/build
|
||||||
5
.idea/.gitignore
vendored
Normal file
5
.idea/.gitignore
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
12
.idea/booru.iml
Normal file
12
.idea/booru.iml
Normal 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
8
.idea/modules.xml
Normal 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
18
.routify/config.js
Normal 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
264
.routify/routes.js
Normal 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
5
.routify/urlIndex.json
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
[
|
||||||
|
"/admin/index",
|
||||||
|
"/index",
|
||||||
|
"/posts/index"
|
||||||
|
]
|
||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["svelte.svelte-vscode", "bradlc.vscode-tailwindcss"]
|
||||||
|
}
|
||||||
64
README.md
Normal file
64
README.md
Normal 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
6357
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
41
package.json
Normal file
41
package.json
Normal 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
5
postcss.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
require('tailwindcss'),
|
||||||
|
]
|
||||||
|
};
|
||||||
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
16
public/index.html
Normal file
16
public/index.html
Normal 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
81
rollup.config.js
Normal 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
10
src/App.svelte
Normal 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} />
|
||||||
137
src/Components/Button.svelte
Normal file
137
src/Components/Button.svelte
Normal 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
7
src/Layout/Footer.svelte
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<footer>Copyright © {new Date().getFullYear()} Riley S.</footer>
|
||||||
|
<style>
|
||||||
|
footer
|
||||||
|
{
|
||||||
|
grid-area: footer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
24
src/Layout/Header.svelte
Normal file
24
src/Layout/Header.svelte
Normal 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>
|
||||||
7
src/Layout/Header/HeaderItem.svelte
Normal file
7
src/Layout/Header/HeaderItem.svelte
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<script></script>
|
||||||
|
|
||||||
|
<li><slot /></li>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
li { @apply p-2; }
|
||||||
|
</style>
|
||||||
61
src/Layout/MainLayout.svelte
Normal file
61
src/Layout/MainLayout.svelte
Normal 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>
|
||||||
23
src/Layout/Sidebar/SidebarItem.svelte
Normal file
23
src/Layout/Sidebar/SidebarItem.svelte
Normal 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
18
src/Main/Root.svelte
Normal 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}/>
|
||||||
69
src/Main/routes/Index.svelte
Normal file
69
src/Main/routes/Index.svelte
Normal 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>
|
||||||
6
src/Main/routes/Post.svelte
Normal file
6
src/Main/routes/Post.svelte
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
export let params = {}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
This is post {params.id}
|
||||||
|
|
||||||
1
src/Main/routes/error/NotFound.svelte
Normal file
1
src/Main/routes/error/NotFound.svelte
Normal file
@ -0,0 +1 @@
|
|||||||
|
<h1>4.0.4</h1>
|
||||||
31
src/ModeSwitcher.svelte
Normal file
31
src/ModeSwitcher.svelte
Normal 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
8
src/Tailwindcss.svelte
Normal 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
10
src/main.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import App from './App.svelte';
|
||||||
|
|
||||||
|
const app = new App({
|
||||||
|
target: document.body,
|
||||||
|
props: {
|
||||||
|
name: 'world'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default app;
|
||||||
29
src/pages/_fallback.svelte
Normal file
29
src/pages/_fallback.svelte
Normal 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>
|
||||||
10
src/pages/admin/index.svelte
Normal file
10
src/pages/admin/index.svelte
Normal 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
|
||||||
22
src/pages/error/_fallback.svelte
Normal file
22
src/pages/error/_fallback.svelte
Normal 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
91
src/pages/index.svelte
Normal 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>
|
||||||
19
src/pages/posts/[id].svelte
Normal file
19
src/pages/posts/[id].svelte
Normal 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>
|
||||||
6
src/pages/posts/index.svelte
Normal file
6
src/pages/posts/index.svelte
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
import MainLayout from "../../Layout/MainLayout.svelte";
|
||||||
|
</script>
|
||||||
|
<MainLayout>
|
||||||
|
Hello World
|
||||||
|
</MainLayout>
|
||||||
20
tailwind.config.js
Normal file
20
tailwind.config.js
Normal 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
6
tsconfig.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||||
|
|
||||||
|
"include": ["src/**/*"],
|
||||||
|
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user