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

package/README.md

@@ -1,52 +1,5 @@
-# Astro Starter Kit: Basics
+# Simple Photo Gallery - Modern Theme
 
-```sh
-npm create astro@latest -- --template basics
-```
+This is the modern theme for Simple Photo Gallery built with Astro. This theme provides a clean, responsive interface for displaying photo galleries.
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```text
-/
-├── public/
-│   └── favicon.svg
-├── src
-│   ├── assets
-│   │   └── astro.svg
-│   ├── components
-│   │   └── Welcome.astro
-│   ├── layouts
-│   │   └── Layout.astro
-│   └── pages
-│       └── index.astro
-└── package.json
-```
-
-To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+> Note: advanced theme support is coming soon.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-photo-gallery/theme-modern",
-  "version": "0.0.1",
+  "version": "2.0.0",
   "description": "Modern theme for Simple Photo Gallery",
   "license": "MIT",
   "author": "Vladimir Haltakov, Tomasz Rusin",

package/src/features/themes/base-theme/components/container/Container.astro

@@ -6,6 +6,5 @@
   .container {
     max-width: 1200px;
     margin: 0 auto;
-    padding: 0 16px;
   }
 </style>

package/src/features/themes/base-theme/components/footer/Footer.astro

@@ -0,0 +1,43 @@
+---
+// Footer component for Simple Photo Gallery
+---
+
+<footer class="footer">
+  <p class="footer__text">
+    Created with <a href="https://simple.photo" class="footer__link" target="_blank" rel="noopener noreferrer"
+      >Simple Photo Gallery</a
+    >
+  </p>
+</footer>
+
+<style>
+  .footer {
+    padding: 2rem 1.5rem 1.5rem;
+    text-align: center;
+    background-color: transparent;
+  }
+
+  .footer__text {
+    font-size: 0.875rem;
+    color: #6b7280;
+    margin: 0;
+    font-weight: 400;
+  }
+
+  .footer__link {
+    color: #6b7280;
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+
+  .footer__link:hover {
+    color: #374151;
+    text-decoration: underline;
+  }
+
+  .footer__link:focus {
+    outline: 2px solid #6b7280;
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+</style>

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

@@ -8,23 +8,28 @@ import type { GallerySection as GallerySectionType } from '@/features/themes/bas
 interface Props {
   section: GallerySectionType;
   sectionIndex: number;
+  mediaBaseUrl?: string;
 }
 
-const { section, sectionIndex } = Astro.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,
+);
 ---
 
 <section class={`gallery-section gallery-section-${sectionIndex}`}>
   <Container>
     <GallerySectionHeader section={section} />
     <div class="gallery-section__gallery" id={`gallery-${sectionIndex}`}>
-      {section.images.map((image) => <GallerySectionItem image={image} />)}
+      {validImages.map((image) => <GallerySectionItem image={image} mediaBaseUrl={mediaBaseUrl} />)}
     </div>
   </Container>
 </section>
 
 <style>
   .gallery-section {
-    padding: 5rem 1rem;
+    padding: 1rem 1rem;
   }
 
   .gallery-section:nth-child(even) {
@@ -38,38 +43,17 @@ const { section, sectionIndex } = Astro.props;
   }
 
   .gallery-section__gallery {
-    columns: 1;
-    column-gap: 1rem;
+    display: flex;
+    flex-wrap: wrap;
     margin-bottom: 1rem;
   }
 
-  @media (min-width: 640px) {
-    .gallery-section__gallery {
-      columns: 2;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .gallery-section__gallery {
-      columns: 3;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .gallery-section__gallery {
-      columns: 4;
-    }
-  }
-
-  @media (min-width: 1280px) {
-    .gallery-section__gallery {
-      columns: 5;
-    }
-  }
-
-  @media (min-width: 1536px) {
-    .gallery-section__gallery {
-      columns: 6;
-    }
+  .gallery-section__gallery::after {
+    --w: 2;
+    --h: 1;
+    --ratio: calc(var(--w) / var(--h));
+    content: '';
+    flex-basis: calc(var(--ratio) * var(--row-height));
+    flex-grow: 1000000;
   }
 </style>

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

@@ -20,7 +20,7 @@ const { section } = Astro.props;
   }
 
   .gallery-section__header-title {
-    font-size: clamp(2.5rem, 5vw, 5rem);
+    font-size: clamp(1.5rem, 3vw, 2.5rem);
     font-weight: 700;
     margin-bottom: 1.5rem;
     color: #111827;

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

@@ -1,37 +1,45 @@
 ---
-import { getGalleryPath } from '@/features/themes/base-theme/utils';
+import { getPhotoPath, getRelativePath } from '@/features/themes/base-theme/utils';
 
 import type { GalleryImage } from '@/features/themes/base-theme/types/gallery';
 
 interface Props {
   image: GalleryImage;
+  mediaBaseUrl?: string;
 }
 
-const { image } = Astro.props;
+const { image, mediaBaseUrl } = Astro.props;
 ---
 
-<div class="gallery-section__item">
-  <a
-    href={getGalleryPath(image.path)}
-    data-pswp-src={getGalleryPath(image.path)}
-    data-pswp-width={image.width}
-    data-pswp-height={image.height}
-    data-pswp-type={image.type}
-    data-pswp-caption={image.description ? `<p class="image-caption">${image.description}</p>` : ''}>
-    <img
-      src={getGalleryPath(image.thumbnail?.path)}
-      alt={image.alt}
-      loading="lazy"
-      width={image.thumbnail?.width}
-      height={image.thumbnail?.height}
-    />
-  </a>
-</div>
+<a
+  class="gallery-section__item"
+  href={getPhotoPath(image.path, mediaBaseUrl)}
+  data-pswp-src={getPhotoPath(image.path, mediaBaseUrl)}
+  data-pswp-width={image.width}
+  data-pswp-height={image.height}
+  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}
+  />
+</a>
 
 <style>
+  :root {
+    --row-height: 6rem;
+  }
+
   .gallery-section__item {
-    break-inside: avoid;
-    margin-bottom: 1rem;
+    --ratio: calc(var(--w) / var(--h));
+    flex-basis: calc(var(--ratio) * var(--row-height));
+    flex-grow: calc(var(--ratio) * 100);
+    margin: 0.25rem;
     border-radius: 0.75rem;
     overflow: hidden;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
@@ -51,7 +59,25 @@ const { image } = Astro.props;
     transition: transform 0.5s ease;
   }
 
-  .gallery-item:hover img {
+  .gallery-section__item:hover img {
     transform: scale(1.05);
   }
+
+  @media (min-width: 640px) {
+    :root {
+      --row-height: 8rem;
+    }
+  }
+
+  @media (min-width: 768px) {
+    :root {
+      --row-height: 9rem;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    :root {
+      --row-height: 10rem;
+    }
+  }
 </style>

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

@@ -1,21 +1,22 @@
 ---
 import { DEFAULT_STATIC_ASSETS_PATH } from '@/config';
 import HeroScrollToGalleryBtn from '@/features/themes/base-theme/components/hero/HeroScrollToGalleryBtn.astro';
-import { getGalleryPath } from '@/features/themes/base-theme/utils';
+import { getPhotoPath } from '@/features/themes/base-theme/utils';
 
 interface Props {
   title: string;
   description?: string;
   backgroundImage: string;
+  mediaBaseUrl?: string;
 }
 
-const { title, description, backgroundImage } = Astro.props;
+const { title, description, backgroundImage, mediaBaseUrl } = 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('${getGalleryPath(backgroundImage) || `${DEFAULT_STATIC_ASSETS_PATH}/images/hero-placeholder.png`}')`}>
+    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>
   <div class="hero__content">
     <h1 class="hero__title">{title}</h1>
@@ -28,7 +29,7 @@ const { title, description, backgroundImage } = Astro.props;
   .hero {
     position: relative;
     min-height: 450px;
-    height: 100dvh;
+    height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -56,7 +57,7 @@ const { title, description, backgroundImage } = Astro.props;
   }
 
   .hero__title {
-    font-size: clamp(2rem, 8vw, 7rem);
+    font-size: clamp(1.5rem, 6vw, 5rem);
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     text-align: center;
     line-height: 1.2;

package/src/features/themes/base-theme/components/lightbox/PhotoSwipe.astro

@@ -39,7 +39,7 @@
           let captionHTML = '';
           if (currSlideElement) {
             const caption = currSlideElement?.getAttribute('data-pswp-caption');
-            captionHTML = caption ?? currSlideElement?.querySelector('img')?.getAttribute('alt') ?? '';
+            captionHTML = caption || currSlideElement?.querySelector('img')?.getAttribute('alt') || '';
             el.innerHTML = captionHTML || '';
           }
         });
@@ -81,18 +81,15 @@
   }
 
   .pswp__caption .image-caption {
-    background: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    text-align: center;
+    background: rgba(128, 128, 128, 0.3);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
     color: white;
     padding: 16px;
     border-radius: 16px;
     margin: 1rem;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-    animation: glassSlideIn 0.6s ease-out;
-    transform-origin: bottom center;
-    transition: all 0.3s ease;
     @media (max-width: 768px) {
       padding: 8px 16px;
       font-size: 0.8rem;
@@ -100,17 +97,6 @@
     }
   }
 
-  @keyframes glassSlideIn {
-    0% {
-      opacity: 0;
-      transform: translateY(20px) scale(0.95);
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
   .pswp__caption__center {
     text-align: center;
     max-width: 42rem;

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

@@ -1,7 +1,7 @@
 ---
 import { DEFAULT_STATIC_ASSETS_PATH } from '@/config';
 import Container from '@/features/themes/base-theme/components/container/Container.astro';
-import { getGalleryPath } from '@/features/themes/base-theme/utils';
+import { getRelativePath, getSubgalleryThumbnailPath } from '@/features/themes/base-theme/utils';
 
 interface SubGallery {
   title: string;
@@ -31,10 +31,13 @@ const { title, description, subGalleries } = Astro.props;
     <div class="sub-galleries__grid">
       {
         subGalleries.map((subgallery) => (
-          <a href={getGalleryPath(subgallery.path)} class="sub-galleries__item">
+          <a href={getRelativePath(subgallery.path)} class="sub-galleries__item">
             <div class="sub-galleries__item-image">
               <img
-                src={getGalleryPath(subgallery.headerImage) || `${DEFAULT_STATIC_ASSETS_PATH}/images/gallery-placeholder.png`}
+                src={
+                  getSubgalleryThumbnailPath(subgallery.headerImage) ||
+                  `${DEFAULT_STATIC_ASSETS_PATH}/images/gallery-placeholder.png`
+                }
                 alt={subgallery.title}
                 loading="lazy"
               />

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

@@ -1,14 +1,14 @@
 ---
-import { DEFAULT_STATIC_ASSETS_PATH } from '@/config';
-
 import type { GalleryMetadata } from '@/features/themes/base-theme/types/gallery';
 
 interface Props {
   title: string;
+  description?: string;
+  url?: string;
   metadata?: GalleryMetadata;
 }
 
-const { title, metadata } = Astro.props;
+const { title, description, url, metadata } = Astro.props;
 ---
 
 <head>
@@ -19,32 +19,32 @@ const { title, metadata } = Astro.props;
   <base href="/" />
 
   {/* Basic SEO */}
+  <meta name="description" content={description} />
   {metadata?.keywords && <meta name="keywords" content={metadata.keywords} />}
   {metadata?.author && <meta name="author" content={metadata.author} />}
-  {metadata?.canonicalUrl && <link rel="canonical" href={metadata.canonicalUrl} />}
+  {metadata?.canonicalUrl || (url && <link rel="canonical" href={metadata?.canonicalUrl || url} />)}
   {metadata?.robots && <meta name="robots" content={metadata.robots} />}
   {metadata?.language && <meta name="language" content={metadata.language} />}
 
-  {/* Favicon */}
-  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-
   {/* Open Graph / Facebook */}
-  {metadata?.ogType && <meta property="og:type" content={metadata.ogType} />}
-  {metadata?.ogUrl && <meta property="og:url" content={metadata.ogUrl} />}
   <meta property="og:title" content={title} />
-  {metadata?.description && <meta property="og:description" content={metadata.description} />}
-  {metadata?.ogImage && <meta property="og:image" content={metadata.ogImage} />}
-  {metadata?.ogImageWidth && <meta property="og:image:width" content={metadata.ogImageWidth.toString()} />}
-  {metadata?.ogImageHeight && <meta property="og:image:height" content={metadata.ogImageHeight.toString()} />}
+  <meta property="og:description" content={description} />
+  {metadata?.image && <meta property="og:image" content={metadata.image} />}
+  <meta property="og:image:width" content={String(metadata?.imageWidth) || '1200'} />
+  <meta property="og:image:height" content={String(metadata?.imageHeight) || '631'} />
+  {metadata?.ogType && <meta property="og:type" content={metadata.ogType} />}
+  {metadata?.ogUrl || (url && <meta property="og:url" content={metadata?.ogUrl || url} />)}
   {metadata?.ogSiteName && <meta property="og:site_name" content={metadata.ogSiteName} />}
 
   {/* Twitter */}
-  {metadata?.twitterCard && <meta name="twitter:card" content={metadata.twitterCard} />}
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content={title} />
+  <meta name="twitter:description" content={description} />
+  {metadata?.image && <meta name="twitter:image" content={metadata.image} />}
+  <meta name="twitter:image:width" content={String(metadata?.imageWidth) || '1200'} />
+  <meta name="twitter:image:height" content={String(metadata?.imageHeight) || '631'} />
   {metadata?.twitterSite && <meta name="twitter:site" content={metadata.twitterSite} />}
   {metadata?.twitterCreator && <meta name="twitter:creator" content={metadata.twitterCreator} />}
-  <meta name="twitter:title" content={title} />
-  {metadata?.description && <meta name="twitter:description" content={metadata.description} />}
-  {metadata?.ogImage && <meta name="twitter:image" content={metadata.ogImage} />}
 
   <script is:inline>
     (function () {
@@ -63,7 +63,6 @@ const { title, metadata } = Astro.props;
     })();
   </script>
 
-  <link rel="icon" href={`${DEFAULT_STATIC_ASSETS_PATH}/images/favicon.ico`} sizes="32x32" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link

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

@@ -5,23 +5,22 @@ import type { GalleryMetadata } from '@/features/themes/base-theme/types/gallery
 
 interface Props {
   title: string;
+  description?: string;
+  url?: string;
   metadata?: GalleryMetadata;
 }
 
-const { title, metadata } = Astro.props;
+const { title, description, metadata, url } = Astro.props;
 ---
 
 <!doctype html>
 <html lang={metadata?.language || 'en'}>
-  <MainHead title={title} metadata={metadata} />
+  <MainHead title={title} description={description} metadata={metadata} url={url} />
   <body>
     <slot />
   </body>
 </html>
 
-
-
-
 <style is:global>
   * {
     margin: 0;

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

@@ -1,6 +1,7 @@
 ---
 import fs from 'node:fs';
 
+import Footer from '@/features/themes/base-theme/components/footer/Footer.astro';
 import GallerySection from '@/features/themes/base-theme/components/gallery-section/GallerySection.astro';
 import Hero from '@/features/themes/base-theme/components/hero/Hero.astro';
 import PhotoSwipe from '@/features/themes/base-theme/components/lightbox/PhotoSwipe.astro';
@@ -15,11 +16,11 @@ const galleryData = JSON.parse(fs.readFileSync(galleryJsonPath, 'utf8'));
 
 const gallery = galleryData as GalleryData;
 
-const { title, description, headerImage, metadata, sections, subGalleries } = gallery;
+const { title, description, headerImage, metadata, sections, subGalleries, mediaBaseUrl, url } = gallery;
 ---
 
-<MainLayout title={title} metadata={metadata}>
-  <Hero title={title} description={description} backgroundImage={headerImage} />
+<MainLayout title={title} description={description} metadata={metadata} url={url}>
+  <Hero title={title} description={description} backgroundImage={headerImage} mediaBaseUrl={mediaBaseUrl} />
 
   {
     subGalleries && subGalleries.galleries.length > 0 && (
@@ -30,7 +31,12 @@ const { title, description, headerImage, metadata, sections, subGalleries } = ga
       />
     )
   }
-  {sections.map((section, sectionIndex) => <GallerySection section={section} sectionIndex={sectionIndex} />)}
+  {
+    sections.map((section, sectionIndex) => (
+      <GallerySection section={section} sectionIndex={sectionIndex} mediaBaseUrl={mediaBaseUrl} />
+    ))
+  }
 
+  <Footer />
   <PhotoSwipe />
 </MainLayout>

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

@@ -1,12 +1,12 @@
 export interface GalleryImage {
   path: string;
   alt?: string;
-  description?: string;
   width: number;
   height: number;
   type: 'image' | 'video';
   thumbnail: {
     path: string;
+    pathRetina: string;
     width: number;
     height: number;
   };
@@ -25,14 +25,12 @@ export interface SubGallery {
 }
 
 export interface GalleryMetadata {
-  description?: string;
+  image?: string;
+  imageWidth?: number;
+  imageHeight?: number;
   ogUrl?: string;
-  ogImage?: string;
-  ogImageWidth?: number;
-  ogImageHeight?: number;
   ogType?: string;
   ogSiteName?: string;
-  twitterCard?: string;
   twitterSite?: string;
   twitterCreator?: string;
   author?: string;
@@ -44,10 +42,11 @@ export interface GalleryMetadata {
 
 export interface GalleryData {
   title: string;
-  description?: string;
-  outputDir?: string;
+  description: string;
+  url?: string;
   headerImage: string;
   metadata?: GalleryMetadata;
+  mediaBaseUrl?: string;
   sections: GallerySection[];
   subGalleries?: {
     title?: string;

package/src/features/themes/base-theme/utils/index.ts

@@ -1,13 +1,12 @@
 import path from 'node:path';
 
 /**
- * Normalizes resource paths to be relative to the gallery root directory instead of the gallery.json file.
+ * Normalizes resource paths to be relative to the gallery root directory.
  *
  * @param resourcePath - The resource path (file or directory), typically relative to the gallery.json file
  * @returns The normalized path relative to the gallery root directory
  */
-
-export const getGalleryPath = (resourcePath: string) => {
+export const getRelativePath = (resourcePath: string) => {
   const galleryConfigPath = path.resolve(process.env.GALLERY_JSON_PATH || '');
   const galleryConfigDir = path.dirname(galleryConfigPath);
 
@@ -16,3 +15,28 @@ export const getGalleryPath = (resourcePath: string) => {
 
   return path.relative(baseDir, absoluteResourcePath);
 };
+
+/**
+ * Get the path to a photo that is always in the gallery root directory.
+ *
+ * @param resourcePath - The path to the photo on the hard disk
+ * @returns The normalized path relative to the gallery root directory
+ */
+export const getPhotoPath = (photoPath: string, mediaBaseUrl?: string) => {
+  const resourceBasename = path.basename(photoPath);
+
+  return mediaBaseUrl ? `${mediaBaseUrl}/${resourceBasename}` : path.join('.', resourceBasename);
+};
+
+/**
+ * Get the path to a subgallery thumbnail that is always in the subgallery directory.
+ *
+ * @param subgalleryHeaderImagePath - The path to the subgallery header image on the hard disk
+ * @returns The normalized path relative to the subgallery directory
+ */
+export const getSubgalleryThumbnailPath = (subgalleryHeaderImagePath: string) => {
+  const photoBasename = path.basename(subgalleryHeaderImagePath);
+  const subgalleryFolderName = path.basename(path.dirname(subgalleryHeaderImagePath));
+
+  return path.join(subgalleryFolderName, 'gallery', 'thumbnails', photoBasename);
+};