revert svelte-kit to vanilla svelte (#161)

* feat: add new template

* feat: add fonts

* feat: use svelte-routing

* feat: override the old with new

* feat: transfer upload page

* feat: bring over search page

* feat: add protein

* feat: add venome molstar sub dir

* feat: new molstar version

* feat: add edit page

* feat: remove old frontend

* fix: article format

* docs: workspaces -W flag

* add a tag with lanks attr

* feat: add titles to the head

* feat: remove check since not applicable to new frontend

* feat: no need to build in github actions

* feat: instead of fork jsut cp entire venome

* feat: remove bloat form venome-molstar

* feat: remove eslint

* fix: search reloads page is wrong

* feat: add tutorials from call

* feat: add tutorials in navbar

* fix: get formatting to pass

.github/workflows/ci.yml

@@ -8,15 +8,6 @@ on:
  pull_request:
 
 jobs:
- check-frontend:
- runs-on: ubuntu-latest
- steps:
- - uses: actions/checkout@v4
- - name: Install modules
- run: cd frontend && npm i
- - name: Svelte check
- run: cd frontend && npm run check
-
  backend:
  runs-on: ubuntu-latest
  steps:
@@ -74,16 +65,6 @@ jobs:
  cd frontend/
  npm i
 
- - name: Build frontend
- run: |
- cd frontend/
- npm run build
-
- - name: Test Frontend
- run: |
- cd frontend/
- npm run test
-
  - name: Test Backend
  run: |
  cd backend/

backend/src/api/tutorials.py

@@ -0,0 +1,18 @@
+from fastapi import APIRouter
+from ..api_types import CamelModel
+
+router = APIRouter()
+
+
+class Tutorial(CamelModel):
+ title: str
+
+
+@router.get("/tutorials", response_model=list[Tutorial])
+def get_all_tutorials():
+ return [
+ Tutorial(title="Tutorial 1"),
+ Tutorial(title="Tutorial 2"),
+ Tutorial(title="Tutorial 3"),
+ Tutorial(title="Tutorial 4"),
+ ]

backend/src/server.py

@@ -1,11 +1,11 @@
 import os
 from .setup import disable_cors, init_fastapi_app, serve_endpoints
-from .api import users, search, protein
+from .api import users, search, protein, tutorials
 
 
 app = init_fastapi_app()
 disable_cors(app, origins=[os.environ["PUBLIC_FRONTEND_URL"]])
-serve_endpoints(app, modules=[users, search, protein])
+serve_endpoints(app, modules=[users, search, protein, tutorials])
 
 
 def export_app_for_docker():

docs/frontend.md

@@ -14,7 +14,7 @@ Check out Flowbite to use those ready-made svelte components (like buttons, drop
 
 ```bash
 cd frontend
-yarn add js_package_name
+yarn add -W js_package_name
 ```
 
 which adds the package locally (so your intellisense can detect it).

frontend/.dockerignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+venome-molstar/lib/

frontend/.gitignore

@@ -1,12 +1,24 @@
-.DS_Store
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-.vercel
-.output
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/.vscode/extensions.json

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

frontend/README.md

@@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/png" href="/favicon.png" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Venome</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.ts"></script>
+ </body>
+</html>

frontend/package.json

@@ -1,46 +1,42 @@
 {
- "name": "venome",
- "version": "0.0.1",
+ "name": "frontend",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
  "scripts": {
- "dev": "vite dev",
+ "dev": "vite",
  "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",
- "test": "vitest run",
- "lint": "prettier --plugin-search-dir . --check .",
- "format": "prettier --plugin-search-dir . --write .",
- "openapi": "npx openapi-typescript-codegen --input http://localhost:8000/openapi.json --output ./src/openapi --client fetch"
+ "openapi": "npx openapi-typescript-codegen --input http://localhost:8000/openapi.json --output ./src/lib/openapi --client fetch"
  },
  "devDependencies": {
  "@fontsource-variable/inter": "^5.0.16",
- "@fontsource/fira-mono": "^4.5.10",
- "@neoconfetti/svelte": "^1.0.0",
- "@sveltejs/adapter-auto": "^2.0.0",
- "@sveltejs/kit": "^1.20.4",
- "@types/cookie": "^0.5.1",
+ "@fontsource/fira-mono": "^5.0.8",
+ "@sveltejs/vite-plugin-svelte": "^3.0.1",
+ "@tsconfig/svelte": "^5.0.2",
+ "@types/cookie": "^0.6.0",
  "@types/js-cookie": "^3.0.6",
- "autoprefixer": "^10.4.14",
- "flowbite": "^2.1.1",
- "flowbite-svelte": "^0.44.19",
- "flowbite-svelte-icons": "^0.4.5",
- "openapi-typescript-codegen": "^0.25.0",
- "postcss": "^8.4.24",
- "postcss-load-config": "^4.0.1",
- "prettier": "^2.8.0",
- "prettier-plugin-svelte": "^2.10.1",
- "svelte": "^4.0.5",
- "svelte-check": "^3.4.3",
- "tailwindcss": "^3.3.2",
- "tslib": "^2.4.1",
- "typescript": "^5.0.0",
- "vite": "^4.4.2",
- "vitest": "^0.34.0"
+ "autoprefixer": "^10.4.16",
+ "flowbite": "^2.2.1",
+ "flowbite-svelte": "^0.44.22",
+ "flowbite-svelte-icons": "^1.3.1",
+ "openapi-typescript-codegen": "^0.27.0",
+ "postcss": "^8.4.32",
+ "postcss-load-config": "^5.0.2",
+ "svelte": "^4.2.8",
+ "svelte-check": "^3.6.2",
+ "tailwindcss": "^3.3.6",
+ "tslib": "^2.6.2",
+ "typescript": "^5.2.2",
+ "vite": "^5.0.8"
  },
- "type": "module",
  "dependencies": {
  "bibtex": "^0.9.0",
  "js-cookie": "^3.0.5",
- "marked": "^10.0.0"
- }
+ "marked": "^12.0.0",
+ "svelte-routing": "^2.11.0"
+ },
+ "workspaces": [
+ "venome-molstar"
+ ]
 }

frontend/postcss.config.cjs

@@ -2,12 +2,12 @@ const tailwindcss = require("tailwindcss");
 const autoprefixer = require("autoprefixer");
 
 const config = {
- plugins: [
- //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
- tailwindcss(),
- //But others, like autoprefixer, need to run after,
- autoprefixer,
- ],
+ plugins: [
+ //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+ tailwindcss(),
+ //But others, like autoprefixer, need to run after,
+ autoprefixer,
+ ],
 };
 
 module.exports = config;

frontend/src/App.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+ import Router from "./Router.svelte";
+</script>
+
+<Router />

frontend/src/Router.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+ import { Router, Route } from "svelte-routing";
+ import Header from "./lib/Header.svelte";
+ import Home from "./routes/Home.svelte";
+ import Search from "./routes/Search.svelte";
+ import Upload from "./routes/Upload.svelte";
+ import Login from "./routes/Login.svelte";
+ import Protein from "./routes/Protein.svelte";
+ import Error from "./routes/Error.svelte";
+ import Edit from "./routes/Edit.svelte";
+ import Tutorials from "./routes/Tutorials.svelte";
+</script>
+
+<Router>
+ <nav>
+ <Header />
+ </nav>
+ <main id="layout">
+ <Route path="/"><Home /></Route>
+ <Route path="/search"><Search /></Route>
+ <Route path="/upload"><Upload /></Route>
+ <Route path="/login"><Login /></Route>
+ <Route path="/tutorials"><Tutorials /></Route>
+ <Route path="/protein/:id" let:params
+ ><Protein urlId={params.id} /></Route
+ >
+ <Route path="/edit/:id" let:params><Edit urlId={params.id} /></Route>
+ <Route path="/*"><Error /></Route>
+ </main>
+</Router>