implement bookmark tagging

2025-05-21 13:18:16 +01:00
parent f048dee6e2
commit b0d458e5ca
20 changed files with 826 additions and 362 deletions
--- a/packages/server/src/auth/auth-token.ts
+++ b/packages/server/src/auth/auth-token.ts
@@ -2,5 +2,5 @@ import { db } from "~/database.ts"

 function deleteAuthTokenById(id: string) {
 	const query = db.query<void, { id: string }>("DELETE FROM auth_tokens WHERE id = $id")
-	query.run({ id })
+	query.run({ k})
 }
--- a/packages/server/src/bookmark/bookmark.ts
+++ b/packages/server/src/bookmark/bookmark.ts
@@ -1,107 +1,171 @@
+import type { Bookmark, BookmarkTag } from "@markone/core/bookmark"
 import type { User } from "@markone/core/user"
 import { Readability } from "@mozilla/readability"
 import { JSDOM } from "jsdom"
 import { db } from "~/database.ts"
 import { DEMO_BOOKMARKS } from "./demo-bookmarks.ts"
-import type { Bookmark, BookmarkTag } from "@markone/core/bookmark"

 class LinkUnreachable {}
 class UnsupportedLink {}

-interface CachedPage {
+interface CachedContent {
 	title: string
-	readableHtml: string
+	mimeType: string
+	data: Buffer | null
 }

 function insertDemoBookmarks(user: User) {
 	const query = db.query(`
-INSERT OR IGNORE INTO bookmarks (id, user_id, kind, title, url)
-VALUES ($id, $userId, $kind, $title, $url)
+INSERT OR IGNORE INTO bookmarks (id, user_id, title, url, mime_type, content)
+VALUES ${Array(DEMO_BOOKMARKS.length).fill("(?,?,?,?,NULL,NULL)").join(",")}
 `)
-	const insert = db.transaction((bookmarks) => {
-		for (const bookmark of bookmarks) {
-			query.run({
-				id: bookmark.id,
-				userId: user.id,
-				kind: bookmark.kind,
-				title: bookmark.title,
-				url: bookmark.url,
-			})
-		}
-	})
-	insert(DEMO_BOOKMARKS)
+
+	const args: Parameters<typeof query.run> = []
+	for (const bookmark of DEMO_BOOKMARKS) {
+		args.push(bookmark.id, user.id, bookmark.title, bookmark.url)
+	}
+
+	query.run(...args)
 }

-function findBookmarkHtml(id: string, user: User): string | null {
-	const query = db.query("SELECT content_html FROM bookmarks WHERE id = $id AND user_id = $userId")
+function insertBookmark(bookmark: Bookmark, cachedContent: CachedContent | null, user: User) {
+	const query = db.query(`
+INSERT INTO bookmarks (id, user_id, title, url, mime_type, content)
+VALUES ($id, $userId, $title, $url, $mimeType, $content)
+`)
+	query.run({
+		id: bookmark.id,
+		userId: user.id,
+		title: bookmark.title,
+		url: bookmark.url,
+		mimeType: cachedContent?.mimeType || null,
+		content: cachedContent?.data ?? null,
+	})
+}
+
+function findBookmarkCachedContent(id: string, user: User): Buffer | null {
+	const query = db.query<{ content: Buffer | null }, { id: string; userId: string }>(
+		"SELECT content FROM bookmarks WHERE id = $id AND user_id = $userId",
+	)
 	const row = query.get({ id, userId: user.id })
-	if (!row) {
-		return null
-	}
-	const { content_html } = row as { content_html: string }
-	return content_html
+	return row?.content ?? null
 }

 function findBookmark(id: string, user: User): Bookmark | null {
 	const bookmarkQuery = db.query<Bookmark, { id: string; userId: string }>(
-		"SELECT id, kind, title, url FROM bookmarks WHERE id = $id AND user_id = $userId",
+		"SELECT id, title, url FROM bookmarks WHERE id = $id AND user_id = $userId",
 	)
 	const bookmark = bookmarkQuery.get({ id, userId: user.id })
 	if (!bookmark) {
 		return null
 	}

-	const tagsQuery = db.query<BookmarkTag, { id: string }>("SELECT id, name FROM tags WHERE bookmark_id = $id")
-	const tags = tagsQuery.all({ id })
+	const tagsQuery = db.query<BookmarkTag, { bookmarkId: string }>(`
+		SELECT tags.id, tags.name FROM tags
+		INNER JOIN bookmark_tags
+		ON bookmark_tags.tag_id = tags.id AND bookmark_tags.bookmark_id = $bookmarkId
+  `)
+	const tags = tagsQuery.all({ bookmarkId: id })

 	bookmark.tags = tags

 	return bookmark
 }

-async function cacheWebsite(url: string): Promise<CachedPage | null> {
-	const websiteText = await fetch(url)
-		.catch(() => {
-			throw new LinkUnreachable()
-		})
-		.then((res) => res.text())
-		.catch(() => {
+async function cacheContent(url: string): Promise<CachedContent | null> {
+	const res = await fetch(url).catch(() => {
+		throw new LinkUnreachable()
+	})
+
+	let contentType = res.headers.get("Content-Type")
+	if (!contentType) {
+		contentType = "application/octet-stream"
+	}
+
+	if (contentType.startsWith("text/html")) {
+		const matches = contentType.match(/charset=([^; ]+)/gi)
+		let charset: string
+		if (!matches || matches.length <= 2) {
+			charset = "utf-8"
+		} else {
+			charset = matches[1] || "utf-8"
+		}
+
+		const websiteText = await res.text().catch(() => {
 			throw new UnsupportedLink()
 		})

-	const dom = new JSDOM(websiteText, { url })
-	const reader = new Readability(dom.window.document)
-	const article = reader.parse()
+		const dom = new JSDOM(websiteText, { url })
+		const reader = new Readability(dom.window.document)
+		const article = reader.parse()

-	if (!article) {
-		return null
+		if (!article) {
+			return null
+		}
+
+		if (article.content) {
+			const newDom = new JSDOM(article.content, { url })
+			const doc = newDom.window.document
+
+			const lightStyleLink = doc.createElement("link")
+			lightStyleLink.rel = "stylesheet"
+			lightStyleLink.href = "/reader-styles/sakura.css"
+			lightStyleLink.media = "screen"
+
+			const darkStyleLink = doc.createElement("link")
+			darkStyleLink.rel = "stylesheet"
+			darkStyleLink.href = "/reader-styles/sakura-dark.css"
+			darkStyleLink.media = "screen and (prefers-color-scheme: dark)"
+
+			doc.head.appendChild(lightStyleLink)
+			doc.head.appendChild(darkStyleLink)
+
+			article.content = newDom.serialize()
+		}
+
+		return {
+			title: article.title || "Untitled",
+			mimeType: "text/html",
+			data: article.content ? Buffer.from(article.content, charset as BufferEncoding) : null,
+		}
 	}

-	if (article.content) {
-		const newDom = new JSDOM(article.content, { url })
-		const doc = newDom.window.document
-
-		const lightStyleLink = doc.createElement("link")
-		lightStyleLink.rel = "stylesheet"
-		lightStyleLink.href = "/reader-styles/sakura.css"
-		lightStyleLink.media = "screen"
-
-		const darkStyleLink = doc.createElement("link")
-		darkStyleLink.rel = "stylesheet"
-		darkStyleLink.href = "/reader-styles/sakura-dark.css"
-		darkStyleLink.media = "screen and (prefers-color-scheme: dark)"
-
-		doc.head.appendChild(lightStyleLink)
-		doc.head.appendChild(darkStyleLink)
-
-		article.content = newDom.serialize()
-	}
-
-	return {
-		title: article.title || "Untitled",
-		readableHtml: article.content || "",
-	}
+	throw new UnsupportedLink()
 }

-export { insertDemoBookmarks, findBookmark, findBookmarkHtml, cacheWebsite }
+function assignTagsToBookmark(tags: BookmarkTag[], bookmark: Bookmark) {
+	const query = db.query(`
+		INSERT INTO bookmark_tags (tag_id, bookmark_id)
+		VALUES ${Array(tags.length).fill("(?,?)").join(",")}
+	`)
+
+	const args: Parameters<typeof query.run> = []
+	for (const tag of tags) {
+		args.push(tag.id)
+		args.push(bookmark.id)
+	}
+
+	query.run(...args)
+}
+
+function findBookmarkTags(bookmark: Bookmark): BookmarkTag[] {
+	const query = db.query<BookmarkTag, { bookmarkId: string }>(`
+		SELECT tags.name as name, tags.id as id FROM bookmark_tags
+		INNER JOIN tags
+		ON tags.id = bookmark_tags.tag_id
+		WHERE bookmark_tags.bookmark_id = $bookmarkId
+	`)
+	const tags = query.all({ bookmarkId: bookmark.id })
+	return tags
+}
+
+export {
+	insertDemoBookmarks,
+	insertBookmark,
+	findBookmark,
+	findBookmarkCachedContent,
+	cacheContent,
+	assignTagsToBookmark,
+	findBookmarkTags,
+}
 export { LinkUnreachable, UnsupportedLink }
--- a/packages/server/src/bookmark/demo-bookmarks.ts
+++ b/packages/server/src/bookmark/demo-bookmarks.ts
@@ -2,64 +2,94 @@ import type { Bookmark } from "@markone/core/bookmark"

 const DEMO_BOOKMARKS: Bookmark[] = [
 	{
-		kind: "link",
-		id: "01JTKBKVMWRRDR20PY9X4HGPVY",
-		title: "ULID Specification",
-		url: "https://github.com/ulid/spec",
+		id: "01HYN4G66K0000000000000000",
+		title: "Google",
+		url: "https://www.google.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000001", name: "search" },
+			{ id: "01HYN4G66K0000000000000002", name: "tech" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMW8392A9361PFGZEGM",
-		title: "Another Example Site",
-		url: "https://www.example.net",
+		id: "01HYN4G66K0000000000000003",
+		title: "MDN Web Docs",
+		url: "https://developer.mozilla.org",
+		tags: [
+			{ id: "01HYN4G66K0000000000000004", name: "documentation" },
+			{ id: "01HYN4G66K0000000000000005", name: "web development" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMW3YKY4CMANEK7502N",
-		title: "Documentation Hub",
-		url: "https://docs.example.com",
+		id: "01HYN4G66K0000000000000006",
+		title: "GitHub",
+		url: "https://github.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000007", name: "code" },
+			{ id: "01HYN4G66K0000000000000008", name: "version control" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMWHH7QG0CFQ6Q40E2G",
-		title: "API Reference",
-		url: "https://api.example.com/docs",
+		id: "01HYN4G66K0000000000000009",
+		title: "Stack Overflow",
+		url: "https://stackoverflow.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000010", name: "q&a" },
+			{ id: "01HYN4G66K0000000000000011", name: "programming" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMWVR4T3KXXB3PHZD60",
-		title: "Blog Posts",
-		url: "https://blog.example.com",
+		id: "01HYN4G66K0000000000000012",
+		title: "TypeScript Handbook",
+		url: "https://www.typescriptlang.org/docs/handbook/intro.html",
+		tags: [
+			{ id: "01HYN4G66K0000000000000013", name: "typescript" },
+			{ id: "01HYN4G66K0000000000000014", name: "documentation" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMWAP0GGKWBN7Z3CYAM",
-		title: "Support Forum",
-		url: "https://forum.example.com",
+		id: "01HYN4G66K0000000000000015",
+		title: "Reddit",
+		url: "https://www.reddit.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000016", name: "social" },
+			{ id: "01HYN4G66K0000000000000017", name: "news" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMW1YJB63F2YCMZNGFE",
-		title: "Tutorials",
-		url: "https://tutorials.example.com",
+		id: "01HYN4G66K0000000000000018",
+		title: "YouTube",
+		url: "https://www.youtube.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000019", name: "video" },
+			{ id: "01HYN4G66K0000000000000020", name: "entertainment" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMW93QYS2EK983RQS40",
-		title: "Resource Library",
-		url: "https://resources.example.com",
+		id: "01HYN4G66K0000000000000021",
+		title: "Figma",
+		url: "https://www.figma.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000022", name: "design" },
+			{ id: "01HYN4G66K0000000000000023", name: "ui/ux" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMW6NG61138T8SCRFYT",
-		title: "Community Page",
-		url: "https://community.example.com",
+		id: "01HYN4G66K0000000000000024",
+		title: "The New York Times",
+		url: "https://www.nytimes.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000025", name: "news" },
+			{ id: "01HYN4G66K0000000000000026", name: "current events" },
+		],
 	},
 	{
-		kind: "link",
-		id: "01JTKBKVMWDBKSXYHGFXC0HEZB",
-		title: "Project Repository",
-		url: "https://github.com/example/project",
+		id: "01HYN4G66K0000000000000027",
+		title: "ChatGPT",
+		url: "https://chat.openai.com",
+		tags: [
+			{ id: "01HYN4G66K0000000000000028", name: "ai" },
+			{ id: "01HYN4G66K0000000000000029", name: "chatbot" },
+		],
 	},
 ]

--- a/packages/server/src/bookmark/handlers.ts
+++ b/packages/server/src/bookmark/handlers.ts
@@ -1,11 +1,21 @@
+import type { Bookmark, BookmarkTag } from "@markone/core/bookmark"
 import { DEMO_USER } from "@markone/core/user"
-import type { LinkBookmark, BookmarkTag } from "@markone/core/bookmark"
 import { type } from "arktype"
 import { ulid } from "ulid"
 import { db } from "~/database.ts"
 import { HttpError } from "~/error.ts"
 import type { User } from "~/user/user.ts"
-import { LinkUnreachable, UnsupportedLink, findBookmarkHtml, cacheWebsite, findBookmark } from "./bookmark.ts"
+import {
+	LinkUnreachable,
+	UnsupportedLink,
+	assignTagsToBookmark,
+	cacheContent,
+	findBookmark,
+	findBookmarkCachedContent,
+	findBookmarkTags,
+	insertBookmark,
+} from "./bookmark.ts"
+import { insertTags } from "./tag.ts"

 const BOOKMARK_PAGINATION_LIMIT = 100

@@ -16,12 +26,15 @@ const ListUserBookmarksParams = type({

 const AddBookmarkRequestBody = type({
 	"title?": "string",
-	kind: "string",
 	url: "string",
 	tags: "string[]",
 	"force?": "boolean",
 })

+const AddTagRequestBody = type({
+	name: "string",
+})
+
 async function listUserBookmarks(request: Bun.BunRequest<"/api/bookmarks">, user: User) {
 	const queryParams = ListUserBookmarksParams(request.params)
 	if (queryParams instanceof type.errors) {
@@ -30,7 +43,7 @@ async function listUserBookmarks(request: Bun.BunRequest<"/api/bookmarks">, user

 	const listBookmarksQuery = db.query(
 		`
-SELECT bookmarks.id, bookmarks.kind, bookmarks.title, bookmarks.url FROM bookmarks
+SELECT bookmarks.id, bookmarks.title, bookmarks.url FROM bookmarks
 WHERE bookmarks.user_id = $userId
 ORDER BY bookmarks.id DESC
 LIMIT $limit OFFSET $skip
@@ -61,10 +74,11 @@ async function addBookmark(request: Bun.BunRequest<"/api/bookmarks">, user: User
 	if (user.id !== DEMO_USER.id) {
 		const body = AddBookmarkRequestBody(await request.json())
 		if (body instanceof type.errors) {
+			console.log(body)
 			throw new HttpError(400)
 		}

-		const cachedWebsite = await cacheWebsite(body.url).catch((error) => {
+		const cachedContent = await cacheContent(body.url).catch((error) => {
 			if (error instanceof LinkUnreachable) {
 				if (body.force) {
 					return null
@@ -78,48 +92,45 @@ async function addBookmark(request: Bun.BunRequest<"/api/bookmarks">, user: User
 			throw new HttpError(500)
 		})

-		const bookmark: LinkBookmark = {
-			kind: "link",
+		const tagNames = new Set(body.tags)
+		for (const tag of tagNames) {
+			if (/[\s#]/g.test(tag)) {
+				throw new HttpError(400, "InvalidTag", "Tags cannot contain '#' or whitespaces")
+			}
+		}
+
+		const bookmark: Bookmark = {
 			id: ulid(),
 			title: "",
 			url: body.url,
-			tags: body.tags.map((tag) => ({ id: ulid(), name: tag })),
+			tags: [],
 		}

 		if (body.title) {
 			bookmark.title = body.title
-		} else if (cachedWebsite?.title) {
-			bookmark.title = cachedWebsite.title
+		} else if (cachedContent?.title) {
+			bookmark.title = cachedContent.title
 		}

-		const query = db.query(`
-INSERT INTO bookmarks (id, user_id, kind, title, url, content_html)
-VALUES ($id, $userId, $kind, $title, $url, $html)
-`)
-		query.run({
-			id: bookmark.id,
-			userId: user.id,
-			kind: bookmark.kind,
-			title: bookmark.title,
-			url: bookmark.url,
-			html: cachedWebsite?.readableHtml ?? "",
-		})
+		insertBookmark(bookmark, cachedContent, user)
+
+		if (tagNames.size > 0) {
+			const tagQuery = db.query<Partial<BookmarkTag>, string[]>(`
+			SELECT id, name FROM tags
+			WHERE user_id = ? AND name IN (${Array(tagNames.size).fill("?").join(",")})
+		`)
+			const tags = tagQuery.all(user.id, ...tagNames)

-		const insertTagQuery = db.query(`
-INSERT INTO tags(id, bookmark_id, name)
-VALUES ($id, $bookmarkId, $name)
-`)
-		const insertTags = db.transaction((tags: BookmarkTag[]) => {
 			for (const tag of tags) {
-				insertTagQuery.run({
-					bookmarkId: bookmark.id,
-					id: tag.id,
-					name: tag.name,
-				})
+				if (tag.id && tag.name) {
+					bookmark.tags.push(tag as BookmarkTag)
+					tagNames.delete(tag.name)
+				}
 			}
-		})

-		insertTags(bookmark.tags)
+			const createdTags = insertTags([...tagNames], user)
+			assignTagsToBookmark(createdTags, bookmark)
+		}

 		return Response.json(bookmark, { status: 200 })
 	}
@@ -130,7 +141,7 @@ VALUES ($id, $bookmarkId, $name)
 async function fetchBookmark(request: Bun.BunRequest<"/api/bookmarks/:id">, user: User) {
 	switch (request.headers.get("Accept")) {
 		case "text/html": {
-			const html = findBookmarkHtml(request.params.id, user)
+			const html = findBookmarkCachedContent(request.params.id, user)
 			if (html === null) {
 				throw new HttpError(404)
 			}
@@ -155,4 +166,53 @@ async function fetchBookmark(request: Bun.BunRequest<"/api/bookmarks/:id">, user
 	}
 }

-export { addBookmark, fetchBookmark, listUserBookmarks, deleteUserBookmark }
+async function listUserTags(request: Bun.BunRequest<"/api/tags">, user: User) {
+	const query = db.query<BookmarkTag, { id: string }>("SELECT id, name FROM tags WHERE user_id = $id")
+	const tags = query.all({ id: user.id })
+	return Response.json(tags, { status: 200 })
+}
+
+async function createUserTag(request: Bun.BunRequest<"/api/tags">, user: User) {
+	if (user.id !== DEMO_USER.id) {
+		const query = db.query<void, { id: string; name: string; userId: string }>(
+			"INSERT INTO tags (id, name, user_id) VALUES ($id, $name, $userId)",
+		)
+		const json = await request.json().catch(() => {
+			throw new HttpError(400)
+		})
+		const body = AddTagRequestBody(json)
+		if (body instanceof type.errors) {
+			throw new HttpError(400)
+		}
+
+		const tag: BookmarkTag = {
+			id: ulid(),
+			name: body.name,
+		}
+
+		query.run({ id: tag.id, name: tag.name, userId: user.id })
+
+		return Response.json(tag, { status: 200 })
+	}
+
+	return Response.json(undefined, { status: 204 })
+}
+
+async function listBookmarkTags(request: Bun.BunRequest<"/api/bookmarks/:id/tags">, user: User) {
+	const bookmark = findBookmark(request.params.id, user)
+	if (!bookmark) {
+		throw new HttpError(404)
+	}
+	const tags = findBookmarkTags(bookmark)
+	return Response.json(tags, { status: 200 })
+}
+
+export {
+	addBookmark,
+	fetchBookmark,
+	listUserBookmarks,
+	deleteUserBookmark,
+	listUserTags,
+	createUserTag,
+	listBookmarkTags,
+}
--- a/packages/server/src/bookmark/tag.ts
+++ b/packages/server/src/bookmark/tag.ts
@@ -0,0 +1,29 @@
+import type { BookmarkTag } from "@markone/core/bookmark"
+import type { User } from "@markone/core/user"
+import { ulid } from "ulid"
+import { db } from "~/database.ts"
+
+function insertTags(names: string[], user: User): BookmarkTag[] {
+	console.log(names)
+	const insertTags = db.query(`
+		INSERT INTO tags (id, name, user_id)
+		VALUES ${Array(names.length).fill("(?,?,?)").join(",")}
+	`)
+
+	const args: Parameters<typeof insertTags.run> = []
+	const tags: BookmarkTag[] = []
+	for (const name of names) {
+		const tag: BookmarkTag = {
+			id: ulid(),
+			name,
+		}
+		args.push(tag.id, tag.name, user.id)
+		tags.push(tag)
+	}
+
+	insertTags.run(...args)
+
+	return tags
+}
+
+export { insertTags }
--- a/packages/server/src/database.ts
+++ b/packages/server/src/database.ts
@@ -23,16 +23,22 @@ CREATE TABLE IF NOT EXISTS users(
 CREATE TABLE IF NOT EXISTS bookmarks(
 	id TEXT PRIMARY KEY,
 	user_id TEXT NOT NULL,
-	kind TEXT NOT NULL,
 	title TEXT NOT NULL,
 	url TEXT NOT NULL,
-	content_html TEXT NOT NULL
+	mime_type TEXT,
+	content BLOB
 );

 CREATE TABLE IF NOT EXISTS tags(
 	id TEXT PRIMARY KEY,
 	name TEXT NOT NULL,
-	bookmark_id TEXT NOT NULL
+	user_id TEXT NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS bookmark_tags(
+	tag_id TEXT NOT NULL,
+	bookmark_id TEXT NOT NULL,
+	PRIMARY KEY (tag_id, bookmark_id)
 );

 CREATE TABLE IF NOT EXISTS sessions(
--- a/packages/server/src/server.ts
+++ b/packages/server/src/server.ts
@@ -1,7 +1,15 @@
 import { authenticated, login, logout, signUp } from "./auth/auth.ts"
 import { startBackgroundSessionCleanup } from "./auth/session.ts"
 import { insertDemoBookmarks } from "./bookmark/bookmark.ts"
-import { addBookmark, listUserBookmarks, deleteUserBookmark, fetchBookmark } from "./bookmark/handlers.ts"
+import {
+	addBookmark,
+	listUserBookmarks,
+	deleteUserBookmark,
+	fetchBookmark,
+	listUserTags,
+	createUserTag,
+	listBookmarkTags,
+} from "./bookmark/handlers.ts"
 import { migrateDatabase } from "./database.ts"
 import { httpHandler, preflightHandler } from "./http-handler.ts"
 import { createDemoUser } from "./user/user.ts"
@@ -35,6 +43,13 @@ async function main() {
 					allowedHeaders: ["Accept"],
 				}),
 			},
+			"/api/bookmarks/:id/tags": {
+				GET: authenticated(listBookmarkTags),
+			},
+			"/api/tags": {
+				GET: authenticated(listUserTags),
+				POST: authenticated(createUserTag),
+			},
 		},

 		port: 8080,