diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
index 57fae77..1181ad8 100644
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
import { graphql, navigate, Link } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { Helmet } from "react-helmet";
@@ -26,6 +26,7 @@ import {
getGalleryPageUrl,
} from "../../utils";
import MetadataItem from "./MetadataItem";
+import Nav from "../Nav";
const logKeyShortcut = (keyCode) => {
try {
@@ -53,6 +54,9 @@ const GalleryImage = ({
const ar = getAspectRatio(image);
const [zoom, setZoom] = useState(false);
+ const [isClient, setIsClient] = useState(true);
+
+ useEffect(() => {setIsClient(true)}, [])
const nextIndex =
sortedImageList && currentIndex < sortedImageList.length
@@ -149,30 +153,13 @@ const GalleryImage = ({
/>
</Helmet>
<div className="min-h-screen flex flex-col justify-between">
- <nav className="mt-1 ml-1 text-lg mb-4">
- <button
- className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
- onClick={() => navigate(-1)}
- type="button"
- >
- back
- </button>
- <Link
- className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
- to="/"
- >
- home
- </Link>
- <Link
- className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
- to={getGalleryPageUrl(
- { keyword: filterKeyword, sortKey },
- image.base
- )}
- >
- gallery <span className="bg-gray-300 text-black">esc</span>
- </Link>
- </nav>
+ <Nav className="mb-4" internalLinks={[
+ { href: '/', label: "Home"},
+ { href: getGalleryPageUrl(
+ { keyword: filterKeyword, sortKey },
+ image.base
+ ), label: <>Gallery <kbd>esc</kbd></>}
+ ]} isClient={isClient} />
<div className="flex justify-between flex-auto items-center lg:gap-2">
{prevImage && (
<Link
diff --git a/src/components/Nav.js b/src/components/Nav.js
new file mode 100644
index 0000000..b9cd416
--- /dev/null
+++ b/src/components/Nav.js
@@ -0,0 +1,95 @@
+import React from "react";
+import classnames from "classnames";
+import { Link } from "gatsby";
+
+const getNavClasses = (isClient) =>
+ classnames(
+ "hover:underline mx-2 md:mx-3",
+ isClient ? "text-vibrant-light" : "text-gray-200"
+ );
+
+const Nav = ({ isClient, internalLinks, className }) => (
+ <nav
+ className={classnames("m-2 flex justify-center", className)}
+ style={{ zIndex: 100 }}
+ >
+ <div
+ className={classnames(
+ "rounded-full p-2 ]",
+ isClient
+ ? "bg-vibrant-dark cool-border-small-light"
+ : "border border-white"
+ )}
+ >
+ <ul className="inline-flex flex-wrap justify-center">
+ {internalLinks &&
+ internalLinks.map(({ href, label }) => (
+ <li key={href}>
+ <Link className={getNavClasses(isClient)} to={href}>
+ {label}
+ </Link>
+ </li>
+ ))}
+ {internalLinks && <>|</>}
+ <li>
+ <a
+ className={getNavClasses(isClient)}
+ href="https://twitter.com/chuckletmilk"
+ >
+ Twitter
+ </a>
+ </li>
+ <li>
+ <a
+ className={getNavClasses(isClient)}
+ href="https://www.instagram.com/asubtlebutdeliciouscoffeecake/"
+ >
+ Instagram
+ </a>
+ </li>
+ <li>
+ <a
+ className={getNavClasses(isClient)}
+ href="https://github.com/chuckdries"
+ >
+ Github
+ </a>
+ </li>
+ <li>
+ <a
+ className={getNavClasses(isClient)}
+ href="https://www.linkedin.com/in/chuckdries/"
+ >
+ LinkedIn
+ </a>
+ </li>
+ <li>
+ <a
+ className={getNavClasses(isClient)}
+ href="https://medium.com/@chuckdries"
+ >
+ Medium
+ </a>
+ </li>
+ <li>
+ <a
+ className={getNavClasses(isClient)}
+ href="https://www.youtube.com/channel/UCknR_DdytuOgzus--b2gZhg"
+ >
+ YouTube
+ </a>
+ </li>
+ <li>
+ <a
+ className={getNavClasses(isClient)}
+ href="mailto:chuck@chuckdries.com"
+ >
+ chuck@chuckdries.com
+ </a>
+ </li>
+ </ul>
+ </div>
+ </nav>
+);
+
+export default Nav;
diff --git a/src/components/index/Nav.js b/src/components/index/Nav.js
deleted file mode 100644
index 14cd424..0000000
--- a/src/components/index/Nav.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-
-const getNavClasses = (isClient) =>
- classnames(
- "hover:underline mx-2 md:mx-3",
- isClient ? "text-vibrant-light" : "text-gray-200"
- );
-
-const Nav = ({ imageIsLandscape, isClient }) => (
- <nav
- className={classnames(
- // imageIsLandscape
- // ? "landscape:w-screen portrait:rounded-3xl portrait:m-2"
- // : "portrait:w-screen landscape:rounded-3xl landscape:m-2",
- "rounded-3xl m-2",
- "p-2 flex justify-center",
- isClient && "bg-vibrant-dark cool-border-small-light"
- )}
- style={{ zIndex: 100 }}
- >
- <ul className="inline-flex flex-wrap justify-center">
- <li>
- <a
- className={getNavClasses(isClient)}
- href="/CharlesDriesResumeCurrent.pdf"
- onClick={() => {
- try {
- window.plausible("Resume Click");
- } catch {
- // do nothing
- }
- }}
- >
- Resume
- </a>
- </li>
- <li>
- <a
- className={getNavClasses(isClient)}
- href="https://twitter.com/chuckletmilk"
- >
- Twitter
- </a>
- </li>
- <li>
- <a
- className={getNavClasses(isClient)}
- href="https://www.instagram.com/asubtlebutdeliciouscoffeecake/"
- >
- Instagram
- </a>
- </li>
- <li>
- <a
- className={getNavClasses(isClient)}
- href="https://github.com/chuckdries"
- >
- Github
- </a>
- </li>
- <li>
- <a
- className={getNavClasses(isClient)}
- href="https://www.linkedin.com/in/chuckdries/"
- >
- LinkedIn
- </a>
- </li>
- <li>
- <a
- className={getNavClasses(isClient)}
- href="https://medium.com/@chuckdries"
- >
- Medium
- </a>
- </li>
- <li>
- <a
- className={getNavClasses(isClient)}
- href="https://www.youtube.com/channel/UCknR_DdytuOgzus--b2gZhg"
- >
- YouTube
- </a>
- </li>
- <li>
- <a
- className={getNavClasses(isClient)}
- href="mailto:chuck@chuckdries.com"
- >
- chuck@chuckdries.com
- </a>
- </li>
- </ul>
- </nav>
-);
-
-export default Nav;
diff --git a/src/pages/index.js b/src/pages/index.js
index 4a1dafa..c12966a 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -8,7 +8,7 @@ import classnames from "classnames";
import '../styles/index.css';
import { getHelmetSafeBodyStyle, getVibrant, getAspectRatio } from "../utils";
-import Nav from "../components/index/Nav";
+import Nav from "../components/Nav";
import ActionButtons from "../components/index/ActionButtons";
import { use100vh } from "react-div-100vh";
@@ -134,7 +134,7 @@ const IndexPage = ({
)}
style={{ gridArea: "1/1" }}
>
- <Nav imageIsLandscape={imageIsLandscape} isClient={isClient} />
+ <Nav isClient={isClient} />
<div
className={classnames(
"rounded-[50px] p-3 md:p-5 flex flex-col items-center z-10 border-r-[20px] border-b-[20px] mb-3 mx-2 md:mb-[-90px]",
diff --git a/src/pages/photogallery.js b/src/pages/photogallery.js
index 1e05676..94a3cd9 100644
--- a/src/pages/photogallery.js
+++ b/src/pages/photogallery.js
@@ -8,6 +8,7 @@ import { Picker, Item } from "@adobe/react-spectrum";
import MasonryGallery from "../components/MasonryGallery";
import KeywordsPicker from "../components/KeywordsPicker";
import { getGalleryPageUrl } from "../utils";
+import Nav from "../components/Nav";
const SORT_KEYS = {
hue: ["fields", "imageMeta", "vibrantHue"],
@@ -69,7 +70,7 @@ const GalleryPage = ({ data }) => {
);
const removeHash = React.useCallback(() => {
- console.log('rh')
+ console.log("rh");
const url = new URL(
typeof window !== "undefined"
? window.location.href.toString()
@@ -90,7 +91,7 @@ const GalleryPage = ({ data }) => {
if (!el) {
return;
}
- console.log('scrolling into view', el);
+ console.log("scrolling into view", el);
el.scrollIntoView({
block: "center",
});
@@ -150,27 +151,14 @@ const GalleryPage = ({ data }) => {
<body className="bg-black text-white" />
</Helmet>
<div className="sm:sticky top-0 z-10 bg-black">
- <nav className="mt-1 ml-1 text-lg mb-4">
- <button
- className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
- onClick={() => navigate(-1)}
- type="button"
- >
- back
- </button>
- <Link
- className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
- to="/"
- >
- home
- </Link>
- <Link
- className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
- to="/photogallery/"
- >
- gallery
- </Link>
- </nav>
+ <Nav
+ className="mb-4"
+ internalLinks={[
+ { href: "/", label: "Home" },
+ { href: "/photogallery/", label: "Gallery" },
+ ]}
+ >
+ </Nav>
<div className="flex flex-col md:flex-row md:items-end justify-between">
<h1 className="text-5xl mt-0 ml-5 mr-5 font-serif font-black z-10">
Photo Gallery
diff --git a/src/styles/global.css b/src/styles/global.css
index 63d3c49..a6ec8a5 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -78,18 +78,6 @@ a {
@apply text-blue-600;
}
-.arrow-right-after:after {
- content: "\279C";
- margin-left: 3px;
- transform: translate(0px);
- display: inline-block;
- transition: all 0.2s;
-}
-
-.arrow-left-before:before {
- content: "\21AB";
- margin-left: 3px;
- transform: translate(0px);
- display: inline-block;
- /* transition: all .2s; */
-}
+kbd {
+ @apply bg-gray-300 text-black border border-gray-700 rounded p-1;
+}
\ No newline at end of file