@jjlmoya/utils-developer 1.4.0 → 1.6.0

package/src/tool/cssToInlineConverter/i18n/ja.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内に直接埋め込まれたインラインスタイルへ自動変換します。ニュースレター、トランザクショナルメール、安定したWebレイアウトに最適です。';
+
+const faqData = [
+  {
+    question: 'メールに外部スタイルシートではなくインラインCSSが必要な理由は？',
+    answer:
+      'Outlook、Gmail、Apple MailなどのメールクライアントはセキュリティUP上の理由から<link>タグや<style>タグを除去または無視します。メール内でスタイルを確実に反映させる唯一の方法は、各HTML要素のstyle属性に直接埋め込むことです。',
+  },
+  {
+    question: '要素にすでにstyle属性がある場合はどうなりますか？',
+    answer:
+      'ツールは既存のインラインスタイルを尊重し、新しいプロパティをその後に追加します。CSSカスケードの挙動をシミュレートしており、競合が生じた場合は後から宣言されたプロパティが優先されます。',
+  },
+  {
+    question: ':hoverやメディアクエリのような複雑なセレクターにも対応していますか？',
+    answer:
+      'このツールはDOMParserが解決できる、クラス・ID・属性・構造的疑似クラスのセレクターを処理します。:hoverのような状態依存セレクターやメディアクエリはランタイム環境に依存するためインライン化できず、無視されます。',
+  },
+  {
+    question: 'HTMLやCSSのコードはサーバーに送信されますか？',
+    answer:
+      'いいえ。すべての処理はブラウザ内のネイティブDOMParser APIを使って100%ローカルで行われます。コードの一切がデバイスの外に出ることはなく、機密コンテンツを含むテンプレートでも完全なプライバシーが保証されます。',
+  },
+];
+
+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: 'ja',
+};
+
+const ui: CssToInlineConverterUI = {
+  labelHtml: '元のHTML',
+  labelCss: 'CSSルール',
+  labelOutput: 'インラインHTML結果',
+  placeholderHtml: '<div class="my-class">こんにちは世界</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/ja/docs/Web/HTML/Global_attributes/style',
+    },
+    {
+      name: 'DOMParser API: ブラウザ内の安全なパース処理',
+      url: 'https://developer.mozilla.org/ja/docs/Web/API/DOMParser',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'CSSインライナーとは何か、なぜ必要なのか',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: '現代のWeb開発では、役割を分離するのが一般的です。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: 'Microsoft 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>完全オフライン:</strong> コードの一切がデバイスの外に出ません。機密コンテンツを含むテンプレートでも完全なプライバシーを確保できます。',
+      ],
+    },
+  ],
+};
+

package/src/tool/cssToInlineConverter/i18n/ko.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 변환기. 이메일용 CSS 인라이너';
+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:
+      '아니요. 모든 처리는 브라우저 내 기본 DOMParser API를 사용하여 100% 로컬에서 이루어집니다. 코드의 단 한 바이트도 기기 밖으로 나가지 않아 민감한 콘텐츠가 포함된 템플릿도 완전한 개인 정보 보호가 보장됩니다.',
+  },
+];
+
+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: 'ko',
+};
+
+const ui: CssToInlineConverterUI = {
+  labelHtml: '원본 HTML',
+  labelCss: 'CSS 규칙',
+  labelOutput: '인라인 HTML 결과',
+  placeholderHtml: '<div class="my-class">안녕하세요</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/ko/docs/Web/HTML/Global_attributes/style',
+    },
+    {
+      name: 'DOMParser API: 브라우저 내 안전한 파싱',
+      url: 'https://developer.mozilla.org/ko/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: 'Microsoft 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/i18n/nl.ts

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssToInlineConverterUI } from '../ui';
+
+const slug = 'css-naar-inline-html-converter';
+const title = 'CSS naar Inline HTML omzetten. Inliner voor emails';
+const description =
+  'Zet uw stylesheets en CSS-klassen automatisch om naar inline stijlen in uw HTML. Ideaal voor nieuwsbrieven, transactionele emails en betrouwbare webopmaak.';
+
+const faqData = [
+  {
+    question: 'Waarom hebben emails inline CSS nodig in plaats van externe stylesheets?',
+    answer:
+      'E-mailclients zoals Outlook, Gmail of Apple Mail filteren of negeren <link>- en <style>-tags om veiligheidsredenen. De enige gegarandeerde manier om een stijl correct toe te passen in een e-mail, is door die rechtstreeks in het style-attribuut van elk HTML-element in te sluiten.',
+  },
+  {
+    question: 'Wat gebeurt er als een element al een eigen style-attribuut heeft?',
+    answer:
+      'Het gereedschap respecteert bestaande inline stijlen en voegt de nieuwe eigenschappen daarna toe, waarbij het CSS-cascadegedrag wordt gesimuleerd: eigenschappen die later worden gedeclareerd, overschrijven eerdere bij conflicten.',
+  },
+  {
+    question: 'Werkt het ook met complexe selectors zoals :hover of media queries?',
+    answer:
+      'Het gereedschap verwerkt klasse-, id-, attribuut- en structurele pseudo-klasseselectors die DOMParser kan oplossen. Toestandsafhankelijke selectors zoals :hover en media queries kunnen niet worden geïnlined (ze zijn afhankelijk van de runtime-omgeving) en worden genegeerd.',
+  },
+  {
+    question: 'Wordt mijn HTML- en CSS-code naar een server gestuurd?',
+    answer:
+      'Nee. Alle verwerking vindt 100% in uw browser plaats via de native DOMParser API. Geen enkele byte van uw code verlaat uw apparaat, wat volledige privacy garandeert voor sjablonen met gevoelige inhoud.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Plak uw originele HTML',
+    text: 'Schrijf of plak de HTML die u wilt verwerken in het veld "Originele HTML". Dit kan een fragment of een volledig document zijn.',
+  },
+  {
+    name: 'Voeg uw CSS-regels toe',
+    text: 'Plak de klassen en id\'s die u wilt injecteren in het veld "CSS-regels". Het gereedschap past ze toe met inachtneming van de selectorspecificiteit.',
+  },
+  {
+    name: 'Converteren en kopiëren',
+    text: 'Klik op "CSS in HTML injecteren". Het resultaat met alle inline stijlen verschijnt eronder, klaar om te kopiëren en te plakken in uw e-mailprogramma of 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: 'nl',
+};
+
+const ui: CssToInlineConverterUI = {
+  labelHtml: 'Originele HTML',
+  labelCss: 'CSS-regels',
+  labelOutput: 'Inline HTML-resultaat',
+  placeholderHtml: '<div class="mijn-klasse">Hallo Wereld</div>',
+  placeholderCss: '.mijn-klasse { color: red; padding: 10px; }',
+  placeholderOutput: 'Uw HTML met ingebedde stijlen verschijnt hier...',
+  btnConvert: 'CSS in HTML injecteren',
+  btnCopy: 'Code kopiëren',
+  btnCopied: 'Gekopieerd!',
+  msgError: 'Verwerkingsfout. Controleer of uw HTML en CSS geldig zijn.',
+};
+
+export const content: ToolLocaleContent<CssToInlineConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Veelgestelde vragen',
+  faq: faqData,
+  bibliographyTitle: 'Referenties en documentatie',
+  bibliography: [
+    {
+      name: 'Can I email: HTML- en CSS-ondersteuningsmatrix voor emails',
+      url: 'https://www.caniemail.com/',
+    },
+    {
+      name: 'MDN Web Docs: Het globale style-attribuut',
+      url: 'https://developer.mozilla.org/nl/docs/Web/HTML/Global_attributes/style',
+    },
+    {
+      name: 'DOMParser API: Veilig parseren in de browser',
+      url: 'https://developer.mozilla.org/nl/docs/Web/API/DOMParser',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Wat is een CSS Inliner en waarom heeft u die nodig?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Bij het ontwikkelen van moderne webapplicaties zijn we gewend om verantwoordelijkheden te scheiden: HTML bouwt de structuur, een extern CSS-bestand verzorgt alle visuele opmaak. Niet alle omgevingen vertrouwen echter op externe stylesheets of globale <code>&lt;style&gt;</code>-tags.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Het meest voorkomende en strenge geval waarbij externe CSS tekortschiet, is de <strong>ontwikkeling van emailsjablonen</strong>. In deze omgevingen is de enige betrouwbare manier om een lettertype, kleur of marge correct weer te geven, het rechtstreeks in de tag insluiten: <code>&lt;span style="color: red;"&gt;</code>.',
+    },
+    {
+      type: 'title',
+      text: 'Het CSS-probleem in e-mailclients',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'E-mailclients zoals Microsoft Outlook, Apple Mail of Gmail staan bekend om hun restrictieve CSS-rendermachines. De meeste filteren of verwijderen <code>&lt;link&gt;</code>- of <code>&lt;style&gt;</code>-tags uit angst voor code-injecties die de leesinterface kunnen verstoren.',
+    },
+    {
+      type: 'tip',
+      html: 'Voor nieuwsbrieven of transactionele emails (kassabonnen, accountbevestigingen) geldt het gebruik van tabellen en <em>inline CSS</em> als de gouden standaard in de e-mailmarketingbranche.',
+    },
+    {
+      type: 'title',
+      text: 'Hoe dit gereedschap werkt in uw browser',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Veilig parseren:</strong> Gebruikt de <code>DOMParser API</code> om de ingevoerde HTML tijdelijk te transformeren naar een veilige virtuele DOM binnen uw browser.',
+        '<strong>Cascadesimulatie:</strong> Analyseert uw CSS-regels, past specificiteitsgewichten toe op selectors en schrijft de <code>style</code>-attributen van de geselecteerde HTML-elementen bij door de code in te injecteren.',
+        '<strong>100% offline:</strong> Geen enkele byte van uw code verlaat uw apparaat. Volledige privacy voor sjablonen met gevoelige inhoud.',
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssToInlineConverterUI } from '../ui';
+
+const slug = 'konwerter-css-do-inline-html';
+const title = 'Konwerter CSS na HTML Inline. Inliner do Wiadomości Email';
+const description =
+  'Transformuj swoje arkusze stylów i klasy CSS w automatycznie zagnieżdżone style w HTML. Idealny do biuletynów, transakcyjnych wiadomości email i bezpiecznych layoutów webowych.';
+
+const faqData = [
+  {
+    question: 'Dlaczego wiadomości email potrzebują inline CSS zamiast zewnętrznych arkuszy stylów?',
+    answer:
+      'Klienci poczty, tacy jak Outlook, Gmail lub Apple Mail, filtrują lub ignorują znaczniki <link> i <style> ze względów bezpieczeństwa. Jedynym gwarantowanym sposobem na prawidłowe zastosowanie stylu w wiadomości email jest osadzenie go bezpośrednio w atrybucie style każdego elementu HTML.',
+  },
+  {
+    question: 'Co się stanie, jeśli element ma już własny atrybut style?',
+    answer:
+      'Narzędzie respektuje istniejące style inline i dołącza nowe właściwości, symulując zachowanie kaskady CSS: właściwości zadeklarowane później zastępują wcześniejsze w przypadku konfliktu.',
+  },
+  {
+    question: 'Czy to działa z złożonymi selektorami takimi jak :hover lub media queries?',
+    answer:
+      'Narzędzie przetwarza selektory klas, id, atrybutów oraz pseudo-klas strukturalnych, które DOMParser może rozwiązać. Selektory zależne od stanu, takie jak :hover, i media queries, nie mogą być zagnieżdżone (zależą od środowiska wykonawczego) i są ignorowane.',
+  },
+  {
+    question: 'Czy mój kod HTML i CSS jest wysyłany na jakiś serwer?',
+    answer:
+      'Nie. Całe przetwarzanie odbywa się 100% w przeglądarce przy użyciu natywnego API DOMParser. Żaden bajt Twojego kodu nie opuszcza Twojego urządzenia, gwarantując całkowitą prywatność dla szablonów z wrażliwą zawartością.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Wklej oryginalny HTML',
+    text: 'Wpisz lub wklej HTML, który chcesz przetworzyć, w polu "Oryginalny HTML". Może to być fragment lub pełny dokument.',
+  },
+  {
+    name: 'Dodaj reguły CSS',
+    text: 'Wklej klasy i id, które chcesz wstrzyknąć, w polu "Reguły CSS". Narzędzie zastosuje je, respektując specyficzność selektora.',
+  },
+  {
+    name: 'Konwertuj i kopiuj',
+    text: 'Kliknij "Wstrzyknij CSS do HTML". Wynik ze wszystkimi zaznajomionymi stylami pojawi się poniżej, gotowy do skopiowania i wklejenia do Twojego menedżera poczty email lub 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: 'pl',
+};
+
+const ui: CssToInlineConverterUI = {
+  labelHtml: 'Oryginalny HTML',
+  labelCss: 'Reguły CSS',
+  labelOutput: 'Wynik HTML Inline',
+  placeholderHtml: '<div class="my-class">Hello World</div>',
+  placeholderCss: '.my-class { color: red; padding: 10px; }',
+  placeholderOutput: 'Twój HTML z zagnieżdżonymi stylami pojawi się tutaj...',
+  btnConvert: 'Wstrzyknij CSS do HTML',
+  btnCopy: 'Kopiuj Kod',
+  btnCopied: 'Skopiowano!',
+  msgError: 'Błąd przetwarzania. Sprawdź, czy Twój HTML i CSS są prawidłowe.',
+};
+
+export const content: ToolLocaleContent<CssToInlineConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Często Zadawane Pytania',
+  faq: faqData,
+  bibliographyTitle: 'Referencje i Dokumentacja',
+  bibliography: [
+    {
+      name: 'Can I email: Macierz Wsparcia HTML i CSS do Wiadomości Email',
+      url: 'https://www.caniemail.com/',
+    },
+    {
+      name: 'MDN Web Docs: Globalny atrybut style',
+      url: 'https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/style',
+    },
+    {
+      name: 'API DOMParser: Bezpieczne analizowanie w przeglądarce',
+      url: 'https://developer.mozilla.org/en/docs/Web/API/DOMParser',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Co to jest CSS Inliner i po co Ci jest potrzebny?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Podczas opracowywania nowoczesnych aplikacji webowych jesteśmy przyzwyczajeni do separacji zagadnień: HTML buduje strukturę, a zewnętrzny plik CSS dostarcza całego stylu wizualnego. Jednak nie wszystkie środowiska ufają zewnętrznym arkuszom stylów lub globalnym znacznikom <code>&lt;style&gt;</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Najpopularniejszy i najsurowszy przypadek użytku, w którym CSS zewnętrzny zawodzi, to <strong>Email Template Development</strong>. W tych środowiskach jedynym niezawodnym sposobem na to, aby czcionka, kolor lub margines były renderowane poprawnie, jest zagnieżdżenie go bezpośrednio w znaczniku: <code>&lt;span style="color: red;"&gt;</code>.',
+    },
+    {
+      type: 'title',
+      text: 'Problem CSS w Klientach Poczty',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Klienci poczty takie jak Microsoft Outlook, Apple Mail czy Gmail mają złą sławę ze swoimi restrykcyjnymi silnikami renderowania CSS. Większość filtruje lub odrzuca znaczniki <code>&lt;link&gt;</code> lub <code>&lt;style&gt;</code> ze strachu przed wstrzyknięciami kodu, które mogą zepsuć interfejs czytania.',
+    },
+    {
+      type: 'tip',
+      html: 'Dla biuletynów lub transakcyjnych wiadomości email (rachunki, potwierdzenia konta) korzystanie z tabel i <em>inline CSS</em> jest standardem złota w branży marketingu email.',
+    },
+    {
+      type: 'title',
+      text: 'Jak to Narzędzie Działa w Twojej Przeglądarce',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Bezpieczne Analizowanie:</strong> Używa <code>API DOMParser</code> do tymczasowej transformacji wejściowego HTML w bezpieczny wirtualny DOM wewnątrz Twojej przeglądarki.',
+        '<strong>Symulacja Kaskady:</strong> Analizuje reguły CSS, stosuje wagi specyficzności do selektorów i mutuje atrybuty <code>style</code> wybranych elementów HTML poprzez wstrzykiwanie kodu.',
+        '<strong>100% Offline:</strong> Żaden bajt Twojego kodu nie opuszcza Twojego urządzenia. Całkowita prywatność dla szablonów z wrażliwą zawartością.',
+      ],
+    },
+  ],
+};