chore: image size

components/module/Gallery.vue

@@ -33,11 +33,13 @@ const props = defineProps<Props>()
  <NuxtImg
  class="w-full"
  format="webp"
+ placeholder 
  :src="props.module!.image"
  :alt="module.title"
  referrerpolicy="no-referrer"
  loading="lazy"
- width="420px"
+ :width="`${module.imageWidth}px`"
+ :height="`${module.imageHeight}px`"
  />
  <div class="absolute bottom-0 left-0 px-5 pt-5 pb-4 bg-gradient-to-t from-black/35 to-transparent w-full">
  <h3 class="drop-shadow-md text-white font-bold text-2xl tracking-tight">

components/module/Image.vue

@@ -38,7 +38,8 @@ const text = computed(() => extractTextFromHTML(props.module.content))
  :alt="module.title"
  referrerpolicy="no-referrer"
  loading="lazy"
- width="420px"
+ :width="`${module.imageWidth}px`"
+ :height="`${module.imageHeight}px`"
  />
  </div>
  </div>

package.json

@@ -28,6 +28,7 @@
  "consola": "^3.2.3",
  "lucide-vue-next": "^0.372.0",
  "pinia": "^2.1.7",
+ "probe-image-size": "^7.2.3",
  "radix-vue": "^1.7.2",
  "sharp": "^0.33.3",
  "tailwind-merge": "^2.3.0",

prisma/schema.prisma

@@ -23,17 +23,19 @@ model API {
 }
 
 model Module {
- id String @id @default(uuid())
- createdAt DateTime @default(now())
- updatedAt DateTime @updatedAt
- title String
- url String @unique
- image String?
- content String
- date DateTime
- platform String[]
- flowId String?
- flow Flow? @relation(fields: [flowId], references: [id], onDelete: Cascade)
+ id String @id @default(uuid())
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+ title String
+ url String @unique
+ image String?
+ imageWidth Int?
+ imageHeight Int?
+ content String
+ date DateTime
+ platform String[]
+ flowId String?
+ flow Flow? @relation(fields: [flowId], references: [id], onDelete: Cascade)
 }
 
 /// Flow is a section includes modules

server/flowing.ts

@@ -1,5 +1,6 @@
 import { consola } from 'consola'
 import { type API, type Flow, PrismaClient } from '@prisma/client'
+import probe from 'probe-image-size'
 import type { NModule } from '~/composables/adapter/types'
 import useAdapter from '~/composables/adapter/useAdapter'
 import config from '~/config/config.json'
@@ -111,32 +112,53 @@ async function upsert(ele: NModule, flowId: string) {
  },
  })
 
+ let result
+ if (ele.image) {
+ result = await probe(ele.image)
+ }
+
  // 如果找到已存在的模块，则打印信息并更新
  if (res) {
  consola.info(`Exists: ${ele.title}`)
+ let data = {
+ title: ele.title,
+ content: ele.content,
+ image: ele.image,
+ date: ele.date,
+ }
+ if (result?.width && result?.height) {
+ data = {
+ ...data,
+ imageWidth: result.width,
+ imageHeight: result.height,
+ }
+ }
  await prisma.module.update({
  where: {
  id: res.id,
  },
- data: {
- title: ele.title,
- content: ele.content,
- image: ele.image,
- date: ele.date,
- },
+ data,
  })
  return
  }
 
  // 如果未找到已存在的模块，则打印成功消息并尝试插入新模块
  consola.success(`Add: ${ele.title}`)
  try {
+ let data = {
+ ...ele,
+ date: ele.date || new Date().toISOString(),
+ flowId,
+ }
+ if (result?.width && result?.height) {
+ data = {
+ ...data,
+ imageWidth: result.width,
+ imageHeight: result.height,
+ }
+ }
  await prisma.module.create({
- data: {
- ...ele,
- date: ele.date || new Date().toISOString(),
- flowId,
- },
+ data,
  })
  }
  catch (error) {
@@ -215,3 +237,25 @@ export async function flowingByFlowId(flowId: string) {
  if (flow)
  await flowingByFlow(flow)
 }
+
+export async function allSize() {
+ const modules = await prisma.module.findMany({
+ where: {
+ imageWidth: null,
+ image: { not: '' },
+ },
+ })
+ for (const module of modules) {
+ const result = await probe(module.image)
+ if (result?.width && result?.height) {
+ consola.success(`Image size updated: ${module.title} `)
+ await prisma.module.update({
+ where: { id: module.id },
+ data: {
+ imageWidth: result.width,
+ imageHeight: result.height,
+ },
+ })
+ }
+ }
+}

server/plugins/scheduler.ts

@@ -1,5 +1,5 @@
 import { useScheduler } from '#scheduler'
-import { flowing } from '~/server/flowing'
+import { flowing, allSize } from '~/server/flowing'
 
 export default defineNitroPlugin(() => {
  startScheduler()
@@ -8,8 +8,12 @@ export default defineNitroPlugin(() => {
 function startScheduler() {
  const scheduler = useScheduler()
 
- // fetch every 1 hour
+ // fetch every 3 hour
  scheduler.run(async () => {
  await flowing()
- }).everyHours(1)
+ }).everyHours(3)
+
+ scheduler.run(async () => {
+ await allSize()
+ }).everyDays(14)
 }