Rodney

@askrodney.bsky.social

67 Followers 117 Following

Follow for updates on web development. I'm a consultant based in the UK 🇬🇧 and am available for work.

Astro tips ASTRO: RELATED CONTENT Astro References help you push related content data into your page templates - add a related content list to Markdown front matter (`relatedPosts`, here) - update the Content Collection schema for that field with `reference('<COLLECTION_NAME>')` - an array of `collection`, `slug` pairs is now available in your template To pull front matter meta from the related posts in your template, use the `getEntry` API: `const { data: { title, description } } = await getEntry(collection, slug);` ```markdown --- title: 'Best Medium Format Camera for Starting Out' description: "Best medium format camera for starting out..." relatedPosts: ['folding-camera', 'twin-lens-reflex-camera'] --- ## What is a Medium Format Camera? ``` ```typescript // markdoc.config.mjs const postsCollection = defineCollection({ type: 'content', schema: () => z.object({ title: z.string(), description: z.string(), relatedPosts: z.array(reference('posts')).optional(), }
Screen capture shows a blog post on a website page. A widget reads 'You might like to read one of these posts next:'
ASTRO: MARKDOC INTEGRATION Astro has a Markdoc Integration - add it to you project with `pnpm astro add markdoc` - Markdoc lets you reference front matter fields in the content: `{% $frontmatter.title %}` - otherwise, syntax is very much like Markdown You can override Markdoc nodes with your own components. Just create a `markdoc.config.mjs` file linking the replacement components to nodes. ```markdown --- title: 'Markdoc Introduction with 🚀 Astro' --- # {% $frontmatter.title %} ```javascript console.log('Made it here 🙏🏽'); ``` ``` ```typescript // markdoc.config.mjs export default defineMarkdocConfig({ nodes: { fence: { render: component('./src/components/Fence.astro'), attributes: { content: { type: String }, language: { type: String } }, }}, }); ```
Elixir and Java Script code blocks switch from a dark to light theme as user changes the color-scheme simulation in browser dev tools.
Screen capture of a website page shows a low resolution, blurred placeholder, which transforms into an image of an analogue camera one the website fully loads.