feat: link to e18e page for module replacement (#438)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: garthdw

app/components/PackageReplacement.vue

@@ -5,23 +5,27 @@ const props = defineProps<{
   replacement: ModuleReplacement
 }>()
 
-const { t } = useI18n()
-
-const message = computed(() => {
+const message = computed<[string, { replacement?: string; nodeVersion?: string }]>(() => {
   switch (props.replacement.type) {
     case 'native':
-      return t('package.replacement.native', {
-        replacement: props.replacement.replacement,
-        nodeVersion: props.replacement.nodeVersion,
-      })
+      return [
+        'package.replacement.native',
+        {
+          replacement: props.replacement.replacement,
+          nodeVersion: props.replacement.nodeVersion,
+        },
+      ]
     case 'simple':
-      return t('package.replacement.simple', {
-        replacement: props.replacement.replacement,
-      })
+      return [
+        'package.replacement.simple',
+        {
+          replacement: props.replacement.replacement,
+        },
+      ]
     case 'documented':
-      return t('package.replacement.documented')
+      return ['package.replacement.documented', {}]
     case 'none':
-      return t('package.replacement.none')
+      return ['package.replacement.none', {}]
   }
 })
 
@@ -45,7 +49,25 @@ const docPath = computed(() => {
       {{ $t('package.replacement.title') }}
     </h2>
     <p class="text-sm m-0">
-      {{ message }}
+      <i18n-t :keypath="message[0]" scope="global">
+        <template #replacement>
+          {{ message[1].replacement ?? '' }}
+        </template>
+        <template #nodeVersion>
+          {{ message[1].nodeVersion ?? '' }}
+        </template>
+        <template #community>
+          <a
+            href="https://e18e.dev/docs/replacements/"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
+          >
+            {{ $t('package.replacement.community') }}
+            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+          </a>
+        </template>
+      </i18n-t>
       <a
         v-if="mdnUrl"
         :href="mdnUrl"

i18n/locales/de-DE.json

@@ -119,11 +119,12 @@
     "replacement": {
       "title": "Du brauchst diese Abhängigkeit vielleicht nicht.",
       "native": "Dies kann durch {replacement} ersetzt werden, verfügbar seit Node {nodeVersion}.",
-      "simple": "Die Community hat dieses Paket als überflüssig markiert und empfiehlt: {replacement}.",
-      "documented": "Die Community hat dieses Paket als eines mit leistungsstärkeren Alternativen markiert.",
+      "simple": "Die {community} hat dieses Paket als überflüssig markiert und empfiehlt: {replacement}.",
+      "documented": "Die {community} hat dieses Paket als eines mit leistungsstärkeren Alternativen markiert.",
       "none": "Dieses Paket wurde als nicht mehr nötig markiert, und seine Funktionen sind wahrscheinlich in allen Engines von Haus aus verfügbar.",
       "learn_more": "Mehr erfahren",
-      "mdn": "MDN"
+      "mdn": "MDN",
+      "community": "Community"
     },
     "stats": {
       "license": "Lizenz",

i18n/locales/en.json

@@ -119,11 +119,12 @@
     "replacement": {
       "title": "You might not need this dependency.",
       "native": "This can be replaced with {replacement}, available since Node {nodeVersion}.",
-      "simple": "The community has flagged this package as redundant, with the advice: {replacement}.",
-      "documented": "The community has flagged this package as having more performant alternatives.",
+      "simple": "The {community} has flagged this package as redundant, with the advice: {replacement}.",
+      "documented": "The {community} has flagged this package as having more performant alternatives.",
       "none": "This package has been flagged as no longer needed, and its functionality is likely available natively in all engines.",
       "learn_more": "Learn more",
-      "mdn": "MDN"
+      "mdn": "MDN",
+      "community": "community"
     },
     "stats": {
       "license": "License",

lunaria/files/de-DE.json

@@ -119,11 +119,12 @@
     "replacement": {
       "title": "Du brauchst diese Abhängigkeit vielleicht nicht.",
       "native": "Dies kann durch {replacement} ersetzt werden, verfügbar seit Node {nodeVersion}.",
-      "simple": "Die Community hat dieses Paket als überflüssig markiert und empfiehlt: {replacement}.",
-      "documented": "Die Community hat dieses Paket als eines mit leistungsstärkeren Alternativen markiert.",
+      "simple": "Die {community} hat dieses Paket als überflüssig markiert und empfiehlt: {replacement}.",
+      "documented": "Die {community} hat dieses Paket als eines mit leistungsstärkeren Alternativen markiert.",
       "none": "Dieses Paket wurde als nicht mehr nötig markiert, und seine Funktionen sind wahrscheinlich in allen Engines von Haus aus verfügbar.",
       "learn_more": "Mehr erfahren",
-      "mdn": "MDN"
+      "mdn": "MDN",
+      "community": "Community"
     },
     "stats": {
       "license": "Lizenz",

lunaria/files/en-US.json

@@ -119,11 +119,12 @@
     "replacement": {
       "title": "You might not need this dependency.",
       "native": "This can be replaced with {replacement}, available since Node {nodeVersion}.",
-      "simple": "The community has flagged this package as redundant, with the advice: {replacement}.",
-      "documented": "The community has flagged this package as having more performant alternatives.",
+      "simple": "The {community} has flagged this package as redundant, with the advice: {replacement}.",
+      "documented": "The {community} has flagged this package as having more performant alternatives.",
       "none": "This package has been flagged as no longer needed, and its functionality is likely available natively in all engines.",
       "learn_more": "Learn more",
-      "mdn": "MDN"
+      "mdn": "MDN",
+      "community": "community"
     },
     "stats": {
       "license": "License",