Merge pull request #15 from acid-info/mobile-css

Update CSS
This commit is contained in:
jeangovil
2023-06-01 00:47:20 +03:30
committed by GitHub
27 changed files with 831 additions and 325 deletions
+1
View File
@@ -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"
@@ -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)
@@ -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 <br/> Built with Docusaurus.',
copyright: 'Logos @2023<br/>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',
},
],
},
@@ -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: {
@@ -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' },
@@ -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' },
File diff suppressed because it is too large Load Diff
@@ -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;
@@ -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 (
<div className={clsx(styles.toggle, className)}>
<button
className={clsx(
'clean-btn',
styles.toggleButton,
!isBrowser && styles.toggleButtonDisabled,
buttonClassName,
)}
type="button"
onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}
disabled={!isBrowser}
title={title}
aria-label={title}
aria-live="polite"
>
<IconLightMode
className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
/>
<IconDarkMode
className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
/>
</button>
</div>
)
}
export default React.memo(ColorModeToggle)
@@ -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;
}
@@ -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 (
<nav
className={clsx(
@@ -91,7 +97,7 @@ export default function DocBreadcrumbs() {
className={clsx('breadcrumbs__item')}
variant="body3"
component="a"
href="/"
href={routeBasePath}
>
Home
</Typography>
@@ -1,4 +1,4 @@
.breadcrumbsContainer {
--ifm-breadcrumb-size-multiplier: 0.8;
margin-bottom: 0.8rem;
margin-bottom: 24px;
}
@@ -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;
}
}
@@ -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,
)}
>
<Translate
id="theme.docs.versionBadge.label"
values={{ versionLabel: versionMetadata.label }}
>
{'Version: {versionLabel}'}
</Translate>
<Typography variant="body3">
<Translate
id="theme.docs.versionBadge.label"
values={{ versionLabel: versionMetadata.label }}
>
{'Version: {versionLabel}'}
</Translate>
</Typography>
</span>
)
}
@@ -0,0 +1,47 @@
import React from 'react'
import clsx from 'clsx'
import styles from './styles.module.scss'
import { Button } from '@acid-info/lsd-react'
export default function FooterLayout({ style, links, logo, copyright }) {
const firstRow = [...links.props.links.slice(0, 2)]
const secondRow = [...links.props.links.slice(2)]
const handleScrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
})
}
return (
<footer
className={clsx('footer', {
'footer--dark': style === 'dark',
})}
>
<div className={clsx('container', 'container-fluid', styles.firstRow)}>
{(logo || copyright) && (
<>
<div className="footer__bottom text--center">
{logo && <div className="margin-bottom--sm">{logo}</div>}
{copyright}
</div>
</>
)}
{React.cloneElement(links, { links: firstRow })}
</div>
<div className={styles.secondRow}>
<div className="footer__bottom text--center">Logos Collective</div>
{React.cloneElement(links, { links: secondRow })}
</div>
<Button
className={styles.backToTop}
size="small"
onClick={handleScrollToTop}
>
Back to top
</Button>
</footer>
)
}
@@ -0,0 +1,35 @@
@use '../../../css/utils';
.firstRow {
border-top: 1px solid rgb(var(--lsd-text-primary));
display: flex;
flex-direction: row;
margin-bottom: 96px !important;
}
.secondRow {
display: flex;
flex-direction: row;
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;
}
}
@@ -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 <Provider>{children}</Provider>
}
@@ -50,7 +50,6 @@ export default function NavbarContent() {
return (
<div className="navbar__inner">
<div className="navbar__left">
{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
<NavbarLogo />
</div>
<div className="navbar__left-items">
@@ -66,6 +65,7 @@ export default function NavbarContent() {
<SearchBar />
</NavbarSearch>
)}
{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
</div>
</div>
)
@@ -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.scss'
function isItemActive(item, localPathname) {
if (isSamePath(item.to, localPathname)) {
@@ -57,10 +58,16 @@ function DropdownNavbarItemDesktop({
return (
<div
ref={dropdownRef}
className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
'dropdown--right': position === 'right',
'dropdown--show': showDropdown,
})}
className={clsx(
'navbar__item',
styles.dropdownNavbarItem,
'dropdown',
'dropdown--hoverable',
{
'dropdown--right': position === 'right',
'dropdown--show': showDropdown,
},
)}
>
<NavbarNavLink
aria-haspopup="true"
@@ -0,0 +1,14 @@
@use '../../../css/utils';
.dropdownNavbarItem {
border: 1px solid rgb(var(--lsd-border-primary));
padding: 6px 14px;
box-sizing: border-box;
height: 32px;
}
@include utils.responsive('lg', 'down') {
.dropdownNavbarItem {
display: none;
}
}

Some files were not shown because too many files have changed in this diff Show More