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

[delucis]

How to build i18n features with Astro? (UI translation, content, language switching and redirects)

[darbyjack]

Hey there! I'd love to see some kind of recipe with being able to use translation systems and pulling them into i18n support. While some people can just clone and modify the files manually, there are tools like https://crowdin.com/ that allow users to go in and suggest / approve translations. These end up syncing back to Github via an integration (they support others too) so you can just use those translated files inside of i18n.

[delucis]

We shipped an i18n recipe today!

https://docs.astro.build/en/recipes/i18n/

[teinett]

Here #2895 (comment) there is mention about language switcher for localizations: /en/about => /fr/about.

Current language switcher changes the language, but skip the page url: /en/about => /fr. It's not good UX for users.

Please, add info to this recipe about case with the same slug for url: /en/about => /fr/about

[artursopelnik]

Thank you for shipping the i18n recipe @delucis. Only a few important functions are currently not documented.

How to switch language between specific pages to get a better UX @teinett and how to hide the default language in the URL.

I did that once. Check out my PR:
#4161

[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

[AbhiPrasad]

Using Astro with Sentry to monitor your errors. We at Sentry have been exploring an official Sentry plugin, but in the meantime having some kind of preliminary docs might be a good step!

Happy to help write something up!

[sarah11918]

Ooh, I don't think we have anything like this! Would absolutely be interested in seeing something for this!

[Lucaskolinger]

How to integrate Supabase with Astro? Maybe also with Authentication.

[sarah11918]

I know @kevinzunigacuellar is working on a Firebase example project right now. Would be interesting to see the same thing replicated in a Supabase example, too!

[Lucaskolinger]

https://www.aleksandra.codes/astro-supabase

This is the most useful tutorial I could find. I don't know if it's suitable as a community recipe but maybe it could be considered.

[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]

• how to make manual language switch and automatic application preferred language from the browser settings.

[teinett]

I did this for /src/pages/index.astro

---
const headers = Astro.request.headers;
const langHeaders = headers.get('accept-language')

if (langHeaders === null || langHeaders === undefined || langHeaders === '') {
    return Astro.redirect('/en');
} else {
    const lang = langHeaders.split(',')[0].split('-')[0];
    if (lang !== 'es' && lang !== 'ru') {
        return Astro.redirect('/en');
    } else {
        return Astro.redirect(`/${lang}`);
    }
}
---

[sarah11918]

• how to integrate Astro and StrapiJS CMS

[sarah11918]

• how to make a special look for blocks inside MD/MDX, for example, block «tips» in Astro Docs

[kevinzunigacuellar]

maybe plugin recommendations? 👀

[teinett]

Answer: use markdown transformation and markdown directives.

Install packages:npm i remark-directive unified unist-util-remove unist-util-visit

Add transformation: /src/utils/useMarkdownNotes.js

import { visit } from "unist-util-visit"

// This plugin is an example to turn `:::note ` into aside blocks.
// Variants of directive: note, info, tip, warning, caution

/** @type {import('unified').Plugin<[], import('mdast').Root>} */
export default function markdownAside() {
  return (tree) => {
    visit(tree, (node) => {
      if ( node.type === "containerDirective" ) {
        if (!["note", "info", "tip", "warning", "caution"].includes(node.name)) return

        const data = node.data || (node.data = {})
        const attributes = node.attributes || {}
        const type = node.name

        data.hName = 'aside'
        data.hProperties = {
            dataType: type
        }
      }
    })
  }
}

Using in markdown: src/content/posts/12345.md

# Moscow Domodedovo Airport FAQs

::TOC

👋 Hi, I love emojis a lot 🤓[^1]

[^1]: My reference.

**How many airports are there in Salta?**

:::note
There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overriden for MDX files specifically.
:::

There is only <mark>very important words</mark> one airport in Salta, Martin Miguel de Guemes International Airport.

:::warning[Heading for warning]
MDX does not support passing remark and rehype plugins as a string.

You should install, import, and apply the plugin function instead.
:::

Some sentence after directive.

Markdown React component: src/components/MarkdownText.js

import styles from './MarkdownText.module.css';
import ArticleAside from '@/components/ArticleAside'
import ReactMarkdown from "react-markdown";
import directive from "remark-directive";
import markdownAside from "@/utils/useMarkdownNotes"

const Markdown = ({ markdown, customComponents }) => {

    const components = {
        // replace aside html tag with ArticleAside component
        aside: ArticleAside,
    };

    return (
            <div itemProp="articleBody" className='prose'>
            <ReactMarkdown
                components={{ ...components, ...customComponents }}

                remarkPlugins={[
                    directive,
                    markdownAside
                ]}

                >
                {markdown}
            </ReactMarkdown>
        </div>
    );
}

export default Markdown;

[sarah11918]

• how to work with iframe blocks that add some js files for its work.

[sarah11918]

• how to make the breadcrumbs component for the current page if there is only the URL presented.

[sarah11918]

• how to make monorepo with Astro components library and Astro project

[sarah11918]

• how to work with maps, for example, Leaflet and OpenMaps.

[sarah11918]

• how to work with lazyYoutube scripts and other lazy-version for embeds of social media posts.

[sarah11918]

• how to understand if a local link or 3rd party link inside the Astro pages and MD/MDX pages? I want to add an icon for outside links like in Wikipedia.

[sarah11918]

• how to make browser push subscriptions on the Astro website

[sarah11918]

How to include CodeSandbox's Sandpack embed (in .astro, .mdx)

I've had to answer the same question twice within a week, and go hunting up old repository links showing what I did back in Astro v0.21 back when you could do this directly in (Astro-flavoured) Markdown.

I had this working fine in an older version of Astro! (Back when you could have components directly in Markdown files, so be advised that is different now.)

Since I haven't converted my blog posts to MDX yet, I just didn't port over that particular blog post. But I can't see any reason why Sandpack shouldn't work in MDX, and it certainly does (did) in an .astro file.

In case this helps, here's the file of my old blog post about it: https://github.com/sarah11918/sastro-v21/blob/main/src/pages/posts/react-sandpack-code-playground-in-astro-markdown.md

My component and Sandpack in a .astro page are here:
https://github.com/sarah11918/sastro-v21/blob/main/src/components/experiments/MySandpack.jsx
https://github.com/sarah11918/sastro-v21/blob/main/src/pages/experiments/codesandbox-sandpack.astro

[joeyfigaro]

Yes please! I've been banging my head on this today.

[Antonio476587]

How to use Astro in runtime for SSR without an adapter, like a renderToString function

[louiss0]

Well, once again I'm here to ask for the most commonly used Remark Plugins. #3037. Understanding the benefits of different remark plugins is difficult for beginners.

[teinett]

I receive mdx or html from API, for example, Wordpress post has custom WordpressBlock inside it's html.
I have component to render this block in my Astro website: AstroComponentX
How can I connect my AstroComponentX and received html (set:html) or markdown (Markdown component) with WordpressBlock?

[delucis]

Sounds like a "working with remote content" recipe maybe? We do have a "remote Markdown" section in docs already — maybe we pull that out to a recipe instead 🤔