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: はじめに
+---
+
+プロジェクトの紹介。

hugo.toml

@@ -5,6 +5,17 @@ baseURL = "https://example.org"
 
 disableKinds = ["taxonomy", "term"]
 
+defaultContentLanguage = 'en'
+[languages]
+  [languages.ja]
+    languageName = '日本語'
+    weight = 1
+    title = 'Hextra テーマ'
+  [languages.en]
+    languageName = 'English'
+    weight = 2
+    title = 'Hextra Theme'
+
 [module]
   [module.hugoVersion]
     extended = true
@@ -31,6 +42,10 @@ disableKinds = ["taxonomy", "term"]
     source = "assets/.*\\.(.*)$"
     target = "$1"
 
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true
 
 [menu]
   [[menu.main]]

layouts/partials/sidebar.html

@@ -22,9 +22,10 @@
             </a>
           {{ end }}
         </li>
+        {{ $secondLevelItems := union .RegularPages .Sections }}
+        {{ with $secondLevelItems }}
           <div class="pt-1 ltr:pr-0">
             <ul class='relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0 dark:before:bg-neutral-800'>
-            {{ $secondLevelItems := union .RegularPages .Sections }}
               {{ range $secondLevelItems.ByWeight }}
                 {{ $isCurrent := eq $currentUrl .RelPermalink }}
                 <li class="flex flex-col gap-1">
@@ -44,6 +45,7 @@
             </ul>
           </div>
         {{ end }}
+      {{ end }}
     </ul>
   </div>
 </aside>