@simple-photo-gallery/theme-modern 0.0.1

package/README.md

@@ -0,0 +1,52 @@
+# Astro Starter Kit: Basics
+
+```sh
+npm create astro@latest -- --template basics
+```
+
+[![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).

package/astro.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'astro/config';
+import relativeLinks from 'astro-relative-links';
+
+// Dynamically import gallery.json from source path or fallback to local
+const sourceGalleryPath = process.env.GALLERY_JSON_PATH;
+if (!sourceGalleryPath) throw new Error('GALLERY_JSON_PATH environment variable is not set');
+
+const outputDir = process.env.GALLERY_OUTPUT_DIR || sourceGalleryPath.replace('gallery.json', '');
+
+// https://astro.build/config
+export default defineConfig({
+  output: 'static',
+  outDir: outputDir + '/_build',
+  build: {
+    assets: 'simple-photo-gallery-assets',
+    assetsPrefix: 'gallery',
+  },
+  integrations: [relativeLinks()],
+  publicDir: 'public',
+  vite: {
+    define: {
+      'process.env.GALLERY_JSON_PATH': JSON.stringify(sourceGalleryPath),
+    },
+  },
+});

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@simple-photo-gallery/theme-modern",
+  "version": "0.0.1",
+  "description": "Modern theme for Simple Photo Gallery",
+  "license": "MIT",
+  "author": "Vladimir Haltakov, Tomasz Rusin",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SimplePhotoGallery/core"
+  },
+  "homepage": "https://simple.photo",
+  "files": [
+    "public",
+    "src",
+    "astro.config.ts",
+    "tsconfig.json"
+  ],
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "lint": "eslint . --ext .astro,.js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint . --ext .astro,.js,.jsx,.ts,.tsx --fix",
+    "format": "prettier  --check './**/*.{js,jsx,ts,tsx,css,scss,md,json,astro}' --config ./.prettierrc.mjs --ignore-path ./.prettierignore",
+    "format:fix": "prettier --write './**/*.{js,jsx,ts,tsx,css,scss,md,json,astro}'  --config ./.prettierrc.mjs --ignore-path ./.prettierignore",
+    "check": "npm run lint && npm run format"
+  },
+  "dependencies": {
+    "@types/photoswipe": "^4.1.6",
+    "astro": "^5.11.0",
+    "astro-relative-links": "^0.4.2",
+    "photoswipe": "^5.4.4"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.30.1",
+    "@typescript-eslint/eslint-plugin": "^8.35.1",
+    "@typescript-eslint/parser": "^8.35.1",
+    "eslint": "^9.30.1",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-astro": "^1.3.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.5.1",
+    "eslint-plugin-unicorn": "^60.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-astro": "^0.14.1",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.35.1"
+  },
+  "type": "module"
+}

package/src/config/index.ts

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

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

@@ -0,0 +1,11 @@
+<div class="container">
+  <slot />
+</div>
+
+<style>
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 16px;
+  }
+</style>

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

@@ -0,0 +1,75 @@
+---
+import Container from '@/features/themes/base-theme/components/container/Container.astro';
+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';
+
+interface Props {
+  section: GallerySectionType;
+  sectionIndex: number;
+}
+
+const { section, sectionIndex } = Astro.props;
+---
+
+<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} />)}
+    </div>
+  </Container>
+</section>
+
+<style>
+  .gallery-section {
+    padding: 5rem 1rem;
+  }
+
+  .gallery-section:nth-child(even) {
+    background-color: #f9fafb;
+  }
+
+  .gallery-section__container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+  }
+
+  .gallery-section__gallery {
+    columns: 1;
+    column-gap: 1rem;
+    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;
+    }
+  }
+</style>

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

@@ -0,0 +1,36 @@
+---
+import type { GallerySection as GallerySectionType } from '@/features/themes/base-theme/types/gallery';
+
+interface Props {
+  section: GallerySectionType;
+}
+
+const { section } = Astro.props;
+---
+
+<div class="gallery-section__header">
+  <h2 class="gallery-section__header-title">{section.title}</h2>
+  <p class="gallery-section__header-description">{section.description}</p>
+</div>
+
+<style>
+  .gallery-section__header {
+    text-align: center;
+    margin-bottom: 4rem;
+  }
+
+  .gallery-section__header-title {
+    font-size: clamp(2.5rem, 5vw, 5rem);
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    color: #111827;
+  }
+
+  .gallery-section__header-description {
+    font-size: 1.125rem;
+    color: #6b7280;
+    max-width: 42rem;
+    margin: 0 auto;
+    line-height: 1.6;
+  }
+</style>

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

@@ -0,0 +1,57 @@
+---
+import { getGalleryPath } from '@/features/themes/base-theme/utils';
+
+import type { GalleryImage } from '@/features/themes/base-theme/types/gallery';
+
+interface Props {
+  image: GalleryImage;
+}
+
+const { image } = 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>
+
+<style>
+  .gallery-section__item {
+    break-inside: avoid;
+    margin-bottom: 1rem;
+    border-radius: 0.75rem;
+    overflow: hidden;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    cursor: pointer;
+  }
+
+  .gallery-section__item:hover {
+    transform: scale(1.02) translateY(-5px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  }
+
+  .gallery-section__item img {
+    width: 100%;
+    height: auto;
+    display: block;
+    transition: transform 0.5s ease;
+  }
+
+  .gallery-item:hover img {
+    transform: scale(1.05);
+  }
+</style>

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

@@ -0,0 +1,74 @@
+---
+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';
+
+interface Props {
+  title: string;
+  description?: string;
+  backgroundImage: string;
+}
+
+const { title, description, backgroundImage } = 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`}')`}>
+  </div>
+  <div class="hero__content">
+    <h1 class="hero__title">{title}</h1>
+    {description && <p class="hero__description">{description}</p>}
+    <HeroScrollToGalleryBtn />
+  </div>
+</section>
+
+<style>
+  .hero {
+    position: relative;
+    min-height: 450px;
+    height: 100dvh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .hero__bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  .hero__content {
+    position: relative;
+    z-index: 10;
+    text-align: center;
+    color: white;
+    max-width: 64rem;
+    padding: 0 1.5rem;
+  }
+
+  .hero__title {
+    font-size: clamp(2rem, 8vw, 7rem);
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    text-align: center;
+    line-height: 1.2;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    letter-spacing: -0.025em;
+  }
+
+  .hero__description {
+    font-size: clamp(1rem, 3vw, 2rem);
+    font-weight: 300;
+    opacity: 0.9;
+    line-height: 1.5;
+  }
+</style>

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

@@ -0,0 +1,77 @@
+---
+
+---
+
+<button class="hero__scroll-to-gallery-btn" aria-label="Scroll to gallery">
+  <span class="hero__scroll-to-gallery-btn-arrow">&#x276F;</span>
+</button>
+
+<script>
+  function initScrollToGallery() {
+    const button = document.querySelector('.hero__scroll-to-gallery-btn');
+    if (button) {
+      button.addEventListener('click', () => {
+        const gallery = document.querySelector('.gallery-section-0');
+        if (gallery) {
+          gallery.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      });
+    }
+  }
+
+  initScrollToGallery();
+</script>
+
+<style>
+  .hero__scroll-to-gallery-btn {
+    margin: auto;
+    bottom: 40px;
+    transform: rotate(90deg);
+    background-color: rgba(0, 0, 0, 0.2);
+    color: #fff;
+    padding: 15px;
+    border-radius: 50%;
+    text-decoration: none;
+    z-index: 10;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+    margin-top: 2rem;
+  }
+
+  .hero__scroll-to-gallery-btn:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+    transform: rotate(90deg) scale(1.05);
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+
+  .hero__scroll-to-gallery-btn-arrow {
+    font-size: 18px;
+    line-height: 0.8;
+    animation: bounce 2s infinite;
+    transform: rotate(90deg);
+  }
+
+  @keyframes bounce {
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+      transform: translateX(0);
+    }
+    40% {
+      transform: translateX(5px);
+    }
+    60% {
+      transform: translateX(3px);
+    }
+  }
+</style>

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

@@ -0,0 +1,160 @@
+<script>
+  import PhotoSwipe from 'photoswipe';
+  import PhotoSwipeLightbox from 'photoswipe/lightbox';
+
+  import PhotoSwipeVideoPlugin from '@/lib/photoswipe-video-plugin';
+  import 'photoswipe/style.css';
+
+  const lightbox = new PhotoSwipeLightbox({
+    gallery: '.gallery-section__gallery',
+    children: 'a',
+    pswpModule: PhotoSwipe,
+    showAnimationDuration: 300,
+    hideAnimationDuration: 300,
+    wheelToZoom: true,
+    bgOpacity: 1,
+  });
+
+  new PhotoSwipeVideoPlugin(lightbox, {
+    // options
+  });
+
+  lightbox.on('contentDeactivate', ({ content }) => {
+    content.element?.classList.remove('pswp__img--in-viewport');
+  });
+
+  lightbox.on('contentActivate', ({ content }) => {
+    content.element?.classList.add('pswp__img--in-viewport');
+  });
+
+  lightbox.on('uiRegister', function () {
+    lightbox.pswp?.ui?.registerElement({
+      name: 'custom-caption',
+      isButton: false,
+      className: 'pswp__caption',
+      appendTo: 'wrapper',
+      onInit: (el) => {
+        lightbox.pswp?.on('change', () => {
+          const currSlideElement = lightbox.pswp?.currSlide?.data.element;
+          let captionHTML = '';
+          if (currSlideElement) {
+            const caption = currSlideElement?.getAttribute('data-pswp-caption');
+            captionHTML = caption ?? currSlideElement?.querySelector('img')?.getAttribute('alt') ?? '';
+            el.innerHTML = captionHTML || '';
+          }
+        });
+      },
+    });
+  });
+
+  lightbox.init();
+</script>
+
+<style is:global>
+  .pswp .pswp__bg {
+    --pswp-bg: rgba(0, 0, 0, 1);
+  }
+
+  .pswp__counter {
+    color: white;
+    font-size: 1rem;
+  }
+
+  .pswp__button {
+    color: white;
+    opacity: 0.8;
+    transition: opacity 0.3s ease;
+  }
+
+  .pswp__button:hover {
+    opacity: 1;
+  }
+
+  .pswp__caption {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    @media (max-width: 768px) {
+      width: calc(100% - 16px);
+    }
+  }
+
+  .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);
+    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;
+      margin: 8px 0;
+    }
+  }
+
+  @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;
+    margin: 0 auto;
+  }
+
+  .pswp__caption h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  .pswp__caption p {
+    font-size: 1rem;
+    opacity: 0.95;
+    line-height: 1.6;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    font-weight: 400;
+  }
+
+  .pswp__caption .description {
+    display: block;
+    margin-top: 0.5rem;
+    font-size: 0.95rem;
+    opacity: 0.9;
+    font-weight: 300;
+    font-style: italic;
+  }
+
+  .pswp__img {
+    opacity: 0;
+  }
+
+  .pswp__img--in-viewport {
+    animation: slideInImage 0.6s ease-out forwards;
+  }
+
+  @keyframes slideInImage {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+</style>

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

@@ -0,0 +1,141 @@
+---
+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';
+
+interface SubGallery {
+  title: string;
+  headerImage: string;
+  path: string;
+}
+
+interface Props {
+  title?: string;
+  description?: string;
+  subGalleries: SubGallery[];
+}
+
+const { title, description, subGalleries } = Astro.props;
+---
+
+<section class="sub-galleries">
+  <Container>
+    {
+      (title || description) && (
+        <div class="sub-galleries__header">
+          {title && <h2 class="sub-galleries__header-title">{title}</h2>}
+          {description && <p class="sub-galleries__header-description">{description}</p>}
+        </div>
+      )
+    }
+    <div class="sub-galleries__grid">
+      {
+        subGalleries.map((subgallery) => (
+          <a href={getGalleryPath(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`}
+                alt={subgallery.title}
+                loading="lazy"
+              />
+            </div>
+            <div class="sub-galleries__item-content">
+              <h3 class="sub-galleries__item-title">{subgallery.title}</h3>
+            </div>
+          </a>
+        ))
+      }
+    </div>
+  </Container>
+</section>
+
+<style>
+  .sub-galleries {
+    padding: 5rem 1rem;
+    background-color: #f9fafb;
+  }
+
+  .sub-galleries__header {
+    text-align: center;
+    margin-bottom: 4rem;
+  }
+
+  .sub-galleries__header-title {
+    font-size: clamp(2.5rem, 5vw, 5rem);
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    color: #111827;
+  }
+
+  .sub-galleries__header-description {
+    font-size: 1.125rem;
+    color: #6b7280;
+    max-width: 42rem;
+    margin: 0 auto;
+    line-height: 1.6;
+  }
+
+  .sub-galleries__grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .sub-galleries__item {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    border-radius: 0.75rem;
+    overflow: hidden;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    background-color: white;
+  }
+
+  .sub-galleries__item:hover {
+    transform: scale(1.02) translateY(-5px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  }
+
+  .sub-galleries__item-image {
+    position: relative;
+    overflow: hidden;
+    aspect-ratio: 16/9;
+  }
+
+  .sub-galleries__item-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+  }
+
+  .sub-galleries__item:hover .sub-galleries__item-image img {
+    transform: scale(1.05);
+  }
+
+  .sub-galleries__item-content {
+    padding: 1.5rem;
+  }
+
+  .sub-galleries__item-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #111827;
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  @media (max-width: 640px) {
+    .sub-galleries__grid {
+      grid-template-columns: 1fr;
+      gap: 1.5rem;
+    }
+
+    .sub-galleries__item-content {
+      padding: 1rem;
+    }
+  }
+</style>

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

@@ -0,0 +1,73 @@
+---
+import { DEFAULT_STATIC_ASSETS_PATH } from '@/config';
+
+import type { GalleryMetadata } from '@/features/themes/base-theme/types/gallery';
+
+interface Props {
+  title: string;
+  metadata?: GalleryMetadata;
+}
+
+const { title, metadata } = Astro.props;
+---
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{title}</title>
+
+  <base href="/" />
+
+  {/* Basic SEO */}
+  {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?.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()} />}
+  {metadata?.ogSiteName && <meta property="og:site_name" content={metadata.ogSiteName} />}
+
+  {/* Twitter */}
+  {metadata?.twitterCard && <meta name="twitter:card" content={metadata.twitterCard} />}
+  {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 () {
+      let base = document.querySelector('base');
+      if (!base) {
+        base = document.createElement('base');
+        document.head.prepend(base);
+      }
+
+      // Decide whether the current path ends in “directory” vs “file”.
+      const p = location.pathname;
+      const looksFile = /\.[a-z0-9]+$/i.test(p.split('/').pop() || '');
+
+      // If it’s “directory without slash”, stick a slash on and update <base>.
+      base.href = !p.endsWith('/') && !looksFile ? p + '/' : './';
+    })();
+  </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
+    href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet"
+  />
+</head>

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

@@ -0,0 +1,44 @@
+---
+import MainHead from '@/features/themes/base-theme/layouts/MainHead.astro';
+
+import type { GalleryMetadata } from '@/features/themes/base-theme/types/gallery';
+
+interface Props {
+  title: string;
+  metadata?: GalleryMetadata;
+}
+
+const { title, metadata } = Astro.props;
+---
+
+<!doctype html>
+<html lang={metadata?.language || 'en'}>
+  <MainHead title={title} metadata={metadata} />
+  <body>
+    <slot />
+  </body>
+</html>
+
+
+
+
+<style is:global>
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family:
+      'Montserrat',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      sans-serif;
+    line-height: 1.6;
+    color: #333;
+    font-weight: 400;
+  }
+</style>

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

@@ -0,0 +1,36 @@
+---
+import fs from 'node:fs';
+
+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';
+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';
+
+// Dynamically import gallery.json from source path or fallback to local
+const galleryJsonPath = process.env.GALLERY_JSON_PATH || './gallery.json';
+const galleryData = JSON.parse(fs.readFileSync(galleryJsonPath, 'utf8'));
+
+const gallery = galleryData as GalleryData;
+
+const { title, description, headerImage, metadata, sections, subGalleries } = gallery;
+---
+
+<MainLayout title={title} metadata={metadata}>
+  <Hero title={title} description={description} backgroundImage={headerImage} />
+
+  {
+    subGalleries && subGalleries.galleries.length > 0 && (
+      <SubGalleries
+        title={subGalleries.title}
+        description={subGalleries.description}
+        subGalleries={subGalleries.galleries}
+      />
+    )
+  }
+  {sections.map((section, sectionIndex) => <GallerySection section={section} sectionIndex={sectionIndex} />)}
+
+  <PhotoSwipe />
+</MainLayout>

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

@@ -0,0 +1,57 @@
+export interface GalleryImage {
+  path: string;
+  alt?: string;
+  description?: string;
+  width: number;
+  height: number;
+  type: 'image' | 'video';
+  thumbnail: {
+    path: 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 {
+  description?: string;
+  ogUrl?: string;
+  ogImage?: string;
+  ogImageWidth?: number;
+  ogImageHeight?: number;
+  ogType?: string;
+  ogSiteName?: string;
+  twitterCard?: string;
+  twitterSite?: string;
+  twitterCreator?: string;
+  author?: string;
+  keywords?: string;
+  canonicalUrl?: string;
+  language?: string;
+  robots?: string;
+}
+
+export interface GalleryData {
+  title: string;
+  description?: string;
+  outputDir?: string;
+  headerImage: string;
+  metadata?: GalleryMetadata;
+  sections: GallerySection[];
+  subGalleries?: {
+    title?: string;
+    description?: string;
+    galleries: SubGallery[];
+  };
+}

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

@@ -0,0 +1,18 @@
+import path from 'node:path';
+
+/**
+ * Normalizes resource paths to be relative to the gallery root directory instead of the gallery.json file.
+ *
+ * @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) => {
+  const galleryConfigPath = path.resolve(process.env.GALLERY_JSON_PATH || '');
+  const galleryConfigDir = path.dirname(galleryConfigPath);
+
+  const absoluteResourcePath = path.resolve(path.join(galleryConfigDir, resourcePath));
+  const baseDir = path.dirname(galleryConfigDir);
+
+  return path.relative(baseDir, absoluteResourcePath);
+};

package/src/lib/photoswipe-video-plugin.ts

@@ -0,0 +1,319 @@
+import type PhotoSwipe from 'photoswipe';
+import type PhotoSwipeLightbox from 'photoswipe/lightbox';
+
+interface Slide {
+  content: Content;
+  height: number;
+  currZoomLevel: number;
+  bounds: { center: { y: number } };
+  placeholder?: { element: HTMLElement };
+  isActive: boolean;
+}
+
+interface Content {
+  data: SlideData;
+  element?: HTMLVideoElement | HTMLImageElement | HTMLDivElement;
+  state?: string;
+  type?: string;
+  isAttached?: boolean;
+  onLoaded?: () => void;
+  appendImage?: () => void;
+  slide?: Slide;
+  _videoPosterImg?: HTMLImageElement;
+}
+
+interface SlideData {
+  type?: string;
+  msrc?: string;
+  videoSrc?: string;
+  videoSources?: Array<{ src: string; type: string }>;
+}
+
+interface VideoPluginOptions {
+  videoAttributes?: Record<string, string>;
+  autoplay?: boolean;
+  preventDragOffset?: number;
+}
+
+interface EventData {
+  content?: Content;
+  slide?: Slide;
+  width?: number;
+  height?: number;
+  originalEvent?: PointerEvent;
+  preventDefault?: () => void;
+}
+
+const defaultOptions: VideoPluginOptions = {
+  videoAttributes: { controls: '', playsinline: '', preload: 'auto' },
+  autoplay: true,
+  preventDragOffset: 40,
+};
+
+/**
+ * Check if slide has video content
+ */
+function isVideoContent(content: Content | Slide): boolean {
+  return content && 'data' in content && content.data && content.data.type === 'video';
+}
+
+class VideoContentSetup {
+  private options: VideoPluginOptions;
+
+  constructor(lightbox: PhotoSwipeLightbox, options: VideoPluginOptions) {
+    this.options = options;
+
+    this.initLightboxEvents(lightbox);
+    lightbox.on('init', () => {
+      if (lightbox.pswp) {
+        this.initPswpEvents(lightbox.pswp);
+      }
+    });
+  }
+
+  private initLightboxEvents(lightbox: PhotoSwipeLightbox): void {
+    lightbox.on('contentLoad', (data: unknown) => this.onContentLoad(data as EventData));
+    lightbox.on('contentDestroy', (data: unknown) => this.onContentDestroy(data as { content: Content }));
+    lightbox.on('contentActivate', (data: unknown) => this.onContentActivate(data as { content: Content }));
+    lightbox.on('contentDeactivate', (data: unknown) => this.onContentDeactivate(data as { content: Content }));
+    lightbox.on('contentAppend', (data: unknown) => this.onContentAppend(data as EventData));
+    lightbox.on('contentResize', (data: unknown) => this.onContentResize(data as EventData));
+
+    lightbox.addFilter('isKeepingPlaceholder', (value: unknown, ...args: unknown[]) =>
+      this.isKeepingPlaceholder(value as boolean, args[0] as Content),
+    );
+    lightbox.addFilter('isContentZoomable', (value: unknown, ...args: unknown[]) =>
+      this.isContentZoomable(value as boolean, args[0] as Content),
+    );
+    lightbox.addFilter('useContentPlaceholder', (value: unknown, ...args: unknown[]) =>
+      this.useContentPlaceholder(value as boolean, args[0] as Content),
+    );
+
+    lightbox.addFilter('domItemData', (value: unknown, ...args: unknown[]) => {
+      const itemData = value as Record<string, unknown>;
+      const linkEl = args[1] as HTMLAnchorElement;
+
+      if (itemData.type === 'video' && linkEl) {
+        if (linkEl.dataset.pswpVideoSources) {
+          itemData.videoSources = JSON.parse(linkEl.dataset.pswpVideoSources);
+        } else if (linkEl.dataset.pswpVideoSrc) {
+          itemData.videoSrc = linkEl.dataset.pswpVideoSrc;
+        } else {
+          itemData.videoSrc = linkEl.href;
+        }
+      }
+      return itemData;
+    });
+  }
+
+  private initPswpEvents(pswp: PhotoSwipe): void {
+    // Prevent dragging when pointer is in bottom part of the video
+    pswp.on('pointerDown', (data: unknown) => {
+      const e = data as EventData;
+      const slide = pswp.currSlide as Slide | undefined;
+      if (slide && isVideoContent(slide) && this.options.preventDragOffset) {
+        const origEvent = e.originalEvent;
+        if (origEvent && origEvent.type === 'pointerdown') {
+          const videoHeight = Math.ceil(slide.height * slide.currZoomLevel);
+          const verticalEnding = videoHeight + slide.bounds.center.y;
+          const pointerYPos = origEvent.pageY - pswp.offset.y;
+          if (pointerYPos > verticalEnding - this.options.preventDragOffset! && pointerYPos < verticalEnding) {
+            e.preventDefault?.();
+          }
+        }
+      }
+    });
+
+    // do not append video on nearby slides
+    pswp.on('appendHeavy', (data: unknown) => {
+      const e = data as EventData;
+      if (e.slide && isVideoContent(e.slide) && !e.slide.isActive) {
+        e.preventDefault?.();
+      }
+    });
+
+    pswp.on('close', () => {
+      const slide = pswp.currSlide as Slide | undefined;
+      if (slide && isVideoContent(slide.content)) {
+        // Switch from zoom to fade closing transition,
+        // as zoom transition is choppy for videos
+        if (!pswp.options.showHideAnimationType || pswp.options.showHideAnimationType === 'zoom') {
+          pswp.options.showHideAnimationType = 'fade';
+        }
+
+        // pause video when closing
+        this.pauseVideo(slide.content);
+      }
+    });
+  }
+
+  private onContentDestroy({ content }: { content: Content }): void {
+    if (isVideoContent(content) && content._videoPosterImg) {
+      const handleLoad = () => {
+        if (content._videoPosterImg) {
+          content._videoPosterImg.removeEventListener('error', handleError);
+        }
+      };
+      const handleError = () => {
+        // Error handler
+      };
+
+      content._videoPosterImg.addEventListener('load', handleLoad);
+      content._videoPosterImg.addEventListener('error', handleError);
+      content._videoPosterImg = undefined;
+    }
+  }
+
+  private onContentResize(e: EventData): void {
+    if (e.content && isVideoContent(e.content)) {
+      e.preventDefault?.();
+
+      const width = e.width!;
+      const height = e.height!;
+      const content = e.content;
+
+      if (content.element) {
+        content.element.style.width = width + 'px';
+        content.element.style.height = height + 'px';
+      }
+
+      if (content.slide && content.slide.placeholder) {
+        // override placeholder size, so it more accurately matches the video
+        const placeholderElStyle = content.slide.placeholder.element.style;
+        placeholderElStyle.transform = 'none';
+        placeholderElStyle.width = width + 'px';
+        placeholderElStyle.height = height + 'px';
+      }
+    }
+  }
+
+  private isKeepingPlaceholder(isZoomable: boolean, content: Content): boolean {
+    if (isVideoContent(content)) {
+      return false;
+    }
+    return isZoomable;
+  }
+
+  private isContentZoomable(isZoomable: boolean, content: Content): boolean {
+    if (isVideoContent(content)) {
+      return false;
+    }
+    return isZoomable;
+  }
+
+  private onContentActivate({ content }: { content: Content }): void {
+    if (isVideoContent(content) && this.options.autoplay) {
+      this.playVideo(content);
+    }
+  }
+
+  private onContentDeactivate({ content }: { content: Content }): void {
+    if (isVideoContent(content)) {
+      this.pauseVideo(content);
+    }
+  }
+
+  private onContentAppend(e: EventData): void {
+    if (e.content && isVideoContent(e.content)) {
+      e.preventDefault?.();
+      e.content.isAttached = true;
+      e.content.appendImage?.();
+    }
+  }
+
+  private onContentLoad(e: EventData): void {
+    const content = e.content!;
+
+    if (!isVideoContent(content)) {
+      return;
+    }
+
+    // stop default content load
+    e.preventDefault?.();
+
+    if (content.element) {
+      return;
+    }
+
+    content.state = 'loading';
+    content.type = 'video';
+
+    content.element = document.createElement('video');
+
+    if (this.options.videoAttributes) {
+      for (const key in this.options.videoAttributes) {
+        content.element.setAttribute(key, this.options.videoAttributes[key] || '');
+      }
+    }
+
+    content.element.setAttribute('poster', content.data.msrc || '');
+
+    this.preloadVideoPoster(content, content.data.msrc);
+
+    content.element.style.position = 'absolute';
+    content.element.style.left = '0';
+    content.element.style.top = '0';
+
+    if (content.data.videoSources) {
+      for (const source of content.data.videoSources) {
+        const sourceEl = document.createElement('source');
+        sourceEl.src = source.src;
+        sourceEl.type = source.type;
+        content.element.append(sourceEl);
+      }
+    } else if (content.data.videoSrc) {
+      // Force video preload
+      // https://muffinman.io/blog/hack-for-ios-safari-to-display-html-video-thumbnail/
+      // this.element.src = this.data.videoSrc + '#t=0.001';
+      content.element.src = content.data.videoSrc;
+    }
+  }
+
+  private preloadVideoPoster(content: Content, src?: string): void {
+    if (!content._videoPosterImg && src) {
+      content._videoPosterImg = new Image();
+      content._videoPosterImg.src = src;
+      if (content._videoPosterImg.complete) {
+        content.onLoaded?.();
+      } else {
+        content._videoPosterImg.addEventListener('load', () => {
+          content.onLoaded?.();
+        });
+        content._videoPosterImg.addEventListener('error', () => {
+          content.onLoaded?.();
+        });
+      }
+    }
+  }
+
+  private playVideo(content: Content): void {
+    if (content.element) {
+      (content.element as HTMLVideoElement).play();
+    }
+  }
+
+  private pauseVideo(content: Content): void {
+    if (content.element) {
+      (content.element as HTMLVideoElement).pause();
+    }
+  }
+
+  private useContentPlaceholder(usePlaceholder: boolean, content: Content): boolean {
+    if (isVideoContent(content)) {
+      return true;
+    }
+    return usePlaceholder;
+  }
+}
+
+class PhotoSwipeVideoPlugin {
+  constructor(lightbox: PhotoSwipeLightbox, options: VideoPluginOptions = {}) {
+    new VideoContentSetup(lightbox, {
+      ...defaultOptions,
+      ...options,
+    });
+  }
+}
+
+export default PhotoSwipeVideoPlugin;
+export type { VideoPluginOptions };

package/src/pages/index.astro

@@ -0,0 +1,5 @@
+---
+import BaseTheme from '@/features/themes/base-theme/pages/index.astro';
+---
+
+<BaseTheme />

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}