chore: move content to exampleSite

* update dev and build command

chore: move contents to exampleSite

chore: add configs to exampleSite

chore: use tailwindcss/nesting

* add postcss-import
* move imports to the top

chore: add config for theme dev

chore: add compiled css

chore: fix last updated issue

chore: dont't ignore hugo_stats.json

chore: update index page layout

exampleSite/content/docs/components/_index.md

@@ -0,0 +1,12 @@
+---
+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" icon="cards" >}}
+  {{< card link="steps" title="Steps" icon="one" >}}
+{{< /cards >}}

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

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

exampleSite/content/docs/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.
+
+```markdown
+{{</* steps */>}}
+### Step 1
+
+This is the first step.
+
+### Step 2
+
+This is the second step.
+{{</* /steps */>}}
+```

exampleSite/content/docs/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 >}}