Add nav thing, fix fonts, docs.

doc/variables.yaml

@@ -12,7 +12,7 @@
 ---
 - name: acpiacadapter
   desc: |-
-    ACPI ac adapter state. On linux, the adapter option
+    ACPI AC adapter state. On linux, the adapter option
     specifies the subfolder of `/sys/class/power_supply` containing the state
     information (tries `AC` and `ADP1` if there is no argument given).
     Non-linux systems ignore it.
@@ -502,30 +502,30 @@
     - command
 - name: execgraph
   desc: |-
-    Draws a horizontally scrolling graph with values from 0-100
-    plotted on the vertical axis. All parameters following the command
-    are optional. Gradient colors can be specified as hexadecimal
-    values with no 0x or # prefix. Use the -t switch to enable a
-    temperature gradient, so that small values are "cold" with color 1
-    and large values are "hot" with color 2. Without the -t switch,
-    the colors produce a horizontal gradient spanning the width of the
-    graph. The scale parameter defines the maximum value of the graph.
-    Use the -l switch to enable a logarithmic scale, which helps to
-    see small values. The default size for graphs can be controlled
-    via the default_graph_height and default_graph_width config
-    settings.
+    Draws a horizontally scrolling graph with values from 0-100 plotted on the
+    vertical axis. All parameters following the command are optional. Gradient
+    colors can be specified as hexadecimal values with no 0x or # prefix. Use
+    the -t switch to enable a temperature gradient, so that small values are
+    "cold" with color 1 and large values are "hot" with color 2. Without the -t
+    switch, the colors produce a horizontal gradient spanning the width of the
+    graph. The scale parameter defines the maximum value of the graph.  Use the
+    -l switch to enable a logarithmic scale, which helps to see small values.
+    The default size for graphs can be controlled via the default_graph_height
+    and default_graph_width config settings.
 
     If you need to execute a command with spaces, you have a
-    couple options: 1) wrap your command in double-quotes, or 2) put
-    your command into a separate file, such as ~/bin/myscript.sh, and
-    use that as your execgraph command. Remember to make your script
-    executable!
+    couple options:
 
-    In the following example, we set up execgraph to display
-    seconds (0-59) on a graph that is 50px high and 200px wide, using
-    a temperature gradient with colors ranging from red for small
-    values (FF0000) to yellow for large values (FFFF00). We set the
-    scale to 60.
+    1. wrap your command in double-quotes, or
+    2. put your command into a separate file, such as ~/bin/myscript.sh, and use
+    that as your execgraph command.
+
+    Remember to make your script executable!
+
+    In the following example, we set up execgraph to display seconds (0-59) on a
+    graph that is 50px high and 200px wide, using a temperature gradient with
+    colors ranging from red for small values (FF0000) to yellow for large values
+    (FFFF00). We set the scale to 60.
 
     ```
     ${execgraph ~/seconds.sh 50,200 FF0000 FFFF00 60 -t}

web/components/Docs.tsx

@@ -7,7 +7,7 @@ export interface DocsProps {
 
 export default function Docs({ docs }: DocsProps) {
   return (
-    <>
+    <div className="prose dark:prose-invert prose-lg lg:prose-xl">
       {docs.map((doc) => (
         <div
           id={doc.name}
@@ -37,6 +37,6 @@ export default function Docs({ docs }: DocsProps) {
           </div>
         </div>
       ))}
-    </>
+    </div>
   )
 }

web/components/Header.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import GitHub from './GitHub'
 import { LineChart } from './LineChart'
 import ThemeSwitcher from './ThemeSwitcher'
@@ -9,10 +10,34 @@ type HeaderProps = {
   setDarkMode: (state: boolean) => void
 }
 
+import * as React from 'react'
+
+interface NavLinkProps {
+  href: string
+  name: string
+}
+
+const NavLink: React.FunctionComponent<NavLinkProps> = (props) => {
+  const router = useRouter()
+  const bg = router.asPath.startsWith(props.href)
+    ? 'bg-rose-100 dark:bg-rose-900'
+    : ''
+  return (
+    <Link href={props.href}>
+      <a
+        className={`p-1 self-end hover:self-center hover:bg-rose-300 dark:hover:bg-rose-700 ${bg} rounded`}
+      >
+        {props.name}
+      </a>
+    </Link>
+  )
+}
+
 export default function Header({ name, darkMode, setDarkMode }: HeaderProps) {
+  const router = useRouter()
   return (
     <div className="border-b-1 backdrop-blur-lg bg-white dark:bg-black bg-opacity-20 dark:bg-opacity-20 transition">
-      <header className="max-w-2xl mx-auto m-1 p-1 grow flex w-full">
+      <header className="max-w-3xl mx-auto m-0 p-1 grow flex w-full">
         <h1 className="px-2 text-3xl dark:text-white self-end">
           <Link href="/">
             <a>
@@ -20,8 +45,15 @@ export default function Header({ name, darkMode, setDarkMode }: HeaderProps) {
             </a>
           </Link>
         </h1>
+        {router.asPath != '/' && (
+          <div className="flex text-md items-stretch self-stretch mx-1">
+            <NavLink href="/variables" name="Vars" />
+            <NavLink href="/config_settings" name="Config" />
+            <NavLink href="/lua" name="Lua" />
+          </div>
+        )}
         <LineChart width={400} height={40} darkMode={darkMode} />
-        <div className="flex justify-end">
+        <div className="flex">
           <div className="border-r mx-1 px-1 border-slate-700">
             <a href="https://github.com/brndnmtthws/conky">
               <GitHub />

web/components/Layout.tsx

@@ -48,7 +48,7 @@ export default function Layout({ children }: LayoutProps) {
         <Header name="Conky" darkMode={darkMode} setDarkMode={setDarkMode} />
       </div>
       <div className="relative pb-24">
-        <div className="flex flex-col items-center max-w-2xl w-full mx-auto">
+        <div className="flex flex-col items-center max-w-3xl w-full mx-auto">
           {children}
         </div>
       </div>

web/package.json

@@ -21,7 +21,6 @@
   "dependencies": {
     "@fontsource/fira-code": "^4.5.11",
     "@fontsource/inter": "^4.5.12",
-    "@fontsource/source-sans-pro": "^4.5.11",
     "@fontsource/source-serif-pro": "^4.5.9",
     "@mapbox/rehype-prism": "^0.8.0",
     "@netlify/plugin-nextjs": "4.23",

web/pages/_app.tsx

@@ -1,6 +1,5 @@
 import '@fontsource/fira-code/400.css'
 import '@fontsource/inter/400.css'
-import '@fontsource/source-sans-pro/400.css'
 import '@fontsource/source-serif-pro/400.css'
 import 'prismjs/themes/prism-tomorrow.css'
 import '../styles/globals.css'

web/pages/config_settings.tsx

@@ -17,7 +17,6 @@ export default function ConfigSettings(props: ConfigSettingsProps) {
       <main className="w-full">
         <div>
           <h1 className="text-2xl">Configuration settings</h1>
-          <p></p>
         </div>
         <Docs docs={props.config_settings} />
       </main>

web/pages/index.tsx

@@ -5,16 +5,16 @@ import ArrowIcon from '../components/ArrowIcon'
 import SEO from '../components/SEO'
 
 const pages = [
-  {
-    slug: '/config_settings',
-    title: 'Configuration settings',
-    desc: 'Global configuration pramaters for Conky allow you to customize various behaviours.',
-  },
   {
     slug: '/variables',
     title: 'Variables',
     desc: 'Variables let you define the various objects displayed in Conky including text, bars, graphs, and more.',
   },
+  {
+    slug: '/config_settings',
+    title: 'Configuration settings',
+    desc: 'Global configuration pramaters for Conky allow you to customize various behaviours.',
+  },
   {
     slug: '/lua',
     title: 'Lua API',

web/styles/globals.css

@@ -2,9 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 @tailwind variants;
-
-@layer base {
-  code {
-    @apply bg-indigo-100 dark:bg-indigo-900;
-  }
-}

web/utils/tailwind-preset.js

@@ -49,29 +49,20 @@ module.exports = {
         'Courier New',
         'monospace',
       ],
-      prose: [
-        'Source Sans Pro',
-        'ui-sans-serif',
-        'system-ui',
-        '-apple-system',
-        'BlinkMacSystemFont',
-        'Segoe UI',
-        'Roboto',
-        'Helvetica Neue',
-        'Arial',
-        'Noto Sans',
-        'sans-serif',
-        'Apple Color Emoji',
-        'Segoe UI Emoji',
-        'Segoe UI Symbol',
-        'Noto Color Emoji',
-      ],
     },
     extend: {
       typography: (theme) => ({
         DEFAULT: {
           css: {
-            fontFamily: theme('fontFamily.prose').join(', '),
+            code: {
+              '&::before': {
+                content: '"" !important',
+              },
+              '&::after': {
+                content: '"" !important',
+              },
+            },
+            fontFamily: theme('fontFamily.sans').join(', '),
           },
         },
       }),

web/yarn.lock

@@ -119,11 +119,6 @@
   resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.12.tgz#a6236379bf710658db048d7087ec588754962cb6"
   integrity sha512-bGKk4/8tube/nCk8hav0ZDBVbzJzc7m0Vt4xF5p15IN4YImwGdtKG38Oq5bU8xHNS+VfvbFFCepgQNj7Pr/Lvg==
 
-"@fontsource/source-sans-pro@^4.5.11":
-  version "4.5.11"
-  resolved "https://registry.yarnpkg.com/@fontsource/source-sans-pro/-/source-sans-pro-4.5.11.tgz#06b3f08ef1a5250d78c8198e5a0482b5d87a4d52"
-  integrity sha512-f7iw44q1EjBv3MNcHCGAgrW/QVyweaEouFsJzykPhTOGnZFSwFJRISToXornOmuAy7xUUGiVdqOLiykgZoYB8A==
-
 "@fontsource/source-serif-pro@^4.5.9":
   version "4.5.9"
   resolved "https://registry.yarnpkg.com/@fontsource/source-serif-pro/-/source-serif-pro-4.5.9.tgz#fbeacd0bb6d2860df6baa662e9827adfe3da13f4"