Recipe Ideas 🧑‍🍳

[delucis]

What’s cookin’ docs?

Use this discussion to share ideas for new “Recipes” that you’d like to see added to Docs. (Or recipes you’d like to write!)

What’s a recipe?

Recipes are step-by-step how-to guides for accomplishing a specific task in Astro. Check out our full guide to writing recipes.

How many recipes can I suggest?

As many as you want! If possible, use a separate post for each idea. This will let people vote for them one by one.

See a suggestion you like?

Upvote it so we know! ⬆️

[delucis]

How to make light/dark themes with Astro?

[xijaja]

我知道的方法虽然可以实现，但那非常麻烦。

[hippotastic]

我知道的方法虽然可以实现，但那非常麻烦。

Google Translation for anyone like me who can't read the original comment: "The method I know can be done, but it is very troublesome."
(Which would have been a very fitting reply to the i18n recipe idea as well 😄)

[tony-sull]

Oh I have a few good examples of this! Avoiding a flash on page load is always the trick, I'll see if I can boil it down to a simple recipe example

[sarah11918]

✅ Completed! Add i18n feature recipe

[hippotastic]

How to implement a contact form in Astro

[hippotastic]

Note that while we do have a forms example here, we are not using the term "contact form" anywhere, which is what I searched for: https://docs.astro.build/en/recipes/build-forms-api/

Also, this example does not actually send e-mails or any other form of notification to the website owner, which is usually what people are looking for in contact forms.

[sarah11918]

Forms is a great example!

[hippotastic]

Can we find a free service or backend library that is able to turn these form submissions into e-mails to the site owner?

[hippotastic]

How to implement search/filtering of structured content in Astro? (There could be one example using SSR, and one that builds a search index on the server and passes it to a framework component that does the searching/filtering live on the client)

[sarah11918]

What do you think about something like what we have in docs for the deploy guides, like filtering SSR or SSG deployment options?

[hippotastic]

How to load data from MongoDB into Astro

[dsomel21]

How to open and close a modal? I did one with Nanostores. I can possibly write one if you review the code and think my approach is good.

[christophermickle]

Oh! I can totally do this :D

[wassfila]

I did one with custom events, possible too.

[tony-sull]

+1 on custom events! We also might finally be at a point where the <dialog> element is actually usable in modern browsers 🤞

[sarah11918]

So many peeps offering this one! Remember, we also have "Community Recipes" so if you do write something on your own blog, we can link to it! Make sure to consult our RECIPES.md in the docs repo for guidelines, if you're unsure what kind of articles we link to!

[teinett]

Did you try headless UI components? Example: Dialog from Radix UI

[hippotastic]

How to allow user comments on my blog posts

[sarah11918]

Someone was just asking about this yesterday! I know disqus is popular, but perhaps overkill. I use giscus, but that requires commenters to have a GitHub account. Good for tech blogs, but maybe less accessible in general.

Anyone have any thoughts on good commenting systems to use in a recipe?

[sasoria]

How to set up micro-frontends with EcmaScript Modules. I've written an article about it with a code example on GitHub. Happy to contribute with anything!

[sasoria]

How to get dependencies from esm.sh. I've made an example here.

[christophermickle]

How to get Firebase and Firestore up and running for an Astro Project.

[sarah11918]

I think @kevinzunigacuellar is working on some examples right now!

[kevinzunigacuellar]

Yeah, so far I have authentication set up. Feel free to take a look https://github.com/kevinzunigacuellar/astro-firebase

[eddiek50]

How to use Material UI components (Emotion) with Astro

[delucis]

This one could be tricky at the moment. I don't believe we support Emotion currently: withastro/astro#4432

[sarah11918]

✅ We now have a guide page for Sentry! 🥳

[sarah11918]

✅ We now have a Supabase guide page with the above tutorial linked as a community recipe. 🥳

[sarah11918]

• how to work with cookies and cookies notice for GDPR and CCPA laws. How to load partytown 3rd party scripts only when cookies are accepted.

[sarah11918]

• how to use i18n for content consumed from API

[sarah11918]

3 level dynamic routes optimization: My dynamic routes look like this /[type]/[provider]/[slug] and every level reads the same json file, how can I read json file once and generate all these pages (currently it reads every level)

Kapa AI spit out something like this:

---
import Product from '../components/Product.astro';
import Store from '../components/Store.astro';
import Handbook from '../components/Handbook.astro';

const { slug } = Astro.request.params;
const { title, text } = Astro.props;
---

<html>  
  <head>    
    <title>{title}</title>  
  </head>  
  <body>    
    {slug.length === 0 && <Store title={title} text={text} />}
    {slug.length === 1 && slug[0] === 'products' && <Product title={title} text={text} />}
    {slug.length === 2 && slug[0] === 'products' && slug[1] === 'astro-handbook' && <Handbook title={title} text={text} />}
  </body>
</html>

In this example, Store, Product, and Handbook are Astro components that represent different UIs for different levels of your route. You can replace these with your own components.
Remember to import the components at the top of your Astro file. The slug parameter is an array that contains the parts of your route. You can check the length of the slug array to determine the depth of your route and render different components accordingly.

[sarah11918]

How to set a global variable, sitewide. I want to set my website name as a variable, so I can refer to it as {brand} instead of typing it out every time. How do I do this?

[sarah11918]

Is there a way to render Jupyter notebooks with Astro? I have a .ipynb file, and I'd like to render it to HTML.

[sarah11918]

Optimal Filter + List I have a list of items that I want to make filterable by putting an interactive filter above. How would I do this optimally? Generally I'd like to SSG this page and sent as little javascript to the client as possible

[sarah11918]

An example of using Astro.cookies in combination with manipulating the cookies from a framework (e.g. React) component.

[sarah11918]

Creating a global toggle I'll create a button for this website labeled "Zen Mode". When this button is clicked, I want to display an alternate rendering for the site, across all pages. I also want to store this state in a cookie. How should I approach this?

Kapa spit out:

<button id="zenModeToggle">Zen Mode</button>

<style>
  /* Add your CSS for Zen Mode and normal mode here */
</style>

<script is:inline>
  const mode = (() => {
    if (typeof localStorage !== 'undefined' && localStorage.getItem('mode')) {
      return localStorage.getItem('mode');
    }
    return 'normal';
  })();

  if (mode === 'normal') {
    document.documentElement.classList.remove('zen');
  } else {
    document.documentElement.classList.add('zen');
  }

  window.localStorage.setItem('mode', mode);

  const handleToggleClick = () => {
    const element = document.documentElement;
    element.classList.toggle("zen");

    const isZen = element.classList.contains("zen");
    localStorage.setItem("mode", isZen ? "zen" : "normal");

    // Set a cookie for the current mode
    Astro.cookies.set("mode", isZen ? "zen" : "normal");
  }

  document.getElementById("zenModeToggle").addEventListener("click", handleToggleClick);
</script>

[delucis]

A community member built a Starlight plugin to add a feature like this to Starlight sites: https://github.com/trueberryless/starlight-view-modes

[sarah11918]

import images as blob. Making an endpoint, and would like to return a Response. I have a folder with a list of icons. Is it possible to import.meta.glob these images somehow so that I can return an image from the list as a blob in my endpoint?

[sarah11918]

Global Fetch Headers How do I apply a bearer token to all my fetch requests globally?

[sarah11918]

Cookie button How can I make a button that sets a cookie?

Kapa AI spit out:

<button id="setCookie">Set Cookie</button>

<script>
  const button = document.querySelector('#setCookie');
  button.addEventListener('click', () => {
    Astro.cookies.set('key', 'value');
  });
</script>

In this example, when the button with the id setCookie is clicked, a cookie with the key key and the value value is set.
Remember that Astro.cookies.set() method can also accept an options object as a third argument, which allows you to customize how the cookie is serialized. For example, you can set the maxAge or httpOnly options among others. You can find more details about these options in the Astro documentation.
Please note that this code should be executed in a server-side context, as Astro.cookies is only available in server-side rendering mode.

[sarah11918]

Seed database I have a csv file that I would like to seed my Astro DB with. How to do this?

[sarah11918]

Add data to nanostores with form action Hello, how can I add data to a nanostores atom from my frontmatter using form actions?

Discord ai support thread here: https://discord.com/channels/830184174198718474/1248682440512241718

[sarah11918]

Using SVG icons with the <Image> component and/or in Markdown

e.g. How can I use an SVG icon inside an Image object? Say I have a collection of markdown files, where on the frontmatter I place the SVG image's path. When creating the object which will render each element of the collection, I want to use the object with the SVG image path, is this possible?

[sarah11918]

Deploy vercel: A function of my application downloads files from an S3 bucket and stores them in a temporary folder. It works locally but in production it gives me an error. Is there a possibility of creating this folder in production?

[sarah11918]

Starlight supports a built-in theme switcher for users to decide using light or dark mode. If I have a picture that requires to be displayed differently in light/dark modes, how do I achieve this?

From Chris:
There is although it’s not fantastic, basically include the two variants and then use the light:sl-hidden class name on the dark one, and dark:sl-hidden on the light one.
We use this internally in a couple of places because unfortunately colour scheme support in doesn’t work in Safari (does in all the other browsers…)

[sarah11918]

recipe for analyzing bundle size

From the linked issue:

When using client-side JavaScript libraries, it is important to keep track of how much they will increase the final js bundle size. Knowing this, we can optimize our page performance by potentially removing, or lazy-loading our client-side code. An official guide on how to analyze/visualize our page's js budle would be super helpful to do this.

For reference, some other frameworks have guides on how to do this:

• https://nextjs.org/docs/pages/building-your-application/optimizing/package-bundling#analyzing-javascript-bundles
• https://nuxt.com/docs/api/nuxt-config#analyze
• https://remix.run/docs/en/main/guides/performance#bundle-analysis