Gallery Example

astro-skeleton comes with the @astrojs/mdx integration installed and configured in the astro.config.mjs config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.

Why MDX?

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into Markdown content for things like interactive charts or alerts.

If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.

Example

Here is how to import and use the gallery MDX component:

When viewing this page in the browser, you should see the gallery above the code block.

import ImageGallery from "~/components/mdx/integrations/swiper/ImageGallery.astro";
import Image1 from "~/content/posts/images/claudio-schwarz-pQ_SEJg8rII-unsplash.jpg";
import Image2 from "~/content/posts/images/eugene-golovesov-k-ZgCSdH8Hk-unsplash.jpg";
import Image3 from "~/content/posts/images/fons-heijnsbroek-U8EuOr-hG_0-unsplash.jpg";
import Image4 from "~/content/posts/images/geronimo-giqueaux-H26GZk6nro8-unsplash.jpg";

<ImageGallery
  images={[
    { src: Image1, alt: "Example 1" },
    { src: Image2, alt: "Example 2" },
    { src: Image3, alt: "Example 3" },
    { src: Image4, alt: "Example 4" },
  ]}
/>

More Links

• MDX Syntax Documentation
• Astro Usage Documentation
• Note: Client Directives are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.