From 283eb624469878d793509c245daa0deeef34cdbb Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Thu, 27 Jan 2022 10:06:26 -0500 Subject: [PATCH] less corny header and note meta icons (#746) * less corny header and note meta icons * swap out more twemojis * indicate active page in nav bar * update favicons * extract `` into its own component * change hover effect to an underline * cropped header photo --- components/ContactForm/ContactForm.module.css | 8 +-- components/Header/Header.module.css | 2 - components/Icons/index.ts | 44 ++++++++------- components/Menu/Menu.module.css | 43 ++++----------- components/Menu/Menu.tsx | 50 +++++++++--------- components/MenuLink/MenuLink.module.css | 35 ++++++++++++ components/MenuLink/MenuLink.tsx | 24 +++++++++ components/RepositoryCard/RepositoryCard.tsx | 2 +- components/Selfie/Selfie.module.css | 8 +++ components/Selfie/Selfie.tsx | 12 ++++- components/ThemeToggle/BulbIcon.tsx | 37 ------------- components/ThemeToggle/ThemeToggle.module.css | 10 +++- components/ThemeToggle/ThemeToggle.tsx | 20 +++++-- next.config.js | 2 + package.json | 1 + pages/birthday.tsx | 5 +- pages/cli.tsx | 5 +- pages/contact.tsx | 7 +-- pages/index.tsx | 9 ++-- pages/license.tsx | 5 +- pages/previously.tsx | 7 +-- pages/privacy.tsx | 5 +- pages/projects.tsx | 7 +-- pages/uses.tsx | 5 +- .../favicons/android-chrome-192x192.png | Bin 1794 -> 7335 bytes .../favicons/android-chrome-512x512.png | Bin 4421 -> 45260 bytes public/static/favicons/apple-touch-icon.png | Bin 1112 -> 6049 bytes public/static/favicons/favicon-16x16.png | Bin 0 -> 540 bytes public/static/favicons/favicon-32x32.png | Bin 0 -> 1091 bytes public/static/favicons/favicon-48x48.png | Bin 0 -> 1531 bytes public/static/favicons/favicon-512x512.png | Bin 0 -> 45260 bytes public/static/favicons/favicon.ico | Bin 5430 -> 5430 bytes public/static/favicons/favicon.png | Bin 611 -> 1991 bytes public/static/favicons/maskable-192x192.png | Bin 3127 -> 4162 bytes public/static/favicons/maskable-512x512.png | Bin 9121 -> 19378 bytes public/static/images/selfie.jpg | Bin 0 -> 53276 bytes styles/colors.css | 2 + yarn.lock | 15 +++++- 38 files changed, 193 insertions(+), 177 deletions(-) create mode 100644 components/MenuLink/MenuLink.module.css create mode 100644 components/MenuLink/MenuLink.tsx delete mode 100644 components/ThemeToggle/BulbIcon.tsx create mode 100644 public/static/favicons/favicon-16x16.png create mode 100644 public/static/favicons/favicon-32x32.png create mode 100644 public/static/favicons/favicon-48x48.png create mode 100644 public/static/favicons/favicon-512x512.png create mode 100644 public/static/images/selfie.jpg diff --git a/components/ContactForm/ContactForm.module.css b/components/ContactForm/ContactForm.module.css index 27aed71a..ab69ed23 100644 --- a/components/ContactForm/ContactForm.module.css +++ b/components/ContactForm/ContactForm.module.css @@ -7,6 +7,8 @@ color: var(--text); background-color: var(--super-duper-light); border-color: var(--light); + /* light-dark theme switch fading */ + transition: background 0.25s ease; } .input:focus { @@ -18,12 +20,6 @@ border-color: var(--error); } -.input, -.btn_submit { - /* light-dark theme switch fading */ - transition: background 0.25s ease; -} - .textarea { height: 12em; min-height: 6em; diff --git a/components/Header/Header.module.css b/components/Header/Header.module.css index 65e0c7e6..157917e6 100644 --- a/components/Header/Header.module.css +++ b/components/Header/Header.module.css @@ -29,13 +29,11 @@ .menu { max-width: 325px; - margin-left: 2.5em; } } @media screen and (max-width: 380px) { .menu { max-width: 225px; - margin-left: 1.6em; } } diff --git a/components/Icons/index.ts b/components/Icons/index.ts index 95e81dd9..75210d1a 100644 --- a/components/Icons/index.ts +++ b/components/Icons/index.ts @@ -1,26 +1,20 @@ -// emoji from Twemoji: https://twemoji.twitter.com/ -export { default as BotIcon } from "../../node_modules/twemoji/assets/svg/1f916.svg"; -export { default as ContactIcon } from "../../node_modules/twemoji/assets/svg/1f4ec.svg"; -export { default as DateIcon } from "../../node_modules/twemoji/assets/svg/1f4c5.svg"; -export { default as EditIcon } from "../../node_modules/twemoji/assets/svg/270f.svg"; -export { default as FloppyIcon } from "../../node_modules/twemoji/assets/svg/1f4be.svg"; -export { default as HeartIcon } from "../../node_modules/twemoji/assets/svg/2764.svg"; -export { default as HomeIcon } from "../../node_modules/twemoji/assets/svg/1f3e1.svg"; -export { default as LaptopIcon } from "../../node_modules/twemoji/assets/svg/1f4bb.svg"; -export { default as LicenseIcon } from "../../node_modules/twemoji/assets/svg/1f4dc.svg"; -export { default as LockIcon } from "../../node_modules/twemoji/assets/svg/1f510.svg"; -export { default as MailIcon } from "../../node_modules/twemoji/assets/svg/2709.svg"; -export { default as NotesIcon } from "../../node_modules/twemoji/assets/svg/1f5d2.svg"; -export { default as PrivacyIcon } from "../../node_modules/twemoji/assets/svg/1f575.svg"; -export { default as ProjectsIcon } from "../../node_modules/twemoji/assets/svg/1f468-200d-1f4bb.svg"; -export { default as SendIcon } from "../../node_modules/twemoji/assets/svg/1f4e4.svg"; -export { default as SirenIcon } from "../../node_modules/twemoji/assets/svg/1f6a8.svg"; -export { default as TagIcon } from "../../node_modules/twemoji/assets/svg/1f3f7.svg"; -export { default as TapeIcon } from "../../node_modules/twemoji/assets/svg/1f4fc.svg"; -export { default as ViewsIcon } from "../../node_modules/twemoji/assets/svg/1f440.svg"; -export { default as WaveIcon } from "../../node_modules/twemoji/assets/svg/1f44b.svg"; +// Icons from various packs, imported directly from the package's SVG files instead of their exports so they're all +// processed consistently via svgr/webpack into React components. +// NOTE: each node_modules/ directory *must* be listed in svgr's webpack config in next.config.js. -// https://primer.style/octicons/ +// feather icons: https://feathericons.com/ +export { default as ContactIcon } from "../../node_modules/feather-icons/dist/icons/mail.svg"; +export { default as DateIcon } from "../../node_modules/feather-icons/dist/icons/calendar.svg"; +export { default as EditIcon } from "../../node_modules/feather-icons/dist/icons/edit.svg"; +export { default as HomeIcon } from "../../node_modules/feather-icons/dist/icons/home.svg"; +export { default as MoonIcon } from "../../node_modules/feather-icons/dist/icons/moon.svg"; +export { default as NotesIcon } from "../../node_modules/feather-icons/dist/icons/edit-3.svg"; +export { default as ProjectsIcon } from "../../node_modules/feather-icons/dist/icons/code.svg"; +export { default as SunIcon } from "../../node_modules/feather-icons/dist/icons/sun.svg"; +export { default as TagIcon } from "../../node_modules/feather-icons/dist/icons/tag.svg"; +export { default as ViewsIcon } from "../../node_modules/feather-icons/dist/icons/eye.svg"; + +// octicons: https://primer.style/octicons/ export { default as CheckOcticon } from "../../node_modules/@primer/octicons/build/svg/check-16.svg"; export { default as ClipboardOcticon } from "../../node_modules/@primer/octicons/build/svg/paste-16.svg"; export { default as ForkOcticon } from "../../node_modules/@primer/octicons/build/svg/repo-forked-16.svg"; @@ -28,5 +22,9 @@ export { default as OctocatOcticon } from "../../node_modules/@primer/octicons/b export { default as StarOcticon } from "../../node_modules/@primer/octicons/build/svg/star-16.svg"; export { default as XOcticon } from "../../node_modules/@primer/octicons/build/svg/x-16.svg"; -// https://simpleicons.org/ +// emoji from Twemoji: https://twemoji.twitter.com/ +export { default as HeartIcon } from "../../node_modules/twemoji/assets/svg/2764.svg"; +export { default as SendIcon } from "../../node_modules/twemoji/assets/svg/1f4e4.svg"; + +// simple icons: https://simpleicons.org/ export { default as NextjsLogo } from "../../node_modules/simple-icons/icons/nextdotjs.svg"; diff --git a/components/Menu/Menu.module.css b/components/Menu/Menu.module.css index 9b49bae3..d67dc5e4 100644 --- a/components/Menu/Menu.module.css +++ b/components/Menu/Menu.module.css @@ -7,39 +7,19 @@ .menu_item { list-style: none; display: inline-flex; - margin-left: 1.8em; -} - -.menu_item .link { - display: inline-flex; - align-items: center; - color: var(--medium-dark); -} - -.menu_item .link:hover { - color: var(--link); + margin-left: 1em; } .menu_item .icon { - width: 1.6em; - height: 1.6em; -} - -.menu_item .label { - font-size: 0.95em; - font-weight: 500; - margin-left: 0.8em; - line-height: 1; -} - -.menu_item.theme_toggle { - margin-left: 1.25em; + width: 1.25em; + height: 1.25em; } @media screen and (max-width: 768px) { .menu { width: 100%; justify-content: space-between; + margin-left: 1em; } .menu_item { @@ -50,19 +30,14 @@ width: 1.8em; height: 1.8em; } - - /* hide text next to emojis on mobile */ - .menu_item .label { - display: none; - } - - .menu_item.theme_toggle { - margin-left: -0.3em; - } } -/* the home icon is redundant when space is SUPER tight */ @media screen and (max-width: 380px) { + .menu { + margin-left: 1.4em; + } + + /* the home icon is redundant when space is SUPER tight */ .menu_item:first-of-type { display: none; } diff --git a/components/Menu/Menu.tsx b/components/Menu/Menu.tsx index eaa87e05..e034b7bd 100644 --- a/components/Menu/Menu.tsx +++ b/components/Menu/Menu.tsx @@ -1,6 +1,7 @@ import { memo } from "react"; -import Link from "next/link"; +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"; @@ -12,43 +13,44 @@ type Props = { const links = [ { - icon: , + icon: , text: "Home", href: "/", }, { - icon: , + icon: , text: "Notes", - href: "/notes/", + href: "/notes", }, { - icon: , + icon: , text: "Projects", - href: "/projects/", + href: "/projects", }, { - icon: , + icon: , text: "Contact", - href: "/contact/", + href: "/contact", }, ]; -const Menu = ({ className }: Props) => ( -
    - {links.map((link, index) => ( -
  • - - - {link.icon} {link.text} - - -
    • - ))} +const Menu = ({ className }: Props) => { + const router = useRouter(); -
  • - -
    • -
-); + return ( +
    + {links.map((link, index) => ( +
  • + {/* kinda weird/hacky way to determine if the *first part* of the current path matches this href */} + +
    • + ))} + +
  • + +
    • +
+ ); +}; export default memo(Menu); diff --git a/components/MenuLink/MenuLink.module.css b/components/MenuLink/MenuLink.module.css new file mode 100644 index 00000000..35186cbc --- /dev/null +++ b/components/MenuLink/MenuLink.module.css @@ -0,0 +1,35 @@ +.link { + display: inline-flex; + align-items: center; + color: var(--medium-dark); + line-height: 1; + padding: 0.6em; +} + +.link:hover, +.link.current { + border-bottom: 3px solid; + margin-bottom: -3px; +} + +.link:hover { + border-color: var(--kinda-light); +} + +.link.current { + border-color: var(--link-underline); +} + +.label { + font-size: 0.95em; + font-weight: 500; + margin-top: 0.1em; + margin-left: 0.8em; +} + +@media screen and (max-width: 768px) { + /* hide text next to emojis on mobile */ + .label { + display: none; + } +} diff --git a/components/MenuLink/MenuLink.tsx b/components/MenuLink/MenuLink.tsx new file mode 100644 index 00000000..4d507fb4 --- /dev/null +++ b/components/MenuLink/MenuLink.tsx @@ -0,0 +1,24 @@ +import classNames from "classnames/bind"; +import Link from "next/link"; +import { ReactNode } from "react"; + +import styles from "./MenuLink.module.css"; +const cx = classNames.bind(styles); + +type Props = { + href: string; + icon: ReactNode; + text: string; + current?: boolean; + className?: string; +}; + +const MenuLink = ({ href, icon, text, current, className }: Props) => ( + + + {icon} {text} + + +); + +export default MenuLink; diff --git a/components/RepositoryCard/RepositoryCard.tsx b/components/RepositoryCard/RepositoryCard.tsx index 3caeff67..50b601f9 100644 --- a/components/RepositoryCard/RepositoryCard.tsx +++ b/components/RepositoryCard/RepositoryCard.tsx @@ -1,7 +1,7 @@ import classNames from "classnames"; import { intlFormat, formatDistanceToNowStrict } from "date-fns"; import { StarOcticon, ForkOcticon } from "../Icons"; -import { RepoType } from "../../types"; +import type { RepoType } from "../../types"; import styles from "./RepositoryCard.module.css"; diff --git a/components/Selfie/Selfie.module.css b/components/Selfie/Selfie.module.css index cec82a2e..ba03c60b 100644 --- a/components/Selfie/Selfie.module.css +++ b/components/Selfie/Selfie.module.css @@ -36,4 +36,12 @@ .name { display: none; } + + .selfie img { + border-width: 2px !important; + } + + .link:hover .selfie img { + border-color: var(--link-underline) !important; + } } diff --git a/components/Selfie/Selfie.tsx b/components/Selfie/Selfie.tsx index bc1bd3d3..a2598e21 100644 --- a/components/Selfie/Selfie.tsx +++ b/components/Selfie/Selfie.tsx @@ -5,7 +5,7 @@ import classNames from "classnames"; import styles from "./Selfie.module.css"; -import meJpg from "../../public/static/images/me.jpg"; +import selfieJpg from "../../public/static/images/selfie.jpg"; type Props = { className?: string; @@ -15,7 +15,15 @@ const Selfie = ({ className }: Props) => (
- Photo of Jake Jarvis + Photo of Jake Jarvis
Jake Jarvis diff --git a/components/ThemeToggle/BulbIcon.tsx b/components/ThemeToggle/BulbIcon.tsx deleted file mode 100644 index 70e4a2c6..00000000 --- a/components/ThemeToggle/BulbIcon.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { memo } from "react"; -import classNames from "classnames"; - -type Props = { - on?: boolean; - className?: string; -}; - -// modified from Twemoji lightbulb: -const BulbIcon = ({ on = false, className }: Props) => ( - - - - - - - - - -); - -export default memo(BulbIcon); diff --git a/components/ThemeToggle/ThemeToggle.module.css b/components/ThemeToggle/ThemeToggle.module.css index ba5dc8e2..8838796a 100644 --- a/components/ThemeToggle/ThemeToggle.module.css +++ b/components/ThemeToggle/ThemeToggle.module.css @@ -1,6 +1,14 @@ .button { border: 0; - padding: 0; + padding: 0.6em; + margin-right: -0.6em; background: none; cursor: pointer; + display: inline-flex; + align-items: center; + color: var(--medium-dark); +} + +.button:hover { + color: var(--warning); } diff --git a/components/ThemeToggle/ThemeToggle.tsx b/components/ThemeToggle/ThemeToggle.tsx index d8a2dab3..d79e5d80 100644 --- a/components/ThemeToggle/ThemeToggle.tsx +++ b/components/ThemeToggle/ThemeToggle.tsx @@ -1,6 +1,7 @@ import { useEffect, useState, memo } from "react"; import { useTheme } from "next-themes"; -import BulbIcon from "./BulbIcon"; +import classNames from "classnames"; +import { SunIcon, MoonIcon } from "../Icons"; import styles from "./ThemeToggle.module.css"; @@ -12,18 +13,27 @@ const ThemeToggle = ({ className }: Props) => { const [mounted, setMounted] = useState(false); const { resolvedTheme, setTheme } = useTheme(); - // render a dummy bulb until we're fully mounted and self-aware + // render a dummy button until we're fully mounted and self-aware useEffect(() => setMounted(true), []); - if (!mounted) return ; + if (!mounted) { + return ( + + ); + } return ( ); }; diff --git a/next.config.js b/next.config.js index f9e91a04..10d63c7f 100644 --- a/next.config.js +++ b/next.config.js @@ -49,12 +49,14 @@ module.exports = (phase, { defaultConfig }) => { path.resolve(__dirname, "components/icons"), // slight workaround to grab svg files from these packages directly instead of through their exports: path.resolve(__dirname, "node_modules/@primer/octicons/build/svg"), + path.resolve(__dirname, "node_modules/feather-icons/dist/icons"), path.resolve(__dirname, "node_modules/simple-icons/icons"), path.resolve(__dirname, "node_modules/twemoji/assets/svg"), ], use: [ { loader: "@svgr/webpack", + /** @type {import('@svgr/webpack').LoaderOptions} */ options: { icon: true, typescript: true, diff --git a/package.json b/package.json index 8ab78db3..bd85d761 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "escape-goat": "^4.0.0", "fathom-client": "^3.4.0", "faunadb": "^4.4.1", + "feather-icons": "^4.28.0", "feed": "^4.2.2", "formik": "^2.2.9", "gray-matter": "^4.0.3", diff --git a/pages/birthday.tsx b/pages/birthday.tsx index 32296fe2..83e2088a 100644 --- a/pages/birthday.tsx +++ b/pages/birthday.tsx @@ -2,7 +2,6 @@ import { NextSeo } from "next-seo"; import Content from "../components/Content/Content"; import PageTitle from "../components/PageTitle/PageTitle"; import Video from "../components/Video/Video"; -import { TapeIcon } from "../components/Icons"; import thumbnail from "../public/static/images/birthday/thumb.png"; @@ -16,9 +15,7 @@ const Birthday = () => ( }} /> - - 1996.MOV - + 📼 1996.MOV