Rodney
LightNews LightNews
banner
askrodney.bsky.social
Rodney
@askrodney.bsky.social
67 followers 110 following 51 posts
Follow for updates on web development. I'm a consultant based in the UK 🇬🇧 and am available for work.
Posts Replies Media Videos
askrodney.bsky.social
Just dropped a blog post on using Signed Distance Fields for rendering scaled fonts sharply with raylib.

Hope you find it useful!

rodneylab.com/raylib-sdf-f...
August 14, 2024 at 3:53 PM
askrodney.bsky.social
Just dropped a post on some GitHub Actions to add your Rust Godot project for linting and formatting.

Post covers GDScript and Rust code.

Hope you find it useful!

rodneylab.com/godot-rust-ci/

#askRodney #rustlang #gamedev
August 7, 2024 at 4:39 PM
askrodney.bsky.social
If you want to add a “Related posts” block to blog posts, for example, Astro can save you a lot of coding. You focus on designing the Related Content widget, and Astro manages feeding in the data.
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(), }
November 10, 2023 at 9:55 AM
askrodney.bsky.social
Love some of the Markdown convenience features that 🚀 Astro Content Collections bring.

References are a great example. They help you link related content to the current post, for example, just by placing a list of related posts slugs in the post’s front matter.

#learnastro
Screen capture shows a blog post on a website page. A widget reads 'You might like to read one of these posts next:'
November 10, 2023 at 9:54 AM
askrodney.bsky.social
Markdoc, from the Stripe team, is a fantastic alternative to Markdown or MDX for authoring content, and lets you focus on writing content, not code.

It integrates nicely with Astro; you can create Astro or framework components to override Markdoc nodes.
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 } }, }}, }); ```
November 8, 2023 at 4:45 PM
askrodney.bsky.social
Just been trying out overriding the Astro Markdoc syntax highlighting with starry-night, in my own Astro component.

starry-night syntax highlighting:
— has a GitHub look & feel,
— supports auto light/dark mode preference; and
— has accessible colour-blind + more alternatives.
Elixir and Java Script code blocks switch from a dark to light theme as user changes the color-scheme simulation in browser dev tools.
November 8, 2023 at 4:44 PM
askrodney.bsky.social
Just dropped a new post on using the 🚀 new Astro Picture component.

You use:

— Astro Markdown APIs;

— Content Collection schema to generate a Base64 placeholder with ThumbHash; and

— the responsive Astro Picture component.

Hope you find it useful!

#learnAstro

rodneylab.com/astro-pictur...
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.
November 6, 2023 at 3:35 PM