initial pass at media page

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>

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

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

components/ThemeSwitch.tsx

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

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

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

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>

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

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>
+    </>
+  )
+}

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} />