From 88c8c8d586c25c7bb451fd6f66159c027293ad4b Mon Sep 17 00:00:00 2001 From: DIYgod Date: Wed, 19 Jul 2023 17:24:48 +0100 Subject: [PATCH] feat: use swiper for post cover --- package.json | 1 + pnpm-lock.yaml | 8 +++ src/app/(home)/layout.tsx | 2 +- src/components/common/PostCard.tsx | 5 +- src/components/home/PostCover.tsx | 80 +++++++++++++++++++++++++----- src/components/site/PostCover.tsx | 26 ---------- src/css/tailwind.css | 27 ++++++++++ src/lib/expand-unit.ts | 19 +++++++ src/lib/types.ts | 1 + src/markdown/index.ts | 3 ++ src/markdown/rehype-image.ts | 1 + 11 files changed, 132 insertions(+), 41 deletions(-) delete mode 100644 src/components/site/PostCover.tsx diff --git a/package.json b/package.json index e448aee5..e4896511 100644 --- a/package.json +++ b/package.json @@ -144,6 +144,7 @@ "serialize-javascript": "6.0.1", "sharp": "0.32.3", "sortablejs": "1.15.0", + "swiper": "^10.0.4", "tailwind-merge": "1.14.0", "tailwind-scrollbar-hide": "1.1.7", "tailwindcss-animate": "1.0.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d8046fe5..42400582 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -347,6 +347,9 @@ dependencies: sortablejs: specifier: 1.15.0 version: 1.15.0 + swiper: + specifier: ^10.0.4 + version: 10.0.4 tailwind-merge: specifier: 1.14.0 version: 1.14.0 @@ -12427,6 +12430,11 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + /swiper@10.0.4: + resolution: {integrity: sha512-DlNR3KiaVkPep6RraZ2tNr7lvyuzELuR+4NZr4wO42t0UworIO3DxDlz8b5Q3uUioh7cJad99EdRJLkPF+r8Ag==} + engines: {node: '>= 4.7.0'} + dev: false + /swr@2.2.0(react@18.2.0): resolution: {integrity: sha512-AjqHOv2lAhkuUdIiBu9xbuettzAzWXmCEcLONNKJRba87WAefz8Ca9d6ds/SzrPc235n1IxWYdhJ2zF3MNUaoQ==} peerDependencies: diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx index 040d72cd..ef778ed6 100644 --- a/src/app/(home)/layout.tsx +++ b/src/app/(home)/layout.tsx @@ -16,7 +16,7 @@ export default async function HomeLayout({ }) { return ( <> -
+
diff --git a/src/components/home/PostCover.tsx b/src/components/home/PostCover.tsx index 515f07f2..6fcba405 100644 --- a/src/components/home/PostCover.tsx +++ b/src/components/home/PostCover.tsx @@ -1,17 +1,23 @@ +import "swiper/css" +import "swiper/css/effect-fade" +import "swiper/css/navigation" +import "swiper/css/pagination" +import { Autoplay, EffectFade, Navigation, Pagination } from "swiper/modules" +import { Swiper, SwiperSlide } from "swiper/react" import uniqolor from "uniqolor" import { Image } from "~/components/ui/Image" export default function PostCover({ - cover, - priority, + images, title, + uniqueKey, }: { - cover?: string - priority?: boolean + images?: string[] title?: string + uniqueKey?: string }) { - if (!cover) { + if (!images) { if (title) { const bgAccent = uniqolor(title, { saturation: [30, 35], @@ -48,14 +54,62 @@ export default function PostCover({ return ( <>
- cover + {images.length > 1 ? ( + <> + + {images.map((image) => ( + + cover + + ))} + +
+ +
+
+ +
+ + ) : ( + cover + )}
) diff --git a/src/components/site/PostCover.tsx b/src/components/site/PostCover.tsx deleted file mode 100644 index ec9cefdc..00000000 --- a/src/components/site/PostCover.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Image } from "~/components/ui/Image" - -export default function PostCover({ - cover, - priority, -}: { - cover?: string - priority?: boolean -}) { - if (!cover) return null - - return ( - <> -
- cover -
- - ) -} diff --git a/src/css/tailwind.css b/src/css/tailwind.css index 7b1bff96..e9c4ed20 100644 --- a/src/css/tailwind.css +++ b/src/css/tailwind.css @@ -529,3 +529,30 @@ textarea.input { .right { @apply flex justify-end; } + +.swiper-button { + @apply absolute top-1/2 -translate-y-1/2 bg-white rounded-full z-[1] w-6 h-6 flex items-center justify-center opacity-80; +} + +.swiper .swiper-pagination-bullet { + @apply bg-zinc-100 opacity-50 w-[7px] h-[7px]; +} + +.swiper .swiper-pagination-bullet-active { + @apply opacity-100; +} + +.swiper .swiper-pagination-bullets { + @apply leading-3; +} + +.swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { + @apply bg-accent; + transition-duration: 5000ms !important; + transition-timing-function: linear; + transform: translate3d(0px, 0px, 0px) scaleX(0) scaleY(1); +} + +.swiper .swiper-pagination-progressbar.swiper-pagination-horizontal { + @apply h-[2px] bg-transparent; +} diff --git a/src/lib/expand-unit.ts b/src/lib/expand-unit.ts index f04bf77b..8dfbd749 100644 --- a/src/lib/expand-unit.ts +++ b/src/lib/expand-unit.ts @@ -57,6 +57,25 @@ export const expandCrossbellNote = async ({ )?.address || rendered.cover || `${SITE_URL}/api/og?noteId=${expandedNote.noteId}&characterId=${expandedNote.characterId}` + + expandedNote.metadata.content.images = [] + const cover = expandedNote.metadata?.content?.attachments?.find( + (attachment) => attachment.name === "cover", + )?.address + if (cover) { + expandedNote.metadata.content.images.push(cover) + } + expandedNote.metadata.content.images = + expandedNote.metadata.content.images.concat(rendered.images) + if (!expandedNote.metadata.content.images.length) { + expandedNote.metadata.content.images.push( + `${SITE_URL}/api/og?noteId=${expandedNote.noteId}&characterId=${expandedNote.characterId}`, + ) + } + expandedNote.metadata.content.images = [ + ...new Set(expandedNote.metadata.content.images), + ] + expandedNote.metadata.content.audio = rendered.audio expandedNote.metadata.content.frontMatter = rendered.frontMatter diff --git a/src/lib/types.ts b/src/lib/types.ts index 9e063f4b..7e9d1992 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -78,6 +78,7 @@ export type ExpandedNote = NoteEntity & { content: { summary?: string cover?: string + images?: string[] frontMatter?: Record slug?: string audio?: string diff --git a/src/markdown/index.ts b/src/markdown/index.ts index f39e36ae..edf0a9bc 100644 --- a/src/markdown/index.ts +++ b/src/markdown/index.ts @@ -64,6 +64,7 @@ export type MarkdownEnv = { frontMatter: Record __internal: Record cover: string + images: string[] audio: string toc: TocResult | null tree: Root | null @@ -91,6 +92,7 @@ export const renderPageContent = ( __internal: {}, frontMatter: {}, cover: "", + images: [], audio: "", toc: null, tree: null, @@ -251,6 +253,7 @@ export const renderPageContent = ( excerpt: result?.data.meta.description, frontMatter: env.frontMatter, cover: env.cover, + images: env.images, audio: env.audio, toc: env.toc, tree: env.tree, diff --git a/src/markdown/rehype-image.ts b/src/markdown/rehype-image.ts index 3970db54..1c2d8887 100644 --- a/src/markdown/rehype-image.ts +++ b/src/markdown/rehype-image.ts @@ -31,6 +31,7 @@ export const rehypeImage: Plugin, Root> = ({ env.cover = url first = false } + env.images.push(url) if (isExternLink(url)) { if (!url.startsWith("https:") && IS_PROD) {