@md-plugins/md-plugin-containers 0.1.0-alpha.1 → 0.1.0-alpha.10

package/LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2024-present, Jeff Galbraith
+Copyright (c) 2024-present, MD-PLUGINS
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -27,16 +27,44 @@ pnpm add @md-plugins/md-plugin-containers
 ### Basic Setup
 
 ```js
-import MarkdownIt from 'markdown-it';
-import { containersPlugin } from '@md-plugins/md-plugin-containers';
-
-const md = new MarkdownIt();
-md.use(containersPlugin, {
-  containers: [
-    { type: 'note', defaultTitle: 'Note' },
-    { type: 'warning', defaultTitle: 'Warning' },
-  ],
-});
+import MarkdownIt from 'markdown-it'
+import { containersPlugin } from '@md-plugins/md-plugin-containers'
+import container from 'markdown-it-container'
+
+const md = new MarkdownIt()
+
+const containers = [
+  { type: 'warning', defaultTitle: 'Warning' },
+  { type: 'tip', defaultTitle: 'Tip' },
+  { type: 'details', defaultTitle: 'Details' },
+]
+
+function createContainer(container, containerType, defaultTitle) {
+  const containerTypeLen = containerType.length
+
+  return [
+    container,
+    containerType,
+    {
+      render(tokens, idx) {
+        const token = tokens[idx]
+        const title = token.info.trim().slice(containerTypeLen).trim() || defaultTitle
+
+        if (containerType === 'details') {
+          return token.nesting === 1
+            ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${title}</summary>\n`
+            : '</details>\n'
+        }
+
+        return token.nesting === 1
+          ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${title}</p>\n`
+          : '</div>\n'
+      },
+    },
+  ]
+}
+
+md.use(containersPlugin, containers, createContainer)
 
 const markdownContent = `
 :::note
@@ -46,11 +74,11 @@ This is a note.
 :::warning
 This is a warning!
 :::
-`;
+`
 
-const renderedOutput = md.render(markdownContent);
+const renderedOutput = md.render(markdownContent)
 
-console.log('Rendered Output:', renderedOutput);
+console.log('Rendered Output:', renderedOutput)
 ```
 
 ### Example Output
@@ -81,42 +109,37 @@ The `md-plugin-containers` plugin supports the following options:
 You can define custom containers with their own styles or components:
 
 ```js
-md.use(containersPlugin, {
-  containers: [
-    { type: 'tip', defaultTitle: 'Tip' },
-    { type: 'important', defaultTitle: 'Important' },
-  ],
-});
-```
-
-## Advanced Usage
-
-### Custom Rendering Logic
-
-Override the default rendering logic for containers:
-
-```js
-md.use(containersPlugin, {
-  containers: [{ type: 'note', defaultTitle: 'Note' }],
-  render(tokens, idx) {
-    const token = tokens[idx];
-    if (token.nesting === 1) {
-      // Opening tag
-      const title = token.info.trim() || 'Note';
-      return `<div class="custom-note"><strong>${title}:</strong>\n`;
-    } else {
-      // Closing tag
-      return `</div>\n`;
-    }
-  },
-});
+function createContainer(container, containerType, defaultTitle) {
+  const containerTypeLen = containerType.length
+
+  return [
+    container,
+    containerType,
+    {
+      render(tokens, idx) {
+        const token = tokens[idx]
+        const title = token.info.trim().slice(containerTypeLen).trim() || defaultTitle
+
+        if (containerType === 'details') {
+          return token.nesting === 1
+            ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${title}</summary>\n`
+            : '</details>\n'
+        }
+
+        return token.nesting === 1
+          ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${title}</p>\n`
+          : '</div>\n'
+      },
+    },
+  ]
+}
 ```
 
 ## Adding Titles
 
 Containers can include titles by default or allow custom titles to be specified:
 
-```markdown
+```markup
 :::note Custom Note Title
 This is a custom note with a title.
 :::
@@ -135,7 +158,7 @@ Rendered Output:
 
 Containers can be nested if your rendering logic supports it:
 
-```markdown
+```markup
 :::note Outer Note
 :::warning Inner Warning
 Be cautious!
@@ -161,6 +184,10 @@ To run the tests for this plugin, use the following command:
 pnpm test
 ```
 
+## Documentation
+
+In case this README falls out of date, please refer to the [documentation](https://md-plugins.netlify.app/md-plugins/containers/overview) for the latest information.
+
 ## License
 
 This plugin is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.

package/dist/index.mjs

@@ -6,9 +6,7 @@ function containersPlugin(md, containers, createContainer) {
     return;
   }
   if (typeof createContainer !== "function") {
-    throw new Error(
-      "Invalid createContainer function provided to containersPlugin."
-    );
+    throw new Error("Invalid createContainer function provided to containersPlugin.");
   }
   containers.forEach(({ type, defaultTitle }) => {
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/md-plugin-containers",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.10",
   "description": "A markdown-it plugin for handling custom containers.",
   "keywords": [
     "markdown-it",
@@ -33,20 +33,24 @@
     "./dist"
   ],
   "dependencies": {
-    "@types/markdown-it": "^14.1.2",
     "markdown-it": "^14.1.0",
     "markdown-it-container": "^4.0.0",
-    "@md-plugins/shared": "0.1.0-alpha.1"
+    "@md-plugins/shared": "0.1.0-alpha.10"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "@types/markdown-it-container": "^2.0.10"
+    "@types/markdown-it-container": "^2.0.10",
+    "@types/markdown-it": "^14.1.2"
+  },
+  "peerDependencies": {
+    "markdown-it": "^14.1.0",
+    "markdown-it-container": "^4.0.0"
   },
   "scripts": {
     "build": "unbuild",
-    "clean": "rm -rf dist",
+    "clean": "rm -rf dist/ node_modules/",
     "test": "vitest"
   }
 }