docs: rename tools/daggosaurus to website

Signed-off-by: Andrea Luzzardi <aluzzardi@gmail.com>
2021-06-04 13:28:38 -07:00
parent d755281e55
commit e9b952a882
43 changed files with 22 additions and 10 deletions
--- a/website/src/css/custom.scss
+++ b/website/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/website/src/theme/DocPaginator/Dagger_Icons_Arrow-next.svg
+++ b/website/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/website/src/theme/DocPaginator/Dagger_Icons_Arrow-previous.svg
+++ b/website/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/website/src/theme/DocPaginator/index.js
+++ b/website/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/website/src/theme/SearchBar/index.js
+++ b/website/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/website/src/theme/SearchBar/styles.css
+++ b/website/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/website/src/theme/Toggle/Icon_Day-mode.svg
+++ b/website/src/theme/Toggle/Icon_Day-mode.svg
@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 21"><defs><style>.cls-2{fill:#131226}</style></defs><path d="M8.09 7.93a2.824 2.824 0 012.61 2.54 4.082 4.082 0 01-.52 1.86c-.47.71-.93.54-1.63.52-.85-.02-1.65-.04-2.17-.83a3.249 3.249 0 01-.46-1.51c.05-.76-.02-1.67.69-2.15a2.879 2.879 0 011.48-.43z" fill="#fcc016"/><path class="cls-2" d="M14.85 7.64c.63-.58 1.56.35.95.93a5.671 5.671 0 01-1.97.97c-.81.25-1.17-1.02-.35-1.29.25-.09.49-.2.73-.31.15-.06.32-.15.49-.23a1 1 0 01.19-.11zM15.43 13.07c.78.35.1 1.49-.66 1.15-.5-.22-.99-.71-1.41-.88-.78-.32-.44-1.6.35-1.29.63.25 1.11.75 1.72 1.02zM11.29 17.43a7.45 7.45 0 01-.87-1.85c-.29-.82 1-1.15 1.29-.36a6.523 6.523 0 00.73 1.53c.49.71-.66 1.37-1.15.68zM12.88 4.67c-.29.54-.66 1.03-.96 1.58a.673.673 0 01-1.16-.68c.31-.55.68-1.04.97-1.58.41-.76 1.56-.09 1.15.68zM7.05 5.08a6.818 6.818 0 01-.41-2.23c-.04-.86 1.29-.85 1.32 0a6.263 6.263 0 00.36 1.87c.27.81-1 1.15-1.27.36zM6.54 15.43c.32-.78 1.61-.44 1.29.35a16.9 16.9 0 00-.72 2.07.669.669 0 01-1.29-.35 16.332 16.332 0 01.72-2.07zM8.57 14.34a3.979 3.979 0 01-3.14-1.1 4.554 4.554 0 01-1-2.68 4.53 4.53 0 01.07-1.22 3.541 3.541 0 01.87-2.05 3.935 3.935 0 012.66-.91c2.09.23 4.24 1.82 4.2 4.09a5.512 5.512 0 01-1.09 3.13 2.693 2.693 0 01-2.57.74zm-.48-6.41a2.879 2.879 0 00-1.48.43c-.71.48-.64 1.39-.69 2.15a3.249 3.249 0 00.46 1.51c.52.79 1.32.81 2.17.83.7.02 1.16.19 1.63-.52a4.082 4.082 0 00.52-1.86 2.824 2.824 0 00-2.61-2.54zM3.96 7.21a9.267 9.267 0 01-1.72-1.22c-.66-.51 0-1.66.68-1.15a8.946 8.946 0 001.72 1.22c.78.34.1 1.48-.68 1.15zM2.48 13.78a4.587 4.587 0 01.71-.54c.77-.36 1.45.8.67 1.13a4.394 4.394 0 00-1.35 1.19c-.54.66-1.47-.27-.93-.93a6.568 6.568 0 01.9-.85zM2.67 9.35c.85-.08.85 1.24 0 1.33a10.022 10.022 0 01-2.19-.09.666.666 0 01-.46-.81.687.687 0 01.81-.48 6.656 6.656 0 001.84.05z"/></svg>
--- a/website/src/theme/Toggle/Icon_Night-mode.svg
+++ b/website/src/theme/Toggle/Icon_Night-mode.svg
@@ -0,0 +1 @@
+<svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 21"><path d="M5.85 12.4a4.044 4.044 0 002.92 2.59 6 6 0 001.68.11 6.481 6.481 0 01-3.31.63c-1.91-.14-4.05-1.19-4.42-3.26a6.213 6.213 0 011.71-5.41 4.414 4.414 0 013.55-1.2 4.928 4.928 0 00-1.65 1.97 6.471 6.471 0 00-.48 4.57z" fill="#fcfad8"/><path d="M10.45 15.1a6 6 0 01-1.68-.11 4.044 4.044 0 01-2.92-2.59 6.471 6.471 0 01.48-4.57 4.928 4.928 0 011.65-1.97 4.414 4.414 0 00-3.55 1.2 6.213 6.213 0 00-1.71 5.41c.37 2.07 2.51 3.12 4.42 3.26a6.481 6.481 0 003.31-.63zm.35-9.07a.685.685 0 01-.25.42.724.724 0 01-.52.2c-2.13.6-3.06 2.98-2.69 5.05.46 2.66 4.05 1.72 5.69 1.11.89-.34 1.32.95.63 1.44a.757.757 0 01-.22.67 8.26 8.26 0 01-6.53 2.41 6.145 6.145 0 01-5.74-4.43 7.8 7.8 0 012.3-7.15 5.76 5.76 0 017-.64.817.817 0 01.33.92z" fill="#131226"/></svg>
--- a/website/src/theme/Toggle/index.js
+++ b/website/src/theme/Toggle/index.js
@@ -0,0 +1,97 @@
+/**
+ * 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, memo } from 'react';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+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}>
+    <DarkIcon />
+  </span>
+);
+
+const Light = ({ icon, style }) => (
+  <span className={clsx(styles.toggle, styles.light)} style={style}>
+    <LightIcon />
+  </span>
+); // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
+
+const Toggle = memo(
+  ({ className, icons, checked: defaultChecked, disabled, onChange }) => {
+    const [checked, setChecked] = useState(defaultChecked);
+    const [focused, setFocused] = useState(false);
+    const inputRef = useRef(null);
+
+    const handleToggle = (e) => {
+      const checkbox = inputRef.current;
+
+      if (!checkbox) {
+        return;
+      }
+
+      if (e.target !== checkbox) {
+        e.preventDefault();
+        checkbox.focus();
+        checkbox.click();
+        return;
+      }
+
+      setChecked(checkbox?.checked);
+    };
+
+    return (
+      <div
+        className={clsx('react-toggle', className, {
+          'react-toggle--checked': checked,
+          'react-toggle--focus': focused,
+          'react-toggle--disabled': disabled,
+        })}
+        role="button"
+        tabIndex={-1}
+        onClick={handleToggle}>
+        <div className="react-toggle-track">
+          <div className="react-toggle-track-check">{icons.checked}</div>
+          <div className="react-toggle-track-x">{icons.unchecked}</div>
+        </div>
+        <div className="react-toggle-thumb" />
+
+        <input
+          ref={inputRef}
+          checked={checked}
+          type="checkbox"
+          className="react-toggle-screenreader-only"
+          aria-label="Switch between dark and light mode"
+          onChange={onChange}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+        />
+      </div>
+    );
+  },
+);
+export default function (props) {
+  const {
+    colorMode: {
+      switchConfig: { darkIcon, darkIconStyle, lightIcon, lightIconStyle },
+    },
+  } = useThemeConfig();
+  const { isClient } = useDocusaurusContext();
+  return (
+    <Toggle
+      disabled={!isClient}
+      icons={{
+        checked: <Dark icon={darkIcon} style={darkIconStyle} />,
+        unchecked: <Light icon={lightIcon} style={lightIconStyle} />,
+      }}
+      {...props}
+    />
+  );
+}
--- a/website/src/theme/Toggle/styles.module.css
+++ b/website/src/theme/Toggle/styles.module.css
@@ -0,0 +1,105 @@
+/**
+ * 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.
+ */
+
+.toggle {
+  align-items: center;
+  display: flex;
+  height: 16px;
+  justify-content: center;
+  width: 21px;
+}
+.toggle::before {
+  position: absolute;
+}
+
+/**
+ * styles for React Toggle
+ * copied over because we want to allow user to swizzle it and modify the css
+ * and also to make sure its compatible with our dark mode
+ * https://github.com/aaronshaf/react-toggle/blob/master/style.css
+ */
+:global(.react-toggle) {
+  touch-action: pan-x;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:global(.react-toggle-screenreader-only) {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+:global(.react-toggle--disabled) {
+  cursor: not-allowed;
+}
+
+:global(.react-toggle-track) {
+  width: 55px;
+  height: 24px;
+  border-radius: 30px;
+  background-color: #40b8bb;
+  transition: all 0.2s ease;
+}
+
+:global(.react-toggle-track-check) {
+  position: absolute;
+  width: 21px;
+  height: 16px;
+  top: 0px;
+  bottom: 0px;
+  margin: auto 0;
+  left: 6px;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+:global([data-theme="dark"] .react-toggle .react-toggle-track-check),
+:global(.react-toggle--checked .react-toggle-track-check) {
+  opacity: 1;
+  transition: opacity 0.25s ease;
+}
+
+:global(.react-toggle-track-x) {
+  position: absolute;
+  width: 21px;
+  height: 16px;
+  top: 0px;
+  bottom: 0px;
+  margin: auto 0;
+  right: 6px;
+  opacity: 1;
+  transition: opacity 0.25s ease;
+}
+
+:global([data-theme="dark"] .react-toggle .react-toggle-track-x),
+:global(.react-toggle--checked .react-toggle-track-x) {
+  opacity: 0;
+}
+
+:global(.react-toggle-thumb) {
+  position: absolute;
+  top: -1px;
+  left: 0;
+  width: 26px;
+  height: 26px;
+  border: 3px solid var(--ifm-color-primary-dark);
+  border-radius: 50%;
+  background-color: #fafafa;
+  transition: all 0.25s ease;
+}
+
+:global([data-theme="dark"] .react-toggle .react-toggle-thumb),
+:global(.react-toggle--checked .react-toggle-thumb) {
+  left: 31px;
+}
--- a/website/src/theme/prism-include-languages.js
+++ b/website/src/theme/prism-include-languages.js
@@ -0,0 +1,24 @@
+/**
+ * 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 ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+import siteConfig from "@generated/docusaurus.config";
+
+const prismIncludeLanguages = (PrismObject) => {
+  if (ExecutionEnvironment.canUseDOM) {
+    const {
+      themeConfig: { prism: { additionalLanguages = [] } = {} },
+    } = siteConfig;
+    window.Prism = PrismObject;
+    additionalLanguages.forEach((lang) => {
+      require(`prismjs/components/prism-${lang}`); // eslint-disable-line
+    });
+    require("./prism.cue.js");
+    delete window.Prism;
+  }
+};
+
+export default prismIncludeLanguages;
--- a/website/src/theme/prism.cue.js
+++ b/website/src/theme/prism.cue.js
@@ -0,0 +1,32 @@
+Prism.languages.cue = Prism.languages.extend("clike", {
+  // https://github.com/PrismJS/prism/blob/master/components/prism-swift.js
+  string: {
+    pattern: /(["'`])(?:\\[\s\S]|(?!\1)[^\\])*\1/,
+    greedy: true,
+    inside: {
+      interpolation: {
+        pattern: /\\\#*\((?:[^()]|\([^)]+\))+\)/,
+        inside: {
+          delimiter: {
+            pattern: /^\\\#*\(|\)$/,
+            alias: "variable",
+          },
+        },
+      },
+    },
+  },
+
+  // https://cuelang.org/docs/references/spec/#values
+  keyword: /\b(?:package|import|if|else|for|in|let)\b/,
+  boolean: /\b(?:true|false)\b/,
+  constant: /\b(?:_\|_|_)\b/,
+
+  // https://github.com/PrismJS/prism/blob/master/components/prism-go.js
+  number: /(?:\b0x[a-f\d]+|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[-+]?\d+)?)i?/i,
+  operator:
+    /[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,
+
+  // https://cuelang.org/docs/references/spec/#predeclared-identifiers
+  builtin:
+    /\b(?:len|null|bool|int|float|string|bytes|number|u?int(?:8|16|32|64|128)?|rune|float(?:32|64))\b/,
+});
				`@@ -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 data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 21"><path d="M5.85 12.4a4.044 4.044 0 002.92 2.59 6 6 0 001.68.11 6.481 6.481 0 01-3.31.63c-1.91-.14-4.05-1.19-4.42-3.26a6.213 6.213 0 011.71-5.41 4.414 4.414 0 013.55-1.2 4.928 4.928 0 00-1.65 1.97 6.471 6.471 0 00-.48 4.57z" fill="#fcfad8"/><path d="M10.45 15.1a6 6 0 01-1.68-.11 4.044 4.044 0 01-2.92-2.59 6.471 6.471 0 01.48-4.57 4.928 4.928 0 011.65-1.97 4.414 4.414 0 00-3.55 1.2 6.213 6.213 0 00-1.71 5.41c.37 2.07 2.51 3.12 4.42 3.26a6.481 6.481 0 003.31-.63zm.35-9.07a.685.685 0 01-.25.42.724.724 0 01-.52.2c-2.13.6-3.06 2.98-2.69 5.05.46 2.66 4.05 1.72 5.69 1.11.89-.34 1.32.95.63 1.44a.757.757 0 01-.22.67 8.26 8.26 0 01-6.53 2.41 6.145 6.145 0 01-5.74-4.43 7.8 7.8 0 012.3-7.15 5.76 5.76 0 017-.64.817.817 0 01.33.92z" fill="#131226"/></svg>