@simple-photo-gallery/theme-modern 2.0.15 → 2.0.17

package/package.json

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

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

@@ -14,7 +14,7 @@
   .footer {
     padding: 2rem 1.5rem 1.5rem;
     text-align: center;
-    background-color: transparent;
+    background-color: var(--section-bg-color-odd, var(--section-bg-color, #ffffff));
   }
 
   .footer__text {

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

@@ -40,10 +40,20 @@ const validImages = section.images.filter(
 <style>
   .gallery-section {
     padding: 1rem 1rem;
+    background-color: var(--section-bg-color-odd, var(--section-bg-color, #ffffff));
   }
 
   .gallery-section:nth-child(even) {
-    background-color: #f9fafb;
+    background-color: var(--section-bg-color-even, var(--section-bg-color, #f9fafb));
+  }
+
+  /* Opt-in embed mode: transparent backgrounds for iframe embedding */
+  .gallery-section--transparent {
+    background-color: var(--section-bg-color-odd, var(--section-bg-color, transparent));
+  }
+
+  .gallery-section--transparent:nth-child(even) {
+    background-color: var(--section-bg-color-even, var(--section-bg-color, transparent));
   }
 
   .gallery-section__container {

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

@@ -27,13 +27,13 @@ const parsedDescription = section.description ? await renderMarkdown(section.des
     font-size: clamp(1.5rem, 3vw, 2.5rem);
     font-weight: 700;
     margin-bottom: 1.5rem;
-    color: #111827;
+    color: var(--typography-color-title, var(--gallery-section-title-color, #111827));
     text-align: center;
   }
 
   .gallery-section__header-description {
     font-size: 1.125rem;
-    color: #6b7280;
+    color: var(--typography-color-description, var(--gallery-section-description-color, #6b7280));
     max-width: 42rem;
     margin: 0 auto;
     line-height: 1.6;

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

@@ -145,13 +145,13 @@ const headerPhotoPath = getPhotoPath(headerImage || '', mediaBaseUrl);
               () => {
                 // Final fallback failed, blurhash stays visible
               },
-              { once: true }
+              { once: true },
             );
 
             // If fallback succeeds, hide blurhash
             img.addEventListener('load', hideBlurhash, { once: true });
           },
-          { once: true }
+          { once: true },
         );
       })();
     </script>
@@ -168,7 +168,7 @@ const headerPhotoPath = getPhotoPath(headerImage || '', mediaBaseUrl);
   .hero {
     position: relative;
     min-height: 450px;
-    height: 100vh;
+    height: var(--hero-height, 100vh);
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -58,6 +58,10 @@ const headerImageBasename = headerImage ? path.basename(headerImage, path.extnam
     font-weight: 400;
   }
 
+  body.embed-transparent {
+    background: transparent;
+  }
+
   /* Markdown content styles */
   .markdown-content p {
     margin-bottom: 1rem;

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

@@ -38,6 +38,8 @@ const showCtaBanner = ctaBanner === true;
 <script>
   import { decode } from 'blurhash';
 
+  import { applyQueryParams } from '@/features/themes/base-theme/utils/queryParams';
+
   const blurHashCanvases = document.querySelectorAll<HTMLCanvasElement>('canvas[data-blur-hash]');
 
   for (const canvas of blurHashCanvases) {
@@ -53,6 +55,8 @@ const showCtaBanner = ctaBanner === true;
       }
     }
   }
+
+  applyQueryParams();
 </script>
 
 <MainLayout

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

@@ -0,0 +1,159 @@
+const TYPOGRAPHY_MODERN_THEME_PRESETS: Record<string, { title: string; description: string }> = {
+  light: { title: 'rgba(255, 255, 255, 0.95)', description: 'rgba(255, 255, 255, 0.75)' },
+  white: { title: 'rgba(255, 255, 255, 0.95)', description: 'rgba(255, 255, 255, 0.75)' },
+  dark: { title: '#111827', description: '#6b7280' },
+  black: { title: '#111827', description: '#6b7280' },
+};
+
+/**
+ * Normalizes hex color values to 6-digit format (e.g., #abc -> #aabbcc).
+ * Returns null if the hex value is invalid.
+ */
+const normalizeHex = (hex: string): string | null => {
+  hex = hex.replace('#', '');
+  if (hex.length === 3) hex = [...hex].map((c) => c + c).join('');
+  return hex.length === 6 && /^[0-9A-Fa-f]{6}$/.test(hex) ? `#${hex}` : null;
+};
+
+/**
+ * Parses and validates a color value from query parameters.
+ * Supports CSS color names, hex values, rgb/rgba, and 'transparent'.
+ * Returns null if the color is invalid.
+ */
+const parseColor = (colorParam: string | null): string | null => {
+  if (!colorParam) return null;
+  const normalized = colorParam.toLowerCase().trim();
+  if (normalized === 'transparent') return 'transparent';
+
+  const testEl = document.createElement('div');
+  testEl.style.color = normalized;
+  if (testEl.style.color) return normalized;
+
+  return normalizeHex(colorParam);
+};
+
+/**
+ * Sets or removes a CSS custom property (variable) on an element.
+ * Removes the property if value is null.
+ */
+const setCSSVar = (root: HTMLElement, name: string, value: string | null): void => {
+  if (value) {
+    root.style.setProperty(name, value);
+  } else {
+    root.style.removeProperty(name);
+  }
+};
+
+/**
+ * Derives a description color from a title color by adjusting opacity to 0.8.
+ * Converts rgb to rgba if needed, otherwise returns the original color.
+ */
+const deriveDescriptionColor = (titleColor: string): string => {
+  if (titleColor.startsWith('rgba')) {
+    return titleColor.replace(/,\s*[\d.]+\)$/, ', 0.8)');
+  }
+  if (titleColor.startsWith('rgb')) {
+    return titleColor.replace('rgb', 'rgba').replace(')', ', 0.8)');
+  }
+  return titleColor;
+};
+
+/**
+ * Controls the visibility of the hero/header image based on the 'headerImage' query parameter.
+ * Hides the hero section if headerImage is 'false' or '0'.
+ */
+const applyHeaderImageVisibility = (params: URLSearchParams): void => {
+  const heroSection = document.querySelector<HTMLElement>('.hero');
+  if (!heroSection) return;
+
+  const headerImage = params.get('headerImage');
+  heroSection.style.display = headerImage === 'false' || headerImage === '0' ? 'none' : '';
+};
+
+/**
+ * Applies transparent background styling when 'background=transparent' is in query params.
+ * Adds CSS classes and sets background styles on root, body, and gallery sections.
+ */
+const applyTransparentBackground = (params: URLSearchParams): void => {
+  const root = document.documentElement;
+  const body = document.body;
+  const isTransparent = params.get('background') === 'transparent';
+
+  body.classList.toggle('embed-transparent', isTransparent);
+  const bgValue = isTransparent ? 'transparent' : '';
+  root.style.background = bgValue;
+  body.style.background = bgValue;
+
+  for (const section of document.querySelectorAll('.gallery-section')) {
+    section.classList.toggle('gallery-section--transparent', isTransparent);
+  }
+};
+
+/**
+ * Applies typography colors from the 'typographyColor' query parameter.
+ * Supports preset values (light, dark, white, black) or custom color values.
+ * Automatically derives description color from title color if using custom values.
+ */
+const applyTypographyColors = (params: URLSearchParams): void => {
+  const root = document.documentElement;
+  const typographyParam = params.get('typographyColor');
+
+  if (!typographyParam) {
+    setCSSVar(root, '--typography-color-title', null);
+    setCSSVar(root, '--typography-color-description', null);
+    return;
+  }
+
+  const normalized = typographyParam.toLowerCase().trim();
+  const preset = TYPOGRAPHY_MODERN_THEME_PRESETS[normalized];
+
+  if (preset) {
+    setCSSVar(root, '--typography-color-title', preset.title);
+    setCSSVar(root, '--typography-color-description', preset.description);
+    return;
+  }
+
+  const color = parseColor(typographyParam);
+  if (color) {
+    setCSSVar(root, '--typography-color-title', color);
+    setCSSVar(root, '--typography-color-description', deriveDescriptionColor(color));
+  } else {
+    setCSSVar(root, '--typography-color-title', null);
+    setCSSVar(root, '--typography-color-description', null);
+  }
+};
+
+/**
+ * Applies section background colors from query parameters.
+ * Sets CSS variables for general, even, and odd section background colors.
+ */
+const applySectionBackgroundColors = (params: URLSearchParams): void => {
+  const root = document.documentElement;
+  setCSSVar(root, '--section-bg-color', parseColor(params.get('sectionBgColor')));
+  setCSSVar(root, '--section-bg-color-even', parseColor(params.get('sectionBgColorEven')));
+  setCSSVar(root, '--section-bg-color-odd', parseColor(params.get('sectionBgColorOdd')));
+};
+
+/**
+ * Applies hero height from the 'heroHeight' query parameter.
+ * Accepts a number (e.g., '100' for 100vh, '50' for 50vh).
+ */
+const applyHeroHeight = (params: URLSearchParams): void => {
+  const value = params.get('heroHeight')?.trim();
+  const height = value && /^\d+(\.\d+)?$/.test(value) ? `${value}vh` : null;
+  setCSSVar(document.documentElement, '--hero-height', height);
+};
+
+/**
+ * Main function that applies all query parameter configurations to the page.
+ * Reads URL search params and applies header visibility, background, typography, and section colors.
+ */
+export const applyQueryParams = (): void => {
+  const params = new URLSearchParams(globalThis.location.search);
+
+  applyHeaderImageVisibility(params);
+  applyTransparentBackground(params);
+  applyTypographyColors(params);
+  applySectionBackgroundColors(params);
+  applyHeroHeight(params);
+};

package/tsconfig.json

@@ -5,7 +5,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["src/*"],
+      "@simple-photo-gallery/common/src/*": ["../../common/src/*"]
     }
   }
 }