Adds support to multiple frameworks on code blocks

[miguel-arrf]

Hi!

This is a work in progress since the way I am handling different frameworks might not yet be optimal and could be clearer, specifically in the way I'm changing the getStaticProps function. Right now, I want to understand if this feature is even useful.

Motivation:

Some websites (e.g., nuxt.com) have code blocks similar to those found on tailwindcss.com, but with the option to select different frameworks (e.g., npm, yarn, pnpm, bun) instead of just npm.

Design:

New button (displayed only when the code block has different framework configurations):

Different framework selected (bun ➜ npm):

No changes if a code block doesn't have a specified framework:

Usage:

Before:

code: {
  name: 'Terminal',
  lang: 'terminal',
  code: 'npx nuxi init my-project\ncd my-project',
},

After:

code: {
  name: 'Terminal',
  lang: 'terminal',
  frameworks: [
    {
      name: 'npm',
      code: 'npx nuxi init my-project\ncd my-project',
    },
    {
      name: 'bun',
      code: 'bunx nuxi init my-project\ncd my-project',
    },
  ],
},

If you do not want to add more frameworks for a specific block, no changes are needed!

Changes:

This Pull Request adds:

• A local storage variable (selectedFramework) used to keep track of the selected framework (and uses React context to keep everything live).
• A CodeLanguageButton component that acts as the button to change the framework (uses @headlessui/react components).
• Updates to the Snippet and Steps components to support the new behavior.
• Updates to the getStaticProps function in src/pages/docs/guides/nuxtjs.js (updates on this file were made to test these changes).

[!WARNING]
I only updated the nuxtjs.js page to test things out. If this Pull Request moves forward, I can either update no page (and just add the new logic) or update all relevant pages.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tailwindcss-com	❌ Failed (Inspect)			Aug 5, 2024 0:02am

[adamwathan]

Hey thanks for the PR! I hate to do this but going to say no to this one for now because I don't want to take on the overhead of maintaining a bunch of instructions for npm alternatives 😕 Going to just roll with the assumption that anyone who is in the loop enough to use bun or pnpm instead of npm understands npm commands and knows how to translate those instructions for their alternate package manager.

Thanks regardless 🤝🏻