From 793cc1aa90b879c72ea22276ced4e03da184932e Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Wed, 31 May 2023 22:06:47 +0900 Subject: [PATCH 1/9] update grid system --- .../src/client/css/custom.scss | 170 ++++++------------ .../theme/DocItem/Layout/styles.module.scss | 56 ++++-- 2 files changed, 91 insertions(+), 135 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index a6f222c..d90bfb7 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -249,106 +249,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; } @@ -667,23 +567,54 @@ div.w-10 > a:not(:last-child) { } } -.main-wrapper { - padding: 0; +@include utils.responsive('lg', 'up') { + .main-wrapper { + padding: 0; - & > div { - display: grid; - grid-template-columns: repeat(18, 1fr); - gap: 1rem; - - aside { - width: auto; - grid-column: 1 / 4; - border: none; + main > .container { + padding-inline: 0 !important; } - main { - grid-column: 5 / 19; - max-width: none; + & > div { + display: grid; + grid-template-columns: repeat(16, 1fr); + gap: 1rem; + padding-inline: 16px; + + aside { + width: auto; + grid-column: 1 / 5; + border: none; + } + + main { + grid-column: 6 / 17; + max-width: none; + } + } + } +} + +@include utils.responsive('xl', 'up') { + .main-wrapper { + padding: 0; + + & > div { + display: grid; + grid-template-columns: repeat(24, 1fr); + gap: 1rem; + padding-inline: 0; + + aside { + width: auto; + grid-column: 1 / 5; + border: none; + } + + main { + grid-column: 6 / 25; + max-width: none; + } } } } @@ -818,9 +749,6 @@ div.w-10 > a:not(:last-child) { .navbar__left-items { flex: 1 0; } - - .navbar__right-items { - } } @include utils.responsive('xl', 'up') { @@ -856,4 +784,12 @@ div.w-10 > a:not(:last-child) { > main { } } + + .main-wrapper { + // website pages + + main > .container { + padding-inline: 0 !important; + } + } } diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss index d4939de..703c53e 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss +++ b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss @@ -5,45 +5,53 @@ margin-top: 0; } -.docItemCol { - grid-column: span 10; -} - .docItemGrid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 16px; } -.toc { - grid-column: span 3; -} - .gap1 { grid-column: span 1; } -.tocMobile { - display: none; +.toc { + grid-column: span 4; +} +.tocMobile { & > div { display: block !important; } } -@include utils.responsive('xl', 'up') { - .tocMobile { - display: none; +@include utils.responsive('lg', 'up') { + .docItemGrid { + display: grid; + grid-template-columns: repeat(11, 1fr); + gap: 16px; + } + + .docItemCol { + grid-column: span 11; } } -@include utils.responsive('xl', 'down') { - .tocMobile { - display: block; +@include utils.responsive('xl', 'up') { + .docItemGrid { + display: grid; + grid-template-columns: repeat(19, 1fr); + gap: 16px; } - .toc { - display: none; + .docItemCol { + grid-column: span 14; + } +} + +@include utils.responsive('lg', 'down') { + .tocMobile { + display: block; } .docItemGrid { @@ -56,3 +64,15 @@ grid-column: span 2; } } + +@include utils.responsive('xl', 'up') { + .tocMobile { + display: none; + } +} + +@include utils.responsive('xl', 'down') { + .toc { + display: none; + } +} From 132df37206255f09d11aa406cdec861cd28c3d6d Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Wed, 31 May 2023 23:55:46 +0900 Subject: [PATCH 2/9] update navbar --- package.json | 1 + .../docusaurus.config.js | 18 +++- .../src/theme-config/base.ts | 19 +--- .../src/theme-config/codex.ts | 10 -- .../src/theme-config/logos.ts | 12 --- .../src/client/css/custom.scss | 92 ++++++++++++------- .../client/theme/ColorModeToggle/index.tsx | 59 ++++++++++++ .../theme/ColorModeToggle/styles.module.scss | 35 +++++++ .../theme/DocBreadcrumbs/styles.module.css | 2 +- .../client/theme/DocVersionBadge/index.tsx | 15 +-- .../client/theme/Layout/Provider/index.tsx | 22 +++++ .../src/client/theme/Navbar/Content/index.tsx | 2 +- .../index.tsx} | 17 +++- .../DropdownNavbarItem/styles.module.css | 6 ++ .../client/theme/NavbarItem/NavbarNavLink.tsx | 62 +++++++++++++ .../src/client/theme/Root.tsx | 25 ++++- 16 files changed, 305 insertions(+), 92 deletions(-) create mode 100644 packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/index.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/styles.module.scss create mode 100644 packages/logos-docusaurus-theme/src/client/theme/Layout/Provider/index.tsx rename packages/logos-docusaurus-theme/src/client/theme/NavbarItem/{DropdownNavbarItem.tsx => DropdownNavbarItem/index.tsx} (92%) create mode 100644 packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem/styles.module.css create mode 100644 packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink.tsx 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/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index 72d0ddd..eea1858 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/packages/docusaurus-playground/docusaurus.config.js @@ -52,19 +52,27 @@ const config = { themeConfig: /** @type {import('@acid-info/logos-docusaurus-preset').ThemeConfig} */ ({ + colorMode: { + defaultMode: 'dark', + disableSwitch: false, + }, navbar: { items: [ { - label: 'Docs', + label: 'About', href: '/docs', }, { - label: 'Features', - href: '#features', + label: 'Blog', + href: '/', }, { - label: 'Showcase', - href: '#showcase', + label: 'Github', + href: '/', + }, + { + type: 'localeDropdown', + position: 'right', }, ], }, 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 d90bfb7..bffc066 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -371,6 +371,7 @@ small { .navbar__inner { align-items: center; + padding-inline: 0 !important; } .row { @@ -443,6 +444,10 @@ div.w-10 > a:not(:last-child) { align-items: center; } +.navbar__left-items > .navbar__item:first-of-type { + padding-left: 0; +} + .dropdown > .navbar__link:after { display: none; } @@ -484,6 +489,19 @@ 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') { .grid { grid-template-columns: repeat(2, 1fr); @@ -495,11 +513,28 @@ div.w-10 > a:not(:last-child) { .navbar { display: flex; - padding-inline: 0; + padding-inline: 0 !important; height: 56px; padding: 12px 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; + } + } + .footer { padding: 24px 16px; } @@ -554,10 +589,6 @@ div.w-10 > a:not(:last-child) { padding-inline: 0 !important; } - .navbar__inner { - padding-inline: 0 !important; - } - .navbar__left { display: flex; } @@ -573,6 +604,7 @@ div.w-10 > a:not(:last-child) { main > .container { padding-inline: 0 !important; + padding-bottom: 200px !important; } & > div { @@ -593,6 +625,22 @@ div.w-10 > a:not(:last-child) { } } } + + .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; + margin: auto; + } } @include utils.responsive('xl', 'up') { @@ -603,7 +651,6 @@ div.w-10 > a:not(:last-child) { display: grid; grid-template-columns: repeat(24, 1fr); gap: 1rem; - padding-inline: 0; aside { width: auto; @@ -726,7 +773,7 @@ div.w-10 > a:not(:last-child) { } .navbar { - padding: 12px 0; + padding: 12px 16px; } .navbar__inner { @@ -734,55 +781,36 @@ 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; - } -} - @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 { display: block; - > main { - } } .main-wrapper { 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/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/styles.module.css index 72da467..cde1b01 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/styles.module.css +++ b/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/styles.module.css @@ -1,4 +1,4 @@ .breadcrumbsContainer { --ifm-breadcrumb-size-multiplier: 0.8; - margin-bottom: 0.8rem; + margin-bottom: 24px; } diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocVersionBadge/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocVersionBadge/index.tsx index e5c00e5..94d7d19 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocVersionBadge/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/DocVersionBadge/index.tsx @@ -4,6 +4,7 @@ import Translate from '@docusaurus/Translate' import { ThemeClassNames } from '@docusaurus/theme-common' import { useDocsVersion } from '@docusaurus/theme-common/internal' import styles from './style.module.scss' +import { Typography } from '@acid-info/lsd-react' export default function DocVersionBadge({ className }) { const versionMetadata = useDocsVersion() @@ -17,12 +18,14 @@ export default function DocVersionBadge({ className }) { styles.badge, )} > - - {'Version: {versionLabel}'} - + + + {'Version: {versionLabel}'} + + ) } diff --git a/packages/logos-docusaurus-theme/src/client/theme/Layout/Provider/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Layout/Provider/index.tsx new file mode 100644 index 0000000..75938ef --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/Layout/Provider/index.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { composeProviders } from '@docusaurus/theme-common' +import { + AnnouncementBarProvider, + DocsPreferredVersionContextProvider, + ScrollControllerProvider, + NavbarProvider, + PluginHtmlClassNameProvider, +} from '@docusaurus/theme-common/internal' +import type { Props } from '@theme/Layout/Provider' + +const Provider = composeProviders([ + AnnouncementBarProvider, + ScrollControllerProvider, + DocsPreferredVersionContextProvider, + PluginHtmlClassNameProvider, + NavbarProvider, +]) + +export default function LayoutProvider({ children }: Props): JSX.Element { + return {children} +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx index e6975a6..5086a4d 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx @@ -50,7 +50,6 @@ export default function NavbarContent() { return (
- {!mobileSidebar.disabled && }
@@ -66,6 +65,7 @@ export default function NavbarContent() { )} + {!mobileSidebar.disabled && }
) diff --git a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem/index.tsx similarity index 92% rename from packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx rename to packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem/index.tsx index 456b304..7b97ad6 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem/index.tsx @@ -8,7 +8,8 @@ import { import { isSamePath, useLocalPathname } from '@docusaurus/theme-common/internal' import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink' import NavbarItem from '@theme/NavbarItem' -import { ArrowDownIcon, ArrowUpIcon } from '@acid-info/lsd-react' +import { ArrowDownIcon } from '@acid-info/lsd-react' +import styles from './styles.module.css' function isItemActive(item, localPathname) { if (isSamePath(item.to, localPathname)) { @@ -57,10 +58,16 @@ function DropdownNavbarItemDesktop({ return (
+ {label} + {isExternalLink && ( + + )} + + ), + } + if (href) { + return ( + + ) + } + return ( + + activeBaseRegex + ? isRegexpStringMatch(activeBaseRegex, location.pathname) + : location.pathname.startsWith(activeBaseUrl), + })} + {...props} + {...linkContentProps} + /> + ) +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Root.tsx b/packages/logos-docusaurus-theme/src/client/theme/Root.tsx index c0ec8fe..c2fdb2a 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/Root.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/Root.tsx @@ -1,11 +1,30 @@ +import { defaultThemes, ThemeProvider } from '@acid-info/lsd-react' +import { + ColorModeProvider, + useColorMode, +} from '@docusaurus/theme-common/internal' import React from 'react' -import { ThemeProvider, defaultThemes } from '@acid-info/lsd-react' import styles from './style.module.css' -export default function Root({ children }) { +const Content = ({ children }) => { + const colorMode = useColorMode() return ( - +
{children}
 ) } + +export default function Root({ children }) { + return ( + + {children} + + ) +} From 4ee838d47514fa6b2d022a8df627a58c5d336ff8 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 1 Jun 2023 01:56:53 +0900 Subject: [PATCH 3/9] update navbar CSS --- .../docusaurus-playground/docs/architect.md | 48 +++++++++++++++++++ .../docusaurus.config.js | 6 +-- .../src/client/css/custom.scss | 48 ++++++++++++------- .../index.tsx} | 17 +++---- .../NavbarNavLink/styles.module.css | 5 ++ 5 files changed, 96 insertions(+), 28 deletions(-) create mode 100644 packages/docusaurus-playground/docs/architect.md rename packages/logos-docusaurus-theme/src/client/theme/NavbarItem/{NavbarNavLink.tsx => NavbarNavLink/index.tsx} (85%) create mode 100644 packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink/styles.module.css 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 eea1858..4d7b31b 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/packages/docusaurus-playground/docusaurus.config.js @@ -60,15 +60,15 @@ const config = { items: [ { label: 'About', - href: '/docs', + to: '/docs', }, { label: 'Blog', - href: '/', + href: 'https://vac.dev/research', }, { label: 'Github', - href: '/', + href: 'https://github.com/waku-org', }, { type: 'localeDropdown', diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index bffc066..4519e14 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -394,12 +394,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)[aria-current='page'] { &:after { content: '•'; margin-left: 16px; @@ -442,6 +437,7 @@ 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 { @@ -503,6 +499,10 @@ div.w-10 > a:not(:last-child) { } @include utils.responsive('lg', 'down') { + main > .container { + padding-bottom: 84px !important; + } + .grid { grid-template-columns: repeat(2, 1fr); } @@ -535,6 +535,10 @@ div.w-10 > a:not(:last-child) { } } + .navbar__left-items { + display: none; + } + .footer { padding: 24px 16px; } @@ -542,6 +546,10 @@ div.w-10 > a:not(:last-child) { .desktop { display: none; } + + .theme-admonition { + display: block !important; + } } @include utils.responsive('sm', 'down') { @@ -592,10 +600,6 @@ div.w-10 > a:not(:last-child) { .navbar__left { display: flex; } - - .navbar__left-items { - display: none; - } } @include utils.responsive('lg', 'up') { @@ -609,7 +613,7 @@ div.w-10 > a:not(:last-child) { & > div { display: grid; - grid-template-columns: repeat(16, 1fr); + grid-template-columns: repeat(16, 42px); gap: 1rem; padding-inline: 16px; @@ -808,16 +812,26 @@ div.w-10 > a:not(:last-child) { } } -@include utils.responsive('lg', 'down') { - .main-wrapper > div { +@include utils.responsive('xl', 'down') { + #__docusaurus_skipToContent_fallback { display: block; + max-width: 912px; + margin: auto; } .main-wrapper { - // website pages - - main > .container { - padding-inline: 0 !important; + & > 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/NavbarItem/NavbarNavLink.tsx b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink/index.tsx similarity index 85% rename from packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink.tsx rename to packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink/index.tsx index e0813f7..ff4e024 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink/index.tsx @@ -3,7 +3,9 @@ import Link from '@docusaurus/Link' import useBaseUrl from '@docusaurus/useBaseUrl' import isInternalUrl from '@docusaurus/isInternalUrl' import { isRegexpStringMatch } from '@docusaurus/theme-common' -import IconExternalLink from '@theme/Icon/ExternalLink' +import { PickIcon } from '@acid-info/lsd-react' +import styles from './styles.module.css' + export default function NavbarNavLink({ activeBasePath, activeBaseRegex, @@ -21,21 +23,19 @@ export default function NavbarNavLink({ const activeBaseUrl = useBaseUrl(activeBasePath) const normalizedHref = useBaseUrl(href, { forcePrependBaseUrl: true }) const isExternalLink = label && href && !isInternalUrl(href) + // Link content is set through html XOR label const linkContentProps = html ? { dangerouslySetInnerHTML: { __html: html } } : { children: ( - <> +
{label} - {isExternalLink && ( - - )} - + {isExternalLink && } +
), } + if (href) { return ( ) } + return ( Date: Thu, 1 Jun 2023 02:44:05 +0900 Subject: [PATCH 4/9] adjust light theme --- .../src/client/css/custom.scss | 53 ++++++++++++------- .../theme/CodeBlock/Content/styles.module.css | 4 +- .../src/client/theme/DocBreadcrumbs/index.tsx | 8 ++- .../NavbarItem/DropdownNavbarItem/index.tsx | 2 +- .../{styles.module.css => styles.module.scss} | 8 +++ .../theme/NavbarItem/NavbarNavLink/index.tsx | 10 ++-- .../NavbarNavLink/styles.module.css | 1 + 7 files changed, 60 insertions(+), 26 deletions(-) rename packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem/{styles.module.css => styles.module.scss} (53%) diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 4519e14..97ea6e0 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; @@ -227,6 +226,26 @@ --ifm-hero-background-color: #f8f8fa; --ifm-hero-text-color: var(--ifm-color-black); + + .navbar { + box-shadow: none; + } + + .dropdown__link--active { + background-color: transparent; + } +} + +[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') { @@ -362,11 +381,12 @@ small { .breadcrumbs__link { padding: 0; + background: transparent !important; } .navbar { padding-inline: 0; - height: 80px; + height: 64px; } .navbar__inner { @@ -379,11 +399,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; @@ -394,7 +409,7 @@ small { text-decoration-color: #fff !important; } -.navbar__left-items > a:not(:last-child)[aria-current='page'] { +.navbar__left-items > a:not(:last-child)[href^='/'] { &:after { content: '•'; margin-left: 16px; @@ -524,7 +539,7 @@ small { justify-content: center; margin: 0; border: 1px solid rgb(var(--lsd-border-primary)); - border-left: none; + // border-left: none; width: 32px; height: 32px; box-sizing: border-box; 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/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 (
{React.cloneElement(links, { links: secondRow })} + ) } diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/styles.module.scss index eb34f3e..d8db87f 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/styles.module.scss +++ b/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/styles.module.scss @@ -13,9 +13,23 @@ border-top: 1px solid rgb(var(--lsd-border-primary)); } +.backToTop { + width: fit-content; + position: absolute; + bottom: 16px; + left: 16px; +} + @include utils.responsive('lg', 'down') { .firstRow { width: 100vw; margin-left: -16px !important; } + + .backToTop { + margin-top: 76px !important; + position: relative; + bottom: 16px; + left: 16px; + } } From 2e30a1492b2a64726d3eafd88f58ddff0643b09b Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 1 Jun 2023 05:18:12 +0900 Subject: [PATCH 9/9] footer item CSS update --- packages/logos-docusaurus-theme/src/client/css/custom.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 1fae440..6dea9e4 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -784,7 +784,7 @@ small { } .footer__item { - display: inline-block; + display: inline-flex; &, a {