From 3a5e912a6ecd13a2db4564eb9d77e0616edebaa0 Mon Sep 17 00:00:00 2001
From: Jany <127505435+janydoe@users.noreply.github.com>
Date: Fri, 24 Mar 2023 08:13:46 +0000
Subject: [PATCH] Use i18n-t instead of v-html directive (#1676)

Use i18n-t component to avoid v-html directive
and to make localization easier
---
 web/src/assets/locales/en.json                  | 3 ++-
 web/src/components/repo/settings/GeneralTab.vue | 8 ++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index b610d7b21..de700a15e 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -82,7 +82,8 @@
                 "pipeline_path": {
                     "path": "Pipeline path",
                     "default": "By default: .woodpecker/*.yml -> .woodpecker.yml -> .drone.yml",
-                    "desc": "Path to your pipeline config (for example <span class=\"bg-gray-300 dark:bg-dark-700 rounded-md px-1\">my/path/</span>). Folders should end with a <span class=\"bg-gray-300 dark:bg-dark-700 rounded-md px-1\">/</span>."
+                    "desc": "Path to your pipeline config (for example {0}). Folders should end with a {1}.",
+                    "desc_path_example": "my/path/"
                 },
                 "allow_pr": {
                     "allow": "Allow Pull Requests",
diff --git a/web/src/components/repo/settings/GeneralTab.vue b/web/src/components/repo/settings/GeneralTab.vue
index 3b05b43a0..dc3573cc2 100644
--- a/web/src/components/repo/settings/GeneralTab.vue
+++ b/web/src/components/repo/settings/GeneralTab.vue
@@ -15,8 +15,12 @@
           :placeholder="$t('repo.settings.general.pipeline_path.default')"
         />
         <template #description>
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <p class="text-sm text-color-alt" v-html="$t('repo.settings.general.pipeline_path.desc')" />
+          <i18n-t keypath="repo.settings.general.pipeline_path.desc" tag="p" class="text-sm text-color-alt">
+            <span class="bg-gray-300 dark:bg-dark-700 rounded-md px-1">{{
+              $t('repo.settings.general.pipeline_path.desc_path_example')
+            }}</span>
+            <span class="bg-gray-300 dark:bg-dark-700 rounded-md px-1">/</span>
+          </i18n-t>
         </template>
       </InputField>