Merge pull request #6 from chuckdries/global-nav-2

add global nav and build PR preview system

.drone.yml

@@ -1,8 +1,10 @@
 kind: pipeline
 type: docker
-name: default
+name: Build Main
 
 trigger:
+  event:
+    - push
   branch:
     - main
 
@@ -37,11 +39,11 @@ steps:
       exclude:
         - node_modules
         - .git*
-      args: -r
       source: ./public/
       target: ~/www/personal-website
       delete: true
-      secrets: [ rsync_key ]
+      recursive: true
+      secrets: [rsync_key]
 
   - name: rebuild-cache
     image: drillster/drone-volume-cache
@@ -59,3 +61,59 @@ volumes:
   - name: cache
     host:
       path: /mnt/user/dronecache
+
+---
+kind: pipeline
+type: docker
+name: Preview PR
+
+trigger:
+  event:
+    - pull_request
+
+steps:
+  - name: restore-cache
+    image: drillster/drone-volume-cache
+    settings:
+      restore: true
+      mount:
+        - ./node_modules
+        - ./.cache
+        - ./public
+    volumes:
+      - name: cache
+        path: /cache
+
+  - name: build
+    image: node
+    commands:
+      - yarn install
+      - PATH_PREFIX=/${DRONE_PULL_REQUEST} yarn build --prefix-paths
+      - du -sh public
+
+  - name: rsync
+    image: drillster/drone-rsync
+    settings:
+      user: ci
+      key:
+        from_secret: rsync_key
+      hosts:
+        - droplet.chuckdries.com
+      exclude:
+        - node_modules
+        - .git*
+      source: ./public/
+      target: ~/www/personal-website-preview/${DRONE_PULL_REQUEST}
+      prescript: cp -r ~/www/personal-website ~/www/personal-website-preview/${DRONE_PULL_REQUEST}
+      delete: true
+      recursive: true
+      secrets: [rsync_key]
+
+  - name: comment
+    image: jmccann/drone-github-comment:1
+    settings:
+      message: preview of ${DRONE_COMMIT} deployed to https://preview.chuckdries.com/${DRONE_PULL_REQUEST}
+      update: true
+      api_key:
+        from_secret: github_key
+# note: we intentionally do not rebuild-cache for PRs

gatsby-config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  pathPrefix: process.env.PATH_PREFIX,
   siteMetadata: {
     title: "Chuck Dries",
     siteUrl: "https://chuckdries.com",

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">
+        <Nav className="mb-4" internalLinks={[
-          <button
+          { href: '/', label: "Home"},
-            className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before  mr-1"
+          { href: getGalleryPageUrl(
-            onClick={() => navigate(-1)}
+            { keyword: filterKeyword, sortKey },
-            type="button"
+            image.base
-          >
+          ), label: <>Gallery <kbd>esc</kbd></>}
-            back
+        ]} isClient={isClient} />
-          </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>
         <div className="flex justify-between flex-auto items-center lg:gap-2">
           {prevImage && (
             <Link

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;

src/components/index/Nav.js

@@ -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;

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]",

src/pages/photogallery.js

@@ -1,13 +1,13 @@
 import * as React from "react";
 import * as R from "ramda";
-import { graphql, Link } from "gatsby";
+import { graphql } from "gatsby";
-import { navigate } from "gatsby";
 import { Helmet } from "react-helmet";
 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 +69,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 +90,7 @@ const GalleryPage = ({ data }) => {
     if (!el) {
       return;
     }
-    console.log('scrolling into view', el);
+    console.log("scrolling into view", el);
     el.scrollIntoView({
       block: "center",
     });
@@ -149,28 +149,15 @@ const GalleryPage = ({ data }) => {
         <title>Photo Gallery | Chuck Dries</title>
         <body className="bg-black text-white" />
       </Helmet>
-      <div className="sm:sticky top-0 z-10 bg-black">
+      <div className="sm:sticky top-0 pt-1 z-10 bg-black">
-        <nav className="mt-1 ml-1 text-lg mb-4">
+        <Nav
-          <button
+          className="mb-4"
-            className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before  mr-1"
+          internalLinks={[
-            onClick={() => navigate(-1)}
+            { href: "/", label: "Home" },
-            type="button"
+            { href: "/photogallery/", label: "Gallery" },
-          >
+          ]}
-            back
+        >
-          </button>
+        </Nav>
-          <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>
         <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

src/styles/global.css

@@ -78,18 +78,6 @@ a {
   @apply text-blue-600;
 }
 
-.arrow-right-after:after {
+kbd {
-  content: "\279C";
+    @apply bg-gray-300 text-black border border-gray-700 rounded p-1;
-  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; */
 }