@dr-ishaan/remake-blocks 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 astro-callout-blocks contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,319 @@
+# @dr-ishaan/remake-blocks
+
+Professional Astro 6 integration for rendering GitHub-style callouts (admonitions) and enhanced blockquotes in Markdown content.
+
+**29 first-class callout types** — each directive maps 1:1 to its own unique visual identity, SVG icon, color palette, and CSS class. No alias resolution.
+
+---
+
+## Features
+
+- **29 built-in callout types** — GFM standard (5) + Obsidian core (10) + promoted aliases (14), each with unique styling
+- **GitHub admonition syntax** — `> [!NOTE]`, `> [!TIP]`, `> [!WARNING]`, etc.
+- **Custom titles** — `> [!WARNING] Deprecated API` renders with your title
+- **Collapsible callouts** — `> [!FAQ]-` (collapsed) and `> [!TIP]+` (expanded)
+- **Custom callout types** — define your own with icon, color, and CSS class
+- **Enhanced blockquotes** — regular blockquotes get improved styling automatically
+- **Dark mode** — automatic via `prefers-color-scheme` and manual via `data-theme` attribute
+- **Auto CSS injection** — styles injected into every page by default
+- **Zero JavaScript** — pure CSS + HTML (collapsibles use native `<details>`/`<summary>`)
+- **Accessible** — proper ARIA roles, semantic HTML
+- **Print-optimized** — clean print styles
+
+---
+
+## Install
+
+```bash
+npm install @dr-ishaan/remake-blocks
+```
+
+## Quick Start
+
+```js
+// astro.config.mjs
+import { defineConfig } from "astro/config";
+import remakeBlocks from "@dr-ishaan/remake-blocks";
+
+export default defineConfig({
+  integrations: [remakeBlocks()],
+});
+```
+
+Then use callouts in any Markdown or MDX file:
+
+```markdown
+> [!NOTE]
+> This is a note callout with useful information.
+
+> [!TIP] Keyboard Shortcut
+> Press `Ctrl+Shift+P` to open the command palette.
+
+> [!WARNING]-
+> This collapsible warning starts collapsed.
+```
+
+---
+
+## All 29 Callout Types
+
+### GFM Standard (5)
+
+| Directive | Default Title | CSS Class |
+|-----------|--------------|-----------|
+| `[!NOTE]` | Note | `callout-note` |
+| `[!TIP]` | Tip | `callout-tip` |
+| `[!IMPORTANT]` | Important | `callout-important` |
+| `[!WARNING]` | Warning | `callout-warning` |
+| `[!CAUTION]` | Caution | `callout-caution` |
+
+### Obsidian Core (10)
+
+| Directive | Default Title | CSS Class |
+|-----------|--------------|-----------|
+| `[!ABSTRACT]` | Abstract | `callout-abstract` |
+| `[!INFO]` | Info | `callout-info` |
+| `[!SUCCESS]` | Success | `callout-success` |
+| `[!QUESTION]` | Question | `callout-question` |
+| `[!FAILURE]` | Failure | `callout-failure` |
+| `[!DANGER]` | Danger | `callout-danger` |
+| `[!QUOTE]` | Quote | `callout-quote` |
+| `[!BUG]` | Bug | `callout-bug` |
+| `[!EXAMPLE]` | Example | `callout-example` |
+| `[!TODO]` | Todo | `callout-todo` |
+
+### Promoted Aliases — First-Class Types (14)
+
+Each of these is its **own distinct type** with unique colors, not an alias:
+
+| Directive | Default Title | CSS Class |
+|-----------|--------------|-----------|
+| `[!SUMMARY]` | Summary | `callout-summary` |
+| `[!TLDR]` | TL;DR | `callout-tldr` |
+| `[!HINT]` | Hint | `callout-hint` |
+| `[!CHECK]` | Check | `callout-check` |
+| `[!DONE]` | Done | `callout-done` |
+| `[!HELP]` | Help | `callout-help` |
+| `[!FAQ]` | FAQ | `callout-faq` |
+| `[!ATTENTION]` | Attention | `callout-attention` |
+| `[!FAIL]` | Fail | `callout-fail` |
+| `[!MISSING]` | Missing | `callout-missing` |
+| `[!ERROR]` | Error | `callout-error` |
+| `[!CITE]` | Cite | `callout-cite` |
+
+---
+
+## Syntax
+
+### Basic Callout
+
+```markdown
+> [!NOTE]
+> Content goes here.
+```
+
+### Custom Title
+
+```markdown
+> [!WARNING] Breaking Change
+> The v2 API has been deprecated.
+```
+
+### Collapsible (Collapsed)
+
+```markdown
+> [!FAQ]-
+> Click to reveal the answer.
+```
+
+### Collapsible (Expanded)
+
+```markdown
+> [!TIP]+
+> This starts expanded but can be collapsed.
+```
+
+### Multi-Paragraph
+
+```markdown
+> [!IMPORTANT]
+> First paragraph.
+>
+> Second paragraph with **bold** and `code`.
+>
+> - List item 1
+> - List item 2
+```
+
+---
+
+## Configuration
+
+```js
+// astro.config.mjs
+import { defineConfig } from "astro/config";
+import remakeBlocks from "@dr-ishaan/remake-blocks";
+
+export default defineConfig({
+  integrations: [
+    remakeBlocks({
+      // Whether to auto-inject CSS styles (default: true)
+      injectStyles: true,
+
+      // Whether to enhance regular blockquotes (default: true)
+      enhanceBlockquotes: true,
+
+      // CSS class for callout container (default: "callout")
+      calloutClass: "callout",
+
+      // CSS class for callout title (default: "callout-title")
+      calloutTitleClass: "callout-title",
+
+      // CSS class for callout body (default: "callout-body")
+      calloutBodyClass: "callout-body",
+
+      // Add data-callout-type attribute (default: true)
+      dataCalloutType: true,
+
+      // Custom callout types
+      customCallouts: [
+        {
+          type: "custom",
+          icon: "🚀",
+          className: "callout-custom",
+          defaultTitle: "Custom",
+          color: "#8b5cf6",
+          backgroundColor: "#f5f3ff",
+        },
+      ],
+    }),
+  ],
+});
+```
+
+---
+
+## Custom Callout Types
+
+Define your own callout types with full control over appearance:
+
+```js
+remakeBlocks({
+  customCallouts: [
+    {
+      type: "machine-learning",     // [!MACHINE-LEARNING]
+      icon: "🧠",                    // Emoji or SVG string
+      className: "callout-ml",      // CSS class
+      defaultTitle: "Machine Learning",
+      color: "#7c3aed",             // Border & accent color
+      backgroundColor: "#f5f3ff",   // Background color
+      iconColor: "#7c3aed",         // Icon color (optional, defaults to color)
+    },
+  ],
+})
+```
+
+If a custom callout's `type` matches a built-in, the built-in is overridden.
+
+---
+
+## Manual CSS Import
+
+If you set `injectStyles: false`, import the stylesheet manually:
+
+```js
+// In a layout component or global CSS file
+import "@dr-ishaan/remake-blocks/styles.css";
+```
+
+---
+
+## Dark Mode
+
+Dark mode is supported automatically via `prefers-color-scheme: dark` and manually via the `data-theme` attribute:
+
+```html
+<html data-theme="dark">
+  <!-- callouts switch to dark palette -->
+</html>
+```
+
+Supported `data-theme` values: `"dark"`, `"dim"`.
+
+---
+
+## CSS Custom Properties
+
+Override any design token at the `:root` level:
+
+```css
+:root {
+  --callout-radius: 8px;
+  --callout-padding-y: 12px;
+  --callout-padding-x: 16px;
+  --callout-icon-size: 24px;
+  --callout-title-font-size: 1.1em;
+
+  /* Per-type overrides */
+  --callout-note-border: #3b82f6;
+  --callout-note-bg: #eff6ff;
+}
+```
+
+See `styles.css` for the complete list of CSS custom properties.
+
+---
+
+## HTML Output
+
+Each callout renders as:
+
+```html
+<div class="callout callout-note" data-callout-type="note" role="note">
+  <div class="callout-title" style="color:#0969da">
+    <span class="callout-icon" style="color:#0969da">
+      <!-- SVG icon -->
+    </span>
+    <span class="callout-title-text">Note</span>
+  </div>
+  <div class="callout-body">
+    <p>Content goes here.</p>
+  </div>
+</div>
+```
+
+Collapsible callouts use `<details>`/`<summary>`:
+
+```html
+<details class="callout callout-faq collapsible" data-callout-type="faq" role="note">
+  <summary class="callout-title" style="color:#b45309">
+    <span class="callout-icon" style="color:#b45309"><!-- SVG --></span>
+    <span class="callout-title-text">FAQ</span>
+  </summary>
+  <div class="callout-body">
+    <p>Content revealed on click.</p>
+  </div>
+</details>
+```
+
+---
+
+## Advanced: Using the Remark Plugin Directly
+
+The remark plugin can be used independently of the Astro integration:
+
+```js
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import { remarkCalloutBlocks } from "@dr-ishaan/remake-blocks";
+
+const processor = unified()
+  .use(remarkParse)
+  .use(remarkCalloutBlocks, { enhanceBlockquotes: true });
+```
+
+---
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @dr-ishaan/remake-blocks
+ *
+ * Astro 6 integration for rendering GitHub-style callouts (admonitions)
+ * and enhanced blockquotes in Markdown content.
+ *
+ * @example
+ * ```ts
+ * // astro.config.mjs
+ * import { defineConfig } from "astro/config";
+ * import remakeBlocks from "@dr-ishaan/remake-blocks";
+ *
+ * export default defineConfig({
+ *   integrations: [remakeBlocks()],
+ * });
+ * ```
+ *
+ * @example With custom callout types:
+ * ```ts
+ * export default defineConfig({
+ *   integrations: [
+ *     remakeBlocks({
+ *       customCallouts: [
+ *         {
+ *           type: "example",
+ *           icon: "💡",
+ *           className: "callout-example",
+ *           defaultTitle: "Example",
+ *           color: "#8b5cf6",
+ *           backgroundColor: "#f5f3ff",
+ *         },
+ *       ],
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+import type { AstroIntegration } from "astro";
+import type { AstroCalloutBlocksOptions } from "./types.js";
+export type { AstroCalloutBlocksOptions, RemarkCalloutBlocksOptions, CalloutConfig, CalloutType, BuiltinCalloutType, ParsedCallout } from "./types.js";
+export { remarkCalloutBlocks } from "./remark-callout-blocks.js";
+/**
+ * Create the `@dr-ishaan/remake-blocks` Astro integration.
+ *
+ * This integration:
+ * 1. Registers the `remarkCalloutBlocks` remark plugin so that GitHub-style
+ *    admonition directives (`> [!NOTE]`, `> [!TIP]`, etc.) inside blockquotes
+ *    are transformed into styled callout HTML elements.
+ * 2. Optionally injects the default CSS styles into every page.
+ * 3. Optionally enhances regular blockquotes with improved styling.
+ *
+ * @param options - Plugin configuration options.
+ * @returns An Astro integration object.
+ */
+export default function remakeBlocks(options?: AstroCalloutBlocksOptions): AstroIntegration;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAIH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAE,yBAAyB,EAA8B,MAAM,YAAY,CAAC;AAIxF,YAAY,EAAE,yBAAyB,EAAE,0BAA0B,EAAE,aAAa,EAAE,WAAW,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGvJ,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,OAAO,GAAE,yBAA8B,GACtC,gBAAgB,CAwClB"}

package/dist/index.js

@@ -0,0 +1,90 @@
+/**
+ * @dr-ishaan/remake-blocks
+ *
+ * Astro 6 integration for rendering GitHub-style callouts (admonitions)
+ * and enhanced blockquotes in Markdown content.
+ *
+ * @example
+ * ```ts
+ * // astro.config.mjs
+ * import { defineConfig } from "astro/config";
+ * import remakeBlocks from "@dr-ishaan/remake-blocks";
+ *
+ * export default defineConfig({
+ *   integrations: [remakeBlocks()],
+ * });
+ * ```
+ *
+ * @example With custom callout types:
+ * ```ts
+ * export default defineConfig({
+ *   integrations: [
+ *     remakeBlocks({
+ *       customCallouts: [
+ *         {
+ *           type: "example",
+ *           icon: "💡",
+ *           className: "callout-example",
+ *           defaultTitle: "Example",
+ *           color: "#8b5cf6",
+ *           backgroundColor: "#f5f3ff",
+ *         },
+ *       ],
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+import { fileURLToPath } from "url";
+import path from "path";
+import { remarkCalloutBlocks } from "./remark-callout-blocks.js";
+// Re-export the remark plugin for advanced usage
+export { remarkCalloutBlocks } from "./remark-callout-blocks.js";
+/**
+ * Create the `@dr-ishaan/remake-blocks` Astro integration.
+ *
+ * This integration:
+ * 1. Registers the `remarkCalloutBlocks` remark plugin so that GitHub-style
+ *    admonition directives (`> [!NOTE]`, `> [!TIP]`, etc.) inside blockquotes
+ *    are transformed into styled callout HTML elements.
+ * 2. Optionally injects the default CSS styles into every page.
+ * 3. Optionally enhances regular blockquotes with improved styling.
+ *
+ * @param options - Plugin configuration options.
+ * @returns An Astro integration object.
+ */
+export default function remakeBlocks(options = {}) {
+    const { injectStyles = true, ...remarkOptions } = options;
+    return {
+        name: "@dr-ishaan/remake-blocks",
+        hooks: {
+            /**
+             * During the Astro config setup, inject the remark plugin into the
+             * markdown.remarkPlugins array and optionally inject the stylesheet.
+             */
+            "astro:config:setup": ({ config, updateConfig, injectScript }) => {
+                // Inject the remark plugin
+                updateConfig({
+                    markdown: {
+                        remarkPlugins: [
+                            ...(config.markdown?.remarkPlugins ?? []),
+                            [remarkCalloutBlocks, remarkOptions],
+                        ],
+                    },
+                });
+                // If auto-injecting styles, add the stylesheet via Astro's
+                // built-in injectScript mechanism.
+                if (injectStyles) {
+                    // Resolve the path to the bundled stylesheet
+                    const __dirname = path.dirname(fileURLToPath(import.meta.url));
+                    const stylesPath = path.resolve(__dirname, "styles.css");
+                    // Inject an import so the styles are included in every page.
+                    // Users who need more control can set injectStyles: false
+                    // and import "@dr-ishaan/remake-blocks/styles.css" manually.
+                    injectScript("page-ssr", `import "${stylesPath}";`);
+                }
+            },
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAKjE,iDAAiD;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,UAAqC,EAAE;IAEvC,MAAM,EACJ,YAAY,GAAG,IAAI,EACnB,GAAG,aAAa,EACjB,GAAG,OAAO,CAAC;IAEZ,OAAO;QACL,IAAI,EAAE,0BAA0B;QAEhC,KAAK,EAAE;YACL;;;eAGG;YACH,oBAAoB,EAAE,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,EAAE;gBAC/D,2BAA2B;gBAC3B,YAAY,CAAC;oBACX,QAAQ,EAAE;wBACR,aAAa,EAAE;4BACb,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,aAAa,IAAI,EAAE,CAAC;4BACzC,CAAC,mBAAmB,EAAE,aAAa,CAAC;yBACrC;qBACF;iBACF,CAAC,CAAC;gBAEH,2DAA2D;gBAC3D,mCAAmC;gBACnC,IAAI,YAAY,EAAE,CAAC;oBACjB,6CAA6C;oBAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;oBAC/D,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;oBAEzD,6DAA6D;oBAC7D,0DAA0D;oBAC1D,6DAA6D;oBAC7D,YAAY,CAAC,UAAU,EAAE,WAAW,UAAU,IAAI,CAAC,CAAC;gBACtD,CAAC;YACH,CAAC;SACF;KACF,CAAC;AACJ,CAAC"}

package/dist/remark-callout-blocks.d.ts

@@ -0,0 +1,16 @@
+/**
+ * remark plugin for @dr-ishaan/remake-blocks
+ *
+ * A remark plugin that transforms callout directives inside blockquotes
+ * into styled callout components, and optionally enhances regular blockquotes.
+ *
+ * 29 first-class callout types — each directive maps 1:1 to its own
+ * unique visual identity. No alias resolution.
+ */
+import type { Root } from "mdast";
+import type { Plugin } from "unified";
+import type { RemarkCalloutBlocksOptions, CalloutConfig } from "./types.js";
+declare const BUILTIN_CALLOUTS: CalloutConfig[];
+export declare const remarkCalloutBlocks: Plugin<[RemarkCalloutBlocksOptions?], Root>;
+export { BUILTIN_CALLOUTS };
+//# sourceMappingURL=remark-callout-blocks.d.ts.map

package/dist/remark-callout-blocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remark-callout-blocks.d.ts","sourceRoot":"","sources":["../src/remark-callout-blocks.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAqC,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEtC,OAAO,KAAK,EACV,0BAA0B,EAC1B,aAAa,EAId,MAAM,YAAY,CAAC;AAMpB,QAAA,MAAM,gBAAgB,EAAE,aAAa,EA4PpC,CAAC;AAyYF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,CAAC,0BAA0B,CAAC,CAAC,EAAE,IAAI,CAkC3E,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}