feat: support for page deletion

.example.env

@@ -0,0 +1,5 @@
+AWS_ACCESS_KEY_ID=**************************
+AWS_SECRET_ACCESS_KEY=****************************************************************
+AWS_DEFAULT_REGION=******
+AWS_ENDPOINT_URL=localhost:3000
+S3_DEFAULT_BUCKET=comicverse-test-bucket

.gitignore

@@ -1,3 +1,23 @@
-.dist
-wind.css
-.tmp
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+data.db

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "x"]
-	path = x
-	url = https://forge.capytal.company/loreddev/x

.golangci.yml

@@ -1,20 +0,0 @@
-run:
-  timeout: 5m
-  modules-download-mode: readonly
-
-linters:
-  disable-all: true
-  enable:
-    - errcheck
-    - goimports
-    - gofumpt
-    - revive # golint
-    - gosimple
-    - govet
-    - ineffassign
-    - staticcheck
-
-issues:
-  exclude-use-default: false
-  max-issues-per-linter: 0
-  max-same-issues: 0

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

.vscode/launch.json

@@ -1,20 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "Launch APP",
-      "type": "go",
-      "request": "launch",
-      "mode": "debug",
-      "program": "${workspaceFolder}/main.go"
-    },
-    {
-      "name": "Launch APP (Dev)",
-      "type": "go",
-      "request": "launch",
-      "mode": "debug",
-      "program": "${workspaceFolder}/main.go",
-      "args": [ "-dev" ]
-    }
-  ]
-}

README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

cmd/cmd.go

@@ -1,77 +0,0 @@
-package cmd
-
-import (
-	"context"
-	"errors"
-	"flag"
-	"fmt"
-	"log/slog"
-	"net/http"
-	"os"
-	"os/signal"
-	"syscall"
-
-	"forge.capytal.company/capytalcode/project-comicverse/router"
-	"forge.capytal.company/loreddev/x/tinyssert"
-)
-
-var (
-	host         = flag.String("host", "localhost", "Host to listen to")
-	port         = flag.Uint("port", 8080, "Port to be used for the server.")
-	templatesDir = flag.String("templates", "", "Templates directory to be used instead of built-in ones.")
-	verbose      = flag.Bool("verbose", false, "Print debug information on logs")
-	dev          = flag.Bool("dev", false, "Run the server in debug mode.")
-)
-
-func init() {
-	flag.Parse()
-}
-
-func Execute() {
-	ctx := context.Background()
-
-	assertions := tinyssert.NewDisabledAssertions()
-	if *dev {
-		assertions = tinyssert.NewAssertions()
-	}
-
-	level := slog.LevelError
-	if *dev {
-		level = slog.LevelDebug
-	} else if *verbose {
-		level = slog.LevelInfo
-	}
-	log := slog.New(slog.NewTextHandler(os.Stdout, &slog.HandlerOptions{Level: level}))
-
-	app := router.New(assertions, log, *dev)
-
-	srv := &http.Server{
-		Addr:    fmt.Sprintf("%s:%d", *host, *port),
-		Handler: app,
-	}
-
-	c, stop := signal.NotifyContext(ctx, syscall.SIGINT, syscall.SIGTERM)
-	defer stop()
-
-	go func() {
-		log.Info("Starting application",
-			slog.String("host", *host),
-			slog.Uint64("port", uint64(*port)),
-			slog.Bool("verbose", *verbose),
-			slog.Bool("development", *dev))
-
-		if err := srv.ListenAndServe(); err != nil && !errors.Is(err, http.ErrServerClosed) {
-			log.Error("Failed to start application", slog.String("error", err.Error()))
-		}
-	}()
-
-	<-c.Done()
-
-	log.Info("Stopping application gracefully")
-	if err := srv.Shutdown(ctx); err != nil {
-		log.Error("Failed to stop application gracefully", slog.String("error", err.Error()))
-	}
-
-	log.Info("FINAL")
-	os.Exit(0)
-}

eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js';
+import ts from 'typescript-eslint';
+import svelte from 'eslint-plugin-svelte';
+import prettier from 'eslint-config-prettier';
+import globals from 'globals';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+];

flake.nix

@@ -3,7 +3,10 @@
   inputs = {
     nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
   };
-  outputs = {nixpkgs, ...}: let
+  outputs = {
+    self,
+    nixpkgs,
+  }: let
     systems = [
       "x86_64-linux"
       "aarch64-linux"
@@ -18,23 +21,12 @@
   in {
     devShells = forAllSystems (system: pkgs: {
       default = pkgs.mkShell {
-        CGO_ENABLED = "0";
-        hardeningDisable = ["all"];
-
         buildInputs = with pkgs; [
-          # Go tools
-          go
-          golangci-lint
-          gofumpt
-          gotools
-          delve
-
-          # TailwindCSS
-          tailwindcss
-
-          # Sqlite tools
-          sqlite
-          lazysql
+          awscli2
+          bun
+          eslint
+          nodejs_22
+          nodePackages_latest.prettier
         ];
       };
     });

go.mod

@@ -1,7 +0,0 @@
-module forge.capytal.company/capytalcode/project-comicverse
-
-go 1.23.3
-
-toolchain go1.23.6
-
-require forge.capytal.company/loreddev/x v0.0.0-20250227192157-90a5169f1bef

go.sum

@@ -1,2 +0,0 @@
-forge.capytal.company/loreddev/x v0.0.0-20250227192157-90a5169f1bef h1:IJ9z7otITB5hhjZ+bmU0yOVsa8K1RWYIZ+cQj9XF6NY=
-forge.capytal.company/loreddev/x v0.0.0-20250227192157-90a5169f1bef/go.mod h1:MnU08vmXvYIQlQutVcC6o6Xq1KHZuXGXO78bbHseCFo=

go.work

@@ -1,6 +0,0 @@
-go 1.23.6
-
-use (
-	./.
-	./x
-)

main.go

@@ -1,7 +0,0 @@
-package main
-
-import "forge.capytal.company/capytalcode/project-comicverse/cmd"
-
-func main() {
-	cmd.Execute()
-}

makefile

@@ -1,42 +0,0 @@
-PORT?=8080
-
-lint:
-	golangci-lint run .
-
-fmt:
-	go fmt .
-	golangci-lint run --fix .
-
-dev/server:
-	go run github.com/joho/godotenv/cmd/godotenv@v1.5.1 \
-		go run github.com/air-verse/air@v1.52.2 \
-			--build.cmd "go build -o .tmp/bin/main ." \
-			--build.bin ".tmp/bin/main" \
-			--build.exclude_dir "node_modules" \
-			--build.include_ext "go,html" \
-			--build.stop_on_error "false" \
-			--proxy.enabled true \
-			--proxy.proxy_port $(PORT) \
-			--proxy.app_port $$(($(PORT) + 1)) \
-			--misc.clean_on_exit true \
-			-- -dev -port $$(($(PORT) + 1))
-
-dev/assets:
-	tailwindcss -o ./static/css/wind.css -w
-
-dev:
-	$(MAKE) -j2 dev/server dev/assets
-
-
-build:
-	go generate
-	go build -o ./.dist/app .
-
-run: build
-	./.dist/app
-
-clean:
-	# Remove generated directories
-	if [[ -d ".dist" ]]; then rm -r ./.dist; fi
-	if [[ -d "tmp" ]]; then rm -r ./tmp; fi
-	if [[ -d "bin" ]]; then rm -r ./bin; fi

package.json

@@ -0,0 +1,38 @@
+{
+	"name": "comicverse",
+	"version": "0.0.1",
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/eslint": "^9.6.0",
+		"@types/node": "^22.6.0",
+		"blob-util": "^2.0.2",
+		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"minio": "^8.0.1",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"sqlite": "^5.1.1",
+		"sqlite3": "^5.1.7",
+		"svelte": "^4.2.7",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0",
+		"vite": "^5.0.3",
+		"xml-js": "^1.6.11"
+	},
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"type": "module"
+}

router/router.go

@@ -1,52 +0,0 @@
-package router
-
-import (
-	"errors"
-	"log/slog"
-	"net/http"
-
-	"forge.capytal.company/capytalcode/project-comicverse/templates"
-	"forge.capytal.company/loreddev/x/smalltrip"
-	"forge.capytal.company/loreddev/x/smalltrip/exception"
-	"forge.capytal.company/loreddev/x/smalltrip/middleware"
-	"forge.capytal.company/loreddev/x/tinyssert"
-)
-
-func New(assertions tinyssert.Assertions, log *slog.Logger, dev bool) http.Handler {
-	r := smalltrip.NewRouter(
-		smalltrip.WithAssertions(assertions),
-		smalltrip.WithLogger(log.WithGroup("smalltrip")),
-	)
-
-	r.Use(middleware.Logger(log.WithGroup("requests")))
-	if dev {
-		log.Debug("Development mode activated, using development middleware")
-		r.Use(middleware.Dev)
-	} else {
-		r.Use(middleware.PersistentCache())
-	}
-	r.Use(exception.PanicMiddleware())
-	r.Use(exception.Middleware())
-
-	r.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
-		w.WriteHeader(http.StatusOK)
-		err := templates.Templates().ExecuteTemplate(w, "index.html", nil)
-		if err != nil {
-			exception.InternalServerError(err).ServeHTTP(w, r)
-		}
-	})
-	r.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("./static"))))
-	r.HandleFunc("/test", func(w http.ResponseWriter, r *http.Request) {
-		exception.InternalServerError(errors.New("TEST ERROR"),
-			exception.WithData("test-data", "test-value"),
-		).ServeHTTP(w, r)
-	})
-	r.HandleFunc("/panic", func(w http.ResponseWriter, r *http.Request) {
-		panic("TEST PANIC")
-	})
-
-	return r
-}
-
-func dashboard(w http.ResponseWriter, r *http.Request) {
-}

src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/lib/index.ts

@@ -0,0 +1,3 @@
+export { default as s3 } from './s3';
+export { default as db } from './sqlite';
+export * from './sqlite'

src/lib/s3.ts

@@ -0,0 +1,19 @@
+import {
+	AWS_ENDPOINT_URL,
+	AWS_ACCESS_KEY_ID,
+	AWS_DEFAULT_REGION,
+	AWS_SECRET_ACCESS_KEY
+} from '$env/static/private';
+
+import * as Minio from 'minio';
+
+const client = new Minio.Client({
+	endPoint: AWS_ENDPOINT_URL.split(':')[0],
+	port: Number(AWS_ENDPOINT_URL.split(':')[1]),
+	useSSL: false,
+	region: AWS_DEFAULT_REGION,
+	accessKey: AWS_ACCESS_KEY_ID,
+	secretKey: AWS_SECRET_ACCESS_KEY
+});
+
+export default client;

src/lib/sqlite.ts

@@ -0,0 +1,37 @@
+import sqlite3 from 'sqlite3';
+import { open } from 'sqlite';
+
+const db = await open({
+	filename: 'data.db',
+	driver: sqlite3.cached.Database
+});
+
+await db.exec(`
+CREATE TABLE IF NOT EXISTS projects (
+	ID text NOT NULL,
+	Name text NOT NULL,
+	PRIMARY KEY(ID)
+)
+`);
+
+type Project = {
+	id: string;
+	title: string;
+	pages: Page[];
+};
+
+type Page = {
+	title: string;
+	src: string;
+	background: string;
+	iteraction: Iteraction[];
+};
+
+type Iteraction = {
+	x: number;
+	y: number;
+	link: string;
+};
+
+export type { Project, Iteraction, Page };
+export default db;

src/routes/+layout.svelte

@@ -0,0 +1,21 @@
+<svelte:head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
+	<link
+		rel="stylesheet"
+		href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css"
+	/>
+	<meta name="color-scheme" content="dark" />
+</svelte:head>
+
+<main>
+	<slot></slot>
+</main>
+
+<style>
+	main {
+		width: 100vw;
+		height: 100vh;
+	}
+</style>

src/routes/+page.server.ts

@@ -0,0 +1,40 @@
+import { fail, type Actions } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+import { db, s3, type Project } from '$lib';
+import { AWS_S3_DEFAULT_BUCKET } from '$env/static/private';
+
+export const load = (async ({}) => {
+	const res = await db.all<Project[]>('SELECT ID, Name FROM projects');
+	return { projects: res };
+}) as PageServerLoad;
+
+export const actions: Actions = {
+	default: async ({ request }) => {
+		const data = await request.formData();
+		const name = data.get('project-name');
+
+		if (!name) return fail(400, { name, missing: true });
+
+		const uuid = crypto.randomUUID().split('-')[0];
+
+		const res = await db.run('INSERT OR IGNORE INTO projects (ID, Name) VALUES (:id, :name)', {
+			':id': uuid,
+			':name': name
+		});
+
+		const project: Project = {
+			id: uuid,
+			title: name.toString(),
+			pages: []
+		};
+
+		await s3.putObject(AWS_S3_DEFAULT_BUCKET, `${uuid}/project.json`, JSON.stringify(project));
+
+		if (res.changes == undefined) {
+			return fail(500, { reason: 'Failed to insert project into database' });
+		}
+
+		return { success: true };
+	}
+};

src/routes/+page.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Project } from '$lib';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	if ((data.projects.length + 1) % 3 !== 0) {
+		data.projects.push({ Name: '', ID: '' });
+		data.projects.push({ Name: '', ID: '' });
+	}
+</script>
+
+<section>
+	{#each data.projects as p}
+		<article>
+			<h1><a data-sveltekit-reload href={`/projects/${p.ID}`}>{p.Name}</a></h1>
+			<p class="id">{p.ID}</p>
+		</article>
+	{/each}
+	<article>
+		<form method="POST">
+			<fieldset role="group">
+				<input type="text" name="project-name" placeholder="Project Name" required />
+				<input type="submit" value="Create" />
+			</fieldset>
+		</form>
+	</article>
+</section>
+
+<style>
+	section {
+		display: grid;
+
+		@media (min-width: 768px) {
+			grid-template-columns: repeat(3, minmax(0%, 1fr));
+		}
+		grid-column-gap: var(--pico-grid-column-gap);
+		grid-row-gap: var(--pico-grid-row-gap);
+		padding: 1rem var(--pico-grid-row-gap);
+	}
+
+	.id {
+		font-size: 0.7rem;
+		opacity: 0.3;
+	}
+</style>

src/routes/files/[project]/[file]/+server.ts

@@ -0,0 +1,41 @@
+import { type RequestHandler } from '@sveltejs/kit';
+import stream from 'node:stream/promises';
+
+import { db, s3, type Project } from '$lib';
+import { AWS_S3_DEFAULT_BUCKET } from '$env/static/private';
+import { extname } from 'node:path';
+
+export const GET = (async ({ params }) => {
+	const file = await s3.getObject(AWS_S3_DEFAULT_BUCKET, `${params.project}/${params.file}`);
+	file.on('error', (err: any) => {
+		console.log(err);
+	});
+
+	let chunks: Buffer[] = [];
+	let buf;
+
+	file.on('data', (chunk) => {
+		chunks.push(Buffer.from(chunk));
+	});
+	file.on('end', () => {
+		buf = Buffer.concat(chunks);
+	});
+	await stream.finished(file)
+
+	let res = new Response(buf);
+	res.headers.set(
+		'Content-Type',
+		(() => {
+			switch (extname(params.file!)) {
+				case '.png':
+					return 'image/png';
+				case '.json':
+					return 'application/json';
+			}
+			return 'text/plain';
+		})()
+	);
+	res.headers.set('Cache-Control', 'max-age=604800')
+
+	return res;
+}) as RequestHandler;

src/routes/projects/[id]/+page.server.ts

@@ -0,0 +1,101 @@
+import { error, fail, redirect, type Actions } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import stream from 'node:stream/promises';
+import { db, s3, type Project } from '$lib';
+import { AWS_S3_DEFAULT_BUCKET } from '$env/static/private';
+import { extname } from 'node:path';
+
+export const prerender = false;
+export const ssr = false;
+
+export const load = (async ({ params }) => {
+	const res = await db.get<{ id: string; name: string }>(
+		'SELECT ID, Name FROM projects WHERE ID = ?',
+		params.id
+	);
+
+	if (res === undefined) {
+		return fail(404, { reason: 'Failed to find project into database' });
+	}
+
+	const project = await s3.getObject(AWS_S3_DEFAULT_BUCKET, `${params.id}/project.json`);
+	project.on('error', (err: any) => {
+		console.log(err);
+	});
+	let p: string = '';
+	project.on('data', (chunk: any) => {
+		p += chunk;
+	});
+	await stream.finished(project);
+	let proj = JSON.parse(p) as Project;
+
+	return { project: proj };
+}) as PageServerLoad;
+
+export const actions = {
+	delete: async ({ params }) => {
+		const res = await db.run('DELETE FROM projects WHERE ID = ?', params.id);
+
+		await s3.removeObject(AWS_S3_DEFAULT_BUCKET, `${params.id}/project.json`);
+
+		if (res === undefined) {
+			return fail(500, { reason: 'Failed to delete project' });
+		}
+
+		redirect(303, '/');
+	},
+	'delete-file': async ({ params, request }) => {
+		const form = await request.formData();
+		const file = form?.get('file') as string;
+
+		const project = await s3.getObject(AWS_S3_DEFAULT_BUCKET, `${params.id}/project.json`);
+		project.on('error', (err: any) => {
+			console.log(err);
+		});
+		let p: string = '';
+		project.on('data', (chunk: any) => {
+			p += chunk;
+		});
+		await stream.finished(project);
+		let proj = JSON.parse(p) as Project;
+
+		proj.pages = proj.pages.filter((p) => p.src != file);
+
+		await s3.removeObject(AWS_S3_DEFAULT_BUCKET, `${params.id}/${file}`);
+		await s3.putObject(AWS_S3_DEFAULT_BUCKET, `${params.id}/project.json`, JSON.stringify(proj));
+	},
+	addpage: async ({ request, params }) => {
+		const form = await request.formData();
+		const file = form?.get('file') as File;
+		const title = form?.get('title') as string;
+		const color = form?.get('color') as string;
+		const iteractions = form?.get('iteractions') as string;
+
+		console.log(file);
+
+		const project = await s3.getObject(AWS_S3_DEFAULT_BUCKET, `${params.id}/project.json`);
+		project.on('error', (err: any) => {
+			console.log(err);
+		});
+		let p: string = '';
+		project.on('data', (chunk: any) => {
+			p += chunk;
+		});
+		await stream.finished(project);
+		let proj = JSON.parse(p) as Project;
+
+		const filename = `${crypto.randomUUID().split('-')[0]}${extname(file?.name)}`;
+
+		proj.pages.push({
+			title: title,
+			src: filename,
+			background: color,
+			iteraction: JSON.parse(iteractions)
+		});
+
+		const buf = Buffer.from(await file.arrayBuffer());
+
+		await s3.putObject(AWS_S3_DEFAULT_BUCKET, `${params.id}/project.json`, JSON.stringify(proj));
+		await s3.putObject(AWS_S3_DEFAULT_BUCKET, `${params.id}/${filename}`, buf);
+	}
+} as Actions;

src/routes/projects/[id]/+page.svelte

@@ -0,0 +1,384 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { PageData } from './$types';
+	import { arrayBufferToBlob } from 'blob-util';
+	import IImage from './IteractiveImage.svelte';
+
+	export let data: PageData;
+	const pages = data.project.pages;
+
+	let modal = false;
+
+	let reader: Element;
+	let scroll: number;
+	let color = hexToRgb(pages[0]?.background ?? '#181818');
+	let currentPage = 0;
+	let colorPerc = 0;
+	let currentColor = color;
+	let nextColor = hexToRgb(pages[1]?.background ?? pages[0]?.background ?? '#181818');
+	let currentChunk = 0;
+	let nextChunk = 0;
+
+	let browser = false;
+	let maxScroll = 0;
+	let chunk = 0;
+	let chunks: number[] = [];
+	onMount(() => {
+		browser = true;
+		maxScroll = Math.max(reader.scrollHeight - reader.clientHeight);
+	});
+
+	function hexToRgb(color: string): number[] {
+		return [
+			parseInt(color.substring(1, 3), 16) / 255,
+			parseInt(color.substring(3, 5), 16) / 255,
+			parseInt(color.substring(5, 7), 16) / 255
+		];
+	}
+
+	function rgbToHex(rgb: number[]): string {
+		return `#${
+			Math.round(rgb[0] * 255)
+				.toString(16)
+				.padStart(2, '0') +
+			Math.round(rgb[1] * 255)
+				.toString(16)
+				.padStart(2, '0') +
+			Math.round(rgb[2] * 255)
+				.toString(16)
+				.padStart(2, '0')
+		}`;
+	}
+
+	function blendRgbColors(c1: number[], c2: number[], ratio: number): number[] {
+		return [
+			c1[0] * (1 - ratio) + c2[0] * ratio,
+			c1[1] * (1 - ratio) + c2[1] * ratio,
+			c1[2] * (1 - ratio) + c2[2] * ratio
+		];
+	}
+
+	let fileInput: Element;
+	let blobUrl: string | undefined = undefined;
+	let currentIteraction: { x: number; y: number; link: string };
+	let iteractionUrl = '';
+	let iteractions: { x: number; y: number; link: string }[] = [];
+	let imageElement: Element;
+	let imageX = 0;
+	let imageY = 0;
+	let imageWidth = 0;
+	let imageHeight = 0;
+	function readFile(file: Blob) {
+		let reader = new FileReader();
+		reader.onloadend = function (e) {
+			let buf = e.target?.result;
+			let blob = arrayBufferToBlob(buf as ArrayBuffer, file.type);
+			blobUrl = window.URL.createObjectURL(blob);
+		};
+
+		reader.readAsArrayBuffer(file);
+	}
+
+	let temp: any;
+
+	let images: Map<string, { width: number; height: number }> = new Map();
+</script>
+
+{#if browser}
+	<pre style="position: fixed; bottom: 0; font-size: 0.6rem;">
+<code
+			>{JSON.stringify(
+				{
+					page: currentPage,
+					color: {
+						background: rgbToHex(color),
+						current: rgbToHex(currentColor),
+						next: rgbToHex(nextColor),
+						percentage: Math.round(colorPerc)
+					},
+					scroll: {
+						current: scroll,
+						max: maxScroll,
+						chunks: chunks,
+						currentChunk: currentChunk,
+						nextChunk: nextChunk
+					}
+				},
+				null,
+				2
+			)}
+</code>
+</pre>
+
+	<details style="position: fixed; bottom: 0; font-size: 0.6rem;">
+		<pre>
+<code>{JSON.stringify(pages)}</code>
+</pre>
+	</details>
+{/if}
+
+<dialog open={modal}>
+	<article>
+		<header>
+			<button
+				aria-label="Close"
+				rel="prev"
+				on:click={() => {
+					modal = false;
+				}}
+			></button>
+			<p>
+				<strong>Add new page</strong>
+			</p>
+		</header>
+		<form method="POST" action="?/addpage" enctype="multipart/form-data">
+			<input type="text" required placeholder="Page title" name="title" />
+			<input type="color" required placeholder="Background color" name="color" />
+			{#if blobUrl}
+				<div class="blob-image">
+					<div class="blob-image-image">
+						<div
+							class="iteraction-box"
+							style={`${[
+								`margin-left:${Math.round((imageX / 100) * imageWidth)}px;`,
+								`margin-top:${Math.round((imageY / 100) * imageHeight)}px;`
+							].join('')} pointer-events: none;`}
+						></div>
+						{#each iteractions as i}
+							<a
+								class="iteraction-box"
+								href={i.link}
+								style={[
+									`margin-left:${Math.round((i.x / 100) * imageWidth)}px;`,
+									`margin-top:${Math.round((i.y / 100) * imageHeight)}px;`
+								].join('')}
+							></a>
+						{/each}
+						<img
+							style="margin: auto 0;"
+							src={blobUrl}
+							bind:this={imageElement}
+							on:mousemove={(e) => {
+								let rect = imageElement.getBoundingClientRect();
+								imageX = Math.round(((e.clientX - rect.left) / rect.width) * 100);
+								imageY = Math.round(((e.clientY - rect.top) / rect.height) * 100);
+								imageWidth = rect.width;
+								imageHeight = rect.height;
+							}}
+							on:click={() => {
+								currentIteraction ||= { x: 0, y: 0, link: '' };
+								currentIteraction.x = imageX;
+								currentIteraction.y = imageY;
+							}}
+							alt=""
+						/>
+					</div>
+					<fieldset role="group">
+						<input
+							type="url"
+							placeholder="Iteraction url"
+							bind:value={iteractionUrl}
+							on:change={() => {
+								currentIteraction ||= { x: 0, y: 0, link: '' };
+								currentIteraction.link = iteractionUrl;
+							}}
+							on:mouseout={() => {
+								currentIteraction ||= { x: 0, y: 0, link: '' };
+								currentIteraction.link = iteractionUrl;
+							}}
+						/>
+						<input
+							type="button"
+							value="Add"
+							on:click|preventDefault={() => {
+								iteractions.push({
+									x: currentIteraction.x,
+									y: currentIteraction.y,
+									link: currentIteraction.link
+								});
+								iteractions = iteractions;
+							}}
+						/>
+					</fieldset>
+					<div>
+						<code>{imageX} {imageY}</code>
+						<code>
+							Iteraction: {JSON.stringify(currentIteraction)}
+						</code>
+						<input
+							style="display:hidden;"
+							type="text"
+							value={JSON.stringify(iteractions.filter(Boolean))}
+							name="iteractions"
+						/>
+					</div>
+				</div>
+			{/if}
+			<input
+				type="file"
+				required
+				name="file"
+				bind:this={fileInput}
+				on:change={() => {
+					// @ts-ignore
+					readFile(fileInput.files[0]);
+				}}
+			/>
+			<input type="submit" value="Add page" />
+		</form>
+	</article>
+</dialog>
+<section class="project">
+	<aside>
+		<a data-sveltekit-reload href="/" style="font-size: 0.5rem;">Return home</a>
+		<section>
+			<h1>{data.project.title}</h1>
+			<p class="id">{data.project.id}</p>
+			<button
+				class="add"
+				on:click={() => {
+					modal = true;
+				}}>Add page</button
+			>
+			<form method="POST">
+				<input type="submit" formaction="?/delete" value="Delete" class="pico-background-red-500" />
+			</form>
+		</section>
+	</aside>
+	{#key maxScroll}
+		{#if browser}
+			<article
+				class="reader"
+				style={`--bg-color: rgba(${color.map((c) => c * 255).join(',')}, 0.8)`}
+				bind:this={reader}
+				on:scroll={() => {
+					scroll = reader.scrollTop;
+					if (maxScroll === 0) {
+						maxScroll = Math.max(reader.scrollHeight - reader.clientHeight);
+						chunk = Math.round(maxScroll / pages.length);
+						for (let i = 0; i < pages.length; i++) {
+							chunks = [...chunks, chunk * i];
+						}
+					}
+					let i = chunks.findIndex((c) => c > scroll - chunk);
+					currentColor = hexToRgb(pages[i]?.background);
+					nextColor = pages[i + 1]?.background ? hexToRgb(pages[i + 1]?.background) : currentColor;
+
+					currentChunk = chunks[i];
+					nextChunk = chunks[i + 1] ?? maxScroll;
+
+					colorPerc = ((scroll - currentChunk) / (nextChunk - currentChunk)) * 100;
+
+					color = blendRgbColors(currentColor, nextColor, colorPerc / 100);
+
+					currentPage = i;
+				}}
+			>
+				<div class="pages">
+					{#each pages as page, key}
+						{@const coord = key * chunk}
+						<div class="page" style={`background-color:${page.background}`}>
+							<IImage {page} projectId={data.project.id} />
+							<form method="POST" action="?/delete-file" class="delete-file">
+								<fieldset role="group">
+									<input type="text" value={`${page.src}`} name="file" />
+									<input type="submit" value="Delete page" class="pico-background-red-500" />
+								</fieldset>
+							</form>
+						</div>
+						<code>{coord}</code>
+					{/each}
+				</div>
+			</article>
+		{/if}
+	{/key}
+</section>
+
+<style>
+	h1 {
+		font-size: 1.5rem;
+	}
+
+	.id {
+		font-size: 0.5rem;
+		opacity: 0.3;
+	}
+
+	.iteraction-box {
+		width: 30px;
+		height: 30px;
+		display: block;
+		background-color: #ff0000;
+		opacity: 0.3;
+		position: absolute;
+		z-index: 100;
+	}
+
+	.blob-image-image {
+		position: relative;
+	}
+
+	.reader {
+		display: flex;
+
+		width: 80vw;
+		height: 100vh;
+
+		justify-content: center;
+		padding-top: 5rem;
+		padding-bottom: 5rem;
+		margin-bottom: 0;
+
+		background-color: var(--bg-color);
+		overflow-y: scroll;
+	}
+
+	.page {
+		width: calc(1080px / 3.5);
+		min-height: calc(1920px / 3.5);
+		@media (min-width: 1024px) {
+			width: calc(1080px / 2.5);
+			min-height: calc(1920px / 2.5);
+		}
+		background-color: #fff;
+
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+
+		padding: 0;
+
+		box-shadow: 0rem 1rem 1rem 0rem rgba(0, 0, 0, 0.5);
+
+		& form {
+			margin: 1rem;
+			margin-bottom: 0;
+		}
+	}
+	.pages {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.project {
+		display: flex;
+		margin-bottom: 0;
+	}
+
+	.add {
+		width: 100%;
+		margin-bottom: 0.5rem;
+	}
+
+	aside {
+		padding: 1rem;
+		width: 20vw;
+		& * {
+			font-size: 0.8rem !important;
+			@media (min-width: 1024px) {
+				font-size: unset;
+			}
+		}
+	}
+</style>

src/routes/projects/[id]/IteractiveImage.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	type Page = {
+		title: string;
+		src: string;
+		background: string;
+		iteraction: Iteraction[];
+	};
+
+	type Iteraction = {
+		x: number;
+		y: number;
+		link: string;
+	};
+
+	export let page: Page;
+	export let projectId: string;
+
+	let image: Element;
+	let width: number;
+	let height: number;
+	let browser = false;
+
+	function setCoords() {
+		let rect = image.getBoundingClientRect();
+		width = rect.width;
+		height = rect.height;
+	}
+
+	onMount(() => {
+		setCoords();
+		browser = true;
+	});
+</script>
+
+<div style="position: relative;" on:resize={() => setCoords()}>
+	{#if page.iteraction !== undefined && browser}
+		{#each page.iteraction as i}
+			<a
+				class="iteraction-box"
+				href={i.link}
+				target="_blank"
+				style={[
+					`margin-left:${(i.x / 100) * width}px;`,
+					`margin-top:${(i.y / 100) * height}px;`
+				].join('')}
+			></a>
+		{/each}
+	{/if}
+	<img bind:this={image} width="1080" height="1920" src={`/files/${projectId}/${page.src}`} />
+</div>
+
+<style>
+	.iteraction-box {
+		width: 30px;
+		height: 30px;
+		display: block;
+		background-color: #ff0000;
+		opacity: 0.3;
+		position: absolute;
+		z-index: 100;
+	}
+</style>

static/static.go

@@ -1,24 +0,0 @@
-package static
-
-import (
-	"embed"
-	"io/fs"
-)
-
-//go:generate tailwindcss -o static/css/wind.css
-
-//go:embed css/*.css
-var staticFiles embed.FS
-
-func Files(local ...bool) fs.FS {
-	var l bool
-	if len(local) > 0 {
-		l = local[0]
-	}
-
-	if !l {
-		return staticFiles
-	}
-
-	return staticFiles
-}

svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

temp.json

@@ -0,0 +1 @@
+{"id":"88ba21ea","title":"test project","pages":[]}

templates/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-	<link rel="stylesheet" href="/static/css/wind.css">
-</head>
-
-<body class="text-red-600">
-	<h1>Hello, world</h1>
-</body>
-
-</html>

templates/templates.go

@@ -1,18 +0,0 @@
-package templates
-
-import (
-	"embed"
-	"html/template"
-)
-
-//go:embed *.html test/*.html
-var embedded embed.FS
-
-var temps = template.Must(template.ParseFS(embedded,
-	"*.html",
-	"test/*.html",
-))
-
-func Templates() *template.Template {
-	return temps
-}

templates/test/test.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-
-</head>
-
-<body>
-	<h1>Hello, world 2</h1>
-</body>
-
-</html>

tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

vite.config.ts

@@ -0,0 +1,10 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	server: {
+		port: 3000,
+		host: '192.168.1.7'
+	}
+});