Merge branch 'main' of github.com:remanso-space/remanso

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,
     }"
   >
     <a
       class="title-stacked-note-link"
-      @click.prevent="scrollToFocusedNote(rkey)"
+      @click.prevent="scrollToFocusedNote(didrkey)"
     >
       <div
         class="title-stacked-note breadcrumbs text-sm"

src/hooks/useATProtoLinks.hook.ts

@@ -3,6 +3,7 @@ import { ComputedRef, onUnmounted, Ref, toValue } from "vue"
 import { isExternalLink } from "@/utils/link"
 import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
 import { parseAtUri } from "@/modules/atproto/parseAtUri"
+import { router } from "@/router/router"
 
 export const useATProtoLinks = (
   className: ComputedRef<string> | 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`

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 = () => {

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';

src/theme.config.ts

@@ -3,5 +3,5 @@
 
 export const themeConfig = {
   light: 'garden',
-  dark: 'night',
+  dark: 'dim',
 }

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))

src/views/PublicNoteListByDidView.vue

@@ -32,7 +32,11 @@ const author = computedAsync(async () => getAuthor(did.value))
             <router-link
               :to="{
                 name: 'PublicNoteView',
-                params: { did: note.did, rkey: note.rkey, slug: slugify(note.title) },
+                params: {
+                  did: note.did,
+                  rkey: note.rkey,
+                  slug: slugify(note.title),
+                },
               }"
               class="btn btn-link"
               >{{ note.title }}</router-link
@@ -87,6 +91,7 @@ const author = computedAsync(async () => getAuthor(did.value))
     }
 
     a {
+      display: inline;
       text-align: left;
     }
 

src/views/PublicNoteListView.vue

@@ -25,7 +25,11 @@ const { notes, isLoading, canLoadMore, onLoadMore, getAuthor } =
             <router-link
               :to="{
                 name: 'PublicNoteView',
-                params: { did: note.did, rkey: note.rkey, slug: slugify(note.title) },
+                params: {
+                  did: note.did,
+                  rkey: note.rkey,
+                  slug: slugify(note.title),
+                },
               }"
               class="btn btn-link"
               >{{ note.title }}</router-link
@@ -95,6 +99,7 @@ const { notes, isLoading, canLoadMore, onLoadMore, getAuthor } =
     }
 
     a {
+      display: inline;
       text-align: left;
     }
 

src/views/PublicNoteView.vue

@@ -133,7 +133,7 @@ watch(
       :key="stackedNote"
       class="note"
       :index="index"
-      :at-uri="stackedNote"
+      :didrkey="stackedNote"
     />
   </div>
 </template>