Compare commits

...

No commits in common. '86f87b79e1ee8b98f275f5de7c0aeb2f069fbc1b' and '57e73bb0d88870fa1e0bbbf44429c2029b68cd47' have entirely different histories.

  1. 521
      .gitignore
  2. 5
      .idea/.gitignore
  3. 12
      .idea/booru.iml
  4. 8
      .idea/modules.xml
  5. 18
      .routify/config.js
  6. 264
      .routify/routes.js
  7. 5
      .routify/urlIndex.json
  8. 3
      .vscode/extensions.json
  9. 1
      LICENSE.md
  10. 65
      README.md
  11. 6357
      package-lock.json
  12. 41
      package.json
  13. 5
      postcss.config.js
  14. BIN
      public/favicon.png
  15. 16
      public/index.html
  16. 81
      rollup.config.js
  17. 10
      src/App.svelte
  18. 137
      src/Components/Button.svelte
  19. 7
      src/Layout/Footer.svelte
  20. 24
      src/Layout/Header.svelte
  21. 7
      src/Layout/Header/HeaderItem.svelte
  22. 61
      src/Layout/MainLayout.svelte
  23. 23
      src/Layout/Sidebar/SidebarItem.svelte
  24. 18
      src/Main/Root.svelte
  25. 69
      src/Main/routes/Index.svelte
  26. 6
      src/Main/routes/Post.svelte
  27. 1
      src/Main/routes/error/NotFound.svelte
  28. 31
      src/ModeSwitcher.svelte
  29. 8
      src/Tailwindcss.svelte
  30. 10
      src/main.ts
  31. 29
      src/pages/_fallback.svelte
  32. 10
      src/pages/admin/index.svelte
  33. 22
      src/pages/error/_fallback.svelte
  34. 91
      src/pages/index.svelte
  35. 19
      src/pages/posts/[id].svelte
  36. 6
      src/pages/posts/index.svelte
  37. 20
      tailwind.config.js
  38. 6
      tsconfig.json

521
.gitignore

@ -1,520 +1,3 @@
# ---> JetBrains
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
# User-specific stuff
.idea/**/workspace.xml
.idea/**/tasks.xml
.idea/**/usage.statistics.xml
.idea/**/dictionaries
.idea/**/shelf
# AWS User-specific
.idea/**/aws.xml
# Generated files
.idea/**/contentModel.xml
# Sensitive or high-churn files
.idea/**/dataSources/
.idea/**/dataSources.ids
.idea/**/dataSources.local.xml
.idea/**/sqlDataSources.xml
.idea/**/dynamic.xml
.idea/**/uiDesigner.xml
.idea/**/dbnavigator.xml
# Gradle
.idea/**/gradle.xml
.idea/**/libraries
# Gradle and Maven with auto-import
# When using Gradle or Maven with auto-import, you should exclude module files,
# since they will be recreated, and may cause churn. Uncomment if using
# auto-import.
# .idea/artifacts
# .idea/compiler.xml
# .idea/jarRepositories.xml
# .idea/modules.xml
# .idea/*.iml
# .idea/modules
# *.iml
# *.ipr
# CMake
cmake-build-*/
# Mongo Explorer plugin
.idea/**/mongoSettings.xml
# File-based project format
*.iws
# IntelliJ
out/
# mpeltonen/sbt-idea plugin
.idea_modules/
# JIRA plugin
atlassian-ide-plugin.xml
# Cursive Clojure plugin
.idea/replstate.xml
# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
fabric.properties
# Editor-based Rest Client
.idea/httpRequests
# Android studio 3.1+ serialized cache file
.idea/caches/build_file_checksums.ser
# ---> VisualStudio
## Ignore Visual Studio temporary files, build results, and
## files generated by popular Visual Studio add-ons.
##
## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
# User-specific files
*.rsuser
*.suo
*.user
*.userosscache
*.sln.docstates
# User-specific files (MonoDevelop/Xamarin Studio)
*.userprefs
# Mono auto generated files
mono_crash.*
# Build results
[Dd]ebug/
[Dd]ebugPublic/
[Rr]elease/
[Rr]eleases/
x64/
x86/
[Ww][Ii][Nn]32/
[Aa][Rr][Mm]/
[Aa][Rr][Mm]64/
bld/
[Bb]in/
[Oo]bj/
[Ll]og/
[Ll]ogs/
# Visual Studio 2015/2017 cache/options directory
.vs/
# Uncomment if you have tasks that create the project's static files in wwwroot
#wwwroot/
# Visual Studio 2017 auto generated files
Generated\ Files/
# MSTest test Results
[Tt]est[Rr]esult*/
[Bb]uild[Ll]og.*
# NUnit
*.VisualState.xml
TestResult.xml
nunit-*.xml
# Build Results of an ATL Project
[Dd]ebugPS/
[Rr]eleasePS/
dlldata.c
# Benchmark Results
BenchmarkDotNet.Artifacts/
# .NET Core
project.lock.json
project.fragment.lock.json
artifacts/
# ASP.NET Scaffolding
ScaffoldingReadMe.txt
# StyleCop
StyleCopReport.xml
# Files built by Visual Studio
*_i.c
*_p.c
*_h.h
*.ilk
*.meta
*.obj
*.iobj
*.pch
*.pdb
*.ipdb
*.pgc
*.pgd
*.rsp
*.sbr
*.tlb
*.tli
*.tlh
*.tmp
*.tmp_proj
*_wpftmp.csproj
*.log
*.tlog
*.vspscc
*.vssscc
.builds
*.pidb
*.svclog
*.scc
# Chutzpah Test files
_Chutzpah*
# Visual C++ cache files
ipch/
*.aps
*.ncb
*.opendb
*.opensdf
*.sdf
*.cachefile
*.VC.db
*.VC.VC.opendb
# Visual Studio profiler
*.psess
*.vsp
*.vspx
*.sap
# Visual Studio Trace Files
*.e2e
# TFS 2012 Local Workspace
$tf/
# Guidance Automation Toolkit
*.gpState
# ReSharper is a .NET coding add-in
_ReSharper*/
*.[Rr]e[Ss]harper
*.DotSettings.user
# TeamCity is a build add-in
_TeamCity*
# DotCover is a Code Coverage Tool
*.dotCover
# AxoCover is a Code Coverage Tool
.axoCover/*
!.axoCover/settings.json
# Coverlet is a free, cross platform Code Coverage Tool
coverage*.json
coverage*.xml
coverage*.info
# Visual Studio code coverage results
*.coverage
*.coveragexml
# NCrunch
_NCrunch_*
.*crunch*.local.xml
nCrunchTemp_*
# MightyMoose
*.mm.*
AutoTest.Net/
# Web workbench (sass)
.sass-cache/
# Installshield output folder
[Ee]xpress/
# DocProject is a documentation generator add-in
DocProject/buildhelp/
DocProject/Help/*.HxT
DocProject/Help/*.HxC
DocProject/Help/*.hhc
DocProject/Help/*.hhk
DocProject/Help/*.hhp
DocProject/Help/Html2
DocProject/Help/html
# Click-Once directory
publish/
# Publish Web Output
*.[Pp]ublish.xml
*.azurePubxml
# Note: Comment the next line if you want to checkin your web deploy settings,
# but database connection strings (with potential passwords) will be unencrypted
*.pubxml
*.publishproj
# Microsoft Azure Web App publish settings. Comment the next line if you want to
# checkin your Azure Web App publish settings, but sensitive information contained
# in these scripts will be unencrypted
PublishScripts/
# NuGet Packages
*.nupkg
# NuGet Symbol Packages
*.snupkg
# The packages folder can be ignored because of Package Restore
**/[Pp]ackages/*
# except build/, which is used as an MSBuild target.
!**/[Pp]ackages/build/
# Uncomment if necessary however generally it will be regenerated when needed
#!**/[Pp]ackages/repositories.config
# NuGet v3's project.json files produces more ignorable files
*.nuget.props
*.nuget.targets
# Nuget personal access tokens and Credentials
nuget.config
# Microsoft Azure Build Output
csx/
*.build.csdef
# Microsoft Azure Emulator
ecf/
rcf/
# Windows Store app package directories and files
AppPackages/
BundleArtifacts/
Package.StoreAssociation.xml
_pkginfo.txt
*.appx
*.appxbundle
*.appxupload
# Visual Studio cache files
# files ending in .cache can be ignored
*.[Cc]ache
# but keep track of directories ending in .cache
!?*.[Cc]ache/
# Others
ClientBin/
~$*
*~
*.dbmdl
*.dbproj.schemaview
*.jfm
*.pfx
*.publishsettings
orleans.codegen.cs
# Including strong name files can present a security risk
# (https://github.com/github/gitignore/pull/2483#issue-259490424)
#*.snk
# Since there are multiple workflows, uncomment next line to ignore bower_components
# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
#bower_components/
# RIA/Silverlight projects
Generated_Code/
# Backup & report files from converting an old project file
# to a newer Visual Studio version. Backup files are not needed,
# because we have git ;-)
_UpgradeReport_Files/
Backup*/
UpgradeLog*.XML
UpgradeLog*.htm
ServiceFabricBackup/
*.rptproj.bak
# SQL Server files
*.mdf
*.ldf
*.ndf
# Business Intelligence projects
*.rdl.data
*.bim.layout
*.bim_*.settings
*.rptproj.rsuser
*- [Bb]ackup.rdl
*- [Bb]ackup ([0-9]).rdl
*- [Bb]ackup ([0-9][0-9]).rdl
# Microsoft Fakes
FakesAssemblies/
# GhostDoc plugin setting file
*.GhostDoc.xml
# Node.js Tools for Visual Studio
.ntvs_analysis.dat
node_modules/
# Visual Studio 6 build log
*.plg
# Visual Studio 6 workspace options file
*.opt
# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
*.vbw
# Visual Studio LightSwitch build output
**/*.HTMLClient/GeneratedArtifacts
**/*.DesktopClient/GeneratedArtifacts
**/*.DesktopClient/ModelManifest.xml
**/*.Server/GeneratedArtifacts
**/*.Server/ModelManifest.xml
_Pvt_Extensions
# Paket dependency manager
.paket/paket.exe
paket-files/
# FAKE - F# Make
.fake/
# CodeRush personal settings
.cr/personal
# Python Tools for Visual Studio (PTVS)
__pycache__/
*.pyc
# Cake - Uncomment if you are using it
# tools/**
# !tools/packages.config
# Tabs Studio
*.tss
# Telerik's JustMock configuration file
*.jmconfig
# BizTalk build output
*.btp.cs
*.btm.cs
*.odx.cs
*.xsd.cs
# OpenCover UI analysis results
OpenCover/
# Azure Stream Analytics local run output
ASALocalRun/
# MSBuild Binary and Structured Log
*.binlog
# NVidia Nsight GPU debugger configuration file
*.nvuser
# MFractors (Xamarin productivity tool) working folder
.mfractor/
# Local History for Visual Studio
.localhistory/
# BeatPulse healthcheck temp database
healthchecksdb
# Backup folder for Package Reference Convert tool in Visual Studio 2017
MigrationBackup/
# Ionide (cross platform F# VS Code tools) working folder
.ionide/
# Fody - auto-generated XML schema
FodyWeavers.xsd
# VS Code files for those working on multiple tools
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
*.code-workspace
# Local History for Visual Studio Code
.history/
# Windows Installer files from build outputs
*.cab
*.msi
*.msix
*.msm
*.msp
# JetBrains Rider
.idea/
*.sln.iml
# ---> Windows
# Windows thumbnail cache files
Thumbs.db
Thumbs.db:encryptable
ehthumbs.db
ehthumbs_vista.db
# Dump file
*.stackdump
# Folder config file
[Dd]esktop.ini
# Recycle Bin used on file shares
$RECYCLE.BIN/
# Windows Installer files
*.cab
*.msi
*.msix
*.msm
*.msp
# Windows shortcuts
*.lnk
# ---> macOS
# General
.DS_Store
.AppleDouble
.LSOverride
# Icon must end with two \r
Icon
# Thumbnails
._*
# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent
# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk
node_modules
public/build

5
.idea/.gitignore

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

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

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

18
.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"
}

264
.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)

5
.routify/urlIndex.json

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

3
.vscode/extensions.json

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

1
LICENSE.md

@ -1 +0,0 @@
All rights reserved.

65
README.md

@ -1,3 +1,64 @@
# Subooru-Web
> 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.
Web Client for Subooru.

6357
package-lock.json

File diff suppressed because it is too large

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

5
postcss.config.js

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

BIN
public/favicon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

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

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

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

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

7
src/Layout/Footer.svelte

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

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

7
src/Layout/Header/HeaderItem.svelte

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

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

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

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

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

6
src/Main/routes/Post.svelte

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

1
src/Main/routes/error/NotFound.svelte

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

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

8
src/Tailwindcss.svelte

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

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

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

10
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

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

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

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

6
src/pages/posts/index.svelte

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

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

6
tsconfig.json

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