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..1d3330b 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',
},
@@ -189,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 bf953b2..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;
@@ -124,7 +124,7 @@ body {
.navbar__title {
font-size: 1rem;
- font-weight: 800;
+ font-weight: 650;
letter-spacing: -0.035em;
}
@@ -135,6 +135,49 @@ 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 {
+ @media (min-width: 997px) {
+ 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 {
@@ -157,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);
}
}
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 @@
+