Merge pull request #4 from rishichawda/update-docs

rishichawda · web-flow · commit 008fd4e26095 · 2025-10-06T19:36:57.000+05:30
update docusaurus pages
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
@@ -5,6 +5,10 @@ on:
     branches: [main]
     paths:
       - 'docs/**'
+      - 'lib/**'
+      - 'index.ts'
+      - 'styles.css'
+      - 'package.json'
       - 'README.md'
       - '.github/workflows/deploy-docs.yml'
 
@@ -39,21 +43,15 @@ jobs:
       - name: Setup Pages
         uses: actions/configure-pages@v4
 
-      - name: Install Dependencies
-        run: |
-          cd docs
-          yarn install --frozen-lockfile
-
-      # Import plugin into the docs to showcase examples
-      - name: Build Plugin
+      - name: Install Root Dependencies & Build Plugin
         run: |
           yarn install --frozen-lockfile
           yarn build
 
-      - name: Copy Plugin to Docs
+      - name: Install Docs Dependencies
         run: |
-          mkdir -p docs/node_modules/remark-notes-plugin/dist
-          cp -r dist/* docs/node_modules/remark-notes-plugin/dist/
+          cd docs
+          yarn install --frozen-lockfile
 
       - name: Build Documentation Site
         run: |
diff --git a/docs/docs/examples/note-types.mdx b/docs/docs/examples/note-types.mdx
@@ -10,7 +10,8 @@ sidebar_position: 1
 
 Used for providing general information or notes to the reader.
 
-<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>
+> [!note]
+> This is a standard note that provides additional information to the reader.
 
 **Markdown Syntax**:
 ```markdown
@@ -22,7 +23,8 @@ Used for providing general information or notes to the reader.
 
 Used for providing helpful tips and advice.
 
-<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>
+> [!tip]
+> Here's a helpful tip that can improve your workflow or code quality.
 
 **Markdown Syntax**:
 ```markdown
@@ -34,7 +36,8 @@ Used for providing helpful tips and advice.
 
 Used for highlighting critical information that requires special attention.
 
-<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>
+> [!important]
+> This information is crucial and requires your attention to avoid issues or errors.
 
 **Markdown Syntax**:
 ```markdown
@@ -46,7 +49,8 @@ Used for highlighting critical information that requires special attention.
 
 Used for styling quotations in a distinctive way.
 
-<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>
+> [!quote]
+> "The best way to predict the future is to invent it." — Alan Kay
 
 **Markdown Syntax**:
 ```markdown
@@ -58,7 +62,8 @@ Used for styling quotations in a distinctive way.
 
 Used for providing additional, nice-to-have information or features.
 
-<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>
+> [!bonus]
+> Here's an advanced technique that can further enhance your implementation.
 
 **Markdown Syntax**:
 ```markdown
@@ -70,12 +75,21 @@ Used for providing additional, nice-to-have information or features.
 
 Notes can contain multiple paragraphs and other markdown elements like lists and code blocks.
 
-<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
-console.log('Hello world');</code></pre></div></div>
+> [!note]
+> This note has multiple paragraphs.
+>
+> You can include:
+> - Lists
+> - And other markdown elements
+>
+> ```js
+> // Even code blocks
+> console.log('Hello world');
+> ```
 
 **Markdown Syntax**:
 ```markdown
-> [!notes]
+> [!note]
 > This note has multiple paragraphs.
 >
 > You can include:
diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
@@ -1,6 +1,7 @@
 import {themes as prismThemes} from 'prism-react-renderer';
 import type {Config} from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
+import remarkNotes from 'remark-notes-plugin';
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
@@ -41,6 +42,8 @@ const config: Config = {
           // Remove this to remove the "edit this page" links.
           editUrl:
             'https://github.com/rishichawda/remark-notes-plugin/tree/main/docs',
+          // Add remark plugin to process notes
+          remarkPlugins: [remarkNotes],
         },
         blog: false, // We don't need a blog for this project
         theme: {
diff --git a/docs/package.json b/docs/package.json
@@ -4,6 +4,8 @@
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
+    "prebuild": "cd .. && yarn build",
+    "prestart": "cd .. && yarn build",
     "start": "docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
@@ -22,7 +24,7 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "remark-notes-plugin": "^1.0.2"
+    "remark-notes-plugin": "file:.."
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.7.0",
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -4,6 +4,9 @@
  * work well for content-centric websites.
  */
 
+/* Import remark-notes-plugin styles */
+@import 'remark-notes-plugin/styles.css';
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #25c2a0;
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
@@ -8,7 +8,7 @@ import GitHubRepo from '@site/src/components/GitHubRepo';
 import Heading from '@theme/Heading';
 
 import styles from './index.module.css';
-import 'remark-notes-plugin/dist/styles.css';
+import 'remark-notes-plugin/styles.css';
 
 // Import the SVG logo
 import Logo from '@site/static/img/logo.svg';
diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -4699,23 +4699,6 @@ hast-util-to-estree@^3.0.0:
     unist-util-position "^5.0.0"
     zwitch "^2.0.0"
 
-hast-util-to-html@^9.0.5:
-  version "9.0.5"
-  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz#ccc673a55bb8e85775b08ac28380f72d47167005"
-  integrity sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==
-  dependencies:
-    "@types/hast" "^3.0.0"
-    "@types/unist" "^3.0.0"
-    ccount "^2.0.0"
-    comma-separated-tokens "^2.0.0"
-    hast-util-whitespace "^3.0.0"
-    html-void-elements "^3.0.0"
-    mdast-util-to-hast "^13.0.0"
-    property-information "^7.0.0"
-    space-separated-tokens "^2.0.0"
-    stringify-entities "^4.0.0"
-    zwitch "^2.0.4"
-
 hast-util-to-jsx-runtime@^2.0.0:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz#ff31897aae59f62232e21594eac7ef6b63333e98"
@@ -4757,6 +4740,11 @@ hast-util-whitespace@^3.0.0:
   dependencies:
     "@types/hast" "^3.0.0"
 
+hast@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hast/-/hast-1.0.0.tgz#50615e6b2b0583e5608bc76c47029722f1e00607"
+  integrity sha512-vFUqlRV5C+xqP76Wwq2SrM0kipnmpxJm7OfvVXpB35Fp+Fn4MV+ozr+JZr5qFvyR1q/U+Foim2x+3P+x9S1PLA==
+
 hastscript@^9.0.0:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-9.0.1.tgz#dbc84bef6051d40084342c229c451cd9dc567dff"
@@ -5696,7 +5684,7 @@ mdast-util-phrasing@^4.0.0:
     "@types/mdast" "^4.0.0"
     unist-util-is "^6.0.0"
 
-mdast-util-to-hast@^13.0.0, mdast-util-to-hast@^13.2.0:
+mdast-util-to-hast@^13.0.0:
   version "13.2.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz#5ca58e5b921cc0a3ded1bc02eed79a4fe4fe41f4"
   integrity sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==
@@ -7738,16 +7726,13 @@ remark-mdx@^3.0.0:
     mdast-util-mdx "^3.0.0"
     micromark-extension-mdxjs "^3.0.0"
 
-remark-notes-plugin@^1.0.2:
+"remark-notes-plugin@file:..":
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/remark-notes-plugin/-/remark-notes-plugin-1.0.2.tgz#3d33d5eded1223be2badf69d363c04c5187a7f07"
-  integrity sha512-svtGFefVfLT221KK7nD9nOJlunOM/ghHmE/mEANZEs8759UbKLz/nu1kFPLMUHxEMmJhWhmhADuq4tMISxWt6A==
   dependencies:
-    hast-util-to-html "^9.0.5"
+    hast "^1.0.0"
     mdast "^3.0.0"
-    mdast-util-to-hast "^13.2.0"
-    remark "^15.0.1"
     unified "^11.0.4"
+    unist "^0.0.1"
     unist-util-visit "^5.0.0"
 
 remark-parse@^11.0.0:
@@ -7780,16 +7765,6 @@ remark-stringify@^11.0.0:
     mdast-util-to-markdown "^2.0.0"
     unified "^11.0.0"
 
-remark@^15.0.1:
-  version "15.0.1"
-  resolved "https://registry.yarnpkg.com/remark/-/remark-15.0.1.tgz#ac7e7563260513b66426bc47f850e7aa5862c37c"
-  integrity sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==
-  dependencies:
-    "@types/mdast" "^4.0.0"
-    remark-parse "^11.0.0"
-    remark-stringify "^11.0.0"
-    unified "^11.0.0"
-
 renderkid@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a"
@@ -8641,6 +8616,11 @@ unist-util-visit@^5.0.0:
     unist-util-is "^6.0.0"
     unist-util-visit-parents "^6.0.0"
 
+unist@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/unist/-/unist-0.0.1.tgz#360b99428d032d37724c467e186247c44a1429b1"
+  integrity sha512-bnzuF8b6d47WubA4a5yLqFbuZz/v/NS6eRwUIdOaDmsqzwTlyv8yS1g3M7ISdtBQrigPD3qKK87Cu7zhEfCF3A==
+
 universalify@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
@@ -9020,7 +9000,7 @@ yocto-queue@^1.0.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.2.1.tgz#36d7c4739f775b3cbc28e6136e21aa057adec418"
   integrity sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==
 
-zwitch@^2.0.0, zwitch@^2.0.4:
+zwitch@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"
   integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==
