+1

src/app.d.ts

··· 7 7 interface Locals { 8 8 oAuthClient?: OAuthClient; 9 9 user?: PrivateUserData; 10 10 + locale?: string; 10 11 } 11 12 // interface PageData {} 12 13 // interface PageState {}

+12

src/css/components/bookmark.css

··· 3 3 gap: 20px; 4 4 } 5 5 6 6 + .Bookmarks-header { 7 7 + align-items: center; 8 8 + display: flex; 9 9 + flex-wrap: wrap; 10 10 + justify-content: space-between; 11 11 + 12 12 + & button { 13 13 + margin-block: -9px; 14 14 + } 15 15 + } 16 16 + 6 17 .Bookmark { 7 18 border: 5px solid rgb(var(--color-black)); 8 19 box-shadow: inset 0 0 0 4px rgb(var(--color-yellow) / 0.1); ··· 39 50 font-size: var(--font-size-2); 40 51 font-weight: 700; 41 52 grid-column: 1; 53 53 + white-space: nowrap; 42 54 } 43 55 44 56 & > code {

+11 -1

src/hooks.server.ts

··· 1 1 import { dev } from "$app/environment"; 2 2 + import { acceptsLanguages } from "$lib/negotiation"; 2 3 import { restoreSession } from "$lib/server/session"; 3 4 import { isAuthEvent } from "$lib/types"; 4 5 import { error, type Handle } from "@sveltejs/kit"; ··· 19 20 if (isAuthEvent(event) === false) { 20 21 error(500); 21 22 } 23 23 + 24 24 + const languages = acceptsLanguages(event.request); 25 25 + event.locals.locale = languages[0] === "*" ? undefined : languages[0]; 26 26 + 22 27 // [TODO] necessary? 23 28 // if ( 24 29 // event.url.searchParams.has("session") || ··· 28 33 // ) { 29 34 await restoreSession(event); 30 35 // } 31 31 - return resolve(event); 36 36 + 37 37 + return resolve(event, { 38 38 + filterSerializedResponseHeaders: (name: string, _value: string) => { 39 39 + return ["content-type"].includes(name.toLowerCase()); 40 40 + }, 41 41 + }); 32 42 }; 33 43 34 44 export const handle: Handle = sequence(devHandle, defaultHandle);

+364

src/lib/negotiation.ts

··· 1 1 + // Copyright 2018-2026 the Deno authors. MIT license. 2 2 + /*! 3 3 + * Adapted directly from negotiator at https://github.com/jshttp/negotiator/ 4 4 + * which is licensed as follows: 5 5 + * 6 6 + * (The MIT License) 7 7 + * 8 8 + * Copyright (c) 2012-2014 Federico Romero 9 9 + * Copyright (c) 2012-2014 Isaac Z. Schlueter 10 10 + * Copyright (c) 2014-2015 Douglas Christopher Wilson 11 11 + * 12 12 + * Permission is hereby granted, free of charge, to any person obtaining 13 13 + * a copy of this software and associated documentation files (the 14 14 + * 'Software'), to deal in the Software without restriction, including 15 15 + * without limitation the rights to use, copy, modify, merge, publish, 16 16 + * distribute, sublicense, and/or sell copies of the Software, and to 17 17 + * permit persons to whom the Software is furnished to do so, subject to 18 18 + * the following conditions: 19 19 + * 20 20 + * The above copyright notice and this permission notice shall be 21 21 + * included in all copies or substantial portions of the Software. 22 22 + * 23 23 + * THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, 24 24 + * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 25 25 + * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 26 26 + * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 27 27 + * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 28 28 + * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 29 29 + * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 30 30 + */ 31 31 + 32 32 + export interface Specificity { 33 33 + i: number; 34 34 + o: number | undefined; 35 35 + q: number; 36 36 + s: number | undefined; 37 37 + } 38 38 + 39 39 + export function compareSpecs(a: Specificity, b: Specificity): number { 40 40 + return ( 41 41 + b.q - a.q || 42 42 + (b.s ?? 0) - (a.s ?? 0) || 43 43 + (a.o ?? 0) - (b.o ?? 0) || 44 44 + a.i - b.i || 45 45 + 0 46 46 + ); 47 47 + } 48 48 + 49 49 + export function isQuality(spec: Specificity): boolean { 50 50 + return spec.q > 0; 51 51 + } 52 52 + 53 53 + interface LanguageSpecificity extends Specificity { 54 54 + prefix: string; 55 55 + suffix: string | undefined; 56 56 + full: string; 57 57 + } 58 58 + 59 59 + const SIMPLE_LANGUAGE_REGEXP = /^\s*([^\s\-;]+)(?:-([^\s;]+))?\s*(?:;(.*))?$/; 60 60 + 61 61 + function parseLanguage( 62 62 + str: string, 63 63 + i: number, 64 64 + ): LanguageSpecificity | undefined { 65 65 + const match = SIMPLE_LANGUAGE_REGEXP.exec(str); 66 66 + if (!match) { 67 67 + return undefined; 68 68 + } 69 69 + 70 70 + const [, prefix, suffix] = match; 71 71 + if (!prefix) { 72 72 + return undefined; 73 73 + } 74 74 + 75 75 + const full = suffix !== undefined ? `${prefix}-${suffix}` : prefix; 76 76 + 77 77 + let q = 1; 78 78 + if (match[3]) { 79 79 + const params = match[3].split(";"); 80 80 + for (const param of params) { 81 81 + const [key, value] = param.trim().split("="); 82 82 + if (key === "q" && value) { 83 83 + q = parseFloat(value); 84 84 + break; 85 85 + } 86 86 + } 87 87 + } 88 88 + 89 89 + return { prefix, suffix, full, i, o: undefined, q, s: undefined }; 90 90 + } 91 91 + 92 92 + function parseAcceptLanguage(accept: string): LanguageSpecificity[] { 93 93 + const accepts = accept.split(","); 94 94 + const result: LanguageSpecificity[] = []; 95 95 + 96 96 + for (const [i, accept] of accepts.entries()) { 97 97 + const language = parseLanguage(accept.trim(), i); 98 98 + if (language) { 99 99 + result.push(language); 100 100 + } 101 101 + } 102 102 + return result; 103 103 + } 104 104 + 105 105 + function specify( 106 106 + language: string, 107 107 + spec: LanguageSpecificity, 108 108 + i: number, 109 109 + ): Specificity | undefined { 110 110 + const p = parseLanguage(language, i); 111 111 + if (!p) { 112 112 + return undefined; 113 113 + } 114 114 + let s = 0; 115 115 + if (spec.full.toLowerCase() === p.full.toLowerCase()) { 116 116 + s |= 4; 117 117 + } else if (spec.prefix.toLowerCase() === p.prefix.toLowerCase()) { 118 118 + s |= 2; 119 119 + } else if (spec.full.toLowerCase() === p.prefix.toLowerCase()) { 120 120 + s |= 1; 121 121 + } else if (spec.full !== "*") { 122 122 + return; 123 123 + } 124 124 + 125 125 + return { i, o: spec.i, q: spec.q, s }; 126 126 + } 127 127 + 128 128 + function getLanguagePriority( 129 129 + language: string, 130 130 + accepted: LanguageSpecificity[], 131 131 + index: number, 132 132 + ): Specificity { 133 133 + let priority: Specificity = { i: -1, o: -1, q: 0, s: 0 }; 134 134 + for (const accepts of accepted) { 135 135 + const spec = specify(language, accepts, index); 136 136 + if ( 137 137 + spec && 138 138 + ((priority.s ?? 0) - (spec.s ?? 0) || priority.q - spec.q || 139 139 + (priority.o ?? 0) - (spec.o ?? 0)) < 0 140 140 + ) { 141 141 + priority = spec; 142 142 + } 143 143 + } 144 144 + return priority; 145 145 + } 146 146 + 147 147 + export function preferredLanguages( 148 148 + accept = "*", 149 149 + provided?: string[], 150 150 + ): string[] { 151 151 + const accepts = parseAcceptLanguage(accept); 152 152 + 153 153 + if (!provided) { 154 154 + return accepts 155 155 + .filter(isQuality) 156 156 + .sort(compareSpecs) 157 157 + .map((spec) => spec.full); 158 158 + } 159 159 + 160 160 + const priorities = provided 161 161 + .map((type, index) => getLanguagePriority(type, accepts, index)); 162 162 + 163 163 + return priorities 164 164 + .filter(isQuality) 165 165 + .sort(compareSpecs) 166 166 + .map((priority) => provided[priorities.indexOf(priority)]!); 167 167 + } 168 168 + 169 169 + /** 170 170 + * Returns an array of media types accepted by the request, in order of 171 171 + * preference. If there are no media types supplied in the request, then any 172 172 + * media type selector will be returned. 173 173 + * 174 174 + * @example Usage 175 175 + * ```ts 176 176 + * import { accepts } from "@std/http/negotiation"; 177 177 + * import { assertEquals } from "@std/assert"; 178 178 + * 179 179 + * const request = new Request("https://example.com/", { 180 180 + * headers: { 181 181 + * accept: 182 182 + * "text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, *\/*;q=0.8", 183 183 + * }, 184 184 + * }); 185 185 + * 186 186 + * assertEquals(accepts(request), [ 187 187 + * "text/html", 188 188 + * "application/xhtml+xml", 189 189 + * "image/webp", 190 190 + * "application/xml", 191 191 + * "*\/*", 192 192 + * ]); 193 193 + * ``` 194 194 + * 195 195 + * @param request The request to get the acceptable media types for. 196 196 + * @returns An array of acceptable media types. 197 197 + */ 198 198 + export function accepts(request: Pick<Request, "headers">): string[]; 199 199 + /** 200 200 + * For a given set of media types, return the best match accepted in the 201 201 + * request. If no media type matches, then the function returns `undefined`. 202 202 + * 203 203 + * @example Usage 204 204 + * ```ts 205 205 + * import { accepts } from "@std/http/negotiation"; 206 206 + * import { assertEquals } from "@std/assert"; 207 207 + * 208 208 + * const request = new Request("https://example.com/", { 209 209 + * headers: { 210 210 + * accept: 211 211 + * "text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, *\/*;q=0.8", 212 212 + * }, 213 213 + * }); 214 214 + * 215 215 + * assertEquals(accepts(request, "text/html", "image/webp"), "text/html"); 216 216 + * ``` 217 217 + * 218 218 + * @typeParam T The type of supported content-types (if provided). 219 219 + * @param request The request to get the acceptable media types for. 220 220 + * @param types An array of media types to find the best matching one from. 221 221 + * @returns The best matching media type, if any match. 222 222 + */ 223 223 + export function accepts<T extends string = string>( 224 224 + request: Pick<Request, "headers">, 225 225 + ...types: T[] 226 226 + ): T | undefined; 227 227 + export function accepts( 228 228 + request: Pick<Request, "headers">, 229 229 + ...types: string[] 230 230 + ): string | string[] | undefined { 231 231 + const accept = request.headers.get("accept"); 232 232 + return types.length 233 233 + ? accept ? preferredMediaTypes(accept, types)[0] : types[0] 234 234 + : accept 235 235 + ? preferredMediaTypes(accept) 236 236 + : ["*/*"]; 237 237 + } 238 238 + 239 239 + /** 240 240 + * Returns an array of content encodings accepted by the request, in order of 241 241 + * preference. If there are no encoding supplied in the request, then `["*"]` 242 242 + * is returned, implying any encoding is accepted. 243 243 + * 244 244 + * @example Usage 245 245 + * ```ts 246 246 + * import { acceptsEncodings } from "@std/http/negotiation"; 247 247 + * import { assertEquals } from "@std/assert"; 248 248 + * 249 249 + * const request = new Request("https://example.com/", { 250 250 + * headers: { "accept-encoding": "deflate, gzip;q=1.0, *;q=0.5" }, 251 251 + * }); 252 252 + * 253 253 + * assertEquals(acceptsEncodings(request), ["deflate", "gzip", "*"]); 254 254 + * ``` 255 255 + * 256 256 + * @param request The request to get the acceptable content encodings for. 257 257 + * @returns An array of content encodings this request accepts. 258 258 + */ 259 259 + export function acceptsEncodings(request: Pick<Request, "headers">): string[]; 260 260 + /** 261 261 + * For a given set of content encodings, return the best match accepted in the 262 262 + * request. If no content encodings match, then the function returns 263 263 + * `undefined`. 264 264 + * 265 265 + * **NOTE:** You should always supply `identity` as one of the encodings 266 266 + * to ensure that there is a match when the `Accept-Encoding` header is part 267 267 + * of the request. 268 268 + * 269 269 + * @example Usage 270 270 + * ```ts 271 271 + * import { acceptsEncodings } from "@std/http/negotiation"; 272 272 + * import { assertEquals } from "@std/assert"; 273 273 + * 274 274 + * const request = new Request("https://example.com/", { 275 275 + * headers: { "accept-encoding": "deflate, gzip;q=1.0, *;q=0.5" }, 276 276 + * }); 277 277 + * 278 278 + * assertEquals(acceptsEncodings(request, "gzip", "identity"), "gzip"); 279 279 + * ``` 280 280 + * 281 281 + * @typeParam T The type of supported encodings (if provided). 282 282 + * @param request The request to get the acceptable content encodings for. 283 283 + * @param encodings An array of encodings to find the best matching one from. 284 284 + * @returns The best matching encoding, if any match. 285 285 + */ 286 286 + export function acceptsEncodings<T extends string = string>( 287 287 + request: Pick<Request, "headers">, 288 288 + ...encodings: T[] 289 289 + ): T | undefined; 290 290 + export function acceptsEncodings( 291 291 + request: Pick<Request, "headers">, 292 292 + ...encodings: string[] 293 293 + ): string | string[] | undefined { 294 294 + const acceptEncoding = request.headers.get("accept-encoding"); 295 295 + return encodings.length 296 296 + ? acceptEncoding 297 297 + ? preferredEncodings(acceptEncoding, encodings)[0] 298 298 + : encodings[0] 299 299 + : acceptEncoding 300 300 + ? preferredEncodings(acceptEncoding) 301 301 + : ["*"]; 302 302 + } 303 303 + 304 304 + /** 305 305 + * Returns an array of languages accepted by the request, in order of 306 306 + * preference. If there are no languages supplied in the request, then `["*"]` 307 307 + * is returned, imply any language is accepted. 308 308 + * 309 309 + * @example Usage 310 310 + * ```ts 311 311 + * import { acceptsLanguages } from "@std/http/negotiation"; 312 312 + * import { assertEquals } from "@std/assert"; 313 313 + * 314 314 + * const request = new Request("https://example.com/", { 315 315 + * headers: { 316 316 + * "accept-language": "fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5", 317 317 + * }, 318 318 + * }); 319 319 + * 320 320 + * assertEquals(acceptsLanguages(request), ["fr-CH", "fr", "en", "de", "*"]); 321 321 + * ``` 322 322 + * 323 323 + * @param request The request to get the acceptable languages for. 324 324 + * @returns An array of languages this request accepts. 325 325 + */ 326 326 + export function acceptsLanguages(request: Pick<Request, "headers">): string[]; 327 327 + /** 328 328 + * For a given set of languages, return the best match accepted in the request. 329 329 + * If no languages match, then the function returns `undefined`. 330 330 + * 331 331 + * @example Usage 332 332 + * ```ts 333 333 + * import { acceptsLanguages } from "@std/http/negotiation"; 334 334 + * import { assertEquals } from "@std/assert"; 335 335 + * 336 336 + * const request = new Request("https://example.com/", { 337 337 + * headers: { 338 338 + * "accept-language": "fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5", 339 339 + * }, 340 340 + * }); 341 341 + * 342 342 + * assertEquals(acceptsLanguages(request, "en-gb", "en-us", "en"), "en"); 343 343 + * ``` 344 344 + * 345 345 + * @typeParam T The type of supported languages (if provided). 346 346 + * @param request The request to get the acceptable language for. 347 347 + * @param langs An array of languages to find the best matching one from. 348 348 + * @returns The best matching language, if any match. 349 349 + */ 350 350 + export function acceptsLanguages<T extends string = string>( 351 351 + request: Pick<Request, "headers">, 352 352 + ...langs: T[] 353 353 + ): T | undefined; 354 354 + export function acceptsLanguages( 355 355 + request: Pick<Request, "headers">, 356 356 + ...langs: string[] 357 357 + ): string | string[] | undefined { 358 358 + const acceptLanguage = request.headers.get("accept-language"); 359 359 + return langs.length 360 360 + ? acceptLanguage ? preferredLanguages(acceptLanguage, langs)[0] : langs[0] 361 361 + : acceptLanguage 362 362 + ? preferredLanguages(acceptLanguage) 363 363 + : ["*"]; 364 364 + }

+7

src/routes/bookmarks/[did=did]/+page.server.ts

··· 2 2 import { parseBookmark } from "$lib/valibot"; 3 3 import * as TID from "@atcute/tid"; 4 4 import { type Actions, fail } from "@sveltejs/kit"; 5 5 + import type { PageServerLoad } from "./$types"; 6 6 + 7 7 + export const load: PageServerLoad = async ({ locals }) => { 8 8 + return { 9 9 + locale: locals.locale, 10 10 + }; 11 11 + }; 5 12 6 13 export const actions = { 7 14 deleteBookmark: async (event) => {

+8 -6

src/routes/bookmarks/[did=did]/+page.svelte

··· 10 10 let editDialog: HTMLDialogElement | null = $state(null); 11 11 let createDialog: HTMLDialogElement | null = $state(null); 12 12 13 13 + const dateFormat = $derived( 14 14 + new Intl.DateTimeFormat(data.locale, { 15 15 + dateStyle: "medium", 16 16 + timeStyle: "short", 17 17 + }), 18 18 + ); 19 19 + 13 20 $effect(() => { 14 21 if (form?.action === "editBookmark" && "error" in form) { 15 22 if (editDialog?.open === false) { ··· 31 38 if (form?.action === "deleteBookmark") { 32 39 if (form.error) alert(form.error); 33 40 } 34 34 - }); 35 35 - 36 36 - const dateFormat = new Intl.DateTimeFormat(undefined, { 37 37 - dateStyle: "medium", 38 38 - timeStyle: "short", 39 41 }); 40 42 </script> 41 43 ··· 140 142 141 143 {#if data.bookmarks.length} 142 144 <div class="Bookmarks"> 143 143 - <div class="flex flex-wrap ai-center jc-between"> 145 145 + <div class="Bookmarks-header"> 144 146 <h2>Bookmarks</h2> 145 147 {#if isSelf} 146 148 <button type="button" onclick={() => createDialog?.showModal()}>

+8 -6

src/routes/bookmarks/[did=did]/+page.ts

··· 8 8 import { error } from "@sveltejs/kit"; 9 9 import type { PageLoad } from "./$types"; 10 10 11 11 - export const load: PageLoad = async ({ params }) => { 11 11 + export const load: PageLoad = async ({ params, data, fetch }) => { 12 12 const pds = await resolvePDS(params.did); 13 13 + 13 14 if (pds === null) { 14 15 error(404); 15 16 } 16 17 const rpc = new Client({ 17 17 - handler: simpleFetchHandler({ service: pds }), 18 18 + handler: simpleFetchHandler({ fetch, service: pds }), 18 19 }); 19 20 const response = await rpc.get("com.atproto.repo.getRecord", { 20 21 params: { ··· 41 42 break; 42 43 } 43 44 cursor = response.data.cursor; 44 44 - for (const data of response.data.records) { 45 45 + for (const entity of response.data.records) { 45 46 try { 46 47 bookmarks.push({ 47 47 - cid: data.cid, 48 48 - uri: data.uri, 49 49 - ...parseBookmark(data.value), 48 48 + cid: entity.cid, 49 49 + uri: entity.uri, 50 50 + ...parseBookmark(entity.value), 50 51 }); 51 52 } catch { 52 53 // [TODO] delete invalid data? ··· 56 57 try { 57 58 const profile = parseActorProfile(response.data.value); 58 59 return { 60 60 + ...data, 59 61 profile, 60 62 bookmarks, 61 63 };