Moved frontend to SvelteKit

.vscode/launch.json

@@ -2,7 +2,7 @@
   "compounds": [
     {
       "name": "subabot",
-      "configurations": ["backend", "svelte"],
+      "configurations": ["backend", "frontend"],
       "stopAll": true
     }
   ],
@@ -24,13 +24,6 @@
       "request": "launch",
       "cwd": "${workspaceFolder}/frontend",
       "command": "npm run dev"
-    },
-    {
-      "name": "svelte",
-      "type": "node-terminal",
-      "request": "launch",
-      "cwd": "${workspaceFolder}/svelte",
-      "command": "npm run dev"
     }
   ]
 }

README.md

@@ -5,8 +5,7 @@
 ![PyPI - Python Version](https://img.shields.io/pypi/pyversions/fastapi)
 ![PyPI](https://img.shields.io/pypi/v/fastapi?label=FastAPI)
 ![npm](https://img.shields.io/npm/v/typescript?label=TypeScript&color=yellow)
-![npm](https://img.shields.io/npm/v/next?label=NextJS&color=purple)
-![npm](https://img.shields.io/npm/v/react?label=React&color=purple)
+![npm](https://img.shields.io/npm/v/svelte?label=Svelte&color=purple)
 
 _An AI-powered Slack alert bot to subscribe, classify and notify for keywords on RSS feeds._
 

Spacefile

@@ -4,16 +4,16 @@ icon: frontend/public/img/subabot-512.png
 micros:
   - name: frontend
     src: ./frontend
-    engine: next
+    engine: svelte-kit
     primary: true
     public: true
     dev: npm run dev
     presets:
       env:
-        - name: NEXT_PUBLIC_BACKEND_URL
-          description: Backend URL
+        - name: PUBLIC_BACKEND_URL
+          description: Subabot Backend URL
           default: "http://localhost:4200/api"
-        - name: NEXT_PUBLIC_SLACK_CLIENT_ID
+        - name: PUBLIC_SLACK_CLIENT_ID
           description: Slack Client ID
 
   - name: backend

backend/app/main.py

@@ -3,6 +3,7 @@
 
 from fastapi import FastAPI
 from fastapi.logger import logger
+from fastapi.middleware.cors import CORSMiddleware
 
 from .core import db_feeds, db_keywords, fetch_all
 from .deta import router as deta_router
@@ -18,6 +19,14 @@
 app.include_router(deta_router)
 app.mount("/slack", slack_app)
 
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
 
 @app.on_event("startup")
 async def on_startup():

frontend/.env.example

@@ -0,0 +1,3 @@
+PUBLIC_BACKEND_URL=
+
+PUBLIC_SLACK_CLIENT_ID=

frontend/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

frontend/.eslintrc.cjs

@@ -0,0 +1,30 @@
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};

frontend/.gitignore

@@ -1,36 +1,10 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
 .DS_Store
-.idea
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

frontend/.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest

frontend/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

frontend/.prettierrc

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

frontend/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/master/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.