@jjlmoya/utils-developer 1.14.0 → 1.16.0

package/src/tool/serpPixelSimulator/seo.astro

@@ -0,0 +1,12 @@
+---
+import type { SerpPixelSimulatorUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as SerpPixelSimulatorUI;
+---
+
+<section class="tool-seo" aria-label={t.previewLabel}></section>

package/src/tool/serpPixelSimulator/serp-pixel-simulator.css

@@ -0,0 +1,335 @@
+.sps-root {
+  --sps-ink: #1f2937;
+  --sps-muted: #64748b;
+  --sps-line: #d9e2ec;
+  --sps-panel: #fff;
+  --sps-soft: #f6f8fb;
+  --sps-ok: #16875d;
+  --sps-warn: #d93025;
+
+  color: var(--sps-ink);
+}
+
+.theme-dark .sps-root {
+  --sps-ink: #e5edf7;
+  --sps-muted: #a8b5c6;
+  --sps-line: #2c3a4e;
+  --sps-panel: #111827;
+  --sps-soft: #0b1120;
+}
+
+.sps-shell {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
+  gap: 24px;
+  align-items: start;
+}
+
+.sps-card {
+  border: 1px solid var(--sps-line);
+  border-radius: 8px;
+  background: var(--sps-panel);
+  padding: 24px;
+}
+
+.sps-panel,
+.sps-preview-wrap {
+  min-width: 0;
+}
+
+.sps-field {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 18px;
+}
+
+.sps-label,
+.sps-device-label,
+.sps-meter-top {
+  font-size: 0.86rem;
+  font-weight: 700;
+  color: #334155;
+}
+
+.sps-input,
+.sps-textarea {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  padding: 10px 12px;
+  font-size: 15px;
+  line-height: 1.45;
+  color: #172033;
+  background: #fff;
+}
+
+.sps-url-control {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+
+.sps-url-input {
+  min-width: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.sps-fetch-button {
+  flex: 0 0 auto;
+  border: 1px solid #cbd5e1;
+  border-left: 0;
+  border-radius: 0 6px 6px 0;
+  padding: 0 14px;
+  background: #174ea6;
+  color: #fff;
+  font-size: 0.88rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.sps-fetch-button:disabled {
+  cursor: progress;
+  opacity: 0.72;
+}
+
+.sps-fetch-message {
+  min-height: 1.2em;
+  margin: 0;
+  color: var(--sps-muted);
+  font-size: 0.82rem;
+  line-height: 1.4;
+}
+
+.sps-fetch-message[data-tone='success'] {
+  color: var(--sps-ok);
+  font-weight: 700;
+}
+
+.sps-fetch-message[data-tone='error'] {
+  color: var(--sps-warn);
+  font-weight: 700;
+}
+
+.theme-dark .sps-input,
+.theme-dark .sps-textarea,
+.theme-dark .sps-segment button {
+  border-color: #334155;
+  background: #0f172a;
+  color: #e5edf7;
+}
+
+.theme-dark .sps-fetch-button {
+  border-color: #334155;
+  background: #2563eb;
+}
+
+.theme-dark .sps-label,
+.theme-dark .sps-device-label,
+.theme-dark .sps-meter-top,
+.theme-dark .sps-preview-title {
+  color: #d6e1f0;
+}
+
+.sps-textarea {
+  min-height: 108px;
+  resize: vertical;
+}
+
+.sps-device {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 18px;
+}
+
+.sps-segment {
+  display: inline-grid;
+  grid-template-columns: 1fr 1fr;
+  border: 1px solid #cbd5e1;
+  border-radius: 7px;
+  overflow: hidden;
+}
+
+.sps-segment button {
+  border: 0;
+  border-right: 1px solid #cbd5e1;
+  background: #fff;
+  color: #334155;
+  padding: 8px 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.sps-segment button:last-child {
+  border-right: 0;
+}
+
+.sps-segment button[aria-pressed='true'] {
+  background: #e8f0fe;
+  color: #174ea6;
+}
+
+.theme-dark .sps-segment button[aria-pressed='true'] {
+  background: #1e3a5f;
+  color: #bfdbfe;
+}
+
+.sps-meter {
+  display: grid;
+  gap: 7px;
+  margin-top: 14px;
+}
+
+.sps-meter-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.sps-track {
+  height: 10px;
+  border-radius: 999px;
+  background: #e5eaf1;
+  overflow: hidden;
+}
+
+.sps-fill {
+  display: block;
+  width: 0%;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--sps-ok);
+  transition: width 120ms ease, background-color 120ms ease;
+}
+
+.sps-meter.sps-over .sps-fill {
+  background: var(--sps-warn);
+}
+
+.sps-meter-status {
+  font-size: 0.82rem;
+  color: var(--sps-muted);
+}
+
+.sps-meter.sps-over .sps-meter-status {
+  color: var(--sps-warn);
+  font-weight: 700;
+}
+
+.sps-preview-wrap {
+  border-left: 1px solid var(--sps-line);
+  background: var(--sps-soft);
+  border-radius: 8px;
+  padding: 24px;
+}
+
+.sps-preview-title {
+  margin: 0 0 14px;
+  color: #334155;
+  font-size: 0.92rem;
+}
+
+.sps-serp {
+  width: min(100%, 652px);
+  border-radius: 8px;
+  background: #fff;
+  padding: 18px;
+  font-family: Arial, Helvetica, sans-serif;
+  box-shadow: 0 1px 2px rgb(60, 64, 67, 0.14), 0 1px 3px 1px rgb(60, 64, 67, 0.08);
+}
+
+.theme-dark .sps-serp {
+  background: #f8fafc;
+}
+
+.sps-serp.sps-mobile {
+  max-width: 390px;
+}
+
+.sps-url-line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  margin-bottom: 6px;
+}
+
+.sps-favicon {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: #edf2f7;
+  color: #5f6368;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.sps-favicon-image {
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: #edf2f7;
+  object-fit: contain;
+}
+
+.sps-hidden {
+  display: none;
+}
+
+.sps-url-text {
+  min-width: 0;
+  color: #202124;
+  font-size: 14px;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sps-serp-title {
+  margin: 0 0 4px;
+  color: #1a0dab;
+  font-size: 20px;
+  line-height: 1.3;
+  font-weight: 400;
+}
+
+.sps-description {
+  margin: 0;
+  color: #4d5156;
+  font-size: 14px;
+  line-height: 1.58;
+}
+
+.sps-measure {
+  position: fixed;
+  inset: auto auto -9999px -9999px;
+  visibility: hidden;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+@media (max-width: 780px) {
+  .sps-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .sps-card {
+    padding: 16px;
+  }
+
+  .sps-preview-wrap {
+    border-left: 0;
+    border-top: 1px solid var(--sps-line);
+    padding: 18px 0 0;
+    background: transparent;
+  }
+}

package/src/tool/serpPixelSimulator/ui.ts

@@ -0,0 +1,33 @@
+export interface SerpPixelSimulatorUI extends Record<string, string> {
+  titleLabel: string;
+  titlePlaceholder: string;
+  urlLabel: string;
+  urlPlaceholder: string;
+  descriptionLabel: string;
+  descriptionPlaceholder: string;
+  deviceLabel: string;
+  desktopLabel: string;
+  mobileLabel: string;
+  titlePixelsLabel: string;
+  descriptionPixelsLabel: string;
+  charactersLabel: string;
+  previewLabel: string;
+  tooLongLabel: string;
+  goodLabel: string;
+  emptyTitle: string;
+  emptyDescription: string;
+  defaultTitle: string;
+  defaultUrl: string;
+  defaultDescription: string;
+  fallbackUrl: string;
+  fallbackFaviconText: string;
+  pixelUnit: string;
+  ellipsis: string;
+  fetchButtonLabel: string;
+  fetchLoadingLabel: string;
+  fetchSuccessLabel: string;
+  fetchCorsError: string;
+  fetchInvalidUrlError: string;
+  fetchNoMetadataError: string;
+  fetchGenericError: string;
+}

package/src/tool/svgSanitizer/i18n/de.ts

@@ -31,7 +31,7 @@ const faqData = [
 
 const howToData = [
   { name: 'SVG einfügen', text: 'Füge den SVG-Code aus Figma, Illustrator oder Inkscape in das Textfeld ein.' },
-  { name: 'Optionen konfigurieren', text: 'Aktiviere oder deaktiviere die Optionen: IDs entfernen, width/height entfernen und minifizieren – je nach Bedarf.' },
+  { name: 'Optionen konfigurieren', text: 'Aktiviere oder deaktiviere die Optionen: IDs entfernen, width/height entfernen und minifizieren - je nach Bedarf.' },
   { name: 'Bereinigen', text: 'Klicke auf SVG bereinigen, um den Code zu verarbeiten und das optimierte Ergebnis zu erhalten.' },
   { name: 'Kopieren oder herunterladen', text: 'Nutze die Schaltflächen Kopieren oder Herunterladen, um das bereinigte SVG für die Produktion zu sichern.' },
 ];
@@ -108,7 +108,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
     { type: 'title', text: 'Warum sind exportierte SVGs so unordentlich?', level: 3 },
     {
       type: 'paragraph',
-      html: 'Wenn du ein SVG aus Figma exportierst, erhältst du eine Datei voller Attribute, die nur innerhalb der App einen Sinn ergeben: <code>data-name</code>, <code>xml:space</code>, Verweise auf interne Ebenen und Design-Metadaten. Das Ergebnis ist ein SVG, das 40–70 % größer als nötig sein kann.',
+      html: 'Wenn du ein SVG aus Figma exportierst, erhältst du eine Datei voller Attribute, die nur innerhalb der App einen Sinn ergeben: <code>data-name</code>, <code>xml:space</code>, Verweise auf interne Ebenen und Design-Metadaten. Das Ergebnis ist ein SVG, das 40-70 % größer als nötig sein kann.',
     },
     { type: 'title', text: 'Was der Bereiniger entfernt', level: 3 },
     {

package/src/tool/svgSanitizer/i18n/id.ts

@@ -108,7 +108,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
     { type: 'title', text: 'Mengapa SVG yang diekspor begitu berantakan?', level: 3 },
     {
       type: 'paragraph',
-      html: 'Saat kamu mengekspor SVG dari Figma, kamu mendapatkan file yang penuh dengan atribut yang hanya bermakna di dalam aplikasinya: <code>data-name</code>, <code>xml:space</code>, referensi ke layer internal, dan metadata desain. Hasilnya adalah SVG yang bisa 40–70% lebih besar dari yang seharusnya.',
+      html: 'Saat kamu mengekspor SVG dari Figma, kamu mendapatkan file yang penuh dengan atribut yang hanya bermakna di dalam aplikasinya: <code>data-name</code>, <code>xml:space</code>, referensi ke layer internal, dan metadata desain. Hasilnya adalah SVG yang bisa 40-70% lebih besar dari yang seharusnya.',
     },
     { type: 'title', text: 'Apa yang dihapus oleh Pembersih', level: 3 },
     {

package/src/tool/svgSanitizer/i18n/pl.ts

@@ -108,7 +108,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
     { type: 'title', text: 'Dlaczego wyeksportowane pliki SVG są takie brudne?', level: 3 },
     {
       type: 'paragraph',
-      html: 'Gdy eksportujesz SVG z Figmy, otrzymujesz plik wypełniony atrybutami, które mają sens tylko wewnątrz aplikacji: <code>data-name</code>, <code>xml:space</code>, odwołania do wewnętrznych warstw i metadane projektu. Efektem jest SVG, który może ważyć o 40–70% więcej niż powinien.',
+      html: 'Gdy eksportujesz SVG z Figmy, otrzymujesz plik wypełniony atrybutami, które mają sens tylko wewnątrz aplikacji: <code>data-name</code>, <code>xml:space</code>, odwołania do wewnętrznych warstw i metadane projektu. Efektem jest SVG, który może ważyć o 40-70% więcej niż powinien.',
     },
     { type: 'title', text: 'Co usuwa oczyszczacz', level: 3 },
     {

package/src/tool/svgSanitizer/i18n/ru.ts

@@ -13,7 +13,7 @@ const faqData = [
   },
   {
     question: 'Работает ли это с SVG из Illustrator?',
-    answer: 'Да. Illustrator экспортирует SVG с XML-объявлениями, метаданными и собственными пространствами имён, которые очиститель удаляет. Результат — это SVG, совместимый со всеми современными браузерами.',
+    answer: 'Да. Illustrator экспортирует SVG с XML-объявлениями, метаданными и собственными пространствами имён, которые очиститель удаляет. Результат - это SVG, совместимый со всеми современными браузерами.',
   },
   {
     question: 'Какая разница между очисткой и минификацией?',
@@ -21,7 +21,7 @@ const faqData = [
   },
   {
     question: 'Может ли удаление ID-элементов повредить SVG?',
-    answer: 'Только если элемент в SVG ссылается на другой по ID, например через fill="url(#gradient)". В этом случае отключите опцию «Удалить ID». Она отключена по умолчанию именно чтобы избежать этой проблемы.',
+    answer: 'Только если элемент в SVG ссылается на другой по ID, например через fill="url(#gradient)". В этом случае отключите опцию "Удалить ID". Она отключена по умолчанию именно чтобы избежать этой проблемы.',
   },
   {
     question: 'Передаётся ли код SVG на какой-нибудь сервер?',
@@ -32,7 +32,7 @@ const faqData = [
 const howToData = [
   { name: 'Вставьте SVG', text: 'Вставьте код SVG, экспортированный из Figma, Illustrator или Inkscape, в текстовое поле.' },
   { name: 'Настройте параметры', text: 'Включите или отключите опции: удалить ID, убрать ширину/высоту и минифицировать в зависимости от ваших нужд.' },
-  { name: 'Очистите', text: 'Нажмите «Очистить SVG», чтобы обработать код и получить оптимизированный результат.' },
+  { name: 'Очистите', text: 'Нажмите "Очистить SVG", чтобы обработать код и получить оптимизированный результат.' },
   { name: 'Скопируйте или скачайте', text: 'Используйте кнопки копирования или загрузки, чтобы получить чистый SVG, готовый для продакшена.' },
 ];
 
@@ -93,9 +93,9 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faq: faqData,
   bibliographyTitle: 'Ссылки',
   bibliography: [
-    { name: 'SVG Specification — W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export — Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO — SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
+    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
+    { name: 'Figma SVG Export - Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
+    { name: 'SVGO - SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
   ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
@@ -108,7 +108,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
     { type: 'title', text: 'Почему экспортированные SVG такие грязные?', level: 3 },
     {
       type: 'paragraph',
-      html: 'Когда вы экспортируете SVG из Figma, вы получаете файл, перегруженный атрибутами, которые имеют смысл только внутри приложения: <code>data-name</code>, <code>xml:space</code>, ссылки на внутренние слои и метаданные дизайна. Результат — это SVG, весящий на 40-70% больше необходимого.',
+      html: 'Когда вы экспортируете SVG из Figma, вы получаете файл, перегруженный атрибутами, которые имеют смысл только внутри приложения: <code>data-name</code>, <code>xml:space</code>, ссылки на внутренние слои и метаданные дизайна. Результат - это SVG, весящий на 40-70% больше необходимого.',
     },
     { type: 'title', text: 'Что удаляет очиститель', level: 3 },
     {

package/src/tool/svgSanitizer/i18n/sv.ts

@@ -93,9 +93,9 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faq: faqData,
   bibliographyTitle: 'Referenser',
   bibliography: [
-    { name: 'SVG Specification — W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export — Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO — SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
+    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
+    { name: 'Figma SVG Export - Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
+    { name: 'SVGO - SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
   ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],

package/src/tool/svgSanitizer/i18n/tr.ts

@@ -93,9 +93,9 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faq: faqData,
   bibliographyTitle: 'Referanslar',
   bibliography: [
-    { name: 'SVG Specification — W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export — Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO — SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
+    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
+    { name: 'Figma SVG Export - Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
+    { name: 'SVGO - SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
   ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],

package/src/tool/svgSanitizer/i18n/zh.ts

@@ -93,9 +93,9 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faq: faqData,
   bibliographyTitle: '参考资料',
   bibliography: [
-    { name: 'SVG Specification — W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export — Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO — SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
+    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
+    { name: 'Figma SVG Export - Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
+    { name: 'SVGO - SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
   ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],

package/src/tool/svgSanitizer/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await svgSanitizer.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/svgToCss/i18n/de.ts

@@ -16,7 +16,7 @@ const faqData = [
   {
     question: 'Wie ändere ich die Farbe eines in CSS eingebetteten SVGs?',
     answer:
-      'Der beste Weg ist über „mask-image“. Indem Sie das SVG als Maske definieren, können Sie die „background-color“ verwenden, um die Farbe dynamisch zu ändern, sogar in :hover-Zuständen.',
+      'Der beste Weg ist über "mask-image". Indem Sie das SVG als Maske definieren, können Sie die "background-color" verwenden, um die Farbe dynamisch zu ändern, sogar in :hover-Zuständen.',
   },
   {
     question: 'Welche Browser unterstützen CSS-Masken?',
@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: 'Ergebnis kopieren',
-    text: 'Klicken Sie auf „Kopieren“, um den generierten CSS-Code in Ihre Zwischenablage zu übernehmen.',
+    text: 'Klicken Sie auf "Kopieren", um den generierten CSS-Code in Ihre Zwischenablage zu übernehmen.',
   },
   {
     name: 'In Ihr Projekt übernehmen',

package/src/tool/svgToCss/i18n/es.ts

@@ -9,7 +9,7 @@ const description =
 
 const faqData = [
   {
-    question: '¿Es mejor usar Data URI o un archivo .svg externo?',
+    question: '¿Es mejor usar Data URI o un archivo SVG externo?',
     answer:
       'Depende del uso. Los Data URIs eliminan peticiones HTTP (ideal para iconos pequeños), pero aumentan el tamaño del CSS. Para ilustraciones grandes o ricas en detalles, es preferible un archivo externo.',
   },

package/src/tool/svgToCss/i18n/fr.ts

@@ -164,7 +164,7 @@ export const content: ToolLocaleContent<SvgToCssUI> = {
     },
     {
       type: 'paragraph',
-      html: "Beaucoup de développeurs utilisent simplement <code>background-image</code> pour intégrer des vecteurs, mais cela a une limitation : vous ne pouvez pas changer la couleur du SVG dynamiquement depuis le CSS.",
+      html: "Beaucoup de développeurs utilisent simplement <code>background-image</code> pour intégrer des vecteurs, mais cela a une limitation: vous ne pouvez pas changer la couleur du SVG dynamiquement depuis le CSS.",
     },
     {
       type: 'paragraph',

package/src/tool/svgToCss/i18n/pl.ts

@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: 'Skopiuj wynik',
-    text: 'Kliknij „Kopiuj”, aby pobrać wygenerowany kod CSS do schowka.',
+    text: 'Kliknij "Kopiuj", aby pobrać wygenerowany kod CSS do schowka.',
   },
   {
     name: 'Zastosuj w swoim projekcie',

package/src/tool/svgToCss/i18n/ru.ts

@@ -16,7 +16,7 @@ const faqData = [
   {
     question: 'Как изменить цвет SVG, встроенного в CSS?',
     answer:
-      "Лучший способ — через 'mask-image'. Определив SVG как маску, вы можете использовать 'background-color' для динамического изменения его цвета, даже в состояниях :hover.",
+      "Лучший способ - через 'mask-image'. Определив SVG как маску, вы можете использовать 'background-color' для динамического изменения его цвета, даже в состояниях :hover.",
   },
   {
     question: ' какие браузеры поддерживают CSS Masks?',
@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: 'Скопируйте результат',
-    text: 'Нажмите «Копировать», чтобы перенести сгенерированный CSS-код в буфер обмена.',
+    text: 'Нажмите "Копировать", чтобы перенести сгенерированный CSS-код в буфер обмена.',
   },
   {
     name: 'Примените в своем проекте',

package/src/tool/svgToCss/i18n/zh.ts

@@ -16,7 +16,7 @@ const faqData = [
   {
     question: '如何更改嵌入 CSS 的 SVG 的颜色？',
     answer:
-      '最好的方法是通过“mask-image”。通过将 SVG 定义为遮罩（mask），您可以使用“background-color”动态更改其颜色，甚至在 :hover 状态下也可以。',
+      '最好的方法是通过"mask-image"。通过将 SVG 定义为遮罩（mask），您可以使用"background-color"动态更改其颜色，甚至在 :hover 状态下也可以。',
   },
   {
     question: '哪些浏览器支持 CSS 遮罩（Masks）？',
@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: '复制结果',
-    text: '点击“复制”将生成的 CSS 代码获取到剪贴板中。',
+    text: '点击"复制"将生成的 CSS 代码获取到剪贴板中。',
   },
   {
     name: '在项目中使用',

package/src/tool/svgToCss/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await svgToCss.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}