Update community theme assets and navbar configuration; enhance logo …

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:

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

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('')}<span class="navbar__action-label">Sponsor</span>`,
+            'aria-label': 'Sponsor',
+            title: 'Sponsor',
+            className: 'navbar__action-link',
             position: 'right',
             target: '_blank',
           },
           {
             to: 'https://docusaurus.io',
-            label: 'Docusaurus',
+            html: '<img src="/img/Docusaurus.svg" alt="" width="24" height="24" /><span class="navbar__action-label">Docusaurus</span>',
+            '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('')}<span class="navbar__action-label">Discord</span>`,
+            '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('')}<span class="navbar__action-label">GitHub</span>`,
+            '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',

src/pages/index.tsx

@@ -131,7 +131,7 @@ export default function Home(): ReactNode {
               </span>
               <Arrow diagonal />
             </Link>
-            <Link to="/contributing/customisations/" className={styles.noteLink}>
+            <Link to="/knowledge/#how-to-contribute" className={styles.noteLink}>
               <span>
                 <small>HAVE SOMETHING TO ADD?</small>
                 Share a customisation

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

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<Props, 'imageClassName' | 'titleClassName'> &
+  React.ComponentProps<typeof Link>
+
+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 (
+    <Link to={href} {...props} {...(logo?.target && { target: logo.target })}>
+      {logo && (
+        <div className={imageClassName}>
+          <ThemedImage
+            sources={sources}
+            className={logo.className}
+            alt={logo.alt ?? ''}
+            width={logo.width}
+            height={logo.height}
+            style={logo.style}
+          />
+        </div>
+      )}
+      {title != null && (
+        <span className={clsx(titleClassName, 'community-wordmark')}>
+          <span>docusaurus</span>
+          <span className="community-wordmark__suffix">.community</span>
+        </span>
+      )}
+    </Link>
+  )
+}