Merge pull request #13 from curtislarson/feat/navbar-improvements

feat: some meta tag improvements, update the navbar, other small fixes
curtislarson · Mar 4, 2023 · e6e51cd · e6e51cd
2 parents af37e5c + c8293a2
commit e6e51cd
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -32,6 +32,8 @@ The data only goes back 3 or so years though so I'll need to backfill some of th
 ## TODO
 
 - [ ] Some sort of "navigation" or "auto driver" mode where it slowly goes from beer to beer and navigates around the map? Similar to the 1000 beer party.
+- [ ] Use purchased location if it exists and venue location does not exist or is untappd at home
+- [ ] Remove "X days ago" from location filter or think of better alternative
 - [ ] Improve markers?
 - [ ] Sort fields
 - [ ] Keyword highlighting?

diff --git a/packages/www/index.html b/packages/www/index.html
@@ -4,8 +4,15 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Beers and travels of a nomad" />
-    <title>Drinkin' All Over the World</title>
+    <meta
+      name="description"
+      content="Drinkin' All Over the World - A visualization of my Untappd checkins and travel history"
+    />
+    <meta property="og:title" eval:content="Beers" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" eval:content="https://beers.curtislarson.dev" />
+    <meta property="og:image" content="https://beers.curtislarson.dev/quack.png" />
+    <title>Beers</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/packages/www/src/Layout.tsx b/packages/www/src/Layout.tsx
@@ -1,6 +1,22 @@
 import { Outlet } from "react-router-dom";
 import Navbar from "./components/Navbar";
-import { NAVBAR_ITEMS } from "./navbar-items";
+import { NavbarItemProps } from "./components/NavbarItem";
+import GithubIcon from "./icons/Github.svg";
+
+const NAVBAR_ITEMS: NavbarItemProps[] = [
+  { href: "https://curtislarson.dev/#/projects", text: "Projects" },
+  {
+    href: "https://beers.curtislarson.dev",
+    text: "Beers",
+    active: true,
+  },
+  {
+    href: "https://github.com/curtislarson/daotw",
+    image: GithubIcon,
+    align: "right",
+    tooltip: "View on GitHub",
+  },
+];
 
 export default function Layout() {
   return (

diff --git a/packages/www/src/components/CheckinFacets.tsx b/packages/www/src/components/CheckinFacets.tsx
@@ -53,7 +53,7 @@ export default function CheckinFacets({ trips, onTripUpdated, onSearchUpdated, s
               >
                 <div className="max-h-72 overflow-y-scroll">
                   <li className="border-b-2 border-base-100" onClick={() => updateTrip(null)}>
-                    <span className="sm:text-md text-xs text-secondary">All Trips</span>
+                    <span className="sm:text-md text-sm text-secondary">All Trips</span>
                   </li>
                   {trips.map((t) => (
                     <li key={t.trip_id} className="border-b-2 border-base-100" onClick={() => updateTrip(t)}>

diff --git a/packages/www/src/components/Icon.tsx b/packages/www/src/components/Icon.tsx
@@ -0,0 +1,15 @@
+export interface IconProps {
+  src: string;
+  tooltip?: string;
+}
+
+export default function Icon({ src, tooltip }: IconProps) {
+  if (tooltip) {
+    return (
+      <div className={`tooltip tooltip-bottom normal-case`} data-tip={tooltip}>
+        <img src={src} className="h-8 w-8" />
+      </div>
+    );
+  }
+  return <img src={src} className="h-8 w-8" />;
+}
diff --git a/packages/www/src/components/Navbar.tsx b/packages/www/src/components/Navbar.tsx
@@ -1,33 +1,48 @@
-import { NavbarItem } from "../navbar-items";
+import Icon from "./Icon";
+import NavbarItem, { NavbarItemProps } from "./NavbarItem";
 
 export interface NavbarProps {
   href?: string;
   logo: string;
   title: string;
-  items?: NavbarItem[];
+  items?: NavbarItemProps[];
 }
 
 export default function Navbar(props: NavbarProps) {
+  const { left, right } = (props.items ?? []).reduce<{ left: NavbarItemProps[]; right: NavbarItemProps[] }>(
+    (acc, item) => {
+      if (item.align === "right") {
+        acc.right.push(item);
+      } else {
+        acc.left.push(item);
+      }
+      return acc;
+    },
+    { left: [], right: [] }
+  );
+
   return (
-    <div className="navbar hidden bg-base-200 sm:flex">
+    <div className="navbar hidden items-center bg-base-200 px-2 py-2 sm:flex sm:px-8">
       <div className="flex-none">
         <a href={props.href ?? "/"} className="btn-ghost btn-xs btn sm:btn-md">
-          <img src={props.logo} className="tooltip h-8 w-8" data-tip={props.title} />
+          <Icon src={props.logo} tooltip="Quack" />
           <span className="ml-5 text-xl normal-case">{props.title}</span>
         </a>
       </div>
-      <div className="flex-none">
-        {props.items && (
-          <ul className="menu menu-horizontal px-1">
-            {props.items.map((item) => (
-              <li key={item.href}>
-                <a
-                  href={item.href}
-                  className={`btn normal-case ${item.active ? "btn-outline btn-primary" : "btn-ghost"}`}
-                >
-                  {item.text}
-                </a>
-              </li>
+      <div className="flex-1">
+        {left.length > 0 && (
+          <ul className="menu menu-horizontal">
+            {left.map((item) => (
+              <NavbarItem {...item} key={item.href} />
+            ))}
+          </ul>
+        )}
+      </div>
+      <div className="h-full flex-1 justify-end">
+        {right.length > 0 && (
+          <ul className="menu menu-horizontal">
+            {right.map((item) => (
+              <NavbarItem {...item} key={item.href} />
             ))}
           </ul>
         )}

diff --git a/packages/www/src/components/NavbarItem.tsx b/packages/www/src/components/NavbarItem.tsx
@@ -0,0 +1,33 @@
+import Icon from "./Icon";
+
+export type NavbarItemProps = {
+  href: string;
+  /** @default "left" */
+  align?: "left" | "right";
+  active?: boolean;
+} & (
+  | {
+      text: string;
+    }
+  | { image: string; tooltip?: string }
+);
+
+export default function NavbarItem(props: NavbarItemProps) {
+  if ("image" in props) {
+    return (
+      <li>
+        <a href={props.href}>
+          <Icon src={props.image} tooltip={props.tooltip} />
+        </a>
+      </li>
+    );
+  } else {
+    return (
+      <li>
+        <a href={props.href} className={`btn normal-case ${props.active ? "btn-outline btn-primary" : "btn-ghost"}`}>
+          {props.text}
+        </a>
+      </li>
+    );
+  }
+}
diff --git a/packages/www/src/icons/Github.svg b/packages/www/src/icons/Github.svg
diff --git a/packages/www/src/navbar-items.ts b/packages/www/src/navbar-items.ts