
Astro Blog Posts # Astro #
BLOG POSTS TAGGED “ ASTRO ” 33 POSTS:
33 “ ASTRO ” BLOG POSTS:


Astro Markdoc: Readable, Declarative MDX Alternative 📚
Astro Markdoc 📚 trying Stripe’s customizable, readable, declarative Markdown extension designed for 🖋️ creating documentation content.
Astro Picture Component: adding Responsive Images 🖼️
Astro Picture Component 🖼️ using Astro in-built tooling to add next-gen (WebP & AVIF), responsive images to your 🚀 Astro Markdown blog.
Astro PostCSS Example: Future CSS Today 💅
Astro PostCSS Example 💅 how you can add PostCSS to your Astro site and access future CSS features like 📐 custom media queries.
Astro Font Fallbacks with Capsize: reduce CLS 📏
Astro Font Fallbacks ☄️ how you can use Capsize to reduce layout shift from font swapping when optimizing your site for 🧑🏽 user experience.
Astro JS Middleware Example: Request Logging 📝
Astro JS Middleware Example 📝 how you can intercept HTTP requests for logging, modifying content and from your 🚀 Astro JS project code.
Astro QR Code Generator: with Svelte Actions 🦸🏽
Astro QR Code Generator 📲 how you create an Astro SSR app for generating QR Codes for free with ❤️ Svelte Actions.
Astro Cookies API: Cookies on HTTP Requests 🍪
Astro Cookies API 🍪 how you can set and get cookies, passing data between client and server on your 🚀 Astro SSR site.
Astro Comment Form: with Turnstile & Prerender 🚀
Astro Comment Form 🚀 how you can add a comment form to your static Astro app using Hybrid Rendering and a Cloudflare Turnstile Captcha 🤖.
Astro Husky Git Hooks: CI Tooling
Astro Husky Git Hooks: how to set up astro check, prettier formatting and conventional commit git ci tooling with Astro.
Astro Vanilla-Extract Styling: CSS in TypeScript
Astro vanilla-extract: how to set up vanilla-extract in your Astro project for zero runtime overhead styling, theming, contracts and more.
Astro Sitemaps: Add Post and Page XML Sitemaps
Astro sitemaps: how to take your Astro site SEO to the next level adding rich XML sitemaps to keep Google up-to-date with changes.
Astro Server-Side Rendering: Edge Search Site
Astro Server-side Rendering: getting started with Astro SSR building a productivity search app with Vitest and Edge geolocation data.
How to Create a New Astro JS App: Cheat Sheet
How to create a new Astro JS app: cheat sheet reference guide to spinning up, launching and customising your new Astro project quickly.
Astro JS non-HTML Routes: File & Resource API
Astro JS non-HTML routes: how you can serve resources and files like PDFs and JSON data alongside your Astro site’s static HTML pages.
Astro JS 404 Page: Create Not Found Error Pages
Astro JS 404 page: how you can set up a page not found page on your Astro project, so visitors don't see your host's default 404 page.
Astro JS Location Map: using Leaflet & Svelte
Astro JS Location Map: how you can use the Leaflet library to add a location map on your Astro site with Svelte. Handy for a contact page.
Astro JS Mux Video: using Custom Elements
Astro JS Mux Video: how you can add video to your site with the Mux HTML 5 Custom Elements video player. No framework needed!
Temporal API Duration: Working with Time Periods
Temporal API Duration: how you can use the new Temporal API to make working with and manipulating durations and time periods easier.
Astro JS Favicon: 6 most Important Favicon Files
Astro JS favicon: short video on the 6 most important files for getting your app favicon appear in the major modern and legacy browsers.
Temporal API Time Zones: Convert Times
Temporal API time zones: how you can use the new JavaScript Temporal API to convert a time instant from one time zone to another.
Temporal API Cheat Sheet: Quick Guide to new JS API
Temporal API Cheat Sheet: a quick guide to new JavaScript Temporal API including code snippets and example use cases.
Astro JS Disable Telemetry: stop Astro Data Collection
Astro JS telemetry disable: how you might address surveillance capitalism concerns by disabling data collection on the Astro CLI.