From 84d56cbeaa41321367f28af039fcefe4c6ee233e Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Tue, 7 Jun 2022 12:30:17 -0700
Subject: [PATCH] initial pass at media page

---
 components/LayoutWrapper.tsx |   2 +-
 components/MediaItem.tsx     |  24 ++++++++++++++++++++++
 components/PhotoGallery.tsx  |  21 +++++++++++++++++++
 components/ThemeSwitch.tsx   |  38 -----------------------------------
 components/YouTubeVideo.tsx  |  18 +++++++++++++++++
 data/mediaData.ts            |   9 +++++++++
 layouts/PostLayout.tsx       |  14 ++-----------
 package-lock.json            | Bin 995318 -> 1039466 bytes
 package.json                 |   2 ++
 pages/media.tsx              |  30 +++++++++++++++++++++++++++
 pages/tour.tsx               |   2 +-
 11 files changed, 108 insertions(+), 52 deletions(-)
 create mode 100644 components/MediaItem.tsx
 create mode 100644 components/PhotoGallery.tsx
 delete mode 100644 components/ThemeSwitch.tsx
 create mode 100644 components/YouTubeVideo.tsx
 create mode 100644 data/mediaData.ts
 create mode 100644 pages/media.tsx

diff --git a/components/LayoutWrapper.tsx b/components/LayoutWrapper.tsx
index 93f1873..689f74b 100644
--- a/components/LayoutWrapper.tsx
+++ b/components/LayoutWrapper.tsx
@@ -29,7 +29,7 @@ const LayoutWrapper = ({ children }: Props) => {
                 <Link
                   key={link.title}
                   href={link.href}
-                  className="focus:shadow-outline-blue sm:border-r-1 inline border border-transparent bg-primary-600 px-4 py-3 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-primary-700 focus:outline-none dark:hover:bg-primary-500 sm:grow sm:border-y-0 sm:border-l-0 sm:border-primary-900 sm:text-center"
+                  className="focus:shadow-outline-blue sm:border-r-1 inline border border-transparent bg-primary-600 px-4 py-3 text-sm font-bold leading-5 text-white shadow transition-colors duration-150 hover:bg-primary-700 focus:outline-none dark:hover:bg-primary-500 sm:grow sm:border-y-0 sm:border-l-0 sm:border-primary-900 sm:text-center"
                 >
                   {link.title}
                 </Link>
diff --git a/components/MediaItem.tsx b/components/MediaItem.tsx
new file mode 100644
index 0000000..bf11620
--- /dev/null
+++ b/components/MediaItem.tsx
@@ -0,0 +1,24 @@
+import PhotoGallery from './PhotoGallery'
+import YoutubeVideo from './YouTubeVideo'
+
+const MediaItem = (props) => {
+  const { type, title, data } = props
+
+  if (type !== 'video' && type !== 'photos') return null
+
+  const item =
+    type === 'video' ? (
+      <YoutubeVideo title={title} data={data} />
+    ) : (
+      <PhotoGallery title={title} data={data} />
+    )
+
+  return (
+    <div className="mb-12 w-full border border-solid border-primary-900">
+      <h3 className="bg-primary-600 px-4 py-3 text-center text-sm font-bold text-white">{title}</h3>
+      {item}
+    </div>
+  )
+}
+
+export default MediaItem
diff --git a/components/PhotoGallery.tsx b/components/PhotoGallery.tsx
new file mode 100644
index 0000000..7806575
--- /dev/null
+++ b/components/PhotoGallery.tsx
@@ -0,0 +1,21 @@
+import 'photoswipe/dist/photoswipe.css'
+import { Gallery, Item } from 'react-photoswipe-gallery'
+import Image from './Image'
+
+const PhotoGallery = (props) => {
+  const { title, data } = props
+
+  return (
+    <Gallery>
+      {data.length
+        ? data.map((d: string) => (
+            <Item cropped key={d}>
+              {({ ref, open }) => <Image alt={title} ref={ref} onClick={open} src={d} />}
+            </Item>
+          ))
+        : null}
+    </Gallery>
+  )
+}
+
+export default PhotoGallery
diff --git a/components/ThemeSwitch.tsx b/components/ThemeSwitch.tsx
deleted file mode 100644
index 5409766..0000000
--- a/components/ThemeSwitch.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useTheme } from 'next-themes'
-
-const ThemeSwitch = () => {
-  const [mounted, setMounted] = useState(false)
-  const { theme, setTheme, resolvedTheme } = useTheme()
-
-  // When mounted on client, now we can show the UI
-  useEffect(() => setMounted(true), [])
-
-  return (
-    <button
-      aria-label="Toggle Dark Mode"
-      type="button"
-      className="ml-1 mr-1 h-8 w-8 rounded p-1 sm:ml-4"
-      onClick={() => setTheme(theme === 'dark' || resolvedTheme === 'dark' ? 'light' : 'dark')}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-        className="text-gray-900 dark:text-gray-100"
-      >
-        {mounted && (theme === 'dark' || resolvedTheme === 'dark') ? (
-          <path
-            fillRule="evenodd"
-            d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-            clipRule="evenodd"
-          />
-        ) : (
-          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-        )}
-      </svg>
-    </button>
-  )
-}
-
-export default ThemeSwitch
diff --git a/components/YouTubeVideo.tsx b/components/YouTubeVideo.tsx
new file mode 100644
index 0000000..e32e7e9
--- /dev/null
+++ b/components/YouTubeVideo.tsx
@@ -0,0 +1,18 @@
+const YoutubeVideo = (props) => {
+  const { title, data } = props
+
+  return (
+    <div
+      className="relative h-0 w-full max-w-full overflow-hidden"
+      style={{ paddingBottom: '56.25%' }}
+    >
+      <iframe
+        title={title}
+        src={`https://www.youtube.com/embed/${data}`}
+        className="absolute top-0 left-0 h-full w-full"
+      />
+    </div>
+  )
+}
+
+export default YoutubeVideo
diff --git a/data/mediaData.ts b/data/mediaData.ts
new file mode 100644
index 0000000..b879625
--- /dev/null
+++ b/data/mediaData.ts
@@ -0,0 +1,9 @@
+const mediaData = [
+  {
+    type: 'video',
+    title: ' Beatus - live @ Trois-Rivières Metal Fest 2004',
+    data: 'GC65l2Fo1q8',
+  },
+]
+
+export default mediaData
diff --git a/layouts/PostLayout.tsx b/layouts/PostLayout.tsx
index 67f9420..f96f603 100644
--- a/layouts/PostLayout.tsx
+++ b/layouts/PostLayout.tsx
@@ -10,6 +10,7 @@ import ScrollTopAndComment from '@/components/ScrollTopAndComment'
 import { ReactNode } from 'react'
 import { PostFrontMatter } from 'types/PostFrontMatter'
 import { AuthorFrontMatter } from 'types/AuthorFrontMatter'
+import YoutubeVideo from '@/components/YouTubeVideo'
 
 const postDateTemplate: Intl.DateTimeFormatOptions = {
   weekday: 'long',
@@ -98,18 +99,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
             <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
               <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">
                 {children}
-                {youtubeId ? (
-                  <div
-                    className="relative h-0 w-full max-w-full overflow-hidden"
-                    style={{ paddingBottom: '56.25%' }}
-                  >
-                    <iframe
-                      title={title}
-                      src={`https://www.youtube.com/embed/${youtubeId}`}
-                      className="absolute top-0 left-0 h-full w-full"
-                    />
-                  </div>
-                ) : null}
+                {youtubeId ? <YoutubeVideo title={title} data={youtubeId} /> : null}
               </div>
               <Comments frontMatter={frontMatter} />
             </div>
diff --git a/package-lock.json b/package-lock.json
index 408fc818975f32a57ead0ef6ac81dd018bdd6e87..89f15406bb85814117bce1afdc870e377d9bc751 100644
GIT binary patch
delta 23345
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
CRI}6o

delta 493
zcmW;H-Ahw(90y?bJI8Z=JLh=LWZ9~fsWV!bWv^sLUM1nAg*8YpnPD|6BS;)lP-Ku@
zG_BRX1Zf7dAw{g4eWK7M2D-pD!gWzI1EUwIh#21WGJF1mXZ}ge!tAc-5Ti#PNeL#|
zsqQubZGx%&4t@-q!bd1ksu@&#R{27eE7=mHEUa@I8e5rFz#kv0^5Vox_Rfy6&#W$p
zx%0v|GxQ!|?|no!is=KC6h%8SmqiyxQ$W1l5C5jTlk1Uo<SQoXi!nR=-n_A2IC@Yj
z@nK>_$`l2?)#cPXty}RbBi+>SW?nib)2%{Q0ZUfu7=$$>zuy4Iq+HU9{tA9Wz|anU
z$c>4s{G0%HkdNwDrotRkVRK6->dKUui|z)vOsP_hBX{wYBlJx1Fu3AM#EoSZHC+hj
zTGi2oxA#;(CyJ;BR`m$nL_fdtrHDRM+b>~jrPf?awbQDOq+g3mh+WW}T{!()t6sA>
z`uh~w+5Bt+K5o&M+bCd|*ZqG`?$JbhR>(HmHzO^ew_blO<Aq1Bmlj*aXgsVBcGGZ`
zs9|+T7ESb_K(k?BPM;}5hiYtY!1HEfw}73;4ZQ}5i1CTh<ZW)D)B}@^&Lk9(E{<yo
f?QapB)ORg6{W`!4u>G;&Q7JxZNEjb6B1QiIImE{&

diff --git a/package.json b/package.json
index eb60f08..f8effcf 100644
--- a/package.json
+++ b/package.json
@@ -24,10 +24,12 @@
     "mdx-bundler": "^8.0.0",
     "next": "12.1.0",
     "next-themes": "^0.0.14",
+    "photoswipe": "^5.2.7",
     "postcss": "^8.4.5",
     "preact": "^10.6.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-photoswipe-gallery": "^2.2.1",
     "reading-time": "1.3.0",
     "rehype-autolink-headings": "^6.1.0",
     "rehype-citation": "^0.2.0",
diff --git a/pages/media.tsx b/pages/media.tsx
new file mode 100644
index 0000000..c2c72c3
--- /dev/null
+++ b/pages/media.tsx
@@ -0,0 +1,30 @@
+import siteMetadata from '@/data/siteMetadata'
+import mediaData from '@/data/mediaData'
+import { PageSEO } from '@/components/SEO'
+import MediaItem from '@/components/MediaItem'
+
+export default function Media() {
+  return (
+    <>
+      <PageSEO title={`Media - ${siteMetadata.author}`} description={siteMetadata.description} />
+      <div className="divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="space-y-2 pt-6 pb-8 md:space-y-5">
+          <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
+            Media
+          </h1>
+        </div>
+        <div className="container py-12">
+          <div className="flex flex-wrap">
+            {mediaData.length ? (
+              mediaData.map((d) => (
+                <MediaItem key={d.title} type={d.type} title={d.title} data={d.data} />
+              ))
+            ) : (
+              <p className="pb-2">No media found.</p>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/pages/tour.tsx b/pages/tour.tsx
index c077ffe..96bac05 100644
--- a/pages/tour.tsx
+++ b/pages/tour.tsx
@@ -4,7 +4,7 @@ import TourDate from '@/components/TourDate'
 import Link from '@/components/Link'
 import { PageSEO } from '@/components/SEO'
 
-export default function Projects() {
+export default function Tour() {
   return (
     <>
       <PageSEO title={`Tour - ${siteMetadata.author}`} description={siteMetadata.description} />