Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

my-awesome-astro

My awesome list for Astro
https://github.com/BryceRussell/my-awesome-astro

Last synced: 4 days ago
JSON representation

What Do I Use...
- If I want to add a font?
  - 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
  - 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
- If I want to add icons?
  - astro-icon - (Un)Official `<Icon>` component powered by [Iconify](https://iconify.design/)
  - 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-emoji
  - Icon set reference - List of available icons
  - Icônes - Tool for exploring and downloading icons
  - Iconify Components - Official [Iconify](https://iconify.design/) components
  - astro-svg-loaders - Icon components for [svg loading icons by @SamHerbert](https://github.com/SamHerbert/SVG-Loaders)
- If I want to add SEO?
  - 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
- If I want to create open graph images?
  - satori-html - Create og images using html strings and [satori](https://github.com/vercel/satori)
  - Open Graph Protocol
  - Dynamic OG images using Satori and Astro Server Endpoints - Rumaan K
  - Recreating Vercel's OG Image Generation - Otterlord
  - 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
  - @vercel/og - Vercel's official open graph image generation using [satori](https://github.com/vercel/satori)
- If I want to add optimized images?
  - astro-imagetools - Community image optimization integration
  - astro-eleventy-img - Generate images using [eleventy-img](https://github.com/11ty/eleventy-img)
  - @astrojs/image - Official image optimization integration
  - astro-imagekit - An opinionated toolset for using ImageKit.io with your Astro website
- If I want to use relative images in my markdown?
  - Siena - A Rehype plugin for Astro that makes working with images inside markdown easier
  - astro-md-image-integration - Use images outside of `/src`, [example](https://github.com/withastro/roadmap/discussions/334)
  - astro-m2dx - Resolve relative image references in MDX files, and tons more
- If I want to render a string of 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
  - Fetching Remote Markdown
  - @astrojs/markdown-remark - SSG, Astro's built in markdown rendering library, exports a `renderMarkdown()` utility
  - @astrojs/markdown-component - SSG, Official `<Markdown>` component
- If I want to style my markdown?
  - @tailwindcss/typography - Official tailwind plugin for styling markdown
  - rehype-add-classes - Markdown plugin that lets you add classes(tailwind) to selectors
  - Global Styling - Use global vanilla css styling
  - Tailwind @apply directive - Create global tailwind styles using @apply directive
- If I want to use a CSS framework?
  - astro-cube - Starter template for [CUBE CSS](https://cube.fyi/)
  - UnoCSS - [Documentation](https://uno.antfu.me)
  - Windi CSS - [Documentation](https://windicss.org/guide/)
  - Tailwindcss - [Documentation](https://tailwindcss.com/docs/configuration)
  - Vanilla Extract - [Documentation](https://vanilla-extract.style/documentation/getting-started)
  - Astro Vanilla-Extract Styling: CSS in TypeScript
  - Stylify - [Documentation](https://stylifycss.com/docs/get-started)
  - Stylify CSS: Automagic CSS bundles splitting into CSS layers in Astro.build
- If I want to add client side interactivity?
  - astro-xelement - Create web components natively in Astro
  - UI Frameworks
  - `<script>`
  - SolidJS
  - Preact
  - Lit
  - Svelte
  - Vue
  - React
  - AlpineJS
  - Size comparison of UI Frameworks
  - Web components
- If I want to share state between components?
  - 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
  - Sharing State
  - 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
- If I want to add the ability to search?
  - astro-lunr - Astro integration for [Lunr](https://github.com/siverv/astro-lunr) search
  - 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
  - Client-Side Search -Barnabas Kendall
  - Writing a Fuzzy Search Component With Preact and Fuse for Astro - Lloyd Atkinson
  - How to Create an Astro Search component - Daniel Diaz
- If I want to handle form submissions?
  - 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
- If I want to add a CMS?
  - astro-sanity - Astro integration for [Sanity](https://www.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
  - Connecting a CMS
  - @storyblok/astro - Astro integration for [Storyblok](https://www.storyblok.com/)
  - Announcing @storyblok/astro
  - Integrate Astro and Sanity with our new Astro Integration! 🚀 - Little Sticks
  - Playing around with Sanity.io
- If I want to add E-Commerce?
  - astro-snipcart - Astro integration for [Snipcart](https://snipcart.com/)
- If I want to add internationalization?
  - astro-i18next - Astro integration for [i18next](https://github.com/i18next/i18next)
  - astro-i18n - A TypeScript-first internationalization library
- If I want to minify my website?
  - 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`
- If I want to add authentication?
  - 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
- If I want to add SPA functionality?
  - @solidjs/router - Router for SolidJS
  - 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)
  - @tanstack/router - TanStack Router
  - Are you an @astrodotbuild fan? Check out the latest @tan_stack Router beta working in Astro!
  - 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
  - @tanstack/router - TanStack Router
  - @tanstack/router - TanStack Router
- If I want to add a RSS feed?
  - What is RSS?
  - @astrojs/rss - Official integration for generating a RSS feed
- If I want to create a sitemap?
  - @astrojs/sitemap - Automatically generates a sitemap based on your routes when you build your project
  - Astro Sitemaps: Add Post and Page XML Sitemaps
- If I want to create a PWA?
  - @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
- If I want to cache API requests?
  - @11ty/eleventy-fetch - Fetch network resources and cache them so you don’t bombard your API (or other resources)
Official Links
- 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)

Programming Languages

TypeScript 20 JavaScript 10 Astro 6 CSS 1 MDX 1

Ecosyste.ms: Awesome

my-awesome-astro

What Do I Use...

If I want to add a font?

If I want to add icons?

If I want to add SEO?

If I want to create open graph images?

If I want to add optimized images?

If I want to use relative images in my markdown?

If I want to render a string of markdown?

If I want to style my markdown?

If I want to use a CSS framework?

If I want to add client side interactivity?

If I want to share state between components?

If I want to add the ability to search?

If I want to handle form submissions?

If I want to add a CMS?

If I want to add E-Commerce?

If I want to add internationalization?

If I want to minify my website?

If I want to add authentication?

If I want to add SPA functionality?

If I want to add a RSS feed?

If I want to create a sitemap?

If I want to create a PWA?

If I want to cache API requests?

Official Links