Big documentation rewrite, move docs to example site

exampleSite/content.en/docs/shortcodes/_index.md

@@ -1,3 +1,20 @@
 ---
-bookFlatSection: true
+weight: 60
+bookCollapseSection: true
 ---
+
+# Shortcodes
+
+Hugo Book includes shortcodes for common documentation patterns. All interactive shortcodes work without JavaScript using CSS-only techniques.
+
+Hugo shortcodes use two delimiter styles:
+
+`{{</* shortcode */>}}`
+: Renders inner content as plain HTML. Use for shortcodes that don't contain markdown.
+
+`{{%/* shortcode */%}}`
+: Processes inner content as markdown. Use when the shortcode body contains markdown formatting.
+
+> [!NOTE]
+> Use `{{%/* shortcode */%}}` when the body contains markdown that needs to be rendered. `{{</* shortcode */>}}` passes content as-is without markdown processing.
+> When nesting shortcodes (e.g. tabs inside columns), the outer shortcode must use `{{%/* shortcode */%}}` for the inner shortcodes and markdown to be processed.