@jjlmoya/utils-developer 1.3.0 → 1.5.0

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

@@ -0,0 +1,176 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { PlaceholderGeneratorUI } from '../ui';
+
+const slug = 'platshallare-bildgenerator';
+const title = 'Platshållare Bildgenerator. Snabba Webbmockups Online';
+const description =
+  'Skapa anpassade platshållarbilder för dina webbdesigner. Justera upplösning, bakgrund, text och exportera i PNG, WebP eller JPEG direkt.';
+
+const faqData = [
+  {
+    question: 'Vad är en platshållarebild?',
+    answer:
+      'En platshållarebild eller fyllnadsgrafik är ett tillfälligt grafiskt element som används i webbdesign och layout för att reservera utrymme där en slutgiltig bild ska placeras. De hjälper till att visualisera sidans struktur innan det slutliga innehållet är tillgängligt.',
+  },
+  {
+    question: 'Kan jag använda vilken upplösning som helst i generatorn?',
+    answer:
+      'Ja, du kan ange vilket numeriskt värde som helst för bredd och höjd. Generatorn skapar en canvas med de exakta begärda dimensionerna, perfekt för strikta rutnät eller specifika reklambanderoller.',
+  },
+  {
+    question: 'I vilket format hämtas bilderna?',
+    answer:
+      'Som standard genereras bilder i WebP för optimal komprimering, men du kan välja att ladda ned dem i PNG-format för maximal förlustfri kvalitet eller JPEG för traditionell kompatibilitet.',
+  },
+  {
+    question: 'Bearbetas detta på någon server?',
+    answer:
+      'Nej, all bildrendering genereras omedelbar i det virtuella minnet (Canvas) i din egen webbläsare. Det är omedelbar och kräver inte att data skickas över nätverket.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Ange dimensioner',
+    text: 'Ange bredd- och höjdvärden direkt eller klicka på en av förinställningarna (FHD, HD, Instagram, etc.) för att fylla dem in automatiskt.',
+  },
+  {
+    name: 'Konfigurera färger och text',
+    text: 'Välj bakgrunds- och textfärger med de inbyggda väljarna eller genom att skriva en hexadecimal kod. Lägg eventuellt till anpassad text för att ersätta standarddimensionsetiketten.',
+  },
+  {
+    name: 'Välj typografi och format',
+    text: 'Välj teckensnittsfamilj och storlek. Välj utdataformat (WebP, PNG eller JPEG) enligt dina behov.',
+  },
+  {
+    name: 'Hämta bilden',
+    text: 'Klicka på Hämta-knappen för att spara den genererade platshållaren direkt till din enhet.',
+  },
+];
+
+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: PlaceholderGeneratorUI = {
+  labelDimensions: 'Snabba Dimensioner',
+  labelWidth: 'Bredd (px)',
+  labelHeight: 'Höjd (px)',
+  labelBgColor: 'Bakgrund',
+  labelTextColor: 'Text',
+  labelCustomText: 'Anpassad Text (Valfritt)',
+  placeholderCustomText: 'T.ex.: Hero Banner',
+  labelFontFamily: 'Typografi',
+  labelFontSize: 'Basstorlek',
+  fontSizeAuto: 'Automatisk',
+  labelFormat: 'Utdataformat',
+  btnDownload: 'Hämta Bild',
+};
+
+export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Vanliga Frågor',
+  faq: faqData,
+  bibliographyTitle: 'Referenser och Dokumentation',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL',
+    },
+    {
+      name: 'MDN Web Docs: CanvasRenderingContext2D',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D',
+    },
+    {
+      name: 'W3C: HTML Canvas 2D Context',
+      url: 'https://www.w3.org/TR/2dcontext/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Det Ultimata Verktyget för Snabba Mockups',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Under de tidiga faserna av konceptualisering eller strukturell layout av en webbplats (wireframing) har vi sällan det slutliga fotografiska innehållet. Tomma dimensioner kan förvränga den globala visualiseringen av produkten och dölja kritiska avstånd eller proportionsfel. En platshållarebildgenerator löser detta omedelbar och låter dig injicera exakt dimensionerade färgade områden.',
+    },
+    {
+      type: 'tip',
+      title: 'Design utan Friktion',
+      html: 'Att integrera ett utrymme på exakt 1200x800 pixlar är absolut nödvändigt när du bygger CSS Grid. Genom att ladda ned fylningsblock undviker du att injicera extra CSS eller tredjepartsscript i din tillfälliga kod.',
+    },
+    {
+      type: 'title',
+      text: 'Vikten av att Undvika Externa Tjänster',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'En återkommande praxis i frontend-ekosystemet är att länka tjänster som <code>via.placeholder.com</code> eller liknande direkt i HTML <code>src</code>-attribut. Även om det teoretiskt är smidig via URL-parametrar, har det djupa biverkningar som en noggrann utvecklare skulle undvika för nästan all kostnad.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Att infoga en fjärr domän i varje bildtagg på en utvecklingssida ökar DNS-förfrågningar, straffar hot-reloading system av Vite, Gulp eller Webpack och avslöjar versökt spår i grenar som slutligen hamnar i molnet. Genom att använda detta verktyg och generera bilden i ditt föredragna format (WebP, PNG eller JPEG) centraliserar du ditt prototyp helt i localhost-läge.',
+    },
+    {
+      type: 'title',
+      text: 'Huvudfunktioner i Generatoralgoritmen',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Pixelperfekt Upplösning:</strong> Inbyggd HTML5 Canvas säkerställer att den exporterade canvas motsvarar aritmetiskt de koordinater som användaren angett.',
+        '<strong>Typografisk Autoskalning:</strong> I automatisk läge beräknar teckensnittsstorleken omkretsområdet och antalet tecken för att elegant passa in texten utan oönskade <em>överflöden</em>.',
+        '<strong>Hexadecimal Fusion:</strong> Dubbelriktad tillståndsöverkontroll mellan inbyggda HTML-ekosystemväljare och skrivna inmatningar, vilket garanterar exakta kontraster som dikterats av din Figma eller Penpot UI/UX-palett.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Den Dolda Konsten att Teknisk Wireframing',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Det finns inget monolitiskt projekt eller micro frontend som inte går igenom grundläggande stadier, särskilt när du står inför krävande klienter eller Product Managers med en järnvilja. Att underlätta smidig grafiska iterationer utan att dra kostnader för färdigställda <em>assets</em> skiljer den snabba utvecklaren från den fastna. Denna generator utnyttjar direkt den moderna JavaScript <code>toDataURL()</code> API på din lokala maskin för att leverera ett resultat av industristandard utan misstänkt mellanliggande bearbetning.',
+    },
+  ],
+};

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

@@ -0,0 +1,176 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { PlaceholderGeneratorUI } from '../ui';
+
+const slug = 'yer-tutucu-resim-ureteci';
+const title = 'Yer Tutucu Resim Üreteci. Hızlı Web Mockup\'ları Çevrimiçi';
+const description =
+  'Web tasarımlarınız için özel yer tutucu resimler oluşturun. Çözünürlüğü, arka planı, metni ayarlayın ve PNG, WebP veya JPEG olarak anında dışa aktarın.';
+
+const faqData = [
+  {
+    question: 'Yer tutucu resim nedir?',
+    answer:
+      'Yer tutucu veya doldurma resmi, web tasarımı ve düzende sonraki bir görüntünün yerine konacağı alanı ayırmak için kullanılan geçici bir grafik öğesidir. Son içerik hazır olmadan önce sayfanın yapısını görselleştirmeye yardımcı olur.',
+  },
+  {
+    question: 'Üreticide herhangi bir çözünürlük kullanabilir miyim?',
+    answer:
+      'Evet, genişlik ve yükseklik için herhangi bir sayısal değer girebilirsiniz. Üreteci, sıkı ızgaralar veya belirli reklam afişleri için tam istenen boyutlarla bir kanvas oluşturur.',
+  },
+  {
+    question: 'Resimler hangi formatta indirilir?',
+    answer:
+      'Varsayılan olarak, resimler optimal sıkıştırma için WebP olarak oluşturulur, ancak maksimum kayıpsız kaliteyi korumak için PNG biçiminde veya geleneksel uyumluluk için JPEG olarak indirebilirsiniz.',
+  },
+  {
+    question: 'Bu herhangi bir sunucuda işlenir mi?',
+    answer:
+      'Hayır, tüm görüntü oluşturması kendi tarayıcınızın sanal belleğinde (Canvas) anında oluşturulur. Anında olur ve verilerin ağ üzerinden gönderilmesini gerektirmez.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Boyutları Ayarlayın',
+    text: 'Genişlik ve yükseklik değerlerini doğrudan girin veya ön ayarlardan birine (FHD, HD, Instagram, vb.) tıklayarak otomatik olarak doldurun.',
+  },
+  {
+    name: 'Renkleri ve Metni Yapılandırın',
+    text: 'Yerleşik seçicileri kullanarak veya bir onaltılık kod yazarak arka plan ve metin rengini seçin. İsteğe bağlı olarak varsayılan boyut etiketini değiştirmek için özel metin ekleyin.',
+  },
+  {
+    name: 'Tipografi ve Format Seçin',
+    text: 'Yazı tipi ailesini ve boyutunu seçin. İhtiyaçlarınız doğrultusunda çıkış biçimini (WebP, PNG veya JPEG) seçin.',
+  },
+  {
+    name: 'Resmi İndirin',
+    text: 'Oluşturulan yer tutucu görüntüsünü doğrudan cihazınıza kaydetmek için İndir düğmesini tıklayın.',
+  },
+];
+
+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: PlaceholderGeneratorUI = {
+  labelDimensions: 'Hızlı Boyutlar',
+  labelWidth: 'Genişlik (px)',
+  labelHeight: 'Yükseklik (px)',
+  labelBgColor: 'Arka Plan',
+  labelTextColor: 'Metin',
+  labelCustomText: 'Özel Metin (İsteğe Bağlı)',
+  placeholderCustomText: 'Örn.: Hero Banner',
+  labelFontFamily: 'Tipografi',
+  labelFontSize: 'Temel Boyut',
+  fontSizeAuto: 'Otomatik',
+  labelFormat: 'Çıkış Biçimi',
+  btnDownload: 'Resmi İndir',
+};
+
+export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Sık Sorulan Sorular',
+  faq: faqData,
+  bibliographyTitle: 'Referanslar ve Belgeler',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL',
+    },
+    {
+      name: 'MDN Web Docs: CanvasRenderingContext2D',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D',
+    },
+    {
+      name: 'W3C: HTML Canvas 2D Context',
+      url: 'https://www.w3.org/TR/2dcontext/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Hızlı Mockup\'lar İçin Nihai Araç',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Bir web sitesinin konseptualizasyon veya yapısal düzeni (wireframing) aşamalarının başlarında, genellikle nihai fotoğrafik içeriğe sahip değiliz. Boş boyutlar ürünün genel görselleştirilmesini çarpıtabilir ve kritik aralık veya oran hatalarını gizleyebilir. Yer tutucu resim üreteci bunu anında çözer ve tam boyutlandırılmış renkli alanları enjekte etmenize izin verir.',
+    },
+    {
+      type: 'tip',
+      title: 'Sürtünmesiz Tasarım',
+      html: 'CSS Izgarası oluştururken tam olarak 1200x800 pikseli bir boşluk entegre etmek zorunludur. Doldurma blokları indirerek, geçici kodunuza ek CSS veya üçüncü taraf komut dosyaları enjekte etmekten kaçınırsınız.',
+    },
+    {
+      type: 'title',
+      text: 'Harici Hizmetlerden Kaçınmanın Önemi',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Frontend ekosistemindeki tekrarlayan bir uygulama, <code>via.placeholder.com</code> gibi hizmetleri doğrudan HTML <code>src</code> özniteliklerine bağlantılandırmaktan oluşur. URL parametreleri aracılığıyla teorik olarak çevik olsa da, dikkatli bir geliştirici her türlü maliyeti ödemek isteyecek derin yan etkilere sahiptir.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Bir geliştirme sayfasının her resim etiketine uzak bir etki alanı eklemek DNS isteklerini artırır, Vite, Gulp veya Webpack\'in hot-reloading sistemlerini cezalandırır ve sonunda buluta gelen dallarda kazaları açığa çıkarır. Bu yardımcı programı kullanarak ve resmi tercih ettiğiniz biçimde (WebP, PNG veya JPEG) oluşturarak, prototipinizi tamamen localhost modunda merkezileştirirsiniz.',
+    },
+    {
+      type: 'title',
+      text: 'Üretici Algoritmasının Temel Özellikleri',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Piksel Mükemmel Çözünürlük:</strong> Yerleşik HTML5 Canvas, dışa aktarılan kanvasın kullanıcı tarafından belirtilen koordinatlara aritmetik olarak karşılık geldiğini sağlar.',
+        '<strong>Tipografik Otomatik Ölçeklendirme:</strong> Otomatik modda, yazı tipi boyutu çevre alanını ve karakter sayısını hesaplayarak metni istenmeyen <em>taşmaları</em> olmadan zarif bir şekilde uyacak şekilde boyutlandırır.',
+        '<strong>Onaltılık Füzyon:</strong> Yerleşik HTML ekosistem seçicileri ile yazılan girdiler arasında çift yönlü durum kontrolü, Figma veya Penpot UI/UX paletin tarafından dikte edilen kesin kontrastları garanti eder.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Teknik Wireframing\'in Gizli Sanatı',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Özellikle talepkâr istemcilerle veya demir iradeli Ürün Yöneticileriyle karşı karşıya gelmek söz konusu olduğunda, temeli başarılı olmayan tek bir monolitik proje veya mikro frontend yoktur. Tamamlanmış <em>varlıkların</em> yükü sürüklenmeden çevik grafik yinelemelerini kolaylaştırmak, hızlı geliştiriciyi sıkışan kişiden ayırır. Bu üreteci, endüstri düzeyinde bir sonuç sunmak için şüpheli ara işleme olmadan yerel makinenizde modern JavaScript <code>toDataURL()</code> API\'sini doğrudan kullanır.',
+    },
+  ],
+};

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

@@ -0,0 +1,177 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { PlaceholderGeneratorUI } from '../ui';
+
+const slug = 'placeholder-image-generator';
+const title = '占位图生成器。快速网页效果图在线生成';
+const description =
+  '为网页设计创建自定义占位图。调整分辨率、背景、文字，立即导出为 PNG、WebP 或 JPEG。';
+
+const faqData = [
+  {
+    question: '什么是占位图？',
+    answer:
+      '占位图或填充图是在网页设计和布局中使用的临时图形元素，用于预留最终图像的空间。在最终内容可用之前，它们有助于可视化页面的结构。',
+  },
+  {
+    question: '我能在生成器中使用任何分辨率吗？',
+    answer:
+      '可以。您可以为宽度和高度输入任何数值。生成器将创建具有精确请求尺寸的画布，非常适合严格的网格或特定的广告横幅。',
+  },
+  {
+    question: '图像以什么格式下载？',
+    answer:
+      '默认情况下，图像以 WebP 格式生成以实现最优压缩，但您可以选择以 PNG 格式下载以保持最大无损质量，或以 JPEG 格式下载以实现传统兼容性。',
+  },
+  {
+    question: '这是在某个服务器上处理的吗？',
+    answer:
+      '不是。所有图像呈现都在您自己的浏览器虚拟内存 (Canvas) 中即时生成。这是即时的，不需要通过网络发送数据。',
+  },
+];
+
+const howToData = [
+  {
+    name: '设置尺寸',
+    text: '直接输入宽度和高度值，或单击预设之一（FHD、HD、Instagram 等）以自动填充。',
+  },
+  {
+    name: '配置颜色和文字',
+    text: '使用原生选择器选择背景和文本颜色，或输入十六进制代码。可选地添加自定义文字以替换默认尺寸标签。',
+  },
+  {
+    name: '选择字体和格式',
+    text: '选择字体系列和大小。根据需要选择输出格式（WebP、PNG 或 JPEG）。',
+  },
+  {
+    name: '下载图像',
+    text: '点击"下载"按钮将生成的占位图直接保存到您的设备。',
+  },
+];
+
+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: PlaceholderGeneratorUI = {
+  labelDimensions: '快速尺寸',
+  labelWidth: '宽度 (px)',
+  labelHeight: '高度 (px)',
+  labelBgColor: '背景',
+  labelTextColor: '文字',
+  labelCustomText: '自定义文字 (可选)',
+  placeholderCustomText: '例如：Hero Banner',
+  labelFontFamily: '字体',
+  labelFontSize: '基础尺寸',
+  fontSizeAuto: '自动',
+  labelFormat: '输出格式',
+  btnDownload: '下载图像',
+};
+
+export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: '常见问题',
+  faq: faqData,
+  bibliographyTitle: '参考资料和文档',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL',
+    },
+    {
+      name: 'MDN Web Docs: CanvasRenderingContext2D',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D',
+    },
+    {
+      name: 'W3C: HTML Canvas 2D Context',
+      url: 'https://www.w3.org/TR/2dcontext/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: '快速效果图的终极工具',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: '在网站概念化或结构布局（线框图）的早期阶段，我们很少有最终的摄影内容。空的尺寸可能会扭曲产品的整体可视化效果，并隐藏重要的间距或比例错误。占位图生成器立即解决了这个问题，让您能够注入精确尺寸的彩色区域。',
+    },
+    {
+      type: 'tip',
+      title: '无摩擦设计',
+      html: '在构建 CSS Grid 时，集成 1200x800 像素的空间是必须的。通过下载填充块，您可以避免在临时代码中注入额外的 CSS 或第三方脚本。',
+    },
+    {
+      type: 'title',
+      text: '避免外部服务的重要性',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Frontend 生态系统中一个反复出现的做法是将 <code>via.placeholder.com</code> 等服务直接链接到 HTML <code>src</code> 属性中。虽然从理论上讲通过 URL 参数很灵活，但它带来了深层次的副作用，任何细心的开发者都应该竭力避免。',
+    },
+    {
+      type: 'paragraph',
+      html: '在开发页面的每个图像标签中插入远程域会增加 DNS 请求、惩罚 Vite、Gulp 或 Webpack 的热重载系统，并意外暴露最终进入云的分支中的痕迹。通过使用此工具并以您首选的格式（WebP、PNG 或 JPEG）生成图像，您可以在 localhost 模式下完全集中您的原型。',
+    },
+    {
+      type: 'title',
+      text: '生成器算法的主要功能',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>像素完美分辨率：</strong> 原生 HTML5 Canvas 确保导出的画布在算术上与用户指定的坐标相对应。',
+        '<strong>排版自动缩放：</strong> 在自动模式下，字体大小计算周长面积和字符数，以优雅地适配文本而不会导致不需要的 <em>溢出</em>。',
+        '<strong>十六进制融合：</strong> 原生 HTML 生态系统选择器与类型化输入之间的双向状态控制，确保由您的 Figma 或 Penpot UI/UX 调色板指定的精确对比度。',
+      ],
+    },
+    {
+      type: 'title',
+      text: '技术线框设计的隐秘艺术',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '没有单一的单体项目或微前端不经过基础阶段，尤其是在面对要求苛刻的客户或铁血 Product Manager 时。在不拖累最终 <em>资产</em> 开销的情况下促进敏捷图形迭代，将快速开发者与卡住的开发者区分开来。该生成器直接利用您本地机器上的现代 JavaScript <code>toDataURL()</code> API，在没有可疑的中间处理的情况下提供工业级结果。',
+    },
+  ],
+};
+

package/src/tool/placeholderGenerator/index.ts

@@ -10,6 +10,18 @@ export type PlaceholderGeneratorLocaleContent = ToolLocaleContent<PlaceholderGen
 import { content as es } from './i18n/es';
 import { content as en } from './i18n/en';
 import { content as fr } from './i18n/fr';
+import { content as de } from './i18n/de';
+import { content as id } from './i18n/id';
+import { content as it } from './i18n/it';
+import { content as ja } from './i18n/ja';
+import { content as ko } from './i18n/ko';
+import { content as nl } from './i18n/nl';
+import { content as pl } from './i18n/pl';
+import { content as pt } from './i18n/pt';
+import { content as ru } from './i18n/ru';
+import { content as sv } from './i18n/sv';
+import { content as tr } from './i18n/tr';
+import { content as zh } from './i18n/zh';
 
 export const placeholderGenerator: DeveloperToolEntry<PlaceholderGeneratorUI> = {
   id: 'placeholder-generator',
@@ -21,6 +33,18 @@ export const placeholderGenerator: DeveloperToolEntry<PlaceholderGeneratorUI> =
     es: async () => es,
     en: async () => en,
     fr: async () => fr,
+    de: async () => de,
+    id: async () => id,
+    it: async () => it,
+    ja: async () => ja,
+    ko: async () => ko,
+    nl: async () => nl,
+    pl: async () => pl,
+    pt: async () => pt,
+    ru: async () => ru,
+    sv: async () => sv,
+    tr: async () => tr,
+    zh: async () => zh,
   },
 };