From 443542231c679f57af2be1541399540a578f28a7 Mon Sep 17 00:00:00 2001
From: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Date: Mon, 20 Feb 2023 19:49:46 +0100
Subject: [PATCH] Colors (#10)
* fix: remove useless astro script and fix package.json indentation
* fix: remove default template content
* feat: refactor layouts
* feat: move new site src & dist folders
* feat: load configm from config.yml
* feat: add prettier
* fix: config type
* feat: add astro check
* feat: add typecheck to lint script
* fix: eqeqeq
* feat: rename and move DocsNavbar & DocsVersions
* feat: move skippy
* feat: move scripts & icons
* feat: add head component
* feat: add header component
* fix: stricten layout type in components
* fix: add missing docs layout
* feat: add canonical url
* feat: refactor navigation links
* chore: add todo
* refactor: production check to avoid a string
* refactor: versioned docs path
* fix: docsearch doc version
* feat: page title
* chore: add todo
* feat: add social
* chore: add todos
* feat: load styles
* fix: disable prettier in base layout
* chore: add todos
* refactor: move style imports
---
.gitignore | 3 +
.prettierignore | 4 +
astro.config.mjs | 10 +-
package-lock.json | 93 ++--
package.json | 15 +-
site-new/.prettierrc.json | 8 +
site-new/components/Icons.astro | 148 +++++++
.../components}/Scripts.astro | 39 +-
site-new/components/head/Analytics.astro | 17 +
.../components/head/Favicons.astro | 15 +-
site-new/components/head/Head.astro | 61 +++
site-new/components/head/Social.astro | 34 ++
.../components/head/Stylesheet.astro | 35 +-
site-new/components/header/Header.astro | 16 +
site-new/components/header/LinkItem.astro | 24 +
site-new/components/header/Navigation.astro | 197 +++++++++
site-new/components/header/Skippy.astro | 22 +
.../components/header/Versions.astro | 21 +-
{src => site-new}/env.d.ts | 0
site-new/layouts/BaseLayout.astro | 57 +++
site-new/layouts/DocsLayout.astro | 5 +
site-new/libs/config.ts | 55 +++
site-new/libs/layout.ts | 3 +
site-new/pages/404.astro | 5 +
site-new/pages/docs/index.astro | 5 +
site-new/pages/index.astro | 5 +
site-new/pages/markdown.md | 8 +
site-new/scss/_ads.scss | 38 ++
site-new/scss/_anchor.scss | 21 +
site-new/scss/_brand.scss | 60 +++
site-new/scss/_buttons.scss | 52 +++
site-new/scss/_callouts.scss | 40 ++
site-new/scss/_clipboard-js.scss | 44 ++
site-new/scss/_colors.scss | 156 +++++++
site-new/scss/_component-examples.scss | 411 ++++++++++++++++++
site-new/scss/_content.scss | 168 +++++++
site-new/scss/_footer.scss | 16 +
site-new/scss/_layout.scss | 57 +++
site-new/scss/_masthead.scss | 108 +++++
site-new/scss/_navbar.scss | 129 ++++++
site-new/scss/_placeholder-img.scss | 15 +
site-new/scss/_scrolling.scss | 5 +
site-new/scss/_search.scss | 172 ++++++++
site-new/scss/_sidebar.scss | 64 +++
site-new/scss/_skippy.scss | 7 +
site-new/scss/_syntax.scss | 135 ++++++
site-new/scss/_toc.scss | 93 ++++
site-new/scss/_variables.scss | 37 ++
site-new/scss/docs.scss | 59 +++
src/components/Card.astro | 63 ---
src/components/body/DocsNavbar.astro | 151 -------
src/components/body/Icons.astro | 86 ----
src/components/body/Skippy.astro | 14 -
src/components/head/Analytics.astro | 12 -
src/components/head/Social.astro | 44 --
src/layouts/Layout.astro | 84 ----
src/libs/config.ts | 106 -----
src/pages/index.astro | 82 ----
58 files changed, 2718 insertions(+), 716 deletions(-)
create mode 100644 .prettierignore
create mode 100644 site-new/.prettierrc.json
create mode 100644 site-new/components/Icons.astro
rename {src/components/body => site-new/components}/Scripts.astro (77%)
create mode 100644 site-new/components/head/Analytics.astro
rename {src => site-new}/components/head/Favicons.astro (72%)
create mode 100644 site-new/components/head/Head.astro
create mode 100644 site-new/components/head/Social.astro
rename {src => site-new}/components/head/Stylesheet.astro (57%)
create mode 100644 site-new/components/header/Header.astro
create mode 100644 site-new/components/header/LinkItem.astro
create mode 100644 site-new/components/header/Navigation.astro
create mode 100644 site-new/components/header/Skippy.astro
rename src/components/body/DocsVersions.astro => site-new/components/header/Versions.astro (81%)
rename {src => site-new}/env.d.ts (100%)
create mode 100644 site-new/layouts/BaseLayout.astro
create mode 100644 site-new/layouts/DocsLayout.astro
create mode 100644 site-new/libs/config.ts
create mode 100644 site-new/libs/layout.ts
create mode 100644 site-new/pages/404.astro
create mode 100644 site-new/pages/docs/index.astro
create mode 100644 site-new/pages/index.astro
create mode 100644 site-new/pages/markdown.md
create mode 100644 site-new/scss/_ads.scss
create mode 100644 site-new/scss/_anchor.scss
create mode 100644 site-new/scss/_brand.scss
create mode 100644 site-new/scss/_buttons.scss
create mode 100644 site-new/scss/_callouts.scss
create mode 100644 site-new/scss/_clipboard-js.scss
create mode 100644 site-new/scss/_colors.scss
create mode 100644 site-new/scss/_component-examples.scss
create mode 100644 site-new/scss/_content.scss
create mode 100644 site-new/scss/_footer.scss
create mode 100644 site-new/scss/_layout.scss
create mode 100644 site-new/scss/_masthead.scss
create mode 100644 site-new/scss/_navbar.scss
create mode 100644 site-new/scss/_placeholder-img.scss
create mode 100644 site-new/scss/_scrolling.scss
create mode 100644 site-new/scss/_search.scss
create mode 100644 site-new/scss/_sidebar.scss
create mode 100644 site-new/scss/_skippy.scss
create mode 100644 site-new/scss/_syntax.scss
create mode 100644 site-new/scss/_toc.scss
create mode 100644 site-new/scss/_variables.scss
create mode 100644 site-new/scss/docs.scss
delete mode 100644 src/components/Card.astro
delete mode 100644 src/components/body/DocsNavbar.astro
delete mode 100644 src/components/body/Icons.astro
delete mode 100644 src/components/body/Skippy.astro
delete mode 100644 src/components/head/Analytics.astro
delete mode 100644 src/components/head/Social.astro
delete mode 100644 src/layouts/Layout.astro
delete mode 100644 src/libs/config.ts
delete mode 100644 src/pages/index.astro
diff --git a/.gitignore b/.gitignore
index 2215d636addf..57e4cf5320f3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,6 @@ Thumbs.db
# Folders to ignore
/js/coverage/
/node_modules/
+
+# TODO(HiDeoo) Rename or remove later
+/dist-site-new
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000000..a45f17d87e32
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,4 @@
+# Prettier is only used for the webite
+
+# TODO(HiDeoo) rename later
+site-new/scss
diff --git a/astro.config.mjs b/astro.config.mjs
index 882e6515a67e..86e2647ad5f8 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,4 +1,10 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
// https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+ // TODO(HiDeoo) Rename later
+ srcDir: "./site-new",
+ // TODO(HiDeoo) Rename or remove later
+ outDir: "./dist-site-new",
+ site: "https://getbootstrap.com/",
+});
diff --git a/package-lock.json b/package-lock.json
index 8738b580b406..f108ac891b41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
"@rollup/plugin-commonjs": "^24.0.1",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-replace": "^5.0.2",
+ "@types/js-yaml": "^4.0.5",
"astro": "^2.0.14",
"autoprefixer": "^10.4.13",
"bundlewatch": "^0.3.3",
@@ -45,6 +46,7 @@
"ip": "^2.0.0",
"jasmine": "^4.5.0",
"jquery": "^3.6.3",
+ "js-yaml": "^4.1.0",
"karma": "^6.4.1",
"karma-browserstack-launcher": "1.4.0",
"karma-chrome-launcher": "^3.1.1",
@@ -59,6 +61,8 @@
"npm-run-all": "^4.1.5",
"postcss": "^8.4.21",
"postcss-cli": "^10.1.0",
+ "prettier": "^2.8.4",
+ "prettier-plugin-astro": "^0.8.0",
"rollup": "^3.15.0",
"rollup-plugin-istanbul": "^4.0.0",
"rtlcss": "^4.0.0",
@@ -68,7 +72,8 @@
"stylelint": "^14.16.1",
"stylelint-config-twbs-bootstrap": "^7.0.0",
"terser": "5.16.0",
- "vnu-jar": "22.9.29"
+ "vnu-jar": "22.9.29",
+ "zod": "^3.20.6"
},
"peerDependencies": {
"@popperjs/core": "^2.11.6"
@@ -116,6 +121,28 @@
"astro-ls": "bin/nodeServer.js"
}
},
+ "node_modules/@astrojs/language-server/node_modules/@astrojs/compiler": {
+ "version": "0.31.4",
+ "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.31.4.tgz",
+ "integrity": "sha512-6bBFeDTtPOn4jZaiD3p0f05MEGQL9pw2Zbfj546oFETNmjJFWO3nzHz6/m+P53calknCvyVzZ5YhoBLIvzn5iw==",
+ "dev": true
+ },
+ "node_modules/@astrojs/language-server/node_modules/prettier-plugin-astro": {
+ "version": "0.7.2",
+ "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.7.2.tgz",
+ "integrity": "sha512-mmifnkG160BtC727gqoimoxnZT/dwr8ASxpoGGl6EHevhfblSOeu+pwH1LAm5Qu1MynizktztFujHHaijLCkww==",
+ "dev": true,
+ "dependencies": {
+ "@astrojs/compiler": "^0.31.3",
+ "prettier": "^2.7.1",
+ "sass-formatter": "^0.7.5",
+ "synckit": "^0.8.4"
+ },
+ "engines": {
+ "node": "^14.15.0 || >=16.0.0",
+ "pnpm": ">=7.14.0"
+ }
+ },
"node_modules/@astrojs/language-server/node_modules/source-map": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -2807,6 +2834,12 @@
"@types/unist": "*"
}
},
+ "node_modules/@types/js-yaml": {
+ "version": "4.0.5",
+ "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
+ "integrity": "sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==",
+ "dev": true
+ },
"node_modules/@types/json5": {
"version": "0.0.29",
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -11643,13 +11676,13 @@
}
},
"node_modules/prettier-plugin-astro": {
- "version": "0.7.2",
- "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.7.2.tgz",
- "integrity": "sha512-mmifnkG160BtC727gqoimoxnZT/dwr8ASxpoGGl6EHevhfblSOeu+pwH1LAm5Qu1MynizktztFujHHaijLCkww==",
+ "version": "0.8.0",
+ "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.8.0.tgz",
+ "integrity": "sha512-kt9wk33J7HvFGwFaHb8piwy4zbUmabC8Nu+qCw493jhe96YkpjscqGBPy4nJ9TPy9pd7+kEx1zM81rp+MIdrXg==",
"dev": true,
"dependencies": {
- "@astrojs/compiler": "^0.31.3",
- "prettier": "^2.7.1",
+ "@astrojs/compiler": "^1.0.1",
+ "prettier": "^2.8.3",
"sass-formatter": "^0.7.5",
"synckit": "^0.8.4"
},
@@ -11658,12 +11691,6 @@
"pnpm": ">=7.14.0"
}
},
- "node_modules/prettier-plugin-astro/node_modules/@astrojs/compiler": {
- "version": "0.31.4",
- "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.31.4.tgz",
- "integrity": "sha512-6bBFeDTtPOn4jZaiD3p0f05MEGQL9pw2Zbfj546oFETNmjJFWO3nzHz6/m+P53calknCvyVzZ5YhoBLIvzn5iw==",
- "dev": true
- },
"node_modules/pretty-format": {
"version": "29.3.1",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.3.1.tgz",
@@ -15153,6 +15180,24 @@
"vscode-uri": "^3.0.3"
},
"dependencies": {
+ "@astrojs/compiler": {
+ "version": "0.31.4",
+ "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.31.4.tgz",
+ "integrity": "sha512-6bBFeDTtPOn4jZaiD3p0f05MEGQL9pw2Zbfj546oFETNmjJFWO3nzHz6/m+P53calknCvyVzZ5YhoBLIvzn5iw==",
+ "dev": true
+ },
+ "prettier-plugin-astro": {
+ "version": "0.7.2",
+ "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.7.2.tgz",
+ "integrity": "sha512-mmifnkG160BtC727gqoimoxnZT/dwr8ASxpoGGl6EHevhfblSOeu+pwH1LAm5Qu1MynizktztFujHHaijLCkww==",
+ "dev": true,
+ "requires": {
+ "@astrojs/compiler": "^0.31.3",
+ "prettier": "^2.7.1",
+ "sass-formatter": "^0.7.5",
+ "synckit": "^0.8.4"
+ }
+ },
"source-map": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -16971,6 +17016,12 @@
"@types/unist": "*"
}
},
+ "@types/js-yaml": {
+ "version": "4.0.5",
+ "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
+ "integrity": "sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==",
+ "dev": true
+ },
"@types/json5": {
"version": "0.0.29",
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -23402,23 +23453,15 @@
"dev": true
},
"prettier-plugin-astro": {
- "version": "0.7.2",
- "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.7.2.tgz",
- "integrity": "sha512-mmifnkG160BtC727gqoimoxnZT/dwr8ASxpoGGl6EHevhfblSOeu+pwH1LAm5Qu1MynizktztFujHHaijLCkww==",
+ "version": "0.8.0",
+ "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.8.0.tgz",
+ "integrity": "sha512-kt9wk33J7HvFGwFaHb8piwy4zbUmabC8Nu+qCw493jhe96YkpjscqGBPy4nJ9TPy9pd7+kEx1zM81rp+MIdrXg==",
"dev": true,
"requires": {
- "@astrojs/compiler": "^0.31.3",
- "prettier": "^2.7.1",
+ "@astrojs/compiler": "^1.0.1",
+ "prettier": "^2.8.3",
"sass-formatter": "^0.7.5",
"synckit": "^0.8.4"
- },
- "dependencies": {
- "@astrojs/compiler": {
- "version": "0.31.4",
- "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.31.4.tgz",
- "integrity": "sha512-6bBFeDTtPOn4jZaiD3p0f05MEGQL9pw2Zbfj546oFETNmjJFWO3nzHz6/m+P53calknCvyVzZ5YhoBLIvzn5iw==",
- "dev": true
- }
}
},
"pretty-format": {
diff --git a/package.json b/package.json
index e297a5343450..73ac062a7aab 100644
--- a/package.json
+++ b/package.json
@@ -100,10 +100,10 @@
"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\"",
"astro-dev": "astro dev",
- "astro-start": "astro dev",
- "astro-build": "astro build",
- "astro-preview": "astro preview",
- "astro": "astro"
+ "astro-start": "astro dev",
+ "astro-build": "astro build",
+ "astro-preview": "astro preview",
+ "astro-lint": "prettier --config site-new/.prettierrc.json -c --cache site-new && astro check && tsc --noEmit"
},
"peerDependencies": {
"@popperjs/core": "^2.11.6"
@@ -117,6 +117,7 @@
"@rollup/plugin-commonjs": "^24.0.1",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-replace": "^5.0.2",
+ "@types/js-yaml": "^4.0.5",
"astro": "^2.0.14",
"autoprefixer": "^10.4.13",
"bundlewatch": "^0.3.3",
@@ -135,6 +136,7 @@
"ip": "^2.0.0",
"jasmine": "^4.5.0",
"jquery": "^3.6.3",
+ "js-yaml": "^4.1.0",
"karma": "^6.4.1",
"karma-browserstack-launcher": "1.4.0",
"karma-chrome-launcher": "^3.1.1",
@@ -149,6 +151,8 @@
"npm-run-all": "^4.1.5",
"postcss": "^8.4.21",
"postcss-cli": "^10.1.0",
+ "prettier": "^2.8.4",
+ "prettier-plugin-astro": "^0.8.0",
"rollup": "^3.15.0",
"rollup-plugin-istanbul": "^4.0.0",
"rtlcss": "^4.0.0",
@@ -158,7 +162,8 @@
"stylelint": "^14.16.1",
"stylelint-config-twbs-bootstrap": "^7.0.0",
"terser": "5.16.0",
- "vnu-jar": "22.9.29"
+ "vnu-jar": "22.9.29",
+ "zod": "^3.20.6"
},
"files": [
"dist/{css,js}/*.{css,js,map}",
diff --git a/site-new/.prettierrc.json b/site-new/.prettierrc.json
new file mode 100644
index 000000000000..8a10c880d955
--- /dev/null
+++ b/site-new/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+ "$schema": "http://json.schemastore.org/prettierrc",
+ "arrowParens": "always",
+ "printWidth": 120,
+ "semi": false,
+ "singleQuote": true,
+ "trailingComma": "es5"
+}
diff --git a/site-new/components/Icons.astro b/site-new/components/Icons.astro
new file mode 100644
index 000000000000..6cf135d0da50
--- /dev/null
+++ b/site-new/components/Icons.astro
@@ -0,0 +1,148 @@
+---
+---
+
+
diff --git a/src/components/body/Scripts.astro b/site-new/components/Scripts.astro
similarity index 77%
rename from src/components/body/Scripts.astro
rename to site-new/components/Scripts.astro
index 47193b8e507d..ac69ae808f2b 100644
--- a/src/components/body/Scripts.astro
+++ b/site-new/components/Scripts.astro
@@ -1,37 +1,46 @@
---
-// TODO: avoid to copy/paste props from Layout.astro
-export interface Props {
- description: string;
- layout: string; // TODO: better handling? It represents .Page.Layout // At least should be a Type
- robots: string;
+import type { Layout } from '../libs/layout'
+
+interface Props {
+ layout: Layout
}
-const { description, layout, robots } = Astro.props;
+const { layout } = Astro.props
---
-{
-import.meta.env.MODE == "production"
- ?
- :
+-->{
+ import.meta.env.PROD ? (
+
+ ) : (
+
+ )
}
{
-layout == "docs" &&
-
-
+ layout === 'docs' && (
+ <>
+
+
+ >
+ )
}
\ No newline at end of file
+-->
diff --git a/site-new/components/head/Analytics.astro b/site-new/components/head/Analytics.astro
new file mode 100644
index 000000000000..d3f9888f555d
--- /dev/null
+++ b/site-new/components/head/Analytics.astro
@@ -0,0 +1,17 @@
+---
+---
+
+
+
+
+
diff --git a/src/components/head/Favicons.astro b/site-new/components/head/Favicons.astro
similarity index 72%
rename from src/components/head/Favicons.astro
rename to site-new/components/head/Favicons.astro
index d47ffb0d6233..71cd5b1a516a 100644
--- a/src/components/head/Favicons.astro
+++ b/site-new/components/head/Favicons.astro
@@ -1,18 +1,9 @@
---
-// TODO: avoid to copy/paste props from Layout.astro
-export interface Props {
- description: string;
- layout: string; // TODO: better handling? It represents .Page.Layout // At least should be a Type
- robots: string;
-}
-
-const { description, layout, robots } = Astro.props;
---
-
-
-
\ No newline at end of file
+ -->
diff --git a/site-new/components/head/Head.astro b/site-new/components/head/Head.astro
new file mode 100644
index 000000000000..19ec796bed07
--- /dev/null
+++ b/site-new/components/head/Head.astro
@@ -0,0 +1,61 @@
+---
+import { getConfig, getVersionedDocsPath } from '../../libs/config'
+import type { Layout } from '../../libs/layout'
+import Stylesheet from './Stylesheet.astro'
+import Favicons from './Favicons.astro'
+import Social from './Social.astro'
+import Analytics from './Analytics.astro'
+
+interface Props {
+ description: string
+ layout: Layout
+ robots: string | undefined
+ thumbnail: string
+ title: string
+}
+
+const { description, layout, robots, thumbnail, title } = Astro.props
+
+const canonicalUrl = new URL(Astro.url.pathname, Astro.site)
+
+const isHome = Astro.url.pathname === '/'
+const pageTitle = isHome
+ ? `${getConfig().title} · ${getConfig().params.subtitle}`
+ : `${title} · ${getConfig().title} v${getConfig().params.docs_version}`
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{pageTitle}
+
+
+
+{layout === 'docs' && }
+{robots && }
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/site-new/components/head/Social.astro b/site-new/components/head/Social.astro
new file mode 100644
index 000000000000..54afd2c61b96
--- /dev/null
+++ b/site-new/components/head/Social.astro
@@ -0,0 +1,34 @@
+---
+import { getConfig, getVersionedDocsPath } from '../../libs/config'
+
+interface Props {
+ description: string
+ thumbnail: string
+ title: string
+}
+
+const { description, thumbnail, title } = Astro.props
+
+// TODO(HiDeoo) Test when assets are figured out
+const socialImageUrl = new URL(getVersionedDocsPath(`assets/${thumbnail}`), Astro.site)
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/head/Stylesheet.astro b/site-new/components/head/Stylesheet.astro
similarity index 57%
rename from src/components/head/Stylesheet.astro
rename to site-new/components/head/Stylesheet.astro
index ee149b82ae18..77a7ea0c5d4b 100644
--- a/src/components/head/Stylesheet.astro
+++ b/site-new/components/head/Stylesheet.astro
@@ -1,35 +1,45 @@
---
-// TODO: avoid to copy/paste props from Layout.astro
-export interface Props {
- description: string;
- layout: string; // TODO: better handling? It represents .Page.Layout // At least should be a Type
- robots: string;
+import type { Layout } from '../../libs/layout'
+
+interface Props {
+ layout: Layout
}
-const { description, layout, robots } = Astro.props;
+const { layout } = Astro.props
---
-{layout == 'docs' && }
+
+{layout === 'docs' && }
-
+
\ No newline at end of file
+-->
+
+
+
diff --git a/site-new/components/header/Header.astro b/site-new/components/header/Header.astro
new file mode 100644
index 000000000000..57857af5c653
--- /dev/null
+++ b/site-new/components/header/Header.astro
@@ -0,0 +1,16 @@
+---
+import type { Layout } from '../../libs/layout'
+import Skippy from './Skippy.astro'
+import Icons from '../Icons.astro'
+import Navigation from './Navigation.astro'
+
+interface Props {
+ layout: Layout
+}
+
+const { layout } = Astro.props
+---
+
+
+
+
diff --git a/site-new/components/header/LinkItem.astro b/site-new/components/header/LinkItem.astro
new file mode 100644
index 000000000000..f8571a538b32
--- /dev/null
+++ b/site-new/components/header/LinkItem.astro
@@ -0,0 +1,24 @@
+---
+interface Props {
+ active?: boolean
+ href: string
+ rel?: HTMLAnchorElement['rel']
+ target?: HTMLAnchorElement['target']
+ text: string
+}
+
+const { active, text, ...props } = Astro.props
+
+// TODO(HiDeoo) Test onclick handlers
+---
+
+
+
+ {text}
+
+
diff --git a/site-new/components/header/Navigation.astro b/site-new/components/header/Navigation.astro
new file mode 100644
index 000000000000..051bba3cf04a
--- /dev/null
+++ b/site-new/components/header/Navigation.astro
@@ -0,0 +1,197 @@
+---
+import { getConfig, getVersionedDocsPath } from '../../libs/config'
+import type { Layout } from '../../libs/layout'
+import LinkItem from './LinkItem.astro'
+import Versions from './Versions.astro'
+
+interface Props {
+ layout: Layout
+ title?: string // TODO: warning should be linked to .Page.title
+}
+
+const { layout, title } = Astro.props
+---
+
+
diff --git a/site-new/components/header/Skippy.astro b/site-new/components/header/Skippy.astro
new file mode 100644
index 000000000000..aa520d9d13c1
--- /dev/null
+++ b/site-new/components/header/Skippy.astro
@@ -0,0 +1,22 @@
+---
+import type { Layout } from '../../libs/layout'
+
+interface Props {
+ layout: Layout
+}
+
+const { layout } = Astro.props
+---
+
+
diff --git a/src/components/body/DocsVersions.astro b/site-new/components/header/Versions.astro
similarity index 81%
rename from src/components/body/DocsVersions.astro
rename to site-new/components/header/Versions.astro
index 7f929f3e27ba..671625a4545d 100644
--- a/src/components/body/DocsVersions.astro
+++ b/site-new/components/header/Versions.astro
@@ -1,6 +1,7 @@
---
-import { config } from "../../libs/config";
+import { getConfig } from '../../libs/config'
---
+
-
diff --git a/src/env.d.ts b/site-new/env.d.ts
similarity index 100%
rename from src/env.d.ts
rename to site-new/env.d.ts
diff --git a/site-new/layouts/BaseLayout.astro b/site-new/layouts/BaseLayout.astro
new file mode 100644
index 000000000000..cf8c6e0115de
--- /dev/null
+++ b/site-new/layouts/BaseLayout.astro
@@ -0,0 +1,57 @@
+---
+import { getConfig } from '../libs/config'
+import type { Layout } from '../libs/layout'
+import Head from '../components/head/Head.astro'
+import Header from '../components/header/Header.astro'
+import Scripts from '../components/Scripts.astro'
+
+interface Props {
+ frontmatter?: {
+ description?: string
+ thumbnail?: string
+ title?: string
+ }
+ layout?: Layout
+ robots?: string
+}
+
+const { frontmatter, layout, robots } = Astro.props
+
+// TODO(HiDeoo) This should probably be refactored to use a content collection when I get a better understanding of the
+// structure of the docs.
+const title = frontmatter?.title ?? getConfig().title
+const description = frontmatter?.description ?? getConfig().params.description
+const thumbnail = frontmatter?.thumbnail ? `img/${frontmatter.thumbnail}` : 'brand/bootstrap-social.png'
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/site-new/layouts/DocsLayout.astro b/site-new/layouts/DocsLayout.astro
new file mode 100644
index 000000000000..32276fbbcd0e
--- /dev/null
+++ b/site-new/layouts/DocsLayout.astro
@@ -0,0 +1,5 @@
+---
+import BaseLayout from './BaseLayout.astro'
+---
+
+
diff --git a/site-new/libs/config.ts b/site-new/libs/config.ts
new file mode 100644
index 000000000000..56544511d192
--- /dev/null
+++ b/site-new/libs/config.ts
@@ -0,0 +1,55 @@
+import fs from 'node:fs'
+import yaml from 'js-yaml'
+import { z } from 'zod'
+
+let config: Config | undefined
+
+// A helper to get the config loaded fom the `config.yml` file. If the config does not match the `configSchema` below,
+// an error is thrown to indicate that the config file is invalid and some action is required.
+export function getConfig(): Config {
+ if (config) {
+ // Returns the config if it has already been loaded.
+ return config
+ }
+
+ try {
+ // Load the config from the `config.yml` file.
+ const rawConfig = yaml.load(fs.readFileSync('./config.yml', 'utf8'))
+
+ // Parse the config using the config schema to validate its content and get back a fully typed config object.
+ config = configSchema.parse(rawConfig)
+
+ return config
+ } catch (error) {
+ if (error instanceof z.ZodError) {
+ console.error('The `config.yml` file content is invalid:', error.issues)
+ }
+
+ throw new Error('Failed to load configuration from `config.yml`', { cause: error })
+ }
+}
+
+export function getVersionedDocsPath(path: string): string {
+ const { docs_version } = getConfig().params
+
+ return `/docs/${docs_version}/${path.replace(/^\//, '')}`
+}
+
+// The config schema used to validate the config file content and ensure all values required by the site are valid.
+const configSchema = z.object({
+ params: z.object({
+ authors: z.string(),
+ blog: z.string().url(),
+ description: z.string(),
+ docs_version: z.string().regex(/^\d+\.\d+$/),
+ github_org: z.string().url(),
+ icons: z.string().url(),
+ opencollective: z.string().url(),
+ subtitle: z.string(),
+ themes: z.string().url(),
+ twitter: z.string(),
+ }),
+ title: z.string(),
+})
+
+type Config = z.infer
diff --git a/site-new/libs/layout.ts b/site-new/libs/layout.ts
new file mode 100644
index 000000000000..24a208015c28
--- /dev/null
+++ b/site-new/libs/layout.ts
@@ -0,0 +1,3 @@
+// TODO(HiDeoo) Not sure yet if a union of literal strings is the best way to handle this, need to see more of the
+// current usage in the existing docs but it's at least strictly typed for now.
+export type Layout = 'docs' | 'examples' | undefined
diff --git a/site-new/pages/404.astro b/site-new/pages/404.astro
new file mode 100644
index 000000000000..ef9148831278
--- /dev/null
+++ b/site-new/pages/404.astro
@@ -0,0 +1,5 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+---
+
+
diff --git a/site-new/pages/docs/index.astro b/site-new/pages/docs/index.astro
new file mode 100644
index 000000000000..f14bb44c035e
--- /dev/null
+++ b/site-new/pages/docs/index.astro
@@ -0,0 +1,5 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro'
+---
+
+
diff --git a/site-new/pages/index.astro b/site-new/pages/index.astro
new file mode 100644
index 000000000000..014b0b31d94a
--- /dev/null
+++ b/site-new/pages/index.astro
@@ -0,0 +1,5 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+---
+
+
diff --git a/site-new/pages/markdown.md b/site-new/pages/markdown.md
new file mode 100644
index 000000000000..1b67d7f7d41e
--- /dev/null
+++ b/site-new/pages/markdown.md
@@ -0,0 +1,8 @@
+---
+layout: ../layouts/BaseLayout.astro
+title: Markdown page
+description: Amazing Markdown page
+thumbnail: 'test.png'
+---
+
+This is a test page to test page titles, descriptions & thumbnails.
diff --git a/site-new/scss/_ads.scss b/site-new/scss/_ads.scss
new file mode 100644
index 000000000000..cc5634096976
--- /dev/null
+++ b/site-new/scss/_ads.scss
@@ -0,0 +1,38 @@
+// stylelint-disable declaration-no-important, selector-max-id
+
+//
+// Carbon ads
+//
+
+#carbonads {
+ position: static;
+ display: block;
+ max-width: 400px;
+ padding: 15px 15px 15px 160px;
+ margin: 2rem 0;
+ overflow: hidden;
+ @include font-size(.8125rem);
+ line-height: 1.4;
+ text-align: left;
+ background-color: var(--bs-tertiary-bg);
+
+ a {
+ color: var(--bs-body-color);
+ text-decoration: none;
+ }
+
+ @include media-breakpoint-up(sm) {
+ @include border-radius(.5rem);
+ }
+}
+
+.carbon-img {
+ float: left;
+ margin-left: -145px;
+}
+
+.carbon-poweredby {
+ display: block;
+ margin-top: .75rem;
+ color: var(--bs-body-color) !important;
+}
diff --git a/site-new/scss/_anchor.scss b/site-new/scss/_anchor.scss
new file mode 100644
index 000000000000..5bb39150b14e
--- /dev/null
+++ b/site-new/scss/_anchor.scss
@@ -0,0 +1,21 @@
+.anchor-link {
+ padding: 0 .175rem;
+ font-weight: 400;
+ color: rgba($link-color, .5);
+ text-decoration: none;
+ opacity: 0;
+ @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
+
+ &::after {
+ content: "#";
+ }
+
+ &:focus,
+ &:hover,
+ :hover > &,
+ :target > & {
+ color: $link-color;
+ text-decoration: none;
+ opacity: 1;
+ }
+}
diff --git a/site-new/scss/_brand.scss b/site-new/scss/_brand.scss
new file mode 100644
index 000000000000..03fe2fe1ff69
--- /dev/null
+++ b/site-new/scss/_brand.scss
@@ -0,0 +1,60 @@
+//
+// Brand guidelines
+//
+
+// Logo series wrapper
+.bd-brand-logos {
+ color: $bd-violet;
+
+ .inverse {
+ color: $white;
+ background-color: $bd-violet;
+ }
+}
+
+// Individual items
+.bd-brand-item {
+ + .bd-brand-item {
+ border-top: 1px solid var(--bs-border-color);
+ }
+
+ @include media-breakpoint-up(md) {
+ + .bd-brand-item {
+ border-top: 0;
+ border-left: 1px solid var(--bs-border-color);
+ }
+ }
+}
+
+
+//
+// Color swatches
+//
+
+.color-swatches {
+ margin: 0 -5px;
+
+ // Docs colors
+ .bd-purple {
+ background-color: $bd-purple;
+ }
+ .bd-purple-light {
+ background-color: $bd-purple-light;
+ }
+ .bd-purple-lighter {
+ background-color: #e5e1ea;
+ }
+ .bd-gray {
+ background-color: #f9f9f9;
+ }
+}
+
+.color-swatch {
+ width: 4rem;
+ height: 4rem;
+
+ @include media-breakpoint-up(md) {
+ width: 6rem;
+ height: 6rem;
+ }
+}
diff --git a/site-new/scss/_buttons.scss b/site-new/scss/_buttons.scss
new file mode 100644
index 000000000000..8e4c3838d275
--- /dev/null
+++ b/site-new/scss/_buttons.scss
@@ -0,0 +1,52 @@
+// Buttons
+//
+// Custom buttons for the docs.
+
+// scss-docs-start btn-css-vars-example
+.btn-bd-primary {
+ --bs-btn-font-weight: 600;
+ --bs-btn-color: var(--bs-white);
+ --bs-btn-bg: var(--bd-violet-bg);
+ --bs-btn-border-color: var(--bd-violet-bg);
+ --bs-btn-hover-color: var(--bs-white);
+ --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
+ --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
+ --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+ --bs-btn-active-color: var(--bs-btn-hover-color);
+ --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
+ --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
+}
+// scss-docs-end btn-css-vars-example
+
+.btn-bd-accent {
+ --bs-btn-font-weight: 600;
+ --bs-btn-color: var(--bd-accent);
+ --bs-btn-border-color: var(--bd-accent);
+ --bs-btn-hover-color: var(--bd-dark);
+ --bs-btn-hover-bg: var(--bd-accent);
+ --bs-btn-hover-border-color: var(--bd-accent);
+ --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
+ --bs-btn-active-color: var(--bs-btn-hover-color);
+ --bs-btn-active-bg: var(--bs-btn-hover-bg);
+ --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
+}
+
+.btn-bd-light {
+ --btn-custom-color: #{mix($bd-violet, $white, 75%)};
+
+ --bs-btn-color: var(--bs-gray-600);
+ --bs-btn-border-color: var(--bs-border-color);
+ --bs-btn-hover-color: var(--btn-custom-color);
+ --bs-btn-hover-border-color: var(--btn-custom-color);
+ --bs-btn-active-color: var(--btn-custom-color);
+ --bs-btn-active-bg: var(--bs-white);
+ --bs-btn-active-border-color: var(--btn-custom-color);
+ --bs-btn-focus-border-color: var(--btn-custom-color);
+ --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+}
+
+.bd-btn-lg {
+ --bs-btn-border-radius: .5rem;
+
+ padding: .8125rem 2rem;
+}
diff --git a/site-new/scss/_callouts.scss b/site-new/scss/_callouts.scss
new file mode 100644
index 000000000000..c3e5629a8e3f
--- /dev/null
+++ b/site-new/scss/_callouts.scss
@@ -0,0 +1,40 @@
+//
+// Callouts
+//
+
+.bd-callout {
+ --#{$prefix}link-color-rgb: var(--bd-callout-link);
+ --#{$prefix}code-color: var(--bd-callout-code-color);
+
+ padding: 1.25rem;
+ margin-top: 1.25rem;
+ margin-bottom: 1.25rem;
+ color: var(--bd-callout-color, inherit);
+ background-color: var(--bd-callout-bg, var(--bs-gray-100));
+ border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
+
+ h4 {
+ margin-bottom: .25rem;
+ }
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+
+ + .bd-callout {
+ margin-top: -.25rem;
+ }
+
+ .highlight {
+ background-color: rgba($black, .05);
+ }
+}
+
+// Variations
+@each $variant in $bd-callout-variants {
+ .bd-callout-#{$variant} {
+ --bd-callout-color: var(--bs-#{$variant}-text-emphasis);
+ --bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
+ --bd-callout-border: var(--bs-#{$variant}-border-subtle);
+ }
+}
diff --git a/site-new/scss/_clipboard-js.scss b/site-new/scss/_clipboard-js.scss
new file mode 100644
index 000000000000..97b454e03951
--- /dev/null
+++ b/site-new/scss/_clipboard-js.scss
@@ -0,0 +1,44 @@
+// clipboard.js
+//
+// JS-based `Copy` buttons for code snippets.
+
+.bd-clipboard,
+.bd-edit {
+ position: relative;
+ display: none;
+ float: right;
+
+ + .highlight {
+ margin-top: 0;
+ }
+
+ @include media-breakpoint-up(md) {
+ display: block;
+ }
+}
+
+.btn-clipboard,
+.btn-edit {
+ display: block;
+ padding: .5em;
+ line-height: 1;
+ color: var(--bs-body-color);
+ background-color: var(--bd-pre-bg);
+ border: 0;
+ @include border-radius(.25rem);
+
+ &:hover {
+ color: var(--bs-link-hover-color);
+ }
+
+ &:focus {
+ z-index: 3;
+ }
+}
+
+.btn-clipboard {
+ position: relative;
+ z-index: 2;
+ margin-top: .75rem;
+ margin-right: .75rem;
+}
diff --git a/site-new/scss/_colors.scss b/site-new/scss/_colors.scss
new file mode 100644
index 000000000000..a71a8973b804
--- /dev/null
+++ b/site-new/scss/_colors.scss
@@ -0,0 +1,156 @@
+//
+// Docs color palette classes
+//
+
+@each $color, $value in map-merge($colors, ("gray-500": $gray-500)) {
+ .swatch-#{$color} {
+ color: color-contrast($value);
+ background-color: #{$value};
+
+ &::after {
+ $contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
+ $against-white: "#{contrast-ratio($value, $white)}";
+ $against-black: "#{contrast-ratio($value, $black)}";
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ padding-left: 1rem;
+ font-size: .75rem;
+ line-height: 1.35;
+ white-space: pre;
+ content:
+ str-slice($contrast-ratio, 1, 4) "\A"
+ str-slice($against-white, 1, 4) "\A"
+ str-slice($against-black, 1, 4);
+ background-color: $value;
+ background-image:
+ linear-gradient(
+ to bottom,
+ transparent .25rem,
+ color-contrast($value) .25rem .75rem,
+ transparent .75rem 1.25rem,
+ $white 1.25rem 1.75rem,
+ transparent 1.75rem 2.25rem,
+ $black 2.25rem 2.75rem,
+ transparent 2.75rem
+ );
+ background-repeat: no-repeat;
+ background-size: .5rem 100%;
+ }
+ }
+}
+
+// stylelint-disable declaration-block-single-line-max-declarations
+
+.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
+.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
+.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
+.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
+.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
+.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
+.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
+.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
+.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
+
+.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
+.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
+.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
+.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
+.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
+.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
+.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
+.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
+.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
+
+.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
+.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
+.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
+.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
+.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
+.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
+.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
+.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
+.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
+
+.bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
+.bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
+.bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
+.bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
+.bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
+.bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
+.bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
+.bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
+.bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }
+
+.bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
+.bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
+.bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
+.bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
+.bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
+.bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
+.bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
+.bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
+.bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }
+
+.bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
+.bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
+.bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
+.bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
+.bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
+.bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
+.bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
+.bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
+.bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }
+
+.bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
+.bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
+.bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
+.bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
+.bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
+.bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
+.bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
+.bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
+.bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }
+
+.bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
+.bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
+.bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
+.bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
+.bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
+.bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
+.bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
+.bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
+.bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }
+
+.bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
+.bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
+.bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
+.bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
+.bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
+.bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
+.bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
+.bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
+.bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }
+
+.bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
+.bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
+.bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
+.bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
+.bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
+.bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
+.bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
+.bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
+.bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
+
+.bd-gray-100 { color: color-contrast($gray-100); background-color: $gray-100; }
+.bd-gray-200 { color: color-contrast($gray-200); background-color: $gray-200; }
+.bd-gray-300 { color: color-contrast($gray-300); background-color: $gray-300; }
+.bd-gray-400 { color: color-contrast($gray-400); background-color: $gray-400; }
+.bd-gray-500 { color: color-contrast($gray-500); background-color: $gray-500; }
+.bd-gray-600 { color: color-contrast($gray-600); background-color: $gray-600; }
+.bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; }
+.bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
+.bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
+
+.bd-white { color: color-contrast($white); background-color: $white; }
+.bd-black { color: color-contrast($black); background-color: $black; }
diff --git a/site-new/scss/_component-examples.scss b/site-new/scss/_component-examples.scss
new file mode 100644
index 000000000000..25385cf8e05d
--- /dev/null
+++ b/site-new/scss/_component-examples.scss
@@ -0,0 +1,411 @@
+//
+// Docs examples
+//
+
+.bd-example-snippet {
+ border: solid var(--bs-border-color);
+ border-width: 1px 0;
+
+ @include media-breakpoint-up(md) {
+ border-width: 1px;
+ }
+}
+
+.bd-example {
+ --bd-example-padding: 1rem;
+
+ position: relative;
+ padding: var(--bd-example-padding);
+ margin: 0 ($bd-gutter-x * -.5);
+ border: solid var(--bs-border-color);
+ border-width: 1px 0;
+ @include clearfix();
+
+ @include media-breakpoint-up(md) {
+ --bd-example-padding: 1.5rem;
+
+ margin-right: 0;
+ margin-left: 0;
+ border-width: 1px;
+ @include border-top-radius(var(--bs-border-radius));
+ }
+
+ + .bd-code-snippet {
+ @include border-top-radius(0);
+ border: solid var(--bs-border-color);
+ border-width: 0 1px 1px;
+ }
+
+ + p {
+ margin-top: 2rem;
+ }
+
+ > .form-control {
+ + .form-control {
+ margin-top: .5rem;
+ }
+ }
+
+ > .nav + .nav,
+ > .alert + .alert,
+ > .navbar + .navbar,
+ > .progress + .progress {
+ margin-top: $spacer;
+ }
+
+ > .dropdown-menu {
+ position: static;
+ display: block;
+ }
+
+ > :last-child,
+ > nav:last-child .breadcrumb {
+ margin-bottom: 0;
+ }
+
+ > hr:last-child {
+ margin-bottom: $spacer;
+ }
+
+ // Images
+ > svg + svg,
+ > img + img {
+ margin-left: .5rem;
+ }
+
+ // Buttons
+ > .btn,
+ > .btn-group {
+ margin: .25rem .125rem;
+ }
+ > .btn-toolbar + .btn-toolbar {
+ margin-top: .5rem;
+ }
+
+ // List groups
+ > .list-group {
+ max-width: 400px;
+ }
+
+ > [class*="list-group-horizontal"] {
+ max-width: 100%;
+ }
+
+ // Navbars
+ .fixed-top,
+ .sticky-top {
+ position: static;
+ margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
+ }
+
+ .fixed-bottom,
+ .sticky-bottom {
+ position: static;
+ margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list
+
+ }
+
+ // Pagination
+ .pagination {
+ margin-bottom: 0;
+ }
+}
+
+//
+// Grid examples
+//
+
+.bd-example-row [class^="col"],
+.bd-example-cols [class^="col"] > *,
+.bd-example-cssgrid [class*="grid"] > * {
+ padding-top: .75rem;
+ padding-bottom: .75rem;
+ background-color: rgba(var(--bd-violet-rgb), .15);
+ border: 1px solid rgba(var(--bd-violet-rgb), .3);
+}
+
+.bd-example-row .row + .row,
+.bd-example-cssgrid .grid + .grid {
+ margin-top: 1rem;
+}
+
+.bd-example-row-flex-cols .row {
+ min-height: 10rem;
+ background-color: rgba(var(--bd-violet-rgb), .15);
+}
+
+.bd-example-flex div:not(.vr) {
+ background-color: rgba(var(--bd-violet-rgb), .15);
+ border: 1px solid rgba(var(--bd-violet-rgb), .3);
+}
+
+// Grid mixins
+.example-container {
+ width: 800px;
+ @include make-container();
+}
+
+.example-row {
+ @include make-row();
+}
+
+.example-content-main {
+ @include make-col-ready();
+
+ @include media-breakpoint-up(sm) {
+ @include make-col(6);
+ }
+
+ @include media-breakpoint-up(lg) {
+ @include make-col(8);
+ }
+}
+
+.example-content-secondary {
+ @include make-col-ready();
+
+ @include media-breakpoint-up(sm) {
+ @include make-col(6);
+ }
+
+ @include media-breakpoint-up(lg) {
+ @include make-col(4);
+ }
+}
+
+// Ratio helpers
+.bd-example-ratios {
+ .ratio {
+ display: inline-block;
+ width: 10rem;
+ color: var(--bs-secondary-color);
+ background-color: var(--bs-tertiary-bg);
+ border: var(--bs-border-width) solid var(--bs-border-color);
+
+ > div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+}
+.bd-example-ratios-breakpoint {
+ .ratio-4x3 {
+ width: 16rem;
+
+ @include media-breakpoint-up(md) {
+ --bs-aspect-ratio: 50%; // 2x1
+ }
+ }
+}
+
+.bd-example-offcanvas {
+ .offcanvas {
+ position: static;
+ display: block;
+ height: 200px;
+ visibility: visible;
+ transform: translate(0);
+ }
+}
+
+// Tooltips
+.tooltip-demo {
+ a {
+ white-space: nowrap;
+ }
+
+ .btn {
+ margin: .25rem .125rem;
+ }
+}
+
+// scss-docs-start custom-tooltip
+.custom-tooltip {
+ --bs-tooltip-bg: var(--bs-primary);
+}
+// scss-docs-end custom-tooltip
+
+// scss-docs-start custom-popovers
+.custom-popover {
+ --bs-popover-max-width: 200px;
+ --bs-popover-border-color: var(--bs-primary);
+ --bs-popover-header-bg: var(--bs-primary);
+ --bs-popover-header-color: var(--bs-white);
+ --bs-popover-body-padding-x: 1rem;
+ --bs-popover-body-padding-y: .5rem;
+}
+// scss-docs-end custom-popovers
+
+// Scrollspy demo on fixed height div
+.scrollspy-example {
+ height: 200px;
+ margin-top: .5rem;
+ overflow: auto;
+}
+
+.scrollspy-example-2 {
+ height: 350px;
+ overflow: auto;
+}
+
+.simple-list-example-scrollspy {
+ .active {
+ background-color: rgba(var(--bd-violet-rgb), .15);
+ }
+}
+
+.bd-example-border-utils {
+ [class^="border"] {
+ display: inline-block;
+ width: 5rem;
+ height: 5rem;
+ margin: .25rem;
+ background-color: var(--bs-tertiary-bg);
+ }
+}
+
+.bd-example-rounded-utils {
+ [class*="rounded"] {
+ margin: .25rem;
+ }
+}
+
+.bd-example-position-utils {
+ position: relative;
+ padding: 2rem;
+
+ .position-relative {
+ height: 200px;
+ background-color: var(--bs-tertiary-bg);
+ }
+
+ .position-absolute {
+ width: 2rem;
+ height: 2rem;
+ background-color: var(--bs-body-color);
+ @include border-radius();
+ }
+}
+
+.bd-example-position-examples {
+ &::after {
+ content: none;
+ }
+}
+
+// Placeholders
+.bd-example-placeholder-cards {
+ &::after {
+ display: none;
+ }
+
+ .card {
+ width: 18rem;
+ }
+}
+
+// Toasts
+.bd-example-toasts {
+ min-height: 240px;
+}
+
+.bd-example-zindex-levels {
+ min-height: 15rem;
+
+ > div {
+ color: var(--bs-body-bg);
+ background-color: var(--bd-violet);
+ border: 1px solid var(--bd-purple);
+
+ > span {
+ position: absolute;
+ right: 5px;
+ bottom: 0;
+ }
+ }
+
+ > :nth-child(2) {
+ top: 3rem;
+ left: 3rem;
+ }
+ > :nth-child(3) {
+ top: 4.5rem;
+ left: 4.5rem;
+ }
+ > :nth-child(4) {
+ top: 6rem;
+ left: 6rem;
+ }
+ > :nth-child(5) {
+ top: 7.5rem;
+ left: 7.5rem;
+ }
+}
+
+//
+// Code snippets
+//
+
+.highlight {
+ position: relative;
+ padding: .75rem ($bd-gutter-x * .5);
+ margin-bottom: 1rem;
+ background-color: var(--bd-pre-bg);
+
+ @include media-breakpoint-up(md) {
+ padding: .75rem 1.25rem;
+ @include border-radius(var(--bs-border-radius));
+ }
+
+ pre {
+ padding: 0;
+ margin-top: .625rem;
+ margin-right: 1.875rem;
+ margin-bottom: .625rem;
+ white-space: pre;
+ background-color: transparent;
+ border: 0;
+ }
+
+ pre code {
+ @include font-size(inherit);
+ color: var(--bs-body-color); // Effectively the base text color
+ word-wrap: normal;
+ }
+}
+
+.bd-code-snippet {
+ margin: 0 ($bd-gutter-x * -.5) $spacer;
+
+ .highlight {
+ margin-bottom: 0;
+ @include border-top-radius(0);
+ }
+
+ .bd-example {
+ margin: 0;
+ border: 0;
+ }
+
+ @include media-breakpoint-up(md) {
+ margin-right: 0;
+ margin-left: 0;
+ @include border-radius($border-radius);
+ }
+}
+
+.highlight-toolbar {
+ background-color: var(--bd-pre-bg);
+}
+
+.bd-scss-docs {
+ .highlight-toolbar {
+ @include border-top-radius(calc(var(--bs-border-radius) + 1px));
+ }
+}
+
+.focused {
+ outline: 0;
+ box-shadow: var(--#{$variable-prefix}focus-ring-offset), var(--#{$variable-prefix}focus-ring-x, 0) var(--#{$variable-prefix}focus-ring-y, 0) var(--#{$variable-prefix}focus-ring-blur) var(--#{$variable-prefix}focus-ring-width) var(--#{$variable-prefix}focus-ring-color);
+}
diff --git a/site-new/scss/_content.scss b/site-new/scss/_content.scss
new file mode 100644
index 000000000000..9eca80464539
--- /dev/null
+++ b/site-new/scss/_content.scss
@@ -0,0 +1,168 @@
+//
+// Bootstrap docs content theming
+//
+
+.bd-content {
+ // Offset content from fixed navbar when jumping to headings
+ > :target {
+ padding-top: 5rem;
+ margin-top: -5rem;
+ }
+
+ > h2,
+ > h3,
+ > h4 {
+ --bs-heading-color: var(--bs-emphasis-color);
+ }
+
+ > h2:not(:first-child) {
+ margin-top: 3rem;
+ }
+
+ > h3 {
+ margin-top: 2rem;
+ }
+
+ > ul li,
+ > ol li {
+ margin-bottom: .25rem;
+
+ // stylelint-disable selector-max-type, selector-max-compound-selectors
+ > p ~ ul {
+ margin-top: -.5rem;
+ margin-bottom: 1rem;
+ }
+ // stylelint-enable selector-max-type, selector-max-compound-selectors
+ }
+
+ // Override Bootstrap defaults
+ > .table,
+ > .table-responsive .table {
+ --bs-table-border-color: var(--bs-border-color);
+
+ max-width: 100%;
+ margin-bottom: 1.5rem;
+ @include font-size(.875rem);
+
+ @include media-breakpoint-down(lg) {
+ &.table-bordered {
+ border: 0;
+ }
+ }
+
+ thead {
+ border-bottom: 2px solid currentcolor;
+ }
+
+ tbody:not(:first-child) {
+ border-top: 2px solid currentcolor;
+ }
+
+ th,
+ td {
+ &:first-child {
+ padding-left: 0;
+ }
+
+ &:not(:last-child) {
+ padding-right: 1.5rem;
+ }
+ }
+
+ th {
+ color: var(--bs-emphasis-color);
+ }
+
+ strong {
+ color: var(--bs-emphasis-color);
+ }
+
+ // Prevent breaking of code
+ // stylelint-disable-next-line selector-max-compound-selectors
+ th,
+ td:first-child > code {
+ white-space: nowrap;
+ }
+ }
+}
+
+.table-options {
+ td:nth-child(2) {
+ min-width: 160px;
+ }
+}
+
+.table-options td:last-child,
+.table-utilities td:last-child {
+ min-width: 280px;
+}
+
+.table-swatches {
+ th {
+ color: var(--bs-emphasis-color);
+ }
+
+ td code {
+ white-space: nowrap;
+ }
+}
+
+.bd-title {
+ --bs-heading-color: var(--bs-emphasis-color);
+ @include font-size(3rem);
+}
+
+.bd-lead {
+ @include font-size(1.5rem);
+ font-weight: 300;
+}
+
+.bi {
+ width: 1em;
+ height: 1em;
+ vertical-align: -.125em;
+ fill: currentcolor;
+}
+
+.border-lg-start {
+ @include media-breakpoint-up(lg) {
+ border-left: var(--bs-border-width) solid var(--bs-border-color);
+ }
+}
+
+// stylelint-disable selector-no-qualifying-type
+.bd-summary-link {
+ color: var(--bs-link-color);
+
+ &:hover,
+ details[open] > & {
+ color: var(--bs-link-hover-color);
+ }
+}
+// stylelint-enable selector-no-qualifying-type
+
+// scss-docs-start custom-color-mode
+[data-bs-theme="blue"] {
+ --bs-body-color: var(--bs-white);
+ --bs-body-color-rgb: #{to-rgb($white)};
+ --bs-body-bg: var(--bs-blue);
+ --bs-body-bg-rgb: #{to-rgb($blue)};
+ --bs-tertiary-bg: #{$blue-600};
+
+ .dropdown-menu {
+ --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
+ --bs-dropdown-link-active-bg: #{$blue-700};
+ }
+
+ .btn-secondary {
+ --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
+ --bs-btn-border-color: #{rgba($white, .25)};
+ --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
+ --bs-btn-hover-border-color: #{rgba($white, .25)};
+ --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
+ --bs-btn-active-border-color: #{rgba($white, .5)};
+ --bs-btn-focus-border-color: #{rgba($white, .5)};
+ --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
+ }
+}
+// scss-docs-end custom-color-mode
diff --git a/site-new/scss/_footer.scss b/site-new/scss/_footer.scss
new file mode 100644
index 000000000000..42e1ca051aab
--- /dev/null
+++ b/site-new/scss/_footer.scss
@@ -0,0 +1,16 @@
+//
+// Footer
+//
+
+.bd-footer {
+ a {
+ color: var(--bs-body-color);
+ text-decoration: none;
+
+ &:hover,
+ &:focus {
+ color: var(--bs-link-hover-color);
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/site-new/scss/_layout.scss b/site-new/scss/_layout.scss
new file mode 100644
index 000000000000..d0482d9b7123
--- /dev/null
+++ b/site-new/scss/_layout.scss
@@ -0,0 +1,57 @@
+.bd-gutter {
+ --bs-gutter-x: #{$bd-gutter-x};
+}
+
+.bd-layout {
+
+ @include media-breakpoint-up(lg) {
+ display: grid;
+ grid-template-areas: "sidebar main";
+ grid-template-columns: 1fr 5fr;
+ gap: $grid-gutter-width;
+ }
+}
+
+.bd-sidebar {
+ grid-area: sidebar;
+}
+
+.bd-main {
+ grid-area: main;
+
+ @include media-breakpoint-down(lg) {
+ max-width: 760px;
+ margin-inline: auto;
+ }
+
+ @include media-breakpoint-up(md) {
+ display: grid;
+ grid-template-areas:
+ "intro"
+ "toc"
+ "content";
+ grid-template-rows: auto auto 1fr;
+ gap: inherit;
+ }
+
+ @include media-breakpoint-up(lg) {
+ grid-template-areas:
+ "intro toc"
+ "content toc";
+ grid-template-rows: auto 1fr;
+ grid-template-columns: 4fr 1fr;
+ }
+}
+
+.bd-intro {
+ grid-area: intro;
+}
+
+.bd-toc {
+ grid-area: toc;
+}
+
+.bd-content {
+ grid-area: content;
+ min-width: 1px; // Fix width when bd-content contains a `` https://github.com/twbs/bootstrap/issues/25410
+}
diff --git a/site-new/scss/_masthead.scss b/site-new/scss/_masthead.scss
new file mode 100644
index 000000000000..d39f640ae71d
--- /dev/null
+++ b/site-new/scss/_masthead.scss
@@ -0,0 +1,108 @@
+.bd-masthead {
+ --bd-pink-rgb: #{to-rgb($pink)};
+ padding: 3rem 0;
+ // stylelint-disable
+ background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), .01), rgba(var(--bs-body-bg-rgb), 1) 85%),
+ radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), .5), transparent 50%),
+ radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), .5), transparent 50%),
+ radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), .5), transparent 50%),
+ radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), .5), transparent 50%);
+ // stylelint-enable
+
+ h1 {
+ @include font-size(4rem);
+ }
+
+ .lead {
+ @include font-size(1rem);
+ font-weight: 400;
+ color: var(--bs-secondary-color);
+ }
+
+ .bd-code-snippet {
+ margin: 0;
+ @include border-radius(.5rem);
+ }
+
+ .highlight {
+ width: 100%;
+ padding: .5rem 1rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background-color: rgba(var(--bs-body-color-rgb), .075);
+ @include border-radius(.5rem);
+
+ @include media-breakpoint-up(lg) {
+ padding-right: 4rem;
+ }
+ }
+ .btn-clipboard {
+ position: absolute;
+ top: -.125rem;
+ right: 0;
+ background-color: transparent;
+ }
+
+ #carbonads { // stylelint-disable-line selector-max-id
+ margin-inline: auto;
+ }
+
+ @include media-breakpoint-up(md) {
+ .lead {
+ @include font-size(1.5rem);
+ }
+ }
+}
+
+.masthead-followup {
+ .lead {
+ @include font-size(1rem);
+ }
+
+ .highlight {
+ @include border-radius(.5rem);
+ }
+
+ @include media-breakpoint-up(md) {
+ .lead {
+ @include font-size(1.25rem);
+ }
+ }
+}
+
+.masthead-followup-icon {
+ padding: 1rem;
+ color: rgba(var(--bg-rgb), 1);
+ background-color: rgba(var(--bg-rgb), .1);
+ background-blend-mode: multiple;
+ @include border-radius(1rem);
+ mix-blend-mode: darken;
+
+ svg {
+ filter: drop-shadow(0 1px 1px var(--bs-body-bg));
+ }
+}
+
+.masthead-notice {
+ background-color: var(--bd-accent);
+ box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
+}
+
+.animate-img {
+ > img {
+ transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
+ }
+
+ &:hover > img {
+ transform: scale(1.1);
+ }
+}
+
+@if $enable-dark-mode {
+ [data-bs-theme="dark"] {
+ .masthead-followup-icon {
+ mix-blend-mode: lighten;
+ }
+ }
+}
diff --git a/site-new/scss/_navbar.scss b/site-new/scss/_navbar.scss
new file mode 100644
index 000000000000..5a1c529ca826
--- /dev/null
+++ b/site-new/scss/_navbar.scss
@@ -0,0 +1,129 @@
+.bd-navbar {
+ padding: .75rem 0;
+ background-color: transparent;
+ box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+
+ &::after {
+ position: absolute;
+ inset: 0;
+ z-index: -1;
+ display: block;
+ content: "";
+ background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+ }
+
+ .bd-navbar-toggle {
+ @include media-breakpoint-down(lg) {
+ width: 4.25rem;
+ }
+ }
+
+ .navbar-toggler {
+ padding: 0;
+ margin-right: -.5rem;
+ border: 0;
+
+ &:first-child {
+ margin-left: -.5rem;
+ }
+
+ .bi {
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+
+ &:focus {
+ box-shadow: none;
+ }
+ }
+
+ .navbar-brand {
+ color: $white;
+ transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
+
+ &:hover {
+ transform: rotate(-5deg) scale(1.1);
+ }
+ }
+
+ .navbar-toggler,
+ .nav-link {
+ padding-right: $spacer * .25;
+ padding-left: $spacer * .25;
+ color: rgba($white, .85);
+
+ &:hover,
+ &:focus {
+ color: $white;
+ }
+
+ &.active {
+ font-weight: 600;
+ color: $white;
+ }
+ }
+
+ .navbar-nav-svg {
+ display: inline-block;
+ vertical-align: -.125rem;
+ }
+
+ .offcanvas-lg {
+ background-color: var(--bd-violet-bg);
+ border-left: 0;
+
+ @include media-breakpoint-down(lg) {
+ box-shadow: $box-shadow-lg;
+ }
+ }
+
+ .dropdown-toggle {
+ &:focus:not(:focus-visible) {
+ outline: 0;
+ }
+ }
+
+ .dropdown-menu {
+ --bs-dropdown-min-width: 12rem;
+ --bs-dropdown-padding-x: .25rem;
+ --bs-dropdown-padding-y: .25rem;
+ --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
+ --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
+ @include rfs(.875rem, --bs-dropdown-font-size);
+ @include font-size(.875rem);
+ @include border-radius(.5rem);
+ box-shadow: $dropdown-box-shadow;
+
+ li + li {
+ margin-top: .125rem;
+ }
+
+ .dropdown-item {
+ @include border-radius(.25rem);
+
+ &:active {
+ .bi {
+ color: inherit !important; // stylelint-disable-line declaration-no-important
+ }
+ }
+ }
+
+ .active {
+ font-weight: 600;
+
+ .bi {
+ display: block !important; // stylelint-disable-line declaration-no-important
+ }
+ }
+ }
+
+ .dropdown-menu-end {
+ --bs-dropdown-min-width: 8rem;
+ }
+}
+
+@include color-mode(dark) {
+ .bd-navbar {
+ box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+ }
+}
diff --git a/site-new/scss/_placeholder-img.scss b/site-new/scss/_placeholder-img.scss
new file mode 100644
index 000000000000..6f5bbe418926
--- /dev/null
+++ b/site-new/scss/_placeholder-img.scss
@@ -0,0 +1,15 @@
+//
+// Placeholder svg used in the docs.
+//
+
+// Remember to update `site/_layouts/examples.html` too if this changes!
+
+.bd-placeholder-img {
+ @include font-size(1.125rem);
+ user-select: none;
+ text-anchor: middle;
+}
+
+.bd-placeholder-img-lg {
+ @include font-size(3.5rem);
+}
diff --git a/site-new/scss/_scrolling.scss b/site-new/scss/_scrolling.scss
new file mode 100644
index 000000000000..dcd9f3d3956c
--- /dev/null
+++ b/site-new/scss/_scrolling.scss
@@ -0,0 +1,5 @@
+// When navigating with the keyboard, prevent focus from landing behind the sticky header
+
+main *:focus {
+ scroll-margin-top: 100px;
+}
diff --git a/site-new/scss/_search.scss b/site-new/scss/_search.scss
new file mode 100644
index 000000000000..ca1e5b060c81
--- /dev/null
+++ b/site-new/scss/_search.scss
@@ -0,0 +1,172 @@
+// stylelint-disable selector-class-pattern
+
+:root {
+ --docsearch-primary-color: var(--bd-violet);
+ --docsearch-logo-color: var(--bd-violet);
+}
+
+@include color-mode(dark, true) {
+ // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
+ // in html[data-theme="dark"] selector
+ // and are slightly modified for formatting purpose
+ --docsearch-text-color: #f5f6f7;
+ --docsearch-container-background: rgba(9, 10, 17, .8);
+ --docsearch-modal-background: #15172a;
+ --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+ --docsearch-searchbox-background: #090a11;
+ --docsearch-searchbox-focus-background: #000;
+ --docsearch-hit-color: #bec3c9;
+ --docsearch-hit-shadow: none;
+ --docsearch-hit-background: #090a11;
+ --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
+ --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
+ --docsearch-footer-background: #1e2136;
+ --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
+ --docsearch-muted-color: #7f8497;
+}
+
+.bd-search {
+ position: relative;
+
+ @include media-breakpoint-up(lg) {
+ position: absolute;
+ top: .875rem;
+ left: 50%;
+ width: 200px;
+ margin-left: -100px;
+ }
+
+ @include media-breakpoint-up(xl) {
+ width: 280px;
+ margin-left: -140px;
+ }
+
+}
+
+.DocSearch-Container {
+ --docsearch-muted-color: var(--bs-secondary-color);
+ --docsearch-hit-shadow: none;
+
+ z-index: 2000; // Make sure to be over all components showcased in the documentation
+ cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
+
+ @include media-breakpoint-up(lg) {
+ padding-top: 4rem;
+ }
+}
+
+.DocSearch-Button {
+ --docsearch-searchbox-background: #{rgba($black, .1)};
+ --docsearch-searchbox-color: #{$white};
+ --docsearch-searchbox-focus-background: #{rgba($black, .25)};
+ --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
+ --docsearch-text-color: #{$white};
+ --docsearch-muted-color: #{rgba($white, .65)};
+
+ width: 100%;
+ height: 38px; // Match Bootstrap inputs
+ margin: 0;
+ border: 1px solid rgba($white, .4);
+ @include border-radius(.375rem);
+
+ .DocSearch-Search-Icon {
+ opacity: .65;
+ }
+
+ &:active,
+ &:focus,
+ &:hover {
+ border-color: rgba($bd-accent, 1);
+
+ .DocSearch-Search-Icon {
+ opacity: 1;
+ }
+ }
+
+ @include media-breakpoint-down(lg) {
+ &,
+ &:hover,
+ &:focus {
+ background: transparent;
+ border: 0;
+ box-shadow: none;
+ }
+ &:focus {
+ box-shadow: var(--docsearch-searchbox-shadow);
+ }
+ }
+}
+
+.DocSearch-Button-Keys,
+.DocSearch-Button-Placeholder {
+ @include media-breakpoint-down(lg) {
+ display: none;
+ }
+}
+
+.DocSearch-Button-Keys {
+ min-width: 0;
+ padding: .125rem .25rem;
+ background: rgba($black, .25);
+ @include border-radius(.25rem);
+}
+
+.DocSearch-Button-Key {
+ top: 0;
+ width: auto;
+ height: 1.25rem;
+ padding-right: .125rem;
+ padding-left: .125rem;
+ margin-right: 0;
+ font-size: .875rem;
+ background: none;
+ box-shadow: none;
+}
+
+.DocSearch-Commands-Key {
+ padding-left: 1px;
+ font-size: .875rem;
+ background-color: rgba($black, .1);
+ background-image: none;
+ box-shadow: none;
+}
+
+.DocSearch-Form {
+ @include border-radius(var(--bs-border-radius));
+}
+
+.DocSearch-Hits {
+ mark {
+ padding: 0;
+ }
+}
+
+.DocSearch-Hit {
+ padding-bottom: 0;
+ @include border-radius(0);
+
+ a {
+ @include border-radius(0);
+ border: solid var(--bs-border-color);
+ border-width: 0 1px 1px;
+ }
+
+ &:first-child a {
+ @include border-top-radius(var(--bs-border-radius));
+ border-top-width: 1px;
+ }
+ &:last-child a {
+ @include border-bottom-radius(var(--bs-border-radius));
+ }
+}
+
+.DocSearch-Hit-icon {
+ display: flex;
+ align-items: center;
+}
+
+// Fix --docsearch-logo-color that doesn't do anything
+.DocSearch-Logo svg .cls-1,
+.DocSearch-Logo svg .cls-2 {
+ fill: var(--docsearch-logo-color);
+}
diff --git a/site-new/scss/_sidebar.scss b/site-new/scss/_sidebar.scss
new file mode 100644
index 000000000000..6f1ef292fc54
--- /dev/null
+++ b/site-new/scss/_sidebar.scss
@@ -0,0 +1,64 @@
+.bd-sidebar {
+ @include media-breakpoint-up(lg) {
+ position: sticky;
+ top: 5rem;
+ // Override collapse behaviors
+ // stylelint-disable-next-line declaration-no-important
+ display: block !important;
+ height: subtract(100vh, 6rem);
+ // Prevent focus styles to be cut off:
+ padding-left: .25rem;
+ margin-left: -.25rem;
+ overflow-y: auto;
+ }
+
+ @include media-breakpoint-down(lg) {
+ .offcanvas-lg {
+ border-right-color: var(--bs-border-color);
+ box-shadow: $box-shadow-lg;
+ }
+ }
+}
+
+.bd-links-heading {
+ color: var(--bs-emphasis-color);
+}
+
+.bd-links-nav {
+ @include media-breakpoint-down(lg) {
+ font-size: .875rem;
+ }
+
+ @include media-breakpoint-between(xs, lg) {
+ column-count: 2;
+ column-gap: 1.5rem;
+
+ .bd-links-group {
+ break-inside: avoid;
+ }
+
+ .bd-links-span-all {
+ column-span: all;
+ }
+ }
+}
+
+.bd-links-link {
+ padding: .1875rem .5rem;
+ margin-top: .125rem;
+ margin-left: 1.125rem;
+ color: var(--bs-body-color);
+ text-decoration: if($link-decoration == none, null, none);
+
+ &:hover,
+ &:focus,
+ &.active {
+ color: var(--bs-emphasis-color);
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ background-color: var(--bd-sidebar-link-bg);
+ }
+
+ &.active {
+ font-weight: 600;
+ }
+}
diff --git a/site-new/scss/_skippy.scss b/site-new/scss/_skippy.scss
new file mode 100644
index 000000000000..ea82c625b9eb
--- /dev/null
+++ b/site-new/scss/_skippy.scss
@@ -0,0 +1,7 @@
+.skippy {
+ background-color: $bd-purple;
+
+ a {
+ color: $white;
+ }
+}
diff --git a/site-new/scss/_syntax.scss b/site-new/scss/_syntax.scss
new file mode 100644
index 000000000000..0cc26d76b639
--- /dev/null
+++ b/site-new/scss/_syntax.scss
@@ -0,0 +1,135 @@
+:root,
+[data-bs-theme="light"] {
+ // --base00: #fff;
+ // --base01: #f5f5f5;
+ --base02: #c8c8fa;
+ --base03: #565c64;
+ --base04: #666;
+ --base05: #333;
+ --base06: #fff;
+ --base07: #{$teal-700}; // #9a6700
+ --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
+ --base09: #{$cyan-700}; // #087990
+ --base0A: #{$purple-500}; // #795da3
+ --base0B: #{$blue-700}; // #183691
+ --base0C: #{$blue-700}; // #183691
+ --base0D: #{$purple-500}; // #795da3
+ --base0E: #{$pink-600}; // #a71d5d
+ --base0F: #333;
+}
+
+@include color-mode(dark, true) {
+ // --base00: #282c34;
+ // --base01: #353b45;
+ --base02: #3e4451;
+ --base03: #868e96;
+ --base04: #868e96;
+ --base05: #abb2bf;
+ --base06: #b6bdca;
+ --base07: #{$orange-300}; // #d19a66
+ --base08: #{$cyan-300};
+ --base09: #{$orange-300}; // #d19a66
+ --base0A: #{$yellow-200}; // #e5c07b
+ --base0B: #{$teal-300}; // #98c379
+ --base0C: #{$teal-300}; // #56b6c2
+ --base0D: #{$blue-300}; // #61afef
+ --base0E: #{$indigo-200}; // #c678dd
+ --base0F: #{$red-300}; // #be5046
+}
+
+.hl { background-color: var(--base02); }
+.c { color: var(--base03); }
+.err { color: var(--base08); }
+.k { color: var(--base0E); }
+.l { color: var(----base09); }
+.n { color: var(--base08); }
+.o { color: var(--base05); }
+.p { color: var(--base05); }
+.cm { color: var(--base04); }
+.cp { color: var(--base08); }
+.c1 { color: var(--base03); }
+.cs { color: var(--base04); }
+.gd { color: var(--base08); }
+.ge { font-style: italic; }
+.gh {
+ font-weight: 600;
+ color: #fff;
+}
+.gi { color: var(--bs-success); }
+.gp {
+ font-weight: 600;
+ color: var(--base04);
+}
+.gs { font-weight: 600; }
+.gu {
+ font-weight: 600;
+ color: var(--base0C);
+}
+.kc { color: var(--base0E); }
+.kd { color: var(--base0E); }
+.kn { color: var(--base0C); }
+.kp { color: var(--base0E); }
+.kr { color: var(--base0E); }
+.kt { color: var(--base0A); }
+.ld { color: var(--base0C); }
+.m { color: var(--base09); }
+.s { color: var(--base0C); }
+.na { color: var(--base0A); }
+.nb { color: var(--base05); }
+.nc { color: var(--base07); }
+.no { color: var(--base08); }
+.nd { color: var(--base07); }
+.ni { color: var(--base08); }
+.ne { color: var(--base08); }
+.nf { color: var(--base0B); }
+.nl { color: var(--base05); }
+.nn { color: var(--base0A); }
+.nx { color: var(--base0A); }
+.py { color: var(--base08); }
+.nt { color: var(--base08); }
+.nv { color: var(--base08); }
+.ow { color: var(--base0C); }
+.w { color: #fff; }
+.mf { color: var(--base09); }
+.mh { color: var(--base09); }
+.mi { color: var(--base09); }
+.mo { color: var(--base09); }
+.sb { color: var(--base0C); }
+.sc { color: #fff; }
+.sd { color: var(--base04); }
+.s2 { color: var(--base0C); }
+.se { color: var(--base09); }
+.sh { color: var(--base0C); }
+.si { color: var(--base09); }
+.sx { color: var(--base0C); }
+.sr { color: var(--base0C); }
+.s1 { color: var(--base0C); }
+.ss { color: var(--base0C); }
+.bp { color: var(--base05); }
+.vc { color: var(--base08); }
+.vg { color: var(--base08); }
+.vi { color: var(--base08); }
+.il { color: var(--base09); }
+
+// Color commas in rgba() values
+.m + .o { color: var(--base03); }
+
+// Fix bash
+.language-sh .c { color: var(--base03); }
+
+.chroma {
+ .language-bash,
+ .language-sh {
+ .line::before {
+ color: var(--base03);
+ content: "$ ";
+ user-select: none;
+ }
+ }
+
+ .language-powershell::before {
+ color: var(--base0C);
+ content: "PM> ";
+ user-select: none;
+ }
+}
diff --git a/site-new/scss/_toc.scss b/site-new/scss/_toc.scss
new file mode 100644
index 000000000000..32bf3cf625c5
--- /dev/null
+++ b/site-new/scss/_toc.scss
@@ -0,0 +1,93 @@
+// stylelint-disable selector-max-type, selector-no-qualifying-type
+
+.bd-toc {
+ @include media-breakpoint-up(lg) {
+ position: sticky;
+ top: 5rem;
+ right: 0;
+ z-index: 2;
+ height: subtract(100vh, 7rem);
+ overflow-y: auto;
+ }
+
+ nav {
+ @include font-size(.875rem);
+
+ ul {
+ padding-left: 0;
+ margin-bottom: 0;
+ list-style: none;
+
+ ul {
+ padding-left: 1rem;
+ }
+ }
+
+ a {
+ display: block;
+ padding: .125rem 0 .125rem .75rem;
+ color: inherit;
+ text-decoration: none;
+ border-left: .125rem solid transparent;
+
+ &:hover,
+ &.active {
+ color: var(--bd-toc-color);
+ border-left-color: var(--bd-toc-color);
+ }
+
+ &.active {
+ font-weight: 500;
+ }
+
+ code {
+ font: inherit;
+ }
+ }
+ }
+}
+
+.bd-toc-toggle {
+ display: flex;
+ align-items: center;
+
+ @include media-breakpoint-down(sm) {
+ justify-content: space-between;
+ width: 100%;
+ }
+
+ @include media-breakpoint-down(md) {
+ color: var(--bs-body-color);
+ border: 1px solid var(--bs-border-color);
+ @include border-radius(var(--bs-border-radius));
+
+ &:hover,
+ &:focus,
+ &:active,
+ &[aria-expanded="true"] {
+ color: var(--bd-violet);
+ background-color: var(--bs-body-bg);
+ border-color: var(--bd-violet);
+ }
+
+ &:focus,
+ &[aria-expanded="true"] {
+ box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25);
+ }
+ }
+}
+
+.bd-toc-collapse {
+ @include media-breakpoint-down(md) {
+ nav {
+ padding: 1.25rem 1.25rem 1.25rem 1rem;
+ background-color: var(--bs-tertiary-bg);
+ border: 1px solid var(--bs-border-color);
+ @include border-radius(var(--bs-border-radius));
+ }
+ }
+
+ @include media-breakpoint-up(md) {
+ display: block !important; // stylelint-disable-line declaration-no-important
+ }
+}
diff --git a/site-new/scss/_variables.scss b/site-new/scss/_variables.scss
new file mode 100644
index 000000000000..2be534994642
--- /dev/null
+++ b/site-new/scss/_variables.scss
@@ -0,0 +1,37 @@
+// stylelint-disable scss/dollar-variable-default
+
+// Local docs variables
+$bd-purple: #4c0bce;
+$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
+$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
+$bd-accent: #ffe484;
+
+$bd-gutter-x: 3rem;
+$bd-callout-variants: info, warning, danger !default;
+
+:root,
+[data-bs-theme="light"] {
+ --bd-purple: #{$bd-purple};
+ --bd-violet: #{$bd-violet};
+ --bd-accent: #{$bd-accent};
+ --bd-violet-rgb: #{to-rgb($bd-violet)};
+ --bd-accent-rgb: #{to-rgb($bd-accent)};
+ --bd-pink-rgb: #{to-rgb($pink-500)};
+ --bd-teal-rgb: #{to-rgb($teal-500)};
+ --bd-violet-bg: var(--bd-violet);
+ --bd-toc-color: var(--bd-violet);
+ --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
+ --bd-callout-link: #{to-rgb($blue-600)};
+ --bd-callout-code-color: #{$pink-600};
+ --bd-pre-bg: var(--bs-tertiary-bg);
+}
+
+@include color-mode(dark, true) {
+ --bd-violet: #{mix($bd-violet, $white, 75%)};
+ --bd-violet-bg: #{$bd-violet};
+ --bd-toc-color: var(--#{$prefix}emphasis-color);
+ --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
+ --bd-callout-link: #{to-rgb($blue-300)};
+ --bd-callout-code-color: #{$pink-300};
+ --bd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
+}
diff --git a/site-new/scss/docs.scss b/site-new/scss/docs.scss
new file mode 100644
index 000000000000..b6effe13597e
--- /dev/null
+++ b/site-new/scss/docs.scss
@@ -0,0 +1,59 @@
+/*!
+ * Bootstrap 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/.
+ */
+
+// Dev notes
+//
+// Background information on nomenclature and architecture decisions here.
+//
+// - Bootstrap functions, variables, and mixins are included for easy reuse.
+// Doing so gives us access to the same core utilities provided by Bootstrap.
+// For example, consistent media queries through those mixins.
+//
+// - Bootstrap's **docs variables** are prefixed with `$bd-`.
+// These custom colors avoid collision with the components Bootstrap provides.
+//
+// - Classes are prefixed with `.bd-`.
+// These classes indicate custom-built or modified components for the design
+// and layout of the Bootstrap docs. They are not included in our builds.
+//
+// Happy Bootstrapping!
+
+// Load Bootstrap variables and mixins
+@import "../../scss/functions";
+@import "../../scss/variables";
+@import "../../scss/mixins";
+
+// fusv-disable
+$enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default
+$enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
+// fusv-enable
+@import "../../scss/grid";
+
+// Load docs components
+@import "variables";
+@import "navbar";
+@import "search";
+@import "masthead";
+@import "ads";
+@import "content";
+@import "skippy";
+@import "sidebar";
+@import "layout";
+@import "toc";
+@import "footer";
+@import "component-examples";
+@import "buttons";
+@import "callouts";
+@import "brand";
+@import "colors";
+@import "clipboard-js";
+@import "placeholder-img";
+@import "scrolling";
+
+// Load docs dependencies
+@import "syntax";
+@import "anchor";
diff --git a/src/components/Card.astro b/src/components/Card.astro
deleted file mode 100644
index c68fa2ab3448..000000000000
--- a/src/components/Card.astro
+++ /dev/null
@@ -1,63 +0,0 @@
----
-export interface Props {
- title: string;
- body: string;
- href: string;
-}
-
-const { href, title, body } = Astro.props;
----
-
-
-
-
- {title}
- →
-
-
- {body}
-
-
-
-
diff --git a/src/components/body/DocsNavbar.astro b/src/components/body/DocsNavbar.astro
deleted file mode 100644
index 6e5485ca1fc4..000000000000
--- a/src/components/body/DocsNavbar.astro
+++ /dev/null
@@ -1,151 +0,0 @@
----
-import { config } from "../../libs/config";
-import DocsVersions from "./DocsVersions.astro";
-
-// TODO: avoid to copy/paste props from Layout.astro
-export interface Props {
- layout: string; // TODO: better handling? It represents .Page.Layout // At least should be a Type
- title: string; // TODO: warning should be linked to .Page.title
-}
-
-const { layout, title } = Astro.props;
----
-
-
-
diff --git a/src/components/body/Icons.astro b/src/components/body/Icons.astro
deleted file mode 100644
index 0a1e6b537004..000000000000
--- a/src/components/body/Icons.astro
+++ /dev/null
@@ -1,86 +0,0 @@
----
----
-
diff --git a/src/components/body/Skippy.astro b/src/components/body/Skippy.astro
deleted file mode 100644
index 4e7bc0135b7d..000000000000
--- a/src/components/body/Skippy.astro
+++ /dev/null
@@ -1,14 +0,0 @@
----
-// TODO: avoid to copy/paste props from Layout.astro
-export interface Props {
- layout: string; // TODO: better handling? It represents .Page.Layout // At least should be a Type
-}
-
-const { layout } = Astro.props;
----
-
diff --git a/src/components/head/Analytics.astro b/src/components/head/Analytics.astro
deleted file mode 100644
index c8ad6470b2b8..000000000000
--- a/src/components/head/Analytics.astro
+++ /dev/null
@@ -1,12 +0,0 @@
----
----
-
-
-
-
-
diff --git a/src/components/head/Social.astro b/src/components/head/Social.astro
deleted file mode 100644
index 9b89b42d5747..000000000000
--- a/src/components/head/Social.astro
+++ /dev/null
@@ -1,44 +0,0 @@
----
-// TODO: avoid to copy/paste props from Layout.astro
-export interface Props {
- description: string;
- layout: string; // TODO: better handling? It represents .Page.Layout // At least should be a Type
- robots: string;
-}
-
-const { description, layout, robots } = Astro.props;
----
-
-
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
deleted file mode 100644
index 1a31a85894b3..000000000000
--- a/src/layouts/Layout.astro
+++ /dev/null
@@ -1,84 +0,0 @@
----
-import { config } from "../libs/config";
-import Stylesheet from "../components/head/Stylesheet.astro";
-import Favicons from "../components/head/Favicons.astro";
-import Social from "../components/head/Social.astro";
-import Analytics from "../components/head/Analytics.astro";
-import Skippy from "../components/body/Skippy.astro";
-import Icons from "../components/body/Icons.astro";
-import DocsNavbar from "../components/body/DocsNavbar.astro";
-import Scripts from "../components/body/Scripts.astro";
-
-export interface Props {
- description: string;
- layout: string; // TODO: better handling? It represents .Page.Layout // At least should be a Type
- robots: string;
-}
-
-const { description, layout, robots } = Astro.props;
----
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {config.title}
-
-
-
-
- {layout == 'docs' && }
- {robots && }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/libs/config.ts b/src/libs/config.ts
deleted file mode 100644
index b2be63fd863e..000000000000
--- a/src/libs/config.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-export const config = {
- params: {
- authors: "Mark Otto, Jacob Thornton, and Bootstrap contributors",
- blog: "https://blog.getbootstrap.com/",
- 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.",
- docs_version: "5.3",
- github_org: "https://github.com/twbs",
- icons: "https://icons.getbootstrap.com/",
- opencollective: "https://opencollective.com/bootstrap",
- themes: "https://themes.getbootstrap.com/",
- twitter: "getbootstrap"
- },
- title: "Bootstrap"
-}
-
-/*
-
-languageCode: "en"
-baseURL: "https://getbootstrap.com"
-
-security:
- enableInlineShortcodes: true
- funcs:
- getenv:
- - ^HUGO_
- - NETLIFY
-
-markup:
- goldmark:
- renderer:
- unsafe: true
- highlight:
- noClasses: false
- tableOfContents:
- startLevel: 2
- endLevel: 6
-
-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: 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."
-
-
-
- current_version: "5.3.0-alpha1"
- current_ruby_version: "5.3.0-alpha1"
-
- rfs_version: "v9.0.6"
-
- repo: "https://github.com/twbs/bootstrap"
-
-
-
-
- swag: "https://cottonbureau.com/people/bootstrap"
-
- download:
- source: "https://github.com/twbs/bootstrap/archive/v5.3.0-alpha1.zip"
- dist: "https://github.com/twbs/bootstrap/releases/download/v5.3.0-alpha1/bootstrap-5.3.0-alpha1-dist.zip"
- dist_examples: "https://github.com/twbs/bootstrap/releases/download/v5.3.0-alpha1/bootstrap-5.3.0-alpha1-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.0-alpha1/dist/css/bootstrap.min.css"
- css_hash: "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
- css_rtl: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.rtl.min.css"
- css_rtl_hash: "sha384-WJUUqfoMmnfkBLne5uxXj+na/c7sesSJ32gI7GfCk4zO4GthUKhSEGyvQ839BC51"
- js: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"
- js_hash: "sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
- js_bundle: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
- js_bundle_hash: "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
- popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
- popper_hash: "sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
- popper_esm: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/esm/popper.min.js"
-
- anchors:
- min: 2
- max: 5
-
-*/
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
deleted file mode 100644
index 2cc8b4712691..000000000000
--- a/src/pages/index.astro
+++ /dev/null
@@ -1,82 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
----
-
-
-
-
- Welcome to Astro
-
- To get started, open the directory src/pages
in your project.
- Code Challenge: Tweak the "Welcome to Astro" message above.
-
-
-
-
-
-