feat: add more content and fix issues

fix: hide lang switch if site is not multilingual

docs: update getting started page

fix: ordered list style

chore: update hugo icon

feat: add icon shortcode page

docs: add markdown and configuration pages

docs: add diagrams page

docs: add more content

fix: mermaid background and add image styling

chore: update templates

chore: update hugo stats

exampleSite/content/docs/guide/diagrams.md

@@ -0,0 +1,52 @@
+---
+title: Diagrams
+weight: 6
+---
+
+Currently, Hextra supports [Mermaid](#mermaid) for diagrams.
+
+<!--more-->
+
+## Mermaid
+
+[Mermaid](https://github.com/mermaid-js/mermaid#readme) is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser. For example, Mermaid can render flow charts, sequence diagrams, pie charts and more.
+
+Using Mermaid in Hextra is as simple as writing a code block with language set `mermaid`:
+
+````markdown
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+````
+
+will be rendered as:
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+Sequence diagram:
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
+For more information, please refer to [Mermaid Documentation](https://mermaid-js.github.io/mermaid/#/).