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' && ( + <> + {{- end }} ---> \ 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 +--- + + 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 +--- + +
+
+ Skip to main content + { + layout === 'docs' && ( + + Skip to docs navigation + + ) + } +
+
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;
----
-
-
-
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;
----
-
-
- Skip to main content - {layout == "docs" && Skip to docs navigation} -
-
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. -

- -
-
- -