Get rid of lib/vars

components/footer.js

@@ -3,7 +3,6 @@ import { nanoid } from 'nanoid';
 import Link from 'next/link';
 
 import { Button } from './jambonz-ui';
-import { homeObj } from '../lib/vars';
 
 function FooterItem({ obj }) {
   return (
@@ -28,7 +27,7 @@ export default function Footer({ siteData }) {
             })}
           </ul>
           <ul className="foot__links">
-            <FooterItem key="home" obj={homeObj} />
+            <FooterItem key="home" obj={siteData.navi.home} />
             {siteData.navi.links.map((obj) => {
               return <FooterItem key={nanoid()} obj={obj} />
             })}

components/jambonz-ui.js

@@ -5,9 +5,6 @@ import { useState, useEffect } from 'react';
 
 import Link from 'next/link';
 
-import { mobileMedia } from '../lib/vars';
-
-
 // Normalize how we work with the subtext as an array[]
 export function normalizeSubtext(subtext) {
   if (!Array.isArray(subtext)) {
@@ -24,6 +21,7 @@ export function normalizeSlug(key) {
 
 // Normalize how we listen for mobile media queries
 export function useMobileMedia() {
+  const mobileMedia = '(max-width: 768px)';
   const [mobile, setMobile] = useState(false);
 
   const handleMedia = (e) => {

components/navi.js

@@ -6,13 +6,12 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 
 import { Button, Icon, useMobileMedia } from './jambonz-ui';
-import { homeObj } from '../lib/vars';
 
 function NaviItem({obj}) {
   const router = useRouter();
   const classes = {
     navi__link: true,
-    active: (router.route.replace('/[[...slug]]', '') === obj.link),
+    active: (router.asPath === obj.link),
   };
 
   return (
@@ -47,7 +46,7 @@ function NaviMobile({ active, handler, siteData }) {
         </div>
       </div>
       <ul className="navi__mobile__links">
-        <NaviItem key="home" obj={homeObj} />
+        <NaviItem key="home" obj={siteData.navi.home} />
         {siteData.navi.links.map((obj) => {
           return <NaviItem key={nanoid()} obj={obj} />
         })}

data/docs.yml

@@ -1,3 +1,6 @@
+root:
+  link: /docs/
+  label: For Developers
 navi:
   -
     path: getting-started

data/site.yml

@@ -1,17 +1,20 @@
 navi:
+  home:
+    link: /
+    label: Home
   login:
     label: Log In
     link: https://jambonz.us
   links:
     -
       label: Why jambonz
-      link: /why
+      link: /why/
     -
       label: For Developers
-      link: /docs
+      link: /docs/
     -
       label: Pricing
-      link: /pricing
+      link: /pricing/
 footer:
   email: support@jambonz.org
   links:
@@ -25,7 +28,7 @@ footer:
       open: true
     -
       label: Privacy Policy
-      link: /privacy
+      link: /privacy/
     -
       label: Terms of Service
-      link: /terms
+      link: /terms/

lib/vars.js

@@ -1,17 +0,0 @@
-const mobileMedia = '(max-width: 768px)';
-
-const homeObj = {
-  link: '/',
-  label: 'Home',
-};
-
-const docsObj = {
-  link: '/docs',
-  label: 'For Developers',
-};
-
-export {
-  homeObj,
-  docsObj,
-  mobileMedia,
-}

pages/docs/[[...slug]].js

@@ -9,7 +9,6 @@ import { useRouter } from 'next/router';
 import Layout from '../../components/layout';
 import { Icon } from '../../components/jambonz-ui';
 import { getData, getDocs, getDocsPaths } from '../../lib/data';
-import { docsObj } from '../../lib/vars';
 
 function Sidebar({data}) {
   const router = useRouter();
@@ -34,9 +33,9 @@ function Sidebar({data}) {
   return (
     <nav className="docs__navi">
       <div className="docs__link">
-        <Link href={docsObj.link}>
+        <Link href={data.root.link}>
           <a className="m">
-            <strong>{docsObj.label}</strong>
+            <strong>{data.root.label}</strong>
           </a>
         </Link>
       </div>