remark-notes-plugin 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +153 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +166 -0
- package/dist/styles.css +1 -0
- package/dist/test.d.ts +1 -0
- package/dist/test.js +57 -0
- package/package.json +55 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Rishi Kumar Chawda
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
# remark-notes-plugin 📝
|
|
2
|
+
|
|
3
|
+
A powerful TypeScript remark plugin that transforms markdown blockquotes into beautifully styled note elements. Add professional-looking notes, tips, quotes, and more to your markdown documentation with minimal effort!
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## ✨ Features
|
|
9
|
+
|
|
10
|
+
- 🎨 **5 Beautiful Note Types** - Note, Tip, Important, Quote, and Bonus
|
|
11
|
+
- 🎯 **Semantic HTML Output** - Clean and accessible HTML structure
|
|
12
|
+
- 💅 **Customizable Styling** - Easy to override CSS classes
|
|
13
|
+
- 🔧 **Easy Integration** - Works with any remark-based markdown processor
|
|
14
|
+
|
|
15
|
+
## 📦 Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install remark-notes-plugin
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## 🚀 Usage
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
import { unified } from 'unified'
|
|
25
|
+
import remarkParse from 'remark-parse'
|
|
26
|
+
import remarkStringify from 'remark-stringify'
|
|
27
|
+
import remarkNotes from 'remark-notes-plugin'
|
|
28
|
+
|
|
29
|
+
const markdown = `
|
|
30
|
+
> [!note]
|
|
31
|
+
> This is a note about something important.
|
|
32
|
+
|
|
33
|
+
> [!tip]
|
|
34
|
+
> Here's a helpful tip for you.
|
|
35
|
+
|
|
36
|
+
> [!important]
|
|
37
|
+
> This is a very important message!
|
|
38
|
+
|
|
39
|
+
> [!quote]
|
|
40
|
+
> Here's a memorable quote.
|
|
41
|
+
|
|
42
|
+
> [!bonus]
|
|
43
|
+
> Here's some extra content for you!
|
|
44
|
+
`
|
|
45
|
+
|
|
46
|
+
const file = await unified()
|
|
47
|
+
.use(remarkParse)
|
|
48
|
+
.use(remarkNotes)
|
|
49
|
+
.use(remarkStringify)
|
|
50
|
+
.process(markdown)
|
|
51
|
+
|
|
52
|
+
console.log(String(file))
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## 📝 Note Types
|
|
56
|
+
|
|
57
|
+
The plugin supports five distinct types of notes, each with its own unique style:
|
|
58
|
+
|
|
59
|
+
1. **Note** - For general information and remarks
|
|
60
|
+
```markdown
|
|
61
|
+
> [!note]
|
|
62
|
+
> Your note content here
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
2. **Tip** - For helpful tips and tricks
|
|
66
|
+
```markdown
|
|
67
|
+
> [!tip]
|
|
68
|
+
> Your tip content here
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
3. **Important** - For critical information and warnings
|
|
72
|
+
```markdown
|
|
73
|
+
> [!important]
|
|
74
|
+
> Your important message here
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
4. **Quote** - For quotations and references
|
|
78
|
+
```markdown
|
|
79
|
+
> [!quote]
|
|
80
|
+
> Your quote content here
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
5. **Bonus** - For additional, supplementary content
|
|
84
|
+
```markdown
|
|
85
|
+
> [!bonus]
|
|
86
|
+
> Your bonus content here
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## 🎨 Styling
|
|
90
|
+
|
|
91
|
+
Include the provided `styles.css` in your project to get the default styling for the notes. The plugin uses a modular class structure that makes it easy to customize the appearance:
|
|
92
|
+
|
|
93
|
+
### Base Classes
|
|
94
|
+
|
|
95
|
+
- `.remark-note` - Base container for all note types
|
|
96
|
+
- `.remark-note-header` - Note header container
|
|
97
|
+
- `.remark-note-icon` - Icon styling
|
|
98
|
+
- `.remark-note-title` - Note title styling
|
|
99
|
+
- `.remark-note-content` - Note content container
|
|
100
|
+
|
|
101
|
+
### Type-Specific Classes
|
|
102
|
+
|
|
103
|
+
- `.remark-note.note` - Note type styling
|
|
104
|
+
- `.remark-note.tip` - Tip type styling
|
|
105
|
+
- `.remark-note.important` - Important type styling
|
|
106
|
+
- `.remark-note.quote` - Quote type styling
|
|
107
|
+
- `.remark-note.bonus` - Bonus type styling
|
|
108
|
+
|
|
109
|
+
### Customization Example
|
|
110
|
+
|
|
111
|
+
```css
|
|
112
|
+
/* Example: Customize the Note type */
|
|
113
|
+
.remark-note.note {
|
|
114
|
+
background-color: #your-color;
|
|
115
|
+
border-color: #your-border-color;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.remark-note.note .remark-note-title {
|
|
119
|
+
color: #your-text-color;
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
## 🛠️ Development
|
|
124
|
+
|
|
125
|
+
This project is written in TypeScript. To contribute or modify:
|
|
126
|
+
|
|
127
|
+
```bash
|
|
128
|
+
# Install dependencies
|
|
129
|
+
yarn
|
|
130
|
+
|
|
131
|
+
# Build the project
|
|
132
|
+
yarn build
|
|
133
|
+
|
|
134
|
+
# Run tests
|
|
135
|
+
yarn test
|
|
136
|
+
|
|
137
|
+
# Watch mode for development
|
|
138
|
+
yarn watch
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## 🤝 Contributing
|
|
142
|
+
|
|
143
|
+
Contributions are welcome! Feel free to:
|
|
144
|
+
|
|
145
|
+
- Report bugs
|
|
146
|
+
- Suggest new features
|
|
147
|
+
- Submit pull requests
|
|
148
|
+
|
|
149
|
+
Please ensure your pull request passes all tests and includes appropriate documentation.
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
⭐️ If you find this plugin useful, please consider giving it a star on GitHub! ⭐️
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
import { visit } from 'unist-util-visit';
|
|
2
|
+
import { readFileSync } from 'fs';
|
|
3
|
+
import { fileURLToPath } from 'url';
|
|
4
|
+
import { dirname, join } from 'path';
|
|
5
|
+
import { toHtml } from 'hast-util-to-html';
|
|
6
|
+
import { toHast } from 'mdast-util-to-hast';
|
|
7
|
+
const noteTypes = {
|
|
8
|
+
'note': {
|
|
9
|
+
icon: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
10
|
+
<g stroke-linecap="round" stroke-linejoin="round" stroke-width="0.048">
|
|
11
|
+
</g>
|
|
12
|
+
<g>
|
|
13
|
+
<path d="M8 2V5" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
|
|
14
|
+
</path>
|
|
15
|
+
<path d="M16 2V5" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
|
|
16
|
+
</path>
|
|
17
|
+
<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"
|
|
18
|
+
stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
|
|
19
|
+
</path>
|
|
20
|
+
<path d="M8 11H16" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
|
|
21
|
+
</path>
|
|
22
|
+
<path d="M8 16H12" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
|
|
23
|
+
</path>
|
|
24
|
+
</g>
|
|
25
|
+
</svg>`,
|
|
26
|
+
type: 'note'
|
|
27
|
+
},
|
|
28
|
+
'tip': {
|
|
29
|
+
icon: `<svg viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
30
|
+
<g stroke-linecap="round" stroke-linejoin="round"></g>
|
|
31
|
+
<g>
|
|
32
|
+
<path
|
|
33
|
+
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"
|
|
34
|
+
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
35
|
+
<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"
|
|
36
|
+
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
37
|
+
<path
|
|
38
|
+
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"
|
|
39
|
+
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
40
|
+
</g>
|
|
41
|
+
</svg>`,
|
|
42
|
+
type: 'tip'
|
|
43
|
+
},
|
|
44
|
+
'important': {
|
|
45
|
+
icon: `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
|
46
|
+
<g stroke-width="0"></g>
|
|
47
|
+
<g stroke-linecap="round" stroke-linejoin="round"></g>
|
|
48
|
+
<g>
|
|
49
|
+
<path fill="currentColor" d="M9,14a1.5,1.5,0,1,1,1.5068-1.5A1.5035,1.5035,0,0,1,9,14Z"></path>
|
|
50
|
+
<path fill="currentColor" 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"></path>
|
|
51
|
+
<path fill="currentColor" 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"></path>
|
|
52
|
+
</g>
|
|
53
|
+
</svg>`,
|
|
54
|
+
type: 'important'
|
|
55
|
+
},
|
|
56
|
+
'quote': {
|
|
57
|
+
icon: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
58
|
+
<g stroke-linecap="round" stroke-linejoin="round"></g>
|
|
59
|
+
<g>
|
|
60
|
+
<path
|
|
61
|
+
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"
|
|
62
|
+
stroke-width="1.5" stroke-linejoin="round"></path>
|
|
63
|
+
<path
|
|
64
|
+
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"
|
|
65
|
+
stroke-width="1.5" stroke-linejoin="round"></path>
|
|
66
|
+
</g>
|
|
67
|
+
</svg>`,
|
|
68
|
+
type: 'quote'
|
|
69
|
+
},
|
|
70
|
+
'bonus': {
|
|
71
|
+
icon: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
72
|
+
<g stroke-linecap="round" stroke-linejoin="round"></g>
|
|
73
|
+
<g>
|
|
74
|
+
<path
|
|
75
|
+
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"
|
|
76
|
+
stroke-width="1.5" stroke-linecap="round"></path>
|
|
77
|
+
<path d="M2.08887 16C3.20445 15.121 4.68639 14.7971 6.08887 15.1257" stroke-width="1.5"
|
|
78
|
+
stroke-linecap="round"></path>
|
|
79
|
+
<path d="M2.08887 10.5C3.08887 10 3.37862 10.0605 4.08887 10" stroke-width="1.5"
|
|
80
|
+
stroke-linecap="round"></path>
|
|
81
|
+
<path d="M2 5.60867L2.20816 5.48676C4.41383 4.19506 6.75032 3.84687 8.95304 4.48161L9.16092 4.54152"
|
|
82
|
+
stroke-width="1.5" stroke-linecap="round"></path>
|
|
83
|
+
</g>
|
|
84
|
+
</svg>`,
|
|
85
|
+
type: 'bonus'
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
// Get the styles content
|
|
89
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
90
|
+
const __dirname = dirname(__filename);
|
|
91
|
+
// Look for styles.css in the package root (one level up from dist)
|
|
92
|
+
const stylesPath = join(__dirname, 'styles.css');
|
|
93
|
+
const styles = readFileSync(stylesPath, 'utf-8');
|
|
94
|
+
export default function remarkNotes() {
|
|
95
|
+
return (tree) => {
|
|
96
|
+
let hasInjectedStyles = false;
|
|
97
|
+
visit(tree, 'root', (node) => {
|
|
98
|
+
if (!hasInjectedStyles) {
|
|
99
|
+
// Inject styles at the beginning of the document
|
|
100
|
+
node.children.unshift({
|
|
101
|
+
type: 'html',
|
|
102
|
+
value: `<style>${styles}</style>`
|
|
103
|
+
});
|
|
104
|
+
hasInjectedStyles = true;
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
visit(tree, 'blockquote', (node) => {
|
|
108
|
+
const firstParagraph = node.children[0];
|
|
109
|
+
if (!firstParagraph)
|
|
110
|
+
return;
|
|
111
|
+
const firstChild = firstParagraph.children[0];
|
|
112
|
+
if (!firstChild || firstChild.type !== 'text')
|
|
113
|
+
return;
|
|
114
|
+
const textNode = firstChild;
|
|
115
|
+
if (!textNode)
|
|
116
|
+
return;
|
|
117
|
+
// Updated pattern to match [!type]
|
|
118
|
+
const match = textNode.value.match(/^\[!(\w+)\]/);
|
|
119
|
+
if (!match)
|
|
120
|
+
return;
|
|
121
|
+
const noteType = match[1].toLowerCase(); // Convert to lowercase to match our types
|
|
122
|
+
if (noteType in noteTypes) {
|
|
123
|
+
const noteConfig = noteTypes[noteType];
|
|
124
|
+
// Create a clone of the blockquote children to preserve markdown structure
|
|
125
|
+
const children = [...node.children];
|
|
126
|
+
// Process the first paragraph to remove the note marker
|
|
127
|
+
if (children.length > 0 && children[0].type === 'paragraph') {
|
|
128
|
+
const firstPara = children[0];
|
|
129
|
+
const firstTextNode = firstPara.children[0];
|
|
130
|
+
if (firstTextNode && firstTextNode.type === 'text') {
|
|
131
|
+
// Only remove the marker from the text content
|
|
132
|
+
firstTextNode.value = firstTextNode.value.replace(/^\[!\w+\]\s*/, '');
|
|
133
|
+
// If the text node is now empty and it's the only child, remove it
|
|
134
|
+
if (firstTextNode.value === '' && firstPara.children.length === 1) {
|
|
135
|
+
children.shift();
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
// Convert the modified markdown structure to HTML
|
|
140
|
+
const contentHast = toHast({
|
|
141
|
+
type: 'root',
|
|
142
|
+
children: children
|
|
143
|
+
});
|
|
144
|
+
// Convert hast to HTML string
|
|
145
|
+
const contentHtml = contentHast ? toHtml(contentHast) : '';
|
|
146
|
+
// Create HTML structure using classes
|
|
147
|
+
const html = {
|
|
148
|
+
type: 'html',
|
|
149
|
+
value: `
|
|
150
|
+
<div class="remark-note ${noteConfig.type}">
|
|
151
|
+
<div class="remark-note-header">
|
|
152
|
+
<span class="remark-note-icon" data-type="${noteConfig.type}">${noteConfig.icon}</span>
|
|
153
|
+
<span class="remark-note-title">${noteType}</span>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="remark-note-content">
|
|
156
|
+
${contentHtml}
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
`
|
|
160
|
+
};
|
|
161
|
+
// Replace the blockquote with our HTML
|
|
162
|
+
Object.assign(node, html);
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
};
|
|
166
|
+
}
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.remark-note{border:1px solid;border-radius:.5rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:1.5rem 0;padding:1.25rem;transition:all .2s ease-in-out}.remark-note-header{align-items:center;display:flex;gap:.75rem;margin-bottom:1rem}.remark-note-icon{align-items:center;border-radius:.5rem;display:flex;font-size:1.25rem;height:1.25rem;justify-content:center;width:1.25rem}.remark-note-icon>svg{height:100%;width:auto;fill:none}.remark-note-title{font-size:.85rem;font-weight:700;letter-spacing:.025em;line-height:.85rem;text-transform:uppercase}.remark-note-content{color:#1f2937;font-size:1rem;line-height:1.625}.remark-note.note{background-color:#318ce710;border-color:#318ce7;box-shadow:0 4px 6px -1px rgba(59,130,246,.1),0 2px 4px -2px rgba(59,130,246,.1)}.remark-note.note .remark-note-icon{stroke:#318ce7}.remark-note.note .remark-note-title{color:#318ce7}.remark-note.important{background-color:#ef9b0f10;border-color:#ef9b0f;box-shadow:0 4px 6px -1px rgba(147,51,234,.1),0 2px 4px -2px rgba(147,51,234,.1)}.remark-note.important .remark-note-icon,.remark-note.important .remark-note-title{color:#ef9b0f}.remark-note.quote{background-color:#8c92ac10;border-color:#8c92ac;box-shadow:0 4px 6px -1px rgba(75,85,99,.1),0 2px 4px -2px rgba(75,85,99,.1)}.remark-note.quote .remark-note-icon{stroke:#8c92ac}.remark-note.quote .remark-note-title{color:#8c92ac}.remark-note.bonus{background-color:#9966cc10;border-color:#96c;box-shadow:0 4px 6px -1px rgba(219,39,119,.1),0 2px 4px -2px rgba(219,39,119,.1)}.remark-note.bonus .remark-note-icon{stroke:#96c}.remark-note.bonus .remark-note-title{color:#96c}.remark-note.tip{background-color:#00b7eb10;border-color:#00b7eb;box-shadow:0 4px 6px -1px rgba(59,130,246,.1),0 2px 4px -2px rgba(59,130,246,.1)}.remark-note.tip .remark-note-icon>svg{stroke:#00b7eb}.remark-note.tip .remark-note-title{color:#00b7eb}
|
package/dist/test.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/test.js
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { unified } from 'unified';
|
|
2
|
+
import remarkParse from 'remark-parse';
|
|
3
|
+
import remarkStringify from 'remark-stringify';
|
|
4
|
+
import remarkNotes from './index.js';
|
|
5
|
+
const markdown = `
|
|
6
|
+
# Test Document
|
|
7
|
+
|
|
8
|
+
> [!Note]
|
|
9
|
+
> This is a note about something important.
|
|
10
|
+
|
|
11
|
+
> [!tip]
|
|
12
|
+
> Here's a helpful tip for you.
|
|
13
|
+
|
|
14
|
+
> [!important]
|
|
15
|
+
> This is a very important message!
|
|
16
|
+
|
|
17
|
+
> [!quote]
|
|
18
|
+
> Here's a memorable quote.
|
|
19
|
+
|
|
20
|
+
> [!bonus]
|
|
21
|
+
> Here's some extra content for you!
|
|
22
|
+
`;
|
|
23
|
+
async function main() {
|
|
24
|
+
try {
|
|
25
|
+
// Convert to HTML
|
|
26
|
+
const file = await unified()
|
|
27
|
+
.use(remarkParse)
|
|
28
|
+
.use(remarkNotes)
|
|
29
|
+
.use(remarkStringify)
|
|
30
|
+
.process(markdown);
|
|
31
|
+
const output = String(file);
|
|
32
|
+
console.log('Final output:', output);
|
|
33
|
+
// Basic validation
|
|
34
|
+
if (!output.includes('<style>')) {
|
|
35
|
+
throw new Error('Styles were not injected');
|
|
36
|
+
}
|
|
37
|
+
if (!output.includes('remark-note')) {
|
|
38
|
+
throw new Error('Note classes were not properly added');
|
|
39
|
+
}
|
|
40
|
+
// Test for content
|
|
41
|
+
if (!output.includes('This is a note about something important')) {
|
|
42
|
+
throw new Error('Note content is missing');
|
|
43
|
+
}
|
|
44
|
+
// Test for each note type
|
|
45
|
+
['note', 'tip', 'important', 'quote', 'bonus'].forEach(type => {
|
|
46
|
+
if (!output.includes(`remark-note ${type}`)) {
|
|
47
|
+
throw new Error(`${type} note was not properly transformed`);
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
console.log('✅ Test passed: Styles were injected and notes were transformed with content');
|
|
51
|
+
}
|
|
52
|
+
catch (error) {
|
|
53
|
+
console.error('❌ Test failed:', error);
|
|
54
|
+
process.exit(1);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
main().catch(console.error);
|
package/package.json
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "remark-notes-plugin",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A remark plugin that transforms markdown quotes into styled note elements",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"bugs": {
|
|
7
|
+
"url": "https://github.com/rishichawda/remark-notes-plugin/issues"
|
|
8
|
+
},
|
|
9
|
+
"homepage": "https://github.com/rishichawda/remark-notes-plugin#readme",
|
|
10
|
+
"author": "rishichawda",
|
|
11
|
+
"repository": {
|
|
12
|
+
"url": "https://github.com/rishichawda/remark-notes-plugin.git"
|
|
13
|
+
},
|
|
14
|
+
"type": "module",
|
|
15
|
+
"main": "dist/index.js",
|
|
16
|
+
"types": "dist/index.d.ts",
|
|
17
|
+
"files": [
|
|
18
|
+
"dist/",
|
|
19
|
+
"LICENSE",
|
|
20
|
+
"README.md"
|
|
21
|
+
],
|
|
22
|
+
"scripts": {
|
|
23
|
+
"build:ts": "tsc",
|
|
24
|
+
"watch:ts": "tsc -w",
|
|
25
|
+
"build:css": "postcss styles.css -o dist/styles.css",
|
|
26
|
+
"watch:css": "postcss styles.css -o dist/styles.css --watch",
|
|
27
|
+
"build": "yarn build:ts && yarn build:css",
|
|
28
|
+
"watch": "yarn watch:ts & yarn watch:css",
|
|
29
|
+
"test": "node --loader ts-node/esm test.ts"
|
|
30
|
+
},
|
|
31
|
+
"keywords": [
|
|
32
|
+
"remark",
|
|
33
|
+
"remark-plugin",
|
|
34
|
+
"markdown",
|
|
35
|
+
"notes",
|
|
36
|
+
"astro"
|
|
37
|
+
],
|
|
38
|
+
"dependencies": {
|
|
39
|
+
"hast-util-to-html": "^9.0.5",
|
|
40
|
+
"mdast": "^3.0.0",
|
|
41
|
+
"mdast-util-to-hast": "^13.2.0",
|
|
42
|
+
"remark": "^15.0.1",
|
|
43
|
+
"unified": "^11.0.4",
|
|
44
|
+
"unist-util-visit": "^5.0.0"
|
|
45
|
+
},
|
|
46
|
+
"devDependencies": {
|
|
47
|
+
"@types/node": "^20.10.5",
|
|
48
|
+
"autoprefixer": "^10.4.21",
|
|
49
|
+
"cssnano": "^7.0.6",
|
|
50
|
+
"postcss": "^8.5.3",
|
|
51
|
+
"postcss-cli": "^11.0.1",
|
|
52
|
+
"ts-node": "^10.9.2",
|
|
53
|
+
"typescript": "^5.3.3"
|
|
54
|
+
}
|
|
55
|
+
}
|