doc: add i18n html example

fix #643

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)

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-->
+<!--@include: ./upgrade-ant-design-vue.md-->
+<!--@include: ./extract-i18n-key.md-->

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 ++]

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/)