Merge pull request #7 from rishichawda/update-docs

update docs to include new config options

Author: rishichawda

.github/workflows/test.yml

@@ -1,29 +1,14 @@
-name: Test
+name: Pull Request tests
 
 on:
   pull_request:
     branches: [main]
-    paths:
-      - 'lib/**'
-      - 'index.ts'
-      - 'styles.css'
-      - 'package.json'
-      - '__tests__/**'
-      - 'tsconfig.json'
-      - '.github/workflows/test.yml'
   push:
     branches: [main]
-    paths:
-      - 'lib/**'
-      - 'index.ts'
-      - 'styles.css'
-      - 'package.json'
-      - '__tests__/**'
-      - 'tsconfig.json'
-      - '.github/workflows/test.yml'
 
 jobs:
   test:
+    name: plugin/tests (ubuntu-latest, Node v${{ matrix.node-version }})
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -52,6 +37,7 @@ jobs:
         run: yarn build:ts
 
   lint:
+    name: plugin/lint (ubuntu-latest, Node v22)
     runs-on: ubuntu-latest
 
     steps:
@@ -72,3 +58,32 @@ jobs:
 
       - name: Check TypeScript types
         run: yarn build:ts --noEmit
+
+  docs-build:
+    name: docs/build (ubuntu-latest, Node v18)
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'yarn'
+
+      - name: Install Root Dependencies & Build Plugin
+        run: |
+          yarn install --frozen-lockfile
+          yarn build
+
+      - name: Install Docs Dependencies
+        run: |
+          cd docs
+          yarn install --frozen-lockfile
+
+      - name: Build Documentation Site
+        run: |
+          cd docs
+          yarn build

README.md

@@ -22,10 +22,13 @@ npm install remark-notes-plugin
 
 ## 🚀 Usage
 
+### Basic Usage
+
 ```typescript
 import { unified } from 'unified'
 import remarkParse from 'remark-parse'
-import remarkStringify from 'remark-stringify'
+import remarkRehype from 'remark-rehype'
+import rehypeStringify from 'rehype-stringify'
 import remarkNotes from 'remark-notes-plugin'
 
 const markdown = `
@@ -48,12 +51,40 @@ const markdown = `
 const file = await unified()
   .use(remarkParse)
   .use(remarkNotes)
-  .use(remarkStringify)
+  .use(remarkRehype)
+  .use(rehypeStringify)
   .process(markdown)
 
 console.log(String(file))
 ```
 
+### Configuration Options
+
+```typescript
+import remarkNotes from 'remark-notes-plugin'
+
+// Default configuration (styles are auto-injected)
+unified().use(remarkNotes)
+
+// Custom class prefix
+unified().use(remarkNotes, { 
+  classPrefix: 'my-callout' 
+})
+// Generates classes like: my-callout-remark-note, my-callout-remark-note-tip, etc.
+
+// Disable automatic style injection (import CSS manually)
+unified().use(remarkNotes, { 
+  injectStyles: false 
+})
+// Then import: import 'remark-notes-plugin/styles.css'
+
+// Both options
+unified().use(remarkNotes, { 
+  classPrefix: 'custom',
+  injectStyles: false 
+})
+```
+
 ## 📝 Note Types
 
 The plugin supports five distinct types of notes, each with its own unique style:
@@ -90,34 +121,75 @@ The plugin supports five distinct types of notes, each with its own unique style
 
 ## 🎨 Styling
 
-Default styles are loaded automatically when you use the plugin. You can also modify the styles since the plugin uses a modular class structure that makes it easy to customize the appearance:
+By default, styles are automatically injected into your document. You can customize this behavior:
+
+### Automatic Style Injection (Default)
+
+Styles are included automatically when you use the plugin with default settings:
+
+```typescript
+unified().use(remarkNotes) // Styles auto-injected
+```
+
+### Manual Style Import
+
+If you prefer to manage styles yourself (e.g., for SSR or custom build tools), disable auto-injection:
+
+```typescript
+unified().use(remarkNotes, { injectStyles: false })
+```
+
+Then manually import the CSS:
+
+```typescript
+import 'remark-notes-plugin/styles.css'
+```
+
+### Customizing Styles
+
+The plugin uses a modular class structure that makes it easy to customize the appearance:
 
-### Base Classes
+#### Base Classes
 
 - `.remark-note` - Base container for all note types
 - `.remark-note-header` - Note header container
 - `.remark-note-icon` - Icon styling
 - `.remark-note-title` - Note title styling
 - `.remark-note-content` - Note content container
 
-### Type-Specific Classes
+#### Type-Specific Classes
+
+- `.remark-note-note` - Note type styling
+- `.remark-note-tip` - Tip type styling
+- `.remark-note-important` - Important type styling
+- `.remark-note-quote` - Quote type styling
+- `.remark-note-bonus` - Bonus type styling
+
+#### Custom Class Prefix
+
+You can add a custom prefix to all CSS classes:
+
+```typescript
+unified().use(remarkNotes, { classPrefix: 'my-callout' })
+```
+
+This generates classes like:
 
-- `.remark-note.note` - Note type styling
-- `.remark-note.tip` - Tip type styling
-- `.remark-note.important` - Important type styling
-- `.remark-note.quote` - Quote type styling
-- `.remark-note.bonus` - Bonus type styling
+- `.my-callout-remark-note`
+- `.my-callout-remark-note-tip`
+- `.my-callout-remark-note-header`
+- etc.
 
-### Customization Example
+#### Customization Example
 
 ```css
 /* Example: Customize the Note type */
-.remark-note.note {
+.remark-note-note {
   background-color: #your-color;
   border-color: #your-border-color;
 }
 
-.remark-note.note .remark-note-title {
+.remark-note-note .remark-note-title {
   color: #your-text-color;
 }
 ```
@@ -152,4 +224,4 @@ Please ensure your pull request passes all tests and includes appropriate docume
 
 ---
 
-⭐️ If you find this plugin useful, please consider giving it a star on GitHub! ⭐️ 
+⭐️ If you find this plugin useful, please consider giving it a star on GitHub! ⭐️