docs: migration to Astro

Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>

.github/workflows/browserstack.yml

@@ -1,10 +1,10 @@
 name: BrowserStack
 
 on:
-  push:
+  #push:
-    branches:
+  #  branches:
-      - "**"
+  #    - "**"
-      - "!dependabot/**"
+  #    - "!dependabot/**"
   workflow_dispatch:
 
 env:

.github/workflows/bundlewatch.yml

@@ -1,10 +1,10 @@
 name: Bundlewatch
 
 on:
-  push:
+  #push:
-    branches:
+  #  branches:
-      - main
+  #    - main
-  pull_request:
+  #pull_request:
   workflow_dispatch:
 
 env:

.github/workflows/calibreapp-image-actions.yml

@@ -1,12 +1,13 @@
 name: Compress Images
 
 on:
-  pull_request:
+  #pull_request:
-    paths:
+  #  paths:
-      - '**.jpg'
+  #    - '**.jpg'
-      - '**.jpeg'
+  #    - '**.jpeg'
-      - '**.png'
+  #    - '**.png'
-      - '**.webp'
+  #    - '**.webp'
+  workflow_dispatch:
 
 permissions:
   contents: read

.github/workflows/codeql.yml

@@ -1,18 +1,18 @@
 name: "CodeQL"
 
 on:
-  push:
+  #push:
-    branches:
+  #  branches:
-      - main
+  #    - main
-      - v4-dev
+  #    - v4-dev
-      - "!dependabot/**"
+  #    - "!dependabot/**"
-  pull_request:
+  #pull_request:
-    branches:
+  #  branches:
-      - main
+  #    - main
-      - v4-dev
+  #    - v4-dev
-      - "!dependabot/**"
+  #    - "!dependabot/**"
-  schedule:
+  #schedule:
-    - cron: "0 2 * * 4"
+  #  - cron: "0 2 * * 4"
   workflow_dispatch:
 
 jobs:

.github/workflows/cspell.yml

@@ -1,10 +1,10 @@
 name: cspell
 
 on:
-  push:
+  #push:
-    branches:
+  #  branches:
-      - main
+  #    - main
-  pull_request:
+  #pull_request:
   workflow_dispatch:
 
 env:

.github/workflows/css.yml

@@ -1,10 +1,10 @@
 name: CSS
 
 on:
-  push:
+  #push:
-    branches:
+  #  branches:
-      - main
+  #    - main
-  pull_request:
+  #pull_request:
   workflow_dispatch:
 
 env:

.github/workflows/docs.yml

@@ -1,10 +1,10 @@
 name: Docs
 
 on:
-  push:
+  #push:
-    branches:
+  #  branches:
-      - main
+  #    - main
-  pull_request:
+  #pull_request:
   workflow_dispatch:
 
 env:

.github/workflows/js.yml

@@ -1,10 +1,10 @@
 name: JS Tests
 
 on:
-  push:
+  #push:
-    branches:
+  #  branches:
-      - main
+  #    - main
-  pull_request:
+  #pull_request:
   workflow_dispatch:
 
 env:

.github/workflows/lint.yml

@@ -1,10 +1,10 @@
 name: Lint
 
 on:
-  push:
+  #push:
-    branches:
+  #  branches:
-      - main
+  #    - main
-  pull_request:
+  #pull_request:
   workflow_dispatch:
 
 env:

.github/workflows/release-notes.yml

@@ -1,9 +1,9 @@
 name: Release notes
 
 on:
-  push:
+  #push:
-    branches:
+  #  branches:
-      - main
+  #    - main
   workflow_dispatch:
 
 permissions:

.gitignore

@@ -41,3 +41,12 @@ Thumbs.db
 /dist-sass/
 /js/coverage/
 /node_modules/
+
+# TODO(Astro migration): Rename or remove later
+/site-new/dist
+# TODO(Astro migration): This could be avoided by modifying the other node_modules ignore rule.
+/site-new/node_modules
+# TODO(Astro migration): Rename later
+/site-new/.astro
+# TODO(Astro migration): Rename later
+/site-new/public

.prettierignore

@@ -0,0 +1,13 @@
+# Prettier is only used for the website
+
+# TODO(Astro migration) rename later
+site-new/.astro
+site-new/dist
+site-new/public
+site-new/src/assets
+site-new/src/scss
+site-new/src/pages/**/*.md
+site-new/src/pages/**/*.mdx
+site-new/src/content/**/*.mdx
+site-new/src/layouts/RedirectLayout.astro
+site-new/static

build/generate-sri.mjs

@@ -19,11 +19,11 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 sh.config.fatal = true
 
-const configFile = path.join(__dirname, '../hugo.yml')
+const configFile = path.join(__dirname, '../config.yml')
 
 // Array of objects which holds the files to generate SRI hashes for.
 // `file` is the path from the root folder
-// `configPropertyName` is the hugo.yml variable's name of the file
+// `configPropertyName` is the config.yml variable's name of the file
 const files = [
   {
     file: 'dist/css/bootstrap.min.css',

config.yml

@@ -0,0 +1,52 @@
+title:                  "Bootstrap"
+baseURL:                "https://getbootstrap.com"
+
+# TODO(Astro migration) Fix path
+docsDir:                "site-new"
+
+# TODO(Astro migration) Check if still relevant, update Astro config and prolly remove this value from here
+publishDir:             "_site"
+
+subtitle:               "The most popular HTML, CSS, and JS library in the world."
+description:            "Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins."
+authors:                "Mark Otto, Jacob Thornton, and Bootstrap contributors"
+
+current_version:        "5.3.3"
+current_ruby_version:   "5.3.3"
+docs_version:           "5.3"
+rfs_version:            "v10.0.0"
+github_org:             "https://github.com/twbs"
+repo:                   "https://github.com/twbs/bootstrap"
+twitter:                "getbootstrap"
+opencollective:         "https://opencollective.com/bootstrap"
+blog:                   "https://blog.getbootstrap.com/"
+themes:                 "https://themes.getbootstrap.com/"
+icons:                  "https://icons.getbootstrap.com/"
+swag:                   "https://cottonbureau.com/people/bootstrap"
+
+download:
+  source:               "https://github.com/twbs/bootstrap/archive/v5.3.3.zip"
+  dist:                 "https://github.com/twbs/bootstrap/releases/download/v5.3.3/bootstrap-5.3.3-dist.zip"
+  dist_examples:        "https://github.com/twbs/bootstrap/releases/download/v5.3.3/bootstrap-5.3.3-examples.zip"
+
+cdn:
+  # See https://www.srihash.org for info on how to generate the hashes
+  css:                  "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+  css_hash:             "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+  css_rtl:              "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css"
+  css_rtl_hash:         "sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb"
+  js:                   "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
+  js_hash:              "sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
+  js_bundle:            "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+  js_bundle_hash:       "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+  popper:               "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
+  popper_hash:          "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
+  popper_esm:           "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js"
+
+anchors:
+  min:                  2
+  max:                  5
+
+toc:
+  min:                  2
+  max:                  6

hugo.yml

@@ -1,102 +0,0 @@
-languageCode:           "en"
-title:                  "Bootstrap"
-baseURL:                "https://getbootstrap.com"
-
-security:
-  enableInlineShortcodes: true
-  funcs:
-    getenv:
-      - ^HUGO_
-      - NETLIFY
-
-markup:
-  goldmark:
-    renderer:
-      unsafe:           true
-  highlight:
-    noClasses:          false
-  tableOfContents:
-    startLevel:         2
-    endLevel:           6
-
-build:
-  noJSConfigInAssets:   true
-
-buildDrafts:            true
-buildFuture:            true
-
-enableRobotsTXT:        true
-metaDataFormat:         "yaml"
-disableKinds:           ["404", "taxonomy", "term", "RSS"]
-
-publishDir:             "_site"
-
-module:
-  mounts:
-    - source:           dist
-      target:           static/docs/5.3/dist
-    - source:           site/assets
-      target:           assets
-    - source:           site/content
-      target:           content
-    - source:           site/data
-      target:           data
-    - source:           site/layouts
-      target:           layouts
-    - source:           site/static
-      target:           static
-    - source:           node_modules/@docsearch/css
-      target:           assets/scss/@docsearch/css
-    - source:           site/static/docs/5.3/assets/img/favicons/apple-touch-icon.png
-      target:           static/apple-touch-icon.png
-    - source:           site/static/docs/5.3/assets/img/favicons/favicon.ico
-      target:           static/favicon.ico
-
-params:
-  subtitle:             "The most popular HTML, CSS, and JS library in the world."
-  description:          "Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins."
-  authors:              "Mark Otto, Jacob Thornton, and Bootstrap contributors"
-
-  current_version:      "5.3.3"
-  current_ruby_version: "5.3.3"
-  docs_version:         "5.3"
-  rfs_version:          "v10.0.0"
-  github_org:           "https://github.com/twbs"
-  repo:                 "https://github.com/twbs/bootstrap"
-  twitter:              "getbootstrap"
-  opencollective:       "https://opencollective.com/bootstrap"
-  blog:                 "https://blog.getbootstrap.com/"
-  themes:               "https://themes.getbootstrap.com/"
-  icons:                "https://icons.getbootstrap.com/"
-  swag:                 "https://cottonbureau.com/people/bootstrap"
-
-  analytics:
-    fathom_site:        "ITUSEYJG"
-
-  algolia:
-    appId:              "AK7KMZKZHQ"
-    apiKey:             "3151f502c7b9e9dafd5e6372b691a24e"
-    indexName:          "bootstrap"
-
-  download:
-    source:             "https://github.com/twbs/bootstrap/archive/v5.3.3.zip"
-    dist:               "https://github.com/twbs/bootstrap/releases/download/v5.3.3/bootstrap-5.3.3-dist.zip"
-    dist_examples:      "https://github.com/twbs/bootstrap/releases/download/v5.3.3/bootstrap-5.3.3-examples.zip"
-
-  cdn:
-    # See https://www.srihash.org for info on how to generate the hashes
-    css:              "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
-    css_hash:         "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
-    css_rtl:          "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css"
-    css_rtl_hash:     "sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb"
-    js:               "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
-    js_hash:          "sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
-    js_bundle:        "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-    js_bundle_hash:   "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-    popper:           "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
-    popper_hash:      "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
-    popper_esm:       "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js"
-
-  anchors:
-    min: 2
-    max: 5

package.json

@@ -52,8 +52,8 @@
     "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
     "css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*",
     "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
-    "css-prefix-examples": "postcss --config build/postcss.config.mjs --replace \"site/content/**/*.css\"",
+    "css-prefix-examples": "postcss --config build/postcss.config.mjs --replace \"site-new/src/assets/examples/**/*.css\"",
-    "css-prefix-examples-rtl": "cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"site/content/docs/$npm_package_config_version_short/examples/\" --ext \".rtl.css\" --base \"site/content/docs/$npm_package_config_version_short/examples/\" \"site/content/docs/$npm_package_config_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.css\" \"!site/content/docs/$npm_package_config_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\"",
+    "css-prefix-examples-rtl": "cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"site-new/src/assets/examples/\" --ext \".rtl.css\" --base \"site-new/src/assets/examples/\" \"site-new/src/assets/examples/{blog,carousel,dashboard,cheatsheet}/*.css\" \"!site-new/src/assets/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\"",
     "css-test": "jasmine --config=scss/tests/jasmine.js",
     "js": "npm-run-all js-compile js-minify",
     "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
@@ -90,19 +90,27 @@
     "release-zip-examples": "node build/zip-examples.mjs",
     "dist": "npm-run-all --aggregate-output --parallel css js",
     "test": "npm-run-all lint dist js-test docs-build docs-lint",
-    "netlify": "cross-env-shell HUGO_BASEURL=$DEPLOY_PRIME_URL npm-run-all dist release-sri docs-build",
+    "netlify": "npm-run-all dist release-sri astro-build",
     "watch": "npm-run-all --parallel watch-*",
     "watch-css-main": "nodemon --watch scss/ --ext scss --exec \"npm-run-all css-lint css-compile css-prefix\"",
     "watch-css-dist": "nodemon --watch dist/css/ --ext css --ignore \"dist/css/*.rtl.*\" --exec \"npm run css-rtl\"",
     "watch-css-docs": "nodemon --watch site/assets/scss/ --ext scss --exec \"npm run css-lint\"",
     "watch-css-test": "nodemon --watch scss/ --ext scss,js --exec \"npm run css-test\"",
     "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
-    "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\""
+    "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\"",
+    "astro-dev": "astro dev --root site-new",
+    "astro-build": "astro build --root site-new && rm -rf _site && cp -r site-new/dist _site",
+    "astro-preview": "astro preview --root site-new",
+    "astro-lint": "prettier --config site-new/.prettierrc.json -c --cache site-new && astro check --root site-new && tsc -p site-new --noEmit"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
+    "@astrojs/markdown-remark": "^6.2.0",
+    "@astrojs/mdx": "^4.1.0",
+    "@astrojs/prism": "^3.2.0",
+    "@astrojs/sitemap": "^3.2.1",
     "@babel/cli": "^7.26.4",
     "@babel/core": "^7.26.9",
     "@babel/preset-env": "^7.26.9",
@@ -113,6 +121,13 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-replace": "^6.0.2",
     "@stackblitz/sdk": "^1.11.0",
+    "@types/bootstrap": "^5.2.6",
+    "@types/google.analytics": "^0.0.42",
+    "@types/js-yaml": "^4.0.5",
+    "@types/mime": "^3.0.1",
+    "@types/prismjs": "^1.26.0",
+    "astro": "^5.4.0",
+    "astro-auto-import": "^0.4.4",
     "autoprefixer": "^10.4.20",
     "bundlewatch": "^0.4.0",
     "clean-css-cli": "^5.6.3",
@@ -125,12 +140,16 @@
     "eslint-plugin-markdown": "^5.1.0",
     "eslint-plugin-unicorn": "^55.0.0",
     "find-unused-sass-variables": "^6.0.0",
+    "github-slugger": "^2.0.0",
     "globby": "^14.0.2",
     "hammer-simulator": "0.0.1",
+    "htmlparser2": "^8.0.1",
     "hugo-bin": "^0.141.1",
+    "image-size": "^1.0.2",
     "ip": "^2.0.1",
     "jasmine": "^5.5.0",
     "jquery": "^3.7.1",
+    "js-yaml": "^4.1.0",
     "karma": "^6.4.4",
     "karma-browserstack-launcher": "1.4.0",
     "karma-chrome-launcher": "^3.2.0",
@@ -141,10 +160,14 @@
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-rollup-preprocessor": "7.0.7",
     "lockfile-lint": "^4.14.0",
+    "mime": "^3.0.0",
     "nodemon": "^3.1.9",
     "npm-run-all2": "^7.0.2",
     "postcss": "^8.5.2",
     "postcss-cli": "^11.0.0",
+    "prettier": "^2.8.4",
+    "prettier-plugin-astro": "^0.8.0",
+    "rehype-autolink-headings": "^6.1.1",
     "rollup": "^4.34.8",
     "rollup-plugin-istanbul": "^5.0.0",
     "rtlcss": "^4.3.0",
@@ -154,7 +177,9 @@
     "stylelint": "^16.14.1",
     "stylelint-config-twbs-bootstrap": "^15.1.0",
     "terser": "^5.39.0",
-    "vnu-jar": "24.10.17"
+    "unist-util-visit": "^4.1.2",
+    "vnu-jar": "24.10.17",
+    "zod": "^3.20.6"
   },
   "files": [
     "dist/{css,js}/*.{css,js,map}",

site-new/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "arrowParens": "always",
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

site-new/astro.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'astro/config'
+
+import { bootstrap } from './src/libs/astro'
+import { getConfig } from './src/libs/config'
+
+const isDev = process.env.NODE_ENV === 'development'
+
+const site = isDev
+  ? // In development mode, use the local dev server.
+    'http://localhost:3000'
+  : process.env.DEPLOY_PRIME_URL !== undefined
+  ? // If deploying on Netlify, use the `DEPLOY_PRIME_URL` environment variable.
+    process.env.DEPLOY_PRIME_URL
+  : // Otherwise, use the `baseURL` value defined in the `config.yml` file.
+    getConfig().baseURL
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [bootstrap()],
+  markdown: {
+    smartypants: false,
+    syntaxHighlight: 'prism',
+  },
+  site,
+})

site-new/postcss.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('autoprefixer')],
+}

site-new/src/assets/application.js

@@ -0,0 +1,29 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*!
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+(() => {
+  'use strict'
+
+  // Scroll the active sidebar link into view
+  const sidenav = document.querySelector('.bd-sidebar')
+  if (sidenav) {
+    const sidenavHeight = sidenav.clientHeight
+    const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
+    const sidenavActiveLinkTop = sidenavActiveLink.offsetTop
+    const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
+    const viewportTop = sidenavActiveLinkTop
+    const viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight
+
+    if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) {
+      sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2)
+    }
+  }
+})()

site-new/src/assets/examples/album-rtl/index.astro

@@ -1,7 +1,9 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: مثال الألبوم
+import Placeholder from '@shortcodes/Placeholder.astro'
-direction: rtl
+
+export const title = 'مثال الألبوم'
+export const direction = 'rtl'
 ---
 
 <header data-bs-theme="dark">
@@ -57,7 +59,7 @@ direction: rtl
       <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -72,7 +74,7 @@ direction: rtl
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -87,7 +89,7 @@ direction: rtl
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -103,7 +105,7 @@ direction: rtl
 
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -118,7 +120,7 @@ direction: rtl
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -133,7 +135,7 @@ direction: rtl
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -149,7 +151,7 @@ direction: rtl
 
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -164,7 +166,7 @@ direction: rtl
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -179,7 +181,7 @@ direction: rtl
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -204,6 +206,6 @@ direction: rtl
       <a href="#">عد إلى الأعلى</a>
     </p>
     <p class="mb-1">مثال الألبوم هو © Bootstrap ، ولكن يرجى تنزيله وتخصيصه لنفسك!</p>
-    <p class="mb-0">جديد على Bootstrap؟ <a href="/"> تفضل بزيارة الصفحة الرئيسية </a> أو اقرأ <a href="{{< docsref "/getting-started/introduction">}} "> دليل البدء </a>.</p>
+    <p class="mb-0">جديد على Bootstrap؟ <a href="/"> تفضل بزيارة الصفحة الرئيسية </a> أو اقرأ <a href={getVersionedDocsPath('/getting-started/introduction')}> دليل البدء </a>.</p>
   </div>
 </footer>

site-new/src/assets/examples/album/index.astro

@@ -1,6 +1,8 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: Album example
+
+export const title = 'Album example'
+import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 
 <header data-bs-theme="dark">
@@ -56,7 +58,7 @@ title: Album example
       <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -71,7 +73,7 @@ title: Album example
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -86,7 +88,7 @@ title: Album example
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -102,7 +104,7 @@ title: Album example
 
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -117,7 +119,7 @@ title: Album example
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -132,7 +134,7 @@ title: Album example
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -148,7 +150,7 @@ title: Album example
 
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -163,7 +165,7 @@ title: Album example
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -178,7 +180,7 @@ title: Album example
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+            <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -203,6 +205,6 @@ title: Album example
       <a href="#">Back to top</a>
     </p>
     <p class="mb-1">Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
-    <p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href="{{< docsref "/getting-started/introduction" >}}">getting started guide</a>.</p>
+    <p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href={getVersionedDocsPath('/getting-started/introduction')}>getting started guide</a>.</p>
   </div>
 </footer>

site-new/src/assets/examples/badges/index.astro

@@ -1,9 +1,6 @@
 ---
-layout: examples
+export const title = 'Badges'
-title: Badges
+export const extra_css = ['badges.css']
-extra_css:
-  - "badges.css"
-body_class: ""
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">

site-new/src/assets/examples/blog-rtl/index.astro

@@ -1,10 +1,8 @@
 ---
-layout: examples
+export const title = 'قالب المدونة'
-title: قالب المدونة
+export const direction = 'rtl'
-direction: rtl
+export const extra_css = ['https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap', '../blog/blog.rtl.css']
-extra_css:
+import Placeholder from "@shortcodes/Placeholder.astro"
-  - "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap"
-  - "../blog/blog.rtl.css"
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
@@ -79,7 +77,7 @@ extra_css:
           </a>
         </div>
         <div class="col-auto d-none d-lg-block">
-          {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
+          <Placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" />
         </div>
       </div>
     </div>
@@ -96,7 +94,7 @@ extra_css:
           </a>
         </div>
         <div class="col-auto d-none d-lg-block">
-          {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
+          <Placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" />
         </div>
       </div>
     </div>
@@ -189,7 +187,7 @@ extra_css:
           <ul class="list-unstyled">
             <li>
               <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
-                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
                 <div class="col-lg-8">
                   <h6 class="mb-0">مثال على عنوان منشور المدونة</h6>
                   <small class="text-body-secondary">15 يناير 2024</small>
@@ -198,7 +196,7 @@ extra_css:
             </li>
             <li>
               <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
-                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
                 <div class="col-lg-8">
                   <h6 class="mb-0">هذا عنوان آخر للمدونة</h6>
                   <small class="text-body-secondary">14 يناير 2024</small>
@@ -207,7 +205,7 @@ extra_css:
             </li>
             <li>
               <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
-                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
                 <div class="col-lg-8">
                   <h6 class="mb-0">أطول عنوان منشور للمدونة: يحتوي هذا الخط على عدة أسطر!</h6>
                   <small class="text-body-secondary">13 يناير 2024</small>

site-new/src/assets/examples/blog/index.astro

@@ -1,9 +1,7 @@
 ---
-layout: examples
+export const title = 'Blog Template'
-title: Blog Template
+export const extra_css = ['https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap', 'blog.css']
-extra_css:
+import Placeholder from "@shortcodes/Placeholder.astro"
-  - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap"
-  - "blog.css"
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
@@ -78,7 +76,7 @@ extra_css:
           </a>
         </div>
         <div class="col-auto d-none d-lg-block">
-          {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
+          <Placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" />
         </div>
       </div>
     </div>
@@ -95,7 +93,7 @@ extra_css:
           </a>
         </div>
         <div class="col-auto d-none d-lg-block">
-          {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
+          <Placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" />
         </div>
       </div>
     </div>
@@ -241,7 +239,7 @@ extra_css:
           <ul class="list-unstyled">
             <li>
               <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
-                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
                 <div class="col-lg-8">
                   <h6 class="mb-0">Example blog post title</h6>
                   <small class="text-body-secondary">January 15, 2024</small>
@@ -250,7 +248,7 @@ extra_css:
             </li>
             <li>
               <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
-                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
                 <div class="col-lg-8">
                   <h6 class="mb-0">This is another blog post title</h6>
                   <small class="text-body-secondary">January 14, 2024</small>
@@ -259,7 +257,7 @@ extra_css:
             </li>
             <li>
               <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
-                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
                 <div class="col-lg-8">
                   <h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6>
                   <small class="text-body-secondary">January 13, 2024</small>

site-new/src/assets/examples/breadcrumbs/index.astro

@@ -1,9 +1,6 @@
 ---
-layout: examples
+export const title = 'Breadcrumbs'
-title: Breadcrumbs
+export const extra_css = ['breadcrumbs.css']
-extra_css:
-  - "breadcrumbs.css"
-body_class: ""
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">

site-new/src/assets/examples/buttons/index.astro

@@ -1,7 +1,5 @@
 ---
-layout: examples
+export const title = 'Buttons'
-title: Buttons
-body_class: ""
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">

site-new/src/assets/examples/carousel-rtl/index.astro

@@ -1,9 +1,8 @@
 ---
-layout: examples
+export const title = 'قالب  شرائح العرض'
-title: قالب  شرائح العرض
+export const direction = 'rtl'
-direction: rtl
+export const extra_css = ['../carousel/carousel.rtl.css']
-extra_css:
+import Placeholder from "@shortcodes/Placeholder.astro"
-  - "../carousel/carousel.rtl.css"
 ---
 
 <header data-bs-theme="dark">
@@ -44,7 +43,7 @@ extra_css:
     </div>
     <div class="carousel-inner">
       <div class="carousel-item active">
-        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
+        <Placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text={false} title={false} />
         <div class="container">
           <div class="carousel-caption text-start">
             <h1>عنوان المثال.</h1>
@@ -54,7 +53,7 @@ extra_css:
         </div>
       </div>
       <div class="carousel-item">
-        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
+        <Placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text={false} title={false} />
         <div class="container">
           <div class="carousel-caption">
             <h1>عنوان مثال آخر.</h1>
@@ -64,7 +63,7 @@ extra_css:
         </div>
       </div>
       <div class="carousel-item">
-        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
+        <Placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text={false} title={false} />
         <div class="container">
           <div class="carousel-caption text-end">
             <h1>واحد أكثر لقياس جيد.</h1>
@@ -94,19 +93,19 @@ extra_css:
     <!-- Three columns of text below the carousel -->
     <div class="row">
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+        <Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
         <h2 class="fw-normal">عنوان</h2>
         <p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p>
         <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+        <Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
         <h2 class="fw-normal">عنوان آخر</h2>
         <p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p>
         <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+        <Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
         <h2 class="fw-normal">عنوان ثالث لتأكيد المعلومة</h2>
         <p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
         <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
@@ -124,7 +123,7 @@ extra_css:
         <p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
       </div>
       <div class="col-md-5">
-        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        <Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />
       </div>
     </div>
 
@@ -136,7 +135,7 @@ extra_css:
         <p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
       </div>
       <div class="col-md-5 order-md-1">
-        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        <Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />
       </div>
     </div>
 
@@ -148,7 +147,7 @@ extra_css:
         <p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
       </div>
       <div class="col-md-5">
-        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        <Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />
       </div>
     </div>
 
@@ -162,6 +161,6 @@ extra_css:
   <!-- FOOTER -->
   <footer class="container">
     <p class="float-end"><a href="#">عد إلى الأعلى</a></p>
-    <p>&copy; 2017–{{< year >}} Company, Inc. &middot; <a href="#">سياسة الخصوصية</a> &middot; <a href="#">شروط الاستخدام</a></p>
+    <p>&copy; 2017–{new Date().getFullYear()} Company, Inc. &middot; <a href="#">سياسة الخصوصية</a> &middot; <a href="#">شروط الاستخدام</a></p>
   </footer>
 </main>

site-new/src/assets/examples/carousel/index.astro

@@ -1,8 +1,7 @@
 ---
-layout: examples
+export const title = 'Carousel Template'
-title: Carousel Template
+export const extra_css = ['carousel.css']
-extra_css:
+import Placeholder from "@shortcodes/Placeholder.astro"
-  - "carousel.css"
 ---
 
 <header data-bs-theme="dark">
@@ -43,7 +42,7 @@ extra_css:
     </div>
     <div class="carousel-inner">
       <div class="carousel-item active">
-        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
+        <Placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text={false} title={false} />
         <div class="container">
           <div class="carousel-caption text-start">
             <h1>Example headline.</h1>
@@ -53,7 +52,7 @@ extra_css:
         </div>
       </div>
       <div class="carousel-item">
-        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
+        <Placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text={false} title={false} />
         <div class="container">
           <div class="carousel-caption">
             <h1>Another example headline.</h1>
@@ -63,7 +62,7 @@ extra_css:
         </div>
       </div>
       <div class="carousel-item">
-        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
+        <Placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text={false} title={false} />
         <div class="container">
           <div class="carousel-caption text-end">
             <h1>One more for good measure.</h1>
@@ -93,19 +92,19 @@ extra_css:
     <!-- Three columns of text below the carousel -->
     <div class="row">
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+        <Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
         <h2 class="fw-normal">Heading</h2>
         <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
         <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+        <Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
         <h2 class="fw-normal">Heading</h2>
         <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
         <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+        <Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
         <h2 class="fw-normal">Heading</h2>
         <p>And lastly this, the third column of representative placeholder content.</p>
         <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
@@ -123,7 +122,7 @@ extra_css:
         <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
       </div>
       <div class="col-md-5">
-        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        <Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />
       </div>
     </div>
 
@@ -135,7 +134,7 @@ extra_css:
         <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
       </div>
       <div class="col-md-5 order-md-1">
-        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        <Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />
       </div>
     </div>
 
@@ -147,7 +146,7 @@ extra_css:
         <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
       </div>
       <div class="col-md-5">
-        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        <Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />
       </div>
     </div>
 
@@ -161,6 +160,6 @@ extra_css:
   <!-- FOOTER -->
   <footer class="container">
     <p class="float-end"><a href="#">Back to top</a></p>
-    <p>&copy; 2017–{{< year >}} Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
+    <p>&copy; 2017–{new Date().getFullYear()} Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
   </footer>
 </main>

site-new/src/assets/examples/cheatsheet-rtl/index.astro

@@ -1,22 +1,23 @@
 ---
-layout: examples
+import { getData } from '@libs/data'
-title: ورقة الغش
+import { getVersionedDocsPath } from '@libs/path'
-extra_css:
+import Example from '@shortcodes/Example.astro'
-  - "../cheatsheet/cheatsheet.rtl.css"
+
-extra_js:
+export const title = 'ورقة الغش'
-  - src: "../cheatsheet/cheatsheet.js"
+export const extra_css = ['../cheatsheet/cheatsheet.rtl.css']
-    defer: true
+export const extra_js = [{src: '../cheatsheet/cheatsheet.js'}]
-body_class: "bg-body-tertiary"
+export const body_class = 'bg-body-tertiary'
-direction: rtl
+export const direction = 'rtl'
+import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 
 <header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
   <div class="container-fluid d-flex align-items-center">
     <h1 class="d-flex align-items-center fs-4 text-white mb-0">
-      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
+      <img src={getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="me-3" alt="Bootstrap">
       ورقة الغش
     </h1>
-    <a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a>
+    <a href={getVersionedDocsPath('examples/cheatsheet')} class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a>
   </div>
 </header>
 <aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2">
@@ -78,35 +79,35 @@ direction: rtl
     <article class="my-3" id="typography">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>النصوص</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/typography" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('content/typography')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <p class="display-1">العرض 1</p>
         <p class="display-2">العرض 2</p>
         <p class="display-3">العرض 3</p>
         <p class="display-4">العرض 4</p>
         <p class="display-5">العرض 5</p>
         <p class="display-6">العرض 6</p>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <p class="h1">عنوان 1</p>
         <p class="h2">عنوان 2</p>
         <p class="h3">عنوان 3</p>
         <p class="h4">عنوان 4</p>
         <p class="h5">عنوان 5</p>
         <p class="h6">عنوان 6</p>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <p class="lead">
           هذه قطعة إملائية متميزة، فهي مصممة لتكون بارزة من بين القطع الإملائية الأخرى.
         </p>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <p>يمكنك استخدام تصنيف mark <mark>لتحديد</mark> نص.</p>
         <p><del>من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.</del></p>
         <p><s>من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.</s></p>
@@ -115,20 +116,20 @@ direction: rtl
         <p><small>من المفترض أن يتم التعامل مع هذا السطر على أنه يحوي تفاصيل صغيرة.</small></p>
         <p><strong>هذا السطر يحوي نص عريض.</strong></p>
         <p><em>هذا السطر يحوي نص مائل.</em></p>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <hr>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <blockquote class="blockquote">
           <p>إقتباس مبهر، موضوع في عنصر blockquote</p>
           <footer class="blockquote-footer">شخص مشهور في <cite title= "عنوان المصدر"> عنوان المصدر </cite></footer>
         </blockquote>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <ul class="list-unstyled">
           <li>هذه قائمة عناصر.</li>
           <li>بالرغم من أنها مصممة كي لا تظهر كذلك.</li>
@@ -143,41 +144,41 @@ direction: rtl
           </li>
           <li>قد يكون هذا التصميم مفيدًا في بعض الأحيان.</li>
         </ul>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <ul class="list-inline">
           <li class="list-inline-item">هذا عنصر في قائمة.</li>
           <li class="list-inline-item">وهذا أيضًا.</li>
           <li class="list-inline-item">لكنهم يظهرون متجاورين.</li>
         </ul>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="images">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>الصور</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/images" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('content/images')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
-        {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="صورة مستجيبة" >}}
+        <Placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="صورة مستجيبة" />
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
-        {{< placeholder width="200" height="200" class="img-thumbnail" title="صورة عنصر نائب مربع عام مع حدود بيضاء حولها ، مما يجعلها تشبه صورة تم التقاطها بكاميرا فورية قديمة" >}}
+        <Placeholder width="200" height="200" class="img-thumbnail" title="صورة عنصر نائب مربع عام مع حدود بيضاء حولها ، مما يجعلها تشبه صورة تم التقاطها بكاميرا فورية قديمة" />
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="tables">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>الجداول</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/tables" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('content/tables')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <table class="table table-striped">
           <thead>
           <tr>
@@ -207,9 +208,9 @@ direction: rtl
           </tr>
           </tbody>
         </table>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <table class="table table-dark table-borderless">
           <thead>
           <tr>
@@ -239,9 +240,9 @@ direction: rtl
           </tr>
           </tbody>
         </table>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={[`
         <table class="table table-hover">
           <thead>
           <tr>
@@ -255,21 +256,17 @@ direction: rtl
             <th scope="row">Default</th>
             <td>خلية</td>
             <td>خلية</td>
-          </tr>
+          </tr>`,
-          {{< table.inline >}}
+          ...getData('theme-colors').map((themeColor) => `<tr class="table-${themeColor.name}">
-          {{- range (index $.Site.Data "theme-colors") }}
+            <th scope="row">${themeColor.title}</th>
-          <tr class="table-{{ .name }}">
-            <th scope="row">{{ .name | title }}</th>
             <td>خلية</td>
             <td>خلية</td>
-          </tr>
+          </tr>`),
-          {{- end -}}
+          `</tbody>
-          {{< /table.inline >}}
-          </tbody>
         </table>
-        {{< /example >}}
+        `]} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <table class="table table-sm table-bordered">
           <thead>
           <tr>
@@ -299,22 +296,22 @@ direction: rtl
           </tr>
           </tbody>
         </table>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="figures">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>النماذج البيانية</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/figures" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('content/figures')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <figure class="figure">
-          {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
+          <Placeholder width="400" height="300" class="figure-img img-fluid rounded" />
           <figcaption class="figure-caption">شرح للصورة أعلاه.</figcaption>
         </figure>
-        {{< /example >}}
+        `} />
       </div>
     </article>
   </section>
@@ -325,11 +322,11 @@ direction: rtl
     <article class="my-3" id="overview">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>نظرة عامة</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('forms/overview')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <form>
           <div class="mb-3">
             <label for="exampleInputEmail1" class="form-label">البريد الإلكتروني</label>
@@ -378,17 +375,17 @@ direction: rtl
           </div>
           <button type="submit" class="btn btn-primary">إرسال</button>
         </form>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="disabled-forms">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>الحقول المعطلة</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}#disabled-forms">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('forms/overview#disabled-forms')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <form>
           <fieldset disabled aria-label="مثال على مجموعة الحقول المعطلة">
             <div class="mb-3">
@@ -435,17 +432,17 @@ direction: rtl
             <button type="submit" class="btn btn-primary">إرسال</button>
           </fieldset>
         </form>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="sizing">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>الأحجام</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/form-control" >}}#sizing">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('forms/form-control#sizing')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="mb-3">
           <input class="form-control form-control-lg" type="text" placeholder="حقل إدخال كبير" aria-label=".form-control-lg مثال">
         </div>
@@ -460,9 +457,9 @@ direction: rtl
         <div class="mb-3">
           <input type="file" class="form-control form-control-lg" aria-label="مثال على إدخال ملف كبير">
         </div>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="mb-3">
           <input class="form-control form-control-sm" type="text" placeholder="حقل إدخال صغير" aria-label=".form-control-sm مثال">
         </div>
@@ -477,17 +474,17 @@ direction: rtl
         <div class="mb-3">
           <input type="file" class="form-control form-control-sm" aria-label="مثال على إدخال ملف صغير">
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="input-group">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>مجموعة الإدخال</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/input-group" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('forms/input-group')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="input-group mb-3">
           <span class="input-group-text" id="basic-addon1">أنا اسمي</span>
           <input type="text" class="form-control" placeholder="فلان الفلاني" aria-label="الاسم" aria-describedby="basic-addon1">
@@ -510,17 +507,17 @@ direction: rtl
           <span class="input-group-text">مع textarea</span>
           <textarea class="form-control" aria-label="مع textarea"></textarea>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="floating-labels">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>الحقول ذوي العناوين العائمة</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/forms/floating-labels" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('forms/floating-labels')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <form>
           <div class="form-floating mb-3">
             <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
@@ -531,17 +528,17 @@ direction: rtl
             <label for="floatingPassword">كلمة السر</label>
           </div>
         </form>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="validation">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>التحقق</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/validation" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('forms/validation')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <form class="row g-3">
           <div class="col-md-4">
             <label for="validationServer01" class="form-label">الاسم الاول</label>
@@ -606,7 +603,7 @@ direction: rtl
             <button class="btn btn-primary" type="submit">إرسال النموذج</button>
           </div>
         </form>
-        {{< /example >}}
+        `} />
       </div>
     </article>
   </section>
@@ -617,11 +614,11 @@ direction: rtl
     <article class="my-3" id="accordion">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>المطوية</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/accordion" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/accordion')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="accordion" id="accordionExample">
           <div class="accordion-item">
             <h4 class="accordion-header">
@@ -660,44 +657,41 @@ direction: rtl
             </div>
           </div>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="alerts">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>الإنذارات</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/alerts" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/alerts')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        {{< alerts.inline >}}
+        <div class="alert alert-${themeColor.name} alert-dismissible fade show" role="alert">
-        {{- range (index $.Site.Data "theme-colors") }}
+          تنبيه ${themeColor.name} بسيط مع <a href="#" class="alert-link">رابط مثال</a>. أعطها نقرة إذا أردت.
-        <div class="alert alert-{{ .name }} alert-dismissible fade show" role="alert">
-          تنبيه {{ .name }} بسيط مع <a href="#" class="alert-link">رابط مثال</a>. أعطها نقرة إذا أردت.
           <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="قريب"></button>
-        </div>{{ end -}}
+        </div>
-        {{< /alerts.inline >}}
+        `)} />
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="alert alert-success" role="alert">
           <h4 class="alert-heading">أحسنت!</h4>
           <p>لقد نجحت في قراءة رسالة التنبيه المهمة هذه. سيتم تشغيل نص المثال هذا لفترة أطول قليلاً حتى تتمكن من رؤية كيفية عمل التباعد داخل التنبيه مع هذا النوع من المحتوى.</p>
           <hr>
           <p class="mb-0">كلما احتجت إلى ذلك ، تأكد من استخدام أدوات الهامش للحفاظ على الأشياء لطيفة ومرتبة.</p>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="badge">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>الشارة</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/badge" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/badge')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <p class="h1">مثال على عنوان <span class="badge bg-primary">جديد</span></p>
         <p class="h2">مثال على عنوان <span class="badge bg-secondary">جديد</span></p>
         <p class="h3">مثال على عنوان <span class="badge bg-success">جديد</span></p>
@@ -706,24 +700,21 @@ direction: rtl
         <p class="h6">مثال على عنوان <span class="badge text-bg-info">جديد</span></p>
         <p class="h6">مثال على عنوان <span class="badge text-bg-light">جديد</span></p>
         <p class="h6">مثال على عنوان <span class="badge bg-dark">جديد</span></p>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        {{< badge.inline >}}
+        <span class="badge rounded-pill ${(themeColor.name === 'light' || themeColor.name === 'warning' || themeColor.name === 'info') ? 'text-' : ''}bg-${themeColor.name}">${themeColor.title}</span>
-        {{- range (index $.Site.Data "theme-colors") }}
+        `)} />
-        <span class="badge rounded-pill {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-{{ end }}bg-{{ .name }}">{{ .name | title }}</span>{{- end -}}
-        {{< /badge.inline >}}
-        {{< /example >}}
       </div>
     </article>
     <article class="my-3" id="breadcrumb">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>مسار التنقل التفصيلي (فتات الخبز)</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/breadcrumb" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/breadcrumb')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <nav aria-label="فتات الخبز">
           <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="#">الصفحة الرئيسية</a></li>
@@ -731,49 +722,41 @@ direction: rtl
             <li class="breadcrumb-item active" aria-current="page">البيانات</li>
           </ol>
         </nav>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="buttons">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>الأزرار</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/buttons" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/buttons')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={[
-        {{< buttons.inline >}}
+          ...getData('theme-colors').map((themeColor) => `
-        {{- range (index $.Site.Data "theme-colors") }}
+          <button type="button" class="btn btn-${themeColor.name}">${themeColor.title}</button>
-        <button type="button" class="btn btn-{{ .name }}">{{ .name | title }}</button>
+          `),
-        {{- end -}}
+          `<button type="button" class="btn btn-link">رابط</button>`]} />
-        {{< /buttons.inline >}}
 
-        <button type="button" class="btn btn-link">رابط</button>
+        <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        {{< /example >}}
+          <button type="button" class="btn btn-outline-${themeColor.name}">${themeColor.title}</button>
+          `)} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
-        {{< buttons.inline >}}
-        {{- range (index $.Site.Data "theme-colors") }}
-        <button type="button" class="btn btn-outline-{{ .name }}">{{ .name | title }}</button>
-        {{- end -}}
-        {{< /buttons.inline >}}
-        {{< /example >}}
-
-        {{< example show_markup="false" >}}
         <button type="button" class="btn btn-primary btn-sm">زر صغير</button>
         <button type="button" class="btn btn-primary">زر قياسي</button>
         <button type="button" class="btn btn-primary btn-lg">زر كبير</button>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="button-group">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>مجموعة الأزرار</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/button-group" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/button-group')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="btn-toolbar" role="toolbar" aria-label="شريط أدوات مع مجموعات أزرار">
           <div class="btn-group me-2" role="group" aria-label="المجموعة الأولى">
             <button type="button" class="btn btn-secondary">1</button>
@@ -790,21 +773,21 @@ direction: rtl
             <button type="button" class="btn btn-secondary">8</button>
           </div>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="card">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>البطاقة</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/card" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/card')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="row  row-cols-1 row-cols-md-2 g-4">
           <div class="col">
             <div class="card">
-              {{< placeholder width="100%" height="180" class="card-img-top" text="غطاء الصورة" >}}
+              <Placeholder width="100%" height="180" class="card-img-top" text="غطاء الصورة" />
               <div class="card-body">
                 <h5 class="card-title">عنوان البطاقة</h5>
                 <p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
@@ -848,7 +831,7 @@ direction: rtl
             <div class="card">
               <div class="row g-0">
                 <div class="col-md-4">
-                  {{< placeholder width="100%" height="250" text="صورة" >}}
+                  <Placeholder width="100%" height="250" text="صورة" />
                 </div>
                 <div class="col-md-8">
                   <div class="card-body">
@@ -861,17 +844,17 @@ direction: rtl
             </div>
           </div>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="carousel">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>شرائح العرض</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/carousel" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/carousel')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
           <div class="carousel-indicators">
             <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="الشريحة الأولى"></button>
@@ -880,21 +863,21 @@ direction: rtl
           </div>
           <div class="carousel-inner">
             <div class="carousel-item active">
-              {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="الشريحة الأولى" >}}
+              <Placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="الشريحة الأولى" />
               <div class="carousel-caption d-none d-md-block">
                 <h5>عنوان الشريحة الأولى</h5>
                 <p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
               </div>
             </div>
             <div class="carousel-item">
-              {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="الشريحة الثانية" >}}
+              <Placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="الشريحة الثانية" />
               <div class="carousel-caption d-none d-md-block">
                 <h5>عنوان الشريحة الثانية</h5>
                 <p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
               </div>
             </div>
             <div class="carousel-item">
-              {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="الشريحة الثالثة" >}}
+              <Placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="الشريحة الثالثة" />
               <div class="carousel-caption d-none d-md-block">
                 <h5>عنوان الشريحة الثالثة</h5>
                 <p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
@@ -910,17 +893,17 @@ direction: rtl
             <span class="visually-hidden">التالي</span>
           </button>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="dropdowns">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>القوائم المنسدلة</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/dropdowns" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/dropdowns')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
           <div class="dropdown">
             <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -962,9 +945,9 @@ direction: rtl
             </ul>
           </div>
         </div>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="btn-group">
           <button type="button" class="btn btn-primary">Primary</button>
           <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
@@ -1031,9 +1014,9 @@ direction: rtl
             <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
           </ul>
         </div><!-- /btn-group -->
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
           <div class="dropend">
             <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -1075,9 +1058,9 @@ direction: rtl
             </ul>
           </div>
         </div>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="btn-group">
           <div class="dropdown">
             <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -1092,17 +1075,17 @@ direction: rtl
             </ul>
           </div>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="list-group">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>مجموعة العناصر</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/list-group" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/list-group')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <ul class="list-group">
           <li class="list-group-item disabled" aria-disabled="true">عنصر معطل</li>
           <li class="list-group-item">عنصر ثاني</li>
@@ -1110,9 +1093,9 @@ direction: rtl
           <li class="list-group-item">عنصر رابع</li>
           <li class="list-group-item">وعنصر خامس أيضًا</li>
         </ul>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <ul class="list-group list-group-flush">
           <li class="list-group-item">عنصر</li>
           <li class="list-group-item">عنصر ثاني</li>
@@ -1120,28 +1103,26 @@ direction: rtl
           <li class="list-group-item">عنصر رابع</li>
           <li class="list-group-item">وعنصر خامس أيضًا</li>
         </ul>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={[`
         <div class="list-group">
-          <a href="#" class="list-group-item list-group-item-action">عنصر مجموعة قائمة default بسيط</a>
+          <a href="#" class="list-group-item list-group-item-action">عنصر مجموعة قائمة default بسيط</a>`,
-          {{< list.inline >}}
+          ...getData('theme-colors').map((themeColor) => `
-          {{- range (index $.Site.Data "theme-colors") }}
+          <a href="#" class="list-group-item list-group-item-action list-group-item-${themeColor.name}">عنصر مجموعة قائمة ${themeColor.name} بسيط</a>
-          <a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">عنصر مجموعة قائمة {{ .name }} بسيط</a>
+          `),
-          {{- end -}}
+        `</div>
-          {{< /list.inline >}}
+        `]} />
-        </div>
-        {{< /example >}}
       </div>
     </article>
     <article class="my-3" id="modal">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>الصندوق العائم</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/modal" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/modal')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="d-flex justify-content-between flex-wrap">
           <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDefault">
             إطلاق صندوق عائم تجريبي
@@ -1156,26 +1137,26 @@ direction: rtl
             صندوق عائم يملأ الشاشة
           </button>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="navs">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>التنقل</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navs-tabs" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/navs-tabs')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <nav class="nav">
           <a class="nav-link active" aria-current="page" href="#">نشط</a>
           <a class="nav-link" href="#">رابط</a>
           <a class="nav-link" href="#">رابط</a>
           <a class="nav-link disabled" aria-disabled="true">معطل</a>
         </nav>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <nav>
           <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
             <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">الصفحة الرئيسية</button>
@@ -1194,9 +1175,9 @@ direction: rtl
             <p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الاتصال بنا. أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، بل يجب وضع معايير جدوى جديدة لشركات البناء ومعايير أعلى لجدوى التكييف من أجل تحفيز الحلول المستدامة قانونيًا.</p>
           </div>
         </div>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <ul class="nav nav-pills">
           <li class="nav-item">
             <a class="nav-link active" aria-current="page" href="#">نشط</a>
@@ -1211,21 +1192,21 @@ direction: rtl
             <a class="nav-link disabled" aria-disabled="true">معطل</a>
           </li>
         </ul>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="navbar">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>شريط التنقل</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navbar" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/navbar')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <nav class="navbar navbar-expand-lg bg-body-tertiary">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
-              <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
+              <img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
                    style="filter: invert(1) grayscale(100%) brightness(200%);">
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="تبديل التنقل">
@@ -1265,7 +1246,7 @@ direction: rtl
         <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
-              <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
+              <img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="تبديل التنقل">
               <span class="navbar-toggler-icon"></span>
@@ -1300,17 +1281,17 @@ direction: rtl
             </div>
           </div>
         </nav>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="pagination">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>ترقيم الصفحات</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/pagination" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/pagination')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <nav aria-label="مثال ترقيم الصفحات">
           <ul class="pagination pagination-sm">
             <li class="page-item"><a class="page-link" href="#">1</a></li>
@@ -1320,9 +1301,9 @@ direction: rtl
             <li class="page-item"><a class="page-link" href="#">3</a></li>
           </ul>
         </nav>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <nav aria-label="مثال قياسي لترقيم الصفحات">
           <ul class="pagination">
             <li class="page-item">
@@ -1340,9 +1321,9 @@ direction: rtl
             </li>
           </ul>
         </nav>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <nav aria-label="مثال آخر لترقيم الصفحات">
           <ul class="pagination pagination-lg flex-wrap">
             <li class="page-item disabled">
@@ -1358,23 +1339,23 @@ direction: rtl
             </li>
           </ul>
         </nav>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="popovers">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>الصناديق المنبثقة</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/popovers" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/popovers')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="عنوان الصندوق المنبثق" data-bs-content="وإليك بعض المحتويات الرائعة. إنه آسر للغاية. أليس كذلك؟">
         انقر لعرض/إخفاء الصندوق المنبثق
         </button>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
           انبثاق إلى الأعلى
         </button>
@@ -1387,17 +1368,17 @@ direction: rtl
         <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
           انبثاق إلى اليمين
         </button>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="progress">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>شريط التقدم</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/progress" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/progress')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="progress mb-3" role="progressbar" aria-label="مثال مع عنوان" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
           <div class="progress-bar">0%</div>
         </div>
@@ -1413,9 +1394,9 @@ direction: rtl
         <div class="progress" role="progressbar" aria-label="مثال خطر مع عنوان" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
           <div class="progress-bar bg-danger w-100">100%</div>
         </div>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="progress-stacked">
           <div class="progress" role="progressbar" aria-label="القسم الأول - مثال افتراضي" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
             <div class="progress-bar"></div>
@@ -1424,13 +1405,13 @@ direction: rtl
             <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
           </div>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="scrollspy">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>المخطوطة</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/scrollspy" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/scrollspy')}>دليل الإستخدام</a>
       </div>
 
       <div>
@@ -1474,42 +1455,34 @@ direction: rtl
     <article class="my-3" id="spinners">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>الدوائر المتحركة</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/spinners" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/spinners')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        {{< spinner.inline >}}
+        <div class="spinner-border text-${themeColor.name}" role="status">
-        {{- range (index $.Site.Data "theme-colors") }}
-        <div class="spinner-border text-{{ .name }}" role="status">
           <span class="visually-hidden">جار التحميل...</span>
         </div>
-        {{- end -}}
+        `)} />
-        {{< /spinner.inline >}}
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        {{< spinner.inline >}}
+        <div class="spinner-grow text-${themeColor.name}" role="status">
-        {{- range (index $.Site.Data "theme-colors") }}
-        <div class="spinner-grow text-{{ .name }}" role="status">
           <span class="visually-hidden">جار التحميل...</span>
         </div>
-        {{- end -}}
+        `)} />
-        {{< /spinner.inline >}}
-        {{< /example >}}
       </div>
     </article>
     <article class="my-3" id="toasts">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>الإشعارات</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/toasts" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/toasts')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}}
+        <Example showMarkup={false} class="bg-dark p-5 align-items-center" code={`
         <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
           <div class="toast-header">
-            {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
+            <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
             <strong class="me-auto">Bootstrap</strong>
             <small class="text-body-secondary">قبل 11 دقيقة</small>
             <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button>
@@ -1518,23 +1491,23 @@ direction: rtl
             مرحبًا بالعالم! هذه رسالة إشعار.
           </div>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="mt-3 mb-5 pb-5" id="tooltips">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>التلميحات</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/tooltips" >}}">دليل الإستخدام</a>
+        <a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/tooltips')}>دليل الإستخدام</a>
       </div>
 
       <div>
-        {{< example show_markup="false" class="tooltip-demo" >}}
+        <Example showMarkup={false} class="tooltip-demo" code={`
         <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="تلميح يظهر في الأعلى">تلميح يظهر في الأعلى</button>
         <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="تلميح يظهر على اليسار">تلميح يظهر على اليسار</button>
         <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="تلميح يظهر في الأسفل">تلميح يظهر في الأسفل</button>
         <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="تلميح يظهر على اليمين">تلميح يظهر على اليمين</button>
         <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>تلميح</em> <u>مع</u> <b>HTML</b>">تلميح مع HTML</button>
-        {{< /example >}}
+        `} />
       </div>
     </article>
   </section>

site-new/src/assets/examples/cheatsheet/index.astro

@@ -1,21 +1,22 @@
 ---
-layout: examples
+import { getData } from '@libs/data'
-title: Cheatsheet
+import { getVersionedDocsPath } from '@libs/path'
-extra_css:
+import Example from '@shortcodes/Example.astro'
-  - "cheatsheet.css"
+import Placeholder from '@shortcodes/Placeholder.astro'
-extra_js:
+
-  - src: "cheatsheet.js"
+export const title = 'Cheatsheet'
-    defer: true
+export const extra_css = ['cheatsheet.css']
-body_class: "bg-body-tertiary"
+export const extra_js = [{ src: 'cheatsheet.js' }]
+export const body_class = 'bg-body-tertiary'
 ---
 
 <header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
   <div class="container-fluid d-flex align-items-center">
     <h1 class="d-flex align-items-center fs-4 text-white mb-0">
-      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
+      <img src={getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="me-3" alt="Bootstrap">
       Cheatsheet
     </h1>
-    <a href="{{< docsref "/examples/cheatsheet-rtl" >}}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet</a>
+    <a href={getVersionedDocsPath('examples/cheatsheet-rtl')} class="ms-auto link-light" hreflang="ar">RTL cheatsheet</a>
   </div>
 </header>
 <aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2">
@@ -77,35 +78,32 @@ body_class: "bg-body-tertiary"
     <article class="my-3" id="typography">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Typography</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/content/typography" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('content/typography')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <p class="display-1">Display 1</p>
         <p class="display-2">Display 2</p>
         <p class="display-3">Display 3</p>
         <p class="display-4">Display 4</p>
         <p class="display-5">Display 5</p>
-        <p class="display-6">Display 6</p>
+        <p class="display-6">Display 6</p>`} />
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <p class="h1">Heading 1</p>
         <p class="h2">Heading 2</p>
         <p class="h3">Heading 3</p>
         <p class="h4">Heading 4</p>
         <p class="h5">Heading 5</p>
-        <p class="h6">Heading 6</p>
+        <p class="h6">Heading 6</p>`} />
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <p class="lead">
           This is a lead paragraph. It stands out from regular paragraphs.
-        </p>
+        </p>`} />
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <p>You can use the mark tag to <mark>highlight</mark> text.</p>
         <p><del>This line of text is meant to be treated as deleted text.</del></p>
         <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
@@ -113,21 +111,18 @@ body_class: "bg-body-tertiary"
         <p><u>This line of text will render as underlined.</u></p>
         <p><small>This line of text is meant to be treated as fine print.</small></p>
         <p><strong>This line rendered as bold text.</strong></p>
-        <p><em>This line rendered as italicized text.</em></p>
+        <p><em>This line rendered as italicized text.</em></p>`} />
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
-        <hr>
+        <hr>`} />
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <blockquote class="blockquote">
           <p>A well-known quote, contained in a blockquote element.</p>
           <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
-        </blockquote>
+        </blockquote>`} />
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <ul class="list-unstyled">
           <li>This is a list.</li>
           <li>It appears completely unstyled.</li>
@@ -141,179 +136,163 @@ body_class: "bg-body-tertiary"
             </ul>
           </li>
           <li>This may still come in handy in some situations.</li>
-        </ul>
+        </ul>`} />
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <ul class="list-inline">
           <li class="list-inline-item">This is a list item.</li>
           <li class="list-inline-item">And another one.</li>
           <li class="list-inline-item">But they're displayed inline.</li>
-        </ul>
+        </ul>`} />
-        {{< /example >}}
       </div>
     </article>
     <article class="my-3" id="images">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Images</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/content/images" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('content/images')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
-        {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
+        <Placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" />`} />
-        {{< /example >}}
-
-        {{< example show_markup="false" >}}
-        {{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
-        {{< /example >}}
       </div>
     </article>
     <article class="my-3" id="tables">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Tables</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/content/tables" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('content/tables')}>Documentation</a>
       </div>
-
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
-        <table class="table table-striped">
+          <table class="table table-striped">
-          <thead>
+            <thead>
-          <tr>
+            <tr>
-            <th scope="col">#</th>
+              <th scope="col">#</th>
-            <th scope="col">First</th>
+              <th scope="col">First</th>
-            <th scope="col">Last</th>
+              <th scope="col">Last</th>
-            <th scope="col">Handle</th>
+              <th scope="col">Handle</th>
-          </tr>
+            </tr>
-          </thead>
+            </thead>
-          <tbody>
+            <tbody>
-          <tr>
+            <tr>
-            <th scope="row">1</th>
+              <th scope="row">1</th>
-            <td>Mark</td>
+              <td>Mark</td>
-            <td>Otto</td>
+              <td>Otto</td>
-            <td>@mdo</td>
+              <td>@mdo</td>
-          </tr>
+            </tr>
-          <tr>
+            <tr>
-            <th scope="row">2</th>
+              <th scope="row">2</th>
-            <td>Jacob</td>
+              <td>Jacob</td>
-            <td>Thornton</td>
+              <td>Thornton</td>
-            <td>@fat</td>
+              <td>@fat</td>
-          </tr>
+            </tr>
-          <tr>
+            <tr>
-            <th scope="row">3</th>
+              <th scope="row">3</th>
-            <td colspan="2">Larry the Bird</td>
+              <td colspan="2">Larry the Bird</td>
-            <td>@twitter</td>
+              <td>@twitter</td>
-          </tr>
+            </tr>
-          </tbody>
+            </tbody>
-        </table>
+          </table>`} />
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
-        <table class="table table-dark table-borderless">
+          <table class="table table-dark table-borderless">
-          <thead>
+            <thead>
-          <tr>
+            <tr>
-            <th scope="col">#</th>
+              <th scope="col">#</th>
-            <th scope="col">First</th>
+              <th scope="col">First</th>
-            <th scope="col">Last</th>
+              <th scope="col">Last</th>
-            <th scope="col">Handle</th>
+              <th scope="col">Handle</th>
-          </tr>
+            </tr>
-          </thead>
+            </thead>
-          <tbody>
+            <tbody>
-          <tr>
+            <tr>
-            <th scope="row">1</th>
+              <th scope="row">1</th>
-            <td>Mark</td>
+              <td>Mark</td>
-            <td>Otto</td>
+              <td>Otto</td>
-            <td>@mdo</td>
+              <td>@mdo</td>
-          </tr>
+            </tr>
-          <tr>
+            <tr>
-            <th scope="row">2</th>
+              <th scope="row">2</th>
-            <td>Jacob</td>
+              <td>Jacob</td>
-            <td>Thornton</td>
+              <td>Thornton</td>
-            <td>@fat</td>
+              <td>@fat</td>
-          </tr>
+            </tr>
-          <tr>
+            <tr>
-            <th scope="row">3</th>
+              <th scope="row">3</th>
-            <td colspan="2">Larry the Bird</td>
+              <td colspan="2">Larry the Bird</td>
-            <td>@twitter</td>
+              <td>@twitter</td>
-          </tr>
+            </tr>
-          </tbody>
+            </tbody>
-        </table>
+          </table>`} />
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={[`
-        <table class="table table-hover">
+          <table class="table table-hover">
-          <thead>
+            <thead>
-          <tr>
+            <tr>
-            <th scope="col">Class</th>
+              <th scope="col">Class</th>
-            <th scope="col">Heading</th>
+              <th scope="col">Heading</th>
-            <th scope="col">Heading</th>
+              <th scope="col">Heading</th>
-          </tr>
+            </tr>
-          </thead>
+            </thead>
-          <tbody>
+            <tbody>
-          <tr>
+            <tr>
-            <th scope="row">Default</th>
+              <th scope="row">Default</th>
-            <td>Cell</td>
+              <td>Cell</td>
-            <td>Cell</td>
+              <td>Cell</td>
-          </tr>
+            </tr>`,
-          {{< table.inline >}}
+            ...getData('theme-colors').map((themeColor) => `<tr class="table-${themeColor.name}">
-          {{- range (index $.Site.Data "theme-colors") }}
+                <th scope="row">${themeColor.title}</th>
-          <tr class="table-{{ .name }}">
+                <td>Cell</td>
-            <th scope="row">{{ .name | title }}</th>
+                <td>Cell</td>
-            <td>Cell</td>
+              </tr>`),
-            <td>Cell</td>
+            `</tbody>
-          </tr>
+          </table>`]} />
-          {{- end -}}
-          {{< /table.inline >}}
-          </tbody>
-        </table>
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
-        <table class="table table-sm table-bordered">
+          <table class="table table-sm table-bordered">
-          <thead>
+            <thead>
-          <tr>
+            <tr>
-            <th scope="col">#</th>
+              <th scope="col">#</th>
-            <th scope="col">First</th>
+              <th scope="col">First</th>
-            <th scope="col">Last</th>
+              <th scope="col">Last</th>
-            <th scope="col">Handle</th>
+              <th scope="col">Handle</th>
-          </tr>
+            </tr>
-          </thead>
+            </thead>
-          <tbody>
+            <tbody>
-          <tr>
+            <tr>
-            <th scope="row">1</th>
+              <th scope="row">1</th>
-            <td>Mark</td>
+              <td>Mark</td>
-            <td>Otto</td>
+              <td>Otto</td>
-            <td>@mdo</td>
+              <td>@mdo</td>
-          </tr>
+            </tr>
-          <tr>
+            <tr>
-            <th scope="row">2</th>
+              <th scope="row">2</th>
-            <td>Jacob</td>
+              <td>Jacob</td>
-            <td>Thornton</td>
+              <td>Thornton</td>
-            <td>@fat</td>
+              <td>@fat</td>
-          </tr>
+            </tr>
-          <tr>
+            <tr>
-            <th scope="row">3</th>
+              <th scope="row">3</th>
-            <td colspan="2">Larry the Bird</td>
+              <td colspan="2">Larry the Bird</td>
-            <td>@twitter</td>
+              <td>@twitter</td>
-          </tr>
+            </tr>
-          </tbody>
+            </tbody>
-        </table>
+          </table>`} />
-        {{< /example >}}
       </div>
     </article>
+
     <article class="my-3" id="figures">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Figures</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/content/figures" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('content/figures')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <figure class="figure">
-          {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
+          <Placeholder width="400" height="300" class="figure-img img-fluid rounded" />
           <figcaption class="figure-caption">A caption for the above image.</figcaption>
-        </figure>
+        </figure>`} />
-        {{< /example >}}
       </div>
     </article>
   </section>
@@ -324,11 +303,11 @@ body_class: "bg-body-tertiary"
     <article class="my-3" id="overview">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Overview</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/forms/overview" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('forms/overview')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <form>
           <div class="mb-3">
             <label for="exampleInputEmail1" class="form-label">Email address</label>
@@ -376,18 +355,17 @@ body_class: "bg-body-tertiary"
             <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
           </div>
           <button type="submit" class="btn btn-primary">Submit</button>
-        </form>
+        </form>`} />
-        {{< /example >}}
       </div>
     </article>
     <article class="my-3" id="disabled-forms">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Disabled forms</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/forms/overview" >}}#disabled-forms">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('forms/overview#disabled-forms')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <form>
           <fieldset disabled aria-label="Disabled fieldset example">
             <div class="mb-3">
@@ -433,18 +411,17 @@ body_class: "bg-body-tertiary"
             </div>
             <button type="submit" class="btn btn-primary">Submit</button>
           </fieldset>
-        </form>
+        </form>`} />
-        {{< /example >}}
       </div>
     </article>
     <article class="my-3" id="sizing">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Sizing</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/forms/form-control" >}}#sizing">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('forms/form-control#sizing')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="mb-3">
           <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
         </div>
@@ -458,10 +435,9 @@ body_class: "bg-body-tertiary"
         </div>
         <div class="mb-3">
           <input type="file" class="form-control form-control-lg" aria-label="Large file input example">
-        </div>
+        </div>`} />
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="mb-3">
           <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
         </div>
@@ -476,17 +452,17 @@ body_class: "bg-body-tertiary"
         <div class="mb-3">
           <input type="file" class="form-control form-control-sm" aria-label="Small file input example">
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="input-group">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Input group</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/forms/input-group" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('forms/input-group')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="input-group mb-3">
           <span class="input-group-text" id="basic-addon1">@</span>
           <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
@@ -509,17 +485,17 @@ body_class: "bg-body-tertiary"
           <span class="input-group-text">With textarea</span>
           <textarea class="form-control" aria-label="With textarea"></textarea>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="floating-labels">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Floating labels</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/forms/floating-labels" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('forms/floating-labels')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <form>
           <div class="form-floating mb-3">
             <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
@@ -530,17 +506,17 @@ body_class: "bg-body-tertiary"
             <label for="floatingPassword">Password</label>
           </div>
         </form>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="validation">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Validation</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/forms/validation" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('forms/validation')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <form class="row g-3">
           <div class="col-md-4">
             <label for="validationServer01" class="form-label">First name</label>
@@ -605,7 +581,7 @@ body_class: "bg-body-tertiary"
             <button class="btn btn-primary" type="submit">Submit form</button>
           </div>
         </form>
-        {{< /example >}}
+        `} />
       </div>
     </article>
   </section>
@@ -616,11 +592,11 @@ body_class: "bg-body-tertiary"
     <article class="my-3" id="accordion">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Accordion</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/accordion" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/accordion')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="accordion" id="accordionExample">
           <div class="accordion-item">
             <h4 class="accordion-header">
@@ -659,44 +635,41 @@ body_class: "bg-body-tertiary"
             </div>
           </div>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="alerts">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Alerts</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/alerts" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/alerts')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        {{< alerts.inline >}}
+        <div class="alert alert-${themeColor.name} alert-dismissible fade show" role="alert">
-        {{- range (index $.Site.Data "theme-colors") }}
+          A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-        <div class="alert alert-{{ .name }} alert-dismissible fade show" role="alert">
-          A simple {{ .name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
           <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-        </div>{{ end -}}
+        </div>
-        {{< /alerts.inline >}}
+        `)} />
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="alert alert-success" role="alert">
           <h4 class="alert-heading">Well done!</h4>
           <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
           <hr>
           <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="badge">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Badge</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/badge" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/badge')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <p class="h1">Example heading <span class="badge bg-primary">New</span></p>
         <p class="h2">Example heading <span class="badge bg-secondary">New</span></p>
         <p class="h3">Example heading <span class="badge bg-success">New</span></p>
@@ -705,24 +678,21 @@ body_class: "bg-body-tertiary"
         <p class="h6">Example heading <span class="badge text-bg-info">New</span></p>
         <p class="h6">Example heading <span class="badge text-bg-light">New</span></p>
         <p class="h6">Example heading <span class="badge bg-dark">New</span></p>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        {{< badge.inline >}}
+        <span class="badge rounded-pill ${(themeColor.name === 'light' || themeColor.name === 'warning' || themeColor.name === 'info') ? 'text-' : ''}bg-${themeColor.name}">${themeColor.title}</span>
-        {{- range (index $.Site.Data "theme-colors") }}
+        `)} />
-        <span class="badge rounded-pill {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-{{ end }}bg-{{ .name }}">{{ .name | title }}</span>{{- end -}}
-        {{< /badge.inline >}}
-        {{< /example >}}
       </div>
     </article>
     <article class="my-3" id="breadcrumb">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Breadcrumb</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/breadcrumb" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/breadcrumb')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <nav aria-label="breadcrumb">
           <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -730,49 +700,40 @@ body_class: "bg-body-tertiary"
             <li class="breadcrumb-item active" aria-current="page">Data</li>
           </ol>
         </nav>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="buttons">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Buttons</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/buttons" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/buttons')}>Documentation</a>
       </div>
-
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={[
-        {{< buttons.inline >}}
+          ...getData('theme-colors').map((themeColor) => `
-        {{- range (index $.Site.Data "theme-colors") }}
+          <button type="button" class="btn btn-${themeColor.name}">${themeColor.title}</button>
-        <button type="button" class="btn btn-{{ .name }}">{{ .name | title }}</button>
+          `),
-        {{- end -}}
+          `<button type="button" class="btn btn-link">Link</button>`]} />
-        {{< /buttons.inline >}}
 
-        <button type="button" class="btn btn-link">Link</button>
+        <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        {{< /example >}}
+          <button type="button" class="btn btn-outline-${themeColor.name}">${themeColor.title}</button>
+          `)} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
-        {{< buttons.inline >}}
+          <button type="button" class="btn btn-primary btn-sm">Small button</button>
-        {{- range (index $.Site.Data "theme-colors") }}
+          <button type="button" class="btn btn-primary">Standard button</button>
-        <button type="button" class="btn btn-outline-{{ .name }}">{{ .name | title }}</button>
+          <button type="button" class="btn btn-primary btn-lg">Large button</button>
-        {{- end -}}
+          `} />
-        {{< /buttons.inline >}}
-        {{< /example >}}
-
-        {{< example show_markup="false" >}}
-        <button type="button" class="btn btn-primary btn-sm">Small button</button>
-        <button type="button" class="btn btn-primary">Standard button</button>
-        <button type="button" class="btn btn-primary btn-lg">Large button</button>
-        {{< /example >}}
       </div>
     </article>
     <article class="my-3" id="button-group">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Button group</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/button-group" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/button-group')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
           <div class="btn-group me-2" role="group" aria-label="First group">
             <button type="button" class="btn btn-secondary">1</button>
@@ -789,88 +750,88 @@ body_class: "bg-body-tertiary"
             <button type="button" class="btn btn-secondary">8</button>
           </div>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="card">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Card</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/card" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/card')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
-        <div class="row  row-cols-1 row-cols-md-2 g-4">
+          <div class="row  row-cols-1 row-cols-md-2 g-4">
-          <div class="col">
+            <div class="col">
-            <div class="card">
+              <div class="card">
-              {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+                <Placeholder width="100%" height="180" class="card-img-top" text="Image cap" />
-              <div class="card-body">
+                <div class="card-body">
-                <h5 class="card-title">Card title</h5>
+                  <h5 class="card-title">Card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                <a href="#" class="btn btn-primary">Go somewhere</a>
+                  <a href="#" class="btn btn-primary">Go somewhere</a>
-              </div>
-            </div>
-          </div>
-          <div class="col">
-            <div class="card">
-              <div class="card-header">
-                Featured
-              </div>
-              <div class="card-body">
-                <h5 class="card-title">Card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                <a href="#" class="btn btn-primary">Go somewhere</a>
-              </div>
-              <div class="card-footer text-body-secondary">
-                2 days ago
-              </div>
-            </div>
-          </div>
-          <div class="col">
-            <div class="card">
-              <div class="card-body">
-                <h5 class="card-title">Card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-              </div>
-              <ul class="list-group list-group-flush">
-                <li class="list-group-item">An item</li>
-                <li class="list-group-item">A second item</li>
-                <li class="list-group-item">A third item</li>
-              </ul>
-              <div class="card-body">
-                <a href="#" class="card-link">Card link</a>
-                <a href="#" class="card-link">Another link</a>
-              </div>
-            </div>
-          </div>
-          <div class="col">
-            <div class="card">
-              <div class="row g-0">
-                <div class="col-md-4">
-                  {{< placeholder width="100%" height="250" text="Image" >}}
                 </div>
-                <div class="col-md-8">
+              </div>
-                  <div class="card-body">
+            </div>
-                    <h5 class="card-title">Card title</h5>
+            <div class="col">
-                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+              <div class="card">
-                    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+                <div class="card-header">
+                  Featured
+                </div>
+                <div class="card-body">
+                  <h5 class="card-title">Card title</h5>
+                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                  <a href="#" class="btn btn-primary">Go somewhere</a>
+                </div>
+                <div class="card-footer text-body-secondary">
+                  2 days ago
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="card">
+                <div class="card-body">
+                  <h5 class="card-title">Card title</h5>
+                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </div>
+                <ul class="list-group list-group-flush">
+                  <li class="list-group-item">An item</li>
+                  <li class="list-group-item">A second item</li>
+                  <li class="list-group-item">A third item</li>
+                </ul>
+                <div class="card-body">
+                  <a href="#" class="card-link">Card link</a>
+                  <a href="#" class="card-link">Another link</a>
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="card">
+                <div class="row g-0">
+                  <div class="col-md-4">
+                    <Placeholder width="100%" height="250" text="Image" />
+                  </div>
+                  <div class="col-md-8">
+                    <div class="card-body">
+                      <h5 class="card-title">Card title</h5>
+                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+                      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
+          `} />
-        {{< /example >}}
       </div>
     </article>
     <article class="my-3" id="carousel">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Carousel</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/carousel" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/carousel')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
           <div class="carousel-indicators">
             <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
@@ -879,21 +840,21 @@ body_class: "bg-body-tertiary"
           </div>
           <div class="carousel-inner">
             <div class="carousel-item active">
-              {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
+              <Placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" />
               <div class="carousel-caption d-none d-md-block">
                 <h5>First slide label</h5>
                 <p>Some representative placeholder content for the first slide.</p>
               </div>
             </div>
             <div class="carousel-item">
-              {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}}
+              <Placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" />
               <div class="carousel-caption d-none d-md-block">
                 <h5>Second slide label</h5>
                 <p>Some representative placeholder content for the second slide.</p>
               </div>
             </div>
             <div class="carousel-item">
-              {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
+              <Placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" />
               <div class="carousel-caption d-none d-md-block">
                 <h5>Third slide label</h5>
                 <p>Some representative placeholder content for the third slide.</p>
@@ -909,17 +870,16 @@ body_class: "bg-body-tertiary"
             <span class="visually-hidden">Next</span>
           </button>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="dropdowns">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Dropdowns</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/dropdowns" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/dropdowns')}>Documentation</a>
       </div>
-
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
           <div class="dropdown">
             <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -961,147 +921,147 @@ body_class: "bg-body-tertiary"
             </ul>
           </div>
         </div>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
-        <div class="btn-group">
+          <div class="btn-group">
-          <button type="button" class="btn btn-primary">Primary</button>
+            <button type="button" class="btn btn-primary">Primary</button>
-          <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-            <span class="visually-hidden">Toggle Dropdown</span>
+              <span class="visually-hidden">Toggle Dropdown</span>
-          </button>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="#">Action</a></li>
-            <li><a class="dropdown-item" href="#">Another action</a></li>
-            <li><a class="dropdown-item" href="#">Something else here</a></li>
-          </ul>
-        </div><!-- /btn-group -->
-        <div class="btn-group">
-          <button type="button" class="btn btn-secondary">Secondary</button>
-          <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-            <span class="visually-hidden">Toggle Dropdown</span>
-          </button>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="#">Action</a></li>
-            <li><a class="dropdown-item" href="#">Another action</a></li>
-            <li><a class="dropdown-item" href="#">Something else here</a></li>
-          </ul>
-        </div><!-- /btn-group -->
-        <div class="btn-group">
-          <button type="button" class="btn btn-success">Success</button>
-          <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-            <span class="visually-hidden">Toggle Dropdown</span>
-          </button>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="#">Action</a></li>
-            <li><a class="dropdown-item" href="#">Another action</a></li>
-            <li><a class="dropdown-item" href="#">Something else here</a></li>
-          </ul>
-        </div><!-- /btn-group -->
-        <div class="btn-group">
-          <button type="button" class="btn btn-info">Info</button>
-          <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-            <span class="visually-hidden">Toggle Dropdown</span>
-          </button>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="#">Action</a></li>
-            <li><a class="dropdown-item" href="#">Another action</a></li>
-            <li><a class="dropdown-item" href="#">Something else here</a></li>
-          </ul>
-        </div><!-- /btn-group -->
-        <div class="btn-group">
-          <button type="button" class="btn btn-warning">Warning</button>
-          <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-            <span class="visually-hidden">Toggle Dropdown</span>
-          </button>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="#">Action</a></li>
-            <li><a class="dropdown-item" href="#">Another action</a></li>
-            <li><a class="dropdown-item" href="#">Something else here</a></li>
-          </ul>
-        </div><!-- /btn-group -->
-        <div class="btn-group">
-          <button type="button" class="btn btn-danger">Danger</button>
-          <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-            <span class="visually-hidden">Toggle Dropdown</span>
-          </button>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="#">Action</a></li>
-            <li><a class="dropdown-item" href="#">Another action</a></li>
-            <li><a class="dropdown-item" href="#">Something else here</a></li>
-          </ul>
-        </div><!-- /btn-group -->
-        {{< /example >}}
-
-        {{< example show_markup="false" >}}
-        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
-          <div class="dropend">
-            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-              Dropend button
             </button>
             <ul class="dropdown-menu">
-              <li><h6 class="dropdown-header">Dropdown header</h6></li>
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
-              <li><hr class="dropdown-divider"></li>
-              <li><a class="dropdown-item" href="#">Separated link</a></li>
             </ul>
-          </div>
+          </div><!-- /btn-group -->
-          <div class="dropup">
+          <div class="btn-group">
-            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <button type="button" class="btn btn-secondary">Secondary</button>
-              Dropup button
+            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+              <span class="visually-hidden">Toggle Dropdown</span>
             </button>
             <ul class="dropdown-menu">
-              <li><h6 class="dropdown-header">Dropdown header</h6></li>
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
-              <li><hr class="dropdown-divider"></li>
-              <li><a class="dropdown-item" href="#">Separated link</a></li>
             </ul>
-          </div>
+          </div><!-- /btn-group -->
-          <div class="dropstart">
+          <div class="btn-group">
-            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <button type="button" class="btn btn-success">Success</button>
-              Dropstart button
+            <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+              <span class="visually-hidden">Toggle Dropdown</span>
             </button>
             <ul class="dropdown-menu">
-              <li><h6 class="dropdown-header">Dropdown header</h6></li>
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
-              <li><hr class="dropdown-divider"></li>
-              <li><a class="dropdown-item" href="#">Separated link</a></li>
             </ul>
-          </div>
+          </div><!-- /btn-group -->
-        </div>
+          <div class="btn-group">
-        {{< /example >}}
+            <button type="button" class="btn btn-info">Info</button>
+            <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+              <span class="visually-hidden">Toggle Dropdown</span>
+            </button>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </div><!-- /btn-group -->
+          <div class="btn-group">
+            <button type="button" class="btn btn-warning">Warning</button>
+            <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+              <span class="visually-hidden">Toggle Dropdown</span>
+            </button>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </div><!-- /btn-group -->
+          <div class="btn-group">
+            <button type="button" class="btn btn-danger">Danger</button>
+            <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+              <span class="visually-hidden">Toggle Dropdown</span>
+            </button>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </div><!-- /btn-group -->
+          `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
-        <div class="btn-group">
+          <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
-          <div class="dropdown">
+            <div class="dropend">
-            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+              <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-              End-aligned menu
+                Dropend button
-            </button>
+              </button>
-            <ul class="dropdown-menu dropdown-menu-end">
+              <ul class="dropdown-menu">
-              <li><h6 class="dropdown-header">Dropdown header</h6></li>
+                <li><h6 class="dropdown-header">Dropdown header</h6></li>
-              <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Action</a></li>
-              <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
-              <li><hr class="dropdown-divider"></li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
-              <li><a class="dropdown-item" href="#">Separated link</a></li>
+                <li><hr class="dropdown-divider"></li>
-            </ul>
+                <li><a class="dropdown-item" href="#">Separated link</a></li>
+              </ul>
+            </div>
+            <div class="dropup">
+              <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                Dropup button
+              </button>
+              <ul class="dropdown-menu">
+                <li><h6 class="dropdown-header">Dropdown header</h6></li>
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
+                <li><hr class="dropdown-divider"></li>
+                <li><a class="dropdown-item" href="#">Separated link</a></li>
+              </ul>
+            </div>
+            <div class="dropstart">
+              <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                Dropstart button
+              </button>
+              <ul class="dropdown-menu">
+                <li><h6 class="dropdown-header">Dropdown header</h6></li>
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
+                <li><hr class="dropdown-divider"></li>
+                <li><a class="dropdown-item" href="#">Separated link</a></li>
+              </ul>
+            </div>
           </div>
-        </div>
+          `} />
-        {{< /example >}}
+
+        <Example showMarkup={false} code={`
+          <div class="btn-group">
+            <div class="dropdown">
+              <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                End-aligned menu
+              </button>
+              <ul class="dropdown-menu dropdown-menu-end">
+                <li><h6 class="dropdown-header">Dropdown header</h6></li>
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li><hr class="dropdown-divider"></li>
+                <li><a class="dropdown-item" href="#">Separated link</a></li>
+              </ul>
+            </div>
+          </div>
+          `} />
       </div>
     </article>
     <article class="my-3" id="list-group">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>List group</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/list-group" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/list-group')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <ul class="list-group">
           <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
           <li class="list-group-item">A second item</li>
@@ -1109,9 +1069,9 @@ body_class: "bg-body-tertiary"
           <li class="list-group-item">A fourth item</li>
           <li class="list-group-item">And a fifth one</li>
         </ul>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <ul class="list-group list-group-flush">
           <li class="list-group-item">An item</li>
           <li class="list-group-item">A second item</li>
@@ -1119,28 +1079,26 @@ body_class: "bg-body-tertiary"
           <li class="list-group-item">A fourth item</li>
           <li class="list-group-item">And a fifth one</li>
         </ul>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={[`
         <div class="list-group">
-          <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
+          <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>`,
-          {{< list.inline >}}
+          ...getData('theme-colors').map((themeColor) => `
-          {{- range (index $.Site.Data "theme-colors") }}
+          <a href="#" class="list-group-item list-group-item-action list-group-item-${themeColor.name}">A simple ${themeColor.name} list group item</a>
-          <a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">A simple {{ .name }} list group item</a>
+          `),
-          {{- end -}}
+        `</div>
-          {{< /list.inline >}}
+        `]} />
-        </div>
-        {{< /example >}}
       </div>
     </article>
     <article class="my-3" id="modal">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Modal</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/modal" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/modal')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="d-flex justify-content-between flex-wrap">
           <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDefault">
             Launch demo modal
@@ -1155,26 +1113,26 @@ body_class: "bg-body-tertiary"
             Full screen
           </button>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="navs">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Navs</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/navs-tabs" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/navs-tabs')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <nav class="nav">
           <a class="nav-link active" aria-current="page" href="#">Active</a>
           <a class="nav-link" href="#">Link</a>
           <a class="nav-link" href="#">Link</a>
           <a class="nav-link disabled" aria-disabled="true">Disabled</a>
         </nav>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <nav>
           <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
             <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
@@ -1193,9 +1151,9 @@ body_class: "bg-body-tertiary"
             <p>This is some placeholder content the <strong>Contact tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
           </div>
         </div>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <ul class="nav nav-pills">
           <li class="nav-item">
             <a class="nav-link active" aria-current="page" href="#">Active</a>
@@ -1210,106 +1168,105 @@ body_class: "bg-body-tertiary"
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
         </ul>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="navbar">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Navbar</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/navbar" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/navbar')}>Documentation</a>
       </div>
-
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
-        <nav class="navbar navbar-expand-lg bg-body-tertiary">
+          <nav class="navbar navbar-expand-lg bg-body-tertiary">
-          <div class="container-fluid">
+            <div class="container-fluid">
-            <a class="navbar-brand" href="#">
+              <a class="navbar-brand" href="#">
-              <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
+                <img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
-                   style="filter: invert(1) grayscale(100%) brightness(200%);">
+                     style="filter: invert(1) grayscale(100%) brightness(200%);">
-            </a>
+              </a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-              <span class="navbar-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
-            </button>
+              </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+              <div class="collapse navbar-collapse" id="navbarSupportedContent">
-              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                <li class="nav-item">
+                  <li class="nav-item">
-                  <a class="nav-link active" aria-current="page" href="#">Home</a>
+                    <a class="nav-link active" aria-current="page" href="#">Home</a>
-                </li>
+                  </li>
-                <li class="nav-item">
+                  <li class="nav-item">
-                  <a class="nav-link" href="#">Link</a>
+                    <a class="nav-link" href="#">Link</a>
-                </li>
+                  </li>
-                <li class="nav-item dropdown">
+                  <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                    Dropdown
+                      Dropdown
-                  </a>
+                    </a>
-                  <ul class="dropdown-menu">
+                    <ul class="dropdown-menu">
-                    <li><a class="dropdown-item" href="#">Action</a></li>
+                      <li><a class="dropdown-item" href="#">Action</a></li>
-                    <li><a class="dropdown-item" href="#">Another action</a></li>
+                      <li><a class="dropdown-item" href="#">Another action</a></li>
-                    <li><hr class="dropdown-divider"></li>
+                      <li><hr class="dropdown-divider"></li>
-                    <li><a class="dropdown-item" href="#">Something else here</a></li>
+                      <li><a class="dropdown-item" href="#">Something else here</a></li>
-                  </ul>
+                    </ul>
-                </li>
+                  </li>
-                <li class="nav-item">
+                  <li class="nav-item">
-                  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+                    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
-                </li>
+                  </li>
-              </ul>
+                </ul>
-              <form class="d-flex" role="search">
+                <form class="d-flex" role="search">
-                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-                <button class="btn btn-outline-dark" type="submit">Search</button>
+                  <button class="btn btn-outline-dark" type="submit">Search</button>
-              </form>
+                </form>
+              </div>
             </div>
-          </div>
+          </nav>
-        </nav>
   
-        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
+          <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
-          <div class="container-fluid">
+            <div class="container-fluid">
-            <a class="navbar-brand" href="#">
+              <a class="navbar-brand" href="#">
-              <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
+                <img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
-            </a>
+              </a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
+              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
-              <span class="navbar-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
-            </button>
+              </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent2">
+              <div class="collapse navbar-collapse" id="navbarSupportedContent2">
-              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                <li class="nav-item">
+                  <li class="nav-item">
-                  <a class="nav-link active" aria-current="page" href="#">Home</a>
+                    <a class="nav-link active" aria-current="page" href="#">Home</a>
-                </li>
+                  </li>
-                <li class="nav-item">
+                  <li class="nav-item">
-                  <a class="nav-link" href="#">Link</a>
+                    <a class="nav-link" href="#">Link</a>
-                </li>
+                  </li>
-                <li class="nav-item dropdown">
+                  <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                    Dropdown
+                      Dropdown
-                  </a>
+                    </a>
-                  <ul class="dropdown-menu">
+                    <ul class="dropdown-menu">
-                    <li><a class="dropdown-item" href="#">Action</a></li>
+                      <li><a class="dropdown-item" href="#">Action</a></li>
-                    <li><a class="dropdown-item" href="#">Another action</a></li>
+                      <li><a class="dropdown-item" href="#">Another action</a></li>
-                    <li><hr class="dropdown-divider"></li>
+                      <li><hr class="dropdown-divider"></li>
-                    <li><a class="dropdown-item" href="#">Something else here</a></li>
+                      <li><a class="dropdown-item" href="#">Something else here</a></li>
-                  </ul>
+                    </ul>
-                </li>
+                  </li>
-                <li class="nav-item">
+                  <li class="nav-item">
-                  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+                    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
-                </li>
+                  </li>
-              </ul>
+                </ul>
-              <form class="d-flex" role="search">
+                <form class="d-flex" role="search">
-                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-                <button class="btn btn-outline-light" type="submit">Search</button>
+                  <button class="btn btn-outline-light" type="submit">Search</button>
-              </form>
+                </form>
+              </div>
             </div>
-          </div>
+          </nav>
-        </nav>
+          `} />
-        {{< /example >}}
       </div>
     </article>
     <article class="my-3" id="pagination">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Pagination</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/pagination" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/pagination')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <nav aria-label="Pagination example">
           <ul class="pagination pagination-sm">
             <li class="page-item"><a class="page-link" href="#">1</a></li>
@@ -1319,9 +1276,9 @@ body_class: "bg-body-tertiary"
             <li class="page-item"><a class="page-link" href="#">3</a></li>
           </ul>
         </nav>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <nav aria-label="Standard pagination example">
           <ul class="pagination">
             <li class="page-item">
@@ -1339,9 +1296,9 @@ body_class: "bg-body-tertiary"
             </li>
           </ul>
         </nav>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <nav aria-label="Another pagination example">
           <ul class="pagination pagination-lg flex-wrap">
             <li class="page-item disabled">
@@ -1357,21 +1314,21 @@ body_class: "bg-body-tertiary"
             </li>
           </ul>
         </nav>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="popovers">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Popovers</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/popovers" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/popovers')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
           Popover on top
         </button>
@@ -1384,17 +1341,17 @@ body_class: "bg-body-tertiary"
         <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
           Popover on start
         </button>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="progress">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Progress</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/progress" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/progress')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="progress mb-3" role="progressbar" aria-label="Example with label" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
           <div class="progress-bar">0%</div>
         </div>
@@ -1410,9 +1367,9 @@ body_class: "bg-body-tertiary"
         <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
           <div class="progress-bar bg-danger w-100">100%</div>
         </div>
-        {{< /example >}}
+        `} />
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={`
         <div class="progress-stacked">
           <div class="progress" role="progressbar" aria-label="Segment one - default example" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
             <div class="progress-bar"></div>
@@ -1421,13 +1378,13 @@ body_class: "bg-body-tertiary"
             <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
           </div>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="my-3" id="scrollspy">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Scrollspy</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/scrollspy" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/scrollspy')}>Documentation</a>
       </div>
 
       <div>
@@ -1470,42 +1427,34 @@ body_class: "bg-body-tertiary"
     <article class="my-3" id="spinners">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Spinners</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/spinners" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/spinners')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        {{< spinner.inline >}}
+        <div class="spinner-border text-${themeColor.name}" role="status">
-        {{- range (index $.Site.Data "theme-colors") }}
-        <div class="spinner-border text-{{ .name }}" role="status">
           <span class="visually-hidden">Loading...</span>
         </div>
-        {{- end -}}
+        `)} />
-        {{< /spinner.inline >}}
-        {{< /example >}}
 
-        {{< example show_markup="false" >}}
+        <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        {{< spinner.inline >}}
+        <div class="spinner-grow text-${themeColor.name}" role="status">
-        {{- range (index $.Site.Data "theme-colors") }}
-        <div class="spinner-grow text-{{ .name }}" role="status">
           <span class="visually-hidden">Loading...</span>
         </div>
-        {{- end -}}
+        `)} />
-        {{< /spinner.inline >}}
-        {{< /example >}}
       </div>
     </article>
     <article class="my-3" id="toasts">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Toasts</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/toasts" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/toasts')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}}
+        <Example showMarkup={false} class="bg-dark p-5 align-items-center" code={`
         <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
           <div class="toast-header">
-            {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
+            <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
             <strong class="me-auto">Bootstrap</strong>
             <small class="text-body-secondary">11 mins ago</small>
             <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
@@ -1514,23 +1463,23 @@ body_class: "bg-body-tertiary"
             Hello, world! This is a toast message.
           </div>
         </div>
-        {{< /example >}}
+        `} />
       </div>
     </article>
     <article class="mt-3 mb-5 pb-5" id="tooltips">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Tooltips</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/components/tooltips" >}}">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/tooltips')}>Documentation</a>
       </div>
 
       <div>
-        {{< example show_markup="false" class="tooltip-demo" >}}
+        <Example showMarkup={false} class="tooltip-demo" code={`
         <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
         <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on end">Tooltip on end</button>
         <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
         <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on start">Tooltip on start</button>
         <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
-        {{< /example >}}
+        `} />
       </div>
     </article>
   </section>
@@ -1605,3 +1554,4 @@ body_class: "bg-body-tertiary"
     </div>
   </div>
 </div>
+

site-new/src/assets/examples/checkout-rtl/index.astro

@@ -1,19 +1,17 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: مثال إتمام الشراء
+
-direction: rtl
+export const title = 'مثال إتمام الشراء'
-extra_css:
+export const direction = 'rtl'
-  - "../checkout/checkout.css"
+export const extra_css = ['../checkout/checkout.css']
-extra_js:
+export const extra_js = [{ src: '../checkout/checkout.js' }]
-  - src: "../checkout/checkout.js"
+export const body_class = 'bg-body-tertiary'
-    defer: true
-body_class: "bg-body-tertiary"
 ---
 
 <div class="container">
   <main>
     <div class="py-5 text-center">
-      <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
+      <img class="d-block mx-auto mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="72" height="57">
       <h1 class="h2">نموذج إتمام الشراء</h1>
       <p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p>
     </div>
@@ -223,7 +221,7 @@ body_class: "bg-body-tertiary"
     </div>
   </main>
   <footer class="my-5 pt-5 text-body-secondary text-center text-small">
-    <p class="mb-1">&copy; {{< year >}}-2017 اسم الشركة</p>
+    <p class="mb-1">&copy; {new Date().getFullYear()}-2017 اسم الشركة</p>
     <ul class="list-inline">
       <li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li>
       <li class="list-inline-item"><a href="#">اتفاقية الاستخدام</a></li>

site-new/src/assets/examples/checkout/index.astro

@@ -1,18 +1,16 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: Checkout example
+
-extra_css:
+export const title = 'Checkout example'
-  - "checkout.css"
+export const extra_css = ['checkout.css']
-extra_js:
+export const extra_js = [{ src: 'checkout.js' }]
-  - src: "checkout.js"
+export const body_class = 'bg-body-tertiary'
-    defer: true
-body_class: "bg-body-tertiary"
 ---
 
 <div class="container">
   <main>
     <div class="py-5 text-center">
-      <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
+      <img class="d-block mx-auto mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="72" height="57">
       <h1 class="h2">Checkout form</h1>
       <p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
     </div>
@@ -223,7 +221,7 @@ body_class: "bg-body-tertiary"
   </main>
 
   <footer class="my-5 pt-5 text-body-secondary text-center text-small">
-    <p class="mb-1">&copy; 2017–{{< year >}} Company Name</p>
+    <p class="mb-1">&copy; 2017–{new Date().getFullYear()} Company Name</p>
     <ul class="list-inline">
       <li class="list-inline-item"><a href="#">Privacy</a></li>
       <li class="list-inline-item"><a href="#">Terms</a></li>

site-new/src/assets/examples/cover/index.astro

@@ -1,10 +1,8 @@
 ---
-layout: examples
+export const title = 'Cover Template'
-title: Cover Template
+export const extra_css = ['cover.css']
-extra_css:
+export const html_class = 'h-100'
-  - "cover.css"
+export const body_class = 'd-flex h-100 text-center text-bg-dark'
-html_class: "h-100"
-body_class: "d-flex h-100 text-center text-bg-dark"
 ---
 
 <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">

site-new/src/assets/examples/dashboard-rtl/index.astro

@@ -1,15 +1,12 @@
 ---
-layout: examples
+export const title = 'قالب لوحة القيادة'
-title: قالب لوحة القيادة
+export const direction = 'rtl'
-direction: rtl
+export const extra_css = ['../dashboard/dashboard.rtl.css']
-extra_css:
+export const extra_js = [
-  - "../dashboard/dashboard.rtl.css"
+  { src: 'https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js', integrity: 'sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE'},
-extra_js:
+  { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js', integrity: 'sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG'},
-  - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
+  { src: 'dashboard.js'}
-    integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
+]
-    defer: true
-  - src: "dashboard.js"
-    defer: true
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">

site-new/src/assets/examples/dashboard/index.astro

@@ -1,14 +1,11 @@
 ---
-layout: examples
+export const title = 'Dashboard Template'
-title: Dashboard Template
+export const extra_css = ['dashboard.css']
-extra_css:
+export const extra_js = [
-  - "dashboard.css"
+  { src: 'https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js', integrity: 'sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE'},
-extra_js:
+  { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js', integrity: 'sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG'},
-  - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
+  { src: 'dashboard.js'}
-    integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
+]
-    defer: true
-  - src: "dashboard.js"
-    defer: true
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">

site-new/src/assets/examples/dropdowns/index.astro

@@ -1,9 +1,6 @@
 ---
-layout: examples
+export const title = 'Dropdowns'
-title: Dropdowns
+export const extra_css = ['dropdowns.css']
-extra_css:
-  - "dropdowns.css"
-body_class: ""
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">

site-new/src/assets/examples/features/index.astro

@@ -1,9 +1,6 @@
 ---
-layout: examples
+export const title = 'Features'
-title: Features
+export const extra_css = ['features.css']
-extra_css:
-  - "features.css"
-body_class: ""
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">

site-new/src/assets/examples/footers/index.astro

@@ -1,7 +1,5 @@
 ---
-layout: examples
+export const title = 'Footers'
-title: Footers
-body_class: ""
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
@@ -22,7 +20,7 @@ body_class: ""
 
 <div class="container">
   <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
-    <p class="col-md-4 mb-0 text-body-secondary">&copy; {{< year >}} Company, Inc</p>
+    <p class="col-md-4 mb-0 text-body-secondary">&copy; {new Date().getFullYear()} Company, Inc</p>
 
     <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
       <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
@@ -46,7 +44,7 @@ body_class: ""
       <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1" aria-label="Bootstrap">
         <svg class="bi" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
       </a>
-      <span class="mb-3 mb-md-0 text-body-secondary">&copy; {{< year >}} Company, Inc</span>
+      <span class="mb-3 mb-md-0 text-body-secondary">&copy; {new Date().getFullYear()} Company, Inc</span>
     </div>
 
     <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
@@ -68,7 +66,7 @@ body_class: ""
       <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
       <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
     </ul>
-    <p class="text-center text-body-secondary">&copy; {{< year >}} Company, Inc</p>
+    <p class="text-center text-body-secondary">&copy; {new Date().getFullYear()} Company, Inc</p>
   </footer>
 </div>
 
@@ -80,7 +78,7 @@ body_class: ""
       <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
         <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
       </a>
-      <p class="text-body-secondary">&copy; {{< year >}}</p>
+      <p class="text-body-secondary">&copy; {new Date().getFullYear()}</p>
     </div>
 
     <div class="col mb-3">
@@ -175,7 +173,7 @@ body_class: ""
     </div>
 
     <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
-      <p>&copy; {{< year >}} Company, Inc. All rights reserved.</p>
+      <p>&copy; {new Date().getFullYear()} Company, Inc. All rights reserved.</p>
       <ul class="list-unstyled d-flex">
         <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
         <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>

site-new/src/assets/examples/grid/index.astro

@@ -1,9 +1,7 @@
 ---
-layout: examples
+export const title = 'Grid Template'
-title: Grid Template
+export const extra_css = ['grid.css']
-extra_css:
+export const body_class = 'py-4'
-  - "grid.css"
-body_class: "py-4"
 ---
 
 <main>

site-new/src/assets/examples/headers/index.astro

@@ -1,9 +1,6 @@
 ---
-layout: examples
+export const title = 'Headers'
-title: Headers
+export const extra_css = ['headers.css']
-extra_css:
-  - "headers.css"
-body_class: ""
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">

site-new/src/assets/examples/heroes/index.astro

@@ -1,16 +1,15 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: Heroes
+
-extra_css:
+export const title = 'Heroes'
-  - "heroes.css"
+export const extra_css = ['heroes.css']
-body_class: ""
 ---
 
 <main>
   <h1 class="visually-hidden">Heroes examples</h1>
 
   <div class="px-4 py-5 my-5 text-center">
-    <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
+    <img class="d-block mx-auto mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="72" height="57">
     <h1 class="display-5 fw-bold text-body-emphasis">Centered hero</h1>
     <div class="col-lg-6 mx-auto">
       <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>

site-new/src/assets/examples/jumbotron/index.astro

@@ -1,6 +1,5 @@
 ---
-layout: examples
+export const title = 'Jumbotron example'
-title: Jumbotron example
 ---
 
 <main>
@@ -38,7 +37,7 @@ title: Jumbotron example
     </div>
 
     <footer class="pt-3 mt-4 text-body-secondary border-top">
-      &copy; {{< year >}}
+      &copy; {new Date().getFullYear()}
     </footer>
   </div>
 </main>

site-new/src/assets/examples/jumbotrons/index.astro

@@ -1,9 +1,6 @@
 ---
-layout: examples
+export const title = 'Jumbotrons'
-title: Jumbotrons
+export const extra_css = ['jumbotrons.css']
-extra_css:
-  - "jumbotrons.css"
-body_class: ""
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">

site-new/src/assets/examples/list-groups/index.astro

@@ -1,9 +1,6 @@
 ---
-layout: examples
+export const title = 'List groups'
-title: List groups
+export const extra_css = ['list-groups.css']
-extra_css:
-  - "list-groups.css"
-body_class: ""
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">

site-new/src/assets/examples/masonry/index.astro

@@ -1,10 +1,11 @@
 ---
-layout: examples
+export const title = 'Masonry example'
-title: Masonry example
+export const extra_js = [{
-extra_js:
+  src: 'https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js',
-  - src: "https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"
+  integrity: 'sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D',
-    integrity: "sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D"
+  async: true
-    async: true
+}]
+import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 
 <main class="container py-5">
@@ -17,14 +18,14 @@ extra_js:
 &lt;script src=&quot;https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js&quot; integrity=&quot;sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D&quot; crossorigin=&quot;anonymous&quot; async&gt;&lt;/script&gt;
   </code></pre>
 
-  <p>By adding <code>data-masonry='{"percentPosition": true }'</code> to the <code>.row</code> wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.</p>
+  <p>By adding <code>data-masonry='&rcub;"percentPosition": true &rcub;'</code> to the <code>.row</code> wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.</p>
 
   <hr class="my-5">
 
   <div class="row" data-masonry='{"percentPosition": true }'>
     <div class="col-sm-6 col-lg-4 mb-4">
       <div class="card">
-        {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}}
+        <Placeholder width="100%" height="200" class="card-img-top" text="Image cap" />
         <div class="card-body">
           <h5 class="card-title">Card title that wraps to a new line</h5>
           <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -45,7 +46,7 @@ extra_js:
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
       <div class="card">
-        {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}}
+        <Placeholder width="100%" height="200" class="card-img-top" text="Image cap" />
         <div class="card-body">
           <h5 class="card-title">Card title</h5>
           <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -76,7 +77,7 @@ extra_js:
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
       <div class="card">
-        {{< placeholder width="100%" height="260" class="card-img" text="Card image" >}}
+        <Placeholder width="100%" height="260" class="card-img" text="Card image" />
       </div>
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">

site-new/src/assets/examples/modals/index.astro

@@ -1,9 +1,6 @@
 ---
-layout: examples
+export const title = 'Modals'
-title: Modals
+export const extra_css = ['modals.css']
-extra_css:
-  - "modals.css"
-body_class: ""
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">

site-new/src/assets/examples/modals/modals.css

@@ -5,4 +5,3 @@
 .modal-sheet .modal-footer {
   padding-bottom: 2rem;
 }
-

site-new/src/assets/examples/navbar-bottom/index.astro

@@ -1,13 +1,14 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: Bottom navbar example
+
+export const title = 'Bottom navbar example'
 ---
 
 <main class="container">
   <div class="bg-body-tertiary p-5 rounded mt-3">
     <h1>Bottom Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
-    <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
+    <a class="btn btn-lg btn-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs &raquo;</a>
   </div>
 </main>
 <nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">

site-new/src/assets/examples/navbar-fixed/index.astro

@@ -1,8 +1,8 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: Fixed top navbar example
+
-extra_css:
+export const title = 'Fixed top navbar example'
-  - "navbar-fixed.css"
+export const extra_css = ['navbar-fixed.css']
 ---
 
 <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
@@ -35,6 +35,6 @@ extra_css:
   <div class="bg-body-tertiary p-5 rounded">
     <h1>Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
-    <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
+    <a class="btn btn-lg btn-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs &raquo;</a>
   </div>
 </main>

site-new/src/assets/examples/navbar-static/index.astro

@@ -1,8 +1,8 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: Top navbar example
+
-extra_css:
+export const title = 'Top navbar example'
-  - "navbar-static.css"
+export const extra_css = ['navbar-static.css']
 ---
 
 <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
@@ -35,6 +35,6 @@ extra_css:
   <div class="bg-body-tertiary p-5 rounded">
     <h1>Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
-    <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
+    <a class="btn btn-lg btn-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs &raquo;</a>
   </div>
 </main>

site-new/src/assets/examples/navbars-offcanvas/index.astro

@@ -1,8 +1,8 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: Navbar Template
+
-extra_css:
+export const title = 'Navbar Template'
-  - "navbars-offcanvas.css"
+export const extra_css = ['navbars-offcanvas.css']
 ---
 
 <main>
@@ -136,10 +136,10 @@ extra_css:
     <div class="bg-body-tertiary p-5 rounded">
       <div class="col-sm-8 py-5 mx-auto">
         <h1 class="display-5 fw-normal">Navbar with offcanvas examples</h1>
-        <p class="fs-5">This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
+        <p class="fs-5">This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the <a href={getVersionedDocsPath('/examples/navbar-static')}>top</a> and <a href={getVersionedDocsPath('/examples/navbar-fixed')}>fixed top</a> examples.</p>
         <p>From the top down, you'll see a dark navbar, light navbar and a responsive navbar—each with offcanvases built in. Resize your browser window to the large breakpoint to see the toggle for the offcanvas.</p>
         <p>
-          <a class="btn btn-primary" href="{{< docsref "/components/navbar#offcanvas" >}}" role="button">Learn more about offcanvas navbars &raquo;</a>
+          <a class="btn btn-primary" href={getVersionedDocsPath('/components/navbar#offcanvas')} role="button">Learn more about offcanvas navbars &raquo;</a>
         </p>
     </div>
     </div>

site-new/src/assets/examples/navbars/index.astro

@@ -1,8 +1,8 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: Navbar Template
+
-extra_css:
+export const title = 'Navbar Template'
-  - "navbars.css"
+export const extra_css = ['navbars.css']
 ---
 
 <main>
@@ -438,10 +438,10 @@ extra_css:
       <div class="bg-body-tertiaryp-5 rounded">
         <div class="col-sm-8 mx-auto">
           <h1>Navbar examples</h1>
-          <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
+          <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href={getVersionedDocsPath('/examples/navbar-static')}>top</a> and <a href={getVersionedDocsPath('/examples/navbar-fixed')}>fixed top</a> examples.</p>
           <p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
           <p>
-            <a class="btn btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
+            <a class="btn btn-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs &raquo;</a>
           </p>
         </div>
       </div>

site-new/src/assets/examples/offcanvas-navbar/index.astro

@@ -1,13 +1,12 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: Offcanvas navbar template
+
-extra_css:
+export const title = 'Offcanvas navbar template'
-  - "offcanvas-navbar.css"
+export const extra_css = ['offcanvas-navbar.css']
-extra_js:
+export const extra_js = [{ src: 'offcanvas-navbar.js' }]
-  - src: "offcanvas-navbar.js"
+export const body_class = 'bg-body-tertiary'
-    defer: true
+export const aliases = '/docs/[[config:docs_version]]/examples/offcanvas/'
-body_class: "bg-body-tertiary"
+import Placeholder from "@shortcodes/Placeholder.astro"
-aliases: "/docs/5.3/examples/offcanvas/"
 ---
 
 <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
@@ -67,7 +66,7 @@ aliases: "/docs/5.3/examples/offcanvas/"
 
 <main class="container">
   <div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
-    <img class="me-3" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" alt="" width="48" height="38">
+    <img class="me-3" src={getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} alt="" width="48" height="38">
     <div class="lh-1">
       <h1 class="h6 mb-0 text-white lh-1">Bootstrap</h1>
       <small>Since 2011</small>
@@ -77,21 +76,21 @@ aliases: "/docs/5.3/examples/offcanvas/"
   <div class="my-3 p-3 bg-body rounded shadow-sm">
     <h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
     <div class="d-flex text-body-secondary pt-3">
-      {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
+      <Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
       <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
         Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?
       </p>
     </div>
     <div class="d-flex text-body-secondary pt-3">
-      {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}}
+      <Placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" />
       <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
         Some more representative placeholder content, related to this other user. Another status update, perhaps.
       </p>
     </div>
     <div class="d-flex text-body-secondary pt-3">
-      {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}}
+      <Placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" />
       <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
         This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates.
@@ -105,7 +104,7 @@ aliases: "/docs/5.3/examples/offcanvas/"
   <div class="my-3 p-3 bg-body rounded shadow-sm">
     <h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
     <div class="d-flex text-body-secondary pt-3">
-      {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
+      <Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
       <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
           <strong class="text-gray-dark">Full Name</strong>
@@ -115,7 +114,7 @@ aliases: "/docs/5.3/examples/offcanvas/"
       </div>
     </div>
     <div class="d-flex text-body-secondary pt-3">
-      {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
+      <Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
       <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
           <strong class="text-gray-dark">Full Name</strong>
@@ -125,7 +124,7 @@ aliases: "/docs/5.3/examples/offcanvas/"
       </div>
     </div>
     <div class="d-flex text-body-secondary pt-3">
-      {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
+      <Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
       <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
           <strong class="text-gray-dark">Full Name</strong>

site-new/src/assets/examples/pricing/index.astro

@@ -1,8 +1,8 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: Pricing example
+
-extra_css:
+export const title = 'Pricing example'
-  - "pricing.css"
+export const extra_css = ['pricing.css']
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
@@ -149,8 +149,8 @@ extra_css:
   <footer class="pt-4 my-md-5 pt-md-5 border-top">
     <div class="row">
       <div class="col-12 col-md">
-        <img class="mb-2" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19">
+        <img class="mb-2" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="24" height="19">
-        <small class="d-block mb-3 text-body-secondary">&copy; 2017–{{< year >}}</small>
+        <small class="d-block mb-3 text-body-secondary">&copy; 2017–{new Date().getFullYear()}</small>
       </div>
       <div class="col-6 col-md">
         <h5>Features</h5>

site-new/src/assets/examples/product/index.astro

@@ -1,8 +1,6 @@
 ---
-layout: examples
+export const title = 'Product example'
-title: Product example
+export const extra_css = ['product.css']
-extra_css:
-  - "product.css"
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
@@ -145,7 +143,7 @@ extra_css:
   <div class="row">
     <div class="col-12 col-md">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
-      <small class="d-block mb-3 text-body-secondary">&copy; 2017–{{< year >}}</small>
+      <small class="d-block mb-3 text-body-secondary">&copy; 2017–{new Date().getFullYear()}</small>
     </div>
     <div class="col-6 col-md">
       <h5>Features</h5>

site-new/src/assets/examples/sidebars/index.astro

@@ -1,12 +1,7 @@
 ---
-layout: examples
+export const title = 'Sidebars'
-title: Sidebars
+export const extra_css = ['sidebars.css']
-extra_css:
+export const extra_js = [{src: 'sidebars.js'}]
-  - "sidebars.css"
-extra_js:
-  - src: "sidebars.js"
-    defer: true
-body_class: ""
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">

site-new/src/assets/examples/sign-in/index.astro

@@ -1,14 +1,14 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: Signin Template
+
-extra_css:
+export const title = 'Signin Template'
-  - "sign-in.css"
+export const extra_css = ['sign-in.css']
-body_class: "d-flex align-items-center py-4 bg-body-tertiary"
+export const body_class = 'text-center'
 ---
 
 <main class="form-signin w-100 m-auto">
   <form>
-    <img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
+    <img class="mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="72" height="57">
     <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
 
     <div class="form-floating">
@@ -27,6 +27,6 @@ body_class: "d-flex align-items-center py-4 bg-body-tertiary"
       </label>
     </div>
     <button class="btn btn-primary w-100 py-2" type="submit">Sign in</button>
-    <p class="mt-5 mb-3 text-body-secondary">&copy; 2017–{{< year >}}</p>
+    <p class="mt-5 mb-3 text-body-secondary">&copy; 2017–{new Date().getFullYear()}</p>
   </form>
 </main>

site-new/src/assets/examples/starter-template/index.astro

@@ -1,6 +1,7 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: Starter Template
+
+export const title = 'Starter Template'
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
@@ -26,7 +27,7 @@ title: Starter Template
     <p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
 
     <div class="mb-5">
-      <a href="{{< docsref "/examples" >}}" class="btn btn-primary btn-lg px-4">Download examples</a>
+      <a href={getVersionedDocsPath('/examples')} class="btn btn-primary btn-lg px-4">Download examples</a>
     </div>
 
     <hr class="col-3 col-md-2 mb-5">
@@ -68,31 +69,31 @@ title: Starter Template
         <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
         <ul class="list-unstyled ps-0">
           <li>
-            <a class="icon-link mb-1" href="{{< docsref "/getting-started/introduction" >}}">
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/introduction')}>
               <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap quick start guide
             </a>
           </li>
           <li>
-            <a class="icon-link mb-1" href="{{< docsref "/getting-started/webpack" >}}">
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/webpack')}>
               <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Webpack guide
             </a>
           </li>
           <li>
-            <a class="icon-link mb-1" href="{{< docsref "/getting-started/parcel" >}}">
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/parcel')}>
               <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Parcel guide
             </a>
           </li>
           <li>
-            <a class="icon-link mb-1" href="{{< docsref "/getting-started/vite" >}}">
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/vite')}>
               <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Vite guide
             </a>
           </li>
           <li>
-            <a class="icon-link mb-1" href="{{< docsref "/getting-started/contribute" >}}">
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/contribute')}>
               <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Contributing to Bootstrap
             </a>
@@ -102,6 +103,6 @@ title: Starter Template
     </div>
   </main>
   <footer class="pt-5 my-5 text-body-secondary border-top">
-    Created by the Bootstrap team &middot; &copy; {{< year >}}
+    Created by the Bootstrap team &middot; &copy; {new Date().getFullYear()}
   </footer>
 </div>

site-new/src/assets/examples/sticky-footer-navbar/index.astro

@@ -1,10 +1,10 @@
 ---
-layout: examples
+import { getVersionedDocsPath } from '@libs/path'
-title: Sticky Footer Navbar Template
+
-extra_css:
+export const title = 'Sticky Footer Navbar Template'
-  - "sticky-footer-navbar.css"
+export const extra_css = ['sticky-footer-navbar.css']
-html_class: "h-100"
+export const html_class = 'h-100'
-body_class: "d-flex flex-column h-100"
+export const body_class = 'd-flex flex-column h-100'
 ---
 
 <header>
@@ -41,7 +41,7 @@ body_class: "d-flex flex-column h-100"
   <div class="container">
     <h1 class="mt-5">Sticky footer with fixed navbar</h1>
     <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code class="small">padding-top: 60px;</code> on the <code class="small">main &gt; .container</code>.</p>
-    <p>Back to <a href="{{< docsref "/examples/sticky-footer" >}}">the default sticky footer</a> minus the navbar.</p>
+    <p>Back to <a href={getVersionedDocsPath('/examples/sticky-footer')}>the default sticky footer</a> minus the navbar.</p>
   </div>
 </main>