From b6396cdaac1193a1bf592c2ef92826aef6b8c545 Mon Sep 17 00:00:00 2001
From: trueberryless <99918022+trueberryless@users.noreply.github.com>
Date: Tue, 5 Nov 2024 19:19:32 +0100
Subject: [PATCH] Make StarlightBlog work with StarlightImageZoom (#28866)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
**Description**
⚒️ Fixes images on blog sites cannot be zoomed
I think there is a problem with Images on Blog Pages (I have not found
any, but if there is one, it would not be possible to zoom the
image...).
This is because the MarkdownContent.astro cannot be overridden by the
Image plugin because the Blog already overrid it...
This is also probably the reason, why there is a comment in your code,
which says, that the Image Zoom plugin should not be before the Blog
plugin, because otherwise, the blog page would be scuffed, because the
author and all other metadata cannot be overriden anymore, because the
Image Zoom plugin already overrid the MarkdownContent.astro
I hope this helps.
Have a nice day, bye!
**⚙️ Type of change**
- [x] ⚙️ Feature/App addition
- [x] 🪛 Bugfix
- [ ] ⚠️ Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] 🔃 Refactor of current code
**🧪 How Has This Been Tested?**
On my own project (https://blog.trueberryless.org)
**📃 Notes:**
I have created around 10 PRs in different repositories where all of them
have the same issue, my own repo from one week ago included...
**✔️ Checklist:**
- [ ] ⚖️ My code follows the style guidelines of this project
- [ ] 👀 I have performed a self-review of my own code
- [ ] #️⃣ I have commented my code, particularly in hard-to-understand
areas
- [ ] 📄 I have made corresponding changes to the documentation
- [ ] ⚠️ My changes generate no new warnings
- [ ] 🧪 I have added tests to this description that prove my fix is
effective or that my feature works
- [ ] ⬆️ I increased versions for any altered app according to semantic
versioning
- [ ] I made sure the title starts with `feat(chart-name):`,
`fix(chart-name):` or `chore(chart-name):`
- [x] I have edited all files on GitHub web performed no tests and
didn't even try to run the code :) I'm just here to help and give a hint
how it could work.
**➕ App addition**
If this PR is an app addition please make sure you have done the
following.
- [ ] 🖼️ I have added an icon in the Chart's root directory called
`icon.png`
---
_Please don't blindly check all the boxes. Read them and only check
those that apply.
Those checkboxes are there for the reviewer to see what is this all
about and
the status of this PR with a quick glance._
---------
Signed-off-by: trueberryless <99918022+trueberryless@users.noreply.github.com>
---
website/astro.config.mjs | 2 +-
website/src/components/CustomMarkdownContent.astro | 8 ++++++++
2 files changed, 9 insertions(+), 1 deletion(-)
create mode 100644 website/src/components/CustomMarkdownContent.astro
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index a808346ef6d..a8926d8d00d 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -91,6 +91,7 @@ export default defineConfig({
components: {
Header: "./src/components/CustomHeader.astro",
Hero: "./src/components/CustomHero.astro",
+ MarkdownContent: "./src/components/CustomMarkdownContent.astro",
},
plugins: [
starlightBlog({
@@ -100,7 +101,6 @@ export default defineConfig({
recentPostCount: 10,
authors: authors,
}),
- // Do not put that before starlightBlog
starlightImageZoom(),
starlightLinksValidator({
errorOnRelativeLinks: false,
diff --git a/website/src/components/CustomMarkdownContent.astro b/website/src/components/CustomMarkdownContent.astro
new file mode 100644
index 00000000000..46857e62e89
--- /dev/null
+++ b/website/src/components/CustomMarkdownContent.astro
@@ -0,0 +1,8 @@
+---
+import type { Props } from '@astrojs/starlight/props'
+import Default from "starlight-blog/overrides/MarkdownContent.astro"
+import ImageZoom from 'starlight-image-zoom/components/ImageZoom.astro'
+---
+
+
+