feat: add svgo

diplodoc-platform · Apr 9, 2024 · 963782b · 963782b
1 parent e34a78d
commit 963782b
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,12 +2,26 @@
   "name": "@diplodoc/transform",
   "version": "4.12.0",
   "description": "A simple transformer of text in YFM (Yandex Flavored Markdown) to HTML",
-  "author": "YFM Team <yfm-team@yandex.ru>",
-  "license": "MIT",
+  "keywords": [
+    "markdown",
+    "yandex",
+    "docs",
+    "yfm",
+    "documentation",
+    "tool",
+    "tools",
+    "generator"
+  ],
+  "homepage": "https://github.com/diplodoc-platform/transform#readme",
+  "bugs": {
+    "url": "https://github.com/diplodoc-platform/transform/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git@github.com:diplodoc-platform/transform.git"
   },
+  "license": "MIT",
+  "author": "YFM Team <yfm-team@yandex.ru>",
   "main": "lib/index.js",
   "files": [
     "dist",
@@ -16,14 +30,14 @@
   ],
   "scripts": {
     "build": "npm run build:lib && npm run build:dist",
-    "build:lib": "tsc -p tsconfig.transform.json",
     "build:dist": "./esbuild/build.js",
-    "test": "jest --coverage",
+    "build:lib": "tsc -p tsconfig.transform.json",
     "lint": "eslint --max-warnings=0 \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "eslint --fix --max-warnings=0 \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
     "precommit": "npm run lint && npm run test",
-    "prepublishOnly": "npm run lint && npm run test && npm run build"
+    "prepublishOnly": "npm run lint && npm run test && npm run build",
+    "test": "jest --coverage",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
     "@diplodoc/tabs-extension": "^2.1.0",
@@ -32,6 +46,7 @@
     "css": "^3.0.0",
     "cssfilter": "0.0.10",
     "get-root-node-polyfill": "1.0.0",
+    "github-slugger": "^1.5.0",
     "js-yaml": "^4.1.0",
     "lodash": "4.17.21",
     "markdown-it": "^13.0.2",
@@ -42,7 +57,8 @@
     "markdownlint": "^0.25.1",
     "markdownlint-rule-helpers": "0.17.2",
     "sanitize-html": "^2.11.0",
-    "slugify": "1.6.5"
+    "slugify": "1.6.5",
+    "svgo": "^3.2.0"
   },
   "devDependencies": {
     "@diplodoc/babel-preset": "^1.0.2",
@@ -62,7 +78,6 @@
     "autoprefixer": "^10.4.15",
     "esbuild": "^0.19.2",
     "esbuild-sass-plugin": "^2.12.0",
-    "github-slugger": "^1.5.0",
     "highlight.js": "^11.8.0",
     "jest": "28.1.3",
     "markdown-it-testgen": "^0.1.6",
@@ -79,20 +94,6 @@
       "optional": true
     }
   },
-  "bugs": {
-    "url": "https://github.com/diplodoc-platform/transform/issues"
-  },
-  "homepage": "https://github.com/diplodoc-platform/transform#readme",
-  "keywords": [
-    "markdown",
-    "yandex",
-    "docs",
-    "yfm",
-    "documentation",
-    "tool",
-    "tools",
-    "generator"
-  ],
   "moduleDirectories": [
     "node_modules",
     "src"

diff --git a/src/transform/plugins/images/index.ts b/src/transform/plugins/images/index.ts
@@ -1,12 +1,13 @@
-import {readFileSync} from 'fs';
 import {join, sep} from 'path';
 import {bold} from 'chalk';
+import {optimize} from 'svgo';
 
 import {isFileExists, resolveRelativePath} from '../../utilsFS';
 import {isExternalHref, isLocalUrl} from '../../utils';
 import Token from 'markdown-it/lib/token';
 import {MarkdownItPluginCb, MarkdownItPluginOpts} from '../typings';
 import {StateCore} from '../../typings';
+import {readFileSync} from 'fs';
 
 interface ImageOpts extends MarkdownItPluginOpts {
     assetsPublicPath: string;
@@ -43,6 +44,12 @@ interface SVGOpts extends MarkdownItPluginOpts {
     notFoundCb: (s: string) => void;
 }
 
+function prefix() {
+    const value = Math.floor(Math.random() * 1e9);
+
+    return value.toString(16);
+}
+
 function convertSvg(
     token: Token,
     state: StateCore,
@@ -52,12 +59,24 @@ function convertSvg(
     const path = resolveRelativePath(currentPath, token.attrGet('src') || '');
 
     try {
-        const content = readFileSync(path, 'utf8');
+        const raw = readFileSync(path).toString();
+        const result = optimize(raw, {
+            plugins: [
+                {
+                    name: 'prefixIds',
+                    params: {
+                        prefix: prefix(),
+                    },
+                },
+            ],
+        });
+
+        const content = result.data;
         const svgToken = new state.Token('image_svg', '', 0);
         svgToken.attrSet('content', content);
 
         return svgToken;
-    } catch (e) {
+    } catch (e: unknown) {
         log.error(`SVG ${path} from ${currentPath} not found`);
 
         if (notFoundCb) {

diff --git a/src/transform/sanitize.ts b/src/transform/sanitize.ts
@@ -475,6 +475,8 @@ const svgAttrs = [
     'zoomandpan',
     'from',
     'to',
+    'xlink:href',
+    'use',
 ];
 
 const defaultCssWhitelist = {
-Original file line number
+Diff line change
@@ Expand Up / @@ -475,6 +475,8 @@ const svgAttrs = [ @@
         'zoomandpan',
         'from',
         'to',
+        'xlink:href',
+        'use',
     ];
     const defaultCssWhitelist = {
@@ Expand Down @@