gridaco · softmarshmallow · Jan 3, 2022 · Jan 3, 2022 · Jan 3, 2022 · Jan 3, 2022
diff --git a/packages/support-flags/docs/--artwork.ko.md b/packages/support-flags/docs/--artwork.ko.md
@@ -0,0 +1,52 @@
+---
+title: Artwork flag
+id: "--artwork"
+locale: ko
+stage:
+  - production
+  - staging
+  - experimental
+---
+
+# 아트워크 플래그
+
+아트워크 플래그는 그룹 또는 프레임으로 감싸진 디자인을 tree 형태가 아닌, 하나의 아트워크 에셋으로써 지정할수 있는 플래그 입니다. 일러스트나, 아이콘등을 에셋으로써 사용할때 유용합니다. 또는 임베딩되어, 코드로 변환될 필요가 없는 노드를 지정할때도 사용할수 있습니다.
+
+**지정 가능한 키**
+
+- `--artwork`
+
+## 문법
+
+```ts
+`--artwork${"="typeof boolean}`
+```
+
+## 적용 예시
+
+```
+--artwork
+
+--artwork=true
+--artwork=false
+
+--artwork=yes
+--artwork=no
+
+----artwork
+```
+
+## 동작
+
+**인터프리터**
+
+해당 플래그가 반영된다면, 반영된 노드를 기점으로 이미지로 인식, 변환 됩니다. 이후, 하위 노드는 방문하지도, 처리 하지도 않습니다.
+
+**렌더**
+
+- HTML: `<img>` element 로 렌더링 됩니다.
+- Flutter: `Image` widget 으로 렌더링 됩니다.
+
+## 같이보기
+
+- [`--export-as`](./--export-as)
diff --git a/packages/support-flags/docs/--artwork.md b/packages/support-flags/docs/--artwork.md
@@ -1,4 +1,14 @@
-## Artwork flag
+---
+title: Artwork flag
+id: "--artwork"
+locale: en
+stage:
+  - production
+  - staging
+  - experimental
+---
+
+# Artwork flag
 
 **Accepted keys**
 
@@ -37,4 +47,4 @@ When applied, this will force the node to be exported as an image.
 
 ## See Also
 
-- [`--export-as`](../--export-as)
+- [`--export-as`](./--export-as)
diff --git a/packages/support-flags/docs/--as-h1.ko.md b/packages/support-flags/docs/--as-h1.ko.md
@@ -0,0 +1,67 @@
+---
+title: As-H1 flag
+id: "--as-h1"
+locale: ko
+stage:
+  - production
+  - staging
+  - experimental
+---
+
+# `--as-h1` 헤딩1 명시 플래그
+
+**지정 가능한 키**
+
+- `--as-h1`
+- `--as-heading1`
+- `--as-headline1`
+- `--h1`
+- `--heading1`
+- `--headline1`
+
+## 문법
+
+```ts
+`--h1${"="typeof boolean}`
+```
+
+## 적용 예시
+
+```
+--h1
+
+--h1=true
+--h1=false
+
+--h1=yes
+--h1=no
+
+----h1
+```
+
+## 언제 사용하면 좋을까
+
+<!-- shared content between h1~h6 -->
+
+**SEO**
+
+element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 헤딩일 경우, 그 효과는 더 큽니다.
+모바일 앱의 경우, 해당 사항이 없겠지만, 웹어서는 의미에 맞게 h1~h6 을 지정하는 것이 좋습니다.
+
+## 동작
+
+**엘레먼트 (Element)**
+이 플래그가 적용된다면, 해당 노드의 html 생성 엘레먼트는 `<h1>` 로 렌더되어 표시됩니다. (이외의 로직에는 영향이 없으며, 태그가 변경되었기에 이에 따른 부작용은 사용자의 커스텀 css 또는 query 에 따라 변경될 수 있습니다.)
+
+**텍스트 스타일 (Text style)**
+`--h1` 을 적용함으로, 엘레먼트가 수정되더라도, 아직 Grida 는 이에 따른 추가적인 스타일링 지원을 하지 않습니다. 타 `span`, `p`, 와 동일하게 블록단위의 스타일이 지정됩니다. 공용 헤딩 스타일에 대한 Global css 를 지원하지 않습니다.
+
+## 같이보기
+
+- [`--as-h2`](./--as-h2)
+- [`--as-h3`](./--as-h3)
+- [`--as-h4`](./--as-h4)
+- [`--as-h5`](./--as-h5)
+- [`--as-h6`](./--as-h6)
+- [`--as-p`](./--as-p)
+- [`--as-br`](./--as-br)
diff --git a/packages/support-flags/docs/--as-h1.md b/packages/support-flags/docs/--as-h1.md
@@ -1,4 +1,10 @@
 ---
+title: As-H1 flag
+id: "--as-h1"
+locale: en
+locales:
+  - en
+  - ko
 stage:
   - production
   - staging
@@ -22,7 +28,7 @@ stage:
 `--h1${"="typeof boolean}`
 ```
 
-## Example
+## Examples
 
 ```
 --h1
@@ -36,6 +42,15 @@ stage:
 ----h1
 ```
 
+## When to use
+
+<!-- shared content between h1~h6 -->
+
+**SEO**
+
+Explicitly specifying the heading element tag, ofcourse, is essential for SEO.
+This does not applies to mobile apps, but for web, you might want to specify headings in a semantic sence.
+
 ## Behavior
 
 **Element**
@@ -46,10 +61,10 @@ We don't yet support text style matching with `--h1` flag.
 
 ## See Also
 
-- [`--as-h2`](../--as-h2)
-- [`--as-h3`](../--as-h3)
-- [`--as-h4`](../--as-h4)
-- [`--as-h5`](../--as-h5)
-- [`--as-h6`](../--as-h6)
-- [`--as-p`](../--as-p)
-- [`--as-br`](../--as-br)
+- [`--as-h2`](./--as-h2)
+- [`--as-h3`](./--as-h3)
+- [`--as-h4`](./--as-h4)
+- [`--as-h5`](./--as-h5)
+- [`--as-h6`](./--as-h6)
+- [`--as-p`](./--as-p)
+- [`--as-br`](./--as-br)
diff --git a/packages/support-flags/docs/--as-h2.ko.md b/packages/support-flags/docs/--as-h2.ko.md
@@ -0,0 +1,67 @@
+---
+title: As-H2 flag
+id: "--as-h2"
+locale: ko
+stage:
+  - production
+  - staging
+  - experimental
+---
+
+# `--as-h2` 헤딩2 명시 플래그
+
+**지정 가능한 키**
+
+- `--as-h2`
+- `--as-heading2`
+- `--as-headline2`
+- `--h2`
+- `--heading2`
+- `--headline2`
+
+## 문법
+
+```ts
+`--h2${"="typeof boolean}`
+```
+
+## 적용 예시
+
+```
+--h1
+
+--h1=true
+--h1=false
+
+--h1=yes
+--h1=no
+
+----h1
+```
+
+## 언제 사용하면 좋을까
+
+<!-- shared content between h1~h6 -->
+
+**SEO**
+
+element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 헤딩일 경우, 그 효과는 더 큽니다.
+모바일 앱의 경우, 해당 사항이 없겠지만, 웹어서는 의미에 맞게 h1~h6 을 지정하는 것이 좋습니다.
+
+## 동작
+
+**엘레먼트 (Element)**
+이 플래그가 적용된다면, 해당 노드의 html 생성 엘레먼트는 `<h2>` 로 렌더되어 표시됩니다. (이외의 로직에는 영향이 없으며, 태그가 변경되었기에 이에 따른 부작용은 사용자의 커스텀 css 또는 query 에 따라 변경될 수 있습니다.)
+
+**텍스트 스타일 (Text style)**
+`--h1` 을 적용함으로, 엘레먼트가 수정되더라도, 아직 Grida 는 이에 따른 추가적인 스타일링 지원을 하지 않습니다. 타 `span`, `p`, 와 동일하게 블록단위의 스타일이 지정됩니다. 공용 헤딩 스타일에 대한 Global css 를 지원하지 않습니다.
+
+## 같이보기
+
+- [`--as-h1`](./--as-h1)
+- [`--as-h3`](./--as-h3)
+- [`--as-h4`](./--as-h4)
+- [`--as-h5`](./--as-h5)
+- [`--as-h6`](./--as-h6)
+- [`--as-p`](./--as-p)
+- [`--as-br`](./--as-br)
diff --git a/packages/support-flags/docs/--as-h2.md b/packages/support-flags/docs/--as-h2.md
@@ -1,4 +1,10 @@
 ---
+title: As-H2 flag
+id: "--as-h2"
+locale: en
+locales:
+  - en
+  - ko
 stage:
   - production
   - staging
@@ -36,6 +42,15 @@ stage:
 ----h2
 ```
 
+## When to use
+
+<!-- shared content between h1~h6 -->
+
+**SEO**
+
+Explicitly specifying the heading element tag, ofcourse, is essential for SEO.
+This does not applies to mobile apps, but for web, you might want to specify headings in a semantic sence.
+
 ## Behavior
 
 **Element**
@@ -46,10 +61,10 @@ We don't yet support text style matching with `--h2` flag.
 
 ## See Also
 
-- [`--as-h1`](../--as-h1)
-- [`--as-h3`](../--as-h3)
-- [`--as-h4`](../--as-h4)
-- [`--as-h5`](../--as-h5)
-- [`--as-h6`](../--as-h6)
-- [`--as-p`](../--as-p)
-- [`--as-br`](../--as-br)
+- [`--as-h1`](./--as-h1)
+- [`--as-h3`](./--as-h3)
+- [`--as-h4`](./--as-h4)
+- [`--as-h5`](./--as-h5)
+- [`--as-h6`](./--as-h6)
+- [`--as-p`](./--as-p)
+- [`--as-br`](./--as-br)
diff --git a/packages/support-flags/docs/--as-h3.ko.md b/packages/support-flags/docs/--as-h3.ko.md
@@ -0,0 +1,67 @@
+---
+title: As-H3 flag
+id: "--as-h3"
+locale: ko
+stage:
+  - production
+  - staging
+  - experimental
+---
+
+# `--as-h3` 헤딩3 명시 플래그
+
+**지정 가능한 키**
+
+- `--as-h3`
+- `--as-heading3`
+- `--as-headline3`
+- `--h3`
+- `--heading3`
+- `--headline3`
+
+## 문법
+
+```ts
+`--h3${"="typeof boolean}`
+```
+
+## 적용 예시
+
+```
+--h1
+
+--h1=true
+--h1=false
+
+--h1=yes
+--h1=no
+
+----h1
+```
+
+## 언제 사용하면 좋을까
+
+<!-- shared content between h1~h6 -->
+
+**SEO**
+
+element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 헤딩일 경우, 그 효과는 더 큽니다.
+모바일 앱의 경우, 해당 사항이 없겠지만, 웹어서는 의미에 맞게 h1~h6 을 지정하는 것이 좋습니다.
+
+## 동작
+
+**엘레먼트 (Element)**
+이 플래그가 적용된다면, 해당 노드의 html 생성 엘레먼트는 `<h3>` 로 렌더되어 표시됩니다. (이외의 로직에는 영향이 없으며, 태그가 변경되었기에 이에 따른 부작용은 사용자의 커스텀 css 또는 query 에 따라 변경될 수 있습니다.)
+
+**텍스트 스타일 (Text style)**
+`--h1` 을 적용함으로, 엘레먼트가 수정되더라도, 아직 Grida 는 이에 따른 추가적인 스타일링 지원을 하지 않습니다. 타 `span`, `p`, 와 동일하게 블록단위의 스타일이 지정됩니다. 공용 헤딩 스타일에 대한 Global css 를 지원하지 않습니다.
+
+## 같이보기
+
+- [`--as-h1`](./--as-h1)
+- [`--as-h2`](./--as-h2)
+- [`--as-h4`](./--as-h4)
+- [`--as-h5`](./--as-h5)
+- [`--as-h6`](./--as-h6)
+- [`--as-p`](./--as-p)
+- [`--as-br`](./--as-br)