diff --git a/CLAUDE.md b/CLAUDE.md index 53bc222..5fe008a 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -33,6 +33,7 @@ Run a single test file: `pnpm test src/modules/repo/services/resolvePath.spec.ts ### Styling Tailwind v4 uses the modern CSS-based config in `src/styles/app.css`: + - `@import "tailwindcss"` instead of directives - DaisyUI configured via `@plugin 'daisyui' { themes: retro --default, coffee --prefersdark; }` - `@tailwindcss/typography` for prose styling diff --git a/src/components/StackedPublicNote.vue b/src/components/StackedPublicNote.vue index a63b2d7..6e6a7ef 100644 --- a/src/components/StackedPublicNote.vue +++ b/src/components/StackedPublicNote.vue @@ -9,18 +9,15 @@ import { getUrl } from "@/modules/atproto/getUrl" import { withATProtoImages } from "@/modules/atproto/withATProtoImages" import { getAuthor } from "@/modules/atproto/getAuthor" import { PublicNoteRecord } from "@/modules/atproto/publicNote.types" -import { parseAtUri } from "@/modules/atproto/parseAtUri" const props = defineProps<{ - atUri: string + didrkey: string index: number - title?: string }>() -const atUri = computed(() => props.atUri) -const atUriProps = computed(() => parseAtUri(atUri.value)) -const did = computed(() => atUriProps.value.did) -const rkey = computed(() => atUriProps.value.rkey) +const didrkey = computed(() => props.didrkey) +const did = computed(() => props.didrkey.split("-")[0]) +const rkey = computed(() => props.didrkey.split("-")[1]) const index = computed(() => props.index) @@ -33,7 +30,7 @@ const className = computed(() => `stacked-note-${props.index}`) const titleClassName = computed(() => `title-${className.value}`) const { scrollToFocusedNote } = useRouteQueryStackedNotes() -const { listenToClick } = useATProtoLinks(className.value, atUri) +const { listenToClick } = useATProtoLinks(className.value, didrkey) const { displayNoteOverlay } = useNoteOverlay(className.value, index) const noteRecord = computedAsync(async () => @@ -70,12 +67,12 @@ watch( :class="{ [className]: true, overlay: displayNoteOverlay, - [`note-${rkey}`]: true, + [`note-${didrkey}`]: true, }" >
| string, @@ -11,26 +12,51 @@ export const useATProtoLinks = ( const { addStackedNote } = useRouteQueryStackedNotes() const linkNote = (event: Event) => { const target = event.target as HTMLElement - const atUri = target.getAttribute("href") + const href = target.getAttribute("href") - if (!atUri) { + if (!href) { return } - if (atUri.startsWith("#")) { + if (href.startsWith("#")) { return } event.preventDefault() event.stopPropagation() - if (isExternalLink(atUri)) { - window.open(atUri, "_blank") + if (isExternalLink(href)) { + window.open(href, "_blank") return } - const { rkey } = parseAtUri(atUri) - addStackedNote(toValue(currentAtUri) ?? "", atUri, rkey) + if (href.startsWith(window.location.origin)) { + const { params } = router.resolve( + href.replace(window.location.origin, ""), + ) + + if (!params.did || !params.rkey) { + return + } + + const noteId = params.slug + ? `${params.did}-${params.rkey}-${params.slug}` + : `${params.did}-${params.rkey}` + + addStackedNote( + toValue(currentAtUri) ?? "", + noteId, + `${params.did}-${params.rkey}`, + ) + return + } + + if (href.startsWith("at://")) { + const { did, rkey } = parseAtUri(href) + const noteId = `${did}-${rkey}` + + addStackedNote(toValue(currentAtUri) ?? "", noteId) + } } const LINK_SELECTOR = `.${toValue(className)} a` diff --git a/src/modules/user/hooks/useUserSettings.hook.ts b/src/modules/user/hooks/useUserSettings.hook.ts index 729cb76..6d05666 100644 --- a/src/modules/user/hooks/useUserSettings.hook.ts +++ b/src/modules/user/hooks/useUserSettings.hook.ts @@ -3,7 +3,7 @@ import { watchEffect } from "vue" import { useUserRepoStore } from "@/modules/repo/store/userRepo.store" import { downloadFont } from "@/utils/downloadFont" -const DEFAULT_FONT_POLICY = "Courier Prime,monospace" +const DEFAULT_FONT_POLICY = '"Libertinus Serif", serif' const DEFAULT_FONT_SIZE = "16px" export const useUserSettings = () => { diff --git a/src/styles/app.css b/src/styles/app.css index e030f31..085023b 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -1,11 +1,11 @@ @charset "utf-8"; @import "tailwindcss"; -@import url("https://fonts.googleapis.com/css2?display=swap&family=Courier+Prime"); +@import url("https://fonts.googleapis.com/css2?display=swap&family=Courier+Prime&family=Libertinus+Serif"); :root { --primary-color: #2c3a47; - --font-family: "Courier Prime", monospace; + --font-family: "Libertinus Serif", serif; --font-size: 13pt; --font-color: #4a4a4a; --link: #445fb9; @@ -25,7 +25,7 @@ @plugin 'daisyui' { themes: garden --default, - night --prefersdark; + dim --prefersdark; } @config '../../tailwind.config.js'; diff --git a/src/theme.config.ts b/src/theme.config.ts index 274fdd7..0d237cf 100644 --- a/src/theme.config.ts +++ b/src/theme.config.ts @@ -3,5 +3,5 @@ export const themeConfig = { light: 'garden', - dark: 'night', + dark: 'dim', } diff --git a/src/utils/link.ts b/src/utils/link.ts index e680698..0b6108a 100644 --- a/src/utils/link.ts +++ b/src/utils/link.ts @@ -1,4 +1,5 @@ -export const LINKS = ['http://', 'https://'] +export const LINKS = ["http://", "https://"] export const isExternalLink = (href: string) => + !href.startsWith(window.location.origin) && LINKS.some((link) => href.startsWith(link)) diff --git a/src/views/PublicNoteListByDidView.vue b/src/views/PublicNoteListByDidView.vue index 2fac25e..5f0b488 100644 --- a/src/views/PublicNoteListByDidView.vue +++ b/src/views/PublicNoteListByDidView.vue @@ -32,7 +32,11 @@ const author = computedAsync(async () => getAuthor(did.value)) {{ note.title }} getAuthor(did.value)) } a { + display: inline; text-align: left; } diff --git a/src/views/PublicNoteListView.vue b/src/views/PublicNoteListView.vue index 9ead27d..1d7db0a 100644 --- a/src/views/PublicNoteListView.vue +++ b/src/views/PublicNoteListView.vue @@ -25,7 +25,11 @@ const { notes, isLoading, canLoadMore, onLoadMore, getAuthor } = {{ note.title }}
diff --git a/tailwind.config.js b/tailwind.config.js index 8b49291..44deb55 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -28,7 +28,7 @@ module.exports = { css: { ...defaultTitleStyles, "font-size": "13pt", - "font-family": '"Courier Prime", monospace', + "font-family": '"Libertinus Serif", serif', p: { "margin-top": "0.8em", "margin-bottom": "0.8em",