Skip to content

Commit 6192020

Browse files
marcusolssonmarcusolsson
committed
Add Docusaurus docs
1 parent a6251f8 commit 6192020

20 files changed

+10829
-0
lines changed

‎docs/.gitignore

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Dependencies
2+
/node_modules
3+
4+
# Production
5+
/build
6+
7+
# Generated files
8+
.docusaurus
9+
.cache-loader
10+
11+
# Misc
12+
.DS_Store
13+
.env.local
14+
.env.development.local
15+
.env.test.local
16+
.env.production.local
17+
18+
npm-debug.log*
19+
yarn-debug.log*
20+
yarn-error.log*

‎docs/babel.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
3+
};

‎docs/docs/configuration.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
id: configuration
3+
title: Configuration
4+
---
5+
6+
## Add a JSON data source
7+
8+
1. In the side menu, click the **Configuration** tab (cog icon)
9+
1. Click **Add data source** in the top-right corner of the **Data Sources** tab
10+
1. Enter "JSON" in the search box to find the JSON API data source
11+
1. Click the search result that says "JSON API"
12+
13+
The data source has been added, but it needs some more configuration before you can use it.

‎docs/docs/installation.md

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
id: installation
3+
title: Installation
4+
---
5+
6+
import Tabs from '@theme/Tabs';
7+
import TabItem from '@theme/TabItem';
8+
9+
You can install the plugin using [grafana-cli](https://grafana.com/docs/grafana/latest/administration/cli/), or by downloading the plugin manually.
10+
11+
## Install using grafana-cli
12+
13+
To install the latest version of the plugin, run the following command on the Grafana server:
14+
15+
<Tabs
16+
groupId="operating-systems"
17+
defaultValue="linux"
18+
values={[
19+
{label: 'Linux', value: 'linux'},
20+
{label: 'macOS', value: 'macos'},
21+
{label: 'Windows', value: 'windows'},
22+
]}>
23+
<TabItem value="linux">
24+
25+
```
26+
grafana-cli plugins install marcusolsson-json-datasource
27+
```
28+
29+
</TabItem>
30+
<TabItem value="macos">
31+
32+
```
33+
grafana-cli plugins install marcusolsson-json-datasource
34+
```
35+
36+
</TabItem>
37+
<TabItem value="windows">
38+
39+
```
40+
grafana-cli.exe plugins install marcusolsson-json-datasource
41+
```
42+
43+
</TabItem>
44+
</Tabs>
45+
46+
## Install manually
47+
48+
1. Go to [Releases](https://github.com/marcusolsson/grafana-json-datasource/releases) on the GitHub project page
49+
1. Find the release you want to install
50+
1. Download the release by clicking the release asset called `marcusolsson-json-datasource-<version>.zip`. You may need to uncollapse the **Assets** section to see it.
51+
1. Unarchive the plugin into the Grafana plugins directory
52+
53+
<Tabs
54+
groupId="operating-systems"
55+
defaultValue="linux"
56+
values={[
57+
{label: 'Linux', value: 'linux'},
58+
{label: 'macOS', value: 'macos'},
59+
{label: 'Windows', value: 'windows'},
60+
]}>
61+
<TabItem value="linux">
62+
63+
```
64+
unzip marcusolsson-json-datasource-<version>.zip
65+
mv marcusolsson-json-datasource /var/lib/grafana/plugins
66+
```
67+
68+
</TabItem>
69+
<TabItem value="macos">
70+
71+
```
72+
unzip marcusolsson-json-datasource-<version>.zip
73+
mv marcusolsson-json-datasource /usr/local/var/lib/grafana/plugins
74+
```
75+
76+
</TabItem>
77+
<TabItem value="windows">
78+
79+
```
80+
Expand-Archive -Path marcusolsson-json-datasource-<version>.zip -DestinationPath C:\grafana\data\plugins
81+
```
82+
83+
</TabItem>
84+
</Tabs>
85+
86+
1. Restart the Grafana server to load the plugin

‎docs/docs/introduction.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
id: introduction
3+
title: Introduction
4+
slug: /
5+
---
6+
7+
JSON API is an open source data source plugin for Grafana that lets you visualize data from any URL that returns JSON data, such as REST APIs or static file servers.
8+
9+
Since the plugin doesn't keep a record of previous queries, each query needs to contain the complete data set you want to visualize. If you'd like to visualize how the data changes over time, you're probably better off storing the data in a database.

‎docs/docs/query-editor.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
id: query-editor
3+
title: Query editor
4+
---
5+
6+
This page explains the what each part of the query editor does, and how you can configure it.
7+
8+
The query editor for the JSON API data source consists of a number of tabs. Each tab configures a part of the query.
9+
10+
### Fields
11+
12+
![Fields](../static/img/editor-fields.png)
13+
14+
The **Fields** tab is where you select the data to extract from the JSON document returned by the URL configured in the data source configuration.
15+
16+
- **Field** must contain a valid [JSONPath](jsonpath.md) expression and can return one or more elements.
17+
- **Type** defines the JSON type of the elements returned by the **Field** expression. By default, Grafana uses the types in the JSON document. If **Type** is set to a different type than the original property type, Grafana tries to parse the value.
18+
19+
This can be useful in cases where the API returns quoted numbers, e.g. `"price": "3.49"`.
20+
21+
### Path
22+
23+
![Path](../static/img/editor-path.png)
24+
25+
The drop-down box to the left lets you configure the **HTTP method** of the request sent to the URL and can be set to **GET** and **POST**.
26+
27+
The text box lets you append a path to the URL in the data source configuration. This can be used to dynamically change the request URL using [variables](https://grafana.com/docs/grafana/latest/variables/).
28+
29+
For example, by setting the path to `/movies/${movie}/summary` you can query the summary for any movie without having to change the query itself.
30+
31+
### Params
32+
33+
![Params](../static/img/editor-params.png)
34+
35+
Add any parameters you'd like to send as part of the query string. For example, the parameters in the screenshot gets encoded as `?category=movies`.
36+
37+
Both the **Key** and **Value** fields support [variables](https://grafana.com/docs/grafana/latest/variables/).
38+
39+
> **Note:** Any query parameters that have been set by the administrator in the data source configuration has higher priority and overrides the parameters set by the query.
40+
41+
### Headers
42+
43+
![Headers](../static/img/editor-headers.png)
44+
45+
Add any parameters you'd like to send as HTTP headers.
46+
47+
Both the **Key** and **Value** fields support [variables](https://grafana.com/docs/grafana/latest/variables/).
48+
49+
### Body
50+
51+
![Body](../static/img/editor-body.png)
52+
53+
Sets the text to send as a request body.
54+
55+
- **Syntax highlighting** sets the active syntax for the editor. This is only for visual purposes and doesn't change the actual request.
56+
57+
> **Note:** Due to limitations in modern browsers, Grafana ignores the request body if the HTTP method is set to GET.

‎docs/docusaurus.config.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
module.exports = {
2+
url: 'https://github.com/marcusolsson/grafana-json-datasource',
3+
baseUrl: '/',
4+
onBrokenLinks: 'throw',
5+
onBrokenMarkdownLinks: 'warn',
6+
favicon: 'img/favicon.ico',
7+
organizationName: 'marcusolsson', // Usually your GitHub org/user name.
8+
projectName: 'grafana-json-datasource', // Usually your repo name.
9+
themeConfig: {
10+
navbar: {
11+
title: 'JSON API Data Source for Grafana',
12+
logo: {
13+
alt: 'Logo',
14+
src: 'img/logo.svg',
15+
},
16+
items: [
17+
{
18+
href: 'https://github.com/marcusolsson/grafana-json-datasource',
19+
label: 'GitHub',
20+
position: 'right',
21+
},
22+
{
23+
href: 'https://grafana.com/plugins/marcusolsson-json-datasource',
24+
label: 'Marketplace',
25+
position: 'right',
26+
},
27+
],
28+
},
29+
footer: {
30+
style: 'dark',
31+
links: [
32+
{
33+
title: 'Docs',
34+
items: [
35+
{
36+
label: 'Installation',
37+
to: '/',
38+
},
39+
{
40+
label: 'Configuration',
41+
to: 'configuration/',
42+
},
43+
],
44+
},
45+
{
46+
title: 'Community',
47+
items: [
48+
{
49+
label: 'Discussions',
50+
href: 'https://github.com/marcusolsson/grafana-json-datasource',
51+
},
52+
{
53+
label: 'Twitter',
54+
href: 'https://twitter.com/marcusolsson',
55+
},
56+
{
57+
label: 'Support',
58+
href: 'https://github.com/marcusolsson/grafana-json-datasource/discussions/categories/q-a',
59+
},
60+
],
61+
},
62+
{
63+
title: 'More',
64+
items: [
65+
{
66+
label: 'GitHub',
67+
href: 'https://github.com/marcusolsson/grafana-json-datasource',
68+
},
69+
{
70+
label: 'Marketplace',
71+
href: 'https://grafana.com/plugins/marcusolsson-json-datasource',
72+
},
73+
],
74+
},
75+
],
76+
copyright: `Copyright © ${new Date().getFullYear()} Marcus Olsson`,
77+
},
78+
},
79+
presets: [
80+
[
81+
'@docusaurus/preset-classic',
82+
{
83+
docs: {
84+
sidebarPath: require.resolve('./sidebars.js'),
85+
editUrl: 'https://github.com/marcusolsson/grafana-json-datasource/edit/main/docs/',
86+
routeBasePath: '/',
87+
},
88+
theme: {
89+
customCss: require.resolve('./src/css/custom.css'),
90+
},
91+
},
92+
],
93+
],
94+
};

‎docs/package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "marcusolsson-json-datasource-docs",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"docusaurus": "docusaurus",
7+
"start": "docusaurus start",
8+
"build": "docusaurus build",
9+
"swizzle": "docusaurus swizzle",
10+
"deploy": "docusaurus deploy",
11+
"serve": "docusaurus serve",
12+
"clear": "docusaurus clear"
13+
},
14+
"dependencies": {
15+
"@docusaurus/core": "2.0.0-alpha.70",
16+
"@docusaurus/preset-classic": "2.0.0-alpha.70",
17+
"@mdx-js/react": "^1.6.21",
18+
"clsx": "^1.1.1",
19+
"react": "^16.8.4",
20+
"react-dom": "^16.8.4"
21+
},
22+
"browserslist": {
23+
"production": [
24+
">0.5%",
25+
"not dead",
26+
"not op_mini all"
27+
],
28+
"development": [
29+
"last 1 chrome version",
30+
"last 1 firefox version",
31+
"last 1 safari version"
32+
]
33+
}
34+
}

‎docs/sidebars.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
someSidebar: [
3+
{
4+
type: "doc",
5+
id: "introduction",
6+
},
7+
{
8+
type: "category",
9+
label: "Getting started",
10+
items: ["installation", "configuration"],
11+
},
12+
{
13+
type: "category",
14+
label: "Basics",
15+
items: ["query-editor"],
16+
},
17+
],
18+
};

‎docs/src/css/custom.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/* stylelint-disable docusaurus/copyright-header */
2+
/**
3+
* Any CSS included here will be global. The classic template
4+
* bundles Infima by default. Infima is a CSS framework designed to
5+
* work well for content-centric websites.
6+
*/
7+
8+
/* You can override the default Infima variables here. */
9+
:root {
10+
--ifm-color-primary: #3578e5;
11+
--ifm-color-primary-dark: #306cce;
12+
--ifm-color-primary-darker: #2d66c3;
13+
--ifm-color-primary-darkest: #2554a0;
14+
--ifm-color-primary-light: #538ce9;
15+
--ifm-color-primary-lighter: #72a1ed;
16+
--ifm-color-primary-lightest: #9abcf2;
17+
--ifm-code-font-size: 95%;
18+
}
19+
20+
.docusaurus-highlight-code-line {
21+
background-color: rgb(72, 77, 91);
22+
display: block;
23+
margin: 0 calc(-1 * var(--ifm-pre-padding));
24+
padding: 0 var(--ifm-pre-padding);
25+
}

0 commit comments

Comments
 (0)