feat!: replace zoomableImage config with optional data-img-embed attr…

…ibute Adding "data-img-embed" to a <img> or <Image> will add border, rounded corners and zoom to the image.
FjellOverflow · Oct 24, 2024 · 961fdf8 · 961fdf8
1 parent 0f21229
commit 961fdf8
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 35 deletions.
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -33,7 +33,6 @@ const { gradient, background, logo: showLogo } = Astro.props.frontmatter
             loading="eager"
             alt="Nordlys logo"
             src={logo}
-            data-zoomable="false"
             class="h-[48px] max-w-fit object-scale-down sm:h-24"
           />
         )

diff --git a/src/content/posts/color-schemes.mdx b/src/content/posts/color-schemes.mdx
@@ -24,12 +24,12 @@ import monoLightProjects from 'src/assets/screenshots/mono-light-projects.png';
 
 <div class="flex flex-col gap-4">
   <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 border rounded w-[48%]" src={monoDarkLanding} alt="Nordlys landing page in dark mode with mono color scheme" />
-    <Image class="my-0 border rounded w-[48%]" src={monoLightLanding} alt="Nordlys landing page in light mode with mono color scheme" />
+    <Image class="my-0 w-[48%]" src={monoDarkLanding} alt="Nordlys landing page in dark mode with mono color scheme" data-img-embed />
+    <Image class="my-0 w-[48%]" src={monoLightLanding} alt="Nordlys landing page in light mode with mono color scheme" data-img-embed />
   </div>
   <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 border rounded w-[48%]" src={monoDarkProjects} alt="Nordlys projects page in dark mode with mono color scheme" />
-    <Image class="my-0 border rounded w-[48%]" src={monoLightProjects} alt="Nordlys projects page in light mode with mono color scheme" />
+    <Image class="my-0 w-[48%]" src={monoDarkProjects} alt="Nordlys projects page in dark mode with mono color scheme" />
+    <Image class="my-0 w-[48%]" src={monoLightProjects} alt="Nordlys projects page in light mode with mono color scheme" data-img-embed />
   </div>
 </div>
 
@@ -44,12 +44,12 @@ import nordLightProjects from 'src/assets/screenshots/nord-light-projects.png';
 
 <div class="flex flex-col gap-4">
   <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 border rounded w-[48%]" src={nordDarkLanding} alt="Nordlys landing page in dark mode with nord color scheme" />
-    <Image class="my-0 border rounded w-[48%]" src={nordLightLanding} alt="Nordlys landing page in light mode with nord color scheme" />
+    <Image class="my-0 w-[48%]" src={nordDarkLanding} alt="Nordlys landing page in dark mode with nord color scheme" data-img-embed />
+    <Image class="my-0 w-[48%]" src={nordLightLanding} alt="Nordlys landing page in light mode with nord color scheme" data-img-embed />
   </div>
   <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 border rounded w-[48%]" src={nordDarkProjects} alt="Nordlys projects page in dark mode with nord color scheme" />
-    <Image class="my-0 border rounded w-[48%]" src={nordLightProjects} alt="Nordlys projects page in light mode with nord color scheme" />
+    <Image class="my-0 w-[48%]" src={nordDarkProjects} alt="Nordlys projects page in dark mode with nord color scheme" data-img-embed />
+    <Image class="my-0 w-[48%]" src={nordLightProjects} alt="Nordlys projects page in light mode with nord color scheme" data-img-embed />
   </div>
 </div>
 
@@ -64,12 +64,12 @@ import auroraLightProjects from 'src/assets/screenshots/aurora-light-projects.pn
 
 <div class="flex flex-col gap-4">
   <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 border rounded w-[48%]" src={auroraDarkLanding} alt="Nordlys landing page in dark mode with aurora color scheme" />
-    <Image class="my-0 border rounded w-[48%]" src={auroraLightLanding} alt="Nordlys landing page in light mode with aurora color scheme" />
+    <Image class="my-0 w-[48%]" src={auroraDarkLanding} alt="Nordlys landing page in dark mode with aurora color scheme" data-img-embed />
+    <Image class="my-0 w-[48%]" src={auroraLightLanding} alt="Nordlys landing page in light mode with aurora color scheme" data-img-embed />
   </div>
   <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 border rounded w-[48%]" src={auroraDarkProjects} alt="Nordlys projects page in dark mode with aurora color scheme" />
-    <Image class="my-0 border rounded w-[48%]" src={auroraLightProjects} alt="Nordlys projects page in light mode with aurora color scheme" />
+    <Image class="my-0 w-[48%]" src={auroraDarkProjects} alt="Nordlys projects page in dark mode with aurora color scheme" data-img-embed />
+    <Image class="my-0 w-[48%]" src={auroraLightProjects} alt="Nordlys projects page in light mode with aurora color scheme" data-img-embed />
   </div>
 </div>
 

diff --git a/src/content/posts/configuring-nordlys.md b/src/content/posts/configuring-nordlys.md
@@ -82,7 +82,6 @@ export default defineThemeConfig({
   projectsPerPage: 3,
   scrollProgress: false,
   scrollToTop: true,
-  zoomableImages: true,
   tagIcons: {
     tailwindcss: 'tabler--brand-tailwind',
     astro: 'tabler--brand-astro',
@@ -129,10 +128,6 @@ When `scrollProgress` is enabled (it’s automatically on for blog posts), a sti
 
 When `scrollToTop` is enabled (automatically on blog posts), an arrow button will appear in the bottom right corner of the screen after scrolling, allowing users to quickly return to the top of the page.
 
-### Zoomable Images
-
-When `zoomableImages` is enabled, images can be zoomed by clicking them, powered by [medium-zoom](https://github.com/francoischalifour/medium-zoom). To opt out of zooming for specific images, use `<img src="..." data-zoomable="false"/>`
-
 ### Tag Icons
 
 When defining tags for posts and projects, a default icon will be used. With `tagIcons` you can map specific tags to icons - for instance, map the tag `astro` to `tabler--brand-astro`.

diff --git a/src/content/posts/using-images.mdx b/src/content/posts/using-images.mdx
@@ -56,6 +56,25 @@ From the web:
 
 <Image alt="Nordlys favicon" src="/favicon.svg" loading="lazy" width={136} height={141}/>
 
+## data-img-embed
+
+For a nice embedding of images into the content, you can use the `data-img-embed` attribute. This will give the image a bordered, rounded appearance and users can zoom it on click.
+
+```markdown src/pages/my-page.md
+// embedded image
+<img src="/preview.png" data-img-embed/>
+<img src="/preview.png" data-img-embed="true"/>
+
+// normal apperance
+<img src="/preview.png"/>
+<img src="/preview.png" data-img-embed="false"/>
+
+```
+
+<div align="center">
+<Image alt="Nordlys preview" src="/preview.png" loading="lazy" height={252} width={480} data-img-embed/>
+</div>
+
 ## Open Graph Images
 
 Images and image URLs can be used in frontmatter, for instance as `openGraphImage`. To use a local asset, use:
@@ -79,11 +98,11 @@ openGraphImage: "https://nordlys.fjelloverflow.dev/favicon.svg"
 Note that supplying `openGraphImage` is entirely optional. If a post (any file in `src/content/posts`) does not have an `openGraphImage` provided, Nordlys will automatically generate and use a basic template, displaying the post `title`, `description`, `author`, and website `title`, which looks like this:
 
 <div align="center">
-<Image class="border rounded" alt="Example post OG" src="/posts/using-images.png" loading="lazy" height={252} width={480}/>
+<Image alt="Example post OG" src="/posts/using-images.png" loading="lazy" height={252} width={480} data-img-embed/>
 </div>
 
 Similarly, when there is no global `openGraphImage` configured in `theme.config.ts`, Nordlys generates and uses a generic image that displays the site `title` and `description` on every page where none has been defined, looking like this:
 
 <div align="center">
-<Image class="border rounded" alt="Example site OG" src="/ogImage.png" loading="lazy" height={252} width={480}/>
+<Image alt="Example site OG" src="/ogImage.png" loading="lazy" height={252} width={480} data-img-embed/>
 </div>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -113,6 +113,6 @@ const openGraphImageUrl = new URL(
   <body>
     <slot />
     <CopyCodeButtonsPlugin />
-    {config.zoomableImages && <MediumZoomPlugin />}
+    <MediumZoomPlugin />
   </body>
 </html>
diff --git a/src/plugins/MediumZoomPlugin.astro b/src/plugins/MediumZoomPlugin.astro
@@ -6,19 +6,9 @@
   import mediumZoom from 'medium-zoom/dist/pure'
 
   document.addEventListener('astro:page-load', () => {
-    mediumZoom('[data-zoomable]', {
+    mediumZoom('[data-img-embed]', {
       margin: 48,
       background: '#000000BF'
     })
   })
 </script>
-
-<script is:inline>
-  document.addEventListener('astro:page-load', () => {
-    document.querySelectorAll('main img').forEach((img) => {
-      if (!Object.hasOwn(img.dataset, 'zoomable')) img.dataset.zoomable = ''
-      else if (img.dataset.zoomable === 'false')
-        img.removeAttribute('data-zoomable')
-    })
-  })
-</script>
diff --git a/src/style/main.css b/src/style/main.css
@@ -52,4 +52,9 @@
       }
     }
   }
+
+  img[data-img-embed=''],
+  img[data-img-embed='true'] {
+    @apply rounded border border-accent;
+  }
 }
diff --git a/src/theme.config.ts b/src/theme.config.ts
@@ -43,7 +43,6 @@ export default defineThemeConfig({
   projectsPerPage: 3,
   scrollProgress: false,
   scrollToTop: true,
-  zoomableImages: true,
   tagIcons: {
     tailwindcss: 'tabler--brand-tailwind',
     astro: 'tabler--brand-astro',

diff --git a/src/types.ts b/src/types.ts
@@ -51,7 +51,6 @@ export interface ThemeConfig {
   projectsPerPage: number
   scrollProgress: boolean
   scrollToTop: boolean
-  zoomableImages: boolean
   tagIcons: Record<string, Icon>
   shikiThemes: ShikiConfig['themes']
 }
@@ -66,7 +65,6 @@ const defaults = {
   projectsPerPage: 3,
   scrollProgress: false,
   scrollToTop: true,
-  zoomableImages: true,
   tagIcons: {},
   shikiThemes: {
     light: 'vitesse-light',