# Maintainer's Project Showcase ## Draft blog post content for this Each week in our community calls, and in our Discord `#showcase` channel, we highlight and celebrate all the things our community builds with Astro. Not everyone can make the weekly call, so we started posting weekly recaps in our `#announcements` channel. We also now post monthly blog posts so you'll never miss the best new sites, tools and articles made by and for our community. We wanted to take this opportunity to recognize a very special kind of community contribution: the personal experiments and side projects that our own maintainers build to make *working on* and *contributing to* Astro as great an experience as we hope building with Astro is for you. Maintaining an open source project means spending a lot of time in our code editors, in PRs and on GitHub, looking things up in docs, keeping track of work-in-progress, and collaborating with others. We'd like to showcase some of these tools we've built for our *own* use as we, and our community contributors, build Astro for you. Some of these make routine tasks easier, and some just make them more fun... because that's part of the point, too! ## Sarah - Astro Docs Docs Name (Discord username): Sarah Rainsberger(sarah11918) GitHub URL: https://github.com/sarah11918 Project Name: Astro Docs Docs (AD²) Project Link: https://astro-docs-docs.netlify.app/ Project brief description (1-2 sentences): > Doc'ing Astro Docs! An entire site full of guides and resources for contributing to Astro Docs. > Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > Sarah has a Starlight problem! This project started as an easier way to organize and write than updating our existing guides as plain Markdown files in the GitHub repo. Everytime I need to organize information, I create a new Starlight project. Upload an image, logo or screenshot to highlight what's cool about your project: ![add](https://hackmd.io/_uploads/B1rTy4KBa.png) ----- ## Elian - Raycast Extension Name (Discord username): Elian Van Cutsem (ElianCodes) GitHub URL: https://github.com/eliancodes Project Name: Search Astro Documentation Raycast Extension Project Link: https://www.raycast.com/ElianCodes/search-astro-docs Project brief description (1-2 sentences): > Reach and search the Astro Documentation in an instant right from Raycast without any hassle. Supports all languages that Astro Documentation supports & has all sidebar links that Astro Documentation has. Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > As a docs editor, I found myself constantly having to manually navigate to Astro Documentation and searching for the right pages. I use Raycast all the time, so it seemed like a good solution to create an extension that sped up my docs writing & reviewing process. Upload an image, logo or screenshot to highlight what's cool about your project: ![Astro Documentation](https://hackmd.io/_uploads/rJ6PWmq4T.jpg) ----- ## Marijn - Houston Bot Name (Discord username): Marijn Kneppers (mandar1jn) GitHub URL: https://github.com/mandar1jn Project Name: Houston Bot Project Link: [discord](https://astro.build/chat)/[github](https://github.com/withastro/houston-discord) Project brief description (1-2 sentences): > Let the bot do it for you! From creating a PTAL request to browsing the docs, Houston Bot is there to make the life of everyone working on/with astro easier. Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > As a support squad member, I got annoyed with having to switch over to a browser to search the docs, so I wrote a bot with a `/docs` command which allowed me to browse the docs from within discord. After people noticed my work on the bot, some maintainers requested a `/ptal` (Please Take A Look) command to have an easier overview of the status of a pull request. > Fun fact: a `/ptal` command had been discussed a year earlier, before I even joined the server, but it never got far. I only found out about this a while after I independently developed the command. Upload an image, logo or screenshot to highlight what's cool about your project: ![image](https://hackmd.io/_uploads/Hy0EzQ5Np.png) ----- ## HiDeoo - Starlight i18n Name (Discord username): HiDeoo (hideoo) GitHub URL: https://github.com/HiDeoo Project Name: Starlight i18n Project Link: https://marketplace.visualstudio.com/items?itemName=hideoo.starlight-i18n - https://open-vsx.org/extension/hideoo/starlight-i18n Project brief description (1-2 sentences): > Visual Studio Code extension to easily translate [Starlight](https://starlight.astro.build/) documentation pages using the built-in [support for multilingual sites](https://starlight.astro.build/guides/i18n/) and [git](https://git-scm.com/). > Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > Being able to choose a supported language to translate from a Starlight configuration in a workspace repo and having side-by-side editors with the missing changes and the translated page seemed like a good idea and I have been using it for all the translations I have submitted to the Starlight documentation so far. Upload an image, logo or screenshot to highlight what's cool about your project: ![Demo of the Starlight i18n extension](https://i.imgur.com/VrpRCXK.gif) ----- ## Hippo - Expressive Code Name (Discord username): Tibor Schiemann (Hippotastic) GitHub URL: https://github.com/hippotastic Project Name: Expressive Code Project Link: https://github.com/expressive-code/expressive-code Project brief description (1-2 sentences): > Expressive Code is an engine for presenting source code on the web, aiming to make your code easy to understand and visually stunning. > On top of accurate syntax highlighting powered by the same engine as VS Code, Expressive Code allows you to annotate code blocks using text markers, diff highlighting, code editor & terminal window frames, and more. > Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > After I initially built these features into Astro Docs, users kept asking us how they could use our code snippets in their own projects. This led me to create Expressive Code as a standalone project, which actually became my first published set of NPM packages! I'm really happy that it's already being used by Astro Docs, Starlight, and many individual websites. Upload an image, logo or screenshot to highlight what's cool about your project: ![Demo of Expressive Code features](https://hackmd.io/_uploads/HJ9ibSqNp.png) ----- ## Kevin / Otterlord - CoAuth Generator Name (Discord username): Kevin (kevinzunigacuellar) and Otterlord (TheOtterlord) GitHub URL: https://github.com/kevinzunigacuellar/coauthor-generator Project Name: Co-author generator Project Link: https://coauthor.kevinzunigacuellar.com/ Project brief description (1-2 sentences): > Create co-author messages to credit contributors :purple_heart:. This tool collects PR participants and creates a formatted co-author string for git commits. > Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > At Astro, we highly value acknowledging our contributors. Our previous method involved a bit of 'stacking' (not the type you're thinking of!) by searching for your git signature on GitHub. Occasionally, this process took longer than the actual PR, but it was a worthwhile effort to show appreciation to our community. Upload an image, logo or screenshot to highlight what's cool about your project: ![coauthor.kevinzunigacuellar.com_](https://hackmd.io/_uploads/S1Km6w9NT.png) ----- ## Alex - Astropix (Astro Pictures) Name (Discord username): Alexander Niebuhr (alexanderniebuhr) GitHub URL: https://github.com/alexanderniebuhr Project Name: Astropix (Astro Pictures) Project Link: https://docs.a.stro.picutres Project brief description (1-2 sentences): > Brand-new integration which adds a external remote image service to `astro:assets`. You Images will get a remote url which optimizes them, similar to Cloudinary but for free, if you have a Astro Project. It works with every Adapter and Hosting Provider. Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > External Remote Image Optimization is either complex to setup or costs too much. Making this available for all Astro Users for free, makes the Image story a lot better. Building such a Service is not trivial, the most complex thing to get right is Authorization. How to make sure only Astro users can use it for free and having a fair-use policy in place. Upload an image, logo or screenshot to highlight what's cool about your project: > . ----- ## Erika - Astro Issues Name (Discord username): Erika (princesseuh) GitHub URL: https://github.com/Princesseuh/astro-issues Project Name: Astro Issues Project Link: https://astro-issues.vercel.app/ Project brief description (1-2 sentences): > A dashboard showing stats about all the issues on every Astro repo. The idea is that by being able to visualize the total issue count as a graphical thing, it'll "gamify" the act of bringing down the issue count. > Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > Docs and Starlight got pressured into triaging their issues, bringing down our total issue count by 50 only a week or so after I released the website Upload an image, logo or screenshot to highlight what's cool about your project: ![image](https://hackmd.io/_uploads/HyZObOQSa.png) ----- ## Otterlord - Semver Calculator Name (Discord username): Otterlord GitHub URL: https://github.com/TheOtterlord/semver Project Name: Phlat Houston Project Link: https://semver.otterlord.dev/ Project brief description (1-2 sentences): > View NPM package versions, and calculate a semver range. Useful for calculating ranges for compatible peer dependencies. > Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > You can view the usage across packages on the [public Plausible dashboard](https://home.otterlord.dev/semver.otterlord.dev/?goal=Package) Upload an image, logo or screenshot to highlight what's cool about your project: ![image](https://hackmd.io/_uploads/B1Skd2Er6.png) ----- <!-- ## Otterlord - Phlat Houston Name (Discord username): Otterlord GitHub URL: https://github.com/TheOtterlord/astro-houston-ph Project Name: Phlat Houston Project Link: https://starlight.astro.build/ph Project brief description (1-2 sentences): > A fun visual, tracking the vote count during Starlight's [product hunt](https://www.producthunt.com/posts/starlight-by-astro). As the vote count ticked up, Houston grew to fill the screen. > Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > We live streamed this in the Astro Discord during the day of the product launch! Upload an image, logo or screenshot to highlight what's cool about your project: ![image](https://hackmd.io/_uploads/H1HoBumHa.png) ----- --> ## Nate + Chris - Astro Automation Name (Discord username): Nate Moore (nmoodev) and Chris Swithinbank (swithinbank) GitHub URL: https://github.com/natemoo-re, https://github.com/delucis Project Name: Astro Automation Project Link: https://github.com/withastro/automation Project brief description (1-2 sentences): > A centralized repository for reusable GitHub Action workflows. > These actions help us automate common workflows across many different repositories in the [`withastro`](https://github.com/withastro) GitHub organization. > The major benefit of having common workflows in a single location is that maintenance happens in one spot and is automatically rolled out to all of our repositories. Centralized workflows also make it much easier to set up automated workflows for brand new repositories. Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > When we first started building Astro, we had one central [`astro`](https://github.com/withastro/astro) monorepo for all of our code and documentation. This made it easy to share tooling and configuration but it became increasingly difficult to collaborate on many different focus areas as the project grew. > While copying and pasting workflow files works for a small handful of repositories, the number of repositories began to grow in the summer of 2023. > The automation repository is used by all of our repositories to share merge notifications in our Discord ([`congratsbot`](https://github.com/withastro/automation/blob/main/.github/workflows/congratsbot.yml)), format our source code with Prettier ([`format`](https://github.com/withastro/automation/blob/main/.github/workflows/format.yml)), and automate issue labelling ([`issue-opened`](https://github.com/withastro/automation/blob/main/.github/workflows/issue-opened.yml) and [`issue-labeled`](https://github.com/withastro/automation/blob/main/.github/workflows/issue-labeled.yml)) Upload an image, logo or screenshot to highlight what's cool about your project: ![Discord message from `@congratsbot` that says 👏 Merged! Nate Moore: Add @astrojs/upgrade package, Sarah Rainsberger with the assist! 💪](https://hackmd.io/_uploads/rksFTd7S6.png) ----- ## Nate - Houston Theme for VS Code Name (Discord username): Nate Moore (nmoodev) GitHub URL: https://github.com/natemoo-re Project Name: Houston Theme Project Link: https://github.com/withastro/houston-vscode Project brief description (1-2 sentences): > An Astro-branded Visual Studio Code theme featuring cool blues, minty greens, and soft purples and Astro's mascot Houston. Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > Astro's brand colors were begging to be turned into a syntax highlighting theme. With some adjustments for contrast and legibility, I am quite happy that this little experiment turned out so well. This theme has been downloaded by [12.5K](https://marketplace.visualstudio.com/items?itemName=astro-build.houston) people on the Visual Studio Code marketplace and is the default theme for Astro's [Starlight](https://starlight.astro.build/) documentation framework. Upload an image, logo or screenshot to highlight what's cool about your project: ![image](https://hackmd.io/_uploads/r109RdQSa.png) ----- ## Happydev - Live Astro Compiler Name (Discord username): happydev GitHub URL: https://github.com/moustaphadev Project Name: Live Astro Compiler Project Link: https://live-astro-compiler.vercel.app/ Project brief description (1-2 sentences): > A playground for the Astro compiler that generates insightful previews of the compiled output of Astro components. > Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > Sparked by the struggle of quickly spotting compiler bugs, I built this to save time on issue troubleshooting. Instead of diving straight into writing tests, now we can just toss some code into the playground, check out the output, and easily spoting and showing others what's going wrong — making the whole debugging dance way smoother! Upload an image, logo or screenshot to highlight what's cool about your project: ![image](https://hackmd.io/_uploads/Bkwgx3EBp.png) ----- ## Chris — Astro Badges Name (Discord username): swithinbank GitHub URL: https://github.com/delucis/ Project Name: Astro Badges Project Link: https://astro.badg.es/ Project brief description (1-2 sentences): > Astro Badges celebrates Astro contributors with embeddable images featuring achievements unlocked by GitHub activity in the `withastro` organisation. From [Little Green Bug](https://astro.badg.es/achievements/total-issues/bronze/) to [Constellation Crafter](https://astro.badg.es/achievements/repos-with-merges/gold/), every one of Astro’s almost 3,500 contributors is here! Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > Astro Badges started as a weekend project after I noticed the `badg.es` domain was available. It’s grown a lot since then, including a full redesign, collaborating with Astro’s designer, [`@doodlemarks`](https://astro.badg.es/contributor/doodlemarks/). Probably the most challenging thing about maintaining it is coming up with fun achievement names, although [`@sarah11918`](https://astro.badg.es/contributor/sarah11918/) is always game to workshop them! My favourite recent addition is probably the [SSRsly](https://astro.badg.es/achievements/adapters-merges/silver/) achievement for people working on Astro’s serverless adapters. > > Shout out to [`@Yan-Thomas`](https://astro.badg.es/contributor/Yan-Thomas/), [`@ElianCodes`](https://astro.badg.es/contributor/ElianCodes/), [`@natemoo-re`](https://astro.badg.es/contributor/natemoo-re/), [`@mayank99`](https://astro.badg.es/contributor/mayank99/), [`@torn4dom4n`](https://astro.badg.es/contributor/torn4dom4n/), [`@jacobthesheep`](https://astro.badg.es/contributor/jacobthesheep/), and [`@TheOtterlord`](https://astro.badg.es/contributor/TheOtterlord/) for contributing along the way :raised_hands: ![Astro Badges home page showing contributor and “built with Astro” badges](https://hackmd.io/_uploads/r1b75PvSp.png) ----- Name (Discord username): GitHub URL: Project Name: Project Link: Project brief description (1-2 sentences): > . > Fun fact! about your project (inspiration for it, challenges building it, lucky accidents, notable users/usage): > . Upload an image, logo or screenshot to highlight what's cool about your project: -----