feat(i18n): translate callout titles in README

Closes #259

Author: wojtekmaj

app/components/Readme.vue

@@ -62,13 +62,23 @@ function handleClick(event: MouseEvent) {
   <article
     class="readme prose prose-invert max-w-[70ch] lg:max-w-none px-1"
     v-html="html"
+    :data-i18n-note="$t('package.readme.callout.note')"
+    :data-i18n-tip="$t('package.readme.callout.tip')"
+    :data-i18n-important="$t('package.readme.callout.important')"
+    :data-i18n-warning="$t('package.readme.callout.warning')"
+    :data-i18n-caution="$t('package.readme.callout.caution')"
     @click="handleClick"
   />
 </template>
 
 <style scoped>
 /* README prose styling */
 .readme {
+  --i18n-note: attr(data-i18n-note);
+  --i18n-tip: attr(data-i18n-tip);
+  --i18n-important: attr(data-i18n-important);
+  --i18n-warning: attr(data-i18n-warning);
+  --i18n-caution: attr(data-i18n-caution);
   color: var(--fg-muted);
   line-height: 1.75;
   /* Prevent horizontal overflow on mobile */
@@ -333,7 +343,7 @@ function handleClick(event: MouseEvent) {
   background: rgba(59, 130, 246, 0.05);
 }
 .readme :deep(blockquote[data-callout='note']::before) {
-  content: 'Note';
+  content: var(--i18n-note);
   color: #3b82f6;
 }
 .readme :deep(blockquote[data-callout='note']::after) {
@@ -348,7 +358,7 @@ function handleClick(event: MouseEvent) {
   background: rgba(34, 197, 94, 0.05);
 }
 .readme :deep(blockquote[data-callout='tip']::before) {
-  content: 'Tip';
+  content: var(--i18n-tip);
   color: #22c55e;
 }
 .readme :deep(blockquote[data-callout='tip']::after) {
@@ -363,7 +373,7 @@ function handleClick(event: MouseEvent) {
   background: rgba(168, 85, 247, 0.05);
 }
 .readme :deep(blockquote[data-callout='important']::before) {
-  content: 'Important';
+  content: var(--i18n-important);
   color: var(--syntax-fn);
 }
 .readme :deep(blockquote[data-callout='important']::after) {
@@ -378,7 +388,7 @@ function handleClick(event: MouseEvent) {
   background: rgba(234, 179, 8, 0.05);
 }
 .readme :deep(blockquote[data-callout='warning']::before) {
-  content: 'Warning';
+  content: var(--i18n-warning);
   color: #eab308;
 }
 .readme :deep(blockquote[data-callout='warning']::after) {
@@ -393,7 +403,7 @@ function handleClick(event: MouseEvent) {
   background: rgba(239, 68, 68, 0.05);
 }
 .readme :deep(blockquote[data-callout='caution']::before) {
-  content: 'Caution';
+  content: var(--i18n-caution);
   color: #ef4444;
 }
 .readme :deep(blockquote[data-callout='caution']::after) {

i18n/locales/pl-PL.json

@@ -204,7 +204,14 @@
       "title": "README",
       "no_readme": "Brak README.",
       "view_on_github": "Zobacz na GitHub",
-      "toc_title": "Spis treści"
+      "toc_title": "Spis treści",
+      "callout": {
+        "note": "notatka",
+        "tip": "wskazówka",
+        "important": "ważne",
+        "warning": "uwaga",
+        "caution": "ostrożnie"
+      }
     },
     "keywords_title": "Słowa kluczowe",
     "compatibility": "Zgodność",

lunaria/files/pl-PL.json

@@ -204,7 +204,14 @@
       "title": "README",
       "no_readme": "Brak README.",
       "view_on_github": "Zobacz na GitHub",
-      "toc_title": "Spis treści"
+      "toc_title": "Spis treści",
+      "callout": {
+        "note": "notatka",
+        "tip": "wskazówka",
+        "important": "ważne",
+        "warning": "uwaga",
+        "caution": "ostrożnie"
+      }
     },
     "keywords_title": "Słowa kluczowe",
     "compatibility": "Zgodność",