From 7e1cd0c10ab1bc191a9b9d81f73f26490ccbc330 Mon Sep 17 00:00:00 2001
From: rishichawda <rishichawda@users.noreply.github.com>
Date: Mon, 6 Oct 2025 20:14:26 +0530
Subject: [PATCH 1/3] update docs to include new config options

Signed-off-by: rishichawda <rishichawda@users.noreply.github.com>
---
 README.md                                   | 100 +++++++++++++++++---
 docs/docs/examples/customization.md         |  88 ++++++++++++-----
 docs/docs/getting-started/advanced-usage.md |  79 +++++++++++++++-
 docs/docs/getting-started/installation.md   |  31 ++++--
 docs/docs/getting-started/usage.md          |  52 ++++++++--
 docs/docs/intro.md                          |   3 +
 6 files changed, 298 insertions(+), 55 deletions(-)

diff --git a/README.md b/README.md
index 53e2d3b..5f2678d 100644
--- a/README.md
+++ b/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,9 +121,35 @@ 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
@@ -100,24 +157,39 @@ Default styles are loaded automatically when you use the plugin. You can also mo
 - `.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! ⭐️ 
\ No newline at end of file
+⭐️ If you find this plugin useful, please consider giving it a star on GitHub! ⭐️
diff --git a/docs/docs/examples/customization.md b/docs/docs/examples/customization.md
index f289a35..bf6b4e2 100644
--- a/docs/docs/examples/customization.md
+++ b/docs/docs/examples/customization.md
@@ -11,19 +11,52 @@ You can customize the appearance of your notes by overriding the default CSS sty
 The plugin generates the following HTML structure for each note:
 
 ```html
-<div class="remark-note [type]">
+<blockquote class="remark-note remark-note-[type]">
   <div class="remark-note-header">
-    <span class="remark-note-icon"></span>
+    <span class="remark-note-icon"><!-- SVG icon --></span>
     <span class="remark-note-title">[Type]</span>
   </div>
-  <div>
-    <p class="remark-note-content">Note content...</p>
+  <div class="remark-note-content">
+    <p>Note content...</p>
   </div>
-</div>
+</blockquote>
 ```
 
 Where `[type]` is one of: `note`, `tip`, `important`, `quote`, or `bonus`.
 
+### Available CSS Classes
+
+- `.remark-note` - Base container for all note types
+- `.remark-note-[type]` - Type-specific class (e.g., `.remark-note-tip`)
+- `.remark-note-header` - Header container with icon and title
+- `.remark-note-icon` - Icon container
+- `.remark-note-title` - Title text
+- `.remark-note-content` - Content wrapper
+
+### Custom Class Prefix
+
+You can add a custom prefix to all CSS classes using the `classPrefix` option:
+
+```javascript
+import { unified } from 'unified';
+import remarkNotes from 'remark-notes-plugin';
+
+unified().use(remarkNotes, { 
+  classPrefix: 'my-callout' 
+});
+```
+
+This will generate classes like:
+
+- `.my-callout-remark-note`
+- `.my-callout-remark-note-tip`
+- `.my-callout-remark-note-header`
+- `.my-callout-remark-note-icon`
+- `.my-callout-remark-note-title`
+- `.my-callout-remark-note-content`
+
+This is useful for avoiding CSS conflicts or integrating with existing design systems.
+
 ## Basic Customization
 
 You can customize the notes by targeting these CSS classes in your own stylesheet:
@@ -35,15 +68,20 @@ You can customize the notes by targeting these CSS classes in your own styleshee
 }
 
 /* Change the border color of tip notes */
-.remark-note.tip {
+.remark-note-tip {
   border-color: #4caf50;
 }
 
 /* Change the title style of important notes */
-.remark-note.important .remark-note-title {
+.remark-note-important .remark-note-title {
   color: #f44336;
   font-weight: bold;
 }
+
+/* With custom prefix 'my-callout' */
+.my-callout-remark-note-tip {
+  border-color: #4caf50;
+}
 ```
 
 ## Complete Customization Example
@@ -60,70 +98,70 @@ Here's a complete example that changes the styling for all note types:
 }
 
 /* Note title styles */
-.remark-note.title {
+.remark-note-title {
   font-size: 1.1em;
   font-weight: 600;
   margin-bottom: 8px;
 }
 
 /* Standard note */
-.remark-note.note {
+.remark-note-note {
   background-color: #e8f4fd;
   border-left: 4px solid #1e88e5;
 }
-.remark-note.note .remark-note.title {
+.remark-note-note .remark-note-title {
   color: #1565c0;
 }
 
 /* Tip note */
-.remark-note.tip {
+.remark-note-tip {
   background-color: #e8f5e9;
   border-left: 4px solid #43a047;
 }
-.remark-note.tip .remark-note-title {
+.remark-note-tip .remark-note-title {
   color: #2e7d32;
 }
 
 /* Important note */
-.remark-note.important {
+.remark-note-important {
   background-color: #ffebee;
   border-left: 4px solid #e53935;
 }
-.remark-note.important .remark-note-title {
+.remark-note-important .remark-note-title {
   color: #c62828;
 }
 
 /* Quote note */
-.remark-note.quote {
+.remark-note-quote {
   background-color: #ede7f6;
   border-left: 4px solid #7e57c2;
 }
-.remark-note.quote .remark-note-title {
+.remark-note-quote .remark-note-title {
   color: #5e35b1;
 }
 
 /* Bonus note */
-.remark-note.bonus {
+.remark-note-bonus {
   background-color: #fff8e1;
   border-left: 4px solid #ffb300;
 }
-.remark-note.bonus .remark-note-title {
+.remark-note-bonus .remark-note-title {
   color: #ff8f00;
 }
 ```
 
 ## Applying Custom Styles
 
-Add your custom styles to your project after importing the default styles. For example:
+Add your custom styles to your project. If you're using manual CSS import (with `injectStyles: false`), import your custom styles after the default ones:
 
 ```javascript
-// Import the default styles first
-import 'remark-notes-plugin/dist/styles.css';
+// Import the default styles first (only if injectStyles: false)
+import 'remark-notes-plugin/styles.css';
 // Then import your custom styles
 import './your-custom-styles.css';
 ```
 
-This ensures that your custom styles override the default ones.
+If you're using the default auto-injection, simply include your custom stylesheet in your project and the styles will override the defaults due to CSS specificity.
 
 ## Dark Mode Support
 
@@ -151,6 +189,10 @@ Or if you're using a theme toggle, you can use CSS classes:
   background-color: #1e1e1e;
   color: #e0e0e0;
 }
+
+.dark-theme .remark-note-title {
+  color: #ffffff;
+}
 ```
 
-Adapt these examples to fit your website's specific styling needs and color scheme.
\ No newline at end of file
+Adapt these examples to fit your website's specific styling needs and color scheme.
diff --git a/docs/docs/getting-started/advanced-usage.md b/docs/docs/getting-started/advanced-usage.md
index fe6e184..f648ae3 100644
--- a/docs/docs/getting-started/advanced-usage.md
+++ b/docs/docs/getting-started/advanced-usage.md
@@ -19,6 +19,78 @@ import { MyComponent } from '../components/MyComponent';
 > <MyComponent />
 ```
 
+## Plugin Configuration
+
+`remark-notes-plugin` supports two configuration options to customize its behavior:
+
+### Class Prefix
+
+Add a custom prefix to all generated CSS class names:
+
+```javascript
+import { unified } from 'unified';
+import remarkNotes from 'remark-notes-plugin';
+
+unified().use(remarkNotes, { 
+  classPrefix: 'my-callout' 
+});
+```
+
+**Default classes** (no prefix):
+
+- `.remark-note`
+- `.remark-note-tip`
+- `.remark-note-header`
+- `.remark-note-icon`
+- etc.
+
+**With prefix** `'my-callout'`:
+
+- `.my-callout-remark-note`
+- `.my-callout-remark-note-tip`
+- `.my-callout-remark-note-header`
+- `.my-callout-remark-note-icon`
+- etc.
+
+This is useful when you need to avoid CSS conflicts or integrate with existing design systems.
+
+### Style Injection Control
+
+Control whether the plugin automatically injects CSS styles:
+
+```javascript
+// Automatic injection (default)
+unified().use(remarkNotes);
+
+// Disable auto-injection (manual import)
+unified().use(remarkNotes, { injectStyles: false });
+```
+
+When `injectStyles` is `false`, you must manually import the styles:
+
+```javascript
+import 'remark-notes-plugin/styles.css';
+```
+
+**When to disable auto-injection:**
+
+- Server-Side Rendering (SSR) with separate CSS extraction
+- Using build tools that handle CSS imports separately (Vite, Webpack, etc.)
+- Providing completely custom styles
+- Better control over style loading order and caching
+
+
+### Combined Configuration
+
+You can use both options together:
+
+```javascript
+unified().use(remarkNotes, {
+  classPrefix: 'custom',
+  injectStyles: false
+});
+```
+
 ## Integrating with Other Remark Plugins
 
 `remark-notes-plugin` can be used alongside other remark plugins. Here's how to use it with other popular plugins:
@@ -60,6 +132,9 @@ const processor = unified()
 const result = await processor.process(markdownContent);
 ```
 
+**Note**: The order of plugins matters. `remark-notes-plugin` should be placed before the final output transformer (like `remark-rehype` or `rehype-stringify`).
+
+
 ## Programmatic HTML Generation
 
 You can also generate HTML for notes programmatically without writing markdown:
@@ -111,7 +186,3 @@ export default function Document() {
   );
 }
 ```
-
-## Plugin Configuration
-
-In the future, `remark-notes-plugin` may support custom configuration options. Check the GitHub repository for the latest configuration options.
\ No newline at end of file
diff --git a/docs/docs/getting-started/installation.md b/docs/docs/getting-started/installation.md
index 18f2e36..3340d53 100644
--- a/docs/docs/getting-started/installation.md
+++ b/docs/docs/getting-started/installation.md
@@ -25,18 +25,31 @@ This plugin is compatible with:
 
 ## Including CSS Styles
 
-The plugin comes with default styles that are included in your project by default. However, if you want to find them in your project, there are two ways to do this:
+The plugin automatically injects styles by default, so no additional setup is required. However, you can customize this behavior:
 
-### Option 1: Import CSS directly in JavaScript/TypeScript
+### Option 1: Automatic Style Injection (Default)
 
-If you're using a bundler that supports CSS imports (like webpack, Parcel, Vite, etc.), you can import the styles directly:
+By default, the plugin automatically injects styles when you use it:
 
 ```javascript
-// Import the plugin styles
-import 'remark-notes-plugin/dist/styles.css';
+import remarkNotes from 'remark-notes-plugin';
+
+// Styles are automatically included
+unified().use(remarkNotes);
+```
+
+### Option 2: Manual Style Import
+
+If you prefer to control when and how styles are loaded (e.g., for SSR, custom build tools, or better caching), you can disable auto-injection:
+
+```javascript
+import remarkNotes from 'remark-notes-plugin';
+import 'remark-notes-plugin/styles.css'; // Import styles manually
+
+unified().use(remarkNotes, { injectStyles: false });
 ```
 
-### Option 2: Include CSS in your HTML
+### Option 3: Include CSS in HTML
 
 Alternatively, you can include the CSS file directly in your HTML:
 
@@ -44,4 +57,8 @@ Alternatively, you can include the CSS file directly in your HTML:
 <link rel="stylesheet" href="node_modules/remark-notes-plugin/dist/styles.css">
 ```
 
-Or copy the CSS file to your public assets directory and include it from there.
\ No newline at end of file
+Or copy the CSS file to your public assets directory and include it from there.
+
+:::tip
+For most use cases, the default automatic injection works great. Only disable it if you have specific requirements like SSR optimization or custom style bundling.
+:::
\ No newline at end of file
diff --git a/docs/docs/getting-started/usage.md b/docs/docs/getting-started/usage.md
index 3cbadbd..1c5e634 100644
--- a/docs/docs/getting-started/usage.md
+++ b/docs/docs/getting-started/usage.md
@@ -11,14 +11,18 @@ This guide explains how to use `remark-notes-plugin` with various frameworks and
 Here's how to use the plugin with the remark processor:
 
 ```javascript
-import { remark } from 'remark';
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
 import remarkNotes from 'remark-notes-plugin';
-import html from 'remark-html';
+import remarkRehype from 'remark-rehype';
+import rehypeStringify from 'rehype-stringify';
 
 // Process markdown content with the notes plugin
-const result = await remark()
+const result = await unified()
+  .use(remarkParse)
   .use(remarkNotes)
-  .use(html)
+  .use(remarkRehype)
+  .use(rehypeStringify)
   .process(`
     > [!note]
     > This is a note.
@@ -27,6 +31,34 @@ const result = await remark()
 console.log(result.toString());
 ```
 
+## Configuration Options
+
+The plugin accepts an optional configuration object:
+
+```javascript
+import remarkNotes from 'remark-notes-plugin';
+
+// Default configuration (auto-inject styles)
+unified().use(remarkNotes);
+
+// Custom class prefix
+unified().use(remarkNotes, { 
+  classPrefix: 'my-callout' 
+});
+// Generates: my-callout-remark-note, my-callout-remark-note-tip, etc.
+
+// Disable automatic style injection
+unified().use(remarkNotes, { 
+  injectStyles: false 
+});
+
+// Both options
+unified().use(remarkNotes, { 
+  classPrefix: 'custom',
+  injectStyles: false 
+});
+```
+
 ## With Astro
 
 Astro has excellent support for remark plugins. Add the plugin to your `astro.config.mjs`:
@@ -64,7 +96,8 @@ Import the CSS in your `_app.js` or `_app.tsx`:
 
 ```javascript
 // pages/_app.js
-import 'remark-notes-plugin/dist/styles.css';
+// Only needed if you disable auto-injection
+import 'remark-notes-plugin/styles.css';
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />;
@@ -73,6 +106,8 @@ function MyApp({ Component, pageProps }) {
 export default MyApp;
 ```
 
+Or use the default auto-injection by not disabling it in the plugin options.
+
 ## With Gatsby
 
 For Gatsby projects:
@@ -95,11 +130,14 @@ Import the CSS in your layout component:
 
 ```javascript
 // src/components/layout.js
-import 'remark-notes-plugin/dist/styles.css';
+// Only needed if you disable auto-injection
+import 'remark-notes-plugin/styles.css';
 
 const Layout = ({ children }) => {
   return <div>{children}</div>;
 };
 
 export default Layout;
-```
\ No newline at end of file
+```
+
+Or use the default auto-injection by not disabling it in the plugin options.
diff --git a/docs/docs/intro.md b/docs/docs/intro.md
index 827f9de..734800c 100644
--- a/docs/docs/intro.md
+++ b/docs/docs/intro.md
@@ -24,9 +24,12 @@ This plugin enhances your markdown content by converting standard blockquotes in
 
 - Simple integration with any remark-based markdown pipeline
 - Five distinct note types with different styling
+- Automatic style injection (configurable)
+- Custom CSS class prefixes for better control
 - Easy to use with popular frameworks like Astro, Gatsby, Next.js, and more
 - Fully customizable through CSS
 - Lightweight with minimal dependencies
+- MDX compatible
 
 ## Quick Example
 

From ec9b4c1729d29e1e207b03ed35d364f3484445ff Mon Sep 17 00:00:00 2001
From: rishichawda <rishichawda@users.noreply.github.com>
Date: Mon, 6 Oct 2025 20:21:17 +0530
Subject: [PATCH 2/3] build docs on pr

Signed-off-by: rishichawda <rishichawda@users.noreply.github.com>
---
 .github/workflows/test.yml | 44 ++++++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 4618aa8..08d5d31 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -3,24 +3,8 @@ name: Test
 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:
@@ -72,3 +56,31 @@ jobs:
 
       - name: Check TypeScript types
         run: yarn build:ts --noEmit
+
+  docs-build:
+    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

From 80be5b73618df00c58dc192062ca5a843f3fde57 Mon Sep 17 00:00:00 2001
From: rishichawda <rishichawda@users.noreply.github.com>
Date: Mon, 6 Oct 2025 20:27:22 +0530
Subject: [PATCH 3/3] update job names

Signed-off-by: rishichawda <rishichawda@users.noreply.github.com>
---
 .github/workflows/test.yml | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 08d5d31..676cd8b 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,4 +1,4 @@
-name: Test
+name: Pull Request tests
 
 on:
   pull_request:
@@ -8,6 +8,7 @@ on:
 
 jobs:
   test:
+    name: plugin/tests (ubuntu-latest, Node v${{ matrix.node-version }})
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -36,6 +37,7 @@ jobs:
         run: yarn build:ts
 
   lint:
+    name: plugin/lint (ubuntu-latest, Node v22)
     runs-on: ubuntu-latest
     
     steps:
@@ -58,6 +60,7 @@ jobs:
         run: yarn build:ts --noEmit
 
   docs-build:
+    name: docs/build (ubuntu-latest, Node v18)
     runs-on: ubuntu-latest
     
     steps: