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,27 +22,29 @@
             </a>
           {{ end }}
         </li>
-        <div class="pt-1 ltr:pr-0">
+        {{ $secondLevelItems := union .RegularPages .Sections }}
-          <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'>
+        {{ with $secondLevelItems }}
-            {{ $secondLevelItems := union .RegularPages .Sections }}
+          <div class="pt-1 ltr:pr-0">
-            {{ range $secondLevelItems.ByWeight }}
+            <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'>
-              {{ $isCurrent := eq $currentUrl .RelPermalink }}
+              {{ range $secondLevelItems.ByWeight }}
-              <li class="flex flex-col gap-1">
+                {{ $isCurrent := eq $currentUrl .RelPermalink }}
-                <a
+                <li class="flex flex-col gap-1">
-                  class="flex cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
+                  <a
+                    class="flex cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
                   {{ if eq $currentUrl .RelPermalink }}
-                    bg-primary-100 font-semibold text-primary-800 contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500
+                      bg-primary-100 font-semibold text-primary-800 contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500
-                  {{ else }}
+                    {{ else }}
-                    text-gray-500 hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50
+                      text-gray-500 hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50
-                  {{ end }}"
+                    {{ end }}"
-                  href="{{ .RelPermalink }}"
+                    href="{{ .RelPermalink }}"
-                >
+                  >
-                  {{ .LinkTitle }}
+                    {{ .LinkTitle }}
-                </a>
+                  </a>
-              </li>
+                </li>
-            {{ end }}
+              {{ end }}
-          </ul>
+            </ul>
-        </div>
+          </div>
+        {{ end }}
       {{ end }}
     </ul>
   </div>