π Patch Changes
- #10278
a548a3a99c2835c19662fc38636f92b2bda26614Thanks @Princesseuh! - Fixes original images sometimes being kept / deleted when they shouldnβt in both MDX and Markdoc
a548a3a99c2835c19662fc38636f92b2bda26614 Thanks @Princesseuh! - Fixes original images sometimes being kept / deleted when they shouldnβt in both MDX and Markdoc#9958 14ce8a6ebfc9daf951d2dca54737d857c229667c Thanks @Princesseuh! - Adds support for using a custom tag (component) for optimized images
Starting from this version, when a tag called image is used, its src attribute will automatically be resolved if itβs a local image. Astro will pass the result ImageMetadata object to the underlying component as the src prop. For non-local images (i.e. images using URLs or absolute paths), Astro will continue to pass the src as a string.
import { component, defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
export default defineMarkdocConfig({ tags: { image: { attributes: nodes.image.attributes, render: component('./src/components/MarkdocImage.astro'), }, },});---import { Image } from 'astro:assets';
interface Props { src: ImageMetadata | string; alt: string; width: number; height: number;}
const { src, alt, width, height } = Astro.props;---
<Image {src} {alt} {width} {height} />{% image src="./astro-logo.png" alt="Astro Logo" width="100" height="100" %}e9a72d9a91a3741566866bcaab11172cb0dc7d31 Thanks @blackmann! - Removes unnecessary shikiji dependency1baf0b0d3cbd0564954c2366a7278794fad6726e Thanks @sarah11918! - Updates READMEe83b5095f Thanks @florian-lefebvre! - Upgrades vite to latest73b8d60f8 Thanks @AndyClifford! - Added ignoreIndentation as a markdoc integration option to enable better readability of source code.26b77b8fe]:
#8502 c4270e476 Thanks @bluwy! - Updates the internal shiki syntax highlighter to shikiji, an ESM-focused alternative that simplifies bundling and maintenance.
There are no new options and no changes to how you author code blocks and syntax highlighting.
Potentially breaking change: While this refactor should be transparent for most projects, the transition to shikiji now produces a smaller HTML markup by attaching a fallback color style to the pre or code element, instead of to the line span directly. For example:
Before:
<code class="astro-code" style="background-color: #24292e"> <pre> <span class="line" style="color: #e1e4e8">my code</span> </pre></code>After:
<code class="astro-code" style="background-color: #24292e; color: #e1e4e8"> <pre> <span class="line">my code<span> </pre></code>This does not affect the colors as the span will inherit the color from the parent, but if youβre relying on a specific HTML markup, please check your site carefully after upgrading to verify the styles.
#8188 d0679a666 Thanks @ematipico! - Remove support for Node 16. The lowest supported version by Astro and all integrations is now v18.14.1. As a reminder, Node 16 will be deprecated on the 11th September 2023.
#8179 6011d52d3 Thanks @matthewp! - Astro 3.0 Release Candidate
#8169 e79e3779d Thanks @bluwy! - Remove pre-shiki v0.14 theme names for compatibility. Please rename to the new theme names to migrate:
material-darker -> material-theme-darkermaterial-default -> material-themematerial-lighter -> material-theme-lightermaterial-ocean -> material-theme-oceanmaterial-palenight -> material-theme-palenightd0679a666, db39206cb, 2aa6d8ace, adf9fccfd, 0c7b42dc6, 46c4c0e05, 364d861bd, 2484dc408, 81545197a, 6011d52d3, c2c71d90c, cd2d7e769, 80f1494cd, e45f30293, c0de7a7b0, 65c354969, 3c3100851, 34cb20021, a824863ab, 44f7a2872, 1048aca55, be6bbd2c8, 9e021a91c, 7511a4980, c37632a20, acf652fc1, 42785c7b7, 8450379db, dbc97b121, 7d2f311d4, 2540feedb, ea7ff5177, 68efd4a8b, 7bd1b86f8, 036388f66, 519a1c4e8, 1f58a7a1b, 2ae9d37f0, a8f35777e, 70f34f5a3, 5208a3c8f, 84af8ed9d, f003e7364, ffc9e2d3d, 732111cdc, 0f637c71e, 33b8910cf, 8a5b0c1f3, 148e61d24, e79e3779d, 632579dc2, 3674584e0, 1db4e92c1, e7f872e91, 16f09dfff, 4477bb41c, 55c10d1d5, 3e834293d, 96beb883a, 997a0db8a, 80f1494cd, 0f0625504, e1ae56e72, f32d093a2, f01eb585e, b76c166bd, a87cbe400, 866ed4098, 767eb6866, 32669cd47]:
#8179 6011d52d3 Thanks @matthewp! - Astro 3.0 Release Candidate
#8169 e79e3779d Thanks @bluwy! - Remove pre-shiki v0.14 theme names for compatibility. Please rename to the new theme names to migrate:
material-darker -> material-theme-darkermaterial-default -> material-themematerial-lighter -> material-theme-lightermaterial-ocean -> material-theme-oceanmaterial-palenight -> material-theme-palenight2aa6d8ace]:
1eae2e3f7 Thanks @Princesseuh! - Remove support for Node 16. The lowest supported version by Astro and all integrations is now v18.14.1. As a reminder, Node 16 will be deprecated on the 11th September 2023.1eae2e3f7, 76ddef19c, 9b4f70a62, 3fdf509b2, 2f951cd40, c022a4217, 67becaa58, bc37331d8, dfc2d93e3, 3dc1ca2fa, 1be84dfee, 35f01df79, 3fdf509b2, 78de801f2, 59d6e569f, 7723c4cc9, fb5cd6b56, 631b9c410]:
#7597 7461e82c8 Thanks @alex-sherwin! - Adds an βallowHTMLβ Markdoc integration option.
When enabled, all HTML in Markdoc files will be processed, including HTML elements within Markdoc tags and nodes.
Enable this feature in the markdoc integration configuration:
export default defineConfig({ integrations: [markdoc({ allowHTML: true })],});Updated dependencies [0f677c009, 188eeddd4]:
#7593 c135633bf Thanks @bholmesdev! - Add a documentation link to the configuration error hint for those migration pre-v0.4.0 config to the latest version.
#7599 8df6a423c Thanks @bholmesdev! - Fix hyphens in Markdoc tag names causing build failures
Updated dependencies [904921cbe, 3669e2d27, 831dfd151]:
#7468 fb7af5511 Thanks @bholmesdev! - Updates the Markdoc config object for rendering Astro components as tags or nodes. Rather than importing components directly, Astro includes a new component() function to specify your component path. This unlocks using Astro components from npm packages and .ts files.
Update all component imports to instead import the new component() function and use it to render your Astro components:
import { defineMarkdocConfig, component,} from '@astrojs/markdoc/config'; import Aside from './src/components/Aside.astro';
export default defineMarkdocConfig({ tags: { aside: { render: Aside, render: component('./src/components/Aside.astro'), } }});