feat(meta): classnames support

README.md

@@ -9,7 +9,7 @@ Remark plugin for showing [Kroki] diagram.
 [kroki]: https://kroki.io
 [npm-url]: https://www.npmjs.com/package/remark-kroki
 [npm-badge]: https://img.shields.io/npm/v/remark-kroki.svg?style=flat-square&logo=npm
-[github-url]: https://github.com/nice-move/remark-kroki
+[github-url]: https://github.com/show-docs/remark-kroki
 [github-badge]: https://img.shields.io/npm/l/remark-kroki.svg?style=flat-square&colorB=blue&logo=github
 [node-badge]: https://img.shields.io/node/v/remark-kroki.svg?style=flat-square&colorB=green&logo=node.js
 
@@ -150,6 +150,8 @@ How to embed SVG as image. See the different and risk on [Best Way To Embed SVG]
 
 ## Syntax
 
+### Base
+
 ````markdown
 Turn
 
@@ -174,6 +176,22 @@ Into
 ![abc](data:image/svg+xml;base64,xxxxxxxx)
 ````
 
+### Set classnames
+
+````markdown
+<!-- when Options.output == 'img-html-base64' -->
+
+Turn
+
+```d2 classnames="tw-w-1/2"
+A --> B
+```
+
+Into
+
+<img classnames="tw-w-1/2" src="data:image/svg+xml;base64,xxxxxxxx" />
+````
+
 ## Troubleshooting
 
 When you using `inline-svg` with `mdx3` mode, You may get following error:
@@ -228,7 +246,7 @@ export default {
 
 ## Related
 
-- [markdown-code-block-meta](https://github.com/nice-move/markdown-code-block-meta)
-- [rehype-extended-table](https://github.com/nice-move/rehype-extended-table)
-- [remark-code-example](https://github.com/nice-move/remark-code-example)
-- [remark-docusaurus](https://github.com/nice-move/remark-docusaurus)
+- [markdown-code-block-meta](https://github.com/show-docs/markdown-code-block-meta)
+- [rehype-extended-table](https://github.com/show-docs/rehype-extended-table)
+- [remark-code-example](https://github.com/show-docs/remark-code-example)
+- [remark-docusaurus](https://github.com/show-docs/remark-docusaurus)

lib/transform.mjs

@@ -9,45 +9,6 @@ function removeXML(string) {
  return string.replace(/<\?xml.+\?>/, '');
 }
 
-function styleAst(width) {
- return {
- type: 'mdxJsxAttributeValueExpression',
- value: `{ maxWidth: '${width}' }`,
- data: {
- estree: {
- type: 'Program',
- sourceType: 'module',
- body: [
- {
- type: 'ExpressionStatement',
- expression: {
- type: 'ObjectExpression',
- properties: [
- {
- type: 'Property',
- method: false,
- shorthand: false,
- computed: false,
- key: {
- type: 'Identifier',
- name: 'maxWidth',
- },
- value: {
- type: 'Literal',
- value: width,
- raw: `'${width}'`,
- },
- kind: 'init',
- },
- ],
- },
- },
- ],
- },
- },
- };
-}
-
 const modes = {
  'img-base64': ({ diagramType, data, alt }) => {
  return {
@@ -62,7 +23,7 @@ const modes = {
  ],
  };
  },
- 'object-base64': ({ target, diagramType, data, alt, width }) => {
+ 'object-base64': ({ target, diagramType, data, alt, classnames }) => {
  return create(target, {
  type: 'mdxJsxFlowElement',
  name: 'object',
@@ -81,15 +42,8 @@ const modes = {
  {
  type: 'mdxJsxAttribute',
  name: 'className',
- value: 'kroki-object',
+ value: classnames ? `kroki-object ${classnames}` : 'kroki-object',
  },
- width
- ? {
- type: 'mdxJsxAttribute',
- name: 'style',
- value: styleAst(width),
- }
- : undefined,
  {
  type: 'mdxJsxAttribute',
  name: 'data-type',
@@ -108,7 +62,7 @@ const modes = {
  ].filter(Boolean),
  });
  },
- 'img-html-base64': ({ target, diagramType, data, alt, width }) => {
+ 'img-html-base64': ({ target, diagramType, data, alt, classnames }) => {
  return {
  type: 'paragraph',
  children: [
@@ -119,15 +73,8 @@ const modes = {
  {
  type: 'mdxJsxAttribute',
  name: 'className',
- value: 'kroki-image',
+ value: classnames ? `kroki-image ${classnames}` : 'kroki-image',
  },
- width
- ? {
- type: 'mdxJsxAttribute',
- name: 'style',
- value: styleAst(width),
- }
- : undefined,
  {
  type: 'mdxJsxAttribute',
  name: 'alt',
@@ -188,7 +135,7 @@ export async function transform({ node, server, headers, output, target }) {
 
  const alt = getValue(object.get('alt'));
  const type = getValue(object.get('type'));
- const width = getValue(object.get('width'));
+ const classnames = getValue(object.get('classnames'));
 
  const diagramType = lang === 'kroki' ? type : lang;
 
@@ -210,7 +157,7 @@ export async function transform({ node, server, headers, output, target }) {
  data,
  alt,
  target,
- width,
+ classnames,
  }),
  );
 }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "remark-kroki",
- "version": "0.3.5",
+ "version": "0.3.6",
  "description": "Remark plugin for showing Kroki diagram",
  "license": "MIT",
  "author": {
@@ -28,13 +28,13 @@
  "site-generator",
  "vega"
  ],
- "homepage": "https://github.com/nice-move/remark-kroki",
+ "homepage": "https://github.com/show-docs/remark-kroki",
  "repository": {
  "type": "git",
- "url": "https://github.com/nice-move/remark-kroki.git"
+ "url": "https://github.com/show-docs/remark-kroki.git"
  },
  "bugs": {
- "url": "https://github.com/nice-move/remark-kroki/issues"
+ "url": "https://github.com/show-docs/remark-kroki/issues"
  },
  "main": "lib/index.mjs",
  "files": [
@@ -58,26 +58,26 @@
  },
  "devDependencies": {
  "@bring-it/npm": "^0.5.2",
- "@nice-move/cli": "^0.11.3",
- "@nice-move/eslint-config-base": "^0.11.1",
- "@nice-move/prettier-config": "^0.10.0",
+ "@nice-move/cli": "^0.11.10",
+ "@nice-move/eslint-config-base": "^0.11.4",
+ "@nice-move/prettier-config": "^0.11.3",
  "ava": "^6.1.2",
  "eslint": "^8.57.0",
  "eslint-plugin-ava": "^14.0.0",
- "garou": "^0.7.1",
+ "garou": "^0.7.3",
  "prettier": "^3.2.5",
  "remark": "^15.0.1",
  "remark-mdx": "^3.0.1",
  "unist-util-remove-position": "^5.0.0"
  },
+ "packageManager": "[email protected]",
  "engines": {
  "node": ">=18.0.0 || ^16.13.0"
  },
  "publishConfig": {
  "access": "public",
  "registry": "https://registry.npmjs.org/"
  },
- "packageManager": "[email protected]",
  "eslintConfig": {
  "extends": "@nice-move/eslint-config-base"
  },