From 90c45b435fed36c5a7595378d4c2fd86a6e67431 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 14 Nov 2022 10:20:07 +0800
Subject: [PATCH] feat: use masto client

---
 .vscode/settings.json                         |   1 +
 api-client/index.ts                           |  24 ----
 api-client/types.ts                           | 114 ------------------
 components/AccountInfo.vue                    |  14 ++-
 components/PostBody.vue                       |  29 -----
 components/PostCard.vue                       |  15 ---
 .../StatusActions.vue}                        |  12 +-
 components/status/StatusBody.vue              |  31 +++++
 components/status/StatusCard.vue              |  22 ++++
 composables/client.ts                         |  10 +-
 pages/{[user] => @[user]}/[post].vue          |   0
 pages/@[user]/index.vue                       |  13 ++
 pages/index.vue                               |   8 +-
 plugins/masto.ts                              |   8 ++
 14 files changed, 96 insertions(+), 205 deletions(-)
 delete mode 100644 api-client/index.ts
 delete mode 100644 api-client/types.ts
 delete mode 100644 components/PostBody.vue
 delete mode 100644 components/PostCard.vue
 rename components/{PostActions.vue => status/StatusActions.vue} (74%)
 create mode 100644 components/status/StatusBody.vue
 create mode 100644 components/status/StatusCard.vue
 rename pages/{[user] => @[user]}/[post].vue (100%)
 create mode 100644 pages/@[user]/index.vue
 create mode 100644 plugins/masto.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a35db91d..6d6475d4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,6 +8,7 @@
   },
   "editor.formatOnSave": false,
   "cSpell.words": [
+    "masto",
     "Nuxtodon"
   ]
 }
diff --git a/api-client/index.ts b/api-client/index.ts
deleted file mode 100644
index 740d4c83..00000000
--- a/api-client/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Headers, createFetch, fetch } from 'ohmyfetch'
-import type { Post } from './types'
-
-export interface MastodonClientOptions {
-  host: string
-}
-
-export class Client {
-  $fetch: ReturnType<typeof createFetch> = undefined!
-
-  constructor(public options: MastodonClientOptions) {
-    this.$fetch = createFetch({
-      defaults: {
-        baseURL: options.host,
-      },
-      fetch,
-      Headers,
-    })
-  }
-
-  getPublicTimeline(): Promise<Post[]> {
-    return this.$fetch('/api/v1/timelines/public')
-  }
-}
diff --git a/api-client/types.ts b/api-client/types.ts
deleted file mode 100644
index bf0faae5..00000000
--- a/api-client/types.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-export interface Post {
-  id: string
-  created_at: Date
-  in_reply_to_id: null | string
-  in_reply_to_account_id: null | string
-  sensitive: boolean
-  spoiler_text: string
-  visibility: Visibility
-  language: string
-  uri: string
-  url: string
-  replies_count: number
-  reblogs_count: number
-  favourites_count: number
-  edited_at: null
-  favourited: boolean
-  reblogged: boolean
-  muted: boolean
-  bookmarked: boolean
-  content: string
-  filtered: any[]
-  reblog: null
-  account: Account
-  media_attachments: MediaAttachment[]
-  mentions: any[]
-  tags: Tag[]
-  emojis: Emoji[]
-  card: null
-  poll: null
-  application?: Application
-}
-
-export interface Account {
-  id: string
-  username: string
-  acct: string
-  display_name: string
-  locked: boolean
-  bot: boolean
-  discoverable: boolean
-  group: boolean
-  created_at: Date
-  note: string
-  url: string
-  avatar: string
-  avatar_static: string
-  header: string
-  header_static: string
-  followers_count: number
-  following_count: number
-  statuses_count: number
-  last_status_at: Date
-  emojis: Emoji[]
-  fields: Field[]
-  noindex?: boolean
-}
-
-export interface Emoji {
-  shortcode: string
-  url: string
-  static_url: string
-  visible_in_picker: boolean
-}
-
-export interface Field {
-  name: string
-  value: string
-  verified_at: Date | null
-}
-
-export interface Application {
-  name: string
-  website: null | string
-}
-
-export interface MediaAttachment {
-  id: string
-  type: string
-  url: string
-  preview_url: string
-  remote_url: string
-  preview_remote_url: null
-  text_url: null
-  meta: Meta
-  description: null | string
-  blurhash: string
-}
-
-export interface Meta {
-  focus?: Focus
-  original: Original
-  small: Original
-}
-
-export interface Focus {
-  x: number
-  y: number
-}
-
-export interface Original {
-  width: number
-  height: number
-  size: string
-  aspect: number
-}
-
-export interface Tag {
-  name: string
-  url: string
-}
-
-export enum Visibility {
-  Public = 'public',
-}
diff --git a/components/AccountInfo.vue b/components/AccountInfo.vue
index a2710f60..50a69d45 100644
--- a/components/AccountInfo.vue
+++ b/components/AccountInfo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { Account } from '~/api-client/types'
+import type { Account } from 'masto'
 
-const props = defineProps<{
+defineProps<{
   account: Account
 }>()
 </script>
@@ -9,15 +9,17 @@ const props = defineProps<{
 <template>
   <div flex gap-2>
     <div p1>
-      <img :src="account.avatar" rounded w-10 h-10>
+      <NuxtLink :to="`/@${account.acct}`">
+        <img :src="account.avatar" rounded w-10 h-10>
+      </NuxtLink>
     </div>
-    <div flex flex-col>
+    <NuxtLink flex flex-col :to="`/@${account.acct}`">
       <h4 font-bold>
-        {{ account.display_name }}
+        {{ account.displayName }}
       </h4>
       <p op50>
         @{{ account.acct }}
       </p>
-    </div>
+    </NuxtLink>
   </div>
 </template>
diff --git a/components/PostBody.vue b/components/PostBody.vue
deleted file mode 100644
index d9c8a6cb..00000000
--- a/components/PostBody.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { Post } from '~/api-client/types'
-
-const props = defineProps<{
-  post: Post
-}>()
-</script>
-
-<template>
-  <div class="post-body" v-html="sanitize(post.content)" />
-</template>
-
-<style>
-.post-body a {
-  --at-apply: text-primary hover:underline;
-}
-.post-body b {
-  --at-apply: font-bold;
-}
-.post-body p {
-  --at-apply: my-1;
-}
-.post-body a .invisible {
-  --at-apply: hidden;
-}
-.post-body a .ellipsis {
-  --at-apply: truncate overflow-hidden ws-nowrap;
-}
-</style>
diff --git a/components/PostCard.vue b/components/PostCard.vue
deleted file mode 100644
index 2df71417..00000000
--- a/components/PostCard.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { Post } from '~/api-client/types'
-
-const props = defineProps<{
-  post: Post
-}>()
-</script>
-
-<template>
-  <NuxtLink flex flex-col gap-2 my-4 :to="`/${post.account.acct}/${post.id}`">
-    <AccountInfo :account="post.account" />
-    <PostBody :post="post" />
-    <PostActions :post="post" />
-  </NuxtLink>
-</template>
diff --git a/components/PostActions.vue b/components/status/StatusActions.vue
similarity index 74%
rename from components/PostActions.vue
rename to components/status/StatusActions.vue
index 26e7d60c..6c5590f0 100644
--- a/components/PostActions.vue
+++ b/components/status/StatusActions.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { Post } from '~/api-client/types'
+import type { Status } from 'masto'
 
-const props = defineProps<{
-  post: Post
+defineProps<{
+  status: Status
 }>()
 </script>
 
@@ -10,15 +10,15 @@ const props = defineProps<{
   <div flex justify-between gap-4>
     <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
       <div i-ri:chat-3-line />
-      <span>{{ post.replies_count }}</span>
+      <span>{{ status.repliesCount }}</span>
     </button>
     <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
       <div i-ri:repeat-fill />
-      <span>{{ post.reblogs_count }}</span>
+      <span>{{ status.reblogsCount }}</span>
     </button>
     <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
       <div i-ri:heart-3-line />
-      <span>{{ post.favourites_count }}</span>
+      <span>{{ status.favouritesCount }}</span>
     </button>
     <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
       <div i-ri:more-2-fill />
diff --git a/components/status/StatusBody.vue b/components/status/StatusBody.vue
new file mode 100644
index 00000000..9fdf3298
--- /dev/null
+++ b/components/status/StatusBody.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { Status } from 'masto'
+
+defineProps<{
+  status: Status
+}>()
+
+// TODO: parse and interop content (link, emojis)
+</script>
+
+<template>
+  <div class="status-body" v-html="sanitize(status.content)" />
+</template>
+
+<style>
+.status-body a {
+  --at-apply: text-primary hover:underline;
+}
+.status-body b {
+  --at-apply: font-bold;
+}
+.status-body p {
+  --at-apply: my-1;
+}
+.status-body a .invisible {
+  --at-apply: hidden;
+}
+.status-body a .ellipsis {
+  --at-apply: truncate overflow-hidden ws-nowrap;
+}
+</style>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
new file mode 100644
index 00000000..97dfd028
--- /dev/null
+++ b/components/status/StatusCard.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Status } from 'masto'
+
+const { status } = defineProps<{
+  status: Status
+}>()
+const el = ref<HTMLElement>()
+
+const router = useRouter()
+function go(e: MouseEvent) {
+  if (e.target === el.value)
+    router.push(`/@${status.account.acct}/${status.id}`)
+}
+</script>
+
+<template>
+  <div ref="el" flex flex-col gap-2 my-4 @click="go">
+    <AccountInfo :account="status.account" />
+    <StatusBody :status="status" />
+    <StatusActions :status="status" />
+  </div>
+</template>
diff --git a/composables/client.ts b/composables/client.ts
index 16eaa51f..c1559d51 100644
--- a/composables/client.ts
+++ b/composables/client.ts
@@ -1,9 +1,5 @@
-import { Client } from '~/api-client'
+import type { MastoClient } from 'masto'
 
-const client = new Client({
-  host: 'https://mas.to',
-})
-
-export function useClient() {
-  return client
+export function useMasto() {
+  return inject('masto') as Promise<MastoClient>
 }
diff --git a/pages/[user]/[post].vue b/pages/@[user]/[post].vue
similarity index 100%
rename from pages/[user]/[post].vue
rename to pages/@[user]/[post].vue
diff --git a/pages/@[user]/index.vue b/pages/@[user]/index.vue
new file mode 100644
index 00000000..2bfaa50a
--- /dev/null
+++ b/pages/@[user]/index.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue?: boolean
+}>()
+
+const params = useRoute().params
+</script>
+
+<template>
+  <div>
+    {{ params }}
+  </div>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
index 6fb61fe1..91963030 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-const client = useClient()
-const { data: posts } = await useAsyncData(() => client.getPublicTimeline())
+const masto = await useMasto()
+const { data: timelines } = await useAsyncData('public-timelines', () => masto.timelines.fetchPublic().then(r => r.value))
 </script>
 
 <template>
   <div w-150>
-    <template v-for="post in posts" :key="post.id">
-      <PostCard :post="post" border="t gray/10" pt-4 />
+    <template v-for="status of timelines" :key="status.id">
+      <StatusCard :status="status" border="t gray/10" pt-4 />
     </template>
   </div>
 </template>
diff --git a/plugins/masto.ts b/plugins/masto.ts
new file mode 100644
index 00000000..37203d15
--- /dev/null
+++ b/plugins/masto.ts
@@ -0,0 +1,8 @@
+import { login } from 'masto'
+
+export default defineNuxtPlugin((nuxt) => {
+  const masto = login({
+    url: 'https://mas.to',
+  })
+  nuxt.vueApp.provide('masto', masto)
+})