From 60b0bdb264b4a6982f1c91b37423dc5a9e1bcccb Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sat, 7 Jan 2023 11:12:04 +0100
Subject: [PATCH] feat: StatusQuote interface (experimental)

---
 components/status/StatusPreviewCard.vue     |  4 +-
 components/status/StatusPreviewMastodon.vue | 47 ++++++++++++++++++++-
 composables/status-quote.ts                 | 10 +++++
 3 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 composables/status-quote.ts

diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue
index d8629d78..3a57569f 100644
--- a/components/status/StatusPreviewCard.vue
+++ b/components/status/StatusPreviewCard.vue
@@ -24,7 +24,9 @@ const providerName = $computed(() => props.card.providerName ? props.card.provid
 const gitHubCards = $(useFeatureFlag('experimentalGitHubCards'))
 
 // checks if title contains a username
-const isMastodonLink = props.card.title.match(/@+[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/gi)
+const usernames = props.card.title.match(/@+[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/gi)
+const isMastodonLink = usernames?.length === 1 && props.card.type === 'link'
+const username = isMastodonLink ? usernames[0] : ''
 
 // TODO: handle card.type: 'photo' | 'video' | 'rich';
 const cardTypeIconMap: Record<CardType, string> = {
diff --git a/components/status/StatusPreviewMastodon.vue b/components/status/StatusPreviewMastodon.vue
index 1f5b14b7..ef3c1ba0 100644
--- a/components/status/StatusPreviewMastodon.vue
+++ b/components/status/StatusPreviewMastodon.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { Card } from 'masto'
+import type { StatusQuote } from '~~/composables/status-quote'
 
-defineProps<{
+const props = defineProps<{
   card: Card
 }>()
 
@@ -11,6 +12,50 @@ defineProps<{
  * - generate user profile link
  * - quotation icon ?
 */
+
+/*
+
+{
+  "url": "https://hachyderm.io/@hi_mayank/109638087773020859",
+  "title": "Mayank :verified: (@hi_mayank@hachyderm.io)",
+  "description": "this article from @ben@a11y.info is of course excellent https://benmyers.dev/blog/semantic-selectors/\n\nhowever, in practice, i have found myself unable to fully utilize this approach....\n\ntwo examples:\n\n1. an input with a disabled/required attribute can be styled by targeting `:disabled` or `:required` but styling its label probably needs a data attribute or class\n\n2. vertical tabs can be styled by targeting `aria-orientation` but its content or wrapper probably needs a data attribute or class.\n\n(cont...)",
+  "type": "link",
+  "author_name": "",
+  "author_url": "",
+  "provider_name": "Hachyderm.io",
+  "provider_url": "",
+  "html": "",
+  "width": 400,
+  "height": 400,
+  "image": "https://media.mas.to/masto-public/cache/preview_cards/images/017/761/272/original/e8ce83dfa2e4c64d.jpeg",
+  "embed_url": "",
+  "blurhash": "UREyiOM{-=D%_4IURiRjRiWBM{%M%NRjWCWA"
+}
+
+*/
+
+// build the Status from Card
+const card = $computed(() => props.card)
+const usernames = card.title.match(/@+[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/gi)
+const fullUserName = usernames?.length && usernames[0]
+let username, domain
+if (fullUserName) {
+  username = fullUserName.split('@')[1]
+  domain = fullUserName.split('@')[2]
+}
+const isSquare = card.width === card.height
+const avatar = isSquare ? card.image : '' // todo: default avatar
+const status: StatusQuote = {
+  id: '',
+  uri: '',
+  createdAt: '',
+  editedAt: null,
+  account: {
+    username: username || '',
+    displayName: 'FAKE NAME', // todo update
+    avatar: avatar || '',
+  },
+}
 </script>
 
 <template>
diff --git a/composables/status-quote.ts b/composables/status-quote.ts
new file mode 100644
index 00000000..58bf28d3
--- /dev/null
+++ b/composables/status-quote.ts
@@ -0,0 +1,10 @@
+import type { Status } from 'masto'
+
+type RecursivePartial<T> = {
+  [P in keyof T]?:
+  T[P] extends (infer U)[] ? RecursivePartial<U>[] :
+    T[P] extends object ? RecursivePartial<T[P]> :
+      T[P];
+}
+
+export type StatusQuote = RecursivePartial<Status>