website: custom nav menus. #102

package.json

@@ -25,6 +25,7 @@
     "@uiw/formatter": "^1.3.3",
     "@wcj/markdown-to-html": "^2.2.0",
     "chokidar": "^3.5.3",
+    "dotenv": "^16.0.3",
     "fs-extra": "^10.1.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",

scripts/nodes/header.mjs

@@ -1,11 +1,29 @@
 import path from 'path';
-import { github, editor } from './logo.mjs';
+import * as dotenv from 'dotenv';
+import { github, editor, home } from './logo.mjs';
 import { getSVGNode } from '../utils/getSVGNode.mjs';
 import { darkMode } from '../utils/darkMode.mjs';
 
+dotenv.config();
+
 const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets/quickreference.svg');
 const ICONS_SEARCH_PATH = path.resolve(process.cwd(), 'scripts/assets/search.svg');
 
+export function getReferrals() {
+  const url = process.env.REF_URL;
+  const label = process.env.REF_LABEL;
+  if (!url || !label) return [];
+  return [
+    {
+      menu: true,
+      href: url,
+      target: '__blank',
+      label: label,
+      children: [home],
+    },
+  ];
+}
+
 export function header({ homePath, githubURL = '', isHome } = {}) {
   const svgNode = getSVGNode(ICONS_PATH);
   const svgSearchNode = getSVGNode(ICONS_SEARCH_PATH);
@@ -43,6 +61,7 @@ export function header({ homePath, githubURL = '', isHome } = {}) {
         },
       ],
     },
+    ...getReferrals(),
     {
       menu: true,
       href: githubURL,

scripts/nodes/logo.mjs

@@ -94,3 +94,23 @@ export const editor = {
     },
   ],
 };
+
+export const home = {
+  type: 'element',
+  tagName: 'svg',
+  properties: {
+    viewBox: '0 0 24 24',
+    fill: 'currentColor',
+    height: '1em',
+    width: '1em',
+  },
+  children: [
+    {
+      type: 'element',
+      tagName: 'path',
+      properties: {
+        d: 'M12.74 2.32a1 1 0 0 0-1.48 0l-9 10A1 1 0 0 0 3 14h2v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7h2a1 1 0 0 0 1-1 1 1 0 0 0-.26-.68z',
+      },
+    },
+  ],
+};

scripts/style/style.css

@@ -527,10 +527,10 @@ a.text-grey {
 
 .header-nav .menu a,
 .header-nav .menu button {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-left: 0.55rem;
+  padding-right: 0.55rem;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
   border-radius: 9999px;
   transition: all 0.3s;
   border: 0;