feat(SPA): screens for Sites and Authors

web/src/lib/directoryQuery.ts

@@ -0,0 +1,48 @@
+import type { LocationQuery } from 'vue-router'
+import {
+	ARTICLE_PAGE_SIZES,
+	ARTICLE_SEARCH_MAX_LENGTH,
+	DEFAULT_ARTICLE_PAGE_SIZE,
+} from '@/lib/articleListQuery'
+
+export interface DirectoryQuery {
+	q: string
+	page: number
+	size: number
+}
+
+const POSITIVE_INTEGER = /^[1-9]\d*$/
+
+function first(value: LocationQuery[string] | undefined) {
+	const single = Array.isArray(value) ? value[0] : value
+	return single ?? ''
+}
+
+export function parseDirectoryQuery(query: LocationQuery): DirectoryQuery {
+	const page = first(query.page)
+	const size = Number(first(query.size))
+	return {
+		q: first(query.q).slice(0, ARTICLE_SEARCH_MAX_LENGTH),
+		page: POSITIVE_INTEGER.test(page) ? Number(page) : 1,
+		size: ARTICLE_PAGE_SIZES.includes(size) ? size : DEFAULT_ARTICLE_PAGE_SIZE,
+	}
+}
+
+export function toDirectoryRouteQuery(query: DirectoryQuery, rest: LocationQuery = {}) {
+	const route: Record<string, string> = {}
+	for (const [key, value] of Object.entries(rest)) {
+		if (key !== 'q' && key !== 'page' && key !== 'size') {
+			route[key] = first(value)
+		}
+	}
+	if (query.q) {
+		route.q = query.q
+	}
+	if (query.page !== 1) {
+		route.page = String(query.page)
+	}
+	if (query.size !== DEFAULT_ARTICLE_PAGE_SIZE) {
+		route.size = String(query.size)
+	}
+	return route
+}