acid-info
/
logos-docusaurus-plugins
mirror of https://github.com/acid-info/logos-docusaurus-plugins.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update navbar

This commit is contained in:
jinhojang6 2023-05-31 23:55:46 +09:00
parent 793cc1aa90
commit 132df37206
16 changed files with 305 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
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"

18
packages/docusaurus-playground/docusaurus.config.js
View File

@ -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',
},
],
},

19
packages/logos-docusaurus-preset/src/theme-config/base.ts
View File

@ -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
packages/logos-docusaurus-preset/src/theme-config/codex.ts
View File

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

12
packages/logos-docusaurus-preset/src/theme-config/logos.ts
View File

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

92
packages/logos-docusaurus-theme/src/client/css/custom.scss
View File

@ -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 {

59
packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/index.tsx Normal file
View File

@ -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)

35
packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/styles.module.scss Normal file
View File

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

2
packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/styles.module.css
View File

@ -1,4 +1,4 @@
.breadcrumbsContainer {
--ifm-breadcrumb-size-multiplier: 0.8;
margin-bottom: 0.8rem;
margin-bottom: 24px;
}

15
packages/logos-docusaurus-theme/src/client/theme/DocVersionBadge/index.tsx
View File

@ -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>
)
}

22
packages/logos-docusaurus-theme/src/client/theme/Layout/Provider/index.tsx Normal file
View File

@ -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>
}

2
packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx
View File

@ -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>
)

17
packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx → packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem/index.tsx
View File

@ -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 (
<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"

6
packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem/styles.module.css Normal file
View File

@ -0,0 +1,6 @@
.dropdownNavbarItem {
border: 1px solid rgb(var(--lsd-border-primary));
padding: 6px 14px;
box-sizing: border-box;
height: 32px;
}

62
packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink.tsx Normal file
View File

@ -0,0 +1,62 @@
import React from 'react'
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'
export default function NavbarNavLink({
activeBasePath,
activeBaseRegex,
to,
href,
label,
html,
isDropdownLink,
prependBaseUrlToHref,
...props
}) {
// TODO all this seems hacky
// {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
const toUrl = useBaseUrl(to)
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 && (
<IconExternalLink
{...(isDropdownLink && { width: 12, height: 12 })}
/>
)}
</>
),
}
if (href) {
return (
<Link
href={prependBaseUrlToHref ? normalizedHref : href}
{...props}
{...linkContentProps}
/>
)
}
return (
<Link
to={toUrl}
isNavLink
{...((activeBasePath || activeBaseRegex) && {
isActive: (_match, location) =>
activeBaseRegex
? isRegexpStringMatch(activeBaseRegex, location.pathname)
: location.pathname.startsWith(activeBaseUrl),
})}
{...props}
{...linkContentProps}
/>
)
}

25
packages/logos-docusaurus-theme/src/client/theme/Root.tsx
View File

@ -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 (
<ThemeProvider theme={defaultThemes.dark}>
<ThemeProvider
theme={
colorMode.colorMode === 'dark'
? defaultThemes.dark
: defaultThemes.light
}
>
<div className={styles.root}>{children}</div>
</ThemeProvider>
)
}
export default function Root({ children }) {
return (
<ColorModeProvider>
<Content>{children}</Content>
</ColorModeProvider>
)
}