From 8c05aa8e94cf829c53f806c38ea5b0c072ad1bc7 Mon Sep 17 00:00:00 2001 From: Fanny Date: Mon, 17 Aug 2020 15:18:37 -0300 Subject: [PATCH] feat(v2): bootstrap theme, preset, template, CI previews (#2981) * fix(v2): doc sidebar * chore(v2): prettier * fix(v2): docs navbar path * fix(v2): fix error about activepath * chore(v2): prettier * feat(v2): change active color * feat(v2): Add bootstrap doc * docs(v2): Update preset * doc(v2): finish bootstrap documentation * chore(v2): run lint * doc(v2): update hook * fix theme bootstrap layout (far from perfect) * Try to fix bootstrap theme and deploy it! * fix netlify error Co-authored-by: slorber --- package.json | 1 + .../templates/bootstrap/src/pages/index.js | 38 ++-- .../bootstrap/src/pages/styles.module.css | 12 ++ .../src/theme/DocPage/index.js | 57 +++--- .../src/theme/DocSidebar/index.js | 18 +- .../src/theme/MDXPage/index.js | 32 +++ .../src/theme/TabItem/index.js | 14 ++ .../src/theme/Tabs/index.js | 154 +++++++++++++++ .../src/theme/Tabs/styles.module.css | 11 ++ .../src/theme/hooks/usePrismTheme.js | 14 ++ website/docs/installation.md | 6 + website/docs/presets.md | 34 ++++ website/docs/theme-bootstrap.md | 182 ++++++++++++++++++ website/docs/using-themes.md | 20 ++ website/docusaurus.config.js | 14 +- website/netlify.toml | 10 +- website/package.json | 9 +- 17 files changed, 560 insertions(+), 66 deletions(-) create mode 100644 packages/docusaurus-theme-bootstrap/src/theme/MDXPage/index.js create mode 100644 packages/docusaurus-theme-bootstrap/src/theme/TabItem/index.js create mode 100644 packages/docusaurus-theme-bootstrap/src/theme/Tabs/index.js create mode 100644 packages/docusaurus-theme-bootstrap/src/theme/Tabs/styles.module.css create mode 100644 packages/docusaurus-theme-bootstrap/src/theme/hooks/usePrismTheme.js create mode 100644 website/docs/theme-bootstrap.md diff --git a/package.json b/package.json index 5f8f5304f4c7..f6fd53c3887b 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "start:v2": "yarn workspace docusaurus-2-website start", "start:v2:watch": "nodemon --watch \"./packages/*/lib/**/*.*\" --exec \"yarn start:v2\"", "start:v2:baseUrl": "yarn workspace docusaurus-2-website start:baseUrl", + "start:v2:bootstrap": "yarn workspace docusaurus-2-website start:bootstrap", "build": "yarn build:packages && yarn build:v2", "build:packages": "lerna run build --no-private", "build:v1": "yarn workspace docusaurus-1-website build", diff --git a/packages/docusaurus-init/templates/bootstrap/src/pages/index.js b/packages/docusaurus-init/templates/bootstrap/src/pages/index.js index 9e4af6d08536..27de9db3bc0f 100644 --- a/packages/docusaurus-init/templates/bootstrap/src/pages/index.js +++ b/packages/docusaurus-init/templates/bootstrap/src/pages/index.js @@ -62,24 +62,26 @@ function Home() { -
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- Get Started -
-
-
- {features && features.length > 0 && ( -
-
- {features.map((props, idx) => ( - - ))} -
-
- )} -
+
+
+

{siteConfig.title}

+

{siteConfig.tagline}

+
+ Get Started +
+
+
+ {features && features.length > 0 && ( +
+
+ {features.map((props, idx) => ( + + ))} +
+
+ )} +
+
); } diff --git a/packages/docusaurus-init/templates/bootstrap/src/pages/styles.module.css b/packages/docusaurus-init/templates/bootstrap/src/pages/styles.module.css index c1aa85121c91..1167b269382d 100644 --- a/packages/docusaurus-init/templates/bootstrap/src/pages/styles.module.css +++ b/packages/docusaurus-init/templates/bootstrap/src/pages/styles.module.css @@ -24,6 +24,18 @@ justify-content: center; } +.hero { + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + place-content: center; +} + +.section { + margin: 10rem; +} + .features { display: flex; align-items: center; diff --git a/packages/docusaurus-theme-bootstrap/src/theme/DocPage/index.js b/packages/docusaurus-theme-bootstrap/src/theme/DocPage/index.js index 78c691a07cc6..6f2922b8e31e 100644 --- a/packages/docusaurus-theme-bootstrap/src/theme/DocPage/index.js +++ b/packages/docusaurus-theme-bootstrap/src/theme/DocPage/index.js @@ -14,33 +14,44 @@ import Layout from '@theme/Layout'; import {MDXProvider} from '@mdx-js/react'; import {matchPath} from '@docusaurus/router'; -function DocPage(props) { - const {route: baseRoute, docsMetadata, location} = props; - // case-sensitive route such as it is defined in the sidebar - const currentRoute = - baseRoute.routes.find((route) => { - return matchPath(location.pathname, route); - }) || {}; - const {permalinkToSidebar, docsSidebars} = docsMetadata; - const sidebar = permalinkToSidebar[currentRoute.path]; +function DocPageContent({currentDocRoute, versionMetadata, children}) { + const {permalinkToSidebar, docsSidebars} = versionMetadata; + const sidebarName = permalinkToSidebar[currentDocRoute.path]; + const sidebar = docsSidebars[sidebarName]; + return ( + +
+ {sidebar && ( +
+ +
+ )} +
+ {children} +
+
+ + ); +} - if (Object.keys(currentRoute).length === 0) { +function DocPage(props) { + const { + route: {routes: docRoutes}, + versionMetadata, + location, + } = props; + const currentDocRoute = docRoutes.find((docRoute) => + matchPath(location.pathname, docRoute), + ); + if (!currentDocRoute) { return ; } - return ( - - -
- - {renderRoutes(baseRoute.routes)} - -
- + + {renderRoutes(docRoutes)} + ); } diff --git a/packages/docusaurus-theme-bootstrap/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-bootstrap/src/theme/DocSidebar/index.js index 19e8301e426f..bf07afb1ed8f 100644 --- a/packages/docusaurus-theme-bootstrap/src/theme/DocSidebar/index.js +++ b/packages/docusaurus-theme-bootstrap/src/theme/DocSidebar/index.js @@ -61,9 +61,7 @@ const DocSidebarItem = ({item, onItemClick, ...props}) => { } }; -const DocSidebar = (props) => { - const {docsSidebars, sidebar: currentSidebar} = props; - +const DocSidebar = ({sidebar, path}) => { const [sidebarShown, setSidebarShown] = useState(false); const handleSidebarToggle = useCallback(() => { setSidebarShown(!sidebarShown); @@ -71,18 +69,6 @@ const DocSidebar = (props) => { useLockBodyScroll(sidebarShown); - if (!currentSidebar) { - return null; - } - - const sidebarData = docsSidebars[currentSidebar]; - - if (!sidebarData) { - throw new Error( - `Cannot find the sidebar "${currentSidebar}" in the sidebar config!`, - ); - } - return (
{