feat(shared): Modal for all MDX and Strapi content

packages/freesewing.org/components/wrappers/page.js

@@ -16,6 +16,7 @@ const PageWrapper= ({
   noSearch=false,
   app=false,
   layout=Docs,
+  crumbs=false,
   children=[]
 }) => {
 
@@ -41,6 +42,7 @@ const PageWrapper= ({
   const childProps = {
     app: app,
     title: title,
+    crumbs: crumbs,
     search, setSearch, toggleSearch: () => setSearch(!search),
     noSearch: noSearch,
   }

packages/freesewing.org/hooks/useApp.js

@@ -106,7 +106,7 @@ function useApp(full = true) {
   /*
    * Helper method to construct breadcrumb from navigation structure
    */
-  const getBreadcrumb = slug => ({ title: get(navigation, slug).__title, slug })
+  const getBreadcrumb = slug => ([ get(navigation, slug).__title, `/${slug}` ])
 
   return {
     // Static vars

packages/freesewing.org/pages/blog/[slug].js

@@ -5,6 +5,7 @@ import MdxWrapper from 'shared/components/wrappers/mdx'
 import mdxCompiler from 'shared/mdx/compiler'
 import Markdown from 'react-markdown'
 import Head from 'next/head'
+import Modal from 'shared/components/modal.js'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { strapiHost } from 'shared/config/freesewing.mjs'
 import { strapiImage } from 'shared/utils.js'
@@ -81,15 +82,17 @@ const PostPage = ({ post, author }) => {
           </span>
         </div>
         <figure>
-          <img
+          <Modal>
-            src={`${strapiHost}${post.image.url}`}
+            <img
-            alt={post.caption}
+              src={`${strapiHost}${post.image.url}`}
-            className="shadow m-auto"
+              alt={post.caption}
-          />
+              className="shadow m-auto"
-          <figcaption
+            />
-            className="text-center mb-8 prose m-auto"
+            <figcaption
-            dangerouslySetInnerHTML={{__html: post.caption}}
+              className="text-center mb-8 prose m-auto"
-          />
+              dangerouslySetInnerHTML={{__html: post.caption}}
+            />
+          </Modal>
         </figure>
         <div className="strapi prose lg:prose-lg mb-12 m-auto">
           <MdxWrapper mdx={post.mdx} app={app} />

packages/freesewing.org/pages/blog/index.js

@@ -55,7 +55,7 @@ const BlogIndexPage = (props) => {
 
   return (
     <Page app={app} title={t('blog')} slug='blog'>
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 px-8">
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 px-8 max-w-7xl">
         {props.posts.map(post => <Preview app={app} post={post} key={post.slug}/>)
         }
       </div>

packages/freesewing.org/pages/showcase/[slug].js

@@ -6,6 +6,7 @@ import mdxCompiler from 'shared/mdx/compiler'
 import Markdown from 'react-markdown'
 import Head from 'next/head'
 import PageLink from 'shared/components/page-link.js'
+import Modal from 'shared/components/modal.js'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { strapiHost } from 'shared/config/freesewing.mjs'
 import { strapiImage } from 'shared/utils.js'
@@ -59,12 +60,9 @@ const PostPage = ({ post, maker }) => {
   const app = useApp()
   const crumbs = [
     app.getBreadcrumb('showcase'),
-    {
+    [ post.title ]
-      title: post.title,
-      slug: `showcase/${post.slug}`
-    }
   ]
-
+  console.log(crumbs)
   return (
     <Page app={app} title={post.title} crumbs={crumbs} >
       <article className="mb-12 px-8 max-w-7xl">
@@ -84,15 +82,17 @@ const PostPage = ({ post, maker }) => {
           </div>
         </div>
         <figure>
-          <img
+          <Modal>
-            src={`${strapiHost}${post.image.url}`}
+            <img
-            alt={post.caption}
+              src={`${strapiHost}${post.image.url}`}
-            className="shadow m-auto"
+              alt={post.caption}
-          />
+              className="shadow m-auto max-h-full"
-          <figcaption
+            />
-            className="text-center mb-8 prose m-auto"
+            <figcaption
-            dangerouslySetInnerHTML={{__html: post.caption}}
+              className="text-center mb-8 prose m-auto"
-          />
+              dangerouslySetInnerHTML={{__html: post.caption}}
+            />
+          </Modal>
         </figure>
         <div className="strapi prose lg:prose-lg mb-12 m-auto">
           <MdxWrapper mdx={post.mdx} app={app} />

packages/freesewing.org/pages/showcase/designs/[design].js

@@ -45,8 +45,14 @@ const DesignIndexPage = (props) => {
     }
   }
 
+  const crumbs = [
+    app.getBreadcrumb('showcase'),
+    [ t('designs'), '/showcase/designs' ],
+    [ t(`patterns:${props.design}.t`) ]
+  ]
+
   return (
-    <Page app={app} title={t('showcase')+': '+t(`patterns:${props.design}.t`)} slug='showcase'>
+    <Page app={app} title={t('showcase')+': '+t(`patterns:${props.design}.t`)} crumbs={crumbs}>
       <div className={`
         px-8 2xl:pl-16 overflow-visible overscroll-x-hidden
         max-w-sm

packages/freesewing.shared/components/breadcrumbs.js

@@ -15,7 +15,7 @@ const Breadcrumbs = ({ crumbs=[], title }) => (
       <React.Fragment key={crumb[1]}>
         <li className="text-base-content px-2">&raquo;</li>
         <li>
-          {crumb[2]
+          {crumb[1]
             ?  (
               <Link href={crumb[1]}>
                 <a title={crumb[0]} className="text-secondary hover:text-secondary-focus">

packages/freesewing.shared/components/mdx/figure.js

@@ -1,6 +1,8 @@
 import Popout from 'shared/components/popout'
+import Modal from 'shared/components/modal'
 
 const Figure = props => {
+
   const title = props?.title
     ? props.title
     : props?.alt
@@ -9,21 +11,23 @@ const Figure = props => {
 
   return (
     <figure className="block my-4">
-      <img
+      <Modal>
-        src={props?.src}
+        <img
-        alt={props?.alt || ''}
+          src={props?.src}
-        title={title || ''}
+          alt={props?.alt || ''}
-        className="m-auto"
+          title={title || ''}
-      />
+          className="m-auto max-h-full max-w-full"
-      {title
+        />
-        ? <figcaption className="text-center italic text-base-content mt-1">{title}</figcaption>
+        {title
-        : (
+          ? <figcaption className="text-center italic text-base-content mt-1">{title}</figcaption>
-          <Popout fixme>
+          : (
-            <h5>This image does not have an alt of title specified</h5>
+            <Popout fixme>
-            <p>Please improve our documentation and fix this.</p>
+              <h5>This image does not have an alt of title specified</h5>
-          </Popout>
+              <p>Please improve our documentation and fix this.</p>
-        )
+            </Popout>
-      }
+          )
+        }
+      </Modal>
     </figure>
   )
 }

packages/freesewing.shared/components/modal.js

@@ -0,0 +1,27 @@
+import { useState } from 'react'
+
+const Modal = ({ cancel, children }) => {
+
+  const [ modal, setModal ] = useState(false)
+
+  if (modal) return (
+    <div className={`
+      fixed top-0 left-0 right-0 w-screen h-screen
+      bg-base-100 bg-opacity-90 z-30
+      hover:cursor-zoom-out flex flex-col justify-center
+      `} onClick={() => setModal(false)}>
+        <div className="p-8 max-h-full max-w-full">
+          {children}
+        </div>
+    </div>
+  )
+
+  return (
+    <div
+      onClick={() => setModal(!modal)}
+      className="hover:cursor-zoom-in"
+    >{children}</div>
+  )
+}
+
+export default Modal