feat: socials

site/.vocs/config.ts

@@ -1,6 +1,20 @@
 import { defineConfig } from '../../src/index.js'
 
 export default defineConfig({
+  socials: [
+    {
+      icon: 'discord',
+      link: 'https://discord.gg/JUrRkGweXV',
+    },
+    {
+      icon: 'github',
+      link: 'https://github.com/wagmi-dev/vocs',
+    },
+    {
+      icon: 'x',
+      link: 'https://twitter.com/wagmi_sh',
+    },
+  ],
   sidebar: [
     {
       title: 'Overview',

src/app/components/DesktopTopNav.css.ts

@@ -25,14 +25,6 @@ export const button = style(
   {
     borderRadius: borderRadiusVars[4],
     padding: spaceVars[8],
-    selectors: {
-      '&:hover': {
-        backgroundColor: primitiveColorVars.background3,
-      },
-      '&:hover:active': {
-        backgroundColor: primitiveColorVars.background2,
-      },
-    },
   },
   'button',
 )
@@ -52,6 +44,32 @@ export const curtain = style(
   'curtain',
 )
 
+export const divider = style(
+  {
+    backgroundColor: primitiveColorVars.border,
+    height: '35%',
+    width: '1px',
+  },
+  'divider',
+)
+
+export const group = style({ alignItems: 'center', display: 'flex' }, 'group')
+
+export const icon = style(
+  {
+    color: primitiveColorVars.text2,
+    selectors: {
+      [`${button}:hover &`]: {
+        color: primitiveColorVars.text,
+      },
+    },
+  },
+  'icon',
+)
+
 export const item = style({ alignItems: 'center', display: 'flex', height: '100%' }, 'item')
 
-export const section = style({ alignItems: 'center', display: 'flex', height: '100%' }, 'section')
+export const section = style(
+  { alignItems: 'center', display: 'flex', height: '100%', gap: spaceVars[16] },
+  'section',
+)

src/app/components/DesktopTopNav.tsx

@@ -1,23 +1,29 @@
+import { config } from 'virtual:config'
+
+import type { SocialItem } from '../../config.js'
 import { useTheme } from '../hooks/useTheme.js'
 import * as styles from './DesktopTopNav.css.js'
 import { Icon } from './Icon.js'
 
 DesktopTopNav.Curtain = Curtain
 
 export function DesktopTopNav() {
-  const { toggle, theme } = useTheme()
   return (
     <div className={styles.root}>
       <div className={styles.section} />
       <div className={styles.section}>
-        <div className={styles.item}>
-          <button className={styles.button} onClick={toggle} type="button">
-            {theme === 'dark' ? (
-              <Icon size="18px" label="Light" src="/.vocs/icons/sun.svg" />
-            ) : (
-              <Icon size="18px" label="Dark" src="/.vocs/icons/moon.svg" />
-            )}
-          </button>
+        <div className={styles.group}>
+          {config.socials?.map((social, i) => (
+            <div className={styles.item} key={i}>
+              <SocialButton {...social} />
+            </div>
+          ))}
+        </div>
+        <div className={styles.divider} />
+        <div className={styles.group}>
+          <div className={styles.item}>
+            <ThemeToggleButton />
+          </div>
         </div>
       </div>
     </div>
@@ -27,3 +33,41 @@ export function DesktopTopNav() {
 export function Curtain() {
   return <div className={styles.curtain} />
 }
+
+function ThemeToggleButton() {
+  const { toggle, theme } = useTheme()
+  return (
+    <button className={styles.button} onClick={toggle} type="button">
+      {theme === 'dark' ? (
+        <Icon className={styles.icon} size="20px" label="Light" src="/.vocs/icons/sun.svg" />
+      ) : (
+        <Icon
+          className={styles.icon}
+          size="20px"
+          label="Dark"
+          src="/.vocs/icons/moon.svg"
+          style={{ marginTop: '-2px' }}
+        />
+      )}
+    </button>
+  )
+}
+
+const sizesForIcons = {
+  discord: '23px',
+  github: '20px',
+  x: '18px',
+} satisfies Record<SocialItem['icon'], string>
+
+function SocialButton({ icon, link }: SocialItem) {
+  return (
+    <a className={styles.button} href={link} target="_blank" rel="noopener noreferrer">
+      <Icon
+        className={styles.icon}
+        label={`${icon} Icon`}
+        size={sizesForIcons[icon] || '20px'}
+        src={`/.vocs/icons/${icon}.svg`}
+      />
+    </a>
+  )
+}

src/app/components/Icon.tsx

@@ -1,19 +1,21 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 
+import clsx from 'clsx'
 import * as styles from './Icon.css.js'
 
 export type IconProps = {
+  className?: string
   label: string
   size?: string
   src: string
   style?: React.CSSProperties
 }
 
-export function Icon({ label, size = '1em', src, style }: IconProps) {
+export function Icon({ className, label, size = '1em', src, style }: IconProps) {
   return (
     <div
       aria-label={label}
-      className={styles.root}
+      className={clsx(styles.root, className)}
       role="img"
       style={{
         ...style,

src/app/hooks/useTheme.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 
 export function useTheme() {
   const [theme, setTheme] = useState(() => {
-    if (typeof window === 'undefined') return 'dark'
+    if (typeof window === 'undefined') return undefined
     if (localStorage.getItem('vocs.theme')) {
       const storedTheme = localStorage.getItem('vocs.theme')
       if (storedTheme) return storedTheme
@@ -11,7 +11,7 @@ export function useTheme() {
   })
 
   useEffect(() => {
-    localStorage.setItem('vocs.theme', theme)
+    if (theme) localStorage.setItem('vocs.theme', theme)
 
     if (theme === 'dark') document.documentElement.classList.add('dark')
     else document.documentElement.classList.remove('dark')

src/config.ts

@@ -1,6 +1,8 @@
 export type Config = {
-  /** Documentation sidebar navigation. */
+  /** Navigation displayed on the sidebar. */
   sidebar?: Sidebar
+  /** Social links displayed in the top navigation. */
+  socials?: Socials
   /** Title for your documentation. */
   title?: string
 }
@@ -21,3 +23,13 @@ export type SidebarItem = {
 }
 
 export type Sidebar = SidebarItem[]
+
+export type SocialItem = {
+  /** Social icon to display. */
+  icon: // TODO: Support custom SVG icons
+  'discord' | 'github' | 'x'
+  /** Link to the social. */
+  link: string
+}
+
+export type Socials = SocialItem[]