`shell
$ npm install @fusionauth/astro-components
`

> These components were tested with versions 2, 3 and 4 of Astro.

Components

Use this to display a
component to provide syntax highlight for
content that is actually hosted somewhere else (e.g. GitHub).

$3

`mdx
import { RemoteCode } from '@fusionauth/astro-components';


`

This is equivalent to rendering a with the contents of that JSON file.

$3

- url (required): address with the file to download.
- lang (optional): language for the code (default: plaintext).
- title (optional): title of the section, shown as a piece of text above the block.
- tags (optional): tags to extract specific lines from the file.
See Lines selection by Tags.

Any other prop will be forwarded to the underlying component.

$3

This component can retrieve some lines from the remote file according to a custom selection.

#### Selecting Lines via Query String

If you just want to show some specific lines, you can pass an argument to the query string like #L-L.

Example:

`mdx

`

It will only render lines 9, 10, 11, and 12 from the file.

> Tip: this is the same syntax used by GitHub to mark lines in the UI.

#### Selecting Lines via Tags

If you own the remote file to be injected, you can add a few comments to mark which lines you want to show, and then
pass a tags="tag-name" property to the component, which will render lines between tag::tag-name and end::tag-name.

For instance, if you have the file below:

`javascript
const express = require('express');
const app = express();

// tag::listen
app.listen(3000, () => {
console.log('App listening on port 3000');
});
// end::listen
`

To render those lines for the listen function and its callback, write your code like this.

`mdx

`

Instead of hard-coding values from an external file (e.g. some file from the demo app you are writing about), you can
use the component to render a specific value from that file.

$3

A simple usage example for the component (which will cover most cases) is when you have the following JSON file hosted
somewhere (e.g. GitHub) and you are writing a doc that mentions that user.

`json
{
"user": {
"email": "richard.hendricks@example.com",
"username": "richard.hendricks",
"role": "user"
}
}
`

Instead of hard-coding the value richard.hendricks and taking the risk of your remote file being out-of-sync with your
document, you can use:

`mdx
import { RemoteValue } from '@fusionauth/astro-components';

You are going to log in as .
`

This will extract the username from that JSON value and render this instead:

`
You are going to log in as richard.hendricks.
`

> Read more about Selectors.

$3

* url (required): remote URL to fetch the file from
* selector (required): parser-dependent syntax to extract the value from the remote file
* parser (optional): value from the Parser enum object exported by the component
* If not defined, the component will use the file extension from the URL
* defaultValue (optional): default value if we cannot retrieve the element (otherwise, we'll render "unknown")
* This is recommended in case you ever change the remote file and the selector doesn't work anymore.

#### Parsers

Currently, we only support JSON files, but the component is ready to support other extensions in the future (e.g. YAML
or XML files), so in the future we could have something like this:

`mdx
import { RemoteValue, RemoteValueParser } from '@fusionauth/astro-components';

parser={Parser.YAML}
selector="some.yaml.selector.in.the.future"
/>
`

#### Selectors

The selector can either be a string or a function.

##### Selector Strings

When using selector strings, you need to check the specific documentation for the parser we use. As we only have JSON right now,
please check jsonpath-plus, which implements an XPath-based syntax.

##### Selector Functions

When using selector functions, we'll pass the parsed file (e.g. the JSON object) as an argument and the function should return
the value.

##### Selector Examples

These elements will render the same value:

`mdx
selector={(element) => element.users.find(e => e.role === 'user').username}
/>

selector="$.users.[?(@.role === 'user')].username"
/>
`

$3

#### Rendering inside custom components

If you need to render a custom component, you can use astro's way of passing callback as a child:

`mdx
url="https://example.com/file.json"
selector="$.variables.clientId">
{(value) => CLIENT_ID=${value} some-command}/>}

`

This is specially useful when you need to fetch several values and render them all in the same component:


`mdx
url="https://example.com/file.json"
selector="$.variables">
{(vars) => CLIENT_ID=${vars.clientId} CLIENT_SECRET=${vars.clientSecret} some-command}/>}

`

#### Rendering inside backticks

Rendering inside inline backticks won't work, but you can use standard elements instead.

`mdx


This won't work