pagefind_dcd{"url":"/posts/astro-paper-v5/","content":"AstroPaper 5.0 8 Mar, 2025 | Edit page At last, the long-awaited AstroPaper v5 is finally here. AstroPaper v5 keeps the same minimal & clean look, but comes with significant updates under the hood. Table of contents. Open Table of contents Major Changes Upgrade to Astro v5 #455. Tailwind v4. Remove React + Fuse.js in favor of Pagefind search. Updated import alias. Move to pnpm. Replace icons/svg with Astro’s Svg Component. Separate Constants and Config. Other notable changes. Outtro. Major Changes. Upgrade to Astro v5 #455. AstroPaper now comes with Astro v5, bringing all the new features and improvements that come with it. Tailwind v4. AstroPaper has been upgraded to Tailwind v4, which includes many style changes under the hood. The tailwind.config.js file has been removed, and now all the configuration is located within the src/styles/global.css file. Typography-related styles have been extracted and moved to src/styles/typography.css. Due to the new behavior in TailwindCSS v4, styles inside <style> blocks within components have been removed and replaced with inline Tailwind classes. Additionally, the color palette across the UI has been updated. The new palette now consists of only five colors: :root, html[data-theme=\"light\"] { --background: #fdfdfd; --foreground: #282728; --accent: #006cac; --muted: #e6e6e6; --border: #ece9e9; } html[data-theme=\"dark\"] { --background: #212737; --foreground: #eaedf3; --accent: #ff6b01; --muted: #343f60bf; --border: #ab4b08; } Remove React + Fuse.js in favor of Pagefind search. In previous versions, React.js and Fuse.js were used for search functionality and OG image generation. In AstroPaper v5, React.js has been removed and replaced with Pagefind, a static site search tool. The search experience is almost identical to previous versions, but now all contents, not just titles and descriptions, are indexed and searchable, thanks to Pagefind. The idea of using Pagefind in dev mode was inspired by this blog post. Updated import alias. The import alias has been updated from @directory to @/directory, which means you now have to import like this: --- import { slugifyStr } from \"@/utils/slugify\"; import IconHash from \"@/assets/icons/IconHash.svg\"; --- Move to pnpm. AstroPaper has switched from npm to pnpm, which offers faster and more efficient package management. Replace icons/svg with Astro’s Svg Component. AstroPaper v5 replaces inline SVGs with Astro’s experimental SVG Component. This update reduces the need for predefined SVG code in the socialIcons object, making the codebase cleaner and more maintainable. Separate Constants and Config. The project structure has been reorganized. The src/config.ts file now only contains the SITE object, which holds the main configuration for the project. All constants, such as LOCALE, SOCIALS, and SHARE_LINKS, have been moved to the src/constants.ts file. Other notable changes. The blog posts directory has been updated from src/content/blog/ to src/data/blog/. Collection definitions file (src/content/config.ts) is now replaced with src/content.config.ts. Various dependencies have been upgraded for improved performance and security. Removed IBM Plex Mono font and switched to the default system mono font. The Go back button logic has been updated. Now, instead of triggering the browser’s history API, AstroPaper v5 uses the browser session to temporarily store the back URL. If no back URL exists in the session, it will redirect to the homepage. There are some minor styles and layout changes as well. Outtro. AstroPaper v5 brings many changes, but the core experience remains the same. Enjoy a smoother, more efficient blogging platform while keeping the clean and minimal design that AstroPaper is known for! Feel free to explore the changes and share your thoughts. As always, thank you for your support! If you enjoy this theme, please consider starring the repo. You can also support me via GitHub Sponsors or you can buy me a coffee if you’d like. However, of course, these actions are entirely optional and not required. Enjoy! Sat Naing. Edit page release Back To Top Share this post on: Share this post via WhatsApp Share this post on Facebook Share this post on X Share this post via Telegram Share this post on Pinterest Share this post via email","word_count":653,"filters":{},"meta":{"image":"/_astro/AstroPaper-v5.BKHVI1Ox_1txTYb.webp","image_alt":"AstroPaper v5","title":"AstroPaper 5.0"},"anchors":[{"element":"article","id":"article","text":"","location":8},{"element":"h2","id":"table-of-contents","text":"Table of contents","location":34},{"element":"h2","id":"major-changes","text":"Major Changes","location":79},{"element":"h3","id":"upgrade-to-astro-v5-455","text":"Upgrade to Astro v5 #455","location":81},{"element":"h3","id":"tailwind-v4","text":"Tailwind v4","location":103},{"element":"h3","id":"remove-react--fusejs-in-favor-of-pagefind-search","text":"Remove React + Fuse.js in favor of Pagefind search","location":215},{"element":"h3","id":"updated-import-alias","text":"Updated import alias","location":294},{"element":"h3","id":"move-to-pnpm","text":"Move to pnpm","location":328},{"element":"h3","id":"replace-iconssvg-with-astros-svg-component","text":"Replace icons/svg with Astro’s Svg Component","location":346},{"element":"h3","id":"separate-constants-and-config","text":"Separate Constants and Config","location":382},{"element":"h2","id":"other-notable-changes","text":"Other notable changes","location":424},{"element":"h2","id":"outtro","text":"Outtro","location":522},{"element":"div","id":"btt-btn-container","text":"Back To Top","location":616},{"element":"span","id":"progress-indicator","text":"","location":616}]}