diff --git a/src/modules/atproto/publicNote.types.ts b/src/modules/atproto/publicNote.types.ts
index 07e4c0b..8865322 100644
--- a/src/modules/atproto/publicNote.types.ts
+++ b/src/modules/atproto/publicNote.types.ts
@@ -14,6 +14,7 @@ export interface PublicNote {
theme?: string
fontFamily?: string
fontSize?: string
+ language?: string
}
export interface PublicNoteImage {
diff --git a/src/utils/displayLanguage.ts b/src/utils/displayLanguage.ts
new file mode 100644
index 0000000..42eb422
--- /dev/null
+++ b/src/utils/displayLanguage.ts
@@ -0,0 +1,18 @@
+export const displayLanguage = (langCode?: string): string | null => {
+ if (!langCode) {
+ return null
+ }
+
+ try {
+ const locale = navigator.language ?? langCode
+ const display = new Intl.DisplayNames([locale], {
+ type: "language",
+ })
+
+ return display.of(langCode) ?? null
+ } catch (err) {
+ console.warn("error", err)
+
+ return null
+ }
+}
diff --git a/src/views/PublicNoteView.vue b/src/views/PublicNoteView.vue
index 9f36063..0fe5233 100644
--- a/src/views/PublicNoteView.vue
+++ b/src/views/PublicNoteView.vue
@@ -17,6 +17,7 @@ import { errorMessage } from "@/utils/notif"
import { useResizeContainer } from "@/hooks/useResizeContainer.hook"
import ThemeSwap from "@/components/ThemeSwap.vue"
import { useTitle } from "@vueuse/core"
+import { displayLanguage } from "@/utils/displayLanguage"
const props = defineProps<{ did: string; rkey: string; slug?: string }>()
const router = useRouter()
@@ -99,6 +100,11 @@ const publishedAt = computed(() =>
? new Date(noteRecord.value?.value.publishedAt).toLocaleDateString()
: null,
)
+const language = computed(() =>
+ noteRecord.value?.value.language
+ ? displayLanguage(noteRecord.value.value.language)
+ : null,
+)
const { stackedNotes, scrollToFocusedNote } = useRouteQueryStackedNotes()
const { listenToClick } = useATProtoLinks("note-display")
@@ -134,6 +140,10 @@ watch(
>
{{ author.handle }}
+
+ •
+ {{ language }}
+
•
{{ publishedAt }}