diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 8 | ||||
| -rw-r--r-- | src/layouts/BlogPost.astro | 9 | ||||
| -rw-r--r-- | src/loaders/pleroma.ts | 4 | ||||
| -rw-r--r-- | src/styles/global.css | 6 |
5 files changed, 25 insertions, 3 deletions
diff --git a/package.json b/package.json index 4f25b06..09ccde9 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "mdast-util-directive": "^3.0.0", "mdast-util-to-markdown": "^2.1.2", "mdast-util-to-string": "^4.0.0", + "medium-zoom": "^1.1.0", "rehype-autolink-headings": "^7.1.0", "rehype-external-links": "^3.0.0", "rehype-unwrap-images": "^1.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e7df8c8..395f4ea 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -59,6 +59,9 @@ importers: mdast-util-to-string: specifier: ^4.0.0 version: 4.0.0 + medium-zoom: + specifier: ^1.1.0 + version: 1.1.0 rehype-autolink-headings: specifier: ^7.1.0 version: 7.1.0 @@ -2373,6 +2376,9 @@ packages: mdn-data@2.12.2: resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==} + medium-zoom@1.1.0: + resolution: {integrity: sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==} + merge2@1.4.1: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} @@ -6156,6 +6162,8 @@ snapshots: mdn-data@2.12.2: {} + medium-zoom@1.1.0: {} + merge2@1.4.1: {} micromark-core-commonmark@2.0.3: diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index 2744b8c..436efde 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -92,3 +92,12 @@ const readingTime: string = remarkPluginFrontmatter.readingTime; const observer = new IntersectionObserver(callback); observer.observe(targetHeader); </script> + +<script> + import mediumZoom from "medium-zoom"; + + mediumZoom("[data-zoomable]", { + margin: 8, + background: "rgba(0, 0, 0, 0.2)", + }); +</script> diff --git a/src/loaders/pleroma.ts b/src/loaders/pleroma.ts index 83f60c2..853c888 100644 --- a/src/loaders/pleroma.ts +++ b/src/loaders/pleroma.ts @@ -531,9 +531,7 @@ function buildImageGridHtml(attachments: PleromaMediaAttachment[]): string { ${imageAttachments .map((attachment) => { const description = attachment.description || "Image"; - return `<a href="${attachment.url}" target="_blank" rel="noopener noreferrer" class="block overflow-hidden rounded-lg border border-gray-200 transition-colors hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600"> -<img src="${attachment.url}" alt="${description}" class="h-48 w-full object-cover" loading="lazy" /> -</a>`; + return `<img src="${attachment.url}" alt="${description}" class="h-48 w-full cursor-zoom-in rounded-lg border border-gray-200 object-cover transition-colors hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600" loading="lazy" data-zoomable />`; }) .join("\n")} </div>`; diff --git a/src/styles/global.css b/src/styles/global.css index 5f5cdb6..798afc7 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -146,3 +146,9 @@ --tw-prose-quotes: var(--color-quote); --tw-prose-th-borders: #666; } + +/* Medium-zoom overlay styles */ +.medium-zoom-overlay, +.medium-zoom-image--opened { + z-index: 999; +} |