From 9aba5910eb648854caf3ed6d73617dda8ed57579 Mon Sep 17 00:00:00 2001 From: slumbering Date: Fri, 4 Jun 2021 17:55:20 +0200 Subject: [PATCH] docs: :lipstick: ui enhancement Signed-off-by: slumbering --- tools/daggosaurus/docusaurus.config.js | 9 +- tools/daggosaurus/package.json | 2 + tools/daggosaurus/src/css/custom.css | 209 ------------ tools/daggosaurus/src/css/custom.scss | 322 ++++++++++++++++++ .../DocPaginator/Dagger_Icons_Arrow-next.svg | 1 + .../Dagger_Icons_Arrow-previous.svg | 1 + .../src/theme/DocPaginator/index.js | 61 ++++ .../daggosaurus/src/theme/SearchBar/index.js | 204 +++++++++++ .../src/theme/SearchBar/styles.css | 20 ++ .../theme/Toggle}/Icon_Day-mode.svg | 0 .../theme/Toggle}/Icon_Night-mode.svg | 0 tools/daggosaurus/src/theme/Toggle/index.js | 4 +- .../static/img/Dagger_Icons_Arrow-bottom.svg | 1 + .../static/img/Dagger_Icons_Arrow-left.svg | 1 + .../static/img/Dagger_Icons_Arrow-right.svg | 1 + .../static/img/Dagger_Icons_Arrow-top.svg | 1 + .../static/img/Dagger_Icons_Caution.svg | 1 + .../static/img/Dagger_Icons_Danger.svg | 1 + .../static/img/Dagger_Icons_Edit.svg | 1 + .../static/img/Dagger_Icons_External-link.svg | 1 + .../static/img/Dagger_Icons_Help.svg | 1 + .../static/img/Dagger_Icons_Info.svg | 1 + .../static/img/Dagger_Icons_Note.svg | 1 + .../static/img/Dagger_Icons_Search.svg | 1 + .../static/img/Dagger_Icons_Tip.svg | 1 + tools/daggosaurus/yarn.lock | 57 +++- 26 files changed, 673 insertions(+), 230 deletions(-) delete mode 100644 tools/daggosaurus/src/css/custom.css create mode 100644 tools/daggosaurus/src/css/custom.scss create mode 100644 tools/daggosaurus/src/theme/DocPaginator/Dagger_Icons_Arrow-next.svg create mode 100644 tools/daggosaurus/src/theme/DocPaginator/Dagger_Icons_Arrow-previous.svg create mode 100644 tools/daggosaurus/src/theme/DocPaginator/index.js create mode 100644 tools/daggosaurus/src/theme/SearchBar/index.js create mode 100644 tools/daggosaurus/src/theme/SearchBar/styles.css rename tools/daggosaurus/{static/img => src/theme/Toggle}/Icon_Day-mode.svg (100%) rename tools/daggosaurus/{static/img => src/theme/Toggle}/Icon_Night-mode.svg (100%) create mode 100644 tools/daggosaurus/static/img/Dagger_Icons_Arrow-bottom.svg create mode 100644 tools/daggosaurus/static/img/Dagger_Icons_Arrow-left.svg create mode 100644 tools/daggosaurus/static/img/Dagger_Icons_Arrow-right.svg create mode 100644 tools/daggosaurus/static/img/Dagger_Icons_Arrow-top.svg create mode 100644 tools/daggosaurus/static/img/Dagger_Icons_Caution.svg create mode 100644 tools/daggosaurus/static/img/Dagger_Icons_Danger.svg create mode 100644 tools/daggosaurus/static/img/Dagger_Icons_Edit.svg create mode 100644 tools/daggosaurus/static/img/Dagger_Icons_External-link.svg create mode 100644 tools/daggosaurus/static/img/Dagger_Icons_Help.svg create mode 100644 tools/daggosaurus/static/img/Dagger_Icons_Info.svg create mode 100644 tools/daggosaurus/static/img/Dagger_Icons_Note.svg create mode 100644 tools/daggosaurus/static/img/Dagger_Icons_Search.svg create mode 100644 tools/daggosaurus/static/img/Dagger_Icons_Tip.svg diff --git a/tools/daggosaurus/docusaurus.config.js b/tools/daggosaurus/docusaurus.config.js index 6ec71a69..2fdf54cc 100644 --- a/tools/daggosaurus/docusaurus.config.js +++ b/tools/daggosaurus/docusaurus.config.js @@ -19,7 +19,7 @@ module.exports = { themeConfig: { sidebarCollapsible: false, prism: { - theme: require("prism-react-renderer/themes/vsDark"), + theme: require("prism-react-renderer/themes/okaidia"), }, navbar: { logo: { @@ -52,10 +52,13 @@ module.exports = { routeBasePath: "/", }, theme: { - customCss: require.resolve("./src/css/custom.css"), + customCss: require.resolve("./src/css/custom.scss"), }, }, ], ], - plugins: [path.resolve(__dirname, "./custom_plugins")], + plugins: [ + 'docusaurus-plugin-sass', + path.resolve(__dirname, "./custom_plugins") + ], }; diff --git a/tools/daggosaurus/package.json b/tools/daggosaurus/package.json index 47c66890..f0054a8c 100644 --- a/tools/daggosaurus/package.json +++ b/tools/daggosaurus/package.json @@ -19,9 +19,11 @@ "@mdx-js/react": "^1.6.21", "@svgr/webpack": "^5.5.0", "clsx": "^1.1.1", + "docusaurus-plugin-sass": "^0.2.0", "file-loader": "^6.2.0", "react": "^17.0.1", "react-dom": "^17.0.1", + "sass": "^1.34.1", "url-loader": "^4.1.1" }, "browserslist": { diff --git a/tools/daggosaurus/src/css/custom.css b/tools/daggosaurus/src/css/custom.css deleted file mode 100644 index daf6d273..00000000 --- a/tools/daggosaurus/src/css/custom.css +++ /dev/null @@ -1,209 +0,0 @@ -/* stylelint-disable docusaurus/copyright-header */ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ - -/* You can override the default Infima variables here. */ -:root { - --ifm-color-primary: #0e2b3d; - --ifm-color-primary-dark: #131226; - --ifm-color-primary-darker: rgb(31, 165, 136); - --ifm-color-primary-darkest: rgb(26, 136, 112); - --ifm-color-primary-light: #fffef6; - --ifm-color-primary-lighter: rgb(102, 212, 189); - --ifm-color-primary-lightest: rgb(146, 224, 208); - --ifm-color-secondary: #66ac9f50; - --ifm-navbar-height: 5rem; - --ifm-background-color: var(--ifm-color-primary-light); - --ifm-navbar-background-color: var(--ifm-color-primary-light); - --ifm-menu-color: var(--ifm-color-primary-dark); - --ifm-menu-color-active: var(--ifm-color-primary-dark); - --ifm-menu-color-background-hover: #fdf9d7; - --ifm-font-family-base: "Karla", sans-serif; - --ifm-font-family-monospace: "Courier new", sans-serif; - --ifm-code-background: var(--ifm-color-primary); - --ifm-code-font-size: 100%; - --ifm-code-border-radius: 2rem; - --ifm-code-color: var(--ifm-color-primary-light); - --ifm-code-padding-vertical: 0.3rem; - --ifm-code-padding-horizontal: 0.5rem; - --ifm-h2-font-size: 2rem; - --ifm-menu-color-background-active: var(--ifm-color-primary); - --ifm-menu-color-active: var(--ifm-color-primary-light); - --ifm-leading-desktop: 2; - --ifm-toc-border-color: transparent; - --ifm-toc-link-color: var(--ifm-color-primary-dark); - --ifm-font-color-base: var(--ifm-color-primary-dark); - --ifm-link-color: var(--ifm-color-primary-dark); - --ifm-link-hover-color: var(--ifm-color-primary); - --ifm-pre-padding: 2rem; - --ifm-pagination-nav-border-radius: 2rem; -} - -html[data-theme="dark"] { - --ifm-background-color: var(--ifm-color-primary-dark); - --ifm-navbar-background-color: transparent; - --ifm-menu-color-active: var(--ifm-color-primary-light); - --ifm-link-color: var(--ifm-color-primary-light); - --ifm-link-hover-color: var(--ifm-color-primary-light); - --ifm-toc-link-color: var(--ifm-color-primary-light); - --ifm-pagination-nav-color-hover: var(--ifm-color-primary-light); -} - -/* global */ - -h1, -h2, -h3 { - font-family: "Poppins", sans-serif; -} - -h2 { - font-weight: 700; - line-height: 32px; -} - -.markdown > h2 { - --ifm-h2-font-size: 1.5rem; -} - -p { - font-size: 18px; - font-weight: 400; - line-height: 24px; -} - -#__docusaurus { - background-color: var(--ifm-color-primary-light); -} - -html[data-theme="dark"] #__docusaurus { - background: linear-gradient( - 180deg, - var(--ifm-color-primary-dark), - var(--ifm-color-primary) - ); -} - -.docusaurus-highlight-code-line { - background-color: rgb(72, 77, 91); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); -} - -/* navbar */ -.navbar__brand { - height: var(--ifm-navbar-height); -} - -.navbar { - max-width: var(--ifm-container-width-xl); - align-self: center; - box-shadow: none; -} - -/* main */ -.main-wrapper { - max-width: var(--ifm-container-width-xl); - align-self: center; -} - -main[class^="docMainContainer"] { - background: #ffffff; - box-shadow: 0px 4px 16px 4px #13122610; - border-radius: 2rem; - margin-top: 1rem; -} - -html[data-theme="dark"] main[class^="docMainContainer"] { - background: var(--ifm-color-primary); - box-shadow: 0px 4px 16px 4px #13122610; - border-radius: 2rem; - margin-top: 1rem; - color: #fffef6; -} - -/* table-of-contents */ -.table-of-contents { - font-size: 1rem; -} - -.table-of-contents__link--active { - font-weight: bold; -} -html[data-theme="dark"] .table-of-contents__link--active, -html[data-theme="dark"] .table-of-contents__link:hover { - color: var(--ifm-color-primary-light); -} - -/* codeBlock */ -div[class^="codeBlock"] { - border-radius: var(--ifm-code-border-radius); - background-color: var(--ifm-color-primary) !important; -} -html[data-theme="dark"] div[class^="codeBlock"] { - background-color: var(--ifm-color-primary-light) !important; -} - -div[class^="codeBlockLines"] .token-line { - color: var(--ifm-color-primary-light) !important; -} -html[data-theme="dark"] div[class^="codeBlockLines"] .token-line { - color: var(--ifm-color-primary) !important; -} -/* badge */ -.badge--secondary { - color: var(--ifm-color-primary-dark); -} - -/* hash-link */ -.hash-link { - color: #40b8bb; -} - -.hash-link:hover { - color: #175761; -} - -.hash-link:focus { - color: var(--ifm-color-primary-dark); -} - -/* link */ -.menu__link { - border-radius: 2rem; -} - -.menu__link:focus { - background-color: var(--ifm-color-primary-dark); - color: var(--ifm-color-primary-light); -} - -.menu__link:active { - background-color: var(--ifm-color-primary); - color: var(--ifm-color-primary-light); -} - -html[data-theme="dark"] .menu__link { - color: var(--ifm-color-primary-light); -} - -html[data-theme="dark"] .menu__link:hover { - color: var(--ifm-color-primary-dark); -} -html[data-theme="dark"] .menu__link[href=""]:hover, -html[data-theme="dark"] .menu__link[href="#"]:hover { - color: var(--ifm-color-primary-light); -} - -html[data-theme="dark"] .menu__link:focus { - color: var(--ifm-color-primary-light); -} - -html[data-theme="dark"] .menu__link:active { - background-color: var(--ifm-color-primary-light); - color: var(--ifm-color-primary-dark); -} diff --git a/tools/daggosaurus/src/css/custom.scss b/tools/daggosaurus/src/css/custom.scss new file mode 100644 index 00000000..eb201a83 --- /dev/null +++ b/tools/daggosaurus/src/css/custom.scss @@ -0,0 +1,322 @@ +@use "sass:meta"; + +/* stylelint-disable docusaurus/copyright-header */ +/** + * Any CSS included here will be global. The classic template + * bundles Infima by default. Infima is a CSS framework designed to + * work well for content-centric websites. + */ + +/* You can override the default Infima variables here. */ +:root { + --ifm-color-primary: #0e2b3d; + --ifm-color-primary-dark: #131226; + --ifm-color-primary-darker: rgb(31, 165, 136); + --ifm-color-primary-darkest: rgb(26, 136, 112); + --ifm-color-primary-light: #fffef6; + --ifm-color-primary-lighter: rgb(102, 212, 189); + --ifm-color-primary-lightest: rgb(146, 224, 208); + --ifm-color-secondary: #f8fad8; + --ifm-color-success: #fcc009; + --ifm-color-info: #40b9bc; + --ifm-color-warning: #ef7b1a; + --ifm-color-danger: #be1d43; + --ifm-navbar-height: 5rem; + --ifm-background-color: var(--ifm-color-primary-light); + --ifm-navbar-background-color: var(--ifm-color-primary-light); + --ifm-menu-color: var(--ifm-color-primary-dark); + --ifm-menu-color-active: var(--ifm-color-primary-dark); + --ifm-menu-color-background-hover: #fdf9d7; + --ifm-font-family-base: "Karla", sans-serif; + --ifm-font-family-monospace: "Courier new", sans-serif; + --ifm-code-background: var(--ifm-color-primary); + --ifm-code-font-size: 100%; + --ifm-code-border-radius: 2rem; + --ifm-code-color: var(--ifm-color-primary-light); + --ifm-code-padding-vertical: 0.125rem; + --ifm-code-padding-horizontal: 0.3rem; + --ifm-h2-font-size: 2rem; + --ifm-menu-color-background-active: var(--ifm-color-primary); + --ifm-menu-color-active: var(--ifm-color-primary-light); + --ifm-leading-desktop: 1; + --ifm-toc-border-color: transparent; + --ifm-toc-link-color: var(--ifm-color-primary-dark); + --ifm-font-color-base: var(--ifm-color-primary-dark); + --ifm-link-color: var(--ifm-color-primary-dark); + --ifm-link-hover-color: var(--ifm-color-primary); + --ifm-pre-padding: 2rem; + --ifm-pagination-nav-border-radius: 0; +} + +html[data-theme="dark"] { + --ifm-background-color: var(--ifm-color-primary-dark); + --ifm-navbar-background-color: transparent; + --ifm-menu-color-active: var(--ifm-color-primary-light); + --ifm-link-color: var(--ifm-color-primary-light); + --ifm-link-hover-color: var(--ifm-color-primary-light); + --ifm-toc-link-color: var(--ifm-color-primary-light); + --ifm-pagination-nav-color-hover: var(--ifm-color-primary-light); + --ifm-tabs-color-active: var(--ifm-color-primary-light); +} + +/* global */ + +h1, +h2, +h3 { + font-family: "Poppins", sans-serif; +} + +h2 { + font-weight: 700; + line-height: 32px; +} + +.markdown > h2 { + --ifm-h2-font-size: 1.5rem; +} + +p { + font-size: 18px; + font-weight: 400; + line-height: 24px; +} + +a[class*="menuLinkExternal"]:after { + background: url("/img/Dagger_Icons_External-link.svg") no-repeat; +} + +#__docusaurus { + background-color: var(--ifm-color-primary-light); + + html[data-theme="dark"] & { + background: linear-gradient( + 180deg, + var(--ifm-color-primary-dark), + var(--ifm-color-primary) + ); + } +} + +.docusaurus-highlight-code-line { + background-color: rgb(72, 77, 91); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); +} + +/* navbar */ +.navbar__brand { + height: var(--ifm-navbar-height); +} + +.navbar { + max-width: 1620px; + align-self: center; + box-shadow: none; +} + +// sidebar + +div[class^="docSidebarContainer"] { + width: 250px; + margin-right: 3rem; + + div[class^="sidebar"] { + width: 250px; + } +} + +/* main */ +.main-wrapper { + align-self: center; +} + +main[class^="docMainContainer"] { + background: #ffffff; + box-shadow: 0px 4px 16px 4px #13122610; + border-radius: 2rem; + margin-top: 1rem; + padding-top: 2rem; + padding-left: 2rem; + padding-right: 2rem; + + html[data-theme="dark"] & { + background: var(--ifm-color-primary); + box-shadow: 0px 4px 16px 4px #13122610; + border-radius: 2rem; + margin-top: 1rem; + color: #fffef6; + } +} + +/* table-of-contents */ +.table-of-contents { + font-size: 1rem; +} + +.table-of-contents__link--active { + font-weight: bold; +} + +html[data-theme="dark"] .table-of-contents__link { + &--active, + &:hover { + color: var(--ifm-color-primary-light); + } +} + +// tabs + +/* codeBlock */ +div[class^="codeBlock"] { + border-radius: var(--ifm-code-border-radius); + background-color: var(--ifm-color-primary-dark) !important; + margin-bottom: 2.5rem; + + div[class^="codeBlockTitle"] { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } +} + +div[class^="codeBlockLines"] { + margin-bottom: 0; + .token-line { + color: var(--ifm-color-primary-light) !important; + } +} + +button[class^="copyButton"] { + background-color: var(--ifm-color-primary-light); + color: var(--ifm-color-primary-dark); +} + +/* badge */ +.badge--secondary { + color: var(--ifm-color-primary-dark); +} + +/* hash-link */ +.hash-link { + color: #40b8bb; + + &:hover { + color: #175761; + } + + &:focus { + color: var(--ifm-color-primary-dark); + } +} + +/* menu */ +.menu__list { + padding-top: 3.5rem; + + & > .menu__list-item > & { + padding-top: 0; + } +} + +.menu__link { + border-radius: 0; + + &:focus { + background-color: var(--ifm-color-primary-dark); + color: var(--ifm-color-primary-light); + } + &:active { + background-color: var(--ifm-color-primary); + color: var(--ifm-color-primary-light); + } + + html[data-theme="dark"] & { + color: var(--ifm-color-primary-light); + } + + html[data-theme="dark"] &:hover { + color: var(--ifm-color-primary-dark); + } + + html[data-theme="dark"] &--active:hover { + color: var(--ifm-color-primary-light); + } + + html[data-theme="dark"] &:not([href]) { + color: var(--ifm-color-primary-light); + } + + html[data-theme="dark"] &:focus { + color: var(--ifm-color-primary-light); + } + + html[data-theme="dark"] &:active { + background-color: var(--ifm-color-primary-light); + color: var(--ifm-color-primary-dark); + } +} + +/* docsearch */ +.DocSearch-Button-Container { + .DocSearch-Search-Icon { + display: none; + } + &:before { + content: url("/img/Dagger_Icons_Search.svg"); + display: block; + width: 20px; + height: 20px; + } +} + +/* pagination */ +.pagination-nav__label svg { + vertical-align: middle; +} + +/* admonition */ + +div[class*="admonition-"] .admonition-icon svg { + display: none; +} + +@mixin admonitionIcon($args...) { + @each $name, $path in meta.keywords($args) { + $bgColor: if( + $name==danger, + var(--ifm-color-primary-light), + var(--ifm-color-primary-dark) + ); + .admonition-#{$name} .admonition-icon::before { + mask: url($path); + content: ""; + background-color: $bgColor; + display: block; + width: 22px; + height: 22px; + } + } +} + +@include admonitionIcon( + $note: "/img/Dagger_Icons_Note.svg", + $tip: "/img/Dagger_Icons_Tip.svg", + $info: "/img/Dagger_Icons_Info.svg", + $caution: "/img/Dagger_Icons_Caution.svg", + $danger: "/img/Dagger_Icons_Danger.svg" +); + +$alert: secondary, success, info, warning, danger; + +@each $name in $alert { + $color: if( + $name==danger, + var(--ifm-color-primary-light), + var(--ifm-color-primary-dark) + ); + + .admonition.alert--#{$name} { + color: $color; + } +} diff --git a/tools/daggosaurus/src/theme/DocPaginator/Dagger_Icons_Arrow-next.svg b/tools/daggosaurus/src/theme/DocPaginator/Dagger_Icons_Arrow-next.svg new file mode 100644 index 00000000..a0a321c6 --- /dev/null +++ b/tools/daggosaurus/src/theme/DocPaginator/Dagger_Icons_Arrow-next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/src/theme/DocPaginator/Dagger_Icons_Arrow-previous.svg b/tools/daggosaurus/src/theme/DocPaginator/Dagger_Icons_Arrow-previous.svg new file mode 100644 index 00000000..4b2c5b05 --- /dev/null +++ b/tools/daggosaurus/src/theme/DocPaginator/Dagger_Icons_Arrow-previous.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/src/theme/DocPaginator/index.js b/tools/daggosaurus/src/theme/DocPaginator/index.js new file mode 100644 index 00000000..50f6f498 --- /dev/null +++ b/tools/daggosaurus/src/theme/DocPaginator/index.js @@ -0,0 +1,61 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React from 'react'; +import Link from '@docusaurus/Link'; +import Translate, {translate} from '@docusaurus/Translate'; +import DocPaginatorPrev from "./Dagger_Icons_Arrow-previous.svg" +import DocPaginatorNext from "./Dagger_Icons_Arrow-next.svg" + +function DocPaginator(props) { + const {metadata} = props; + return ( + + ); +} + +export default DocPaginator; diff --git a/tools/daggosaurus/src/theme/SearchBar/index.js b/tools/daggosaurus/src/theme/SearchBar/index.js new file mode 100644 index 00000000..4331e973 --- /dev/null +++ b/tools/daggosaurus/src/theme/SearchBar/index.js @@ -0,0 +1,204 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React, { useState, useRef, useCallback, useMemo } from 'react'; +import { createPortal } from 'react-dom'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { useHistory } from '@docusaurus/router'; +import { useBaseUrlUtils } from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; +import Head from '@docusaurus/Head'; +import useSearchQuery from '@theme/hooks/useSearchQuery'; +import { DocSearchButton, useDocSearchKeyboardEvents } from '@docsearch/react'; +import useAlgoliaContextualFacetFilters from '@theme/hooks/useAlgoliaContextualFacetFilters'; +import { translate } from '@docusaurus/Translate'; + +let DocSearchModal = null; + +function Hit({ hit, children }) { + return {children}; +} + +function ResultsFooter({ state, onClose }) { + const { generateSearchPageLink } = useSearchQuery(); + + return ( + + See all {state.context.nbHits} results + + ); +} + +function DocSearch({ contextualSearch, ...props }) { + const { siteMetadata } = useDocusaurusContext(); + + const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters(); + + const configFacetFilters = props.searchParameters?.facetFilters ?? []; + + const facetFilters = contextualSearch + ? // Merge contextual search filters with config filters + [...contextualSearchFacetFilters, ...configFacetFilters] + : // ... or use config facetFilters + configFacetFilters; + + // we let user override default searchParameters if he wants to + const searchParameters = { + ...props.searchParameters, + facetFilters, + }; + + const { withBaseUrl } = useBaseUrlUtils(); + const history = useHistory(); + const searchContainer = useRef(null); + const searchButtonRef = useRef(null); + const [isOpen, setIsOpen] = useState(false); + const [initialQuery, setInitialQuery] = useState(null); + + const importDocSearchModalIfNeeded = useCallback(() => { + if (DocSearchModal) { + return Promise.resolve(); + } + + return Promise.all([ + import('@docsearch/react/modal'), + import('@docsearch/react/style'), + import('./styles.css'), + ]).then(([{ DocSearchModal: Modal }]) => { + DocSearchModal = Modal; + }); + }, []); + + const onOpen = useCallback(() => { + importDocSearchModalIfNeeded().then(() => { + searchContainer.current = document.createElement('div'); + document.body.insertBefore( + searchContainer.current, + document.body.firstChild, + ); + setIsOpen(true); + }); + }, [importDocSearchModalIfNeeded, setIsOpen]); + + const onClose = useCallback(() => { + setIsOpen(false); + searchContainer.current.remove(); + }, [setIsOpen]); + + const onInput = useCallback( + (event) => { + importDocSearchModalIfNeeded().then(() => { + setIsOpen(true); + setInitialQuery(event.key); + }); + }, + [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery], + ); + + const navigator = useRef({ + navigate({ itemUrl }) { + history.push(itemUrl); + }, + }).current; + + const transformItems = useRef((items) => { + return items.map((item) => { + // We transform the absolute URL into a relative URL. + // Alternatively, we can use `new URL(item.url)` but it's not + // supported in IE. + const a = document.createElement('a'); + a.href = item.url; + + return { + ...item, + url: withBaseUrl(`${a.pathname}${a.hash}`), + }; + }); + }).current; + + const resultsFooterComponent = useMemo( + () => (footerProps) => , + [onClose], + ); + + const transformSearchClient = useCallback( + (searchClient) => { + searchClient.addAlgoliaAgent( + 'docusaurus', + siteMetadata.docusaurusVersion, + ); + + return searchClient; + }, + [siteMetadata.docusaurusVersion], + ); + + useDocSearchKeyboardEvents({ + isOpen, + onOpen, + onClose, + onInput, + searchButtonRef, + }); + + const translatedSearchLabel = translate({ + id: 'theme.SearchBar.label', + message: 'Search', + description: 'The ARIA label and placeholder for search button', + }); + + return ( + <> + + {/* This hints the browser that the website will load data from Algolia, + and allows it to preconnect to the DocSearch cluster. It makes the first + query faster, especially on mobile. */} + + + + + + {isOpen && + createPortal( + , + searchContainer.current, + )} + + ); +} + +function SearchBar() { + const { siteConfig } = useDocusaurusContext(); + return ; +} + +export default SearchBar; diff --git a/tools/daggosaurus/src/theme/SearchBar/styles.css b/tools/daggosaurus/src/theme/SearchBar/styles.css new file mode 100644 index 00000000..e57bb046 --- /dev/null +++ b/tools/daggosaurus/src/theme/SearchBar/styles.css @@ -0,0 +1,20 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +:root { + --docsearch-primary-color: var(--ifm-color-primary); + --docsearch-text-color: var(--ifm-font-color-base); +} + +.DocSearch-Button { + transition: all var(--ifm-transition-fast) + var(--ifm-transition-timing-default); +} + +.DocSearch-Container { + z-index: calc(var(--ifm-z-index-fixed) + 1); +} diff --git a/tools/daggosaurus/static/img/Icon_Day-mode.svg b/tools/daggosaurus/src/theme/Toggle/Icon_Day-mode.svg similarity index 100% rename from tools/daggosaurus/static/img/Icon_Day-mode.svg rename to tools/daggosaurus/src/theme/Toggle/Icon_Day-mode.svg diff --git a/tools/daggosaurus/static/img/Icon_Night-mode.svg b/tools/daggosaurus/src/theme/Toggle/Icon_Night-mode.svg similarity index 100% rename from tools/daggosaurus/static/img/Icon_Night-mode.svg rename to tools/daggosaurus/src/theme/Toggle/Icon_Night-mode.svg diff --git a/tools/daggosaurus/src/theme/Toggle/index.js b/tools/daggosaurus/src/theme/Toggle/index.js index cca8dc4a..65525bc2 100644 --- a/tools/daggosaurus/src/theme/Toggle/index.js +++ b/tools/daggosaurus/src/theme/Toggle/index.js @@ -9,8 +9,8 @@ import { useThemeConfig } from '@docusaurus/theme-common'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import clsx from 'clsx'; import styles from './styles.module.css'; -import DarkIcon from "../../../static/img/Icon_Night-mode.svg" -import LightIcon from "../../../static/img/Icon_Day-mode.svg" +import DarkIcon from "./Icon_Night-mode.svg" +import LightIcon from "./Icon_Day-mode.svg" const Dark = ({ icon, style }) => ( diff --git a/tools/daggosaurus/static/img/Dagger_Icons_Arrow-bottom.svg b/tools/daggosaurus/static/img/Dagger_Icons_Arrow-bottom.svg new file mode 100644 index 00000000..dff20183 --- /dev/null +++ b/tools/daggosaurus/static/img/Dagger_Icons_Arrow-bottom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/static/img/Dagger_Icons_Arrow-left.svg b/tools/daggosaurus/static/img/Dagger_Icons_Arrow-left.svg new file mode 100644 index 00000000..48aa6359 --- /dev/null +++ b/tools/daggosaurus/static/img/Dagger_Icons_Arrow-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/static/img/Dagger_Icons_Arrow-right.svg b/tools/daggosaurus/static/img/Dagger_Icons_Arrow-right.svg new file mode 100644 index 00000000..324725a2 --- /dev/null +++ b/tools/daggosaurus/static/img/Dagger_Icons_Arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/static/img/Dagger_Icons_Arrow-top.svg b/tools/daggosaurus/static/img/Dagger_Icons_Arrow-top.svg new file mode 100644 index 00000000..4837589e --- /dev/null +++ b/tools/daggosaurus/static/img/Dagger_Icons_Arrow-top.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/static/img/Dagger_Icons_Caution.svg b/tools/daggosaurus/static/img/Dagger_Icons_Caution.svg new file mode 100644 index 00000000..9c335be2 --- /dev/null +++ b/tools/daggosaurus/static/img/Dagger_Icons_Caution.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/static/img/Dagger_Icons_Danger.svg b/tools/daggosaurus/static/img/Dagger_Icons_Danger.svg new file mode 100644 index 00000000..d81445ff --- /dev/null +++ b/tools/daggosaurus/static/img/Dagger_Icons_Danger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/static/img/Dagger_Icons_Edit.svg b/tools/daggosaurus/static/img/Dagger_Icons_Edit.svg new file mode 100644 index 00000000..5b443d84 --- /dev/null +++ b/tools/daggosaurus/static/img/Dagger_Icons_Edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/static/img/Dagger_Icons_External-link.svg b/tools/daggosaurus/static/img/Dagger_Icons_External-link.svg new file mode 100644 index 00000000..5ea7de12 --- /dev/null +++ b/tools/daggosaurus/static/img/Dagger_Icons_External-link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/static/img/Dagger_Icons_Help.svg b/tools/daggosaurus/static/img/Dagger_Icons_Help.svg new file mode 100644 index 00000000..7dff81f2 --- /dev/null +++ b/tools/daggosaurus/static/img/Dagger_Icons_Help.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/static/img/Dagger_Icons_Info.svg b/tools/daggosaurus/static/img/Dagger_Icons_Info.svg new file mode 100644 index 00000000..55ff8149 --- /dev/null +++ b/tools/daggosaurus/static/img/Dagger_Icons_Info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/static/img/Dagger_Icons_Note.svg b/tools/daggosaurus/static/img/Dagger_Icons_Note.svg new file mode 100644 index 00000000..22a38d99 --- /dev/null +++ b/tools/daggosaurus/static/img/Dagger_Icons_Note.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/static/img/Dagger_Icons_Search.svg b/tools/daggosaurus/static/img/Dagger_Icons_Search.svg new file mode 100644 index 00000000..4c911097 --- /dev/null +++ b/tools/daggosaurus/static/img/Dagger_Icons_Search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/static/img/Dagger_Icons_Tip.svg b/tools/daggosaurus/static/img/Dagger_Icons_Tip.svg new file mode 100644 index 00000000..51a258fe --- /dev/null +++ b/tools/daggosaurus/static/img/Dagger_Icons_Tip.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/yarn.lock b/tools/daggosaurus/yarn.lock index f215e184..d9d89caf 100644 --- a/tools/daggosaurus/yarn.lock +++ b/tools/daggosaurus/yarn.lock @@ -2597,6 +2597,21 @@ cheerio@^0.22.0: lodash.reject "^4.4.0" lodash.some "^4.4.0" +"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.1: + version "3.5.1" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a" + integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw== + dependencies: + anymatch "~3.1.1" + braces "~3.0.2" + glob-parent "~5.1.0" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.5.0" + optionalDependencies: + fsevents "~2.3.1" + chokidar@^2.1.8: version "2.1.8" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" @@ -2616,21 +2631,6 @@ chokidar@^2.1.8: optionalDependencies: fsevents "^1.2.7" -chokidar@^3.5.1: - version "3.5.1" - resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a" - integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw== - dependencies: - anymatch "~3.1.1" - braces "~3.0.2" - glob-parent "~5.1.0" - is-binary-path "~2.1.0" - is-glob "~4.0.1" - normalize-path "~3.0.0" - readdirp "~3.5.0" - optionalDependencies: - fsevents "~2.3.1" - chrome-trace-event@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac" @@ -3375,6 +3375,13 @@ dns-txt@^2.0.2: dependencies: buffer-indexof "^1.0.0" +docusaurus-plugin-sass@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.0.tgz#9582a0e66a65b0a8886fe55f1fa42d1576de37d8" + integrity sha512-aH7OpvjY9BplN9bcfrDhPlkHYuMvlf0USoeDjBNoEC3AIn8CwKtpN1YfxXU+M5nGz/ummeTxyEAFY0VzchJW6w== + dependencies: + sass-loader "^10.1.1" + dom-converter@^0.2: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -7295,6 +7302,24 @@ safe-regex@^1.1.0: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== +sass-loader@^10.1.1: + version "10.2.0" + resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.2.0.tgz#3d64c1590f911013b3fa48a0b22a83d5e1494716" + integrity sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw== + dependencies: + klona "^2.0.4" + loader-utils "^2.0.0" + neo-async "^2.6.2" + schema-utils "^3.0.0" + semver "^7.3.2" + +sass@^1.34.1: + version "1.34.1" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.34.1.tgz#30f45c606c483d47b634f1e7371e13ff773c96ef" + integrity sha512-scLA7EIZM+MmYlej6sdVr0HRbZX5caX5ofDT9asWnUJj21oqgsC+1LuNfm0eg+vM0fCTZHhwImTiCU0sx9h9CQ== + dependencies: + chokidar ">=3.0.0 <4.0.0" + sax@^1.2.4, sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" @@ -7382,7 +7407,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0: resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== -semver@^7.3.4, semver@^7.3.5: +semver@^7.3.2, semver@^7.3.4, semver@^7.3.5: version "7.3.5" resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7" integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==