@jjlmoya/utils-developer 1.4.0 → 1.6.0

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

@@ -0,0 +1,174 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { SvgToCssUI } from '../ui';
+
+const slug = 'svg-till-css-konverterare';
+const title = 'Gratis Online SVG till CSS och Data URI konverterare';
+const description =
+  'Omvandla dina SVG-ikoner och vektorer till CSS-kod (Background eller Mask) eller komprimerade Data URI-strängar. Optimera din webbplats prestanda genom att eliminera externa HTTP-anrop.';
+
+const faqData = [
+  {
+    question: 'Är det bättre att använda en Data URI eller en extern .svg-fil?',
+    answer:
+      'Det beror på användningsfallet. Data URI:er eliminerar HTTP-anrop (idealiskt för små ikoner), men ökar CSS-filens storlek. För stora eller detaljrika illustrationer är en extern fil att föredra.',
+  },
+  {
+    question: 'Hur ändrar jag färgen på en SVG som är inbäddad i CSS?',
+    answer:
+      "Det bästa sättet är via 'mask-image'. Genom att definiera SVG:n som en mask kan du använda 'background-color' för att ändra dess färg dynamiskt, även i :hover-lägen.",
+  },
+  {
+    question: 'Vilka webbläsare stöder CSS Masks?',
+    answer:
+      'Alla moderna webbläsare (Chrome, Firefox, Safari, Edge) har fullt stöd. För äldre webbläsare används vanligen -webkit-prefix.',
+  },
+  {
+    question: 'Påverkar användningen av Data URI:er SEO?',
+    answer:
+      'Ja, positivt. Genom att minska antalet anrop som behövs för att rendera sidan förbättras laddningstiden (LCP) och Core Web Vitals-poängen.',
+  },
+  {
+    question: 'Kan jag använda den i ramverk som React eller Tailwind?',
+    answer:
+      'Absolut! Du kan kopiera den genererade koden och använda den i dina .css-filer eller till och med som godtyckliga värden i Tailwind CSS.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Klistra in SVG',
+    text: 'Kopiera källkoden för din SVG-fil och klistra in den i textområdet till vänster.',
+  },
+  {
+    name: 'Välj utdatatyp',
+    text: 'Välj mellan Bakgrundsbild (för statiska bakgrunder), CSS-mask (för ikoner med dynamisk färg) eller Endast Data URI (för direkt användning).',
+  },
+  {
+    name: 'Kopiera resultatet',
+    text: 'Klicka på "Kopiera" för att ta den genererade CSS-koden till ditt urklipp.',
+  },
+  {
+    name: 'Applicera i ditt projekt',
+    text: 'Klistra in koden i din stylesheet eller CSS-komponent. För masker, lägg även till background-color för att definiera ikonens färg.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'sv',
+};
+
+const ui: SvgToCssUI = {
+  labelPasteTitle: 'Klistra in SVG',
+  labelInputArea: 'SVG-källkod',
+  labelPreviewOriginal: 'Originalförhandsgranskning',
+  labelResultTitle: 'CSS-resultat',
+  labelPreviewApplied: 'Applicerat resultat',
+  tabBackground: 'Bakgrundsbild',
+  tabMask: 'CSS-mask / Webkit',
+  tabUri: 'Endast Data URI',
+  btnCopy: 'Kopiera',
+  btnCopied: 'Kopierad!',
+  placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...',
+};
+
+export const content: ToolLocaleContent<SvgToCssUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Vanliga frågor',
+  faq: faqData,
+  bibliographyTitle: 'Referenser och dokumentation',
+  bibliography: [
+    {
+      name: 'CSS-Tricks: Använda SVG som bakgrund',
+      url: 'https://css-tricks.com/using-svg/',
+    },
+    {
+      name: 'MDN Web Docs: mask-image',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image',
+    },
+    {
+      name: 'MDN Web Docs: background-image',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-image',
+    },
+    {
+      name: 'W3C: CSS Masking Module Level 1',
+      url: 'https://www.w3.org/TR/css-masking-1/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Varför konvertera SVG till CSS Data URI?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'I modern webbutveckling är optimering av prestanda och resursladdning avgörande. Att bädda in ikoner direkt i CSS via <strong>Data URI:er</strong> eliminerar onödiga HTTP-anrop, vilket minskar latens och förbättrar Time to Interactive (TTI).',
+    },
+    {
+      type: 'paragraph',
+      html: 'Detta verktyg omvandlar <code>&lt;svg&gt;</code>-vektorkod till en kodad textsträng som webbläsaren kan tolka som en bakgrundsbild eller en urklippsmask, samtidigt som den oändliga skalbarheten och skärpan hos vektorer bibehålls.',
+    },
+    {
+      type: 'title',
+      text: 'Viktiga tekniska fördelar',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Noll HTTP-anrop:</strong> Genom att bädda in grafiken i dina <code>.css</code>-filer behöver webbläsaren inte ladda ner ytterligare externa filer.',
+        '<strong>Anpassning via CSS-mask:</strong> Med <code>mask-image</code>-tekniken kan du ändra färgen på en komplex vektorikon genom att bara använda <code>background-color</code>.',
+        '<strong>Omedelbar rendering:</strong> Du undviker innehållsflimmer (FOUC) eftersom kritiska visuella resurser är tillgängliga så snart stilmallen har laddats ner.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'CSS Masker vs Bakgrunder',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Många utvecklare använder helt enkelt <code>background-image</code> för att bädda in vektorer, men detta har en begränsning: du kan inte ändra SVG-färgen dynamiskt från CSS.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Vårt verktyg stöder kodgenerering för <strong>CSS Masker</strong>. Genom att applicera en <code>mask-image</code> med den genererade Data URI:n fungerar ikonen som en schablon, vilket gör att elementets <code>background-color</code> definierar ikonens slutliga färg. Det är det mest professionella och flexibla sättet att hantera ikoner i Astro, Next.js eller andra moderna ramverk.',
+    },
+  ],
+};

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

@@ -0,0 +1,174 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { SvgToCssUI } from '../ui';
+
+const slug = 'svg-css-donusturucu';
+const title = 'Ücretsiz Çevrimiçi SVG CSS ve Data URI Dönüştürücü';
+const description =
+  'SVG ikonlarınızı ve vektörlerinizi CSS koduna (Background veya Mask) veya sıkıştırılmış Data URI\'ye dönüştürün. Harici HTTP isteklerini ortadan kaldırarak web sitenizin performansını optimize edin.';
+
+const faqData = [
+  {
+    question: 'Data URI kullanmak mı yoksa harici bir .svg dosyası kullanmak mı daha iyidir?',
+    answer:
+      'Kullanım durumuna bağlıdır. Data URI\'lar HTTP isteklerini ortadan kaldırır (küçük ikonlar için idealdir), ancak CSS dosya boyutunu artırır. Büyük veya ayrıntı açısından zengin illüstrasyonlar için harici bir dosya tercih edilir.',
+  },
+  {
+    question: 'CSS\'e gömülü bir SVG\'nin rengini nasıl değiştirebilirim?',
+    answer:
+      "En iyi yol 'mask-image' kullanmaktır. SVG'yi bir maske olarak tanımlayarak, :hover durumlarında bile rengini dinamik olarak değiştirmek için 'background-color' kullanabilirsiniz.",
+  },
+  {
+    question: 'Hangi tarayıcılar CSS Maskelerini destekliyor?',
+    answer:
+      'Tüm modern tarayıcılar (Chrome, Firefox, Safari, Edge) tam desteğe sahiptir. Eski tarayıcılar için yaygın olarak -webkit- önekleri kullanılır.',
+  },
+  {
+    question: 'Data URI kullanımı SEO\'yu etkiler mi?',
+    answer:
+      'Evet, olumlu yönde. Sayfayı oluşturmak için gereken istek sayısını azaltarak yükleme süresini (LCP) ve Core Web Vitals puanlarını iyileştirir.',
+  },
+  {
+    question: 'React veya Tailwind gibi frameworklerde kullanabilir miyim?',
+    answer:
+      'Kesinlikle! Oluşturulan kodu kopyalayıp .css dosyalarınızda veya hatta Tailwind CSS\'de rastgele değerler olarak kullanabilirsiniz.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'SVG\'yi Yapıştırın',
+    text: 'SVG dosyanızın kaynak kodunu kopyalayın ve soldaki metin alanına yapıştırın.',
+  },
+  {
+    name: 'Çıktı türünü seçin',
+    text: 'Arka Plan Resmi (statik arka planlar için), CSS Maskesi (dinamik renge sahip ikonlar için) veya Yalnızca Data URI (doğrudan kullanım için) arasında seçim yapın.',
+  },
+  {
+    name: 'Sonucu kopyalayın',
+    text: 'Oluşturulan CSS kodunu panonuza almak için "Kopyala"ya tıklayın.',
+  },
+  {
+    name: 'Projenize uygulayın',
+    text: 'Kodu stil sayfanıza veya CSS bileşeninize yapıştırın. Maskeler için, ikon rengini tanımlamak üzere background-color da ekleyin.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'tr',
+};
+
+const ui: SvgToCssUI = {
+  labelPasteTitle: 'SVG\'yi Yapıştır',
+  labelInputArea: 'SVG Kaynak Kodu',
+  labelPreviewOriginal: 'Orijinal Önizleme',
+  labelResultTitle: 'CSS Sonucu',
+  labelPreviewApplied: 'Uygulanan Sonuç',
+  tabBackground: 'Arka Plan Resmi',
+  tabMask: 'CSS Maske / Webkit',
+  tabUri: 'Yalnızca Data URI',
+  btnCopy: 'Kopyala',
+  btnCopied: 'Kopyalandı!',
+  placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...',
+};
+
+export const content: ToolLocaleContent<SvgToCssUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Sıkça Sorulan Sorular',
+  faq: faqData,
+  bibliographyTitle: 'Referanslar ve Dokümantasyon',
+  bibliography: [
+    {
+      name: 'CSS-Tricks: Background Olarak SVG Kullanımı',
+      url: 'https://css-tricks.com/using-svg/',
+    },
+    {
+      name: 'MDN Web Docs: mask-image',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image',
+    },
+    {
+      name: 'MDN Web Docs: background-image',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-image',
+    },
+    {
+      name: 'W3C: CSS Masking Module Level 1',
+      url: 'https://www.w3.org/TR/css-masking-1/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Neden SVG\'yi CSS Data URI\'ye Dönüştürmelisiniz?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Modern web geliştirmede, performansın ve kaynak yüklemesinin optimize edilmesi esastır. İkonları <strong>Data URI\'lar</strong> aracılığıyla doğrudan CSS\'e gömmek, gereksiz HTTP isteklerini ortadan kaldırır, gecikmeyi azaltır ve Etkileşim Süresini (TTI) iyileştirir.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Bu araç, <code>&lt;svg&gt;</code> vektör kodunu, tarayıcının arka plan resmi veya kırpma maskesi olarak yorumlayabileceği kodlanmış bir metin dizisine dönüştürürken vektörlerin karakteristik özelliği olan sonsuz ölçeklenebilirliği ve keskinliği korur.',
+    },
+    {
+      type: 'title',
+      text: 'Temel Teknik Avantajlar',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Sıfır HTTP İsteği:</strong> Grafiği <code>.css</code> dosyalarınıza gömerek, tarayıcının ek harici dosyalar indirmesine gerek kalmaz.',
+        '<strong>CSS Maskesi ile Özelleştirme:</strong> <code>mask-image</code> tekniğini kullanarak, karmaşık bir vektör ikonunun rengini sadece <code>background-color</code> kullanarak değiştirebilirsiniz.',
+        '<strong>Anında Oluşturma:</strong> Kritik görsel kaynaklar stil sayfası indirilir indirilmez hazır olduğundan içerik titremesini (FOUC) önlersiniz.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'CSS Maskeleri vs Arka Planlar',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Pek çok geliştirici vektörleri gömmek için sadece <code>background-image</code> kullanır, ancak bunun bir sınırı vardır: SVG rengini CSS\'ten dinamik olarak değiştiremezsiniz.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Aracımız <strong>CSS Maskeleri</strong> için kod oluşturmayı destekler. Oluşturulan Data URI ile bir <code>mask-image</code> uygulayarak ikon bir şablon görevi görür ve öğenin <code>background-color</code> özelliğinin son ikon rengini tanımlamasına olanak tanır. Astro, Next.js veya herhangi bir modern framework\'te ikonları yönetmenin en profesyonel ve esnek yolu budur.',
+    },
+  ],
+};

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

@@ -0,0 +1,175 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { SvgToCssUI } from '../ui';
+
+const slug = 'svg-to-css-converter';
+const title = '免费在线 SVG 转 CSS 和 Data URI 转换器';
+const description =
+  '将您的 SVG 图标和矢量图转换为 CSS 代码（背景或遮罩）或压缩的 Data URI。通过消除外部 HTTP 请求来优化您的网站性能。';
+
+const faqData = [
+  {
+    question: '使用 Data URI 还是外部 .svg 文件更好？',
+    answer:
+      '这取决于使用场景。Data URI 消除了 HTTP 请求（非常适合小图标），但会增加 CSS 文件的大小。对于大型或细节丰富的插图，优先选择外部文件。',
+  },
+  {
+    question: '如何更改嵌入 CSS 的 SVG 的颜色？',
+    answer:
+      '最好的方法是通过“mask-image”。通过将 SVG 定义为遮罩（mask），您可以使用“background-color”动态更改其颜色，甚至在 :hover 状态下也可以。',
+  },
+  {
+    question: '哪些浏览器支持 CSS 遮罩（Masks）？',
+    answer:
+      '所有现代浏览器（Chrome、Firefox、Safari、Edge）都提供完全支持。对于较旧的浏览器，通常使用 -webkit- 前缀。',
+  },
+  {
+    question: '使用 Data URI 会影响 SEO 吗？',
+    answer:
+      '是的，有积极影响。通过减少渲染页面所需的请求数量，它可以缩短加载时间 (LCP) 并提高 Core Web Vitals 分数。',
+  },
+  {
+    question: '我可以在 React 或 Tailwind 等框架中使用它吗？',
+    answer:
+      '当然可以！您可以复制生成的代码并将其用于 .css 文件中，甚至可以作为 Tailwind CSS 中的任意值使用。',
+  },
+];
+
+const howToData = [
+  {
+    name: '粘贴 SVG',
+    text: '复制 SVG 文件的源代码并将其粘贴到左侧的文本区域中。',
+  },
+  {
+    name: '选择输出类型',
+    text: '在背景图像（用于静态背景）、CSS 遮罩（用于具有动态颜色的图标）或仅 Data URI（用于直接使用）之间进行选择。',
+  },
+  {
+    name: '复制结果',
+    text: '点击“复制”将生成的 CSS 代码获取到剪贴板中。',
+  },
+  {
+    name: '在项目中使用',
+    text: '将代码粘贴到您的样式表或 CSS 组件中。对于遮罩，还需添加 background-color 来定义图标颜色。',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'zh',
+};
+
+const ui: SvgToCssUI = {
+  labelPasteTitle: '粘贴 SVG',
+  labelInputArea: 'SVG 源代码',
+  labelPreviewOriginal: '原始预览',
+  labelResultTitle: 'CSS 结果',
+  labelPreviewApplied: '应用后的结果',
+  tabBackground: '背景图像',
+  tabMask: 'CSS 遮罩 / Webkit',
+  tabUri: '仅 Data URI',
+  btnCopy: '复制',
+  btnCopied: '已复制！',
+  placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...',
+};
+
+export const content: ToolLocaleContent<SvgToCssUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: '常见问题',
+  faq: faqData,
+  bibliographyTitle: '参考资料与文档',
+  bibliography: [
+    {
+      name: 'CSS-Tricks: 将 SVG 用作背景',
+      url: 'https://css-tricks.com/using-svg/',
+    },
+    {
+      name: 'MDN Web Docs: mask-image',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image',
+    },
+    {
+      name: 'MDN Web Docs: background-image',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-image',
+    },
+    {
+      name: 'W3C: CSS Masking Module Level 1',
+      url: 'https://www.w3.org/TR/css-masking-1/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: '为什么要将 SVG 转换为 CSS Data URI？',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: '在现代 Web 开发中，优化性能和资源加载至关重要。通过 <strong>Data URI</strong> 将图标直接嵌入 CSS 中可以消除不必要的 HTTP 请求，减少延迟并提高可交互时间 (TTI)。',
+    },
+    {
+      type: 'paragraph',
+      html: '此工具将 <code>&lt;svg&gt;</code> 矢量代码转换为浏览器可以解释为背景图像或剪切遮罩的编码文本字符串，同时保持矢量图特有的无限扩展性和清晰度。',
+    },
+    {
+      type: 'title',
+      text: '主要技术优势',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>零 HTTP 请求：</strong> 通过将图形嵌入到 <code>.css</code> 文件中，浏览器无需下载额外的外部文件。',
+        '<strong>通过 CSS 遮罩进行自定义：</strong> 使用 <code>mask-image</code> 技术，您只需使用 <code>background-color</code> 即可更改复杂矢量图标的颜色。',
+        '<strong>即时渲染：</strong> 由于关键视觉资源在样式表下载后即可立即使用，您可以避免内容闪烁 (FOUC)。',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'CSS 遮罩 vs 背景',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '许多开发人员仅仅使用 <code>background-image</code> 来嵌入矢量图，但这有一个限制：您无法从 CSS 动态更改 SVG 颜色。',
+    },
+    {
+      type: 'paragraph',
+      html: '我们的工具支持为 <strong>CSS 遮罩</strong>生成代码。通过在生成的 Data URI 中应用 <code>mask-image</code>，图标将充当模板，允许元素的 <code>background-color</code> 定义最终的图标颜色。这是在 Astro、Next.js 或任何现代框架中管理图标的最专业且最灵活的方式。',
+    },
+  ],
+};
+

package/src/tool/svgToCss/index.ts

@@ -7,10 +7,6 @@ import type { SvgToCssUI } from './ui';
 
 export type SvgToCssLocaleContent = ToolLocaleContent<SvgToCssUI>;
 
-import { content as es } from './i18n/es';
-import { content as en } from './i18n/en';
-import { content as fr } from './i18n/fr';
-
 export const svgToCss: DeveloperToolEntry<SvgToCssUI> = {
   id: 'svg-to-css',
   icons: {
@@ -18,9 +14,21 @@ export const svgToCss: DeveloperToolEntry<SvgToCssUI> = {
     fg: 'mdi:code-braces',
   },
   i18n: {
-    es: async () => es,
-    en: async () => en,
-    fr: async () => fr,
+    de: async () => (await import('./i18n/de')).content,
+    en: async () => (await import('./i18n/en')).content,
+    es: async () => (await import('./i18n/es')).content,
+    fr: async () => (await import('./i18n/fr')).content,
+    id: async () => (await import('./i18n/id')).content,
+    it: async () => (await import('./i18n/it')).content,
+    ja: async () => (await import('./i18n/ja')).content,
+    ko: async () => (await import('./i18n/ko')).content,
+    nl: async () => (await import('./i18n/nl')).content,
+    pl: async () => (await import('./i18n/pl')).content,
+    pt: async () => (await import('./i18n/pt')).content,
+    ru: async () => (await import('./i18n/ru')).content,
+    sv: async () => (await import('./i18n/sv')).content,
+    tr: async () => (await import('./i18n/tr')).content,
+    zh: async () => (await import('./i18n/zh')).content,
   },
 };
 

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

@@ -0,0 +1,116 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { UrlCleanerUI } from '../ui';
+
+const slug = 'url-tracking-bereiniger';
+const title = 'URL Tracking Bereiniger: UTM, FBCLID und GCLID entfernen';
+const description = 'Entfernt automatisch Tracking- und Werbeparameter aus deinen URLs. Teile saubere Links und schütze deine digitale Privatsphäre sofort.';
+
+const faqData = [
+  {
+    question: 'Welche Arten von Tracking-Parametern entfernt dieses Tool?',
+    answer: 'Das Tool erkennt und entfernt automatisch die gängigsten Tracking-Parameter: UTM-Parameter (utm_source, utm_medium usw.), Klick-IDs aus der Werbung (fbclid, gclid, msclkid) sowie Kennungen aus E-Mail-Marketing-Kampagnen (mc_cid, _hsenc).',
+  },
+  {
+    question: 'Beeinträchtigt das die Funktionalität der Website?',
+    answer: 'In der Regel nicht. Diese Parameter werden fast ausschließlich für Analyse und Marketing verwendet. Wenn du sie entfernst, lädt die Seite ganz normal – nur der Websitebetreiber kann nicht mehr nachvollziehen, woher dein Klick stammte.',
+  },
+  {
+    question: 'Ist es sicher, meine Links hier zu verarbeiten?',
+    answer: 'Absolut. Wie alle unsere Tools läuft der Prozess zu 100 % clientseitig ab. Deine Links werden niemals an unsere Server übertragen – alles geschieht privat in deinem eigenen Browser.',
+  },
+  {
+    question: 'Warum sind meine Facebook-Links so lang?',
+    answer: 'Facebook hängt an jeden Link, der die Plattform verlässt, einen Parameter namens „fbclid" an. Damit können sie deine Aktivitäten auf anderen Websites verfolgen – selbst wenn du Drittanbieter-Werbung blockiert hast.',
+  },
+];
+
+const howToData = [
+  { name: 'URL einfügen', text: 'Gib die vollständige URL ein, die Tracking-Parameter enthält' },
+  { name: 'Bereinigen klicken', text: 'Das Tool analysiert die URL automatisch' },
+  { name: 'Ergebnis prüfen', text: 'Du siehst die bereinigte URL und eine Liste der entfernten Parameter' },
+  { name: 'Kopieren und teilen', text: 'Nutze die saubere URL in E-Mails, sozialen Netzwerken oder Nachrichten' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((s, i) => ({ '@type': 'HowToStep', position: i + 1, name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'de',
+};
+
+const ui: UrlCleanerUI = {
+  labelInput: 'URL mit Tracking-Parametern einfügen',
+  btnClean: 'Bereinigen',
+  labelCleaned: 'Bereinigte URL',
+  labelRemoved: 'Entfernte Tracker',
+  countLabel: 'Entfernte Parameter',
+  reductionLabel: 'Längenreduktion',
+  noneDetected: 'Keine gängigen Tracking-Parameter gefunden.',
+  errorInvalid: 'Bitte gib eine gültige URL ein.',
+  btnCopy: 'Kopieren',
+  btnCopied: 'Kopiert',
+};
+
+export const content: ToolLocaleContent<UrlCleanerUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Häufig gestellte Fragen',
+  faq: faqData,
+  bibliographyTitle: 'Ressourcen zu Datenschutz und Web-Tracking',
+  bibliography: [
+    { name: 'Electronic Frontier Foundation (EFF): Leitfaden zum Online-Tracking', url: 'https://www.eff.org/issues/online-behavioral-tracking' },
+    { name: 'Google Analytics: Dokumentation zu UTM-Parametern', url: 'https://support.google.com/analytics/answer/1033863' },
+    { name: 'Web-Datenschutz: Die Auswirkungen von Klick-IDs', url: 'https://www.w3.org/community/web-advertising/wiki/Click_Identifiers' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'URL Tracking Bereiniger: UTM, FBCLID und GCLID entfernen', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Entferne unsichtbare Tracker aus deinen Links, um sie sauber, diskret und professionell zu teilen. Erfahre, was diese seltsamen Codes in deinen URLs wirklich bedeuten.',
+    },
+    { type: 'title', text: 'Was ist ein URL Tracking Bereiniger und warum brauchst du ihn?', level: 3 },
+    {
+      type: 'paragraph',
+      html: 'Hast du schon mal einen Link kopiert, um ihn an jemanden zu schicken, und dabei festgestellt, dass er dreimal so lang ist wie nötig? Dieser überschüssige Ballast sind Tracking-Parameter. Ein <strong>Tracking-Bereiniger</strong> ist ein Tool, das die URL von all den Werbe- und Analyse-Informationen befreit, die große Plattformen bei jedem deiner Klicks einschleusen.',
+    },
+    { type: 'title', text: 'Die häufigsten Tracking-Parameter', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>UTM (Google Analytics):</strong> utm_source, utm_medium, utm_campaign zur Kampagnenverfolgung',
+        '<strong>FBCLID:</strong> Facebook-Klick-ID, um Cookie-Beschränkungen zu umgehen',
+        '<strong>GCLID / DCLID:</strong> Google Click ID zur Verknüpfung von Besuchen mit Google Ads-Kampagnen',
+        '<strong>MSCLKID:</strong> Klick-ID von Microsoft Advertising und Bing',
+        '<strong>HubSpot & Mailchimp:</strong> Marketing-Automatisierungsparameter wie _hsenc, mc_cid',
+        '<strong>LinkedIn & andere:</strong> li_fat_id und weitere Social-Media-Tracker',
+      ],
+    },
+  ],
+};