Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n groundwork #81

Merged
merged 24 commits into from
Jan 1, 2025
Merged
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
164849f
feat: add locale en
xen0n Oct 21, 2023
490274e
build: yarn write-translations --locale en
xen0n Oct 21, 2023
918de90
feat(i18n): translate strings
xen0n Oct 21, 2023
164e1b3
feat: add English version of the site logo
xen0n Oct 21, 2023
cb1fce9
feat(i18n): revise & update en messages
xen0n Jan 1, 2025
3e5f184
feat: localize the site config strings
xen0n Jan 1, 2025
3be5752
build: swizzle the LocaleDropdownNavbarItem for customization
xen0n Jan 1, 2025
1be16a2
style: prettier
xen0n Jan 1, 2025
09f5cc0
feat: make the locale dropdown item look like a toggle
xen0n Jan 1, 2025
707af75
feat: replace the navbar GitHub link with icon for desktop
xen0n Jan 1, 2025
4145c47
build: yarn swizzle NavbarItem/DropdownNavbarItem
xen0n Jan 1, 2025
e76137d
style: prettier
xen0n Jan 1, 2025
de3bf2a
refactor: rename swizzled DropdownNavbarItem to ToggleLikeDropdownNav…
xen0n Jan 1, 2025
1160a6c
refactor: move the toggle-like dropdown customization to ToggleLikeDr…
xen0n Jan 1, 2025
1410e19
feat: reduce apparent left padding of search box
xen0n Jan 1, 2025
5cf05f0
feat: shorten "Site news" to "News" in the navbar
xen0n Jan 1, 2025
e153481
feat(i18n): update the copyright footer
xen0n Jan 1, 2025
55c530e
feat(i18n): translate the footer
xen0n Jan 1, 2025
10eb9fd
feat(i18n): translate the homepage except the hero banner
xen0n Jan 1, 2025
3b643eb
feat(i18n): translate the rest of the homepage
xen0n Jan 1, 2025
1bc7525
feat(i18n): emphasize The People in the translation
xen0n Jan 1, 2025
be25f4f
feat(i18n): make the project categories' names translatable
xen0n Jan 1, 2025
6c59208
feat(i18n): translate the project categories
xen0n Jan 1, 2025
5e4b5d6
fix(i18n): make in-house plugins respect i18n in route generation
xen0n Jan 1, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor: move the toggle-like dropdown customization to ToggleLikeDr…
…opdownNavbarItem
  • Loading branch information
xen0n committed Jan 1, 2025
commit 1160a6c6015d239c405be4a8801f62376a90ec41
31 changes: 31 additions & 0 deletions src/css/custom.css
Original file line number Diff line number Diff line change
@@ -184,3 +184,34 @@ em.cjk {
background-color: var(--ifm-navbar-link-color);
}
}

/* for ToggleLikeDropdownNavbarItem */
/* dropdown, but looking like a toggle when non-mobile */

@media screen and (min-width: 996px) {
.toggleLikeDropdown {
display: flex;
align-content: center;
align-items: center;

width: 40px;
height: 40px;
padding: 10px;
margin-right: 4px;
border-radius: 50%;
transition: background var(--ifm-transition-fast);
}

.toggleLikeDropdown:hover {
background: var(--ifm-color-emphasis-200);
}

/* no dropdown arrow for the child <a> for less horizontal space */
.toggleLikeDropdown > .navbar__link::after {
display: none;
}

.toggleLikeDropdown > .navbar__link:hover {
color: inherit;
}
}
21 changes: 13 additions & 8 deletions src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
Original file line number Diff line number Diff line change
@@ -2,12 +2,13 @@ import React from 'react'
import clsx from 'clsx'
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'
import { translate } from '@docusaurus/Translate'
import { useLocation } from '@docusaurus/router'
import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'
import IconLanguage from '@theme/Icon/Language'
import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'
import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'

import ToggleLikeDropdownNavbarItem from '../ToggleLikeDropdownNavbarItem'
import styles from './styles.module.css'

export default function LocaleDropdownNavbarItem({
@@ -51,18 +52,22 @@ export default function LocaleDropdownNavbarItem({

const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]

// swizzle modification: the label is removed for the item to take less
// horizontal space
// Mobile is handled a bit differently
const dropdownLabel = mobile
? translate({
message: 'Languages',
id: 'theme.navbar.mobileLanguageDropdown.label',
description: 'The label for the mobile language switcher dropdown',
})
: localeConfigs[currentLocale]!.label

return (
<DropdownNavbarItem
<ToggleLikeDropdownNavbarItem
{...props}
mobile={mobile}
className={clsx(styles.awlyLocaleDropdown, props.className)}
label={
<IconLanguage className={styles.iconLanguage} />
// swizzle modification: removed label
}
icon={<IconLanguage className={styles.iconLanguage} />}
label={dropdownLabel}
items={items}
/>
)
38 changes: 31 additions & 7 deletions src/theme/NavbarItem/ToggleLikeDropdownNavbarItem/index.tsx
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink'
import NavbarItem, { type LinkLikeNavbarItemProps } from '@theme/NavbarItem'
import type {
DesktopOrMobileNavBarItemProps,
Props,
Props as DropdownNavbarItemProps,
} from '@theme/NavbarItem/DropdownNavbarItem'
import styles from './styles.module.css'

@@ -37,13 +37,23 @@ function containsActiveItems(
return items.some((item) => isItemActive(item, localPathname))
}

interface DesktopOrMobileNavBarItemPropsWithIcon
extends DesktopOrMobileNavBarItemProps {
icon?: JSX.Element
}

interface Props extends DropdownNavbarItemProps {
icon?: JSX.Element
}

function ToggleLikeDropdownNavbarItemDesktop({
items,
icon,
position,
className,
onClick,
...props
}: DesktopOrMobileNavBarItemProps) {
}: DesktopOrMobileNavBarItemPropsWithIcon) {
const dropdownRef = useRef<HTMLDivElement>(null)
const [showDropdown, setShowDropdown] = useState(false)

@@ -74,10 +84,16 @@ function ToggleLikeDropdownNavbarItemDesktop({
return (
<div
ref={dropdownRef}
className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
'dropdown--right': position === 'right',
'dropdown--show': showDropdown,
})}
className={clsx(
'navbar__item',
'dropdown',
'dropdown--hoverable',
'toggleLikeDropdown',
{
'dropdown--right': position === 'right',
'dropdown--show': showDropdown,
},
)}
>
<NavbarNavLink
aria-haspopup="true"
@@ -89,6 +105,7 @@ function ToggleLikeDropdownNavbarItemDesktop({
href={props.to ? undefined : '#'}
className={clsx('navbar__link', className)}
{...props}
label={icon}
onClick={props.to ? undefined : (e) => e.preventDefault()}
onKeyDown={(e) => {
if (e.key === 'Enter') {
@@ -115,11 +132,12 @@ function ToggleLikeDropdownNavbarItemDesktop({

function ToggleLikeDropdownNavbarItemMobile({
items,
icon,
className,
position, // Need to destructure position from props so that it doesn't get passed on.
onClick,
...props
}: DesktopOrMobileNavBarItemProps) {
}: DesktopOrMobileNavBarItemPropsWithIcon) {
const localPathname = useLocalPathname()
const containsActive = containsActiveItems(items, localPathname)

@@ -148,6 +166,12 @@ function ToggleLikeDropdownNavbarItemMobile({
className,
)}
{...props}
label={
<>
{icon}
{props.label}
</>
}
onClick={(e) => {
e.preventDefault()
toggleCollapsed()