Astro Micro 🔬
Back to blog
•
3 min read

Everything new in Astro Micro

Table of Contents

Pagefind is a search library for static websites. Micro uses Sergey Shishkin’s astro-pagefind integration. This integration simplifies development and does not require any changes to the default build script.

Press / or CTRL + K to open the search dialog. For Mac users, ⌘ + K can also be used. To dismiss the search dialog, press Esc or click on an area outside the component.

Build and develop

🚨

The site must be built at least once so Pagefind can index the content.

# Pagefind must index the site to function
npm run build

When developing you can continue to use npm run dev and Pagefind will use the index from the last available build.

Giscus comments 💬

Giscus leverages Github discussions to act as a comments system. To get Giscus working on your own website, see here.

Callout component 🆕

💡

Adipisicing et officia reprehenderit fugiat occaecat cupidatat exercitation labore consequat ullamco nostrud non.

ℹ️

Adipisicing et officia reprehenderit fugiat occaecat cupidatat exercitation labore consequat ullamco nostrud non.

⚠️

Adipisicing et officia reprehenderit fugiat occaecat cupidatat exercitation labore consequat ullamco nostrud non.

🚨

Adipisicing et officia reprehenderit fugiat occaecat cupidatat exercitation labore consequat ullamco nostrud non.

UI enhancements 🎨

  • Elements are styled and animate on focus
  • Increased contrast in light mode
  • Active theme is indicated by theme buttons
  • Separate syntax highlight themes for light and dark mode
  • Code blocks have a copy button
  • Add pagination to the bottom of blog posts
  • Create 404 page
  • Add ToC component to posts

Other changes

  • Change fonts to Geist Sans and Geist Mono
  • Switch base color from “stone” to “neutral”
  • Change formatted date to use “long” option for month
  • Minor spacing changes throughout
  • Remove “work” collection and components
    • If desired, you can get the code from Astro Nano
  • Slightly increased link decoration offset
  • Slightly sped-up animations
  • Reversed animation
  • Ensure posts use an h1 tag for post titles
  • Tweaked typography

Issues ⚠️

  • Fixed by blopker: Pagefind requires a refresh to function when ViewTransitions is enabled
  • Fixed by blopker: ToC links are obscured by Header when scrolled to
  • Fixed by cgranier: Pagination links advance by slug/folder
  • Fixed by cgranier: Hides Table of Contents when there are no headings
  • Fixed by arastoonet: Fix typo in README
Getting started