diff --git a/docs/site/docusaurus.config.js b/docs/site/docusaurus.config.js index 4b497d1a56d..a54c50813a3 100644 --- a/docs/site/docusaurus.config.js +++ b/docs/site/docusaurus.config.js @@ -174,7 +174,7 @@ const config = { }, }, navbar: { - title: "IOTA Documentation", + title: "", logo: { alt: "IOTA Docs Logo", src: "img/iota-logo.svg", @@ -196,28 +196,23 @@ const config = { label: "References", to: "references", }, - - /* - { - type: "docsVersionDropdown", - position: "right", - dropdownActiveClassDisabled: true, - }, - { - type: "localeDropdown", - position: "right", - }, - */ ], }, footer: { logo: { - alt: "IOTA Logo", - src: "img/iota-logo-footer.svg", - href: "https://iota.io", + alt: "IOTA Wiki Logo", + src: "img/iota-logo.svg", + srcDark: "img/iota-logo.svg", + width: 138, + height: 48, }, - style: "dark", - copyright: `© ${new Date().getFullYear()} IOTA Foundation | Documentation distributed under CC BY 4.0`, + copyright: ` +
+ © ${new Date().getFullYear()} IOTA Foundation +
+ Privacy Policy • Impressum • Contact Us +
+
`, }, prism: { theme: themes.github, diff --git a/docs/site/package.json b/docs/site/package.json index d5854304215..74c6ce376c7 100644 --- a/docs/site/package.json +++ b/docs/site/package.json @@ -19,11 +19,13 @@ }, "dependencies": { "@amplitude/analytics-browser": "^2.8.1", + "@docsearch/react": "^3.6.0", "@docusaurus/core": "3.4.0", "@docusaurus/preset-classic": "3.4.0", "@docusaurus/remark-plugin-npm2yarn": "^3.4.0", "@docusaurus/theme-common": "^3.4.0", "@docusaurus/theme-mermaid": "^3.4.0", + "@docusaurus/theme-search-algolia": "^3.4.0", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@graphql-markdown/docusaurus": "^1.24.1", diff --git a/docs/site/pnpm-lock.yaml b/docs/site/pnpm-lock.yaml index f9d525b537a..b5c4e2df6be 100644 --- a/docs/site/pnpm-lock.yaml +++ b/docs/site/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: '@amplitude/analytics-browser': specifier: ^2.8.1 version: 2.8.1 + '@docsearch/react': + specifier: ^3.6.0 + version: 3.6.0(@algolia/client-search@4.23.3)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.10.0) '@docusaurus/core': specifier: 3.4.0 version: 3.4.0(@docusaurus/types@3.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.2.2) @@ -29,6 +32,9 @@ importers: '@docusaurus/theme-mermaid': specifier: ^3.4.0 version: 3.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.2.2) + '@docusaurus/theme-search-algolia': + specifier: ^3.4.0 + version: 3.4.0(@algolia/client-search@4.23.3)(@docusaurus/types@3.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.10.0)(typescript@5.2.2) '@emotion/react': specifier: ^11.11.4 version: 11.11.4(@types/react@18.3.3)(react@18.3.1) diff --git a/docs/site/src/components/Cards/styles.module.css b/docs/site/src/components/Cards/styles.module.css index bc73cea451d..c58b4c92635 100644 --- a/docs/site/src/components/Cards/styles.module.css +++ b/docs/site/src/components/Cards/styles.module.css @@ -1,46 +1,45 @@ :root { --iota-cards-border-color: transparent; - --iota-cards-background: #F5F8FA; - --iota-cards-header: #4DA2FF; - --iota-cards-copy: #91A3B1; - --iota-cards-background-hover: #EBF1F5; + --iota-cards-background: #f5f8fa; + --iota-cards-header: #4da2ff; + --iota-cards-copy: #91a3b1; + --iota-cards-background-hover: #ebf1f5; } -[data-theme='dark'] { - --iota-cards-border-color: rgba(247, 247, 248, 0.05); - --iota-cards-background: rgba(247, 247, 248, 0.05); - --iota-cards-background-hover: rgba(247, 247, 248, 0.15); - --iota-cards-header: #4DA2FF; - --iota-cards-copy: #ABBDCC; +[data-theme="dark"] { + --iota-cards-border-color: rgba(247, 247, 248, 0.05); + --iota-cards-background: black; + --iota-cards-background-hover: rgba(247, 247, 248, 0.15); + --iota-cards-header: #4da2ff; + --iota-cards-copy: #abbdcc; } .card { - display: flex; - flex-direction: column; - justify-content: flex-start; - row-gap: .75rem; - border-radius: 20px; - padding: 1.25rem; - padding-bottom: 1.5rem; - background: var(--iota-cards-background); - cursor: pointer; - transition: background .25s ease-in-out; - border: solid 1px var(--iota-cards-border-color); + display: flex; + flex-direction: column; + justify-content: flex-start; + row-gap: 0.75rem; + border-radius: 20px; + padding: 1.25rem; + padding-bottom: 1.5rem; + background: var(--iota-cards-background); + cursor: pointer; + transition: background 0.25s ease-in-out; + border: solid 1px var(--iota-cards-border-color); } .card:hover { - background: var(--iota-cards-background-hover); + background: var(--iota-cards-background-hover); } .card__header__copy { - margin: 0; - font-size: 1.125rem; - line-height: 1.25rem; - color: var(--iota-cards-header); + margin: 0; + font-size: 1.125rem; + line-height: 1.25rem; + color: var(--iota-cards-header); } .card__copy { - font-size: .8125rem; - line-height: 1.3125rem; - color: var(--iota-cards-copy); + font-size: 0.8125rem; + line-height: 1.3125rem; + color: var(--iota-cards-copy); } - diff --git a/docs/site/src/css/custom.css b/docs/site/src/css/custom.css index c027f67a400..21c9f370b88 100644 --- a/docs/site/src/css/custom.css +++ b/docs/site/src/css/custom.css @@ -3,9 +3,9 @@ * bundles Infima by default. Infima is a CSS framework designed to * work well for content-centric websites. */ - @tailwind base; - @tailwind components; - @tailwind utilities; +@tailwind base; +@tailwind components; +@tailwind utilities; /* You can override the default Infima variables here. */ :root { @@ -17,56 +17,56 @@ --ifm-color-primary-lighter: #7ebcff; --ifm-color-primary-lightest: #afd6ff; --ifm-code-font-size: 95%; - --ifm-background-color-dark: #030F1C; - --ifm-navbar-background-color: #030F1C; - --ifm-navbar-sidebar-link-color: #F7F7F8; - --ifm-navbar-sidebar-background-color: #030F1C; - --ifm-navbar-link-color: #F7F7F8; + --ifm-background-color-dark: black; + --ifm-navbar-background-color: #030f1c; + --ifm-navbar-sidebar-link-color: black; + --ifm-navbar-sidebar-background-color: #030f1c; + --ifm-navbar-link-color: #f7f7f8; --ifm-navbar-height: 4.5rem; --ifm-spacing-horizontal: 1.875rem; - --ifm-font-size-base: .9375rem; + --ifm-font-size-base: 0.9375rem; --ifm-line-height-base: 1.5rem; - --ifm-font-family-base: 'Inter', sans-serif; + --ifm-font-family-base: "Inter", sans-serif; --ifm-menu-color: #011829; --ifm-menu-color-background-active: rgba(247, 247, 248, 1); --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); - --iota-black: #090B1A; + --iota-black: #222324; --iota-blue: #6fbcf0; --iota-blue-bright: #00f9fb; --iota-blue-light: #e1f3ff; - --iota-blue-lighter: #B4C2D0; + --iota-blue-lighter: #b4c2d0; --iota-blue-dark: 52 99 151; --iota-blue-darker: #303846; - --iota-hero: #0284AD; + --iota-hero: #0284ad; --iota-hero-dark: #007195; - --iota-iota-steel: #A0B6C3; - --iota-steel-dark: #758F9E; + --iota-iota-steel: #a0b6c3; + --iota-steel-dark: #758f9e; --iota-steel-darker: #566873; - --iota-header-nav: #2A4362; - --iota-success: #2DD7A7; - --iota-success-dark: #008C65; - --iota-success-light: #D5F7EE; - --iota-issue: #FF794B; - --iota-issue-dark: #EB5A29; - --iota-issue-light: #FFECE5; - --iota-warning: #F2BD24; - --iota-warning-dark: #8D6E15; - --iota-warning-light: #FFF8E2; - --iota-code: #845ED6; - --iota-gray-35: #FEFEFE; - --iota-gray-40: #F7F8F8; - --iota-gray-45: #EBECED; - --iota-gray-50: #E9EAEB; - --iota-gray-55: #D7D8DA; - --iota-gray-60: #C3C5C8; - --iota-gray-65: #9C9FA4; - --iota-gray-70: #898D93; - --iota-gray-75: #767A81; + --iota-header-nav: #2a4362; + --iota-success: #2dd7a7; + --iota-success-dark: #008c65; + --iota-success-light: #d5f7ee; + --iota-issue: #ff794b; + --iota-issue-dark: #eb5a29; + --iota-issue-light: #ffece5; + --iota-warning: #f2bd24; + --iota-warning-dark: #8d6e15; + --iota-warning-light: #fff8e2; + --iota-code: #845ed6; + --iota-gray-35: #fefefe; + --iota-gray-40: #f7f8f8; + --iota-gray-45: #ebeced; + --iota-gray-50: #e9eaeb; + --iota-gray-55: #d7d8da; + --iota-gray-60: #c3c5c8; + --iota-gray-65: #9c9fa4; + --iota-gray-70: #898d93; + --iota-gray-75: #767a81; --iota-gray-80: #636870; - --iota-gray-85: #5A6573; - --iota-gray-90: #383F47; - --iota-gray-95: #2A3645; + --iota-gray-85: #5a6573; + --iota-gray-90: #383f47; + --iota-gray-95: #2a3645; --iota-gray-100: #182435; --iota-link-color: #1068a6; --iota-link-color-dark: #057fd1; @@ -77,20 +77,20 @@ --iota-card-dark: 13 20 37; --iota-card-darker: 0 23 49; --iota-blue-primary: #4da2ff; - --iota-gray: #ABBDCC; + --iota-gray: #abbdcc; --iota-white: #f7f7f8; --iota-button-hover: #1a88ff; - --iota-line: rgba(247, 247, 248, .1); + --iota-line: rgba(247, 247, 248, 0.1); --iota-max-width-desktop: 1162px; --iota-dark-blue-bkg: #011829; - --primaryFont: 'Inter', sans-serif; - --headerFont: 'Twkeverett', sans-serif; + --primaryFont: "Inter", sans-serif; + --headerFont: "Twkeverett", sans-serif; --monoFont: "Twkeverett Mono", monospace; } /* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { +[data-theme="dark"] { --ifm-color-primary: #4ca2ff; --ifm-color-primary-dark: #2b91ff; --ifm-color-primary-darker: #1a88ff; @@ -98,11 +98,11 @@ --ifm-color-primary-light: #6db3ff; --ifm-color-primary-lighter: #7ebcff; --ifm-color-primary-lightest: #afd6ff; - --ifm-background-color: #030F1C; + --ifm-background-color: #030f1c; --ifm-menu-color: var(--iota-white); - --ifm-menu-color-background-active: rgba(247, 247, 248, .05); - --ifm-navbar-sidebar-link-color: #F7F7F8; - --ifm-navbar-sidebar-background-color: #030F1C; + --ifm-menu-color-background-active: black; + --ifm-navbar-sidebar-link-color: #f7f7f8; + --ifm-navbar-sidebar-background-color: black; } .active-scroll-spy { @@ -110,10 +110,10 @@ } /* Inverts the image in the stadards/closed-loop-token.mdx in dark mode. */ -[data-theme='dark'] img.balance-coin-token { +[data-theme="dark"] img.balance-coin-token { filter: invert(1); } - + /** navbar overrides */ .navbar-sidebar .menu__link { color: var(--ifm-navbar-sidebar-link-color); @@ -123,15 +123,15 @@ background-color: var(--iota-blue-primary); color: var(--iota-gray-100); } -[data-theme='dark'] .navbar-sidebar .menu__link--active { - background-color: var(--iota-blue-primary); +[data-theme="dark"] .navbar-sidebar .menu__link--active { + background-color: rgba(11, 11, 11, 0.607); color: var(--iota-gray-100); } -html[data-theme=dark] { - background-color: var(--ifm-navbar-background-color); +html[data-theme="dark"] { + background-color: var(--iota-black); } /** setup global style overrides */ -body { +body { font-family: var(--primaryFont); } @@ -141,7 +141,6 @@ h1 { font-family: var(--primaryFont); font-weight: 500; letter-spacing: -0.04em; - } .h1 { letter-spacing: -2.88px; @@ -204,55 +203,70 @@ h4 { letter-spacing: -2%; } @media screen and (max-width: 767px) { - h1 , .h1{ + h1, + .h1 { font-size: 3.5rem; } - h2, .h2 { + h2, + .h2 { font-size: 2rem; } - h3, .h3 { + h3, + .h3 { font-size: 1.5rem; } - h4, .h4 { + h4, + .h4 { font-size: 1.2rem; } } @media screen and (max-width: 599px) { - h2, .h2 { + h2, + .h2 { font-size: 1.7rem; } - h3, .h3 { + h3, + .h3 { font-size: 1.2rem; } - h4, .h4 { + h4, + .h4 { font-size: 1rem; } } - /** Navbar overrides **/ .navbar { border-bottom: 1px solid var(--iota-line); + background-color: black; } .navbar__title { - visibility: hidden; + width: 10px; } .navbar__toggle path { stroke: var(--iota-white); } .navbar__items { - justify-content: space-between; + color: rgba(255, 255, 255, 0.7); } .navbar__items .navbar__brand { - width: 27%; + width: 17%; + + color: rgba(255, 255, 255, 0.7); } .navbar__items .navbar__item.navbar__link { - font-family: var(--headerFont); - font-size: .9375rem; + /* font-family: var(--headerFont); */ + font-size: 0.9375rem; font-weight: 500; line-height: 1.125rem; letter-spacing: -0.02em; + color: rgba(255, 255, 255, 0.7); +} +.navbar__items_wrapper { + display: flex; + column-gap: 0rem; } + @media screen and (min-width: 767px) { .navbar__items.navbar__items--right { min-width: 325px; @@ -274,8 +288,6 @@ h4 { color: var(--iota-white) !important; font-family: var(--primaryFont); letter-spacing: -0.01em; - background: linear-gradient(0deg, rgba(247, 247, 248, 0.1), rgba(247, 247, 248, 0.1)), - linear-gradient(0deg, rgba(247, 247, 248, 0.05), rgba(247, 247, 248, 0.05)) !important; } @media screen and (max-width: 599px) { .DocSearch-Button { @@ -301,28 +313,40 @@ h4 { margin-top: 1rem; } - /** Globals **/ .button-cta { - background-color: var(--iota-blue-primary); color: var(--iota-white); - letter-spacing: -.3px; + letter-spacing: -0.3px; cursor: pointer; border-style: none; - border-radius: 2.25rem; - padding: .75rem 1.125rem; + padding: 0.75rem 1.125rem; font-family: var(--primaryFont); font-size: 1rem; font-weight: 500; line-height: 1.125rem; - transition: background-color .3s; - display: inline-block; + transition: background-color 0.3s; + display: flex; + width: 170px; + height: 56px; + padding: 16px 12px 16px 18px; + border-radius: 2px 0px 0px 0px; + justify-content: space-between; + opacity: 0px; + background: #0101ff; + align-items: center; + justify-content: center; + gap: 1rem; } .button-cta:hover { background-color: var(--iota-button-hover); color: var(--iota-white); text-decoration: none; } +.button-cta:after { + content: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5.5H14V14.5' stroke='%23ABBDCC' stroke-width='2'/%3E%3Cpath d='M14 5.5L3 16.5' stroke='%23ABBDCC' stroke-width='2'/%3E%3C/svg%3E"); + width: 18px; + height: 18px; +} @media (max-width: 1050px) { .navbar .button-cta { display: none; @@ -335,4 +359,4 @@ h4 { } .text-gray { color: var(--iota-gray); -} \ No newline at end of file +} diff --git a/docs/site/src/pages/index.js b/docs/site/src/pages/index.js index 321ad0ebc7b..1b1bea1c907 100644 --- a/docs/site/src/pages/index.js +++ b/docs/site/src/pages/index.js @@ -7,13 +7,21 @@ import React from "react"; import Layout from "@theme/Layout"; import Link from "@docusaurus/Link"; import styles from "./index.module.css"; - +import heroCardBg from "@site/static/img/heroCardBg.png"; +import heroCardBg1 from "@site/static/img/heroCardBg1.png"; +import heroCardBg2 from "@site/static/img/heroCardBg2.png"; export default function Home() { const HomeCard = (props) => { - const { title, children } = props; + const { title, children, heroCardBg } = props; + return (
-
+
{title &&

{title}

}
{children}
@@ -24,7 +32,12 @@ export default function Home() { const { children } = props; return (
-
+
{children}
@@ -32,18 +45,38 @@ export default function Home() { }; return ( - + + {" "}
-
-
-

IOTA Documentation

-

- Discover the power of IOTA through examples, guides, and concepts -

+
+
+
+

+ IOTA Documentation +

+

+ Discover the power of IOTA through examples, guides, and + concepts +

+ + Get started + +
+
- + Tokenomics @@ -54,7 +87,7 @@ export default function Home() { Standards - + IOTA Developer Basics - + Move - + - + - +
-
{logo}
+
+
{logo}
+
{copyright}
+
@@ -86,7 +89,6 @@ export default function FooterLayout({ style, links, logo, copyright }) {
-
{copyright}
diff --git a/docs/site/src/theme/Footer/Layout/index.module.css b/docs/site/src/theme/Footer/Layout/index.module.css index 9f43e55e14b..f3b66855131 100644 --- a/docs/site/src/theme/Footer/Layout/index.module.css +++ b/docs/site/src/theme/Footer/Layout/index.module.css @@ -1,15 +1,23 @@ .footer { - background-color: var(--iota-dark-blue-bkg); - padding: 7.5rem 1rem; + background-color: black; + padding: 1rem; } .footerWrap { display: flex; align-items: center; - justify-content: space-between; + justify-content: center; max-width: var(--iota-max-width-desktop); margin: 0 auto; + gap: 10rem; } +.footerLogoWrap { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; +} + .footerLogo a { opacity: 1; } @@ -21,13 +29,13 @@ .footerLinks { justify-content: flex-end; display: flex; - column-gap: .5rem; + column-gap: 0.5rem; } .footerCopy { - font-family: var(--monoFont); - font-size: .75rem; + /* font-family: var(--monoFont); */ + font-size: 0.75rem; font-weight: 400; - line-height: .9375rem; + line-height: 0.9375rem; letter-spacing: -0.02em; text-align: left; color: var(--iota-gray); @@ -51,6 +59,6 @@ .footerLinks { justify-content: flex-start; display: flex; - column-gap: .5rem; + column-gap: 0.5rem; } -} \ No newline at end of file +} diff --git a/docs/site/src/theme/Navbar/ColorModeToggle/styles.module.css b/docs/site/src/theme/Navbar/ColorModeToggle/styles.module.css index d90b9348547..6f944bd60b1 100644 --- a/docs/site/src/theme/Navbar/ColorModeToggle/styles.module.css +++ b/docs/site/src/theme/Navbar/ColorModeToggle/styles.module.css @@ -3,4 +3,4 @@ } .darkNavbarColorModeToggle:hover { background: var(--ifm-color-gray-800); -} \ No newline at end of file +} diff --git a/docs/site/src/theme/Navbar/Content/index.js b/docs/site/src/theme/Navbar/Content/index.js index 80175c8d6d4..cea96add756 100644 --- a/docs/site/src/theme/Navbar/Content/index.js +++ b/docs/site/src/theme/Navbar/Content/index.js @@ -2,7 +2,6 @@ // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 import React from "react"; -import Link from "@docusaurus/Link"; import { useThemeConfig, ErrorCauseBoundary } from "@docusaurus/theme-common"; import { splitNavbarItems, @@ -79,14 +78,6 @@ export default function NavbarContent() { {!searchBarItem && ( - {isHomePage && ( - - Get started - - )} )} diff --git a/docs/site/src/theme/Navbar/Content/styles.module.css b/docs/site/src/theme/Navbar/Content/styles.module.css index 7b8c08a7427..e7bca425e64 100644 --- a/docs/site/src/theme/Navbar/Content/styles.module.css +++ b/docs/site/src/theme/Navbar/Content/styles.module.css @@ -1,13 +1,6 @@ /* Hide color mode toggle in small viewports */ -.navbar__items_wrapper { - display: flex; - align-items: center; - justify-content: flex-start; - flex: 8; - column-gap: 4rem; -} @media (max-width: 1100px) { .navbar__items_wrapper { column-gap: 2rem; diff --git a/docs/site/src/theme/Navbar/Search/styles.module.css b/docs/site/src/theme/Navbar/Search/styles.module.css index 52797ee25bf..7d9657745c2 100644 --- a/docs/site/src/theme/Navbar/Search/styles.module.css +++ b/docs/site/src/theme/Navbar/Search/styles.module.css @@ -27,4 +27,4 @@ see https://github.com/facebook/docusaurus/issues/9527#issuecomment-1805272379 display: flex; column-gap: 1rem; } -} \ No newline at end of file +} diff --git a/docs/site/src/theme/SearchBar/index.js b/docs/site/src/theme/SearchBar/index.js new file mode 100644 index 00000000000..0f3e25923bc --- /dev/null +++ b/docs/site/src/theme/SearchBar/index.js @@ -0,0 +1,189 @@ +import React, { useCallback, useMemo, useRef, useState } from "react"; +import { createPortal } from "react-dom"; +import { DocSearchButton, useDocSearchKeyboardEvents } from "@docsearch/react"; +import Head from "@docusaurus/Head"; +import Link from "@docusaurus/Link"; +import { useHistory } from "@docusaurus/router"; +import { + isRegexpStringMatch, + useSearchLinkCreator, +} from "@docusaurus/theme-common"; +import { + useAlgoliaContextualFacetFilters, + useSearchResultUrlProcessor, +} from "@docusaurus/theme-search-algolia/client"; +import Translate from "@docusaurus/Translate"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import translations from "@theme/SearchTranslations"; +let DocSearchModal = null; +function Hit({ hit, children }) { + return {children}; +} +function ResultsFooter({ state, onClose }) { + const createSearchLink = useSearchLinkCreator(); + return ( + + + {"See all {count} results"} + + + ); +} +function mergeFacetFilters(f1, f2) { + const normalize = (f) => (typeof f === "string" ? [f] : f); + return [...normalize(f1), ...normalize(f2)]; +} +function DocSearch({ contextualSearch, externalUrlRegex, ...props }) { + const { siteMetadata } = useDocusaurusContext(); + const processSearchResultUrl = useSearchResultUrlProcessor(); + const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters(); + const configFacetFilters = props.searchParameters?.facetFilters ?? []; + const facetFilters = contextualSearch + ? // Merge contextual search filters with config filters + mergeFacetFilters(contextualSearchFacetFilters, configFacetFilters) + : // ... or use config facetFilters + configFacetFilters; + // We let user override default searchParameters if she wants to + const searchParameters = { + ...props.searchParameters, + facetFilters, + }; + const history = useHistory(); + const searchContainer = useRef(null); + const searchButtonRef = useRef(null); + const [isOpen, setIsOpen] = useState(false); + const [initialQuery, setInitialQuery] = useState(undefined); + 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 prepareSearchContainer = useCallback(() => { + if (!searchContainer.current) { + const divElement = document.createElement("div"); + searchContainer.current = divElement; + document.body.insertBefore(divElement, document.body.firstChild); + } + }, []); + const openModal = useCallback(() => { + prepareSearchContainer(); + importDocSearchModalIfNeeded().then(() => setIsOpen(true)); + }, [importDocSearchModalIfNeeded, prepareSearchContainer]); + const closeModal = useCallback(() => { + setIsOpen(false); + searchButtonRef.current?.focus(); + }, []); + const handleInput = useCallback( + (event) => { + // prevents duplicate key insertion in the modal input + event.preventDefault(); + setInitialQuery(event.key); + openModal(); + }, + [openModal], + ); + const navigator = useRef({ + navigate({ itemUrl }) { + // Algolia results could contain URL's from other domains which cannot + // be served through history and should navigate with window.location + if (isRegexpStringMatch(externalUrlRegex, itemUrl)) { + window.location.href = itemUrl; + } else { + history.push(itemUrl); + } + }, + }).current; + const transformItems = useRef((items) => + props.transformItems + ? // Custom transformItems + props.transformItems(items) + : // Default transformItems + items.map((item) => ({ + ...item, + url: processSearchResultUrl(item.url), + })), + ).current; + const resultsFooterComponent = useMemo( + () => + // eslint-disable-next-line react/no-unstable-nested-components + (footerProps) => , + [closeModal], + ); + const transformSearchClient = useCallback( + (searchClient) => { + searchClient.addAlgoliaAgent( + "docusaurus", + siteMetadata.docusaurusVersion, + ); + return searchClient; + }, + [siteMetadata.docusaurusVersion], + ); + useDocSearchKeyboardEvents({ + isOpen, + onOpen: openModal, + onClose: closeModal, + onInput: handleInput, + searchButtonRef, + }); + return ( + <> + + {/* This hints the browser that the website will load data from Algolia, + and allows it to preconnect to the DocSearch cluster. It makes the first + query faster, especially on mobile. */} + + + + + + {isOpen && + DocSearchModal && + searchContainer.current && + createPortal( + , + searchContainer.current, + )} + + ); +} +export default function SearchBar() { + const { siteConfig } = useDocusaurusContext(); + return ; +} diff --git a/docs/site/src/theme/SearchBar/styles.css b/docs/site/src/theme/SearchBar/styles.css new file mode 100644 index 00000000000..8c4e0b9b04a --- /dev/null +++ b/docs/site/src/theme/SearchBar/styles.css @@ -0,0 +1,22 @@ +:root { + --docsearch-primary-color: var(--ifm-color-primary); + --docsearch-text-color: var(--ifm-font-color-base); +} + +html[data-theme="light"] .DocSearch-Button:hover { + margin: 0; + transition: all var(--ifm-transition-fast) + var(--ifm-transition-timing-default); + background-color: var(--iota-black); +} + +.DocSearch-Button { + margin: 0; + transition: all var(--ifm-transition-fast) + var(--ifm-transition-timing-default); + background-color: var(--iota-black); +} + +.DocSearch-Container { + z-index: calc(var(--ifm-z-index-fixed) + 1); +} diff --git a/docs/site/static/img/heroCardBg.png b/docs/site/static/img/heroCardBg.png new file mode 100644 index 00000000000..f72c90c9d86 Binary files /dev/null and b/docs/site/static/img/heroCardBg.png differ diff --git a/docs/site/static/img/heroCardBg1.png b/docs/site/static/img/heroCardBg1.png new file mode 100644 index 00000000000..7c4113a31d2 Binary files /dev/null and b/docs/site/static/img/heroCardBg1.png differ diff --git a/docs/site/static/img/heroCardBg2.png b/docs/site/static/img/heroCardBg2.png new file mode 100644 index 00000000000..bcf47de3e93 Binary files /dev/null and b/docs/site/static/img/heroCardBg2.png differ diff --git a/docs/site/static/img/heroTextBg.svg b/docs/site/static/img/heroTextBg.svg new file mode 100644 index 00000000000..b71b71f822e --- /dev/null +++ b/docs/site/static/img/heroTextBg.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/site/static/img/iota-logo.svg b/docs/site/static/img/iota-logo.svg index bec02746528..cf2bc325293 100644 --- a/docs/site/static/img/iota-logo.svg +++ b/docs/site/static/img/iota-logo.svg @@ -1,7 +1,64 @@ - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +