feat: meta width

show-docs · Feb 23, 2024 · f787259 · f787259
1 parent 174f788
commit f787259
Show file tree

Hide file tree

Showing 11 changed files with 1,301 additions and 516 deletions.
diff --git a/README.md b/README.md
@@ -123,6 +123,15 @@ HTTP headers to send to the server for custom authentication.
 
 Alias code language name to treat as kroki code block, meta.type will be ignored.
 
+````
+```kroki type=plantuml
+```
+↓
+
+```plantuml
+```
+````
+
 ### Options.target
 
 - type: string
@@ -165,16 +174,6 @@ Into
 ![abc](data:image/svg+xml;base64,xxxxxxxx)
 ````
 
-### Alias
-
-````
-```kroki type=plantuml
-```
- ↓
-```plantuml
-```
-````
-
 ## Troubleshooting
 
 When you using `inline-svg` with `mdx3` mode, You may get following error:

diff --git a/lib/ast.mjs b/lib/ast.mjs
@@ -1,9 +1,17 @@
+function patch({ data }) {
+ const io = data.estree.body[0].expression.properties[0];
+
+ return `${io.key.name}:${io.value.value}`;
+}
+
 function attrString(attributes = []) {
  return attributes.length > 0
  ? attributes
  .map(
  ({ name, value }) =>
- ` ${name === 'className' ? 'class' : name}="${value}"`,
+ ` ${name === 'className' ? 'class' : name}="${
+ name === 'style' ? patch(value) : value
+ }"`,
  )
  .join('')
  : '';

diff --git a/lib/transform.mjs b/lib/transform.mjs
@@ -9,6 +9,45 @@ function removeXML(string) {
  return string.replace(/<\?xml.+\?>/, '');
 }
 
+function styleAst(width) {
+ return {
+ type: 'mdxJsxAttributeValueExpression',
+ value: `{ width: '${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: 'width',
+ },
+ value: {
+ type: 'Literal',
+ value: width,
+ raw: `'${width}'`,
+ },
+ kind: 'init',
+ },
+ ],
+ },
+ },
+ ],
+ },
+ },
+ };
+}
+
 const modes = {
  'img-base64': ({ diagramType, data, alt }) => {
  return {
@@ -23,7 +62,7 @@ const modes = {
  ],
  };
  },
- 'object-base64': ({ target, diagramType, data, alt }) => {
+ 'object-base64': ({ target, diagramType, data, alt, width }) => {
  return create(target, {
  type: 'mdxJsxFlowElement',
  name: 'object',
@@ -44,6 +83,13 @@ const modes = {
  name: 'className',
  value: 'kroki-object',
  },
+ width
+ ? {
+ type: 'mdxJsxAttribute',
+ name: 'style',
+ value: styleAst(width),
+ }
+ : undefined,
  {
  type: 'mdxJsxAttribute',
  name: 'data-type',
@@ -59,10 +105,10 @@ const modes = {
  name: 'data',
  value: toDataURL(data),
  },
- ],
+ ].filter(Boolean),
  });
  },
- 'img-html-base64': ({ target, diagramType, data, alt }) => {
+ 'img-html-base64': ({ target, diagramType, data, alt, width }) => {
  return {
  type: 'paragraph',
  children: [
@@ -75,6 +121,13 @@ const modes = {
  name: 'className',
  value: 'kroki-image',
  },
+ width
+ ? {
+ type: 'mdxJsxAttribute',
+ name: 'style',
+ value: styleAst(width),
+ }
+ : undefined,
  {
  type: 'mdxJsxAttribute',
  name: 'alt',
@@ -135,6 +188,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 diagramType = lang === 'kroki' ? type : lang;
 
@@ -149,5 +203,5 @@ export async function transform({ node, server, headers, output, target }) {
  delete node[key];
  }
 
- Object.assign(node, modes[output]({ diagramType, data, alt, target }));
+ Object.assign(node, modes[output]({ diagramType, data, alt, target, width }));
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "remark-kroki",
- "version": "0.3.1",
+ "version": "0.3.2",
  "description": "Remark plugin for showing Kroki diagram",
  "license": "MIT",
  "author": {
@@ -56,17 +56,17 @@
  "unist-util-visit": "^5.0.0"
  },
  "devDependencies": {
- "@bring-it/npm": "^0.3.9",
- "@nice-move/cli": "^0.11.1",
- "@nice-move/eslint-config-base": "^0.9.24",
- "@nice-move/prettier-config": "^0.9.8",
- "ava": "^5.3.1",
- "eslint": "^8.55.0",
+ "@bring-it/npm": "^0.5.1",
+ "@nice-move/cli": "^0.11.3",
+ "@nice-move/eslint-config-base": "^0.11.1",
+ "@nice-move/prettier-config": "^0.10.0",
+ "ava": "^6.1.1",
+ "eslint": "^8.56.0",
  "eslint-plugin-ava": "^14.0.0",
- "garou": "^0.6.19",
- "prettier": "^3.1.0",
+ "garou": "^0.7.0",
+ "prettier": "^3.2.5",
  "remark": "^15.0.1",
- "remark-mdx": "^3.0.0",
+ "remark-mdx": "^3.0.1",
  "unist-util-remove-position": "^5.0.0"
  },
  "engines": {
@@ -76,7 +76,7 @@
  "access": "public",
  "registry": "https://registry.npmjs.org/"
  },
- "packageManager": "pnpm@8.11.0",
+ "packageManager": "pnpm@8.15.3",
  "eslintConfig": {
  "extends": "@nice-move/eslint-config-base"
  },