@dr-ishaan/remake-blocks 1.2.0 → 1.3.0

package/dist/sanitize-schema.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "https://raw.githubusercontent.com/rehypejs/rehype-sanitize/main/schema.json",
+  "name": "remake-blocks-sanitize-schema",
+  "version": "1.3.0",
+  "description": "rehype-sanitize schema for @dr-ishaan/remake-blocks v1.3.0+. Allows all callout HTML elements, attributes, and CSS classes while stripping dangerous content (scripts, event handlers, javascript: URLs).",
+  "usage": {
+    "js": "import schema from '@dr-ishaan/remake-blocks/sanitize-schema.json';\nimport rehypeSanitize from 'rehype-sanitize';\n\n// Use in your unified pipeline:\nconst processor = unified()\n  .use(remarkParse)\n  .use(remarkRemakeBlocks)\n  .use(remarkRehype, { allowDangerousHtml: true })\n  .use(rehypeSanitize, schema)\n  .use(rehypeStringify);",
+    "astro": "// astro.config.mjs\nimport { defineConfig } from 'astro/config';\nimport remakeBlocks from '@dr-ishaan/remake-blocks/astro';\nimport rehypeSanitize from 'rehype-sanitize';\nimport schema from '@dr-ishaan/remake-blocks/sanitize-schema.json';\n\nexport default defineConfig({\n  integrations: [remakeBlocks()],\n  markdown: {\n    rehypePlugins: [[rehypeSanitize, schema]],\n  },\n});"
+  },
+  "schema": {
+    "tagNames": [
+      "aside", "details", "summary", "div", "span", "p", "h1", "h2", "h3", "h4", "h5", "h6",
+      "ul", "ol", "li", "pre", "code", "blockquote", "hr", "a", "img",
+      "strong", "em", "del", "br", "svg", "circle", "line", "path", "polygon", "polyline", "rect", "title"
+    ],
+    "attributes": {
+      "*": ["class", "style", "id", "dir", "role", "aria-labelledby", "aria-hidden", "data-callout-type", "data-depth", "data-accordion", "data-category", "data-severity", "data-only-for-note"],
+      "aside": ["class", "style", "id", "dir", "role", "aria-labelledby", "data-callout-type"],
+      "details": ["class", "style", "id", "dir", "role", "aria-labelledby", "data-callout-type", "data-depth", "open"],
+      "summary": ["class", "style", "id", "dir"],
+      "a": ["href", "title", "class"],
+      "img": ["src", "alt", "title", "class", "width", "height"],
+      "code": ["class"],
+      "svg": ["xmlns", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin", "class"],
+      "circle": ["cx", "cy", "r", "fill", "stroke", "stroke-width"],
+      "line": ["x1", "y1", "x2", "y2", "fill", "stroke", "stroke-width", "stroke-linecap"],
+      "path": ["d", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"],
+      "polygon": ["points", "fill", "stroke", "stroke-width"],
+      "polyline": ["points", "fill", "stroke", "stroke-width"],
+      "rect": ["x", "y", "width", "height", "rx", "fill", "stroke", "stroke-width"]
+    },
+    "protocols": {
+      "href": ["http", "https", "mailto", "tel", "ftp", "irc", "ircs"],
+      "src": ["http", "https", "data"]
+    },
+    "strip": ["script", "iframe", "object", "embed", "form", "input", "button", "style", "link", "meta", "base"],
+    "clobber": [],
+    "clobberPrefix": "",
+    "allowComments": false,
+    "allowDoctype": false
+  },
+  "notes": [
+    "This schema allows all elements and attributes that @dr-ishaan/remake-blocks v1.3.0+ produces.",
+    "It strips: <script>, <iframe>, <object>, <embed>, <form>, <input>, <button>, <style>, <link>, <meta>, <base>.",
+    "It blocks: javascript: URLs in href/src, all event handler attributes (onclick, onload, etc.).",
+    "It allows: class, style (limited to color properties), id (for aria-labelledby), dir, role, aria-* attributes, data-* attributes.",
+    "It allows: SVG elements and attributes needed for callout icons.",
+    "Use this schema with rehype-sanitize for belt-and-suspenders security on top of the plugin's safe-by-default HTML escaping."
+  ]
+}

package/dist/styles.css

@@ -619,3 +619,42 @@
   .disclosure-accordion { border-width: 1px; }
   .disclosure-tree { border-left-width: 1px; }
 }
+
+/* ========================================================================
+   14. Inline Callouts (v1.3.0+)
+   ======================================================================== */
+
+/**
+ * Inline callouts float beside text on desktop, become full-width on mobile.
+ * Apply via the {inline} or {inline-end} per-callout override:
+ *
+ *   > [!NOTE]{inline}      — floats left, text wraps right
+ *   > [!TIP]{inline-end}   — floats right, text wraps left
+ *
+ * Responsive: on screens < 768px, inline callouts become full-width
+ * (no float) to avoid cramping on mobile.
+ */
+
+.callout-inline {
+  float: left;
+  width: var(--callout-inline-width, 50%);
+  margin: 0 1em 1em 0;
+  clear: left;
+}
+
+.callout-inline-end {
+  float: right;
+  width: var(--callout-inline-width, 50%);
+  margin: 0 0 1em 1em;
+  clear: right;
+}
+
+@media (max-width: 768px) {
+  .callout-inline,
+  .callout-inline-end {
+    float: none;
+    width: 100%;
+    margin: 1em 0;
+    clear: both;
+  }
+}