Dev

next.config.ts

@@ -6,6 +6,8 @@ const cockpitHost = cockpitUrl ? new URL(cockpitUrl).hostname : ''
 const nextConfig: NextConfig = {
   images: {
     formats: ['image/avif', 'image/webp'],
+    qualities: [80, 90],
+    minimumCacheTTL: 43200,
     remotePatterns: [
       {
         protocol: 'https',

src/actions/forms.ts

@@ -102,6 +102,7 @@ export async function submitReview(
 
   const date = new Date().toISOString().slice(0, 10)
   const safeName = name.replace(/\s+/g, '_').replace(/[^a-zA-Zа-яёА-ЯЁ0-9_]/g, '')
+  const targetFolder = '6a00a163c6c8763d26aad9a3'
 
   const renamedFiles = photoFiles.map((file, index) => {
     const ext = file.name.includes('.') ? file.name.split('.').pop() : 'jpg'
@@ -111,7 +112,8 @@ export async function submitReview(
     return new File([file], newName, { type: file.type })
   })
 
-  const uploadedAssets = renamedFiles.length > 0 ? await cockpit.uploadAssets(renamedFiles) : []
+  const uploadedAssets =
+    renamedFiles.length > 0 ? await cockpit.uploadAssets(renamedFiles, targetFolder) : []
 
   const result = await cockpit.createItem('reviews', {
     name,
@@ -211,6 +213,7 @@ export async function submitApplication(
 
   const date = new Date().toISOString().slice(0, 10)
   const safeName = name.replace(/\s+/g, '_').replace(/[^a-zA-Zа-яёА-ЯЁ0-9_]/g, '')
+  const targetFolder = '6a03738dc6c876f8f315ef7f'
 
   const renamedFiles = photoFiles.map((file, index) => {
     const ext = file.name.includes('.') ? file.name.split('.').pop() : 'jpg'
@@ -219,7 +222,8 @@ export async function submitApplication(
     return new File([file], newName, { type: file.type })
   })
 
-  const uploadedAssets = renamedFiles.length > 0 ? await cockpit.uploadAssets(renamedFiles) : []
+  const uploadedAssets =
+    renamedFiles.length > 0 ? await cockpit.uploadAssets(renamedFiles, targetFolder) : []
 
   const result = await cockpit.createItem('applications', {
     name,

src/app/categories/[categories-detail]/page.tsx

@@ -38,7 +38,12 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
           ? category.description.replace(/<[^>]*>/g, '').slice(0, 160)
           : '',
         images: category.image
-          ? [{ url: getImageUrl(category.image._id, 1200, 630), alt: category.title }]
+          ? [
+              {
+                url: getImageUrl(category.image._id, 1200, 630, { mime: 'jpeg' }),
+                alt: category.title,
+              },
+            ]
           : [],
       },
       alternates: {
@@ -78,7 +83,7 @@ export default async function Page({ params }: PageProps): Promise<JSX.Element>
 
   const slidesList: SlideItem[] = category.slider?.map((image) => ({
     id: image._id,
-    image: getImageUrl(image._id, 800, 800),
+    image: getImageUrl(image._id, 800, 500),
     alt: image.title || category.title,
   }))
 

src/app/categories/page.tsx

@@ -53,7 +53,7 @@ export default async function Page({
     title: category.title,
     description: category.description,
     href: `/categories/${category.slug || category._id}`,
-    image: getImageUrl(category.image._id, 400, 400),
+    image: getImageUrl(category.image._id, 600, 500),
     alt: category.image.title || category.title,
   }))
 

src/app/in-stock/[in-stock-detail]/page.tsx

@@ -33,7 +33,9 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
     openGraph: {
       title: work.title,
       description,
-      images: work.image ? [{ url: getImageUrl(work.image._id, 1200, 630), alt: work.title }] : [],
+      images: work.image
+        ? [{ url: getImageUrl(work.image._id, 1200, 630, { mime: 'jpeg' }), alt: work.title }]
+        : [],
     },
     alternates: {
       canonical: `${process.env.SITE_URL || process.env.NEXT_PUBLIC_SITE_URL}/in-stock/${work.slug || work._id}`,
@@ -72,7 +74,7 @@ export default async function Page({ params }: PageProps): Promise<JSX.Element>
   const slidesList: SlideItem[] =
     work.slider?.map((image) => ({
       id: image._id,
-      image: getImageUrl(image._id, 800, 800),
+      image: getImageUrl(image._id, 800, 500),
       alt: image.title || work.title,
     })) || []
 
@@ -87,7 +89,9 @@ export default async function Page({ params }: PageProps): Promise<JSX.Element>
     description: work.description
       ? work.description.replace(/<[^>]*>/g, '').slice(0, 160)
       : work.title,
-    image: work.image ? getImageUrl(work.image._id, 1200, 630) : undefined,
+    image: work.image
+      ? getImageUrl(work.image._id, 1200, 630, { mode: 'thumbnail', mime: 'jpeg' })
+      : undefined,
     brand: {
       '@type': 'Organization',
       name: 'Иконописная Артель',

src/app/in-stock/page.tsx

@@ -58,7 +58,7 @@ export default async function Page({
     title: work.title,
     description: work.description,
     href: `/in-stock/${work.slug || work._id}`,
-    image: getImageUrl(work.image._id, 400, 400),
+    image: getImageUrl(work.image._id, 600, 500),
     alt: work.image.title || work.title,
   }))
 

src/app/news/[news-detail]/page.tsx

@@ -32,7 +32,9 @@ export async function generateMetadata({ params }: PageParams): Promise<Metadata
     openGraph: {
       title: news.title,
       description,
-      images: news.image ? [{ url: getImageUrl(news.image._id, 1200, 630), alt: news.title }] : [],
+      images: news.image
+        ? [{ url: getImageUrl(news.image._id, 1200, 630, { mime: 'jpeg' }), alt: news.title }]
+        : [],
     },
     alternates: {
       canonical: `${process.env.SITE_URL || process.env.NEXT_PUBLIC_SITE_URL}/news/${news.slug || news._id}`,
@@ -72,7 +74,7 @@ export default async function Page({ params }: PageParams): Promise<JSX.Element>
   const slidesList: SlideItem[] =
     news.slider?.map((image) => ({
       id: image._id,
-      image: getImageUrl(image._id, 800, 800),
+      image: getImageUrl(image._id, 800, 500),
       alt: image.title || news.title,
     })) || []
 
@@ -81,7 +83,7 @@ export default async function Page({ params }: PageParams): Promise<JSX.Element>
     '@type': 'Article',
     headline: news.title,
     description: (news.content || news.description || '').replace(/<[^>]*>/g, '').slice(0, 160),
-    image: news.image ? getImageUrl(news.image._id, 1200, 630) : undefined,
+    image: news.image ? getImageUrl(news.image._id, 1200, 630, { mime: 'jpeg' }) : undefined,
     datePublished: news._created ? new Date(news._created * 1000).toISOString() : undefined,
     dateModified: news._modified ? new Date(news._modified * 1000).toISOString() : undefined,
     author: {

src/app/news/page.tsx

@@ -55,7 +55,7 @@ export default async function Page({
     title: news.title,
     description: news.description,
     href: `/news/${news.slug || news._id}`,
-    image: getImageUrl(news.image._id, 400, 400),
+    image: getImageUrl(news.image._id, 600, 500),
     alt: news.image.title || news.title,
   }))
 

src/app/reviews/page.tsx

@@ -58,8 +58,8 @@ export default async function Page({
       review.photos.forEach((img) => {
         if (img._id) {
           photos.push({
-            thumb: getImageUrl(img._id, 400, 300, 'thumbnail'),
-            full: getImageUrl(img._id, 1920, 1080, 'bestFit'),
+            thumb: getImageUrl(img._id, 400, 300),
+            full: getImageUrl(img._id, 1920, 1080, { mode: 'bestFit' }),
           })
         }
       })

src/app/works/[works-detail]/page.tsx

@@ -33,7 +33,9 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
     openGraph: {
       title: work.title,
       description,
-      images: work.image ? [{ url: getImageUrl(work.image._id, 1200, 630), alt: work.title }] : [],
+      images: work.image
+        ? [{ url: getImageUrl(work.image._id, 1200, 630, { mime: 'jpeg' }), alt: work.title }]
+        : [],
     },
     alternates: {
       canonical: `${process.env.SITE_URL || process.env.NEXT_PUBLIC_SITE_URL}/works/${work.slug || work._id}`,
@@ -72,7 +74,7 @@ export default async function Page({ params }: PageProps): Promise<JSX.Element>
   const slidesList: SlideItem[] =
     work.slider?.map((image) => ({
       id: image._id,
-      image: getImageUrl(image._id, 800, 800),
+      image: getImageUrl(image._id, 800, 500),
       alt: image.title || work.title,
     })) || []
 
@@ -87,7 +89,9 @@ export default async function Page({ params }: PageProps): Promise<JSX.Element>
     description: work.description
       ? work.description.replace(/<[^>]*>/g, '').slice(0, 160)
       : work.title,
-    image: work.image ? getImageUrl(work.image._id, 1200, 630) : undefined,
+    image: work.image
+      ? getImageUrl(work.image._id, 1200, 630, { mode: 'thumbnail', mime: 'jpeg' })
+      : undefined,
     brand: {
       '@type': 'Organization',
       name: 'Иконописная Артель',

src/app/works/page.tsx

@@ -55,7 +55,7 @@ export default async function Page({
     title: work.title,
     description: work.description,
     href: `/works/${work.slug || work._id}`,
-    image: getImageUrl(work.image._id, 400, 400),
+    image: getImageUrl(work.image._id, 600, 500),
     alt: work.image.title || work.title,
   }))
 

src/components/AboutPage/AboutPage.module.scss

@@ -25,23 +25,3 @@
 .about__text {
   font-size: 22px;
 }
-
-.about__slider {
-  overflow: hidden;
-}
-
-.about__image-wrapper {
-  position: relative;
-
-  width: 100%;
-  height: 500px;
-
-  @media (max-width: $tablet-min-width) {
-    height: 400px;
-  }
-}
-
-.about__image {
-  border-radius: 40px;
-  box-shadow: $cardShadow;
-}

src/components/AboutPage/AboutPage.tsx

@@ -2,11 +2,10 @@ import { JSX } from 'react'
 import clsx from 'clsx'
 import { ImageItem, SlideItem } from '@/types/types'
 import { createSanitizedHTML } from '@/functions/functions'
-import SliderDetail from '@/components/SliderDetail/SliderDetail'
 import aboutPageStyles from './AboutPage.module.scss'
 import { fetchSingleton, getImageUrl } from '@/lib/api-client'
-import Image from 'next/image'
 import EmptySection from '@/components/EmptySection/EmptySection'
+import GalleryBlock from '@/components/GalleryBlock/GalleryBlock'
 
 type AboutPageProps = {
   title: string
@@ -25,11 +24,14 @@ export default async function AboutPage(): Promise<JSX.Element> {
 
   const slidesList: SlideItem[] = about.slider?.map((image) => ({
     id: image._id,
-    image: getImageUrl(image._id, 800, 800),
+    image: getImageUrl(image._id, 800, 500),
     alt: image.title || about.title,
   }))
 
   const imageSrc = about.image ? getImageUrl(about.image._id, 800, 500) : ''
+  const imageFullSrc = about.image
+    ? getImageUrl(about.image._id, 1600, 1000, { mode: 'bestFit' })
+    : ''
   const alt = about.image?.alt ?? title
 
   return (
@@ -44,31 +46,12 @@ export default async function AboutPage(): Promise<JSX.Element> {
           />
         </div>
 
-        {slidesList.length > 0 && (
-          <div
-            className={aboutPageStyles['about__slider']}
-            data-animate="scale-in"
-            data-stagger="1"
-          >
-            <SliderDetail items={slidesList} />
-          </div>
-        )}
-
-        {slidesList.length === 0 && imageSrc && (
-          <div
-            className={aboutPageStyles['about__image-wrapper']}
-            data-animate="scale-in"
-            data-stagger="1"
-          >
-            <Image
-              className={aboutPageStyles['about__image']}
-              src={imageSrc}
-              sizes="(max-width: 768px) 100vw, 40vw"
-              alt={alt}
-              fill
-            />
-          </div>
-        )}
+        <GalleryBlock
+          slidesList={slidesList}
+          imageSrc={imageSrc}
+          imageFullSrc={imageFullSrc}
+          imageAlt={alt}
+        />
       </div>
     </section>
   )

src/components/Card/Card.tsx

@@ -17,8 +17,8 @@ export default function Card({ data }: CardProps): JSX.Element {
         className={cardStyles['card__image']}
         src={data.image}
         alt={data.alt}
-        width={400}
-        height={400}
+        width={600}
+        height={500}
       />
 
       <div className={cardStyles['card__content']}>

src/components/Detail/Detail.module.scss

@@ -1,8 +1,5 @@
 @use '../../styles/variables.scss' as *;
 
-.detail {
-}
-
 .detail__container {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -25,23 +22,3 @@
 .detail__text {
   font-size: 22px;
 }
-
-.detail__slider {
-  overflow: hidden;
-}
-
-.detail__image-wrapper {
-  position: relative;
-
-  width: 100%;
-  height: 500px;
-
-  @media (max-width: $tablet-min-width) {
-    height: 400px;
-  }
-}
-
-.detail__image {
-  border-radius: 40px;
-  box-shadow: $cardShadow;
-}

src/components/Detail/Detail.tsx

@@ -2,10 +2,9 @@ import { JSX } from 'react'
 import clsx from 'clsx'
 import { ImageItem, SlideItem } from '@/types/types'
 import { createSanitizedHTML } from '@/functions/functions'
-import SliderDetail from '@/components/SliderDetail/SliderDetail'
 import detailStyles from './Detail.module.scss'
 import { getImageUrl } from '@/lib/api-client'
-import Image from 'next/image'
+import GalleryBlock from '@/components/GalleryBlock/GalleryBlock'
 
 type DetailProps = {
   title: string
@@ -21,6 +20,7 @@ export default function Detail({
   description,
 }: DetailProps): JSX.Element {
   const src = getImageUrl(image._id, 800, 500)
+  const fullSrc = getImageUrl(image._id, 1600, 1000, { mode: 'bestFit' })
   const alt = image.alt ?? title
 
   return (
@@ -35,27 +35,12 @@ export default function Detail({
           />
         </div>
 
-        {slidesList.length > 0 && (
-          <div className={detailStyles['detail__slider']} data-animate="scale-in" data-stagger="1">
-            <SliderDetail items={slidesList} />
-          </div>
-        )}
-
-        {slidesList.length === 0 && image && (
-          <div
-            className={detailStyles['detail__image-wrapper']}
-            data-animate="scale-in"
-            data-stagger="1"
-          >
-            <Image
-              className={detailStyles['detail__image']}
-              src={src}
-              sizes="(max-width: 768px) 100vw, 40vw"
-              alt={alt}
-              fill
-            />
-          </div>
-        )}
+        <GalleryBlock
+          slidesList={slidesList}
+          imageSrc={src}
+          imageFullSrc={fullSrc}
+          imageAlt={alt}
+        />
       </div>
     </section>
   )