search

nitrictech / docs

Contains all the documentation for the Nitric framework
https://nitric.io/docs
11 stars 12 forks source link

Repurpose <CodeGroup> component, update rendering of code fences #613

Closed jyecusch closed 1 month ago

jyecusch commented 2 months ago

The <CodeGroup> component is currently used to display examples in different languages, etc. That functionality is moving to a <Tabs> component (https://github.com/nitrictech/docs/issues/612).

CodeGroup will instead be used to display examples that involve editing multiple files at once. For example we may have a step in a guide that involves edits a Service and the nitric.yaml file. The component would be used like this:

<CodeGroup>

` ``javascript {{ filename: "services/users.js" }}
api.get("/users", async (ctx) => {});
` ``

` ``yaml {{ filename: "nitric.yaml" }}
name: events
services:
    - match: services/*.ts
      start: npm run dev:services $SERVICE_PATH
` ``

</CodeGroup>

Note the new filename prop. We want the CodeGroup to render in a way that's reminiscent of a VSCode editor window (or similar text editor), where the filename is the tab label.

The current tag and label props for code fences can probably be removed.

jyecusch commented 1 month ago

released