From 9686f9bbc264ee1d96b11abef852f9a1dc09c4d0 Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Mon, 18 Nov 2024 21:45:34 +0200
Subject: [PATCH] add svgo

---
 package-lock.json                            | 181 ++++++++++++++++++-
 package.json                                 |   1 +
 src/components/create/CreateReadySection.vue |  85 ++++++---
 src/components/create/CreateSection.vue      |   1 +
 4 files changed, 237 insertions(+), 31 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 100e058..05ce6ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "primeicons": "^7.0.0",
         "primevue": "^4.2.1",
         "qr-code-styling": "^1.8.4",
+        "svgo": "^3.3.2",
         "tailwindcss-primeui": "^0.3.4",
         "vue": "^3.5.12",
         "vue-router": "^4.4.5"
@@ -1753,6 +1754,15 @@
         "win32"
       ]
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@tsconfig/node20": {
       "version": "20.1.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node20/-/node20-20.1.4.tgz",
@@ -2796,7 +2806,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/brace-expansion": {
@@ -3102,6 +3111,47 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3114,6 +3164,39 @@
         "node": ">=4"
       }
     },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "license": "CC0-1.0"
+    },
     "node_modules/cssstyle": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz",
@@ -3261,6 +3344,61 @@
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "license": "MIT"
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -4692,6 +4830,12 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "license": "CC0-1.0"
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -5021,7 +5165,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
       "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "boolbase": "^1.0.0"
@@ -6164,6 +6307,40 @@
       "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
       "dev": true
     },
+    "node_modules/svgo": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index 8c0905b..310773c 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "primeicons": "^7.0.0",
     "primevue": "^4.2.1",
     "qr-code-styling": "^1.8.4",
+    "svgo": "^3.3.2",
     "tailwindcss-primeui": "^0.3.4",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
diff --git a/src/components/create/CreateReadySection.vue b/src/components/create/CreateReadySection.vue
index 85cc39b..f9d8605 100644
--- a/src/components/create/CreateReadySection.vue
+++ b/src/components/create/CreateReadySection.vue
@@ -10,15 +10,24 @@
 
     <!-- Кнопки для скачивания -->
     <div class="flex flex-col md:flex-row gap-4 justify-center">
-      <a
+      <!-- Основная кнопка для скачивания SVG -->
+      <Button
         v-if="svgUrl"
+        label="Скачать SVG"
+        icon="pi pi-download"
+        class="p-button-sm"
         :href="svgUrl"
         :download="`${sanitizedFileName}.svg`"
-        class="p-button p-button-sm p-button-outlined text-center"
-      >
-        Скачать SVG
-      </a>
-      <Button label="Скачать PNG" icon="pi pi-download" class="p-button-sm" @click="downloadPng" />
+        as="a"
+      />
+
+      <!-- Кнопка для скачивания PNG с outlined стилем -->
+      <Button
+        label="Скачать PNG"
+        icon="pi pi-download"
+        class="p-button-sm p-button-outlined"
+        @click="downloadPng"
+      />
     </div>
 
     <p v-if="error" class="text-red-500 mt-4">Ошибка: {{ error }}</p>
@@ -28,14 +37,14 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import QRCodeStyling from 'qr-code-styling'
+import { optimize } from 'svgo'
 
-// Пропсы
 const { uri, name } = defineProps<{ uri: string; name: string }>()
 
 const qrCodeUrl = `https://hereconnect.condev.ru/read/${uri}`
 const sanitizedFileName = computed(() => {
   const sanitized = name.replace(/[^a-zA-Z0-9-_]/g, '').trim()
-  return sanitized || 'qr-code'
+  return sanitized ? `${sanitized}_QR-Code_HereConnect` : 'QR-Code_HereConnect'
 })
 
 const error = ref<string | null>(null)
@@ -47,45 +56,63 @@ const qrCode = new QRCodeStyling({
   height: 256 * 4,
   data: qrCodeUrl,
   type: 'svg',
-  // dotsOptions: {
-  //   color: '#000',
-  //   type: 'rounded',
-  // },
   backgroundOptions: {
     color: '#ffffff',
   },
 })
 
-// Генерация SVG и отображение QR-кода
-onMounted(async () => {
+// Генерация и оптимизация SVG
+async function generateOptimizedSvg() {
   try {
     const blob = await qrCode.getRawData('svg')
     if (blob && blob instanceof Blob) {
-      svgUrl.value = URL.createObjectURL(blob)
+      const text = await blob.text()
+
+      const optimizedSvg = optimize(text, {
+        plugins: [
+          { name: 'removeDoctype' },
+          { name: 'removeComments' },
+          { name: 'removeDimensions' },
+          { name: 'convertShapeToPath' },
+          { name: 'convertPathData' },
+          { name: 'mergePaths' },
+        ],
+      })
+
+      if (optimizedSvg.data) {
+        svgUrl.value = URL.createObjectURL(new Blob([optimizedSvg.data], { type: 'image/svg+xml' }))
+      } else {
+        error.value = 'Ошибка оптимизации SVG'
+      }
     } else {
       error.value = 'Ошибка генерации QR-кода'
     }
   } catch (err) {
-    error.value = (err as Error).message
+    error.value = (err as Error).message || 'Неизвестная ошибка'
   }
+}
+
+// Скачивание PNG
+async function downloadPng() {
+  try {
+    await qrCode.download({
+      name: sanitizedFileName.value,
+      extension: 'png',
+    })
+  } catch (err) {
+    error.value = (err as Error).message || 'Ошибка при скачивании QR-кода'
+  }
+}
+
+// Монтирование
+onMounted(() => {
+  generateOptimizedSvg()
 })
 
+// Очистка ресурсов при размонтировании
 onUnmounted(() => {
   if (svgUrl.value) {
     URL.revokeObjectURL(svgUrl.value)
   }
 })
-
-// Скачивание PNG
-async function downloadPng() {
-  try {
-    const blob = await qrCode.getRawData('png') // Получение PNG в формате Blob
-    const link = document.createElement('a')
-    link.href = URL.createObjectURL(blob)
-    link.download = `${sanitizedFileName.value}.png`
-    link.click()
-  } catch (err) {
-    error.value = (err as Error).message || 'Ошибка при скачивании QR-кода'
-  }
-}
 </script>
diff --git a/src/components/create/CreateSection.vue b/src/components/create/CreateSection.vue
index d217edc..9efc580 100644
--- a/src/components/create/CreateSection.vue
+++ b/src/components/create/CreateSection.vue
@@ -16,6 +16,7 @@ watch(
   () => props.isActive,
   (isActive) => {
     if (isActive) {
+      sectionRef.value?.querySelector('input')?.focus()
       sectionRef.value?.scrollIntoView({ behavior: 'smooth' })
     }
   },