From c79902a04ece17789fa782196600adc2e4a92b30 Mon Sep 17 00:00:00 2001 From: Anthony Fu 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 @@ + 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 @@ + + + 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<{
- 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() 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, {
- + 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 @@ + + 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 @@ + + + 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 @@ 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)) 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 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}