Skip to content

Commit bd7816e

Browse files
tpanajotttpanajott
authored
Merge pull request #211 from sebastienvermeille/feat/210-new-doc-component-beta
210 new doc component beta
2 parents 8b3cad5 + f88944c commit bd7816e

6 files changed

Lines changed: 316 additions & 1 deletion

File tree

‎docs/contribute/documentation/custom-widgets.md‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
---
2+
title: Custom widgets
3+
sidebar_position: 2
4+
---
5+
import Tabs from '@theme/Tabs';
6+
import TabItem from '@theme/TabItem';
7+
import CenteredImage from '@site/src/components/CenteredImage';
8+
import Centered from '@site/src/components/Centered';
9+
import YouTubePlayer from '@site/src/components/YoutubePlayer';
10+
import Label from '@site/src/components/Label';
11+
12+
# Custom widgets
13+
14+
This page demonstrate the custom widgets available in this project.
15+
16+
:::info
17+
All such widgets are stored within `docs/src/components` directory.
18+
:::
19+
20+
## Label - Rounded tags
21+
22+
Widget to add labels such as beta features.
23+
24+
<Tabs>
25+
<TabItem value="code" label="Code">
26+
**Import**
27+
28+
Add import line at the top of the markdown file:
29+
```markdown
30+
import Label from '@site/src/components/Label';
31+
```
32+
33+
**Use**
34+
35+
Place the content to place a Label in your markdown page:
36+
37+
```markdown
38+
<Label value="BETA"/> feature
39+
```
40+
</TabItem>
41+
<TabItem value="preview" label="Preview" default>
42+
<Label value="BETA"/> feature
43+
</TabItem>
44+
</Tabs>
45+
46+
## CenteredImage - Centered image
47+
48+
Widget to center an image on the page.
49+
50+
<Tabs>
51+
<TabItem value="code" label="Code">
52+
**Import**
53+
54+
Add import line at the top of the markdown file:
55+
```markdown
56+
import CenteredImage from '@site/src/components/CenteredImage';
57+
```
58+
59+
**Use**
60+
61+
Place the content to center in your markdown page:
62+
63+
```markdown
64+
<CenteredImage
65+
src="/images/doc/initial_setup_popup.png"
66+
alt="Configuration wizard"
67+
figureNumber={1}
68+
/>
69+
```
70+
</TabItem>
71+
<TabItem value="preview" label="Preview" default>
72+
<CenteredImage
73+
src="/images/doc/initial_setup_popup.png"
74+
alt="Configuration wizard"
75+
figureNumber={1}
76+
/>
77+
</TabItem>
78+
</Tabs>
79+
80+
81+
## Centered - Centered content
82+
83+
Widget to center content within the page.
84+
85+
<Tabs>
86+
<TabItem value="code" label="Code">
87+
**Import**
88+
89+
Add import line at the top of the markdown file:
90+
```markdown
91+
import Centered from '@site/src/components/Centered';
92+
```
93+
94+
**Use**
95+
96+
Place the content to center in your markdown page:
97+
98+
```markdown
99+
<Centered>
100+
Some central text
101+
</Centered>
102+
```
103+
</TabItem>
104+
<TabItem value="preview" label="Preview" default>
105+
<Centered>
106+
Some central text
107+
</Centered>
108+
</TabItem>
109+
</Tabs>
110+
111+
## YoutubePlayer - Embed Youtube videos
112+
113+
Widget to display YouTube videos.
114+
115+
<Tabs>
116+
<TabItem value="code" label="Code">
117+
**Import**
118+
119+
Add import line at the top of the markdown file:
120+
```markdown
121+
import YoutubePlayer from '@site/src/components/YoutubePlayer';
122+
```
123+
124+
**Use**
125+
126+
Place the content to place a Youtube player in your markdown page:
127+
128+
```markdown
129+
<YouTubePlayer
130+
videoId="ko5_FA-TdAU"
131+
author="Cables & Coffee (co-founder)"
132+
description="Quickly see what you can achieve!"
133+
/>
134+
```
135+
</TabItem>
136+
<TabItem value="preview" label="Preview" default>
137+
<YouTubePlayer
138+
videoId="ko5_FA-TdAU"
139+
author="Cables & Coffee (co-founder)"
140+
description="Quickly see what you can achieve!"
141+
/>
142+
</TabItem>
143+
</Tabs>

‎docs/contribute/documentation/improve-documentation.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
title: Improve documentation
3+
sidebar_position: 1
4+
---
5+
6+
# Improve documentation
7+
8+
Want to help improve this documentation?
9+
Thank you for your interest in making it better!
10+
11+
Here’s a quick overview to get you started.
12+
13+
## Fix typo and/or complete an existing page
14+
15+
Each pages of the Guide including this one provides a link at its whole bottom:
16+
17+
[Edit this page](hhttps://github.com/NSPManager/NSPanelManager/edit/beta/docs/docs/contribute/documentation/improve-documentation.md)
18+
19+
1. Simply click over this link, it will allow you to edit via GitHub UI directly, the content of the page.
20+
2. Update the content using Markdown in the editor.
21+
3. Check that it renders well using the **Preview** tab
22+
4. Click on the button **Commit changes...**
23+
5. Click on the button **Create pull request**
24+
6. Bingo, you did your first contribution, it will be available as soon as the project maintainers reviewed your changes.
25+
26+
## Create a new page
27+
28+
1. Fork the project
29+
2. Create a new file ending with `.md` within `docs/docs/` directory.
30+
3. Your file content should follow the following structure:
31+
32+
```markdown
33+
---
34+
title: <page title>
35+
sidebar_position: <order in sidebar menu>
36+
---
37+
38+
# <page title>
39+
40+
<your content>
41+
```
42+
43+
4. You can, make use of MDX components (rich UI components) by importing them within the pages.
44+
Have a look at this to learn more: https://docusaurus.io/docs/markdown-features.
45+
46+
5. Optionally, you might also want to use specific widgets created for this project.
47+
They are documented here: [custom widgets](./custom-widgets.md)
48+
## Customize sidebar menu
49+
50+
Edit `docs/src/sidebars.ts`
51+
52+
```ts
53+
const sidebars: SidebarsConfig = {
54+
mainSidebar: [
55+
{
56+
type: 'category',
57+
label: 'Getting started',
58+
items: [
59+
'getting-started/pre-requisites',
60+
'getting-started/supported-devices',
61+
'getting-started/flash-nspanel',
62+
{
63+
type: 'category',
64+
label: 'Install NSPanel Manager',
65+
items: [
66+
{
67+
type: 'autogenerated',
68+
dirName: 'getting-started/install',
69+
},
70+
],
71+
},
72+
'getting-started/configuration',
73+
]
74+
},
75+
'web-interface',
76+
'panel-functions',
77+
{
78+
type: 'category',
79+
label: 'Advanced topics',
80+
items: [
81+
{
82+
type: 'autogenerated',
83+
dirName: 'advanced',
84+
},
85+
]
86+
},
87+
{
88+
type: 'category',
89+
label: 'Contribute',
90+
items: [
91+
{
92+
type: 'autogenerated',
93+
dirName: 'contribute',
94+
},
95+
]
96+
},
97+
],
98+
};
99+
```
100+
101+
More help is available on docusaurus: https://docusaurus.io/docs/sidebar

‎docusaurus.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const config: Config = {
4646
// Remove this to remove the "edit this page" links.
4747
editUrl:
4848
// TODO: change branch back to `main` after merge of beta branch
49-
'https://github.com/NSPManager/NSPanelManager/docs/edit/beta/',
49+
'https://github.com/NSPManager/NSPanelManager/edit/beta/docs',
5050
},
5151
theme: {
5252
customCss: './src/css/custom.css',

‎sidebars.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,22 @@ const sidebars: SidebarsConfig = {
4646
},
4747
]
4848
},
49+
{
50+
type: 'category',
51+
label: 'Contribute',
52+
items: [
53+
{
54+
type: 'category',
55+
label: 'Documentation',
56+
items: [
57+
{
58+
type: 'autogenerated',
59+
dirName: 'contribute/documentation',
60+
},
61+
],
62+
},
63+
]
64+
},
4965
],
5066
};
5167

‎src/components/Label/index.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import styles from './styles.module.css';
3+
4+
5+
// Predefined label colors
6+
const labelColors = {
7+
beta: '#9912ec',
8+
// example to add other labels
9+
// bug: '#d73a49',
10+
// feature: '#28a745',
11+
};
12+
13+
// Utility function to generate random colors
14+
const generateRandomColor = () => {
15+
const letters = '0123456789ABCDEF';
16+
let color = '#';
17+
for (let i = 0; i < 6; i++) {
18+
color += letters[Math.floor(Math.random() * 16)];
19+
}
20+
return color;
21+
};
22+
23+
const Label = ({ value }) => {
24+
// Determine the color for the label
25+
const color = labelColors[value.toLowerCase()] || generateRandomColor();
26+
27+
return (
28+
<span
29+
className={styles.label}
30+
style={{backgroundColor: color}}
31+
>
32+
{value.toUpperCase()}
33+
</span>
34+
);
35+
};
36+
37+
export default Label;

‎src/components/Label/styles.module.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* General Label Style */
2+
.label {
3+
display: inline-block;
4+
font-size: 12px; /* Similar to GitHub's small text */
5+
font-weight: 600; /* Bold text */
6+
color: #ffffff; /* Default text color (white) */
7+
background-color: #6e5494; /* Default background color */
8+
padding: 0.2em 0.6em; /* Padding for compact sizing */
9+
border-radius: 2em; /* Rounded corners */
10+
text-align: center;
11+
white-space: nowrap; /* Prevent text wrapping */
12+
vertical-align: middle;
13+
}
14+
15+
/* Example hover effect */
16+
.label:hover {
17+
opacity: 0.9; /* Slightly dim on hover */
18+
}

0 commit comments

Comments
 (0)