From 73480f5672946d81429227061c32e313c10aa15e Mon Sep 17 00:00:00 2001
From: HerringtonDarkholme
 <2883231+HerringtonDarkholme@users.noreply.github.com>
Date: Mon, 20 Jan 2025 17:08:16 -0500
Subject: [PATCH] doc: add i18n html example

fix #643
---
 website/catalog/html/extract-i18n-key.md      | 42 +++++++++++++++++++
 website/catalog/html/index.md                 |  3 +-
 .../catalog/html/upgrade-ant-design-vue.md    |  4 +-
 website/catalog/index.md                      |  1 +
 4 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 website/catalog/html/extract-i18n-key.md

diff --git a/website/catalog/html/extract-i18n-key.md b/website/catalog/html/extract-i18n-key.md
new file mode 100644
index 00000000..10bb0f35
--- /dev/null
+++ b/website/catalog/html/extract-i18n-key.md
@@ -0,0 +1,42 @@
+## Extract i18n Keys <Badge type="tip" text="Has Fix" />
+
+* [Playground Link](/playground.html#eyJtb2RlIjoiQ29uZmlnIiwibGFuZyI6Imh0bWwiLCJxdWVyeSI6IiIsInJld3JpdGUiOiIiLCJzdHJpY3RuZXNzIjoicmVsYXhlZCIsInNlbGVjdG9yIjoiIiwiY29uZmlnIjoicnVsZTpcbiAga2luZDogdGV4dFxuICBwYXR0ZXJuOiAkVFxuICBub3Q6XG4gICAgcmVnZXg6ICdcXHtcXHsuKlxcfVxcfSdcbmZpeDogXCJ7eyAkKCckVCcpIH19XCIiLCJzb3VyY2UiOiI8dGVtcGxhdGU+XG4gIDxzcGFuPkhlbGxvPC9zcGFuPlxuICA8c3Bhbj57eyB0ZXh0IH19PC9zcGFuPlxuPC90ZW1wbGF0ZT4ifQ==)
+
+### Description
+
+It is tedious to manually find and replace all the text in the template with i18n keys. This rule helps to extract static text into i18n keys. Dynamic text, e.g. mustache syntax, will be skipped.
+
+In practice, you may want to map the extracted text to a key in a dictionary file. While this rule only demonstrates the extraction part, further mapping process can be done via a script reading the output of ast-grep's [`--json`](/guide/tools/json.html) mode, or using [`@ast-grep/napi`](/guide/api-usage/js-api.html).
+
+### YAML
+```yaml
+rule:
+  kind: text
+  pattern: $T
+  # skip dynamic text in mustache syntax
+  not: { regex: '\{\{.*\}\}' }
+fix: "{{ $('$T') }}"
+```
+
+### Example
+
+<!-- highlight matched code in curly-brace {lineNum} -->
+```html {2}
+<template>
+  <span>Hello</span>
+  <span>{{ text }}</span>
+</template>
+```
+
+### Diff
+<!-- use // [!code --] and // [!code ++] to annotate diff -->
+```html
+<template>
+  <span>Hello</span> // [!code --]
+  <span>{{ $('Hello') }}</span> // [!code ++]
+  <span>{{ text }}</span>
+</template>
+```
+
+### Contributed by
+Inspired by [Vue.js RFC](https://github.com/vuejs/rfcs/discussions/705#discussion-7255672)
diff --git a/website/catalog/html/index.md b/website/catalog/html/index.md
index 28c56dba..77b3a249 100644
--- a/website/catalog/html/index.md
+++ b/website/catalog/html/index.md
@@ -8,4 +8,5 @@ You can leverage the [`languageGlobs`](/reference/sgconfig.html#languageglobs) o
 **Caveat**: This approach may not parse framework-specific syntax, like Astro's [frontmatter script](https://docs.astro.build/en/basics/astro-components/#the-component-script) or [Svelte control flow](https://svelte.dev/docs/svelte/if). You will need to load [custom languages](/advanced/custom-language.html) for such cases.
 :::
 
-<!--@include: ./upgrade-ant-design-vue.md-->
\ No newline at end of file
+<!--@include: ./upgrade-ant-design-vue.md-->
+<!--@include: ./extract-i18n-key.md-->
\ No newline at end of file
diff --git a/website/catalog/html/upgrade-ant-design-vue.md b/website/catalog/html/upgrade-ant-design-vue.md
index 3d471609..c0617dbd 100644
--- a/website/catalog/html/upgrade-ant-design-vue.md
+++ b/website/catalog/html/upgrade-ant-design-vue.md
@@ -20,6 +20,8 @@ The rule can be broken down into the following steps:
 <!-- Use YAML in the example. Delete this section if use pattern. -->
 ### YAML
 ```yaml
+id: upgrade-ant-design-vue
+language: HTML
 utils:
   inside-tag:
     # find the enclosing element of the attribute
@@ -57,7 +59,7 @@ fix: :open
 
 ### Diff
 <!-- use // [!code --] and // [!code ++] to annotate diff -->
-```js
+```html
 <template>
   <a-modal :visible="visible">content</a-modal> // [!code --]
   <a-modal :open="visible">content</a-modal> // [!code ++]
diff --git a/website/catalog/index.md b/website/catalog/index.md
index 65076860..36f4fbf0 100644
--- a/website/catalog/index.md
+++ b/website/catalog/index.md
@@ -17,6 +17,7 @@ Feel free to join our [Discord](https://discord.gg/4YZjf6htSQ) channel and ask @
   * [Find function declarations with names of certain pattern](/catalog/go/#find-function-declarations-with-names-of-certain-pattern)
 * [HTML](/catalog/go/)
   * [Upgrade Ant Design Vue](/catalog/html/#upgrade-ant-design-vue)
+  * [Extract i18n Keys](/catalog/html/#extract-i18n-keys)
 * [Java](/catalog/java/)
   * [No Unused Vars](/catalog/java/#no-unused-vars)
 * [Python](/catalog/python/)