1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-06-30 22:46:39 -04:00

extract list of menu links to a config file

This commit is contained in:
2022-02-11 15:13:32 -05:00
parent d258ebd988
commit ae0fd5f56b
11 changed files with 139 additions and 137 deletions

View File

@ -19,7 +19,7 @@ const CodeBlock = ({ forceBlock, className, children, ...rest }: CodeBlockProps)
<div className={styles.block}>
<CopyButton source={children} className={styles.copy_btn} />
<code
className={cx({ code: true, highlight: prismEnabled }, className?.replace("code-highlight", "").trim())}
className={cx(styles.code, { highlight: prismEnabled }, className?.replace("code-highlight", "").trim())}
{...rest}
>
{children}

View File

@ -103,7 +103,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
{({ field, meta }) => (
<input
type="text"
className={cx({ input: true, missing: meta.error && meta.touched })}
className={cx(styles.input, { missing: meta.error && meta.touched })}
placeholder="Name"
disabled={success}
{...field}
@ -116,7 +116,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
<input
type="email"
inputMode="email"
className={cx({ input: true, missing: meta.error && meta.touched })}
className={cx(styles.input, { missing: meta.error && meta.touched })}
placeholder="Email"
disabled={success}
{...field}
@ -127,7 +127,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
<Field name="message">
{({ field, meta }) => (
<TextareaAutosize
className={cx({ input: true, textarea: true, missing: meta.error && meta.touched })}
className={cx(styles.input, styles.textarea, { missing: meta.error && meta.touched })}
placeholder="Write something..."
minRows={5}
disabled={success}
@ -154,7 +154,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
<div className={styles.action_row}>
<button
className={cx({ btn_submit: true, hidden: success })}
className={cx(styles.btn_submit, { hidden: success })}
type="submit"
title="Send Message"
aria-label="Send Message"

View File

@ -47,7 +47,7 @@ const CopyButton = forwardRef(function CopyButton(
return (
<button
className={cx({ button: true, success: !!copied }, className)}
className={cx(styles.button, { success: !!copied }, className)}
title="Copy to clipboard"
aria-label="Copy to clipboard"
onClick={handleCopy}

View File

@ -4,18 +4,12 @@
margin: 0;
}
.link {
.item {
list-style: none;
display: inline-flex;
margin-left: 1em;
}
.icon {
width: 1.25em;
height: 1.25em;
vertical-align: -0.3em;
}
@media screen and (max-width: 768px) {
.menu {
width: 100%;
@ -23,14 +17,9 @@
margin-left: 1em;
}
.link {
.item {
margin-left: 0;
}
.icon {
width: 1.8em;
height: 1.8em;
}
}
@media screen and (max-width: 380px) {
@ -39,7 +28,7 @@
}
/* the home icon is redundant when space is SUPER tight */
.link:first-of-type {
.item:first-of-type {
display: none;
}
}

View File

@ -2,8 +2,7 @@ import { memo } from "react";
import { useRouter } from "next/router";
import classNames from "classnames";
import MenuLink from "../MenuLink/MenuLink";
import ThemeToggle from "../ThemeToggle/ThemeToggle";
import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../Icons";
import { menuLinks } from "../../lib/config/menu";
import styles from "./Menu.module.css";
@ -11,44 +10,17 @@ type MenuProps = {
className?: string;
};
const links = [
{
icon: <HomeIcon className={styles.icon} />,
text: "Home",
href: "/",
},
{
icon: <NotesIcon className={styles.icon} />,
text: "Notes",
href: "/notes",
},
{
icon: <ProjectsIcon className={styles.icon} />,
text: "Projects",
href: "/projects",
},
{
icon: <ContactIcon className={styles.icon} />,
text: "Contact",
href: "/contact",
},
];
const Menu = ({ className }: MenuProps) => {
const router = useRouter();
return (
<ul className={classNames(styles.menu, className)}>
{links.map((link, index) => (
<li key={index} className={styles.link}>
{menuLinks.map((link, index) => (
<li key={index} className={styles.item}>
{/* kinda weird/hacky way to determine if the *first part* of the current path matches this href */}
<MenuLink {...link} current={link.href === `/${router.pathname.split("/")[1]}`} />
</li>
))}
<li className={styles.link}>
<ThemeToggle className={styles.icon} />
</li>
</ul>
);
};

View File

@ -21,6 +21,12 @@
border-color: var(--link-underline);
}
.icon {
width: 1.25em;
height: 1.25em;
vertical-align: -0.3em;
}
.label {
font-size: 0.95em;
font-weight: 500;
@ -29,6 +35,11 @@
}
@media screen and (max-width: 768px) {
.icon {
width: 1.8em;
height: 1.8em;
}
/* hide text next to emojis on mobile */
.label {
display: none;

View File

@ -1,24 +1,33 @@
import classNames from "classnames/bind";
import Link from "next/link";
import { ReactNode } from "react";
import classNames from "classnames/bind";
import styles from "./MenuLink.module.css";
const cx = classNames.bind(styles);
type MenuLinkProps = {
href: string;
icon: ReactNode;
text: string;
export type MenuLinkProps = {
href?: string;
text?: string;
current?: boolean;
className?: string;
// `any` avoids conflicts with @svgr/webpack, see: node_modules/next/image-types/global.d.ts
// eslint-disable-next-line @typescript-eslint/no-explicit-any
icon: any;
};
const MenuLink = ({ href, icon, text, current, className }: MenuLinkProps) => (
<Link href={href} prefetch={false}>
<a className={cx(styles.link, { current: !!current }, className)}>
{icon} <span className={styles.label}>{text}</span>
</a>
</Link>
);
const MenuLink = ({ icon: Icon, href, text, current, className }: MenuLinkProps) => {
// allow both navigational links and/or other interactive react components (e.g. the theme toggle)
if (href) {
return (
<Link href={href} prefetch={false}>
<a className={cx(styles.link, { current: !!current }, className)}>
<Icon className={styles.icon} /> <span className={styles.label}>{text}</span>
</a>
</Link>
);
} else {
return <Icon className={classNames(styles.icon, className)} />;
}
};
export default MenuLink;

View File

@ -4,17 +4,9 @@
margin-right: -0.6em;
background: none;
cursor: pointer;
display: inline-flex;
align-items: center;
color: var(--medium-dark);
}
.button:hover {
color: var(--warning);
}
.icon {
width: 1.2em;
height: 1.2em;
vertical-align: -0.2em;
}

29
lib/config/menu.ts Normal file
View File

@ -0,0 +1,29 @@
import ThemeToggle from "../../components/ThemeToggle/ThemeToggle";
import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../../components/Icons";
import type { MenuLinkProps } from "../../components/MenuLink/MenuLink";
export const menuLinks: MenuLinkProps[] = [
{
icon: HomeIcon,
text: "Home",
href: "/",
},
{
icon: NotesIcon,
text: "Notes",
href: "/notes",
},
{
icon: ProjectsIcon,
text: "Projects",
href: "/projects",
},
{
icon: ContactIcon,
text: "Contact",
href: "/contact",
},
{
icon: ThemeToggle,
},
];

View File

@ -47,7 +47,7 @@
"is-absolute-url": "^4.0.1",
"markdown-to-jsx": "^7.1.6",
"modern-normalize": "^1.1.0",
"next": "12.0.11-canary.12",
"next": "12.0.11-canary.13",
"next-compose-plugins": "^2.2.1",
"next-mdx-remote": "4.0.0-rc.1",
"next-seo": "^5.1.0",

128
yarn.lock
View File

@ -1182,10 +1182,10 @@
dependencies:
webpack-bundle-analyzer "4.3.0"
"@next/env@12.0.11-canary.12":
version "12.0.11-canary.12"
resolved "https://registry.yarnpkg.com/@next/env/-/env-12.0.11-canary.12.tgz#f606e1c1c69ff459cb508648333b621a49c84c4b"
integrity sha512-ilNufwwCQ9cAGoVrqqopdFRUQn3N772vVD4gn51Eof/cyChOSiMQZ2cjGdev2VoV6ZeJYJ9ccZf2asOs5wpbnQ==
"@next/env@12.0.11-canary.13":
version "12.0.11-canary.13"
resolved "https://registry.yarnpkg.com/@next/env/-/env-12.0.11-canary.13.tgz#3d7044825ad698e40753683200aa083033a69bad"
integrity sha512-kxEi2WIjQZgZBXgbKg9E2vfrVjlIxWmL9FjkBksKZ8lFfB+w/CQ8wTzc2KG2i+fVf5lcdt/jV10GVnx7HTagyg==
"@next/eslint-plugin-next@12.0.10":
version "12.0.10"
@ -1194,60 +1194,60 @@
dependencies:
glob "7.1.7"
"@next/swc-android-arm64@12.0.11-canary.12":
version "12.0.11-canary.12"
resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.0.11-canary.12.tgz#1f8c316948c5ad798c58c5e45a88bb897270d9cd"
integrity sha512-iABj77NAq2d2W5ZYnPaYMm1R92nxaXPKvKCWXnrD/4w3pKc+n2FCXKrzyQhEnAoMmlecNPe55RG/u4ohLhkN1w==
"@next/swc-android-arm64@12.0.11-canary.13":
version "12.0.11-canary.13"
resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.0.11-canary.13.tgz#634d59331d694f52b60dc6df3ed7170c2c204781"
integrity sha512-ug/c5Epw52MDrXRhRI4RkBNyauNXVzMJ8CxzyfOIRc8D8ItOCTJwa6jZO3voJSVY4kda4G/NMRfdZyKhIexxkQ==
"@next/swc-darwin-arm64@12.0.11-canary.12":
version "12.0.11-canary.12"
resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.11-canary.12.tgz#5f01c7f24f4f6442b77985504c108e65bcca6928"
integrity sha512-VDs1EZCXauf+Bs7eoQ/UT9xKmkH+tQdW4bSktPNF3AbzrFuaF16he1e87gyllx0g8FifKDSUrD8XInz8E+/Tzw==
"@next/swc-darwin-arm64@12.0.11-canary.13":
version "12.0.11-canary.13"
resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.11-canary.13.tgz#95bcd4f94dc78c47a5c9194328bd05112f8e37ed"
integrity sha512-mofkizf4w2YcjFL5RVZmatAfTTHFvxikzoSY+vegRpCpu3uHNXMj3FF+/chDZWqg5jMrbJdZ3GDDXHDXK6D3ew==
"@next/swc-darwin-x64@12.0.11-canary.12":
version "12.0.11-canary.12"
resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.11-canary.12.tgz#f5863651a91fe91f9bea64f4700388401e08868e"
integrity sha512-G9VVSnX5EjOQjt2kQHJfYEXhwWcSMsl1GjByBiQhaHgwdPMRSxpPq0JEnBfxnxqIrJytw94kqeymYV3B4JL9wA==
"@next/swc-darwin-x64@12.0.11-canary.13":
version "12.0.11-canary.13"
resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.11-canary.13.tgz#171eb99e62c1e493a49ce0d477e8e51277efe1c7"
integrity sha512-OBL6CuVDKCZkygivbL3WGPYdUtbHNKo7fjFmayTpof4EGM92QUd4K0+FIL3SoLZnB7ZLvf5v/PNNs6Fu2U8n0A==
"@next/swc-linux-arm-gnueabihf@12.0.11-canary.12":
version "12.0.11-canary.12"
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.11-canary.12.tgz#7c45a39dbb18c1f265cfb4dd7bec86ebc574b024"
integrity sha512-jAjlNVS5ZM01HjeahGsl0qqq+xxlLNJhjS48Sruqh4aI4ADiFOQcOxLurnLmz2xDNOTEb9BQFd4rg2Wq035FYw==
"@next/swc-linux-arm-gnueabihf@12.0.11-canary.13":
version "12.0.11-canary.13"
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.11-canary.13.tgz#7d486223dc24f3b49f9ad46314626f8c4b7b660b"
integrity sha512-wU88A4ALxjCzOfMx90Ca07XWEKPXuWmY8hNJeeKeJHUzmWVlSVZW9kt9zCLyCPUlitHbzKDKFE+dfp5wTq5bDg==
"@next/swc-linux-arm64-gnu@12.0.11-canary.12":
version "12.0.11-canary.12"
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.11-canary.12.tgz#2ac90db029c74ba5f81493ee6d4ac1da870b8d8f"
integrity sha512-8aNPCwT1PjAppQPWs9Dq4tvBiw2pbGxY9xhQ+Rk+yYMECFRZPPvcUpdIrf2CPQV8neU+X+ZDN4YV+DeoinOWOw==
"@next/swc-linux-arm64-gnu@12.0.11-canary.13":
version "12.0.11-canary.13"
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.11-canary.13.tgz#e7ddcf4f366ead186cbc3b9053173545e745b706"
integrity sha512-oWH+1GFfbwNQ7G8K1VPrfED0CDlRaixTKrlY/AnEJ7U9iGojHDV33CSc7+wcsHmRTF3EVvkh+0xzf/hfzo/6gQ==
"@next/swc-linux-arm64-musl@12.0.11-canary.12":
version "12.0.11-canary.12"
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.11-canary.12.tgz#25b73c17ada82158f8d53ce2fd89684349dd5c0d"
integrity sha512-jNCP8jAr6VNS1oqDfief3ZeRtdbrBqZDx2Hz1guua151/+nLyxfZmoOHca/ftUUBSgBJ0XcXqAvwxNiyqt5HeQ==
"@next/swc-linux-arm64-musl@12.0.11-canary.13":
version "12.0.11-canary.13"
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.11-canary.13.tgz#e1a8c4b1dd169d4efba4120d674d28c7d9eee197"
integrity sha512-w2gE9RICODEsqb/acsWqaDUDyt8Qh+8maDeNLjVJyKkIXFZXocZz0J3BIFOWCsqiDEBXx6L1Q8TpYwD5h9LBxw==
"@next/swc-linux-x64-gnu@12.0.11-canary.12":
version "12.0.11-canary.12"
resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.11-canary.12.tgz#fb3aa0b69282bd17d88f0dee250616b498d77e6a"
integrity sha512-+pjNhxCvtbqdzteIFdwvywJUWKLCKYFDMOGE5TaCMsiFgHVjkQUmMdlTlyGAoQPz5pB2QSusa9PmflxMB+4S3w==
"@next/swc-linux-x64-gnu@12.0.11-canary.13":
version "12.0.11-canary.13"
resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.11-canary.13.tgz#8fa8a2cef575c56153b40bfaa7e1f9df2cf2c32b"
integrity sha512-JA1pBa2Rf3ACSTCd9DsE9cYrmuCKaXeP/MMeoBObAJ019NBYz6JYsp6u1oxxDbjQRw9zeGLGj4PZiMWrxqmC7g==
"@next/swc-linux-x64-musl@12.0.11-canary.12":
version "12.0.11-canary.12"
resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.11-canary.12.tgz#b97db86145baecdf5bd6fed9f3c5fca7d3ad05c3"
integrity sha512-yQmE6JKyF0tPHkl5Mf9cqWSIfqSreo1qYVMA/aaEnJGy+CfGLboQ4uJLx+QeE0/Hz7XHSpvwwmVKcVoYvue4rw==
"@next/swc-linux-x64-musl@12.0.11-canary.13":
version "12.0.11-canary.13"
resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.11-canary.13.tgz#7b534ec81f3c73179ee2b9e052106e48adee97a8"
integrity sha512-juCf5/sABkCA8YFviLHdkFc8JDv3x7LYxgdqLExZ9cK8mY5s5dxKAIeTyv7Yf+BC0qQ66mvqkbULnL05gGdjYQ==
"@next/swc-win32-arm64-msvc@12.0.11-canary.12":
version "12.0.11-canary.12"
resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.11-canary.12.tgz#731c408067d3da7027782dd095d6085c2f9b4005"
integrity sha512-wS43Kys8MVfSMkE9yXgoGucSmtVKPYZ6a6AupU81ZIG6XLLJHOnYlsDjfkwzNqhrGewck+qsI7tMF6Y8l6Y+mw==
"@next/swc-win32-arm64-msvc@12.0.11-canary.13":
version "12.0.11-canary.13"
resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.11-canary.13.tgz#126b821eecb47e37fbfc7f0adf75774bb982cfca"
integrity sha512-vAqbHhBafohGuTWVOIRVMEydKOp1Ml9PJpzNMkCcnd260JxYlLJ19PVpytqyGg8t0XxzNr5PFNBBK5c2KaEcOg==
"@next/swc-win32-ia32-msvc@12.0.11-canary.12":
version "12.0.11-canary.12"
resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.11-canary.12.tgz#df679789dadcfb99eb85bbf86a8108b8a6235113"
integrity sha512-BxKnP+woY1J7QU8A4Jrg9BirCSeIxq4BJIwhfHYTdRvLTLFvvTcWDTmWLS7JzR0gxYjstf8cfEoIv/20kGLzEw==
"@next/swc-win32-ia32-msvc@12.0.11-canary.13":
version "12.0.11-canary.13"
resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.11-canary.13.tgz#f20f1bb08d419c78addf69c8f0e7e2e07e32d97a"
integrity sha512-I33ZUqvgcMmdnl+2fyrD9OWtCzMC5JaMsOuasVKvBQxyiqFuBDGGul9jQ9EcRuJbdaloU7HNtn2Fz9RrYS4w1w==
"@next/swc-win32-x64-msvc@12.0.11-canary.12":
version "12.0.11-canary.12"
resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.11-canary.12.tgz#4dfc6d7a937be9a471a38e1db0565ac8533e5383"
integrity sha512-d4l3dLmiPQ/0JmhiFGMAsl4wm01GFogppcKba3aj09KStFFaEmxYZtMqSl6sIZAKauOVkhxDXgJer8Xn/Nyv4w==
"@next/swc-win32-x64-msvc@12.0.11-canary.13":
version "12.0.11-canary.13"
resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.11-canary.13.tgz#efa927607c66b3fc66a4acaef1f3d2ce86ffe417"
integrity sha512-oY2YMZFGsAJLKkaCDHye/6tK+e8iY/sLPixTgz9xVtJEgcKftBhJL4UEtV99hXSqF2XCenZOIyNNN1v++3I6CQ==
"@nodelib/fs.scandir@2.1.5":
version "2.1.5"
@ -4869,28 +4869,28 @@ next-transpile-modules@^9.0.0:
enhanced-resolve "^5.7.0"
escalade "^3.1.1"
next@12.0.11-canary.12:
version "12.0.11-canary.12"
resolved "https://registry.yarnpkg.com/next/-/next-12.0.11-canary.12.tgz#615d10a6c73c4317ecab658fb4f4bad9768d6011"
integrity sha512-RuFclfTRPr2OViDWkI4XIwVUVsPGQafKfaayUoMjp00YszuOF4oYvB2eWUoZAW+EUKWmcbWZZ5Q/86mxQuKyuQ==
next@12.0.11-canary.13:
version "12.0.11-canary.13"
resolved "https://registry.yarnpkg.com/next/-/next-12.0.11-canary.13.tgz#270bc5d4a2abe06f7e256e299b93f7b29e7a73be"
integrity sha512-O7Hx2sX2F2c+ggAFbAhahNCTGA6e2NPyocySPqNgOxFVgfcXz+tmIHeiFSbMFmPI98ciDa5Hty/yQpRjWODx5w==
dependencies:
"@next/env" "12.0.11-canary.12"
"@next/env" "12.0.11-canary.13"
caniuse-lite "^1.0.30001283"
postcss "8.4.5"
styled-jsx "5.0.0"
use-subscription "1.5.1"
optionalDependencies:
"@next/swc-android-arm64" "12.0.11-canary.12"
"@next/swc-darwin-arm64" "12.0.11-canary.12"
"@next/swc-darwin-x64" "12.0.11-canary.12"
"@next/swc-linux-arm-gnueabihf" "12.0.11-canary.12"
"@next/swc-linux-arm64-gnu" "12.0.11-canary.12"
"@next/swc-linux-arm64-musl" "12.0.11-canary.12"
"@next/swc-linux-x64-gnu" "12.0.11-canary.12"
"@next/swc-linux-x64-musl" "12.0.11-canary.12"
"@next/swc-win32-arm64-msvc" "12.0.11-canary.12"
"@next/swc-win32-ia32-msvc" "12.0.11-canary.12"
"@next/swc-win32-x64-msvc" "12.0.11-canary.12"
"@next/swc-android-arm64" "12.0.11-canary.13"
"@next/swc-darwin-arm64" "12.0.11-canary.13"
"@next/swc-darwin-x64" "12.0.11-canary.13"
"@next/swc-linux-arm-gnueabihf" "12.0.11-canary.13"
"@next/swc-linux-arm64-gnu" "12.0.11-canary.13"
"@next/swc-linux-arm64-musl" "12.0.11-canary.13"
"@next/swc-linux-x64-gnu" "12.0.11-canary.13"
"@next/swc-linux-x64-musl" "12.0.11-canary.13"
"@next/swc-win32-arm64-msvc" "12.0.11-canary.13"
"@next/swc-win32-ia32-msvc" "12.0.11-canary.13"
"@next/swc-win32-x64-msvc" "12.0.11-canary.13"
nice-try@^1.0.4:
version "1.0.5"