feat: media grid

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>

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>

components/status/StatusBody.vue

@@ -12,20 +12,22 @@ defineProps<{
   <div class="status-body" v-html="sanitize(status.content)" />
 </template>
 
-<style>
+<style lang="postcss">
-.status-body a {
+.status-body {
-  --at-apply: text-primary hover:underline;
+  a {
-}
+    --at-apply: text-primary hover:underline;
-.status-body b {
+    .invisible {
-  --at-apply: font-bold;
+      --at-apply: hidden;
-}
+    }
-.status-body p {
+    .ellipsis {
-  --at-apply: my-1;
+      --at-apply: truncate overflow-hidden ws-nowrap;
-}
+    }
-.status-body a .invisible {
+  }
-  --at-apply: hidden;
+  b {
-}
+    --at-apply: font-bold;
-.status-body a .ellipsis {
+  }
-  --at-apply: truncate overflow-hidden ws-nowrap;
+  p {
+    --at-apply: my-1;
+  }
 }
 </style>

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
-      <StatusMedia :attachment="attachment" />
+      v-if="status.mediaAttachments?.length"
-    </template>
+      :status="status"
+    />
     <StatusActions :status="status" />
   </div>
 </template>

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<{
+const { status } = defineProps<{
-  attachment: Attachment
+  status: Status
 }>()
 </script>
 
 <template>
-  <template v-if="attachment.type === 'image'">
+  <div class="status-media-container" :class="`status-media-container-${status.mediaAttachments.length}`">
-    <img
+    <template v-for="attachment of status.mediaAttachments" :key="attachment.id">
-      class="status-attachment-image"
+      <StatusAttachment :attachment="attachment" class="w-full h-full" />
-      :src="attachment.previewUrl!"
+    </template>
-      :alt="attachment.description!"
+  </div>
-      rounded-lg border="~ gray/10"
-    >
-  </template>
-  <template v-else>
-    TODO: {{ attachment }}
-  </template>
 </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>

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>

layouts/default.vue

@@ -1,5 +1,6 @@
 <template>
   <main class="py-10 px-10">
+    <NavTitle />
     <slot />
   </main>
 </template>

nuxt.config.ts

@@ -16,4 +16,9 @@ export default defineNuxtConfig({
   colorMode: {
     classSuffix: '',
   },
+  postcss: {
+    plugins: {
+      'postcss-nested': {},
+    },
+  },
 })

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"
   }

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>
+  <div w-130>
-    {{ params }}
+    <StatusCard :status="status" />
   </div>
 </template>

pages/index.vue

@@ -4,9 +4,7 @@ const { data: timelines } = await useAsyncData('public-timelines', () => masto.t
 </script>
 
 <template>
-  <div w-150>
+  <div w-120>
-    <template v-for="status of timelines" :key="status.id">
+    <TimelineList :timelines="timelines" />
-      <StatusCard :status="status" border="t gray/10" pt-4 />
-    </template>
   </div>
 </template>

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}