diff --git a/package.json b/package.json index ec0e178..3b79977 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "watch": "lerna --ignore docusaurus-playground run watch", "build": "lerna --ignore docusaurus-playground run build", "start": "lerna --scope docusaurus-playground run start", + "serve": "lerna --scope docusaurus-playground run serve", "prepare": "husky install", "prettier": "pretty-quick", "prettier:staged": "pretty-quick --staged" diff --git a/packages/docusaurus-playground/docs/architect.md b/packages/docusaurus-playground/docs/architect.md new file mode 100644 index 0000000..3a075d4 --- /dev/null +++ b/packages/docusaurus-playground/docs/architect.md @@ -0,0 +1,48 @@ +--- +title: Description and architecture +sidebar_position: 2 +--- + +Waku is a family of protocols that enable private, censorship-resistant communications; a suite of open-source software; and the name of the public, permissionless and decentralized network facilitating generalized messaging. By communications, we mean the exchange of data or messages between two or more entities, whether they are users, devices or nodes. + +Waku was built as open-source public goods infrastructure to serve as the communications layer of the decentralized web. As such, its development focuses on the following: + +- Generalized: Waku's focus on generalized and ephemeral messaging facilitates communication between users, subsystems or nodes according to developers' needs. + +- Peer-to-peer: Waku is implemented via a decentralized p2p network, yielding the advantages of censorship resistance while remaining adaptive and scalable. + +- Runs anywhere: Waku was designed to run in resource-restricted environments—like phones and browsers—enabling users operating lower-spec hardware or with intermittent bandwidth to participate as peers. + +- Privacy first: Waku's strong privacy guarantees strengthen its resistance to censorship and external attack. Waku empowers developers to build apps that cannot harvest users' metadata, removing the need for users to trust that their data is not used without their permission. + +- Modular: Waku's modularity enables developers to make tradeoffs according to their users' privacy expectations and performance demands by implementing only those protocols that are relevant to their applications. While one app might value privacy above all else, another may be willing to make compromises to deliver a more frictionless UX. + +- Platform agnostic: Waku can run on any platform or in any environment making it a suitable messaging solution for decentralized applications regardless of the network on which they're deployed. + +
+ +### Network architecture + +The Waku team has developed three clients to run in different environments along with a range of SDKs in Rust, React Native, Kotlin and Swift: + +- nwaku: Waku's reference implementation written in Nim. +- go-waku: An implementation for native integration with Golang applications. +- js-waku: Waku's JavaScript implementation for browser environments. + +Waku is best thought of as a cohesive whole in terms of its capabilities. However, under the hood are three distinct network interaction domains: gossip, discovery and request/response. + +Waku compromises multiple protocols, including but not limited to the following: + +**Waku Relay**: The heart of Waku v2, the relay protocol specifies a pub/sub approach to p2p messaging with a focus on privacy, censorship resistance, security and privacy, and is currently implemented as a minor extension of the libp2p GossipSub protocol. + +**Waku Filter**: A lighter-weight version of the relay protocol for resource-restricted devices, Waku Filter enables light nodes to only receive the messages they want from full nodes. + +**Waku Store**: Enables querying of messages stored by other nodes through Waku Relay. + +**Waku Light Push**: A request/response protocol that enables nodes with short connection windows or limited bandwidth to publish messages to the Waku network + +
+ +[Dive into the docs](https://vac.dev/research) + +[Continue reading](/team) diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index 72d0ddd..351aa9d 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/packages/docusaurus-playground/docusaurus.config.js @@ -52,102 +52,135 @@ const config = { themeConfig: /** @type {import('@acid-info/logos-docusaurus-preset').ThemeConfig} */ ({ + colorMode: { + defaultMode: 'dark', + disableSwitch: false, + }, navbar: { items: [ { - label: 'Docs', - href: '/docs', + label: 'About', + to: '/docs', }, { - label: 'Features', - href: '#features', + label: 'Blog', + href: 'https://logos.co/', }, { - label: 'Showcase', - href: '#showcase', + label: 'Github', + href: 'https://github.com/logos-co', + }, + { + type: 'localeDropdown', + position: 'right', }, ], }, footer: { - copyright: 'Copyright @2023 Logos
Built with Docusaurus.', + copyright: 'Logos @2023
All Rights Reserved.', links: [ { - title: 'Learn', items: [ - { - href: '/', - label: 'Introduction', - }, - { - href: '/', - label: 'Installation', - }, - { - href: '/', - label: 'Migrate from v1 to v2', - }, - ], - }, - { - title: 'More', - items: [ - { - href: '/', - label: 'Blog', - }, - { - href: '/', - label: 'Changelog', - }, - { - href: '/', - label: 'Github', - }, { href: '/', label: 'Twitter', }, - ], - }, - { - title: 'Community', - items: [ - { - href: '/', - label: 'Stack Overflow', - }, - { - href: '/', - label: 'Feature Requests', - }, { href: '/', label: 'Discord', }, { href: '/', - label: 'Help', + label: 'Docs', + }, + { + href: '/', + label: 'Github', }, ], }, { - title: 'Legal', items: [ { href: '/', - label: 'Privacy', + label: 'Contact us', }, { href: '/', - label: 'Terms', + label: 'Work with us', }, { href: '/', - label: 'Data policy', + label: 'Privacy policy', }, { href: '/', - label: 'Cookie policy', + label: 'Temrs & conditions', + }, + ], + }, + { + title: 'Research', + items: [ + { + href: '/', + label: 'VacP2P', + }, + { + href: '/', + label: 'AFAIK', + }, + ], + }, + { + title: 'Infrastructure', + items: [ + { + href: '/', + label: 'Waku', + }, + { + href: '/', + label: 'Nimbus', + }, + { + href: '/', + label: 'Codex', + }, + { + href: '/', + label: 'Nomos', + }, + ], + }, + { + title: 'Creative Studio', + items: [ + { + href: '/', + label: 'Acid.info', + }, + ], + }, + { + title: 'Movement', + items: [ + { + href: '/', + label: 'Logos', + }, + ], + }, + { + title: 'User-facing products', + items: [ + { + href: '/', + label: 'Status', + }, + { + href: '/', + label: 'Keycard', }, ], }, diff --git a/packages/logos-docusaurus-preset/src/theme-config/base.ts b/packages/logos-docusaurus-preset/src/theme-config/base.ts index 9589b7f..d88de84 100644 --- a/packages/logos-docusaurus-preset/src/theme-config/base.ts +++ b/packages/logos-docusaurus-preset/src/theme-config/base.ts @@ -10,31 +10,16 @@ export const baseThemeConfig: ThemeConfig = { }, metadata: [], colorMode: { - disableSwitch: true, + disableSwitch: false, defaultMode: 'dark', }, navbar: { title: '', logo: {}, - items: [ - { - type: 'docsVersionDropdown', - position: 'right', - }, - { - type: 'localeDropdown', - position: 'right', - }, - ], }, footer: { logo: {}, - links: [ - { - title: 'Community', - items: [], - }, - ], + links: [], copyright: `Logos, ${new Date().getFullYear()}`, }, prism: { diff --git a/packages/logos-docusaurus-preset/src/theme-config/codex.ts b/packages/logos-docusaurus-preset/src/theme-config/codex.ts index fb1c4d3..ea7d847 100644 --- a/packages/logos-docusaurus-preset/src/theme-config/codex.ts +++ b/packages/logos-docusaurus-preset/src/theme-config/codex.ts @@ -10,16 +10,6 @@ export const codexThemeConfig: typeof baseThemeConfig = { width: 24, height: 26, }, - items: [ - { - type: 'localeDropdown', - position: 'right', - }, - { - type: 'docsVersionDropdown', - position: 'right', - }, - ], }, metadata: [ { name: 'keywords', content: 'codex, storage' }, diff --git a/packages/logos-docusaurus-preset/src/theme-config/logos.ts b/packages/logos-docusaurus-preset/src/theme-config/logos.ts index ea0053d..5000eb1 100644 --- a/packages/logos-docusaurus-preset/src/theme-config/logos.ts +++ b/packages/logos-docusaurus-preset/src/theme-config/logos.ts @@ -9,18 +9,6 @@ export const logosThemeConfig: typeof baseThemeConfig = { src: 'theme/image/logo.svg', height: 26, }, - items: [ - { to: 'docs', label: 'Docs', position: 'left' }, - { to: 'https://logos.co/', label: 'Community', position: 'left' }, - { - type: 'docsVersionDropdown', - position: 'right', - }, - { - type: 'localeDropdown', - position: 'right', - }, - ], }, metadata: [ { name: 'keywords', content: 'Logos' }, diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index a6f222c..6dea9e4 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -11,16 +11,23 @@ /* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { +:root { background-color: transparent !important; + --ifm-menu-color-background-active: transparent; --content-padding: 32px; - - --ifm-color-scheme: dark; --ifm-navbar-link-color: rgb(var(--lsd-text-primary)); --ifm-navbar-background-color: rgb(var(--lsd-surface-primary)); --ifm-dropdown-link-color: rgb(var(--lsd-text-primary)); --ifm-dropdown-hover-background-color: rgb(var(--lsd-surface-secondary)); + --ifm-background-color: rgb(var(--lsd-surface-primary)); + + --ifm-color-white: #fff; + --ifm-color-black: #000; + + --ifm-color-primary: rgb(var(--lsd-theme-primary)); + --ifm-color-secondary: rgb(var(--lsd-theme-secondary)); + --prism-background-color: rgb(var(--lsd-theme-primary)); /* Colors. */ /*--ifm-dark-value: 10%;*/ @@ -30,14 +37,6 @@ /*--ifm-lighter-value: -30%;*/ /*--ifm-lightest-value: -50%;*/ - --ifm-background-color: rgb(var(--lsd-surface-primary)); - - --ifm-color-white: #fff; - --ifm-color-black: #000; - - --ifm-color-primary: rgb(var(--lsd-theme-primary)); - --ifm-color-secondary: rgb(var(--lsd-theme-secondary)); - --ifm-color-gray-0: rgb(var(--lsd-surface-primary)); --ifm-color-gray-100: #f8f8fa; --ifm-color-gray-200: #f7f7f8; @@ -229,6 +228,18 @@ --ifm-hero-text-color: var(--ifm-color-black); } +[data-theme='dark'] { + --ifm-color-scheme: dark; + + .navbar__logo img { + filter: invert(1); + } +} + +[data-theme='light'] { + --ifm-color-scheme: light; +} + @include utils.responsive('lg', 'down') { :root { --ifm-background-color: rgb(var(--lsd-surface-primary)); @@ -249,106 +260,6 @@ svg * { gap: 16px; } -.grid-item { - grid-column: span 4; - - &.w-1 { - grid-column: span 1; - } - - &.w-2 { - grid-column: span 2; - } - - &.w-3 { - grid-column: span 3; - } - - &.w-4 { - grid-column: span 4; - } - - &.w-5 { - grid-column: span 4; - } - - &.w-6 { - grid-column: span 6; - } - - &.w-7 { - grid-column: span 7; - } - - &.w-8 { - grid-column: span 8; - } - - &.w-9 { - grid-column: span 8; - } - - &.w-10 { - grid-column: span 10; - } - - &.w-11 { - grid-column: span 10; - } - - &.w-12 { - grid-column: span 12; - } - - &.w-13 { - grid-column: span 12; - } - - &.w-14 { - grid-column: span 14; - } - - &.w-15 { - grid-column: span 14; - } - - &.w-16 { - grid-column: span 16; - } - - &.w-17 { - grid-column: span 17; - } - - &.w-18 { - grid-column: span 18; - } - - &.w-19 { - grid-column: span 18; - } - - &.w-20 { - grid-column: span 18; - } - - &.w-21 { - grid-column: span 18; - } - - &.w-22 { - grid-column: span 18; - } - - &.w-23 { - grid-column: span 18; - } - - &.w-24 { - grid-column: span 24; - } -} - .table-of-contents__link--active { color: rgb(var(--lsd-text-primary)) !important; } @@ -462,15 +373,26 @@ small { .breadcrumbs__link { padding: 0; + background: transparent !important; } .navbar { padding-inline: 0; - height: 80px; + height: 64px; + box-shadow: none; +} + +.navbar__logo { + height: 26px; +} + +.dropdown__link--active { + background-color: transparent; } .navbar__inner { align-items: center; + padding-inline: 0 !important; } .row { @@ -478,11 +400,6 @@ small { margin: 0; } -// TODO temporary style fix for the logo -.navbar__logo img { - filter: invert(1); -} - .theme-doc-version-banner * { color: #fff; text-decoration-color: #fff !important; @@ -493,12 +410,7 @@ small { text-decoration-color: #fff !important; } -div.w-10 > a { - padding-left: 0; - padding-right: 16px; -} - -div.w-10 > a:not(:last-child) { +.navbar__left-items > a:not(:last-child)[href^='/'] { &:after { content: '•'; margin-left: 16px; @@ -541,6 +453,11 @@ div.w-10 > a:not(:last-child) { .navbar__item { display: inline-flex; align-items: center; + padding: 0 8px; +} + +.navbar__left-items > .navbar__item:first-of-type { + padding-left: 0; } .dropdown > .navbar__link:after { @@ -572,6 +489,14 @@ div.w-10 > a:not(:last-child) { display: none; } +.footer { + position: relative; +} + +.theme-back-to-top-button { + display: none !important; +} + .footer__link-item { display: inline-block; } @@ -584,7 +509,24 @@ div.w-10 > a:not(:last-child) { padding: 24px; } +.theme-doc-version-badge { + padding: 4px 8px; + background: transparent; + color: rgb(var(--lsd-text-primary)); + border: 1px solid rgb(var(--lsd-border-primary)); + margin-bottom: 16px; +} + +.navbar__right-items { + display: flex; + align-items: center; +} + @include utils.responsive('lg', 'down') { + main > .container { + padding-bottom: 84px !important; + } + .grid { grid-template-columns: repeat(2, 1fr); } @@ -595,18 +537,43 @@ div.w-10 > a:not(:last-child) { .navbar { display: flex; - padding-inline: 0; + padding-inline: 0 !important; height: 56px; padding: 12px 16px; } - .footer { - padding: 24px 16px; + .navbar__toggle { + display: flex; + align-items: center; + justify-content: center; + margin: 0; + border: 1px solid rgb(var(--lsd-border-primary)); + // border-left: none; + width: 32px; + height: 32px; + box-sizing: border-box; + + svg { + width: 14px; + height: 14px; + } + } + + .navbar__left-items { + display: none; } .desktop { display: none; } + + .theme-admonition { + display: block !important; + } + + .footer { + padding-bottom: 0px !important; + } } @include utils.responsive('sm', 'down') { @@ -638,7 +605,7 @@ div.w-10 > a:not(:last-child) { .footer { > div { display: flex !important; - flex-direction: column-reverse; + flex-direction: column; gap: 72px !important; } } @@ -654,36 +621,75 @@ div.w-10 > a:not(:last-child) { padding-inline: 0 !important; } - .navbar__inner { - padding-inline: 0 !important; - } - .navbar__left { display: flex; } +} + +@include utils.responsive('lg', 'up') { + .main-wrapper { + padding: 0; + + main > .container { + padding-inline: 0 !important; + padding-bottom: 200px !important; + } + + & > div { + display: grid; + grid-template-columns: repeat(16, 42px); + gap: 1rem; + padding-inline: 16px; + + aside { + width: auto; + grid-column: 1 / 5; + border: none; + } + + main { + grid-column: 6 / 17; + max-width: none; + } + } + } + + .navbar__inner { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + + .navbar__left { + flex-grow: 0; + flex-basis: calc(1 / 12 * 100%); + } .navbar__left-items { - display: none; + flex: 1 0; + margin: auto; } } -.main-wrapper { - padding: 0; +@include utils.responsive('xl', 'up') { + .main-wrapper { + padding: 0; - & > div { - display: grid; - grid-template-columns: repeat(18, 1fr); - gap: 1rem; + & > div { + display: grid; + grid-template-columns: repeat(24, 1fr); + gap: 1rem; - aside { - width: auto; - grid-column: 1 / 4; - border: none; - } + aside { + width: auto; + grid-column: 1 / 5; + border: none; + } - main { - grid-column: 5 / 19; - max-width: none; + main { + grid-column: 6 / 25; + max-width: none; + } } } } @@ -713,29 +719,48 @@ div.w-10 > a:not(:last-child) { } .footer { - border-top: 1px solid rgb(var(--lsd-text-primary)); - margin-bottom: 40px; + margin-bottom: 18px; + width: 100% !important; + padding-inline: 0; > div { max-width: unset; padding: unset; margin: unset; - width: 100% !important; + padding: 16px; display: grid; - grid-template-columns: repeat(18, 1fr); + grid-template-columns: repeat(24, 1fr); gap: 1rem; } } +.footer__bottom { + text-align: unset; + grid-column: 1 / 12; + grid-row: 1 / 1; + + & > div:first-of-type { + display: none; + } +} + .footer__title { @include lsd.typography('label1'); margin-bottom: 4px; } -.footer__links { +.footer > div:nth-child(1) > .footer__links { + display: grid; margin-bottom: 0; - grid-column: 5 / 19; + grid-column: 13 / 25; + grid-row: 1 / 1; + gap: 12px; +} + +.footer > div:nth-child(2) > .footer__links { + margin-bottom: 0; + grid-column: 13 / 25; grid-row: 1 / 1; display: grid; @@ -747,6 +772,10 @@ div.w-10 > a:not(:last-child) { grid-template-columns: span 1; } +.col.footer__col { + padding: 0; +} + .footer__items { display: flex; flex-direction: row; @@ -755,7 +784,7 @@ div.w-10 > a:not(:last-child) { } .footer__item { - display: inline-block; + display: inline-flex; &, a { @@ -776,16 +805,6 @@ div.w-10 > a:not(:last-child) { } } -.footer__bottom { - text-align: unset; - grid-column: 1 / 4; - grid-row: 1 / 1; - - & > div:first-of-type { - display: none; - } -} - .footer__copyright { @include lsd.typography('body2'); } @@ -795,7 +814,7 @@ div.w-10 > a:not(:last-child) { } .navbar { - padding: 12px 0; + padding: 12px 16px; } .navbar__inner { @@ -803,57 +822,53 @@ div.w-10 > a:not(:last-child) { padding: 0 var(--content-padding); } -@include utils.responsive('lg', 'up') { - .navbar__inner { - display: flex; - flex-direction: row; - justify-content: flex-start; - } - - .navbar__left { - flex-grow: 0; - flex-basis: calc(1 / 12 * 100%); - } - - .navbar__left-items { - flex: 1 0; - } - - .navbar__right-items { - } -} - @include utils.responsive('xl', 'up') { .navbar__inner { display: grid; gap: 16px; - grid-template-columns: repeat(18, 1fr); - padding: 0 var(--content-padding); + grid-template-columns: repeat(24, 1fr); + padding: 0; } .navbar__left { - grid-column: 1 / 5; + grid-column: 1 / 6; display: flex; flex-direction: row; align-items: center; } .navbar__left-items { - grid-column: 5 / 14; + grid-column: 6 / 20; } .navbar__right-items { - grid-column: 14 / 19; - display: flex; + grid-column: 20 / 25; flex-direction: row; justify-content: flex-end; + gap: 16px; } } -@include utils.responsive('lg', 'down') { - .main-wrapper > div { +@include utils.responsive('xl', 'down') { + #__docusaurus_skipToContent_fallback { display: block; - > main { + max-width: 912px; + margin: auto; + } + + .main-wrapper { + & > div { + padding-inline: 0; } } + + .container { + padding-inline: 0; + } + + .navbar { + max-width: 912px; + margin: auto; + padding-inline: 0; + } } diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css index 926594e..fd8a270 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css +++ b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css @@ -13,7 +13,7 @@ } .codeBlock { - --ifm-pre-background: var(--prism-background-color); + --ifm-pre-background: transparent; margin: 0; padding: 0; } @@ -58,7 +58,7 @@ .buttonGroup button { display: flex; align-items: center; - background: var(--prism-background-color); + background: transparent; color: var(--prism-color); border: 1px solid rgb(var(--lsd-border-primary)); line-height: 0; diff --git a/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/index.tsx new file mode 100644 index 0000000..4451f02 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/index.tsx @@ -0,0 +1,59 @@ +import React from 'react' +import clsx from 'clsx' +import useIsBrowser from '@docusaurus/useIsBrowser' +import { translate } from '@docusaurus/Translate' +import IconLightMode from '@theme/Icon/LightMode' +import IconDarkMode from '@theme/Icon/DarkMode' +import styles from './styles.module.scss' + +function ColorModeToggle({ className, buttonClassName, value, onChange }) { + const isBrowser = useIsBrowser() + const title = translate( + { + message: 'Switch between dark and light mode (currently {mode})', + id: 'theme.colorToggle.ariaLabel', + description: 'The ARIA label for the navbar color mode toggle', + }, + { + mode: + value === 'dark' + ? translate({ + message: 'dark mode', + id: 'theme.colorToggle.ariaLabel.mode.dark', + description: 'The name for the dark color mode', + }) + : translate({ + message: 'light mode', + id: 'theme.colorToggle.ariaLabel.mode.light', + description: 'The name for the light color mode', + }), + }, + ) + return ( +
+ +
+ ) +} + +export default React.memo(ColorModeToggle) diff --git a/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/styles.module.scss new file mode 100644 index 0000000..d12d1d3 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/styles.module.scss @@ -0,0 +1,35 @@ +.toggle { + width: 32px; + height: 32px; + border: 1px solid rgb(var(--lsd-border-primary)); + box-sizing: border-box; + + svg { + width: 14px; + height: 14px; + } +} + +.toggleButton { + -webkit-tap-highlight-color: transparent; + align-items: center; + display: flex; + justify-content: center; + width: 100%; + height: 100%; + border-radius: 50%; + transition: background var(--ifm-transition-fast); +} + +.toggleButton:hover { + background: var(--ifm-color-emphasis-200); +} + +[data-theme='light'] .darkToggleIcon, +[data-theme='dark'] .lightToggleIcon { + display: none; +} + +.toggleButtonDisabled { + cursor: not-allowed; +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx index 6f64a34..b789a72 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx @@ -9,6 +9,7 @@ import Link from '@docusaurus/Link' import { translate } from '@docusaurus/Translate' import styles from './styles.module.css' import { Typography } from '@acid-info/lsd-react' +import useDocusaurusContext from '@docusaurus/useDocusaurusContext' // TODO move to design system folder function BreadcrumbsItemLink({ children, href, isLast }) { @@ -65,10 +66,15 @@ function BreadcrumbsItem({ children, active, index, addMicrodata }) { export default function DocBreadcrumbs() { const breadcrumbs = useSidebarBreadcrumbs() const homePageRoute = useHomePageRoute() + const { siteConfig } = useDocusaurusContext() + if (!breadcrumbs) { return null } + //@ts-ignore + const routeBasePath = siteConfig.presets[0][1].docs.routeBasePath + return (