From c79902a04ece17789fa782196600adc2e4a92b30 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 14 Nov 2022 11:33:09 +0800
Subject: [PATCH] feat: media grid

---
 components/{ => account}/AccountInfo.vue |  0
 components/nav/NavTitle.vue              |  8 ++++
 components/status/StatusAttachment.vue   | 24 ++++++++++++
 components/status/StatusBody.vue         | 32 ++++++++--------
 components/status/StatusCard.vue         | 15 ++++++--
 components/status/StatusMedia.vue        | 49 +++++++++++++++++-------
 components/timeline/TimelineList.vue     | 13 +++++++
 layouts/default.vue                      |  1 +
 nuxt.config.ts                           |  5 +++
 package.json                             |  2 +
 pages/@[user]/[post].vue                 |  7 +++-
 pages/index.vue                          |  6 +--
 pnpm-lock.yaml                           | 19 +++++++++
 13 files changed, 142 insertions(+), 39 deletions(-)
 rename components/{ => account}/AccountInfo.vue (100%)
 create mode 100644 components/nav/NavTitle.vue
 create mode 100644 components/status/StatusAttachment.vue
 create mode 100644 components/timeline/TimelineList.vue

diff --git a/components/AccountInfo.vue b/components/account/AccountInfo.vue
similarity index 100%
rename from components/AccountInfo.vue
rename to components/account/AccountInfo.vue
diff --git a/components/nav/NavTitle.vue b/components/nav/NavTitle.vue
new file mode 100644
index 00000000..b05861df
--- /dev/null
+++ b/components/nav/NavTitle.vue
@@ -0,0 +1,8 @@
+<template>
+  <NuxtLink flex text-2xl gap-2 to="/">
+    <div i-logos-nuxt-icon />
+    <div>
+      Nuxtodon <sup text-sm italic op50 mt-1>Prototype</sup>
+    </div>
+  </NuxtLink>
+</template>
diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue
new file mode 100644
index 00000000..89070b2b
--- /dev/null
+++ b/components/status/StatusAttachment.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { Attachment } from 'masto'
+
+const { attachment } = defineProps<{
+  attachment: Attachment
+}>()
+</script>
+
+<template>
+  <template v-if="attachment.type === 'image'">
+    <img
+      class="status-attachment-image"
+      :src="attachment.previewUrl!"
+      :alt="attachment.description!"
+      border="~ gray/10"
+      object-cover rounded-lg
+    >
+  </template>
+  <template v-else>
+    <div>
+      TODO: {{ attachment }}
+    </div>
+  </template>
+</template>
diff --git a/components/status/StatusBody.vue b/components/status/StatusBody.vue
index 9fdf3298..6fa915ae 100644
--- a/components/status/StatusBody.vue
+++ b/components/status/StatusBody.vue
@@ -12,20 +12,22 @@ defineProps<{
   <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 lang="postcss">
+.status-body {
+  a {
+    --at-apply: text-primary hover:underline;
+    .invisible {
+      --at-apply: hidden;
+    }
+    .ellipsis {
+      --at-apply: truncate overflow-hidden ws-nowrap;
+    }
+  }
+  b {
+    --at-apply: font-bold;
+  }
+  p {
+    --at-apply: my-1;
+  }
 }
 </style>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index ea9e8646..ea0e2b6d 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -7,8 +7,14 @@ const { status } = defineProps<{
 const el = ref<HTMLElement>()
 
 const router = useRouter()
+
 function go(e: MouseEvent) {
-  if (e.target === el.value)
+  const path = e.composedPath() as HTMLElement[]
+  const hasButton = path.find(el => el.tagName === 'A' || el.tagName === 'BUTTON')
+  if (hasButton)
+    return
+
+  if (path.find(i => i === el.value))
     router.push(`/@${status.account.acct}/${status.id}`)
 }
 
@@ -54,9 +60,10 @@ const timeago = useTimeAgo(() => status.createdAt, {
       </div>
     </AccountInfo>
     <StatusBody :status="status" />
-    <template v-for="attachment of status.mediaAttachments" :key="attachment.id">
-      <StatusMedia :attachment="attachment" />
-    </template>
+    <StatusMedia
+      v-if="status.mediaAttachments?.length"
+      :status="status"
+    />
     <StatusActions :status="status" />
   </div>
 </template>
diff --git a/components/status/StatusMedia.vue b/components/status/StatusMedia.vue
index b3772661..01298e25 100644
--- a/components/status/StatusMedia.vue
+++ b/components/status/StatusMedia.vue
@@ -1,21 +1,42 @@
 <script setup lang="ts">
-import type { Attachment } from 'masto'
+import type { Status } from 'masto'
 
-const { attachment } = defineProps<{
-  attachment: Attachment
+const { status } = defineProps<{
+  status: Status
 }>()
 </script>
 
 <template>
-  <template v-if="attachment.type === 'image'">
-    <img
-      class="status-attachment-image"
-      :src="attachment.previewUrl!"
-      :alt="attachment.description!"
-      rounded-lg border="~ gray/10"
-    >
-  </template>
-  <template v-else>
-    TODO: {{ attachment }}
-  </template>
+  <div class="status-media-container" :class="`status-media-container-${status.mediaAttachments.length}`">
+    <template v-for="attachment of status.mediaAttachments" :key="attachment.id">
+      <StatusAttachment :attachment="attachment" class="w-full h-full" />
+    </template>
+  </div>
 </template>
+
+<style lang="postcss">
+.status-media-container {
+  --at-apply: gap-0.5;
+  width: 100%;
+  overflow: hidden;
+}
+.status-media-container-1 {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+.status-media-container-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  aspect-ratio: 2/1;
+}
+.status-media-container-3 {
+  display: grid;
+  aspect-ratio: 16/9;
+  grid-template-columns: 1fr 1fr;
+}
+.status-media-container-4 {
+  display: grid;
+  aspect-ratio: 16/9;
+  grid-template-columns: 1fr 1fr;
+}
+</style>
diff --git a/components/timeline/TimelineList.vue b/components/timeline/TimelineList.vue
new file mode 100644
index 00000000..4f342a5e
--- /dev/null
+++ b/components/timeline/TimelineList.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { Status } from 'masto'
+
+defineProps<{
+  timelines: Status[]
+}>()
+</script>
+
+<template>
+  <template v-for="status of timelines" :key="status.id">
+    <StatusCard :status="status" border="t gray/10" pt-4 />
+  </template>
+</template>
diff --git a/layouts/default.vue b/layouts/default.vue
index 9dcdfc30..ad865d64 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,6 @@
 <template>
   <main class="py-10 px-10">
+    <NavTitle />
     <slot />
   </main>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index deed08c8..2216b02b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -16,4 +16,9 @@ export default defineNuxtConfig({
   colorMode: {
     classSuffix: '',
   },
+  postcss: {
+    plugins: {
+      'postcss-nested': {},
+    },
+  },
 })
diff --git a/package.json b/package.json
index a5506413..62caa402 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.30.1",
     "@iconify-json/carbon": "^1.1.9",
+    "@iconify-json/logos": "^1.1.18",
     "@iconify-json/ri": "^1.1.3",
     "@iconify-json/twemoji": "^1.1.5",
     "@nuxtjs/color-mode": "^3.1.8",
@@ -23,6 +24,7 @@
     "masto": "^4.6.1",
     "nuxt": "^3.0.0-rc.13",
     "pinia": "^2.0.23",
+    "postcss-nested": "^6.0.0",
     "sanitize-html": "^2.7.3",
     "typescript": "^4.8.4"
   }
diff --git a/pages/@[user]/[post].vue b/pages/@[user]/[post].vue
index 2bfaa50a..96fe153a 100644
--- a/pages/@[user]/[post].vue
+++ b/pages/@[user]/[post].vue
@@ -4,10 +4,13 @@ const props = defineProps<{
 }>()
 
 const params = useRoute().params
+
+const masto = await useMasto()
+const { data: status } = await useAsyncData(() => masto.statuses.fetch(params.post as string))
 </script>
 
 <template>
-  <div>
-    {{ params }}
+  <div w-130>
+    <StatusCard :status="status" />
   </div>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index 91963030..663fa4f5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,9 +4,7 @@ const { data: timelines } = await useAsyncData('public-timelines', () => masto.t
 </script>
 
 <template>
-  <div w-150>
-    <template v-for="status of timelines" :key="status.id">
-      <StatusCard :status="status" border="t gray/10" pt-4 />
-    </template>
+  <div w-120>
+    <TimelineList :timelines="timelines" />
   </div>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1b7651b0..21c8cb9e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@antfu/eslint-config': ^0.30.1
   '@iconify-json/carbon': ^1.1.9
+  '@iconify-json/logos': ^1.1.18
   '@iconify-json/ri': ^1.1.3
   '@iconify-json/twemoji': ^1.1.5
   '@nuxtjs/color-mode': ^3.1.8
@@ -14,12 +15,14 @@ specifiers:
   masto: ^4.6.1
   nuxt: ^3.0.0-rc.13
   pinia: ^2.0.23
+  postcss-nested: ^6.0.0
   sanitize-html: ^2.7.3
   typescript: ^4.8.4
 
 devDependencies:
   '@antfu/eslint-config': 0.30.1_rmayb2veg2btbq6mbmnyivgasy
   '@iconify-json/carbon': 1.1.9
+  '@iconify-json/logos': 1.1.18
   '@iconify-json/ri': 1.1.3
   '@iconify-json/twemoji': 1.1.5
   '@nuxtjs/color-mode': 3.1.8
@@ -31,6 +34,7 @@ devDependencies:
   masto: 4.6.1
   nuxt: 3.0.0-rc.13_rmayb2veg2btbq6mbmnyivgasy
   pinia: 2.0.23_typescript@4.8.4
+  postcss-nested: 6.0.0
   sanitize-html: 2.7.3
   typescript: 4.8.4
 
@@ -624,6 +628,12 @@ packages:
       '@iconify/types': 2.0.0
     dev: true
 
+  /@iconify-json/logos/1.1.18:
+    resolution: {integrity: sha512-Ra8BV3fJhE/5omYOY2UlDhgggyxxzMTppGH3n9EfFYh9Rpx4+HtE6zp7s+i3glYOqs2Me5HNcDEOkU63kcHqvg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify-json/ri/1.1.3:
     resolution: {integrity: sha512-YQ45kQNpuHc2bso4fDGhooWou43qy7njD/I5l7vpjcujb+P/K2BfLASbWYTTUKu6lMersuFmO8F7NdGzy6eGWw==}
     dependencies:
@@ -5527,6 +5537,15 @@ packages:
       postcss-selector-parser: 6.0.10
     dev: true
 
+  /postcss-nested/6.0.0:
+    resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss-selector-parser: 6.0.10
+    dev: true
+
   /postcss-normalize-charset/5.1.0_postcss@8.4.18:
     resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==}
     engines: {node: ^10 || ^12 || >=14.0}