5 ms·
The one thing from the Stripe docs I like is the embedded API key in all the code snippets, but this seems difficult to accomplish with Markdoc, especially if y
by ammmir 4y ago
The one thing from the Stripe docs I like is the embedded API key in all the code snippets, but this seems difficult to accomplish with Markdoc, especially if you're rendering the whole site to static HTML.
For example:
```bash
curl https://api.example.com/stuff \
-u {% apiKey /%}: \
-d "foo=bar"
```
If the user is logged in, I want the {% apiKey /%} to be replaced with something. Do I use a transform, node, or tag to accomplish it? It seems easier to write:
```bash
curl https://api.example.com/stuff \
-u MY_API_KEY: \
-d "foo=bar"
```
And then have custom JavaScript that runs on the page that does a search-and-replace for the string MY_API_KEY with the user's API key (obtained async with API, etc.). The documentation on Markdoc needs work.
- dijit 4y agothat's something google cloud docs seem to do really well; their command execution examples have editable components that are applied to all similar examples on the page: https://cloud.google.com/compute/docs/instances/custom-hostname-vm#gcloud https://cloud.google.com/compute/docs/instances/custom-hostn... I wondered how this works and if it's FOSS.
- nkohari 4y agoYour first example is essentially how it works on the Stripe docs platform. However, it requires a couple of custom components, including a CodeBlock component that renders code within code fences, and a component which understands how to display the user's API key. These are both very Stripe-specific, so it doesn't make sense to open source them. If you render the site to static HTML, though, you will have to do something more like a last-minute search-and-replace. Instead of rendering raw HTML, you could render the entire site to either the Markdoc AST or Markdoc renderable tree, which are both serializable. That's the approach that I use on my personal site [0], which implements a system similar to ContentLayer. [1] [0] https://github.com/nkohari/nate.io/blob/master/build/ContentPlugin.ts https://github.com/nkohari/nate.io/blob/master/build/Content... [1] https://www.contentlayer.dev/ https://www.contentlayer.dev/