@jjlmoya/utils-developer 1.4.0 → 1.5.0

package/src/tool/musicalTypography/index.ts

@@ -6,10 +6,6 @@ import type { MusicalTypographyUI } from './ui';
 
 export type MusicalTypographyLocaleContent = ToolLocaleContent<MusicalTypographyUI>;
 
-import { content as es } from './i18n/es';
-import { content as en } from './i18n/en';
-import { content as fr } from './i18n/fr';
-
 export const musicalTypography: DeveloperToolEntry<MusicalTypographyUI> = {
   id: 'musical-typography',
   icons: {
@@ -17,9 +13,21 @@ export const musicalTypography: DeveloperToolEntry<MusicalTypographyUI> = {
     fg: 'mdi:format-size',
   },
   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/placeholderGenerator/i18n/de.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 = 'platzhalter-bild-generator';
+const title = 'Platzhalter Bild Generator. Schnelle Web Mockups online';
+const description =
+  'Erstellen Sie individuelle Platzhalterbilder für Ihre Web-Designs. Passen Sie Auflösung, Hintergrund und Text an und exportieren Sie sofort als PNG, WebP oder JPEG.';
+
+const faqData = [
+  {
+    question: 'Was ist ein Platzhalterbild?',
+    answer:
+      'Ein Platzhalterbild ist eine temporäre Grafik, die im Webdesign und bei der Seitenerstellung verwendet wird, um den Bereich zu reservieren, in dem später ein endgültiges Bild platziert wird. Sie helfen dabei, die Struktur einer Seite zu visualisieren, bevor der finale Inhalt vorliegt.',
+  },
+  {
+    question: 'Kann ich im Generator jede beliebige Auflösung verwenden?',
+    answer:
+      'Ja, Sie können beliebige numerische Werte für Breite und Höhe eingeben. Der Generator erstellt eine Arbeitsfläche mit exakt den angeforderten Abmessungen – ideal für präzise Raster oder spezifische Werbeformate.',
+  },
+  {
+    question: 'In welchem Format werden die Bilder heruntergeladen?',
+    answer:
+      'Standardmäßig werden Bilder im WebP-Format erzeugt, das eine optimale Kompression bietet. Sie können aber auch PNG für verlustfreie Qualität oder JPEG für klassische Kompatibilität wählen.',
+  },
+  {
+    question: 'Wird das auf einem Server verarbeitet?',
+    answer:
+      'Nein, das gesamte Rendering erfolgt sofort im virtuellen Speicher (Canvas) Ihres eigenen Browsers. Die Verarbeitung ist augenblicklich und erfordert keinerlei Datenübertragung über das Netzwerk.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Abmessungen festlegen',
+    text: 'Geben Sie Breite und Höhe direkt ein oder klicken Sie auf eines der Voreinstellungen (FHD, HD, Instagram usw.), um die Felder automatisch auszufüllen.',
+  },
+  {
+    name: 'Farben und Text konfigurieren',
+    text: 'Wählen Sie Hintergrund- und Textfarbe über die nativen Auswahlfelder oder durch Eingabe eines Hexadezimalcodes. Optional können Sie einen eigenen Text eingeben, der die Standard-Dimensionsanzeige ersetzt.',
+  },
+  {
+    name: 'Schrift und Format auswählen',
+    text: 'Wählen Sie die Schriftfamilie und -größe. Legen Sie das Ausgabeformat (WebP, PNG oder JPEG) je nach Ihren Anforderungen fest.',
+  },
+  {
+    name: 'Bild herunterladen',
+    text: 'Klicken Sie auf die Schaltfläche „Herunterladen", um das erstellte Platzhalterbild direkt auf Ihrem Gerät zu speichern.',
+  },
+];
+
+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: PlaceholderGeneratorUI = {
+  labelDimensions: 'Schnellformate',
+  labelWidth: 'Breite (px)',
+  labelHeight: 'Höhe (px)',
+  labelBgColor: 'Hintergrund',
+  labelTextColor: 'Text',
+  labelCustomText: 'Eigener Text (Optional)',
+  placeholderCustomText: 'z. B.: Hero-Banner',
+  labelFontFamily: 'Schriftart',
+  labelFontSize: 'Basisgröße',
+  fontSizeAuto: 'Automatisch',
+  labelFormat: 'Ausgabeformat',
+  btnDownload: 'Bild herunterladen',
+};
+
+export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Häufig gestellte Fragen',
+  faq: faqData,
+  bibliographyTitle: 'Referenzen und Dokumentation',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
+      url: 'https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toDataURL',
+    },
+    {
+      name: 'MDN Web Docs: CanvasRenderingContext2D',
+      url: 'https://developer.mozilla.org/de/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: 'Das ideale Werkzeug für schnelle Mockups',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'In frühen Konzept- und Strukturphasen eines Webprojekts (Wireframing) ist das finale Bildmaterial selten verfügbar. Leere Platzhalter können die Gesamtwahrnehmung des Layouts verzerren und kritische Abstands- oder Proportionsfehler verbergen. Ein Platzhalter-Bild-Generator löst dieses Problem sofort: Er ermöglicht das Einfügen exakt dimensionierter, farbiger Flächen ohne Umwege.',
+    },
+    {
+      type: 'tip',
+      title: 'Reibungsloses Design',
+      html: 'Beim Aufbau von CSS Grids ist ein Platzhalter mit exakt 1200x800 Pixeln oft unverzichtbar. Mit heruntergeladenen Füllblöcken vermeiden Sie überflüssiges CSS oder externe Skripte in Ihrem temporären Code.',
+    },
+    {
+      type: 'title',
+      text: 'Warum externe Dienste problematisch sind',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Im Frontend-Alltag ist es verbreitet, Dienste wie <code>via.placeholder.com</code> direkt in <code>src</code>-Attribute einzubinden. Das klingt praktisch, hat aber erhebliche Nebenwirkungen, die ein gewissenhafter Entwickler vermeiden sollte.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Jede externe Bildadresse in einer Entwicklungsseite erzeugt zusätzliche DNS-Anfragen, verlangsamt Hot-Reloading-Systeme wie Vite, Gulp oder Webpack und hinterlässt ungewollt Spuren in Branches, die irgendwann in der Cloud landen. Mit diesem Generator und dem Export im bevorzugten Format (WebP, PNG oder JPEG) bleibt Ihr Prototyp vollständig im Localhost-Modus.',
+    },
+    {
+      type: 'title',
+      text: 'Technische Stärken des Generators',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Pixel-genaue Auflösung:</strong> Der native HTML5 Canvas stellt sicher, dass die exportierte Arbeitsfläche arithmetisch exakt den vom Nutzer angegebenen Koordinaten entspricht.',
+        '<strong>Typografisches Autoscaling:</strong> Im automatischen Modus berechnet die Schriftgröße die Umfangsfläche und Zeichenanzahl, um den Text elegant einzupassen – ohne unerwünschte <em>Overflows</em>.',
+        '<strong>Hexadezimale Synchronisation:</strong> Bidirektionale Zustandskontrolle zwischen nativen HTML-Farbwählern und Texteingaben sorgt für präzise Kontraste, die Ihrer Figma- oder Penpot-Palette entsprechen.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Die verborgene Kunst des technischen Wireframings',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Kein monolithisches Projekt und kein Micro-Frontend kommt ohne Grundlagenarbeit aus – erst recht nicht bei anspruchsvollen Kunden oder Product Managern mit klarer Vision. Wer grafische Iterationen zügig durchführen kann, ohne fertige <em>Assets</em> mitschleppen zu müssen, hat einen klaren Vorteil. Dieser Generator greift direkt auf die moderne JS-API <code>toDataURL()</code> auf Ihrer lokalen Maschine zurück und liefert ein professionelles Ergebnis ohne fragwürdige Zwischenverarbeitung.',
+    },
+  ],
+};

package/src/tool/placeholderGenerator/i18n/id.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 = 'generator-gambar-placeholder';
+const title = 'Generator Gambar Placeholder. Buat Mockup Web dengan Cepat';
+const description =
+  'Buat gambar placeholder kustom untuk desain web Anda. Atur resolusi, warna latar, teks, lalu ekspor dalam format PNG, WebP, atau JPEG secara instan.';
+
+const faqData = [
+  {
+    question: 'Apa itu gambar placeholder?',
+    answer:
+      'Gambar placeholder adalah grafis sementara yang digunakan dalam desain web dan tata letak halaman untuk mengisi ruang yang nantinya akan ditempati oleh gambar nyata. Gambar ini membantu memvisualisasikan struktur halaman sebelum konten final tersedia.',
+  },
+  {
+    question: 'Apakah saya bisa menggunakan resolusi apa pun di generator ini?',
+    answer:
+      'Ya, Anda dapat memasukkan nilai numerik apa pun untuk lebar dan tinggi. Generator akan membuat kanvas dengan dimensi persis yang diminta, cocok untuk grid ketat atau banner iklan dengan ukuran tertentu.',
+  },
+  {
+    question: 'Dalam format apa gambar diunduh?',
+    answer:
+      'Secara bawaan, gambar dihasilkan dalam format WebP untuk kompresi optimal. Namun Anda juga bisa memilih PNG untuk kualitas tanpa kompresi, atau JPEG untuk kompatibilitas yang lebih luas.',
+  },
+  {
+    question: 'Apakah ini diproses di server?',
+    answer:
+      'Tidak, seluruh proses rendering gambar dilakukan secara instan di memori virtual (Canvas) browser Anda sendiri. Prosesnya langsung terjadi tanpa mengirim data apa pun melalui jaringan.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Tentukan dimensi',
+    text: 'Masukkan nilai lebar dan tinggi secara langsung, atau klik salah satu preset (FHD, HD, Instagram, dll.) untuk mengisinya secara otomatis.',
+  },
+  {
+    name: 'Atur warna dan teks',
+    text: 'Pilih warna latar belakang dan teks menggunakan pemilih warna bawaan atau dengan mengetik kode heksadesimal. Opsional, tambahkan teks khusus untuk menggantikan label dimensi default.',
+  },
+  {
+    name: 'Pilih tipografi dan format',
+    text: 'Tentukan jenis huruf dan ukuran font. Pilih format keluaran (WebP, PNG, atau JPEG) sesuai kebutuhan Anda.',
+  },
+  {
+    name: 'Unduh gambar',
+    text: 'Klik tombol Unduh untuk menyimpan gambar placeholder yang telah dibuat langsung ke perangkat 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: PlaceholderGeneratorUI = {
+  labelDimensions: 'Dimensi Cepat',
+  labelWidth: 'Lebar (px)',
+  labelHeight: 'Tinggi (px)',
+  labelBgColor: 'Latar Belakang',
+  labelTextColor: 'Teks',
+  labelCustomText: 'Teks Kustom (Opsional)',
+  placeholderCustomText: 'Mis: Banner Hero',
+  labelFontFamily: 'Tipografi',
+  labelFontSize: 'Ukuran Dasar',
+  fontSizeAuto: 'Otomatis',
+  labelFormat: 'Format Keluaran',
+  btnDownload: 'Unduh Gambar',
+};
+
+export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Pertanyaan yang Sering Diajukan',
+  faq: faqData,
+  bibliographyTitle: 'Referensi dan Dokumentasi',
+  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: 'Solusi Terbaik untuk Mockup Web yang Cepat',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Pada tahap awal konseptualisasi atau perancangan struktur sebuah situs web (wireframing), kita jarang memiliki konten foto final. Ruang kosong tanpa gambar dapat mendistorsi gambaran keseluruhan produk dan menyembunyikan kesalahan kritis dalam jarak atau proporsi. Generator gambar placeholder menyelesaikan masalah ini seketika, memungkinkan Anda menyisipkan area berwarna dengan dimensi presisi secara langsung.',
+    },
+    {
+      type: 'tip',
+      title: 'Desain Tanpa Hambatan',
+      html: 'Saat membangun CSS Grid, placeholder dengan ukuran tepat seperti 1200x800 piksel sangatlah penting. Dengan mengunduh blok pengisi, Anda menghindari penambahan CSS ekstra atau skrip pihak ketiga ke dalam kode sementara Anda.',
+    },
+    {
+      type: 'title',
+      text: 'Mengapa Menghindari Layanan Eksternal Itu Penting',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Praktik umum di ekosistem frontend adalah menautkan layanan seperti <code>via.placeholder.com</code> langsung ke atribut <code>src</code> dalam HTML. Meskipun terlihat praktis melalui parameter URL, pendekatan ini memiliki efek samping serius yang sebaiknya dihindari oleh developer yang teliti.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Menyisipkan domain eksternal di setiap tag gambar pada halaman yang sedang dikembangkan akan meningkatkan permintaan DNS, memperlambat sistem hot-reloading seperti Vite, Gulp, atau Webpack, dan secara tidak sengaja meninggalkan jejak di branch yang akhirnya masuk ke cloud. Dengan menggunakan utilitas ini dan menghasilkan gambar dalam format pilihan Anda (WebP, PNG, atau JPEG), seluruh prototipe tetap berjalan sepenuhnya di mode localhost.',
+    },
+    {
+      type: 'title',
+      text: 'Fitur Utama Algoritma Generator',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Resolusi Pixel Perfect:</strong> HTML5 Canvas native memastikan kanvas yang diekspor secara aritmetis sesuai dengan koordinat yang ditentukan pengguna.',
+        '<strong>Autoscaling Tipografi:</strong> Dalam mode Otomatis, ukuran font dihitung berdasarkan area perimeter dan jumlah karakter agar teks muat dengan elegan tanpa menimbulkan <em>overflow</em> yang tidak diinginkan.',
+        '<strong>Sinkronisasi Heksadesimal:</strong> Kontrol status dua arah antara pemilih warna HTML native dan input teks memastikan kontras warna yang presisi sesuai palet UI/UX dari Figma atau Penpot Anda.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Seni Wireframing Teknis yang Sering Terlupakan',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Tidak ada proyek monolitik maupun micro frontend yang bisa melewati tahap pondasi begitu saja, terutama saat berhadapan dengan klien yang demanding atau Product Manager dengan visi yang kuat. Kemampuan melakukan iterasi grafis dengan cepat tanpa harus menunggu <em>aset</em> final adalah pembeda antara developer yang lincah dan yang terhambat. Generator ini memanfaatkan API JS modern <code>toDataURL()</code> langsung di mesin lokal Anda untuk menghasilkan output berkualitas industri tanpa pemrosesan perantara yang meragukan.',
+    },
+  ],
+};

package/src/tool/placeholderGenerator/i18n/it.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 = 'generatore-immagini-placeholder';
+const title = 'Generatore di Immagini Placeholder. Mockup Web Rapidi Online';
+const description =
+  'Crea immagini segnaposto personalizzate per i tuoi design web. Regola risoluzione, sfondo, testo ed esporta in PNG, WebP o JPEG in pochi istanti.';
+
+const faqData = [
+  {
+    question: "Cos'è un'immagine placeholder?",
+    answer:
+      "Un'immagine placeholder o segnaposto è una grafica temporanea usata nel web design e nella progettazione di layout per riservare lo spazio destinato a un'immagine definitiva. Aiutano a visualizzare la struttura di una pagina prima che il contenuto finale sia disponibile.",
+  },
+  {
+    question: 'Posso usare qualsiasi risoluzione nel generatore?',
+    answer:
+      'Sì, puoi inserire qualsiasi valore numerico per larghezza e altezza. Il generatore creerà una tela con le dimensioni esatte richieste, perfetta per griglie precise o banner pubblicitari specifici.',
+  },
+  {
+    question: 'In che formato vengono scaricate le immagini?',
+    answer:
+      "Per impostazione predefinita le immagini vengono generate in WebP per una compressione ottimale, ma puoi scegliere di scaricarle in PNG per la massima qualità senza perdita, o in JPEG per la compatibilità tradizionale.",
+  },
+  {
+    question: 'Il processo avviene su un server?',
+    answer:
+      'No, il rendering completo avviene istantaneamente nella memoria virtuale (Canvas) del tuo browser. È immediato e non richiede alcun invio di dati attraverso la rete.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Imposta le dimensioni',
+    text: 'Inserisci i valori di larghezza e altezza direttamente oppure clicca su uno dei preset (FHD, HD, Instagram, ecc.) per compilarli in automatico.',
+  },
+  {
+    name: 'Configura colori e testo',
+    text: 'Scegli il colore di sfondo e del testo tramite i selettori nativi o digitando un codice esadecimale. Facoltativamente, aggiungi un testo personalizzato per sostituire la dicitura predefinita delle dimensioni.',
+  },
+  {
+    name: 'Seleziona tipografia e formato',
+    text: "Scegli la famiglia tipografica e la dimensione del carattere. Seleziona il formato di output (WebP, PNG o JPEG) in base alle tue esigenze.",
+  },
+  {
+    name: "Scarica l'immagine",
+    text: "Clicca sul pulsante Scarica per salvare il placeholder generato direttamente sul tuo dispositivo.",
+  },
+];
+
+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: 'it',
+};
+
+const ui: PlaceholderGeneratorUI = {
+  labelDimensions: 'Dimensioni Rapide',
+  labelWidth: 'Larghezza (px)',
+  labelHeight: 'Altezza (px)',
+  labelBgColor: 'Sfondo',
+  labelTextColor: 'Testo',
+  labelCustomText: 'Testo Personalizzato (Opzionale)',
+  placeholderCustomText: 'Es.: Banner Hero',
+  labelFontFamily: 'Tipografia',
+  labelFontSize: 'Dimensione Base',
+  fontSizeAuto: 'Automatico',
+  labelFormat: 'Formato di Output',
+  btnDownload: "Scarica l'immagine",
+};
+
+export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Domande Frequenti',
+  faq: faqData,
+  bibliographyTitle: 'Riferimenti e Documentazione',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
+      url: 'https://developer.mozilla.org/it/docs/Web/API/HTMLCanvasElement/toDataURL',
+    },
+    {
+      name: 'MDN Web Docs: CanvasRenderingContext2D',
+      url: 'https://developer.mozilla.org/it/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: 'Lo strumento definitivo per mockup rapidi',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "Nelle fasi iniziali di concettualizzazione o strutturazione di un sito web (wireframing), il materiale fotografico finale è raramente disponibile. Le aree vuote possono distorcere la percezione complessiva del prodotto e nascondere errori critici di spaziatura o proporzioni. Un generatore di immagini placeholder risolve il problema all'istante, consentendo di inserire aree colorate con dimensioni precise senza perdere tempo.",
+    },
+    {
+      type: 'tip',
+      title: 'Design senza attriti',
+      html: "Quando si costruiscono CSS Grid, avere un'area di esattamente 1200x800 pixel è spesso imprescindibile. Scaricando i blocchi segnaposto si evita di iniettare CSS aggiuntivo o script di terze parti nel codice temporaneo.",
+    },
+    {
+      type: 'title',
+      text: 'Perché evitare i servizi esterni',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: "Nel mondo frontend è comune collegare servizi come <code>via.placeholder.com</code> direttamente negli attributi <code>src</code> dell'HTML. Sebbene sembri pratico tramite parametri URL, questo approccio presenta effetti collaterali rilevanti che uno sviluppatore attento preferirebbe evitare.",
+    },
+    {
+      type: 'paragraph',
+      html: "Inserire un dominio remoto in ogni tag immagine di una pagina in sviluppo incrementa le richieste DNS, penalizza i sistemi di hot-reloading di Vite, Gulp o Webpack e lascia tracce accidentali in branch che finiscono nel cloud. Usando questo strumento e generando l'immagine nel formato preferito (WebP, PNG o JPEG), il prototipo rimane completamente in modalità localhost.",
+    },
+    {
+      type: 'title',
+      text: "Caratteristiche tecniche del generatore",
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        "<strong>Risoluzione Pixel Perfect:</strong> L'HTML5 Canvas nativo garantisce che la tela esportata corrisponda aritmeticamente alle coordinate specificate dall'utente.",
+        "<strong>Autoscaling Tipografico:</strong> In modalità Automatica, la dimensione del font calcola l'area perimetrale e il numero di caratteri per adattare il testo con eleganza senza generare <em>overflow</em> indesiderati.",
+        '<strong>Fusione Esadecimale:</strong> Il controllo bidirezionale dello stato tra i selettori nativi HTML e gli input testuali garantisce contrasti precisi in linea con la palette UI/UX del tuo progetto Figma o Penpot.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'La dimensione nascosta del wireframing tecnico',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: "Non esiste progetto monolitico né micro frontend che non attraversi fasi di impostazione, soprattutto di fronte a clienti esigenti o Product Manager con una visione precisa. Poter iterare graficamente in modo rapido, senza dover trascinare <em>asset</em> definitivi, distingue lo sviluppatore efficiente da quello bloccato. Questo generatore sfrutta direttamente la moderna API JS <code>toDataURL()</code> sulla tua macchina locale per offrire un risultato di livello professionale, senza elaborazioni intermedie di dubbia affidabilità.",
+    },
+  ],
+};