Blog post will not show relevant frontmatter in conjunction with starlight-image-zoom

[ramiiib]

Describe the bug

When using both starlightImageZoom() and starlightBlog() (in that order), they for the most part, work together. However, on the blog post itself, frontmatter such as date/cover/author is not displayed. When using starlightBlog() and starlightImageZoom() (in that order), the frontmatter does show but starlightImageZoom() will not work anymore.

To Reproduce

1. In astro.config.mjs, include both plugins in the relevant order inside starlight integration. Should look like this:

   export default defineConfig({
   integrations: [starlight({
   plugins: [starlightImageZoom(), starlightBlog()],
   // other code unrelated

2. Create a new blog post (.md or .mdx file) in the src/content/docs/blog/ directory with frontmatter pertaining to starlight-blog

Expected behavior

The blog function should work, you will be able to see the sidebar change with recent posts, tags, and all posts. However, when clicking on a blog post, the frontmatter such as date/author/cover will not display.

How often does this bug happen?

Every time

System Info

Operating system: Windows 11 Pro Version 23H2 Browser: Google Chrome version 126.0.6478.127 (Official Build) (64-bit) Astro version: v4.11.0

Additional Context

Blog post

Frontmatter inside blog post

---
title: Wazuh + SOAR Implementation
date: 2024-06-30
excerpt: My very first project! Creating a makeshift SOC featuring SIEM, SOAR and case management.
cover:
  alt: soc automation
  image: /src/assets/project1.svg
tags:
  - Projects
authors:
  name: asd
  title: asd
  picture: https://avatars.githubusercontent.com/u/64679603
  url: https://www.google.com/
---

Console logs

11:49:04 [WARN] [starlight-blog-plugin] It looks like you already have a MarkdownContent component override in your Starlight configuration.

11:49:04 [WARN] [starlight-blog-plugin] To use starlight-blog, either remove your override or update it to render the content from starlight-blog/overrides/MarkdownContent.astro.

[HiDeoo]

Thanks a lot for your report :raised_hands:

The 2 plugins use component overrides and they both happen to override the same component (<MarkdownContent>).

As there is no obvious way to resolve this conflict, you manually have to compose your own override that combines both plugins. Here is how you can do it:

1. Specify an override in your astro.config.mjs file for the <MarkdownContent> component:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'My Docs',
      plugins: [starlightImageZoom(), starlightBlog()],
      components: {
        // Override the default `MarkdownContent` component.
        MarkdownContent: './src/components/MarkdownContent.astro',
      },
    }),
  ],
});

2. Create an Astro component to use as the override in src/components/MarkdownContent.astro:

---
// src/components/MarkdownContent.astro
import type { Props } from '@astrojs/starlight/props';
import StarlightBlog from 'starlight-blog/overrides/MarkdownContent.astro';
import StarlightImageZoom from 'starlight-image-zoom/components/ImageZoom.astro';
---

<StarlightImageZoom />
<StarlightBlog {...Astro.props}><slot /></StarlightBlog>

I just tested locally and this new component override will render everything required by both plugins so they can both work.

[niallthompson]

I'm having the exact same issue but the fix doesn't seem to work. Would appreciate any help or guidance.

"astro": "4.12.2"

Console Logs

20:42:26 [WARN] [starlight-blog-plugin] It looks like you already have a MarkdownContent component override in your Starlight configuration. 20:42:26 [WARN] [starlight-blog-plugin] To use starlight-blog, either remove your override or update it to render the content from starlight-blog/overrides/MarkdownContent.astro. 20:42:26 [WARN] [starlight-image-zoom-plugin] It looks like you already have a MarkdownContent component override in your Starlight configuration. 20:42:26 [WARN] [starlight-image-zoom-plugin] To use starlight-image-zoom, either remove the override or manually render starlight-image-zoom/components/ImageZoom.astro.

astro.config.js

import starlight from "@astrojs/starlight";
import starlightBlog from "starlight-blog";
import starlightImageZoom from "starlight-image-zoom";

// https://astro.build/config
export default defineConfig({
  site: "https://site.com",
  integrations: [
    starlight({
      plugins: [
        starlightBlog({
          title: "Changelog",
          prefix: "changelog",
        }),
        starlightImageZoom({}),
      ],
      components: {
        // Override the default `MarkdownContent` component.
        MarkdownContent: "./src/components/MarkdownContent.astro",
      },
    }),
  ],
});

src/components/MarkdownContent.astro

---
import type { Props } from "@astrojs/starlight/props";
import StarlightBlog from "starlight-blog/overrides/MarkdownContent.astro";
import StarlightImageZoom from "starlight-image-zoom/components/ImageZoom.astro";
---

<StarlightImageZoom />
<StarlightBlog {...Astro.props}><slot /></StarlightBlog>

[HiDeoo]

I'm having the exact same issue but the fix doesn't seem to work. Would appreciate any help or guidance.

Using the code above, the plugins work as expected for me:

https://github.com/user-attachments/assets/48591f3f-11a6-4103-957b-b27a2d534346

You may need to share a repro of the issue.