@jjlmoya/utils-developer 1.3.0 → 1.5.0

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

@@ -0,0 +1,161 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssToInlineConverterUI } from '../ui';
+
+const slug = 'css-to-inline-converter';
+const title = 'CSS 转为内联 HTML。电子邮件内联处理器';
+const description =
+  '将样式表和 CSS 类自动转换为 HTML 中的内联样式。非常适合电子报、交易邮件和安全的网页布局。';
+
+const faqData = [
+  {
+    question: '为什么电子邮件需要内联 CSS 而不是外部样式表？',
+    answer:
+      '电子邮件客户端（如 Outlook、Gmail 或 Apple Mail）出于安全原因会过滤或忽略 <link> 和 <style> 标签。确保样式在电子邮件中正确应用的唯一方法是直接将其嵌入每个 HTML 元素的 style 属性中。',
+  },
+  {
+    question: '如果元素已经有自己的 style 属性会怎样？',
+    answer:
+      '该工具尊重现有的内联样式并附加新属性，模拟 CSS 级联行为：后声明的属性在冲突时覆盖前面的属性。',
+  },
+  {
+    question: '它是否适用于 :hover 或媒体查询等复杂选择器？',
+    answer:
+      '该工具处理 DOMParser 可以解析的类、id、属性和结构伪类选择器。依赖状态的选择器（如 :hover）和媒体查询无法内联化（它们依赖于运行时环境）并被忽略。',
+  },
+  {
+    question: '我的 HTML 和 CSS 是否会发送到任何服务器？',
+    answer:
+      '不会。所有处理都 100% 在您的浏览器中使用原生 DOMParser API 进行。您的代码不会离开您的设备，确保包含敏感内容的模板具有完全隐私。',
+  },
+];
+
+const howToData = [
+  {
+    name: '粘贴原始 HTML',
+    text: '在"原始 HTML"字段中写入或粘贴您想要处理的 HTML。可以是片段或完整文档。',
+  },
+  {
+    name: '添加 CSS 规则',
+    text: '将要注入的类和 id 粘贴到"CSS 规则"字段中。工具应用它们时会遵循选择器特异性。',
+  },
+  {
+    name: '转换并复制',
+    text: '点击"将 CSS 注入 HTML"。具有所有内联样式的结果将显示在下方，随时可以复制并粘贴到您的电子邮件管理器或 CMS 中。',
+  },
+];
+
+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: CssToInlineConverterUI = {
+  labelHtml: '原始 HTML',
+  labelCss: 'CSS 规则',
+  labelOutput: '内联 HTML 结果',
+  placeholderHtml: '<div class="my-class">Hello World</div>',
+  placeholderCss: '.my-class { color: red; padding: 10px; }',
+  placeholderOutput: '您的嵌入样式的 HTML 将显示在此处...',
+  btnConvert: '将 CSS 注入 HTML',
+  btnCopy: '复制代码',
+  btnCopied: '已复制！',
+  msgError: '处理错误。请检查您的 HTML 和 CSS 是否有效。',
+};
+
+export const content: ToolLocaleContent<CssToInlineConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: '常见问题',
+  faq: faqData,
+  bibliographyTitle: '参考资料和文档',
+  bibliography: [
+    {
+      name: 'Can I email：电子邮件的 HTML 和 CSS 支持矩阵',
+      url: 'https://www.caniemail.com/',
+    },
+    {
+      name: 'MDN Web Docs：全局 style 属性',
+      url: 'https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/style',
+    },
+    {
+      name: 'DOMParser API：浏览器中的安全解析',
+      url: 'https://developer.mozilla.org/en/docs/Web/API/DOMParser',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'CSS 内联处理器是什么以及为什么需要它？',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: '在开发现代网络应用程序时，我们习惯于分离关注点：HTML 构建结构，外部 CSS 文件提供所有视觉样式。但是，并非所有环境都信任外部样式表或全局 <code>&lt;style&gt;</code> 标签。',
+    },
+    {
+      type: 'paragraph',
+      html: '外部 CSS 最流行和最严格的失败用例是<strong>电子邮件模板开发</strong>。在这些环境中，确保字体、颜色或边距正确呈现的唯一可靠方法是直接嵌入标签中：<code>&lt;span style="color: red;"&gt;</code>。',
+    },
+    {
+      type: 'title',
+      text: '电子邮件客户端中的 CSS 问题',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '微软 Outlook、Apple Mail 或 Gmail 等电子邮件客户端以其限制性的 CSS 渲染引擎而闻名。大多数过滤或丢弃 <code>&lt;link&gt;</code> 或 <code>&lt;style&gt;</code> 标签，害怕可能破坏阅读界面的代码注入。',
+    },
+    {
+      type: 'tip',
+      html: '对于时事通讯或交易电子邮件（收据、账户确认），使用表格和<em>内联 CSS</em> 是电子邮件营销行业的黄金标准。',
+    },
+    {
+      type: 'title',
+      text: '此工具如何在您的浏览器中工作',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>安全解析：</strong>使用 <code>DOMParser API</code> 将输入 HTML 临时转换为浏览器内的安全虚拟 DOM。',
+        '<strong>级联模拟：</strong>分析您的 CSS 规则，对选择器应用特异性权重，并通过注入代码来改变选定 HTML 元素的 <code>style</code> 属性。',
+        '<strong>100% 离线：</strong>您的代码不会离开您的设备。对包含敏感内容的模板提供完全隐私。',
+      ],
+    },
+  ],
+};
+

package/src/tool/cssToInlineConverter/index.ts

@@ -7,10 +7,6 @@ import type { CssToInlineConverterUI } from './ui';
 
 export type CssToInlineConverterLocaleContent = ToolLocaleContent<CssToInlineConverterUI>;
 
-import { content as es } from './i18n/es';
-import { content as en } from './i18n/en';
-import { content as fr } from './i18n/fr';
-
 export const cssToInlineConverter: DeveloperToolEntry<CssToInlineConverterUI> = {
   id: 'css-to-inline-converter',
   icons: {
@@ -18,9 +14,21 @@ export const cssToInlineConverter: DeveloperToolEntry<CssToInlineConverterUI> =
     fg: 'mdi:language-css3',
   },
   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/duplicateCssRemover/i18n/de.ts

@@ -0,0 +1,167 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { DuplicateCssRemoverUI } from '../ui';
+
+const slug = 'doppeltes-css-entfernen';
+const title = 'Doppelten CSS Code online entfernen. Stylesheets vereinheitlichen und bereinigen';
+const description =
+  'Kostenloses Tool zum Bereinigen und Entfernen doppelter CSS-Regeln. Fasst redundante Selektoren zusammen, respektiert die Kaskade und reduziert sofort die Dateigröße – direkt im Browser.';
+
+const faqData = [
+  {
+    question: 'Was passiert, wenn CSS-Selektoren doppelt vorkommen?',
+    answer:
+      'Wenn derselbe Selektor mehrfach vorkommt, wendet der Browser alle Regeln an, wobei die letzte Deklaration jeder Eigenschaft die früheren überschreibt. Das erzeugt unnötig große Dateien, ohne das visuelle Ergebnis zu verbessern.',
+  },
+  {
+    question: 'Gehen beim Entfernen von Duplikaten Eigenschaften verloren?',
+    answer:
+      'Nein. Der Algorithmus respektiert strikt die CSS-Kaskade: Bei Konflikten unter demselben Selektor wird immer die zuletzt deklarierte Eigenschaft beibehalten. Einzigartige Eigenschaften aus jedem Block werden unter einem einzigen, vereinheitlichten Selektor zusammengeführt.',
+  },
+  {
+    question: 'Funktioniert das Tool mit minifiziertem CSS oder CSS mit Kommentaren?',
+    answer:
+      'Das Tool entfernt CSS-Kommentare automatisch vor der Verarbeitung und arbeitet korrekt mit einzeiligem Code. Bei CSS mit erweitertem Nesting oder komplexen At-Rules wird empfohlen, die Blöcke vorher zu trennen.',
+  },
+  {
+    question: 'Wird mein CSS an einen Server übertragen?',
+    answer:
+      'Nein. Die gesamte Verarbeitung findet direkt in Ihrem Browser per lokalem JavaScript statt. Kein Teil Ihres CSS wird an externe Server übertragen – Ihr Code bleibt vollständig privat.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Ihren CSS Code einfügen',
+    text: 'Kopieren Sie den Inhalt Ihrer CSS-Datei mit wiederholten Selektoren und fügen Sie ihn in das linke Feld „Dirty / Duplicate CSS" ein.',
+  },
+  {
+    name: 'Bereinigung starten',
+    text: 'Klicken Sie auf „CSS bereinigen und vereinheitlichen". Das Tool durchsucht alle Selektoren, führt Eigenschaften zusammen und entfernt redundante Blöcke.',
+  },
+  {
+    name: 'Ergebnis prüfen und kopieren',
+    text: 'Sehen Sie sich die Byte-Einsparungen an und kopieren Sie das optimierte CSS über den Button „Code kopieren" direkt in Ihr Projekt.',
+  },
+];
+
+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: 'de',
+};
+
+const ui: DuplicateCssRemoverUI = {
+  labelInput: 'Dirty / Duplicate CSS',
+  labelOutput: 'Bereinigtes CSS',
+  placeholderInput: '.btn { padding: 10px; color: red; }\n.btn { margin: 5px; color: blue; }',
+  placeholderOutput: 'Hier erscheint das optimierte und vereinheitlichte CSS...',
+  btnClean: 'CSS bereinigen und vereinheitlichen',
+  btnCopy: 'Code kopieren',
+  btnCopied: 'Kopiert!',
+  statBytesOriginal: 'Originalgröße',
+  statBytesClean: 'Bereinigte Größe',
+  statSaving: 'Ersparnis',
+};
+
+export const content: ToolLocaleContent<DuplicateCssRemoverUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Häufig gestellte Fragen',
+  faq: faqData,
+  bibliographyTitle: 'Referenzen und Dokumentation',
+  bibliography: [
+    {
+      name: 'Web Vitals: Einfluss von CSS auf Render-Blocking und FCP',
+      url: 'https://web.dev/articles/render-blocking-resources',
+    },
+    {
+      name: 'W3C-Spezifikation: CSS-Kaskade und Vererbung',
+      url: 'https://www.w3.org/TR/css-cascade-4/',
+    },
+    {
+      name: 'Clean CSS: Bibliothek und Methoden zur CSS-Minifizierung',
+      url: 'https://github.com/clean-css/clean-css',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Warum entsteht doppelter CSS Code?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Bei der langfristigen Pflege von Webprojekten oder der Arbeit mit Legacy-Code kommt es sehr häufig vor, dass mehrere Entwickler überlappende CSS-Regeln schreiben. Aus Angst, ein bestehendes Design zu beschädigen, fügt man lieber eine neue redundante Regel am Ende des Dokuments hinzu, statt die ursprüngliche zu bearbeiten oder umzustrukturieren.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Das Ergebnis ist eine ineffiziente Datei mit Dutzenden von mehrfach deklarierten Selektoren, die die Lesbarkeit erschweren und das Download-Gewicht der Webseite erheblich erhöhen.',
+    },
+    {
+      type: 'title',
+      text: 'Der versteckte Einfluss auf die Web-Performance (Web Vitals)',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Stylesheet-Dateien blockieren das natürliche Rendering des Browsers (als <strong>Render-Blocking</strong>-Ressource). Solange der Browser das vollständige CSSOM nicht heruntergeladen und aufgebaut hat, bleibt der Bildschirm leer.',
+    },
+    {
+      type: 'tip',
+      html: 'Redundante Stile zu bereinigen ist keine reine Ordnungsfrage – es ist eine messbare und unmittelbare Verbesserung wichtiger Metriken wie dem <strong>First Contentful Paint (FCP)</strong>.',
+    },
+    {
+      type: 'title',
+      text: 'Wie wir doppelte Regeln zusammenführen',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Dieses Tool arbeitet wie ein intelligenter Assembler. Statt nur Leerzeichen zu komprimieren (wie ein herkömmlicher Minifier), durchsucht es den Text rekursiv nach identischen Selektoren.',
+    },
+    {
+      type: 'list',
+      items: [
+        'Stellen Sie sich vor, Sie haben die Regel <code>.box { color: red; }</code> und hundert Zeilen weiter unten ein <code>.box { padding: 10px; color: blue; }</code>. Das Tool führt beide Blöcke unter demselben Selektor <code>.box</code> zusammen und kombiniert das Padding.',
+        '<strong>Erhalt der CSS-Kaskade:</strong> Bei direkten Konflikten bewahrt der Algorithmus strikt die zuletzt deklarierte Eigenschaft. So bleibt Ihr ursprüngliches Layout beim Bereinigen erhalten.',
+      ],
+    },
+    {
+      type: 'paragraph',
+      html: 'Schluss damit, Kilobytes toter Textdaten an die Mobilgeräte Ihrer Nutzer zu schicken. Vereinheitlichen Sie Ihren Code in Millisekunden – vollständig offline, direkt im Browser.',
+    },
+  ],
+};

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

@@ -0,0 +1,167 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { DuplicateCssRemoverUI } from '../ui';
+
+const slug = 'penghapus-css-duplikat';
+const title = 'Hapus CSS Duplikat Online. Satukan dan Bersihkan Stylesheet Anda';
+const description =
+  'Alat gratis untuk membersihkan dan membuang kode CSS duplikat. Menyatukan selektor yang redundan, menghormati aturan cascade, dan langsung memperkecil ukuran file di browser.';
+
+const faqData = [
+  {
+    question: 'Apa yang terjadi saat selektor CSS terduplikasi?',
+    answer:
+      'Ketika selektor yang sama muncul berkali-kali, browser menerapkan semua aturan tetapi deklarasi terakhir dari setiap properti akan menimpa yang sebelumnya. Ini menghasilkan file yang lebih berat dari seharusnya tanpa memberikan manfaat nyata pada tampilan.',
+  },
+  {
+    question: 'Apakah ada properti yang hilang saat duplikat dihapus?',
+    answer:
+      'Tidak. Algoritma ini sepenuhnya menghormati cascade CSS: untuk properti yang bentrok di bawah selektor yang sama, selalu menyimpan yang terakhir dideklarasikan. Properti unik dari setiap blok digabungkan di bawah satu selektor yang disatukan.',
+  },
+  {
+    question: 'Apakah bisa digunakan dengan CSS yang sudah diminifikasi atau mengandung komentar?',
+    answer:
+      'Ya. Alat ini secara otomatis menghapus komentar CSS sebelum memproses dan bekerja dengan baik pada kode satu baris. Untuk CSS dengan nesting lanjutan atau at-rules yang kompleks, disarankan untuk memisahkan blok-blok terlebih dahulu.',
+  },
+  {
+    question: 'Apakah CSS saya dikirim ke server?',
+    answer:
+      'Tidak. Semua pemrosesan terjadi langsung di browser Anda melalui JavaScript lokal. Tidak ada bagian dari CSS Anda yang dikirimkan ke server eksternal mana pun, sehingga privasi kode Anda sepenuhnya terjaga.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Tempel CSS Anda',
+    text: 'Salin isi file CSS Anda yang mengandung selektor berulang, lalu tempelkan ke kolom kiri berlabel "Dirty / Duplicate CSS".',
+  },
+  {
+    name: 'Jalankan pembersihan',
+    text: 'Klik tombol "Bersihkan dan Satukan CSS". Alat akan memindai semua selektor, menggabungkan properti, dan menghapus blok yang redundan.',
+  },
+  {
+    name: 'Tinjau hasil dan salin',
+    text: 'Periksa penghematan byte yang dicapai, lalu salin CSS yang sudah dioptimalkan dengan tombol "Salin Kode" untuk langsung digunakan di proyek Anda.',
+  },
+];
+
+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: 'id',
+};
+
+const ui: DuplicateCssRemoverUI = {
+  labelInput: 'CSS Kotor / Duplikat',
+  labelOutput: 'CSS Bersih',
+  placeholderInput: '.btn { padding: 10px; color: red; }\n.btn { margin: 5px; color: blue; }',
+  placeholderOutput: 'CSS yang dioptimalkan dan disatukan akan muncul di sini...',
+  btnClean: 'Bersihkan dan Satukan CSS',
+  btnCopy: 'Salin Kode',
+  btnCopied: 'Disalin!',
+  statBytesOriginal: 'Byte Asli',
+  statBytesClean: 'Byte Bersih',
+  statSaving: 'Penghematan',
+};
+
+export const content: ToolLocaleContent<DuplicateCssRemoverUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Pertanyaan yang Sering Diajukan',
+  faq: faqData,
+  bibliographyTitle: 'Referensi dan Dokumentasi',
+  bibliography: [
+    {
+      name: 'Web Vitals: Dampak CSS pada Render-Blocking dan FCP',
+      url: 'https://web.dev/articles/render-blocking-resources',
+    },
+    {
+      name: 'Spesifikasi W3C: Cascade dan Pewarisan CSS',
+      url: 'https://www.w3.org/TR/css-cascade-4/',
+    },
+    {
+      name: 'Clean CSS: Library dan Metodologi untuk Minifikasi CSS',
+      url: 'https://github.com/clean-css/clean-css',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Mengapa Kode CSS Bisa Terduplikasi?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Saat mengelola proyek web jangka panjang atau bekerja dengan kode warisan (<em>legacy code</em>), sangat umum terjadi beberapa pengembang menulis aturan CSS yang saling tumpang tindih. Karena khawatir merusak desain yang sudah ada, seorang developer lebih memilih menambahkan aturan baru di bagian akhir dokumen daripada mengedit atau merefaktor kode aslinya.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Hasilnya adalah file yang tidak efisien dengan puluhan selektor yang dideklarasikan berulang kali, membuat kode sulit dibaca dan memperbesar ukuran unduhan halaman web Anda secara signifikan.',
+    },
+    {
+      type: 'title',
+      text: 'Dampak Tersembunyi pada Performa Web (Web Vitals)',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'File stylesheet menghalangi proses rendering browser secara alami (sebagai sumber daya <strong>Render-Blocking</strong>). Selama browser belum selesai mengunduh dan membangun CSSOM secara lengkap, layar akan tetap kosong.',
+    },
+    {
+      type: 'tip',
+      html: 'Membuang gaya yang redundan bukan sekadar soal kerapian kode — ini adalah peningkatan nyata dan terukur pada metrik penting seperti <strong>First Contentful Paint (FCP)</strong>.',
+    },
+    {
+      type: 'title',
+      text: 'Cara Kami Menyatukan Aturan yang Duplikat',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Alat ini bekerja seperti perakit cerdas. Alih-alih sekadar mengompres spasi putih seperti minifier biasa, alat ini memindai teks secara rekursif untuk menemukan pola selektor yang identik.',
+    },
+    {
+      type: 'list',
+      items: [
+        'Bayangkan Anda memiliki aturan <code>.box { color: red; }</code> dan seratus baris kemudian ada <code>.box { padding: 10px; color: blue; }</code>. Alat ini akan menyatukan kedua blok di bawah selektor <code>.box</code> yang sama, menggabungkan padding-nya.',
+        '<strong>Pelestarian Cascade CSS:</strong> Untuk konflik langsung, algoritma secara ketat mempertahankan properti yang terakhir dideklarasikan. Ini memastikan tata letak asli Anda tidak rusak saat dokumen dibersihkan.',
+      ],
+    },
+    {
+      type: 'paragraph',
+      html: 'Hentikan pengiriman kilobyte teks mati ke ponsel pengguna Anda. Satukan kode Anda dalam hitungan milidetik, sepenuhnya offline langsung dari browser.',
+    },
+  ],
+};