Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
my-awesome-astro
My awesome list for Astro
https://github.com/BryceRussell/my-awesome-astro
- Join the Discord
- Website - started/) | [Integrations](https://astro.build/integrations/) | [Themes](https://astro.build/themes/) | [Blog](https://astro.build/blog/) | [Showcase](https://astro.build/showcase/)
- Repository
- Templates - speedometer.netlify.app/) | [VS Code Theme](https://marketplace.visualstudio.com/items?itemName=astro-build.houston)
- Discord
- Using Custom Fonts
- Fontsource - Self-host Open Source fonts in neatly bundled NPM packages, faster than Google Fonts
- Fontsource’s catalog - Catalog of all fonts supported by Fontsource
- astro-google-fonts-optimizer - Component, downloads the CSS of a Google Fonts stylesheet and inlines it directly into the page, inspired by [NextJS font optimization](https://nextjs.org/blog/next-10-2#automatic-webfont-optimization)
- astro-fonts-next - Integration, applies [NextJS font optimization](https://nextjs.org/blog/next-10-2#automatic-webfont-optimization) to Google Fonts
- astro-icon - (Un)Official `<Icon>` component powered by [Iconify](https://iconify.design/)
- Icon set reference - List of available icons
- Icônes - Tool for exploring and downloading icons
- Iconify Components - Official [Iconify](https://iconify.design/) components
- astro-feather-icons - Icon components for [Feather icons](https://feathericons.com/)
- astro-heroicons - Icon components for [Heroicons](https://heroicons.com/)
- @astropub/icons - Icon components for [Radix icons](https://icons.radix-ui.com/)
- phosphor-astro - Icon components for [Phosphor icons](https://phosphoricons.com/)
- astro-svg-loaders - Icon components for [svg loading icons by @SamHerbert](https://github.com/SamHerbert/SVG-Loaders)
- astro-emoji
- astro-seo - (Recommended) Most popular `<SEO>` component
- @astrolib/seo - Based on [NextSEO](https://github.com/garmeeh/next-seo)
- astro-seo-meta - Minimal SEO component
- simple-astro-seo - Minimal SEO component
- astro-seo-metadata - Minimal SEO component
- Open Graph Protocol
- satori-html - Create og images using html strings and [satori](https://github.com/vercel/satori)
- Dynamic OG images using Satori and Astro Server Endpoints - Rumaan K
- Recreating Vercel's OG Image Generation - Otterlord
- @vercel/og - Vercel's official open graph image generation using [satori](https://github.com/vercel/satori)
- Adding Vercel og:image generation to Astro project with Edge functions - Thomas Ledoux
- astro-og-canvas - This package provides utlities for generating OpenGraph images
- astro-og-image - Screenshot pages as open graph images
- Tool for previewing open graph images and meta tags
- @astrojs/image - Official image optimization integration
- astro-imagetools - Community image optimization integration
- astro-eleventy-img - Generate images using [eleventy-img](https://github.com/11ty/eleventy-img)
- astro-imagekit - An opinionated toolset for using ImageKit.io with your Astro website
- Siena - A Rehype plugin for Astro that makes working with images inside markdown easier
- astro-m2dx - Resolve relative image references in MDX files, and tons more
- astro-md-image-integration - Use images outside of `/src`, [example](https://github.com/withastro/roadmap/discussions/334)
- Fetching Remote Markdown
- astro-remote - (Recommended) SSR, render remote markdown content in Astro with full control over the output including adding components. Does not inherit markdown setttings from Astro config
- @astropub/md - (Recommended) SSG, render markdown using settings defined in Astro config
- @astrojs/markdown-remark - SSG, Astro's built in markdown rendering library, exports a `renderMarkdown()` utility
- @astrojs/markdown-component - SSG, Official `<Markdown>` component
- Global Styling - Use global vanilla css styling
- @tailwindcss/typography - Official tailwind plugin for styling markdown
- Tailwind @apply directive - Create global tailwind styles using @apply directive
- rehype-add-classes - Markdown plugin that lets you add classes(tailwind) to selectors
- astro-cube - Starter template for [CUBE CSS](https://cube.fyi/)
- Tailwindcss - [Documentation](https://tailwindcss.com/docs/configuration)
- UnoCSS - [Documentation](https://uno.antfu.me)
- Vanilla Extract - [Documentation](https://vanilla-extract.style/documentation/getting-started)
- Astro Vanilla-Extract Styling: CSS in TypeScript
- Windi CSS - [Documentation](https://windicss.org/guide/)
- Stylify - [Documentation](https://stylifycss.com/docs/get-started)
- Stylify CSS: Automagic CSS bundles splitting into CSS layers in Astro.build
- Client Side Scripting Guide
- UI Frameworks
- `<script>`
- Web components
- astro-xelement - Create web components natively in Astro
- SolidJS
- Preact
- Lit
- Svelte
- Vue
- React
- AlpineJS
- Size comparison of UI Frameworks
- Sharing State
- nanostores - Currently reccomended by Astro, can be used between React, React Native, Preact, Vue, Svelte, and vanilla JavaScript
- @nanostores/persistent - Persist nanostores between pages using localStorage
- How to manage state in Astro applications? - CodeWithLuke
- Svelte stores - Share state between Svelte components
- SolidJS signal - SolidJS signals can be used in the frontmatter of `.astro` files
- Custom Event - Use vanilla JavaScript to send custom events
- Pagefind
- Add Searching To Your Astro Static Site - Otterlord
- Pagefind is quite a find for site search - Bryce Wray
- Sweeter searches with Pagefind - Bryce Wray
- @lyrasearch/plugin-astro - Astro integration for [Lyra](https://lyrajs.io/) search
- astro-lunr - Astro integration for [Lunr](https://github.com/siverv/astro-lunr) search
- Client-Side Search -Barnabas Kendall
- fuse.js - Powerful lightweight fuzzy-search library with zero dependencies
- Writing a Fuzzy Search Component With Preact and Fuse for Astro - Lloyd Atkinson
- How to Create an Astro Search component - Daniel Diaz
- astro-form-actions - SSR, utility for handling form submissions within Astro
- @astro-reactive/form - Generate a dynamic form based on your data, and modify programmatically
- @astro-reactive/validator - Easily set up validators for your forms
- Web3Forms - Receive form submissions directly in your email inbox without any server or back-end code
- Netlify Forms - Just add the `netlify` attribute to any form and everything gets wired up automatically
- What is RSS?
- @astrojs/rss - Official integration for generating a RSS feed
- @astrojs/sitemap - Automatically generates a sitemap based on your routes when you build your project
- Astro Sitemaps: Add Post and Page XML Sitemaps
- Connecting a CMS
- @storyblok/astro - Astro integration for [Storyblok](https://www.storyblok.com/)
- Announcing @storyblok/astro
- astro-sanity - Astro integration for [Sanity](https://www.sanity.io/)
- Integrate Astro and Sanity with our new Astro Integration! 🚀 - Little Sticks
- Playing around with Sanity.io
- astro-netlify-cms - Astro integration for [Netlify CMS](https://www.netlifycms.org/)
- Astro - Starter Ghost - A starter template to build super fast websites with [Ghost](https://ghost.org/docs/) and Astro
- astro-snipcart - Astro integration for [Snipcart](https://snipcart.com/)
- astro-i18next - Astro integration for [i18next](https://github.com/i18next/i18next)
- astro-i18n - A TypeScript-first internationalization library
- astro-compress - Compresses CSS, HTML, JSON, JavaScript, Images, and SVGs
- astro-critters - Automatically inline the critical CSS
- astro-html-minifier - HTML minifier for Astro
- astro-purgecss - Integration for [purgecss](https://purgecss.com/) helps you remove unused CSS rules from your final astro bundle.
- Jampack - SSG, post build tool for optimizing static websites
- Netlify asset optimization
- Control your asset optimization settings from `netlify.toml`
- astro-auth - Astro integration for Auth.js
- Lucia - Simple yet flexible user and session management library, provides an abstraction layer between your app and your database
- @vite-pwa/astro - Astro integration for creating PWAs with [vite-pwa](https://vite-pwa-org.netlify.app/)
- astro-webmanifest - Generates a web application manifest, favion, icons
- @tanstack/router - TanStack Router
- Are you an @astrodotbuild fan? Check out the latest @tan_stack Router beta working in Astro!
- @solidjs/router - Router for SolidJS
- Did you know you can slap an SPA inside @astrodotbuild?? It's so easy! Let's see the `@solid_js router` in action, with SSR and route animations to boot 🙌
- QGP - HMR for SPA routes/pages
- astro-spa - Astro SPA is a SPA component/library that is built using Astro components. Includes support for animations, caching, containerization, local link detection, prefetching, progress bar, and more. 1.2kb(min+gzipped)
- @11ty/eleventy-fetch - Fetch network resources and cache them so you don’t bombard your API (or other resources)
Programming Languages
Keywords
astro
18
astro-component
2
seo
2
javascript
2
typescript
2
css
2
i18n
2
inline-css
2
critters
2
critical-css
2
sanity
1
astro-integration
1
windicss
1
vite-plugin
1
engine
1
atomic-css
1
no-javascript
1
layout
1
fluid-css-properties
1
cubecss
1
minify
1
rehype-plugin
1
rehype
1
html
1
sharp
1
terser
1
phosphoricons
1
phosphor
1
astrojs
1
feather-icons
1
svg
1
icon
1
nextjs
1
integration
1
html-minifier-terser
1
csso
1
compression
1
compress
1
fetch
1
eleventy
1
cache
1
authentication
1
localization
1
library
1
internationalization
1
l10n
1
i18next
1
image
1
snipcart-api
1
snipcart
1