@simple-photo-gallery/theme-modern 2.0.0 → 2.0.2

package/astro.config.ts

@@ -21,5 +21,8 @@ export default defineConfig({
     define: {
       'process.env.GALLERY_JSON_PATH': JSON.stringify(sourceGalleryPath),
     },
+    ssr: {
+      noExternal: ['@simple-photo-gallery/common'],
+    },
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-photo-gallery/theme-modern",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Modern theme for Simple Photo Gallery",
   "license": "MIT",
   "author": "Vladimir Haltakov, Tomasz Rusin",
@@ -27,14 +27,16 @@
     "check": "npm run lint && npm run format"
   },
   "dependencies": {
-    "@types/photoswipe": "^4.1.6",
     "astro": "^5.11.0",
     "astro-relative-links": "^0.4.2",
+    "blurhash": "^2.0.5",
     "photoswipe": "^5.4.4"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.30.1",
+    "@simple-photo-gallery/common": "1.0.0",
+    "@types/photoswipe": "^4.1.6",
     "@typescript-eslint/eslint-plugin": "^8.35.1",
     "@typescript-eslint/parser": "^8.35.1",
     "eslint": "^9.30.1",

package/src/features/themes/base-theme/components/gallery-section/GallerySection.astro

@@ -3,7 +3,7 @@ import Container from '@/features/themes/base-theme/components/container/Contain
 import GallerySectionHeader from '@/features/themes/base-theme/components/gallery-section/GallerySectionHeader.astro';
 import GallerySectionItem from '@/features/themes/base-theme/components/gallery-section/GallerySectionItem.astro';
 
-import type { GallerySection as GallerySectionType } from '@/features/themes/base-theme/types/gallery';
+import type { GallerySection as GallerySectionType } from '@simple-photo-gallery/common/src/gallery';
 
 interface Props {
   section: GallerySectionType;
@@ -14,7 +14,7 @@ interface Props {
 const { section, sectionIndex, mediaBaseUrl } = Astro.props;
 
 const validImages = section.images.filter(
-  (image) => image.width > 0 && image.height > 0 && image.thumbnail?.width > 0 && image.thumbnail?.height > 0,
+  (image) => image.width > 0 && image.height > 0 && (image.thumbnail?.width || 0) > 0 && (image.thumbnail?.height || 0) > 0,
 );
 ---
 
@@ -22,7 +22,11 @@ const validImages = section.images.filter(
   <Container>
     <GallerySectionHeader section={section} />
     <div class="gallery-section__gallery" id={`gallery-${sectionIndex}`}>
-      {validImages.map((image) => <GallerySectionItem image={image} mediaBaseUrl={mediaBaseUrl} />)}
+      {
+        validImages.map((image) => (
+          <GallerySectionItem image={image} mediaBaseUrl={mediaBaseUrl} blurHash={image.thumbnail?.blurHash} />
+        ))
+      }
     </div>
   </Container>
 </section>

package/src/features/themes/base-theme/components/gallery-section/GallerySectionHeader.astro

@@ -1,5 +1,5 @@
 ---
-import type { GallerySection as GallerySectionType } from '@/features/themes/base-theme/types/gallery';
+import type { GallerySection as GallerySectionType } from '@simple-photo-gallery/common';
 
 interface Props {
   section: GallerySectionType;

package/src/features/themes/base-theme/components/gallery-section/GallerySectionItem.astro

@@ -1,14 +1,15 @@
 ---
 import { getPhotoPath, getRelativePath } from '@/features/themes/base-theme/utils';
 
-import type { GalleryImage } from '@/features/themes/base-theme/types/gallery';
+import type { MediaFile } from '@simple-photo-gallery/common/src/gallery';
 
 interface Props {
-  image: GalleryImage;
+  image: MediaFile;
   mediaBaseUrl?: string;
+  blurHash?: string;
 }
 
-const { image, mediaBaseUrl } = Astro.props;
+const { image, mediaBaseUrl, blurHash } = Astro.props;
 ---
 
 <a
@@ -20,14 +21,20 @@ const { image, mediaBaseUrl } = Astro.props;
   data-pswp-type={image.type}
   data-pswp-caption={image.alt ? `<p class="image-caption">${image.alt}</p>` : ''}
   style={`--w: ${image.thumbnail?.width}; --h: ${image.thumbnail?.height}`}>
-  <img
-    src={getRelativePath(image.thumbnail?.path)}
-    srcset={`${getRelativePath(image.thumbnail?.path)} 1x, ${getRelativePath(image.thumbnail?.pathRetina)} 2x`}
-    alt={image.alt}
-    loading="lazy"
-    width={image.thumbnail?.width}
-    height={image.thumbnail?.height}
-  />
+  <canvas data-blur-hash={blurHash} width={32} height={32}></canvas>
+
+  {
+    image.thumbnail && (
+      <img
+        src={getRelativePath(image.thumbnail.path)}
+        srcset={`${getRelativePath(image.thumbnail.path)} 1x, ${getRelativePath(image.thumbnail.pathRetina)} 2x`}
+        alt={image.alt}
+        loading="lazy"
+        width={image.thumbnail.width}
+        height={image.thumbnail.height}
+      />
+    )
+  }
 </a>
 
 <style>
@@ -45,6 +52,8 @@ const { image, mediaBaseUrl } = Astro.props;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     cursor: pointer;
+    position: relative;
+    z-index: 1;
   }
 
   .gallery-section__item:hover {
@@ -57,12 +66,31 @@ const { image, mediaBaseUrl } = Astro.props;
     height: auto;
     display: block;
     transition: transform 0.5s ease;
+    position: relative;
+    z-index: 2;
+    color: transparent;
+    font-size: 0;
   }
 
   .gallery-section__item:hover img {
     transform: scale(1.05);
   }
 
+  .gallery-section__item canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    display: block;
+    transition: transform 0.5s ease;
+  }
+
+  .gallery-section__item:hover canvas {
+    transform: scale(1.05);
+  }
+
   @media (min-width: 640px) {
     :root {
       --row-height: 8rem;

package/src/features/themes/base-theme/components/hero/Hero.astro

@@ -1,23 +1,66 @@
 ---
-import { DEFAULT_STATIC_ASSETS_PATH } from '@/config';
 import HeroScrollToGalleryBtn from '@/features/themes/base-theme/components/hero/HeroScrollToGalleryBtn.astro';
-import { getPhotoPath } from '@/features/themes/base-theme/utils';
 
 interface Props {
   title: string;
   description?: string;
-  backgroundImage: string;
-  mediaBaseUrl?: string;
 }
 
-const { title, description, backgroundImage, mediaBaseUrl } = Astro.props;
+const { title, description } = Astro.props;
 ---
 
 <section class="hero">
-  <div
-    class="hero__bg"
-    style={`background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('${getPhotoPath(backgroundImage, mediaBaseUrl) || `${DEFAULT_STATIC_ASSETS_PATH}/images/hero-placeholder.png`}')`}>
-  </div>
+  <picture class="hero__bg">
+    <!-- Portrait -->
+    <source
+      type="image/avif"
+      media="(max-aspect-ratio: 3/4)"
+      srcset="
+        gallery/images/header_portrait_360.avif 360w,
+        gallery/images/header_portrait_480.avif 480w,
+        gallery/images/header_portrait_720.avif 720w,
+        gallery/images/header_portrait_1080.avif 1080w"
+      sizes="(max-aspect-ratio: 3/4) 160vw, 100vw"
+    />
+    <source
+      type="image/jpeg"
+      media="(max-aspect-ratio: 3/4)"
+      srcset="
+        gallery/images/header_portrait_360.jpg 360w,
+        gallery/images/header_portrait_480.jpg 480w,
+        gallery/images/header_portrait_720.jpg 720w,
+        gallery/images/header_portrait_1080.jpg 1080w"
+      sizes="(max-aspect-ratio: 3/4) 160vw, 100vw"
+    />
+
+    <!-- Landscape -->
+    <source
+      type="image/avif"
+      srcset="
+        gallery/images/header_landscape_640.avif 640w,
+        gallery/images/header_landscape_960.avif 960w,
+        gallery/images/header_landscape_1280.avif 1280w,
+        gallery/images/header_landscape_1920.avif 1920w,
+        gallery/images/header_landscape_2560.avif 2560w,
+        gallery/images/header_landscape_3840.avif 3840w"
+      sizes="100vw"
+    />
+    <source
+      type="image/jpg"
+      srcset="
+      gallery/images/header_landscape_640.jpg 640w,
+      gallery/images/header_landscape_960.jpg 960w,
+      gallery/images/header_landscape_1280.jpg 1280w,
+      gallery/images/header_landscape_1920.jpg 1920w,
+      gallery/images/header_landscape_2560.jpg 2560w,
+      gallery/images/header_landscape_3840.jpg 3840w"
+      sizes="100vw"
+    />
+
+    <!-- Fallback -->
+    <img src="gallery/images/header_landscape_1920.jpg" alt={title} />
+  </picture>
+  <div class="hero__overlay"></div>
   <div class="hero__content">
     <h1 class="hero__title">{title}</h1>
     {description && <p class="hero__description">{description}</p>}
@@ -42,9 +85,23 @@ const { title, description, backgroundImage, mediaBaseUrl } = Astro.props;
     left: 0;
     width: 100%;
     height: 100%;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
+  }
+
+  .hero__bg img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+
+  .hero__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 5;
   }
 
   .hero__content {

package/src/features/themes/base-theme/components/sub-galleries/SubGalleries.astro

@@ -1,5 +1,4 @@
 ---
-import { DEFAULT_STATIC_ASSETS_PATH } from '@/config';
 import Container from '@/features/themes/base-theme/components/container/Container.astro';
 import { getRelativePath, getSubgalleryThumbnailPath } from '@/features/themes/base-theme/utils';
 
@@ -11,20 +10,18 @@ interface SubGallery {
 
 interface Props {
   title?: string;
-  description?: string;
   subGalleries: SubGallery[];
 }
 
-const { title, description, subGalleries } = Astro.props;
+const { title, subGalleries } = Astro.props;
 ---
 
 <section class="sub-galleries">
   <Container>
     {
-      (title || description) && (
+      (title) && (
         <div class="sub-galleries__header">
           {title && <h2 class="sub-galleries__header-title">{title}</h2>}
-          {description && <p class="sub-galleries__header-description">{description}</p>}
         </div>
       )
     }
@@ -33,14 +30,7 @@ const { title, description, subGalleries } = Astro.props;
         subGalleries.map((subgallery) => (
           <a href={getRelativePath(subgallery.path)} class="sub-galleries__item">
             <div class="sub-galleries__item-image">
-              <img
-                src={
-                  getSubgalleryThumbnailPath(subgallery.headerImage) ||
-                  `${DEFAULT_STATIC_ASSETS_PATH}/images/gallery-placeholder.png`
-                }
-                alt={subgallery.title}
-                loading="lazy"
-              />
+              <img src={getSubgalleryThumbnailPath(subgallery.headerImage)} alt={subgallery.title} loading="lazy" />
             </div>
             <div class="sub-galleries__item-content">
               <h3 class="sub-galleries__item-title">{subgallery.title}</h3>

package/src/features/themes/base-theme/layouts/MainHead.astro

@@ -1,5 +1,5 @@
 ---
-import type { GalleryMetadata } from '@/features/themes/base-theme/types/gallery';
+import type { GalleryMetadata } from '@simple-photo-gallery/common';
 
 interface Props {
   title: string;
@@ -69,4 +69,22 @@ const { title, description, url, metadata } = Astro.props;
     href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
     rel="stylesheet"
   />
+  <link
+    rel="preload"
+    as="image"
+    type="image/avif"
+    media="(max-aspect-ratio: 3/4)"
+    imagesrcset="gallery/images/header_portrait_360.avif 360w, gallery/images/header_portrait_480.avif 480w, gallery/images/header_portrait_720.avif 720w, gallery/images/header_portrait_1080.avif 1080w"
+    imagesizes="(max-aspect-ratio: 3/4) 160vw, 100vw"
+    fetchpriority="high"
+  />
+  <link
+    rel="preload"
+    as="image"
+    type="image/avif"
+    media="(min-aspect-ratio: 3/4)"
+    imagesrcset="gallery/images/header_landscape_640.avif 640w, gallery/images/header_landscape_960.avif 960w, gallery/images/header_landscape_1280.avif 1280w, gallery/images/header_landscape_1920.avif 1920w, gallery/images/header_landscape_2560.avif 2560w, gallery/images/header_landscape_3840.avif 3840w"
+    imagesizes="100vw"
+    fetchpriority="high"
+  />
 </head>

package/src/features/themes/base-theme/layouts/MainLayout.astro

@@ -1,7 +1,7 @@
 ---
 import MainHead from '@/features/themes/base-theme/layouts/MainHead.astro';
 
-import type { GalleryMetadata } from '@/features/themes/base-theme/types/gallery';
+import type { GalleryMetadata } from '@simple-photo-gallery/common';
 
 interface Props {
   title: string;

package/src/features/themes/base-theme/pages/index.astro

@@ -8,7 +8,7 @@ import PhotoSwipe from '@/features/themes/base-theme/components/lightbox/PhotoSw
 import SubGalleries from '@/features/themes/base-theme/components/sub-galleries/SubGalleries.astro';
 import MainLayout from '@/features/themes/base-theme/layouts/MainLayout.astro';
 
-import type { GalleryData } from '@/features/themes/base-theme/types/gallery';
+import type { GalleryData } from '@simple-photo-gallery/common/src/gallery';
 
 // Dynamically import gallery.json from source path or fallback to local
 const galleryJsonPath = process.env.GALLERY_JSON_PATH || './gallery.json';
@@ -16,19 +16,35 @@ const galleryData = JSON.parse(fs.readFileSync(galleryJsonPath, 'utf8'));
 
 const gallery = galleryData as GalleryData;
 
-const { title, description, headerImage, metadata, sections, subGalleries, mediaBaseUrl, url } = gallery;
+const { title, description, metadata, sections, subGalleries, mediaBaseUrl, url } = gallery;
 ---
 
+<script>
+  import { decode } from 'blurhash';
+
+  const blurHashCanvases = document.querySelectorAll<HTMLCanvasElement>('canvas[data-blur-hash]');
+
+  for (const canvas of blurHashCanvases) {
+    const blurHashValue = canvas.dataset.blurHash;
+
+    if (blurHashValue) {
+      const pixels = decode(blurHashValue, 32, 32);
+      const ctx = canvas.getContext('2d');
+
+      if (pixels && ctx) {
+        const imageData = new ImageData(new Uint8ClampedArray(pixels), 32, 32);
+        ctx.putImageData(imageData, 0, 0);
+      }
+    }
+  }
+</script>
+
 <MainLayout title={title} description={description} metadata={metadata} url={url}>
-  <Hero title={title} description={description} backgroundImage={headerImage} mediaBaseUrl={mediaBaseUrl} />
+  <Hero title={title} description={description} />
 
   {
     subGalleries && subGalleries.galleries.length > 0 && (
-      <SubGalleries
-        title={subGalleries.title}
-        description={subGalleries.description}
-        subGalleries={subGalleries.galleries}
-      />
+      <SubGalleries title={subGalleries.title} subGalleries={subGalleries.galleries} />
     )
   }
   {

package/src/config/index.ts

@@ -1 +0,0 @@
-export const DEFAULT_STATIC_ASSETS_PATH = 'gallery';

package/src/features/themes/base-theme/types/gallery.ts

@@ -1,56 +0,0 @@
-export interface GalleryImage {
-  path: string;
-  alt?: string;
-  width: number;
-  height: number;
-  type: 'image' | 'video';
-  thumbnail: {
-    path: string;
-    pathRetina: string;
-    width: number;
-    height: number;
-  };
-}
-
-export interface GallerySection {
-  title?: string;
-  description?: string;
-  images: GalleryImage[];
-}
-
-export interface SubGallery {
-  title: string;
-  headerImage: string;
-  path: string;
-}
-
-export interface GalleryMetadata {
-  image?: string;
-  imageWidth?: number;
-  imageHeight?: number;
-  ogUrl?: string;
-  ogType?: string;
-  ogSiteName?: string;
-  twitterSite?: string;
-  twitterCreator?: string;
-  author?: string;
-  keywords?: string;
-  canonicalUrl?: string;
-  language?: string;
-  robots?: string;
-}
-
-export interface GalleryData {
-  title: string;
-  description: string;
-  url?: string;
-  headerImage: string;
-  metadata?: GalleryMetadata;
-  mediaBaseUrl?: string;
-  sections: GallerySection[];
-  subGalleries?: {
-    title?: string;
-    description?: string;
-    galleries: SubGallery[];
-  };
-}