Merge branch 'dev'

GuMengYu · May 7, 2024 · 08a9e7e · 08a9e7e
2 parents e85e34e + d89144d
commit 08a9e7e
Show file tree

Hide file tree

Showing 30 changed files with 12,400 additions and 8,272 deletions.
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,3 +1,8 @@
 import eslintConfig from '@sanomics/eslint-config'
 
-export default eslintConfig()
+export default eslintConfig({
+    ignores: [
+        'packages/app/types/sanity/index.ts',
+        'packages/app/types/sanity/schemas.json',
+    ],
+})
diff --git a/package.json b/package.json
@@ -3,19 +3,20 @@
   "type": "module",
   "private": true,
   "scripts": {
+    "bp": "pnpm --filter app bp",
     "clean": "rm -rf node_modules && pnpm -r exec rm -rf node_modules .nuxt",
     "dev": "pnpm --filter app dev",
     "dev:studio": "pnpm --filter studio dev",
     "build": "pnpm --filter app build",
     "build:studio": "pnpm --filter studio build",
-    "preview": "pnpm --filter app preview",
-    "bp": "pnpm --filter app bp",
-    "typecheck": "pnpm --filter app typecheck",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "preview": "pnpm --filter app preview",
+    "studio:typegen": "pnpm --filter studio extract && pnpm --filter studio typegen",
+    "typecheck": "pnpm --filter app typecheck"
   },
   "devDependencies": {
-    "@sanomics/eslint-config": "latest",
+    "@sanomics/eslint-config": "^1.2.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "env-cmd": "^10.1.0",

diff --git a/packages/app/components/InstantFilmPile.client.vue b/packages/app/components/InstantFilmPile.client.vue
@@ -3,11 +3,11 @@ import { useMotions } from '@vueuse/motion'
 import { promiseTimeout } from '@vueuse/core'
 
 import type { Handler } from '@vueuse/gesture'
-import type { ResolvedSanityImage } from '@sanity/asset-utils'
 import type { Variant } from '@vueuse/motion'
+import type { InstantFilmsQueryResult } from '~/types/sanity'
 
 const props = defineProps<{
-    instantFilms: { image: ResolvedSanityImage, orientation: 'portrait' | 'landscape' }[]
+    instantFilms: { image: NonNullable<InstantFilmsQueryResult>[number], orientation: 'portrait' | 'landscape' }[]
 }>()
 
 const motions = useMotions()
@@ -82,7 +82,7 @@ whenever(() => goneCards.size === props.instantFilms.length, async () => {
 </script>
 
 <template>
-    <div v-for="(card, i) in instantFilms" :key="card.image.asset._id" class="film-container">
+    <div v-for="(card, i) in instantFilms" :key="card.image.asset!._id" class="film-container">
         <instant-film-frame
             v-motion="`motion-${i}`"
             v-drag="handleDrag(i)"
@@ -91,7 +91,7 @@ whenever(() => goneCards.size === props.instantFilms.length, async () => {
             :class="goneCards.size === instantFilms.length - i - 1 ? 'pointer-events-auto' : 'pointer-events-none'"
         >
             <my-sanity-image
-                :src="card.image.asset._id" :width="720" :height="720"
+                :src="card.image.asset!._id" :width="720" :height="720"
                 :class="[
                     card.orientation === 'landscape'
                         ? 'w-[224px] h-[168px] lg:w-[256px] lg:h-[192px]'

diff --git a/packages/app/components/InstantFilmPile.server.vue b/packages/app/components/InstantFilmPile.server.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { ResolvedSanityImage } from '@sanity/asset-utils'
+import type { InstantFilmsQueryResult } from '~/types/sanity'
 
 const props = defineProps<{
-    instantFilms: { image: ResolvedSanityImage, orientation: 'portrait' | 'landscape' }[]
+    instantFilms: { image: NonNullable<InstantFilmsQueryResult>[number], orientation: 'portrait' | 'landscape' }[]
 }>()
 </script>
 
 <template>
-    <div v-for="card in instantFilms" :key="card.image.asset._id" class="hidden">
-        <my-sanity-image :src="card.image.asset._id" preload :width="1440" :height="1440" />
+    <div v-for="card in instantFilms" :key="card.image.asset!._id" class="hidden">
+        <my-sanity-image :src="card.image.asset!._id" preload :width="1440" :height="1440" />
     </div>
 </template>
diff --git a/packages/app/components/MySanityImage.vue b/packages/app/components/MySanityImage.vue
@@ -1,3 +1,17 @@
+<script lang="ts">
+import { imgProps } from '#image/components/nuxt-img'
+
+export default defineComponent({
+    props: {
+        ...imgProps,
+        provider: {
+            type: String,
+            default: 'mySanity',
+        },
+    },
+})
+</script>
+
 <template>
-    <nuxt-img provider="mySanity" />
+    <nuxt-img v-bind="$props" />
 </template>
diff --git a/packages/app/components/photography/Cover.vue b/packages/app/components/photography/Cover.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { GalleryListItem } from '~/server/api/galleries/index.get'
+import type { GalleriesQueryResult } from '~/types/sanity'
 
 const props = defineProps<{
-    item: GalleryListItem
+    item: NonNullable<GalleriesQueryResult>[number]
 }>()
 
 const localePath = useLocalePath()
@@ -16,9 +16,9 @@ const localePath = useLocalePath()
         >
             <div class="image-wrapper h-full">
                 <my-sanity-image
-                    :src="item.coverImage.asset._id"
+                    :src="item.coverImage?.asset?._id"
                     fit="cover" width="330px" height="330px"
-                    :placeholder="item.coverImage.asset.metadata.lqip!"
+                    :placeholder="item.coverImage?.asset?.metadata?.lqip"
                     class="bg-cover h-full w-full"
                 />
             </div>

diff --git a/packages/app/components/work/ContentImg.vue b/packages/app/components/work/ContentImg.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { ResolvedSanityImage } from '@sanity/asset-utils'
 import type { Link } from './ContentImgLayout.vue'
+import type { ProjectQueryResult } from '~/types/sanity'
 
 const props = defineProps<{
-    img: ResolvedSanityImage
+    img: NonNullable<ProjectQueryResult>['coverImage'] | null
     url?: string
     sourceCodeUrl?: string
 }>()
@@ -18,16 +18,16 @@ const link = computed<Link | undefined>(
 </script>
 
 <template>
-    <work-content-img-layout :link>
-        <ui-aspect-ratio :ratio="img.asset.metadata.dimensions.aspectRatio">
+    <work-content-img-layout v-if="img" :link>
+        <ui-aspect-ratio :ratio="img.asset?.metadata?.dimensions?.aspectRatio">
             <my-sanity-image
                 v-bind="$attrs"
-                :src="img.asset._id"
+                :src="img.asset?._id"
                 width="720" quality="95"
                 class="h-full" :class="[
-                    !img.asset.metadata.hasAlpha && 'bg-cover drop-shadow-2xl',
+                    !img.asset?.metadata?.hasAlpha && 'bg-cover drop-shadow-2xl',
                 ]"
-                :style="{ backgroundImage: !img.asset.metadata.hasAlpha && `url(${img.asset.metadata.lqip!})` }"
+                :style="{ backgroundImage: !img.asset?.metadata?.hasAlpha && `url(${img.asset?.metadata?.lqip!})` }"
             />
         </ui-aspect-ratio>
     </work-content-img-layout>

diff --git a/packages/app/pages/galleries/[slug].vue b/packages/app/pages/galleries/[slug].vue
@@ -2,17 +2,17 @@
 import PhotoSwipeLightbox from 'photoswipe/lightbox'
 import 'photoswipe/style.css'
 import PhotoSwipeDynamicCaption from 'photoswipe-dynamic-caption-plugin'
-import 'photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css'
 
-import type { Gallery } from '~/server/api/galleries/[slug].get'
+import 'photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css'
+import type { GalleryQueryResult } from '~/types/sanity'
 
 definePageMeta({
     scrollToTop: true,
 })
 
 const route = useRoute()
 
-const { data } = await useFetch<Gallery | null>(`/api/galleries/` + `${route.params.slug}`)
+const { data } = await useFetch<GalleryQueryResult>(`/api/galleries/` + `${route.params.slug}`)
 
 const { t } = useI18n()
 const { $sanityI18n } = useNuxtApp()
@@ -60,7 +60,7 @@ onUnmounted(() => {
         <div class="pb-6 text-center text-sm text-muted-foreground flex justify-center space-x-2">
             <p class="metadata-item">
                 <icon name="solar:album-linear" />
-                <span>{{ $t('photography.count', { count: data.images.length }) }}</span>
+                <span>{{ $t('photography.count', { count: data.images?.length || 0 }) }}</span>
             </p>
 
             <template v-if="data.photographDate">
@@ -81,26 +81,26 @@ onUnmounted(() => {
                 grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5
             "
         >
-            <figure v-for="item in data.images" :key="item.asset._id" class="photo relative block">
+            <figure v-for="item in data.images" :key="item.asset!._id" class="photo relative block">
                 <a
-                    :href="img(item.asset._id, {}, { provider: 'mySanity' })"
-                    :data-pswp-width="item.asset.metadata.dimensions.width"
-                    :data-pswp-height="item.asset.metadata.dimensions.height"
+                    :href="img(item.asset!._id, {}, { provider: 'mySanity' })"
+                    :data-pswp-width="item.asset?.metadata?.dimensions?.width"
+                    :data-pswp-height="item.asset?.metadata?.dimensions?.height"
                     data-cropped="true"
                     target="_blank"
                     class="block relative w-full h-full pb-[100%] overflow-hidden"
                 >
                     <img
                         :src="img(
-                            item.asset._id,
+                            item.asset!._id,
                             { height: 1024, width: 1024 },
                             { provider: 'mySanity' },
                         )"
                         class="bg-cover w-full h-full object-cover absolute top-0 left-0"
-                        :style="{ backgroundImage: `url(${item.asset.metadata.lqip!})` }"
+                        :style="{ backgroundImage: `url(${item.asset?.metadata?.lqip!})` }"
                     />
-                    <div v-if="item.asset.metadata.exif" class="pswp-caption-content">
-                        <photography-photo-caption :exif="item.asset.metadata.exif" />
+                    <div v-if="(item.asset?.metadata as any).exif" class="pswp-caption-content">
+                        <photography-photo-caption :exif="(item.asset?.metadata as any).exif" />
                     </div>
                 </a>
             </figure>

diff --git a/packages/app/pages/index.vue b/packages/app/pages/index.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { ResolvedSanityImage } from '@sanity/asset-utils'
-
 const localePath = useLocalePath()
 
-const { data } = await useFetch<ResolvedSanityImage[]>('/api/instant-films')
+const { data } = await useFetch('/api/instant-films')
 
+// TODO: directly pass `data` to <instant-film-pile />
 const instantFilms = computed(() => data.value?.map(image => ({
     image,
-    orientation: image?.asset.metadata.dimensions.aspectRatio > 1
+    orientation: image.asset!.metadata!.dimensions!.aspectRatio! > 1
         ? 'landscape' as const
         : 'portrait' as const,
 })))

diff --git a/packages/app/pages/photography.vue b/packages/app/pages/photography.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { GalleryListItem } from '~/server/api/galleries/index.get'
+import type { GalleriesQueryResult } from '~/types/sanity'
 
 const { t } = useI18n()
 
 useHead({
     title: t('app.photography'),
 })
 
-const { data } = await useFetch<GalleryListItem[]>('/api/galleries')
+const { data } = await useFetch<GalleriesQueryResult>('/api/galleries')
 </script>
 
 <template>

diff --git a/packages/app/pages/work/[slug].vue b/packages/app/pages/work/[slug].vue
@@ -3,10 +3,10 @@ import { PortableText } from '@portabletext/vue'
 
 import WorkContentImg from '~/components/work/ContentImg.vue'
 
-import type { ProjectDetail } from '~/server/api/projects/[slug].get'
+import type { ProjectQueryResult } from '~/types/sanity'
 
 const route = useRoute()
-const { data } = await useFetch<ProjectDetail>(`/api/projects/${route.params.slug}`)
+const { data } = await useFetch<ProjectQueryResult>(`/api/projects/${route.params.slug}`)
 
 const { $sanityI18n } = useNuxtApp()
 const { t } = useI18n()

diff --git a/packages/app/pages/work/index.vue b/packages/app/pages/work/index.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { Project } from '~/server/api/projects/index.get'
+import type { ProjectsQueryResult } from '~/types/sanity'
 
 const { t } = useI18n()
 
 useHead({
     title: t('app.work'),
 })
 
-const { data } = await useFetch<Project[]>('/api/projects')
+const { data } = await useFetch<ProjectsQueryResult>('/api/projects')
 
 const localePath = useLocalePath()
 </script>
@@ -19,9 +19,9 @@ const localePath = useLocalePath()
                 <div class="mb-6 md:mb-0 w-4/5 md:w-[200px] xl:w-[240px] self-center md:self-auto">
                     <ui-aspect-ratio :ratio="16 / 10">
                         <my-sanity-image
-                            :src="item.coverImage.asset._id"
+                            :src="item.coverImage?.asset?._id"
                             fit="cover" height="330px"
-                            :placeholder="item.coverImage.asset.metadata.lqip!"
+                            :placeholder="item.coverImage?.asset?.metadata?.lqip"
                             class="bg-cover h-full w-full rounded object-cover"
                         />
                     </ui-aspect-ratio>

diff --git a/packages/app/plugins/sanity-i18n.ts b/packages/app/plugins/sanity-i18n.ts
@@ -1,6 +1,7 @@
 import type { PickupFallbackLocales, UnionToTuple } from '@intlify/core'
 import type { PortableTextBlock } from '@portabletext/types'
 import type { Value } from 'sanity-plugin-internationalized-array'
+import type { ProjectQueryResult } from '~/types/sanity'
 
 export default defineNuxtPlugin({
     setup() {
@@ -14,10 +15,10 @@ export default defineNuxtPlugin({
 
         const fallbackLocale = $i18n.fallbackLocale.value as { [locale in string]?: Array<PickupFallbackLocales<UnionToTuple<string>>> }
 
-        function sanityI18n(values?: Value[]): string | undefined
-        function sanityI18n(values?: { value?: PortableTextBlock }[]): PortableTextBlock[]
+        function sanityI18n(values?: Value[] | null): string | undefined
+        function sanityI18n(values?: NonNullable<ProjectQueryResult>['content']): PortableTextBlock[]
 
-        function sanityI18n(values?: any[]) {
+        function sanityI18n(values?: any[] | null) {
             if (!values) return
             const locale = $i18n.locale.value
             const locales = [locale]

diff --git a/packages/app/server/api/galleries/[slug].get.ts b/packages/app/server/api/galleries/[slug].get.ts
@@ -1,21 +1,13 @@
-import type { ResolvedSanityImage } from '@sanity/asset-utils'
-import type { Value } from 'sanity-plugin-internationalized-array'
-
-export interface Gallery {
-    name: Value[]
-    photographDate: `${number}-${number}-${number}`
-    description: Value[]
-    images: ResolvedSanityImage[]
-}
+import type { GalleriesQueryResult } from '~/types/sanity'
 
 export default defineEventHandler(async (event) => {
     const { slug } = getRouterParams(event)
-    const query = groq`*[_type == "galleries" && slug.current == "${slug}"][0]{
+    const galleryQuery = groq`*[_type == "gallery" && slug.current == $slug][0]{
         ...,
         images[]{
             ...,
             asset->
         }
     }`
-    return await useSanity().fetch<Gallery | null>(query)
+    return await useSanity().fetch<GalleriesQueryResult>(galleryQuery, { slug })
 })
diff --git a/packages/app/server/api/galleries/index.get.ts b/packages/app/server/api/galleries/index.get.ts
@@ -1,8 +1,7 @@
-import type { ResolvedSanityImage } from '@sanity/asset-utils'
-import type { Value } from 'sanity-plugin-internationalized-array'
+import type { GalleriesQueryResult } from '~/types/sanity'
 
-const query = groq`
-*[_type == "galleries"]{
+const galleriesQuery = groq`
+*[_type == "gallery"]{
     "id": _id,
     name,
     description,
@@ -22,19 +21,8 @@ const query = groq`
     desc
 )`
 
-export interface GalleryListItem {
-    id: string
-    name: Value[]
-    description: Value[]
-    slug: string
-    _createdAt: string
-    coverImage: ResolvedSanityImage
-    imageCount: number
-    photographDate: `${number}-${number}-${number}`
-}
-
 export default defineCachedEventHandler(async () => {
-    return await useSanity().fetch<GalleryListItem[]>(query)
+    return await useSanity().fetch<GalleriesQueryResult[]>(galleriesQuery)
 }, {
     // staleMaxAge: 60 * 60,
 })
diff --git a/packages/app/server/api/instant-films.get.ts b/packages/app/server/api/instant-films.get.ts
@@ -1,14 +1,14 @@
-import type { ResolvedSanityImage } from '@sanity/asset-utils'
+import type { InstantFilmsQueryResult } from '~/types/sanity'
 
-const query = groq`
-*[_id == "instantFilms"].instantFilms[-5..-1]{
+const instantFilmsQuery = groq`
+*[_type == "instantFilm"][0].instantFilms[-5..-1]{
     ...,
     asset->,
 }
 `
 
 export default defineCachedEventHandler(async () => {
-    return await useSanity().fetch<ResolvedSanityImage[]>(query)
+    return await useSanity().fetch<InstantFilmsQueryResult>(instantFilmsQuery)
 }, {
     staleMaxAge: 60 * 60,
 })