docs: add documentations

exampleSite/content/docs/guide/components/_index.ja.md

@@ -0,0 +1,6 @@
+---
+title: コンポーネント
+weight: 2
+---
+
+Hextraは、[Hugo Shortcodes](https://gohugo.io/content-management/shortcodes/)に基づいたさまざまな組み込みコンポーネントを提供しています。

exampleSite/content/docs/guide/components/_index.md

@@ -0,0 +1,15 @@
+---
+title: Shortcodes
+weight: 9
+---
+
+Hextra provides a variety of built-in components based on [Hugo Shortcodes](https://gohugo.io/content-management/shortcodes/).
+
+
+{{< cards >}}
+  {{< card link="callouts" title="Callouts" icon="warning" >}}
+  {{< card link="cards" title="Cards" >}}
+  {{< card link="filetree" title="FileTree" >}}
+  {{< card link="steps" title="Steps" icon="one" >}}
+  {{< card link="tabs" title="Tabs" icon="collection" >}}
+{{< /cards >}}

exampleSite/content/docs/guide/components/callouts.md

@@ -0,0 +1,74 @@
+---
+title: Callout Component
+linkTitle: Callout
+---
+
+A built-in component to show important information to the reader.
+
+## Example
+
+{{< callout emoji="👾">}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="info" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="error" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+## Usage
+
+### Default
+
+{{< callout emoji="🌐">}}
+  Hugo can be used to create a wide variety of websites, including blogs, portfolios, documentation sites, and more.
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  Hugo can be used to create a wide variety of websites, including blogs, portfolios, documentation sites, and more.
+{{</* /callout */>}}
+```
+
+### Info
+
+{{< callout type="info" >}}
+  Please visit GitHub to see the latest releases.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" */>}}
+  Please visit GitHub to see the latest releases.
+{{</* /callout */>}}
+```
+
+### Warning
+
+{{< callout type="warning" >}}
+  This API will be deprecated in the next version.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="warning" */>}}
+  A **callout** is a short piece of text intended to attract attention.
+{{</* /callout */>}}
+```
+
+### Error
+
+{{< callout type="error" >}}
+  Something went wrong and it's going to explode.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="error" */>}}
+  Something went wrong and it's going to explode.
+{{</* /callout */>}}
+```

exampleSite/content/docs/guide/components/cards.md

@@ -0,0 +1,22 @@
+---
+title: Cards Component
+linkTitle: Cards
+---
+
+## Example
+
+{{< cards >}}
+  {{< card link="/" title="Callout" icon="warning" >}}
+  {{< card link="/" title="GitHub" icon="github" >}}
+  {{< card link="/" title="No Icon" >}}
+{{< /cards >}}
+
+## Usage
+
+```
+{{</* cards */>}}
+  {{</* card link="/" title="Callout" icon="warning" */>}}
+  {{</* card link="/" title="GitHub" icon="github" */>}}
+  {{</* card link="/" title="No Icon" */>}}
+{{</* /cards */>}}
+```

exampleSite/content/docs/guide/components/filetree.md

@@ -0,0 +1,34 @@
+---
+title: FileTree Component
+linkTitle: FileTree
+---
+
+## Example
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/file name="_index.md" >}}
+    {{< filetree/folder name="docs" state="closed" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="introduction.md" >}}
+      {{< filetree/file name="introduction.fr.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+  {{< filetree/file name="hugo.toml" >}}
+{{< /filetree/container >}}
+
+## Usage
+
+```text {filename="Markdown"}
+{{</* filetree/container */>}}
+  {{</* filetree/folder name="content" */>}}
+    {{</* filetree/file name="_index.md" */>}}
+    {{</* filetree/folder name="docs" state="closed" */>}}
+      {{</* filetree/file name="_index.md" */>}}
+      {{</* filetree/file name="introduction.md" */>}}
+      {{</* filetree/file name="introduction.fr.md" */>}}
+    {{</* /filetree/folder */>}}
+  {{</* /filetree/folder */>}}
+  {{</* filetree/file name="hugo.toml" */>}}
+{{</* /filetree/container */>}}
+```

exampleSite/content/docs/guide/components/steps.md

@@ -0,0 +1,40 @@
+---
+title: Steps
+---
+
+A built-in component to display a series of steps.
+
+## Example
+
+{{% steps %}}
+
+### Step 1
+
+This is the first step.
+
+### Step 2
+
+This is the second step.
+
+### Step 3
+
+This is the third step.
+
+{{% /steps %}}
+
+
+## Usage
+
+Put Markdown h3 header within `steps` shortcode.
+
+```
+{{%/* steps */%}}
+### Step 1
+
+This is the first step.
+
+### Step 2
+
+This is the second step.
+{{%/* /steps */%}}
+```

exampleSite/content/docs/guide/components/tabs.md

@@ -0,0 +1,51 @@
+---
+title: Tabs
+---
+
+## Example
+
+{{< tabs items="JSON,YAML,TOML" >}}
+
+{{< tab >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
+{{< tab >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
+{{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
+
+{{< /tabs >}}
+
+## Usage
+
+### Default
+
+```
+{{</* tabs items="JSON,YAML,TOML" */>}}
+
+  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
+
+{{</* /tabs */>}}
+```
+
+### Specify Selected Index
+
+Use `defaultIndex` property to specify the selected tab. The index starts from 0.
+
+```
+{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
+
+  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
+
+{{</* /tabs */>}}
+```
+
+The `YAML` tab will be selected by default.
+
+{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
+
+{{< tab >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
+{{< tab >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
+{{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
+
+{{< /tabs >}}