update navbar CSS

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.
+
+<br/>
+
+### 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
+
+<br/>
+
+[Dive into the docs](https://vac.dev/research)
+
+[Continue reading](/team)

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',

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;
+  }
 }

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: (
-          <>
+          <div className={styles.linkContent}>
             {label}
-            {isExternalLink && (
-              <IconExternalLink
-                {...(isDropdownLink && { width: 12, height: 12 })}
-              />
-            )}
-          </>
+            {isExternalLink && <PickIcon color="primary" />}
+          </div>
         ),
       }
+
   if (href) {
     return (
       <Link
@@ -45,6 +45,7 @@ export default function NavbarNavLink({
       />
     )
   }
+
   return (
     <Link
       to={toUrl}

packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink/styles.module.css

@@ -0,0 +1,5 @@
+.linkContent {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}