switch to nuxt for front-end + use workspaces

drizzle.config.ts → backend/drizzle.config.ts

@@ -1,8 +1,8 @@
 import type { Config } from 'drizzle-kit'
 
 export default {
-	schema: './backend/database/schema.ts',
-	out: './backend/database/drizzle',
+	schema: './src/database/schema.ts',
+	out: './src/database/drizzle',
 	driver: 'pg',
 	dbCredentials: {
 		connectionString: process.env.DB_URL!

backend/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "mdrss-ts-backend",
+	"type": "module",
+	"license": "MPL-2.0",
+	"private": true,
+	"scripts": {
+		"start": "bun run ./src/index.ts",
+		"dev": "bun --watch run ./src/index.ts",
+		"generate": "drizzle-kit generate:pg",
+		"db:up": "bun run ./src/database/migrate.ts"
+	},
+	"devDependencies": {
+		"@types/bun": "latest",
+		"drizzle-kit": "^0.20.14",
+		"pg": "^8.11.5",
+		"vue": "3.4.21"
+	},
+	"peerDependencies": {
+		"typescript": "^5.0.0"
+	},
+	"prettier": {
+		"singleQuote": true,
+		"semi": false,
+		"trailingComma": "none",
+		"useTabs": true,
+		"arrowParens": "avoid"
+	},
+	"dependencies": {
+		"dayjs": "^1.11.10",
+		"drizzle-orm": "^0.30.7",
+		"feed": "^4.2.2",
+		"postgres": "^3.4.4"
+	}
+}

backend/src/database/migrate.ts

@@ -0,0 +1,13 @@
+import { drizzle } from 'drizzle-orm/postgres-js'
+import { migrate } from 'drizzle-orm/postgres-js/migrator'
+import postgres from 'postgres'
+
+if (!process.env.DB_URL) throw new Error('DB_URL is required')
+
+const migrationClient = postgres(process.env.DB_URL, { max: 1 })
+await migrate(drizzle(migrationClient), {
+	migrationsFolder: 'src/database/drizzle'
+})
+
+console.log('Done.')
+process.exit(0)

backend/routes/frontend.ts → backend/src/routes/frontend.ts

@@ -1,6 +1,6 @@
 import path from 'path'
 
-const FRONTEND_PATH = path.join(__dirname, '../../frontend')
+const FRONTEND_PATH = path.join(__dirname, '../../../frontend/.output/public')
 
 export const frontendHandler = async (
 	req: Request,

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

frontend/README.md

@@ -0,0 +1,11 @@
+# Nuxt 3
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+bun run dev
+```

frontend/drizzle.config.ts

@@ -0,0 +1,10 @@
+import type { Config } from 'drizzle-kit'
+
+export default {
+	schema: './src/server/database/schema.ts',
+	out: './src/server/database/drizzle',
+	driver: 'pg',
+	dbCredentials: {
+		connectionString: process.env.DB_URL!
+	}
+} satisfies Config

frontend/nuxt.config.ts

@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+	devtools: { enabled: true },
+	srcDir: 'src',
+	modules: ['@nuxt/ui']
+})

frontend/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "mdrss-ts-frontend",
+	"license": "MPL-2.0",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "nuxt build",
+		"dev": "nuxt dev",
+		"generate": "nuxt generate",
+		"preview": "nuxt preview",
+		"postinstall": "nuxt prepare"
+	},
+	"dependencies": {
+		"@nuxt/ui": "^2.15.1",
+		"dayjs": "^1.11.10",
+		"drizzle-orm": "^0.30.7",
+		"feed": "^4.2.2",
+		"nuxt": "^3.11.2",
+		"postgres": "^3.4.4",
+		"vue": "^3.4.21",
+		"vue-router": "^4.3.0"
+	},
+	"devDependencies": {
+		"@types/bun": "latest",
+		"drizzle-kit": "^0.20.14",
+		"pg": "^8.11.5"
+	},
+	"prettier": {
+		"singleQuote": true,
+		"semi": false,
+		"trailingComma": "none",
+		"useTabs": true,
+		"arrowParens": "avoid"
+	}
+}

frontend/src/app.config.ts

@@ -0,0 +1,5 @@
+export default defineAppConfig({
+	ui: {
+		primary: 'violet'
+	}
+})

frontend/src/app.vue

@@ -0,0 +1,86 @@
+<template>
+	<div class="mx-auto max-w-3xl p-4 mb-4 flex flex-col gap-4">
+		<div class="flex flex-col gap-2">
+			<h1 class="text-3xl font-bold">MangaDex Feed Generator</h1>
+			<p>
+				Create RSS, Atom and JSON feeds for Mangadex. The project is
+				<a href="https://github.com/kindlyfire/mdrss-ts" target="_blank"
+					>open-source</a
+				>.
+			</p>
+		</div>
+
+		<div class="flex flex-col gap-2">
+			<h2 class="text-xl font-bold">1. Configure feed</h2>
+			<p>
+				Each query can filter by manga, groups, uploader, translated language,
+				original language, and tags (inclusive or exclusive). All queries, up to
+				10, will be combined into a single feed.
+			</p>
+
+			<Query v-for="(q, i) in queries" :key="i" :query="q" />
+
+			<UButton
+				square
+				variant="soft"
+				class="justify-center"
+				@click="queries.push([{ type: 'manga', value: '' }])"
+			>
+				<UIcon name="ph:plus-bold" dynamic class="text-xl" />
+				Add query
+			</UButton>
+		</div>
+
+		<div class="flex flex-col gap-2">
+			<h2 class="text-xl font-bold">2. Add URL to RSS reader</h2>
+			<div class="card flex items-center gap-2">
+				<UButton square @click="copyToClipboard">
+					<UIcon name="ph:copy-bold" dynamic class="text-xl" />
+				</UButton>
+				<div class="truncate font-mono">{{ url }}</div>
+			</div>
+		</div>
+	</div>
+
+	<UNotifications />
+</template>
+
+<script lang="ts" setup>
+import type { Query } from './types'
+const toast = useToast()
+
+const queries = reactive([
+	[
+		{
+			type: 'manga',
+			value: ''
+		}
+	]
+]) as Query[]
+
+const url = computed(() => {
+	const params = new URLSearchParams()
+	for (const q of queries) {
+		params.append('q', q.map(v => v.type + ':' + v.value).join(','))
+	}
+	return `${window.location.origin}/feed?${params}`
+})
+
+async function copyToClipboard() {
+	await navigator.clipboard.writeText(url.value)
+	toast.add({
+		title: 'Copied to clipboard',
+		timeout: 2000
+	})
+}
+</script>
+
+<style>
+.card {
+	@apply border shadow p-2 rounded-xl;
+}
+
+a {
+	@apply text-primary-500 underline;
+}
+</style>

frontend/src/components/Query.vue

@@ -0,0 +1,64 @@
+<template>
+	<div class="card flex flex-col gap-2">
+		<div class="flex items-center gap-2" v-for="(m, i) in query">
+			<USelect
+				:options="options"
+				option-attribute="label"
+				value-attribute="value"
+				v-model="m.type"
+			></USelect>
+			<UInput class="grow font-mono" v-model="m.value"></UInput>
+			<UButton square variant="soft" @click="query.splice(i, 1)">
+				<UIcon name="ph:x-bold" dynamic class="text-xl" />
+			</UButton>
+		</div>
+		<UButton
+			square
+			variant="soft"
+			class="justify-center"
+			@click="query.length < 10 && query.push({ type: 'manga', value: '' })"
+		>
+			<UIcon name="ph:plus-bold" dynamic class="text-xl" />
+			Add matcher
+		</UButton>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { Query } from '../types'
+
+const props = defineProps<{
+	query: Query
+}>()
+
+const options = [
+	{
+		label: 'Manga ID',
+		value: 'manga'
+	},
+	{
+		label: 'Group ID',
+		value: 'groups'
+	},
+	{
+		label: 'Uploader ID',
+		value: 'user'
+	},
+	{
+		label: 'Translated language',
+		value: 'tl'
+	},
+	{
+		label: 'Original language',
+		value: 'ol'
+	},
+	{
+		label: 'Tags (inclusive)',
+		value: 'tags'
+	},
+	{
+		label: 'Tags (exclusive)',
+		value: 'ntags'
+	}
+]
+</script>

frontend/src/types.ts

@@ -0,0 +1,6 @@
+export interface QueryMatcher {
+	type: 'manga' | 'user' | 'group' | 'ol' | 'tl'
+	value: string
+}
+
+export type Query = QueryMatcher[]

frontend/tailwind.config.js

@@ -0,0 +1,14 @@
+const colors = require('tailwindcss/colors')
+
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ['./src/**/*.{vue,ts}'],
+	theme: {
+		extend: {
+			colors: {
+				primary: colors.violet
+			}
+		}
+	},
+	plugins: []
+}

frontend/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}