docs: add cards and callout

chore: minor update to sidebar

chore: add simple translation in Japanese

content/docs/_index.md

@@ -1,3 +1,4 @@
 ---
-title: Documentation
+linkTitle: "Documentation"
+title: Welcome to Hextra
 ---

content/docs/components/_index.md

@@ -0,0 +1,11 @@
+---
+title: Components
+---
+
+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" >}}
+{{< /cards >}}

content/docs/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 */>}}
+```

content/docs/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 */>}}
+```

content/docs/guide/_index.md

@@ -4,3 +4,9 @@ weight: 2
 ---
 
 Guide to the project.
+
+{{< cards >}}
+  {{< card link="/" title="Callout" icon="warning" >}}
+  {{< card link="/" title="GitHub" icon="github" >}}
+  {{< card link="/" title="No Icon" >}}
+{{< /cards >}}

content/docs/guide/callouts.md

@@ -1,24 +0,0 @@
----
-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 >}}

content/docs/introduction.ja.md

@@ -0,0 +1,5 @@
+---
+title: はじめに
+---
+
+プロジェクトの紹介。