docs: 💄 ui enhancement

Signed-off-by: slumbering <slumbering.pierrot@gmail.com>
2021-06-04 17:55:20 +02:00 · 2021-06-04 17:55:20 +02:00 · 9aba5910eb
commit 9aba5910eb
parent fd31afeda0
26 changed files with 673 additions and 230 deletions
--- 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")
+  ],
 };
--- 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": {
--- a/tools/daggosaurus/src/css/custom.css
+++ b/tools/daggosaurus/src/css/custom.css
@ -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);
-}
--- a/tools/daggosaurus/src/css/custom.scss
+++ 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;
+  }
+}
--- a/tools/daggosaurus/src/theme/DocPaginator/Dagger_Icons_Arrow-next.svg
+++ b/tools/daggosaurus/src/theme/DocPaginator/Dagger_Icons_Arrow-next.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M13,7.149A24.806,24.806,0,0,1,8.433,3.558C7.651,2.824,6.47,4,7.255,4.737a30.365,30.365,0,0,0,3.988,3.278A14.369,14.369,0,0,0,7.79,12.076c-.463.963.974,1.809,1.44.841.9-1.877,2.523-3.007,3.943-4.46A.841.841,0,0,0,13,7.149Z"/><path class="cls-1" d="M8.6,7.683A24.806,24.806,0,0,1,4.025,4.092c-.782-.734-1.962.441-1.178,1.179A30.365,30.365,0,0,0,6.835,8.549,14.369,14.369,0,0,0,3.382,12.61c-.462.964.974,1.809,1.44.841.9-1.877,2.523-3.007,3.943-4.46A.841.841,0,0,0,8.6,7.683Z"/></svg>
--- a/tools/daggosaurus/src/theme/DocPaginator/Dagger_Icons_Arrow-previous.svg
+++ b/tools/daggosaurus/src/theme/DocPaginator/Dagger_Icons_Arrow-previous.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M4.757,7.952A30.365,30.365,0,0,0,8.745,4.674c.785-.737-.4-1.913-1.178-1.179A24.764,24.764,0,0,1,3,7.086.842.842,0,0,0,2.827,8.4c1.42,1.452,3.041,2.582,3.944,4.46.465.968,1.9.122,1.439-.842A14.383,14.383,0,0,0,4.757,7.952Z"/><path class="cls-1" d="M11.975,4.029A24.764,24.764,0,0,1,7.4,7.62a.842.842,0,0,0-.169,1.309c1.42,1.452,3.041,2.583,3.943,4.46.466.968,1.9.122,1.44-.841A14.373,14.373,0,0,0,9.165,8.486a30.365,30.365,0,0,0,3.988-3.278C13.937,4.471,12.757,3.3,11.975,4.029Z"/></svg>
--- a/tools/daggosaurus/src/theme/DocPaginator/index.js
+++ 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 (
+    <nav
+      className="pagination-nav"
+      aria-label={translate({
+        id: 'theme.docs.paginator.navAriaLabel',
+        message: 'Docs pages navigation',
+        description: 'The ARIA label for the docs pagination',
+      })}>
+      <div className="pagination-nav__item">
+        {metadata.previous && (
+          <Link
+            className="pagination-nav__link"
+            to={metadata.previous.permalink}>
+            <div className="pagination-nav__sublabel">
+              <Translate
+                id="theme.docs.paginator.previous"
+                description="The label used to navigate to the previous doc">
+                Previous
+              </Translate>
+            </div>
+            <div className="pagination-nav__label">
+              <DocPaginatorPrev height={23}/>{metadata.previous.title}
+            </div>
+          </Link>
+        )}
+      </div>
+      <div className="pagination-nav__item pagination-nav__item--next">
+        {metadata.next && (
+          <Link className="pagination-nav__link" to={metadata.next.permalink}>
+            <div className="pagination-nav__sublabel">
+              <Translate
+                id="theme.docs.paginator.next"
+                description="The label used to navigate to the next doc">
+                Next
+              </Translate>
+            </div>
+            <div className="pagination-nav__label">
+              {metadata.next.title}<DocPaginatorNext height={23}/>
+            </div>
+          </Link>
+        )}
+      </div>
+    </nav>
+  );
+}
+
+export default DocPaginator;
--- a/tools/daggosaurus/src/theme/SearchBar/index.js
+++ 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 <Link to={hit.url}>{children}</Link>;
+}
+
+function ResultsFooter({ state, onClose }) {
+  const { generateSearchPageLink } = useSearchQuery();
+
+  return (
+    <Link to={generateSearchPageLink(state.query)} onClick={onClose}>
+      See all {state.context.nbHits} results
+    </Link>
+  );
+}
+
+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) => <ResultsFooter {...footerProps} onClose={onClose} />,
+    [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 (
+    <>
+      <Head>
+        {/* 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. */}
+        <link
+          rel="preconnect"
+          href={`https://${props.appId}-dsn.algolia.net`}
+          crossOrigin="anonymous"
+        />
+      </Head>
+
+      <DocSearchButton
+        onTouchStart={importDocSearchModalIfNeeded}
+        onFocus={importDocSearchModalIfNeeded}
+        onMouseOver={importDocSearchModalIfNeeded}
+        onClick={onOpen}
+        ref={searchButtonRef}
+        translations={{
+          buttonText: translatedSearchLabel,
+          buttonAriaLabel: translatedSearchLabel,
+        }}
+      />
+
+      {isOpen &&
+        createPortal(
+          <DocSearchModal
+            onClose={onClose}
+            initialScrollY={window.scrollY}
+            initialQuery={initialQuery}
+            navigator={navigator}
+            transformItems={transformItems}
+            hitComponent={Hit}
+            resultsFooterComponent={resultsFooterComponent}
+            transformSearchClient={transformSearchClient}
+            {...props}
+            searchParameters={searchParameters}
+          />,
+          searchContainer.current,
+        )}
+    </>
+  );
+}
+
+function SearchBar() {
+  const { siteConfig } = useDocusaurusContext();
+  return <DocSearch {...siteConfig.themeConfig.algolia} />;
+}
+
+export default SearchBar;
--- a/tools/daggosaurus/src/theme/SearchBar/styles.css
+++ 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);
+}
--- a/tools/daggosaurus/src/theme/Toggle/Icon_Day-mode.svg
+++ b/tools/daggosaurus/src/theme/Toggle/Icon_Day-mode.svg
--- a/tools/daggosaurus/src/theme/Toggle/Icon_Night-mode.svg
+++ b/tools/daggosaurus/src/theme/Toggle/Icon_Night-mode.svg
--- 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 }) => (
  <span className={clsx(styles.toggle, styles.dark)} style={style}>
--- a/tools/daggosaurus/static/img/Dagger_Icons_Arrow-bottom.svg
+++ b/tools/daggosaurus/static/img/Dagger_Icons_Arrow-bottom.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M3.318,7.24a24.776,24.776,0,0,1,4.224,3.993.842.842,0,0,0,1.32-.026c1.227-1.618,2.107-3.387,3.831-4.556.889-.6-.159-1.9-1.044-1.3A14.369,14.369,0,0,0,8.14,9.364,30.457,30.457,0,0,0,4.311,5.9C3.466,5.234,2.477,6.575,3.318,7.24Z"/></svg>
--- a/tools/daggosaurus/static/img/Dagger_Icons_Arrow-left.svg
+++ b/tools/daggosaurus/static/img/Dagger_Icons_Arrow-left.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M9.771,3.462A24.806,24.806,0,0,1,5.2,7.053a.841.841,0,0,0-.169,1.308c1.42,1.453,3.041,2.583,3.943,4.46.466.968,1.9.122,1.44-.841A14.369,14.369,0,0,0,6.961,7.919a30.445,30.445,0,0,0,3.988-3.278C11.733,3.9,10.553,2.727,9.771,3.462Z"/></svg>
--- a/tools/daggosaurus/static/img/Dagger_Icons_Arrow-right.svg
+++ b/tools/daggosaurus/static/img/Dagger_Icons_Arrow-right.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M6.229,3.462A24.806,24.806,0,0,0,10.8,7.053a.841.841,0,0,1,.169,1.308c-1.42,1.453-3.041,2.583-3.943,4.46-.466.968-1.9.122-1.44-.841A14.369,14.369,0,0,1,9.039,7.919,30.445,30.445,0,0,1,5.051,4.641C4.267,3.9,5.447,2.727,6.229,3.462Z"/></svg>
--- a/tools/daggosaurus/static/img/Dagger_Icons_Arrow-top.svg
+++ b/tools/daggosaurus/static/img/Dagger_Icons_Arrow-top.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M3.318,9.128A24.776,24.776,0,0,0,7.542,5.135a.842.842,0,0,1,1.32.026c1.227,1.618,2.107,3.387,3.831,4.556.889.6-.159,1.9-1.044,1.3A14.369,14.369,0,0,1,8.14,7a30.457,30.457,0,0,1-3.829,3.463C3.466,11.134,2.477,9.793,3.318,9.128Z"/></svg>
--- a/tools/daggosaurus/static/img/Dagger_Icons_Caution.svg
+++ b/tools/daggosaurus/static/img/Dagger_Icons_Caution.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M8.417,10.084a.714.714,0,1,0,.7.713A.71.71,0,0,0,8.417,10.084Z"/><path class="cls-1" d="M9.286,6.891c-.27-1.253-1.812-.979-1.543.274a3.67,3.67,0,0,1,.063,1.547c-.343,1.205,1.235,1.437,1.534.215A6.764,6.764,0,0,0,9.37,7.6,3.209,3.209,0,0,0,9.286,6.891Z"/><path class="cls-1" d="M13.941,12.874q-1.092-2.6-2.183-5.206A48.831,48.831,0,0,0,9.393,2.5a.644.644,0,0,0-.465-.35.49.49,0,0,0-.828.078q-3.163,4.713-6,9.707a.8.8,0,0,0,.574,1.175l10.69.935C13.907,14.1,14.145,13.362,13.941,12.874ZM3.864,11.657q2.266-3.932,4.75-7.68C9.316,5.33,9.9,6.761,10.5,8.182q.882,2.1,1.765,4.209Z"/></svg>
--- a/tools/daggosaurus/static/img/Dagger_Icons_Danger.svg
+++ b/tools/daggosaurus/static/img/Dagger_Icons_Danger.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M12.637,7.241A10.542,10.542,0,0,0,11.554,4.1,3.982,3.982,0,0,0,8.766,2a.885.885,0,0,0-.378-.024.4.4,0,0,0-.318.291.521.521,0,0,0,.07.333,5.8,5.8,0,0,0,.406.681c.1.143.193.291.282.446a2.74,2.74,0,0,1-.291,2.924c-.455.376-1.005.065-1.387-.263A1.432,1.432,0,0,1,6.825,5.7c-.018-.064-.036-.126-.055-.182l-.034-.108a2.45,2.45,0,0,0-.444-.939c-.3-.273-.62,0-.831.175l-.044.038a5.737,5.737,0,0,0-1.03,1.268c-.055.083-.11.166-.164.246a6.566,6.566,0,0,0-.754,1.354,5.236,5.236,0,0,0,.719,4.575,4.084,4.084,0,0,0,3.079,2.03c.115.006.228.008.34.008a4.931,4.931,0,0,0,3.87-1.668A6.141,6.141,0,0,0,12.637,7.241Zm-2.014.849c-.015.176-.139.957-.187,1.263-.019.122-.034.212-.039.245a2.669,2.669,0,0,0-.09.38,1.484,1.484,0,0,1-.193.56,3.661,3.661,0,0,1-.655.848,1.812,1.812,0,0,1-1.242.561,1.007,1.007,0,0,1-.719-.422.906.906,0,0,1-.2-.782,2.3,2.3,0,0,1,1.226-1.3c.155-.079.32-.15.479-.218a4.936,4.936,0,0,0,.82-.415,3.33,3.33,0,0,0,.491-.371,1.235,1.235,0,0,0,.209-.23l.015-.032a.688.688,0,0,1,.043-.115A.153.153,0,0,1,10.623,8.09Z"/></svg>
--- a/tools/daggosaurus/static/img/Dagger_Icons_Edit.svg
+++ b/tools/daggosaurus/static/img/Dagger_Icons_Edit.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M6.4,12.426a60.626,60.626,0,0,0,5.362-5.9.736.736,0,0,0,.085-.157,1.136,1.136,0,0,0,.345-.09,3.278,3.278,0,0,0,1.622-1.426A.844.844,0,0,0,13.9,4.6a.756.756,0,0,0-.022-.779c-.613-.858-1.157-1.937-2.333-2.026a.968.968,0,0,0-.2.005.786.786,0,0,0-.533.243c-.53.526-1.2,1.126-1.193,1.935a.921.921,0,0,0,.015.152.341.341,0,0,0-.066.022.608.608,0,0,0-.745.283A15.045,15.045,0,0,1,6.5,6.954c-.863.911-1.716,1.83-2.62,2.7a.629.629,0,0,0-.18.309.927.927,0,0,0-.177.182,4.583,4.583,0,0,0-.768,2.018.831.831,0,0,0,.048.434.777.777,0,0,0-.142.11l-.308.308a.653.653,0,1,0,.923.923l.28-.28a.586.586,0,0,0,.637.194,4.108,4.108,0,0,0,2.1-1.34A.626.626,0,0,0,6.4,12.426ZM4,12.547a.285.285,0,0,0,.015-.052,4.518,4.518,0,0,1,.272-1.018c.235.185.478.359.721.535A2.972,2.972,0,0,1,4,12.547Zm6.422-6.4A55.715,55.715,0,0,1,5.9,11.077a.9.9,0,0,0-.117-.114c-.262-.19-.526-.374-.774-.581.83-.811,1.624-1.659,2.42-2.5A23.325,23.325,0,0,0,9.732,5.445,2.367,2.367,0,0,1,10.426,6.146Zm1.439-2.278c.1.137.2.278.291.42a2.164,2.164,0,0,1-.8.522.63.63,0,0,0-.233.18c-.085-.094-.171-.187-.261-.275a.757.757,0,0,0,.45-.691c.025-.044.052-.088.081-.131l.015-.023a.654.654,0,0,0,.053-.06c.057-.066.119-.128.18-.192A2.257,2.257,0,0,1,11.865,3.868Z"/></svg>
--- a/tools/daggosaurus/static/img/Dagger_Icons_External-link.svg
+++ b/tools/daggosaurus/static/img/Dagger_Icons_External-link.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M13.892,2.065c-1.648-.019-3.226.262-4.821-.3C8.248,1.48,7.909,2.79,8.727,3.077a9.147,9.147,0,0,0,3.354.377c-.045.049-.089.095-.134.151a21.771,21.771,0,0,1-3.809,3.11C6.432,7.848,7.112,9.3,8.818,8.168c.834-.565,2.044-1.545,2.8-2.2.361-.321.809-.67,1.192-1.025-.1.876-.149,1.757-.178,2.649-.027.873,1.326.871,1.353,0a20.058,20.058,0,0,1,.562-4.683A.682.682,0,0,0,13.892,2.065Z"/><path class="cls-1" d="M12.13,8.3h0a1.316,1.316,0,0,0-1-.151.25.25,0,0,0-.163.23,16.125,16.125,0,0,1-.292,2.491,4.539,4.539,0,0,0-.048.64,2.291,2.291,0,0,1-.135.868c-.19.415-.448.45-1.119.5a24.242,24.242,0,0,1-4.056-.089l-.3-.021c-.738-.047-1.2-.105-1.289-.662-.118-.7-.221-1.4-.32-2.075L3.313,9.4A1.861,1.861,0,0,1,3.3,8.9a7.544,7.544,0,0,1,.175-1.677,4.015,4.015,0,0,0,.074-.507,1.228,1.228,0,0,1,.226-.744.886.886,0,0,1,.666-.212l.428-.007c.514-.014,1.036-.011,1.6-.006.143,0,.294.01.449.02a3.868,3.868,0,0,0,1.119-.032,1.012,1.012,0,0,0,.83-1.087C8.741,4,8.044,4.083,7.625,4.131a2.425,2.425,0,0,1-.294.024c-.416,0-.834,0-1.253,0-.563,0-1.145.01-1.714,0-.087,0-.176,0-.267,0a2.584,2.584,0,0,0-1.813.685A3.075,3.075,0,0,0,1.688,7c-.013.965.057,1.929.125,2.862l.02.269c.019.261.028.525.036.781a6.766,6.766,0,0,0,.421,2.539,1.027,1.027,0,0,0,.776.663,11.054,11.054,0,0,0,3.151.227l1.145-.047c.355-.012.821-.025,1.281-.009.151.005.3,0,.441,0a5.186,5.186,0,0,1,.623.017,5.038,5.038,0,0,0,.738.039,2.163,2.163,0,0,0,.606-.1c1.177-.386,1.167-1.984,1.159-3.151,0-.211,0-.409,0-.569.017-.358.048-.723.079-1.076.022-.26.044-.525.063-.79a.256.256,0,0,0-.044-.159A.726.726,0,0,0,12.13,8.3Z"/></svg>
--- a/tools/daggosaurus/static/img/Dagger_Icons_Help.svg
+++ b/tools/daggosaurus/static/img/Dagger_Icons_Help.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.241 12.241"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M6.1,8.582a.714.714,0,1,0,.7.714A.71.71,0,0,0,6.1,8.582Z"/><path class="cls-1" d="M3.525,4.351c-.2.806,1.028,1.148,1.224.343.312-1.28,3.2-.9,2.944.641-.1.575-1.114.526-1.532.734a1.316,1.316,0,0,0-.623,1.659.636.636,0,0,0,1.226-.341c-.089-.326.31-.27.643-.346A2.1,2.1,0,0,0,8.515,6.45a2.28,2.28,0,0,0-.2-2.946C7.179,2.067,3.978,2.484,3.525,4.351Z"/><path class="cls-1" d="M11.862,3.429C10.5-.31,6.122-.379,2.9.389c-.707.168-.419,1.254.278,1.117C.77,3-.839,5.744.465,8.634a6.255,6.255,0,0,0,9.152,2.51A7,7,0,0,0,11.862,3.429Zm-2.3,5.8c-1.6,2.009-4.219,1.919-6.25.645a3.988,3.988,0,0,1-1.136-5.5A5.368,5.368,0,0,1,7.359,1.8a.447.447,0,0,0,.418-.181,3.944,3.944,0,0,1,2.6,2A5.411,5.411,0,0,1,9.56,9.227Z"/></svg>
--- a/tools/daggosaurus/static/img/Dagger_Icons_Info.svg
+++ b/tools/daggosaurus/static/img/Dagger_Icons_Info.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M8.561,11.133a.705.705,0,1,1-.7-.714A.709.709,0,0,1,8.561,11.133Z"/><path class="cls-1" d="M13.621,5.266c-1.36-3.739-5.74-3.808-8.966-3.04-.707.168-.419,1.254.278,1.117C2.53,4.834.92,7.581,2.225,10.471a6.253,6.253,0,0,0,9.151,2.51A7,7,0,0,0,13.621,5.266Zm-2.3,5.8c-1.6,2.009-4.219,1.919-6.249.646a3.988,3.988,0,0,1-1.137-5.5A5.369,5.369,0,0,1,9.118,3.633a.447.447,0,0,0,.418-.181,3.948,3.948,0,0,1,2.6,2A5.413,5.413,0,0,1,11.319,11.064Z"/><path class="cls-1" d="M8.872,7.684a6.84,6.84,0,0,1-.031,1.329c-.3,1.223-1.877.99-1.534-.215a8.327,8.327,0,0,0-.166-3.032C6.872,4.514,8.414,4.24,8.684,5.492A13.882,13.882,0,0,1,8.872,7.684Z"/></svg>
--- a/tools/daggosaurus/static/img/Dagger_Icons_Note.svg
+++ b/tools/daggosaurus/static/img/Dagger_Icons_Note.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M13.621,5.266c-1.36-3.739-5.74-3.808-8.966-3.04-.707.168-.419,1.254.278,1.117C2.53,4.834.92,7.581,2.225,10.471a6.253,6.253,0,0,0,9.151,2.51A7,7,0,0,0,13.621,5.266Zm-2.3,5.8c-1.6,2.009-4.219,1.919-6.249.646a3.988,3.988,0,0,1-1.137-5.5A5.369,5.369,0,0,1,9.118,3.633a.447.447,0,0,0,.418-.181,3.948,3.948,0,0,1,2.6,2A5.413,5.413,0,0,1,11.319,11.064Z"/><path class="cls-1" d="M8.693,7.727c.343-1.2-1.235-1.438-1.534-.215a6.841,6.841,0,0,0-.031,1.329,13.882,13.882,0,0,0,.188,2.192c.269,1.252,1.812.978,1.543-.274A8.327,8.327,0,0,1,8.693,7.727Z"/><path class="cls-1" d="M8.143,6.106a.714.714,0,1,0-.7-.714A.71.71,0,0,0,8.143,6.106Z"/></svg>
--- a/tools/daggosaurus/static/img/Dagger_Icons_Search.svg
+++ b/tools/daggosaurus/static/img/Dagger_Icons_Search.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M13.854,12.518a7.821,7.821,0,0,0-.942-1.2,15.927,15.927,0,0,0-1.765-1.8,1.463,1.463,0,0,0-.427-.239,6.878,6.878,0,0,0,.535-2.416c.048-2.693-2.5-4.579-4.982-4.851A4.666,4.666,0,0,0,3.118,3.1,4.2,4.2,0,0,0,2.086,5.528,5.391,5.391,0,0,0,2,6.975a5.4,5.4,0,0,0,1.186,3.179c1.009,1.115,2.278,1.257,3.725,1.3,1.112.068,2.115.1,2.914-.739a1.3,1.3,0,0,0,.157.171,9.538,9.538,0,0,1,2.358,2.557C12.918,14.761,14.482,13.815,13.854,12.518ZM6.907,9.867c-1.069-.026-2.075-.051-2.729-1.044a4.087,4.087,0,0,1-.579-1.9c.063-.956-.025-2.1.868-2.7a3.616,3.616,0,0,1,1.862-.541,3.552,3.552,0,0,1,3.283,3.2,5.128,5.128,0,0,1-.654,2.339C8.367,10.106,7.788,9.892,6.907,9.867Z"/></svg>
--- a/tools/daggosaurus/static/img/Dagger_Icons_Tip.svg
+++ b/tools/daggosaurus/static/img/Dagger_Icons_Tip.svg
@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M11.308,7.134A3.732,3.732,0,0,0,9.723,4.778a2.077,2.077,0,0,0-2.386-.169A3.033,3.033,0,0,0,4.458,6.523,2.605,2.605,0,0,0,4.5,8.709c.2.416.937.938,1.228,1.47a.46.46,0,0,0-.251.307,10.751,10.751,0,0,0-.612,2.561.5.5,0,0,0,.246.43c.787.44,1.638,1.091,2.45.355a4.783,4.783,0,0,0,1.1-2.6.513.513,0,0,0-.015-.275A3.314,3.314,0,0,0,11.308,7.134ZM7.2,12.627c-.135.272-.314.666-.658.509a7.172,7.172,0,0,1-.665-.364,6.1,6.1,0,0,1,.272-1.123l.811.177c.156.033.332.087.506.109A4.333,4.333,0,0,1,7.2,12.627Zm.81-2.863a.435.435,0,0,0-.421.32l-.114.459,0,.019H7.452l-.515-.112a1.775,1.775,0,0,0-.229-.973c-.278-.538-.894-.837-1.11-1.411A1.83,1.83,0,0,1,7.03,5.894a1.552,1.552,0,0,1,1.311-.23c0-.014.008-.029.011-.043a2.239,2.239,0,0,1,.989.56,2.353,2.353,0,0,1,.712,1.429A1.989,1.989,0,0,1,8.008,9.764Z"/><path class="cls-1" d="M12.964,6.5c.537-.5,1.331.3.811.793a1.965,1.965,0,0,1-1.055.544c-.691.213-1-.87-.3-1.1.214-.077.419-.17.623-.264.128-.052-.353.156-.208.087A.872.872,0,0,1,13,6.465Z"/><path class="cls-1" d="M13.723,11.132c.666.3.085,1.272-.563.982-.427-.188-.473-.32-.832-.465-.665-.273-.375-1.365.3-1.1C13.164,10.762,13.2,10.9,13.723,11.132Z"/><path class="cls-1" d="M5.854,2.516c-.26-.682.839-.959,1.092-.3.169.435.109.561.259.917.278.664-.7,1.231-.989.567C5.987,3.173,6.059,3.047,5.854,2.516Z"/><path class="cls-1" d="M12.211,3.241c-.247.461-.24.319-.5.788a.574.574,0,0,1-.99-.58c.264-.469.257-.327.505-.788C11.58,2.013,12.561,2.584,12.211,3.241Z"/><path class="cls-1" d="M3.177,5.739A3.368,3.368,0,0,1,2.2,5.091c-.563-.436,0-1.417.58-.982a3.227,3.227,0,0,0,.974.648C4.423,5.047,3.842,6.02,3.177,5.739Z"/></svg>
--- 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==
				`@ -0,0 +1 @@`
				<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M13,7.149A24.806,24.806,0,0,1,8.433,3.558C7.651,2.824,6.47,4,7.255,4.737a30.365,30.365,0,0,0,3.988,3.278A14.369,14.369,0,0,0,7.79,12.076c-.463.963.974,1.809,1.44.841.9-1.877,2.523-3.007,3.943-4.46A.841.841,0,0,0,13,7.149Z"/><path class="cls-1" d="M8.6,7.683A24.806,24.806,0,0,1,4.025,4.092c-.782-.734-1.962.441-1.178,1.179A30.365,30.365,0,0,0,6.835,8.549,14.369,14.369,0,0,0,3.382,12.61c-.462.964.974,1.809,1.44.841.9-1.877,2.523-3.007,3.943-4.46A.841.841,0,0,0,8.6,7.683Z"/></svg>
				`@ -0,0 +1 @@`
				`<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M3.318,7.24a24.776,24.776,0,0,1,4.224,3.993.842.842,0,0,0,1.32-.026c1.227-1.618,2.107-3.387,3.831-4.556.889-.6-.159-1.9-1.044-1.3A14.369,14.369,0,0,0,8.14,9.364,30.457,30.457,0,0,0,4.311,5.9C3.466,5.234,2.477,6.575,3.318,7.24Z"/></svg>`