From a32caacc4343fd7462ea282bb0f582a8047e864c Mon Sep 17 00:00:00 2001 From: Mikey O'Toole Date: Tue, 27 Oct 2026 10:50:34 +0000 Subject: [PATCH 1/3] Update community theme assets and navbar configuration; enhance logo and favicon --- README.md | 12 ++++++ data/plugins/jlvandenhout.docs-editor.yaml | 2 +- docusaurus.config.ts | 32 ++++++++++++---- src/scss/_community-theme.scss | 43 ++++++++++++++++++++- src/theme/Logo/index.tsx | 44 ++++++++++++++++++++++ static/img/community-favicon.svg | 7 ++++ static/img/community-mark-dark.svg | 7 ++++ static/img/community-mark.svg | 7 ++++ 8 files changed, 145 insertions(+), 9 deletions(-) create mode 100644 src/theme/Logo/index.tsx create mode 100644 static/img/community-favicon.svg create mode 100644 static/img/community-mark-dark.svg create mode 100644 static/img/community-mark.svg diff --git a/README.md b/README.md index 5acaf24..8e1f141 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,18 @@ system preference. Avoid adding a separate theme-detection script that would com Keep keyboard focus visible, respect reduced-motion preferences, and check both themes at mobile and desktop widths when changing the design. Run `yarn typecheck` and `yarn build` before submitting changes. +Navbar action links use icons on desktop and show their text labels in the mobile menu. +Keep the `aria-label`, `title`, and `.navbar__action-label` text in sync when editing them in +[the site configuration](docusaurus.config.ts). Font Awesome icons are rendered at build time; +the Docusaurus icon uses the existing local brand asset. + +The community brand uses a dinosaur inside a speech bubble, with +[light](static/img/community-mark.svg) and [dark](static/img/community-mark-dark.svg) navbar +assets and a [simplified favicon](static/img/community-favicon.svg). The +[Logo theme component](src/theme/Logo/index.tsx) renders the two-tone wordmark in both the +desktop navbar and mobile menu. Keep the two mark variants geometrically identical. +The green Docusaurus icon in the external link and footer still identifies the upstream project. + ## Deployment Using SSH: diff --git a/data/plugins/jlvandenhout.docs-editor.yaml b/data/plugins/jlvandenhout.docs-editor.yaml index f4b8b17..17729a0 100644 --- a/data/plugins/jlvandenhout.docs-editor.yaml +++ b/data/plugins/jlvandenhout.docs-editor.yaml @@ -10,6 +10,6 @@ tags: - utility - editing minimumVersion: 2.0.0-beta.15 -status: maintained +status: unmaintained npmPackages: - docusaurus-plugin-docs-editor diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 9be0e12..de602b6 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -12,6 +12,9 @@ import { themes } from 'prism-react-renderer'; import plausiblePlugin, {type PluginOptions as PlausiblePluginOptions} from '@homotechsual/docusaurus-plugin-plausible'; import showcasePlugin, {type PresetOptions as ShowcasePresetOptions} from '@homotechsual/docusaurus-plugin-showcase'; import { pluginsPreset } from '@homotechsual/docusaurus-plugin-showcase/presets'; +import { icon } from '@fortawesome/fontawesome-svg-core'; +import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'; +import { faHeart } from '@fortawesome/free-regular-svg-icons'; const lightCodeTheme = themes.vsLight; const darkCodeTheme = themes.vsDark; // Define our admonitions config. @@ -67,7 +70,7 @@ const commonDocsPluginConfig = { const config: Config = { title: 'Docusaurus.community', tagline: 'Guides, plugins, and components shared by Docusaurus users.', - favicon: 'img/favicon.ico', + favicon: 'img/community-favicon.svg', url: 'https://docusaurus.community', baseUrl: '/', organizationName: 'homotechsual', // Usually your GitHub org/user name. @@ -116,8 +119,11 @@ const config: Config = { navbar: { title: 'Docusaurus.community', logo: { - alt: 'Docusaurus.community Logo', - src: 'img/logo.svg', + alt: '', + src: 'img/community-mark.svg', + srcDark: 'img/community-mark-dark.svg', + width: 36, + height: 36, }, hideOnScroll: false, items: [ @@ -142,25 +148,37 @@ const config: Config = { }, { to: 'https://github.com/sponsors/homotechsual/', - label: 'Sponsor', + html: `${icon(faHeart).html.join('')}Sponsor`, + 'aria-label': 'Sponsor', + title: 'Sponsor', + className: 'navbar__action-link', position: 'right', target: '_blank', }, { to: 'https://docusaurus.io', - label: 'Docusaurus', + html: 'Docusaurus', + 'aria-label': 'Docusaurus', + title: 'Docusaurus', + className: 'navbar__action-link', position: 'right', target: '_blank', }, { to: 'https://discord.gg/docusaurus', - label: 'Discord', + html: `${icon(faDiscord).html.join('')}Discord`, + 'aria-label': 'Discord', + title: 'Discord', + className: 'navbar__action-link', position: 'right', target: '_blank', }, { to: 'https://github.com/DocusaurusCommunity/website', - label: 'GitHub', + html: `${icon(faGithub).html.join('')}GitHub`, + 'aria-label': 'GitHub', + title: 'GitHub', + className: 'navbar__action-link', position: 'right', target: '_blank', }, diff --git a/src/scss/_community-theme.scss b/src/scss/_community-theme.scss index bf953b2..7748833 100644 --- a/src/scss/_community-theme.scss +++ b/src/scss/_community-theme.scss @@ -124,7 +124,7 @@ body { .navbar__title { font-size: 1rem; - font-weight: 800; + font-weight: 650; letter-spacing: -0.035em; } @@ -135,6 +135,47 @@ body { .navbar__logo { margin-right: 0.625rem; + height: 2.25rem; +} + +.community-wordmark { + white-space: nowrap; +} + +.community-wordmark__suffix { + color: var(--cp-accent); +} + +.navbar__action-link { + display: inline-flex; + gap: 0.75rem; + align-items: center; + justify-content: center; + min-width: 2.75rem; + min-height: 2.75rem; + padding: 0.625rem; + border-radius: 0.625rem; + + > svg, + > img { + flex-shrink: 0; + width: 1.5rem; + height: 1.5rem; + } + + &:hover { + background: var(--cp-accent-soft); + color: var(--cp-accent); + } +} + +.navbar__inner .navbar__action-label { + display: none; +} + +.navbar-sidebar .navbar__action-link { + display: flex; + justify-content: flex-start; } .footer { diff --git a/src/theme/Logo/index.tsx b/src/theme/Logo/index.tsx new file mode 100644 index 0000000..2ae566a --- /dev/null +++ b/src/theme/Logo/index.tsx @@ -0,0 +1,44 @@ +import React, { type ReactNode } from 'react' +import clsx from 'clsx' +import Link from '@docusaurus/Link' +import useBaseUrl from '@docusaurus/useBaseUrl' +import { useThemeConfig } from '@docusaurus/theme-common' +import ThemedImage from '@theme/ThemedImage' +import type { Props } from '@theme/Logo' + +type LogoProps = Pick & + React.ComponentProps + +export default function Logo({ imageClassName, titleClassName, ...props }: LogoProps): ReactNode { + const { + navbar: { logo, title }, + } = useThemeConfig() + const href = useBaseUrl(logo?.href || '/') + const sources = { + light: useBaseUrl(logo?.src || 'img/community-mark.svg'), + dark: useBaseUrl(logo?.srcDark || logo?.src || 'img/community-mark-dark.svg'), + } + + return ( + + {logo && ( +
+ +
+ )} + {title != null && ( + + docusaurus + .community + + )} + + ) +} diff --git a/static/img/community-favicon.svg b/static/img/community-favicon.svg new file mode 100644 index 0000000..1dde192 --- /dev/null +++ b/static/img/community-favicon.svg @@ -0,0 +1,7 @@ + + + + diff --git a/static/img/community-mark-dark.svg b/static/img/community-mark-dark.svg new file mode 100644 index 0000000..e3d7aaa --- /dev/null +++ b/static/img/community-mark-dark.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/static/img/community-mark.svg b/static/img/community-mark.svg new file mode 100644 index 0000000..07ca1fc --- /dev/null +++ b/static/img/community-mark.svg @@ -0,0 +1,7 @@ + + + + + + + From 7e3f5f69055ae004d199225f026ffb299fa59e2e Mon Sep 17 00:00:00 2001 From: Mikey O'Toole Date: Tue, 27 Oct 2026 10:58:59 +0000 Subject: [PATCH 2/3] Add media query for navbar action link display Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- src/scss/_community-theme.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/scss/_community-theme.scss b/src/scss/_community-theme.scss index 7748833..1fc017f 100644 --- a/src/scss/_community-theme.scss +++ b/src/scss/_community-theme.scss @@ -147,7 +147,9 @@ body { } .navbar__action-link { - display: inline-flex; + @media (min-width: 997px) { + display: inline-flex; + } gap: 0.75rem; align-items: center; justify-content: center; From 9eb2c07374682291ba2bb83ac602bc93fbc508aa Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 27 Oct 2026 10:59:25 +0000 Subject: [PATCH 3/3] Fix contribution links and theme button contrast Co-authored-by: homotechsual <2288257+homotechsual@users.noreply.github.com> --- docusaurus.config.ts | 2 +- src/pages/index.tsx | 2 +- src/scss/_community-theme.scss | 35 ++++++++++++++++++++++++++-------- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index de602b6..1d3330b 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -207,7 +207,7 @@ const config: Config = { }, { label: 'Contribute a guide', - to: '/contributing/customisations/', + to: '/knowledge/#how-to-contribute', }, { label: 'Add a plugin', diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 400bda8..741e8bd 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -131,7 +131,7 @@ export default function Home(): ReactNode { - + HAVE SOMETHING TO ADD? Share a customisation diff --git a/src/scss/_community-theme.scss b/src/scss/_community-theme.scss index 1fc017f..55875d9 100644 --- a/src/scss/_community-theme.scss +++ b/src/scss/_community-theme.scss @@ -38,7 +38,7 @@ html[data-theme='dark'] { --cp-text-soft: #b0b0b0; --cp-accent: #fd8ea1; --cp-accent-hover: #fb7b91; - --cp-accent-soft: rgba(253, 142, 161, 0.14); + --cp-accent-soft: rgba(253, 142, 161, 0.06); --cp-accent-fg: #1a1a1a; --cp-success: #4ade80; --cp-danger: #f87171; @@ -200,18 +200,37 @@ body { color: var(--cp-accent); } -.button--primary { +.button--primary:not(.button--outline) { --ifm-button-color: var(--cp-accent-fg); } -.button--secondary { - --ifm-button-background-color: var(--cp-surface); - --ifm-button-border-color: var(--cp-border-strong); - --ifm-button-color: var(--cp-text); +.button.button--secondary { + color: var(--cp-text); + background-color: var(--cp-surface); + border-color: var(--cp-border-strong); + + &:hover { + color: var(--cp-accent); + background-color: var(--cp-accent-soft); + border-color: var(--cp-accent); + } + + &:active { + color: var(--cp-accent-fg); + background-color: var(--cp-accent); + border-color: var(--cp-accent); + } +} + +.button.button--secondary.button--outline { + background-color: transparent; + + &:not(.button--active):not(:hover) { + color: var(--cp-text); + } &:hover { - --ifm-button-background-color: var(--cp-accent-soft); - --ifm-button-border-color: var(--cp-accent); + background-color: var(--cp-accent-soft); } }