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) =>