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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-photo-gallery/theme-modern",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Modern theme for Simple Photo Gallery",
   "license": "MIT",
   "author": "Vladimir Haltakov, Tomasz Rusin",
@@ -30,6 +30,7 @@
     "astro": "^5.11.0",
     "astro-relative-links": "^0.4.2",
     "blurhash": "^2.0.5",
+    "marked": "^16.4.0",
     "photoswipe": "^5.4.4"
   },
   "devDependencies": {

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

@@ -1,21 +1,24 @@
 ---
 import type { GallerySection as GallerySectionType } from '@simple-photo-gallery/common';
+import { renderMarkdown } from '@/lib/markdown';
 
 interface Props {
   section: GallerySectionType;
 }
 
 const { section } = Astro.props;
+
+// Parse description as Markdown if it exists
+const parsedDescription = section.description ? await renderMarkdown(section.description) : '';
 ---
 
 <div class="gallery-section__header">
   <h2 class="gallery-section__header-title">{section.title}</h2>
-  <p class="gallery-section__header-description">{section.description}</p>
+  {parsedDescription && <div class="gallery-section__header-description markdown-content" set:html={parsedDescription} />}
 </div>
 
 <style>
   .gallery-section__header {
-    text-align: center;
     margin-bottom: 4rem;
   }
 
@@ -24,6 +27,7 @@ const { section } = Astro.props;
     font-weight: 700;
     margin-bottom: 1.5rem;
     color: #111827;
+    text-align: center;
   }
 
   .gallery-section__header-description {
@@ -32,5 +36,6 @@ const { section } = Astro.props;
     max-width: 42rem;
     margin: 0 auto;
     line-height: 1.6;
+    text-align: left;
   }
 </style>

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

@@ -1,5 +1,6 @@
 ---
 import { getPhotoPath, getRelativePath } from '@/features/themes/base-theme/utils';
+import { renderMarkdown } from '@/lib/markdown';
 
 import type { MediaFile } from '@simple-photo-gallery/common/src/gallery';
 
@@ -10,6 +11,10 @@ interface Props {
 }
 
 const { image, mediaBaseUrl, blurHash } = Astro.props;
+
+// Parse caption as Markdown if it exists
+const parsedCaption = image.alt ? await renderMarkdown(image.alt) : '';
+const captionHtml = parsedCaption ? `<div class="image-caption markdown-content">${parsedCaption}</div>` : '';
 ---
 
 <a
@@ -19,7 +24,7 @@ const { image, mediaBaseUrl, blurHash } = Astro.props;
   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>` : ''}
+  data-pswp-caption={captionHtml}
   style={`--w: ${image.thumbnail?.width}; --h: ${image.thumbnail?.height}`}>
   <canvas data-blur-hash={blurHash} width={32} height={32}></canvas>
 

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

@@ -1,5 +1,6 @@
 ---
 import HeroScrollToGalleryBtn from '@/features/themes/base-theme/components/hero/HeroScrollToGalleryBtn.astro';
+import { renderMarkdown } from '@/lib/markdown';
 
 interface Props {
   title: string;
@@ -7,6 +8,9 @@ interface Props {
 }
 
 const { title, description } = Astro.props;
+
+// Parse description as Markdown if it exists
+const parsedDescription: string = description ? await renderMarkdown(description) : '';
 ---
 
 <section class="hero">
@@ -63,7 +67,7 @@ const { title, description } = Astro.props;
   <div class="hero__overlay"></div>
   <div class="hero__content">
     <h1 class="hero__title">{title}</h1>
-    {description && <p class="hero__description">{description}</p>}
+    {parsedDescription && <div class="hero__description markdown-content" set:html={parsedDescription} />}
     <HeroScrollToGalleryBtn />
   </div>
 </section>
@@ -128,5 +132,6 @@ const { title, description } = Astro.props;
     font-weight: 300;
     opacity: 0.9;
     line-height: 1.5;
+    color: white;
   }
 </style>

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

@@ -81,7 +81,7 @@
   }
 
   .pswp__caption .image-caption {
-    text-align: center;
+    text-align: left;
     background: rgba(128, 128, 128, 0.3);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);

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

@@ -40,4 +40,86 @@ const { title, description, metadata, url } = Astro.props;
     color: #333;
     font-weight: 400;
   }
+
+  /* Markdown content styles */
+  .markdown-content p {
+    margin-bottom: 1rem;
+  }
+
+  .markdown-content p:last-child {
+    margin-bottom: 0;
+  }
+
+  .markdown-content strong {
+    font-weight: 600;
+  }
+
+  .markdown-content em {
+    font-style: italic;
+  }
+
+  .markdown-content a {
+    color: #374151;
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.2s ease;
+  }
+
+  .markdown-content a:hover {
+    color: #111827;
+  }
+
+  /* Light links on dark backgrounds (hero, captions) */
+  .hero__description.markdown-content a,
+  .image-caption.markdown-content a {
+    color: #d1d5db;
+  }
+
+  .hero__description.markdown-content a:hover,
+  .image-caption.markdown-content a:hover {
+    color: #f3f4f6;
+  }
+
+  .markdown-content ul,
+  .markdown-content ol {
+    margin: 1rem 0;
+    padding-left: 2rem;
+  }
+
+  .markdown-content li {
+    margin-bottom: 0.5rem;
+  }
+
+  .markdown-content li:last-child {
+    margin-bottom: 0;
+  }
+
+  .markdown-content blockquote {
+    border-left: 3px solid currentColor;
+    padding-left: 1rem;
+    margin: 1rem 0;
+    font-style: italic;
+    opacity: 0.9;
+  }
+
+  .markdown-content code {
+    background-color: rgba(0, 0, 0, 0.1);
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.9em;
+  }
+
+  .markdown-content pre {
+    background-color: rgba(0, 0, 0, 0.05);
+    padding: 1rem;
+    border-radius: 5px;
+    overflow-x: auto;
+    margin: 1rem 0;
+  }
+
+  .markdown-content pre code {
+    background-color: transparent;
+    padding: 0;
+  }
 </style>

package/src/lib/markdown.ts

@@ -0,0 +1,37 @@
+import { marked } from 'marked';
+
+// Configure marked to only allow specific formatting options
+const renderer = new marked.Renderer();
+
+// Disable headings by rendering them as paragraphs
+renderer.heading = ({ text }: { text: string }) => {
+  return '<p>' + text + '</p>\n';
+};
+
+// Disable images
+renderer.image = () => '';
+
+// Disable HTML
+renderer.html = () => '';
+
+// Disable tables
+renderer.table = () => '';
+renderer.tablerow = () => '';
+renderer.tablecell = () => '';
+
+// Configure marked options
+marked.use({
+  renderer: renderer,
+  breaks: true,
+  gfm: true,
+});
+
+/**
+ * Renders markdown with limited formatting options.
+ * Supported: paragraphs, bold, italic, lists, code blocks, blockquotes, links
+ * Disabled: headings (rendered as paragraphs), images, HTML, tables
+ */
+export async function renderMarkdown(markdown: string): Promise<string> {
+  if (!markdown) return '';
+  return await marked.parse(markdown);
+}