Skip to content

Commit dfb4099

Browse files
rishichawdarishichawda
authored
Merge pull request #2 from rishichawda/docusaurus-docs
2 parents 76046a3 + 160c296 commit dfb4099

28 files changed

+10640
-0
lines changed

‎.github/workflows/deploy-docs.yml‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
name: Deploy Documentation
2+
3+
on:
4+
push:
5+
branches: [main]
6+
paths:
7+
- 'docs/**'
8+
- 'README.md'
9+
- '.github/workflows/deploy-docs.yml'
10+
11+
# Allow manual trigger
12+
workflow_dispatch:
13+
14+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
15+
permissions:
16+
contents: read
17+
pages: write
18+
id-token: write
19+
20+
# Allow only one concurrent deployment
21+
concurrency:
22+
group: pages
23+
cancel-in-progress: true
24+
25+
jobs:
26+
build:
27+
runs-on: ubuntu-latest
28+
steps:
29+
- name: Checkout
30+
uses: actions/checkout@v4
31+
32+
- name: Setup Node.js
33+
uses: actions/setup-node@v4
34+
with:
35+
node-version: '18'
36+
cache: 'yarn'
37+
cache-dependency-path: docs/yarn.lock
38+
39+
- name: Setup Pages
40+
uses: actions/configure-pages@v4
41+
42+
- name: Install Dependencies
43+
run: |
44+
cd docs
45+
yarn install --frozen-lockfile
46+
47+
# Import plugin into the docs to showcase examples
48+
- name: Build Plugin
49+
run: |
50+
yarn install --frozen-lockfile
51+
yarn build
52+
53+
- name: Copy Plugin to Docs
54+
run: |
55+
mkdir -p docs/node_modules/remark-notes-plugin/dist
56+
cp -r dist/* docs/node_modules/remark-notes-plugin/dist/
57+
58+
- name: Build Documentation Site
59+
run: |
60+
cd docs
61+
yarn build
62+
63+
- name: Upload artifact
64+
uses: actions/upload-pages-artifact@v3
65+
with:
66+
path: ./docs/build
67+
68+
deploy:
69+
environment:
70+
name: github-pages
71+
url: ${{ steps.deployment.outputs.page_url }}
72+
needs: build
73+
runs-on: ubuntu-latest
74+
steps:
75+
- name: Deploy to GitHub Pages
76+
id: deployment
77+
uses: actions/deploy-pages@v4

‎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/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Website
2+
3+
This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
4+
5+
### Installation
6+
7+
```
8+
$ yarn
9+
```
10+
11+
### Local Development
12+
13+
```
14+
$ yarn start
15+
```
16+
17+
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
18+
19+
### Build
20+
21+
```
22+
$ yarn build
23+
```
24+
25+
This command generates static content into the `build` directory and can be served using any static contents hosting service.
26+
27+
### Deployment
28+
29+
Using SSH:
30+
31+
```
32+
$ USE_SSH=true yarn deploy
33+
```
34+
35+
Not using SSH:
36+
37+
```
38+
$ GIT_USER=<Your GitHub username> yarn deploy
39+
```
40+
41+
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

‎docs/docs/examples/customization.md‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
---
2+
sidebar_position: 2
3+
---
4+
5+
# Customization
6+
7+
You can customize the appearance of your notes by overriding the default CSS styles provided by `remark-notes-plugin`. This guide explains how to customize the notes to match your website's design.
8+
9+
## CSS Classes
10+
11+
The plugin generates the following HTML structure for each note:
12+
13+
```html
14+
<div class="remark-note [type]">
15+
<div class="remark-note-header">
16+
<span class="remark-note-icon"></span>
17+
<span class="remark-note-title">[Type]</span>
18+
</div>
19+
<div>
20+
<p class="remark-note-content">Note content...</p>
21+
</div>
22+
</div>
23+
```
24+
25+
Where `[type]` is one of: `note`, `tip`, `important`, `quote`, or `bonus`.
26+
27+
## Basic Customization
28+
29+
You can customize the notes by targeting these CSS classes in your own stylesheet:
30+
31+
```css
32+
/* Change the background color of all notes */
33+
.remark-note {
34+
background-color: #f8f9fa;
35+
}
36+
37+
/* Change the border color of tip notes */
38+
.remark-note.tip {
39+
border-color: #4caf50;
40+
}
41+
42+
/* Change the title style of important notes */
43+
.remark-note.important .remark-note-title {
44+
color: #f44336;
45+
font-weight: bold;
46+
}
47+
```
48+
49+
## Complete Customization Example
50+
51+
Here's a complete example that changes the styling for all note types:
52+
53+
```css
54+
/* Base note styles */
55+
.remark-note {
56+
border-radius: 8px;
57+
padding: 16px;
58+
margin: 24px 0;
59+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
60+
}
61+
62+
/* Note title styles */
63+
.remark-note.title {
64+
font-size: 1.1em;
65+
font-weight: 600;
66+
margin-bottom: 8px;
67+
}
68+
69+
/* Standard note */
70+
.remark-note.note {
71+
background-color: #e8f4fd;
72+
border-left: 4px solid #1e88e5;
73+
}
74+
.remark-note.note .remark-note.title {
75+
color: #1565c0;
76+
}
77+
78+
/* Tip note */
79+
.remark-note.tip {
80+
background-color: #e8f5e9;
81+
border-left: 4px solid #43a047;
82+
}
83+
.remark-note.tip .remark-note-title {
84+
color: #2e7d32;
85+
}
86+
87+
/* Important note */
88+
.remark-note.important {
89+
background-color: #ffebee;
90+
border-left: 4px solid #e53935;
91+
}
92+
.remark-note.important .remark-note-title {
93+
color: #c62828;
94+
}
95+
96+
/* Quote note */
97+
.remark-note.quote {
98+
background-color: #ede7f6;
99+
border-left: 4px solid #7e57c2;
100+
}
101+
.remark-note.quote .remark-note-title {
102+
color: #5e35b1;
103+
}
104+
105+
/* Bonus note */
106+
.remark-note.bonus {
107+
background-color: #fff8e1;
108+
border-left: 4px solid #ffb300;
109+
}
110+
.remark-note.bonus .remark-note-title {
111+
color: #ff8f00;
112+
}
113+
```
114+
115+
## Applying Custom Styles
116+
117+
Add your custom styles to your project after importing the default styles. For example:
118+
119+
```javascript
120+
// Import the default styles first
121+
import 'remark-notes-plugin/dist/styles.css';
122+
// Then import your custom styles
123+
import './your-custom-styles.css';
124+
```
125+
126+
This ensures that your custom styles override the default ones.
127+
128+
## Dark Mode Support
129+
130+
You can also add dark mode support by using CSS media queries:
131+
132+
```css
133+
@media (prefers-color-scheme: dark) {
134+
.remark-note {
135+
background-color: #1e1e1e;
136+
color: #e0e0e0;
137+
}
138+
139+
.remark-note.title {
140+
color: #ffffff;
141+
}
142+
143+
/* Customize other dark mode styles... */
144+
}
145+
```
146+
147+
Or if you're using a theme toggle, you can use CSS classes:
148+
149+
```css
150+
.dark-theme .remark-note {
151+
background-color: #1e1e1e;
152+
color: #e0e0e0;
153+
}
154+
```
155+
156+
Adapt these examples to fit your website's specific styling needs and color scheme.

‎docs/docs/examples/note-types.mdx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# Note Types
6+
7+
`remark-notes-plugin` supports five different types of notes, each with its own styling. This page demonstrates all available note types and how to use them.
8+
9+
## Standard Note
10+
11+
Used for providing general information or notes to the reader.
12+
13+
<div class="remark-note note"><div class="remark-note-header"><span class="remark-note-icon" data-type="note"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="0.048"></g><g><path d="M8 2V5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"></path><path d="M16 2V5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"></path><path d="M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"></path><path d="M8 11H16" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"></path><path d="M8 16H12" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"></path></g></svg></span><span class="remark-note-title">note</span></div><div class="remark-note-content"><p>This is a standard note that provides additional information to the reader.</p></div></div>
14+
15+
**Markdown Syntax**:
16+
```markdown
17+
> [!note]
18+
> This is a standard note that provides additional information to the reader.
19+
```
20+
21+
## Tip Note
22+
23+
Used for providing helpful tips and advice.
24+
25+
<div class="remark-note tip"><div class="remark-note-header"><span class="remark-note-icon" data-type="tip"><svg viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="round" stroke-linejoin="round"></g><g><path d="M19.0006 9.03002C19.0007 8.10058 18.8158 7.18037 18.4565 6.32317C18.0972 5.46598 17.5709 4.68895 16.9081 4.03734C16.2453 3.38574 15.4594 2.87265 14.5962 2.52801C13.7331 2.18336 12.8099 2.01409 11.8806 2.03002C10.0966 2.08307 8.39798 2.80604 7.12302 4.05504C5.84807 5.30405 5.0903 6.98746 5.00059 8.77001C4.95795 9.9595 5.21931 11.1402 5.75999 12.2006C6.30067 13.2609 7.10281 14.1659 8.09058 14.83C8.36897 15.011 8.59791 15.2584 8.75678 15.5499C8.91565 15.8415 8.99945 16.168 9.00059 16.5V18.03H15.0006V16.5C15.0006 16.1689 15.0829 15.843 15.24 15.5515C15.3971 15.26 15.6241 15.0121 15.9006 14.83C16.8528 14.1911 17.6336 13.328 18.1741 12.3167C18.7147 11.3054 18.9985 10.1767 19.0006 9.03002Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15 21.04C14.1345 21.6891 13.0819 22.04 12 22.04C10.9181 22.04 9.86548 21.6891 9 21.04" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9901 5.64001L10.3301 8.41998C10.2549 8.54184 10.2138 8.68167 10.2111 8.82483C10.2084 8.96799 10.2441 9.10925 10.3146 9.23389C10.3851 9.35852 10.4877 9.46195 10.6118 9.53339C10.7359 9.60482 10.8769 9.64165 11.0201 9.64001H13.0201C13.1617 9.63947 13.301 9.67657 13.4237 9.7475C13.5463 9.81843 13.6479 9.92063 13.7181 10.0437C13.7883 10.1668 13.8245 10.3063 13.8231 10.4479C13.8217 10.5896 13.7827 10.7283 13.7101 10.85L12.0301 13.64" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg></span><span class="remark-note-title">tip</span></div><div class="remark-note-content"><p>Here's a helpful tip that can improve your workflow or code quality.</p></div></div>
26+
27+
**Markdown Syntax**:
28+
```markdown
29+
> [!tip]
30+
> Here's a helpful tip that can improve your workflow or code quality.
31+
```
32+
33+
## Important Note
34+
35+
Used for highlighting critical information that requires special attention.
36+
37+
<div class="remark-note important"><div class="remark-note-header"><span class="remark-note-icon" data-type="important"><svg viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g><path d="M9,14a1.5,1.5,0,1,1,1.5068-1.5A1.5035,1.5035,0,0,1,9,14Z" fill="currentColor"></path><path d="M9,2A7,7,0,1,1,2,9,7.0079,7.0079,0,0,1,9,2M9,0a9,9,0,1,0,9,9A9,9,0,0,0,9,0Z" fill="currentColor"></path><path d="M10,4H8a1,1,0,0,0-.97,1.2425l1,4a1,1,0,0,0,1.94,0l1-4A1,1,0,0,0,10,4Zm0,2h0Z" fill="currentColor"></path></g></svg></span><span class="remark-note-title">important</span></div><div class="remark-note-content"> <p>This information is crucial and requires your attention to avoid issues or errors.</p></div></div>
38+
39+
**Markdown Syntax**:
40+
```markdown
41+
> [!important]
42+
> This information is crucial and requires your attention to avoid issues or errors.
43+
```
44+
45+
## Quote Note
46+
47+
Used for styling quotations in a distinctive way.
48+
49+
<div class="quote remark-note"><div class="remark-note-header"><span class="remark-note-icon" data-type="quote"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="round" stroke-linejoin="round"></g><g><path d="M14 15V14C14 13.0681 14 12.6022 14.1522 12.2346C14.3552 11.7446 14.7446 11.3552 15.2346 11.1522C15.6022 11 16.0681 11 17 11H17.5C18.9045 11 19.6067 11 20.1111 11.3371C20.3295 11.483 20.517 11.6705 20.6629 11.8889C21 12.3933 21 13.0955 21 14.5V15.3431C21 16.1606 21 16.5694 20.8478 16.9369C20.6955 17.3045 20.4065 17.5935 19.8284 18.1716L19.2396 18.7604C18.7822 19.2178 18 18.8938 18 18.2469V17.8787C18 17.3934 17.6066 17 17.1213 17H16C14.8954 17 14 16.1046 14 15Z" stroke-linejoin="round" stroke-width="1.5"></path><path d="M3 9V8C3 7.06812 3 6.60218 3.15224 6.23463C3.35523 5.74458 3.74458 5.35523 4.23463 5.15224C4.60218 5 5.06812 5 6 5H6.5C7.90446 5 8.60669 5 9.11114 5.33706C9.32952 5.48298 9.51702 5.67048 9.66294 5.88886C10 6.39331 10 7.09554 10 8.5V9.34315C10 10.1606 10 10.5694 9.84776 10.9369C9.69552 11.3045 9.40649 11.5935 8.82843 12.1716L8.23965 12.7604C7.78219 13.2178 7 12.8938 7 12.2469V11.8787C7 11.3934 6.6066 11 6.12132 11H5C3.89543 11 3 10.1046 3 9Z" stroke-linejoin="round" stroke-width="1.5"></path></g></svg></span><span class="remark-note-title">quote</span></div><div class="remark-note-content"><p>"The best way to predict the future is to invent it." — Alan Kay</p></div></div>
50+
51+
**Markdown Syntax**:
52+
```markdown
53+
> [!quote]
54+
> "The best way to predict the future is to invent it." — Alan Kay
55+
```
56+
57+
## Bonus Note
58+
59+
Used for providing additional, nice-to-have information or features.
60+
61+
<div class="remark-note bonus"><div class="remark-note-header"><span class="remark-note-icon" data-type="bonus"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="round" stroke-linejoin="round"></g><g><path d="M9.23163 8.61762C7.26389 9.06284 6.28001 9.28545 6.04594 10.0382C5.81186 10.7909 6.4826 11.5753 7.82408 13.1439L8.17113 13.5498C8.55234 13.9955 8.74294 14.2184 8.82869 14.4942C8.91444 14.7699 8.88562 15.0673 8.82799 15.662L8.77552 16.2035C8.5727 18.2965 8.4713 19.343 9.08412 19.8082C9.69694 20.2734 10.6181 19.8492 12.4605 19.0009L12.9372 18.7815C13.4607 18.5404 13.7225 18.4199 14 18.4199C14.2775 18.4199 14.5393 18.5404 15.0628 18.7815L15.5395 19.0009C17.3819 19.8492 18.3031 20.2734 18.9159 19.8082C19.5287 19.343 19.4273 18.2965 19.2245 16.2035M20.1759 13.1439C21.5174 11.5753 22.1881 10.7909 21.9541 10.0382C21.72 9.28545 20.7361 9.06284 18.7684 8.61762L18.2593 8.50244C17.7001 8.37592 17.4205 8.31266 17.196 8.14225C16.9716 7.97183 16.8276 7.71355 16.5396 7.19699L16.2775 6.7267C15.2641 4.9089 14.7575 4 14 4C13.2425 4 12.7359 4.9089 11.7225 6.7267" stroke-width="1.5" stroke-linecap="round"></path><path d="M2.08887 16C3.20445 15.121 4.68639 14.7971 6.08887 15.1257" stroke-width="1.5" stroke-linecap="round"></path><path d="M2.08887 10.5C3.08887 10 3.37862 10.0605 4.08887 10" stroke-width="1.5" stroke-linecap="round"></path><path d="M2 5.60867L2.20816 5.48676C4.41383 4.19506 6.75032 3.84687 8.95304 4.48161L9.16092 4.54152" stroke-width="1.5" stroke-linecap="round"></path></g></svg></span><span class="remark-note-title">bonus</span></div><div class="remark-note-content"><p>Here's an advanced technique that can further enhance your implementation.</p></div></div>
62+
63+
**Markdown Syntax**:
64+
```markdown
65+
> [!bonus]
66+
> Here's an advanced technique that can further enhance your implementation.
67+
```
68+
69+
## Multiple Paragraphs
70+
71+
Notes can contain multiple paragraphs and other markdown elements like lists and code blocks.
72+
73+
<div class="remark-note note"><div class="remark-note-header"><span class="remark-note-icon" data-type="note"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="0.048"></g><g><path d="M8 2V5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"></path><path d="M16 2V5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"></path><path d="M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"></path><path d="M8 11H16" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"></path><path d="M8 16H12" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"></path></g></svg></span><span class="remark-note-title">note</span></div><div class="remark-note-content"><p>This note has multiple paragraphs.</p><p>You can include:</p><ul><li>Lists</li><li>And other markdown elements</li></ul><pre><code>// Even code blocks
74+
console.log('Hello world');</code></pre></div></div>
75+
76+
**Markdown Syntax**:
77+
```markdown
78+
> [!notes]
79+
> This note has multiple paragraphs.
80+
>
81+
> You can include:
82+
> - Lists
83+
> - And other markdown elements
84+
>
85+
> ```js
86+
> // Even code blocks
87+
> console.log('Hello world');
88+
> ```
89+
```

0 commit comments

Comments
 (0)