frame panel block changes

* Added properties to the frame panel block to behave like an exhibition, manifest or publication block * Added link to open frame in a new window * Changes to slots
digirati-co-uk · Dec 4, 2024 · 57e0068 · 57e0068
1 parent aae0afe
commit 57e0068
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 71 deletions.
diff --git a/apps/static-site/slots/@exhibition/irrigation-knowledge/@locale/en/exhibition.json b/apps/static-site/slots/@exhibition/irrigation-knowledge/@locale/en/exhibition.json
@@ -16,11 +16,11 @@
       "type": "FramePanel",
       "data": {
         "frameUrl": "https://sketchfab.com/models/507dd34aec0147f9951a12d48d439f9f/embed",
-        "className": "",
-        "thumbnail": "https://dlc.services/thumbs/7/21/f2a54087-2931-820b-c736-495372f29764/full/full/0/default.jpg",
-        "label": "ANIMATION OF A ROMIJN WEIR NEAR A SUGAR FACTORY",
-        "description": "Made by Luuk Goossen (NewMedia Centre)"
+        "backgroundImage": "https://dlc.services/thumbs/7/21/f2a54087-2931-820b-c736-495372f29764/full/full/0/default.jpg",
+        "frameLabel": "ANIMATION OF A ROMIJN WEIR NEAR A SUGAR FACTORY",
+        "frameDescription": "Made by Luuk Goossen (NewMedia Centre)",
+        "unfiltered": true
       }
     }
   ]
-}
+}
diff --git a/apps/static-site/slots/@exhibition/irrigation-knowledge/@locale/nl/exhibition.json b/apps/static-site/slots/@exhibition/irrigation-knowledge/@locale/nl/exhibition.json
@@ -16,10 +16,10 @@
       "type": "FramePanel",
       "data": {
         "frameUrl": "https://sketchfab.com/models/507dd34aec0147f9951a12d48d439f9f/embed",
-        "className": "",
-        "thumbnail": "https://dlc.services/thumbs/7/21/f2a54087-2931-820b-c736-495372f29764/full/full/0/default.jpg",
-        "label": "ANIMATION OF A ROMIJN WEIR NEAR A SUGAR FACTORY",
-        "description": "Made by Luuk Goossen (NewMedia Centre)"
+        "backgroundImage": "https://dlc.services/thumbs/7/21/f2a54087-2931-820b-c736-495372f29764/full/full/0/default.jpg",
+        "frameLabel": "ANIMATION OF A ROMIJN WEIR NEAR A SUGAR FACTORY",
+        "frameDescription": "Made by Luuk Goossen (NewMedia Centre)",
+        "unfiltered": true
       }
     }
   ]

diff --git a/apps/static-site/slots/@locale/en/homepage.json b/apps/static-site/slots/@locale/en/homepage.json
@@ -20,39 +20,46 @@
           "slot_id": "gridItems",
           "blocks": [
             {
-              "id": "7230r",
+              "id": "srl2d",
               "type": "PublicationBox",
               "data": {
                 "type": "publication",
-                "title": "The Shared History of TU Delft and Bandung Institute of Technology",
-                "link": "/publications/tu-itb",
-                "subtitle": "Abel Streefland",
-                "backgroundImage": "https://dlc.services/thumbs/7/20/76ac865a-099b-43ca-9040-74872c687fff/full/full/0/default.jpg",
-                "backgroundColor": "bg-blue-500"
+                "title": "Martin Baker C-2 Ejection Seat",
+                "link": "/publications/ejection-seat",
+                "subtitle": "Cormac Duggan",
+                "backgroundImage": "https://dlc.services/thumbs/7/37/e7154d7e15c435b7341bce58bc42b9ad/full/full/0/default.jpg",
+                "backgroundColor": "bg-orange-400"
               }
             },
             {
-              "id": "gzpdof",
-              "type": "CollectionBox",
+              "id": "as4ci8",
+              "type": "FramePanel",
               "data": {
-                "type": "collection",
-                "title": "Piranesi",
-                "link": "/collections/ib-tresor-piranesi",
-                "backgroundImage": "https://apex.dlc.services/thumbs/7/6/52816b69-612d-4e55-b2bc-76aa2aa0fd5d/full/full/0/default.jpg",
-                "backgroundColor": "bg-orange-400",
-                "subtitle": "Trésor"
+                "className": "",
+                "frameUrl": "https://tu-delft-heritage.github.io/campus-atlas/",
+                "thumbnail": "https://dlc.services/iiif-img/7/4/e85579cc-ddc7-4fab-bd3c-0884f48d1e6b/full/1000,/0/default.jpg",
+                "title": "Campus Atlas",
+                "subtitle": "Allmaps",
+                "type": "App",
+                "frameLabel": "Campus Atlas",
+                "frameDescription": "Explore the history of the campus through a collection of maps, plans and photographs.",
+                "dark": false,
+                "small": false,
+                "unfiltered": false,
+                "backgroundImage": "https://dlc.services/thumbs/7/4/e85579cc-ddc7-4fab-bd3c-0884f48d1e6b/full/full/0/default.jpg",
+                "backgroundColor": "bg-blue-500"
               }
             },
             {
-              "id": "sskd4d",
-              "type": "ExhibitionBox",
+              "id": "ayp06m",
+              "type": "CollectionBox",
               "data": {
-                "type": "exhibition",
-                "title": "Novices",
-                "link": "/exhibitions/novieten",
-                "backgroundImage": "https://dlc.services/thumbs/7/21/e16c7a6b-9672-d551-70d7-08c88609efb1/full/400,/0/default.jpg",
-                "backgroundColor": "bg-yellow-400",
-                "subtitle": "DVSV"
+                "type": "collection",
+                "title": "Reuzenarbeid",
+                "link": "/collections/lib-tresor-reuzenarbeid",
+                "subtitle": "Trésor",
+                "backgroundImage": "https://dlc.services/thumbs/7/6/261f1de9-e515-4d11-bc08-3c15516d50f7/full/full/0/default.jpg",
+                "backgroundColor": "bg-yellow-400"
               }
             }
           ]

diff --git a/apps/static-site/slots/@locale/nl/homepage.json b/apps/static-site/slots/@locale/nl/homepage.json
@@ -20,44 +20,51 @@
           "slot_id": "gridItems",
           "blocks": [
             {
-              "id": "7230r",
+              "id": "srl2d",
               "type": "PublicationBox",
               "data": {
                 "type": "publication",
-                "title": "The Shared History of TU Delft and Bandung Institute of Technology",
-                "link": "/publications/tu-itb",
-                "subtitle": "Abel Streefland",
-                "backgroundImage": "https://dlc.services/thumbs/7/20/76ac865a-099b-43ca-9040-74872c687fff/full/full/0/default.jpg",
-                "backgroundColor": "bg-blue-500"
+                "title": "Martin Baker C-2 Ejection Seat",
+                "link": "/publications/ejection-seat",
+                "subtitle": "Cormac Duggan",
+                "backgroundImage": "https://dlc.services/thumbs/7/37/e7154d7e15c435b7341bce58bc42b9ad/full/full/0/default.jpg",
+                "backgroundColor": "bg-orange-400"
               }
             },
             {
-              "id": "gzpdof",
-              "type": "CollectionBox",
+              "id": "as4ci8",
+              "type": "FramePanel",
               "data": {
-                "type": "collection",
-                "title": "Piranesi",
-                "link": "/collections/ib-tresor-piranesi",
-                "backgroundImage": "https://apex.dlc.services/thumbs/7/6/52816b69-612d-4e55-b2bc-76aa2aa0fd5d/full/full/0/default.jpg",
-                "backgroundColor": "bg-orange-400",
-                "subtitle": "Trésor"
+                "className": "",
+                "frameUrl": "https://tu-delft-heritage.github.io/campus-atlas/",
+                "thumbnail": "https://dlc.services/iiif-img/7/4/e85579cc-ddc7-4fab-bd3c-0884f48d1e6b/full/1000,/0/default.jpg",
+                "title": "Campus Atlas",
+                "subtitle": "Allmaps",
+                "type": "App",
+                "frameLabel": "Campus Atlas",
+                "frameDescription": "Explore the historical campus through a collection of maps, plans and photographs.",
+                "dark": false,
+                "small": false,
+                "unfiltered": false,
+                "backgroundImage": "https://dlc.services/thumbs/7/4/e85579cc-ddc7-4fab-bd3c-0884f48d1e6b/full/full/0/default.jpg",
+                "backgroundColor": "bg-blue-500"
               }
             },
             {
-              "id": "sskd4d",
-              "type": "ExhibitionBox",
+              "id": "ayp06m",
+              "type": "CollectionBox",
               "data": {
-                "type": "exhibition",
-                "title": "Novieten",
-                "link": "/exhibitions/novieten",
-                "backgroundImage": "https://dlc.services/thumbs/7/21/e16c7a6b-9672-d551-70d7-08c88609efb1/full/400,/0/default.jpg",
-                "backgroundColor": "bg-yellow-400",
-                "subtitle": "DVSV"
+                "type": "collection",
+                "title": "Reuzenarbeid",
+                "link": "/collections/lib-tresor-reuzenarbeid",
+                "subtitle": "Trésor",
+                "backgroundImage": "https://dlc.services/thumbs/7/6/261f1de9-e515-4d11-bc08-3c15516d50f7/full/full/0/default.jpg",
+                "backgroundColor": "bg-yellow-400"
               }
             }
           ]
         }
       }
     }
   ]
-}
+}
diff --git a/apps/static-site/src/components/blocks/FramePanel.tsx b/apps/static-site/src/components/blocks/FramePanel.tsx
@@ -6,25 +6,71 @@ import { twMerge } from "tailwind-merge";
 import { z } from "zod";
 import { CloseIcon } from "../atoms/CloseIcon";
 
+const boxProps = z.object({
+  title: z.string().optional(),
+  subtitle: z.string().optional(),
+  type: z.string().optional(),
+  frameUrl: z.string(),
+  frameLabel: z.string(),
+  frameDescription: z.string(),
+  backgroundColor: z
+    .enum([
+      "bg-orange-500",
+      "bg-yellow-400",
+      "bg-orange-400",
+      "bg-green-500",
+      "bg-blue-500",
+      "bg-cyan-500",
+      "bg-indigo-500",
+      "bg-purple-400",
+    ])
+    .optional(),
+  fallbackBackgroundColor: z.string().optional(),
+  backgroundImage: z.string().optional(),
+  dark: z.boolean().optional(),
+  small: z.boolean().optional(),
+  unfiltered: z.boolean().optional(),
+  className: z.string().optional(),
+});
+
 export default block(
   {
-    label: "Frame panel",
-    props: z.object({
-      label: z.string().optional(),
-      description: z.string().optional(),
-      frameUrl: z.string(),
-      thumbnail: z.string(),
-      className: z.string().optional(),
-    }),
+    label: "Iframe panel",
+    props: boxProps,
   },
-  function FramePanel({ thumbnail, frameUrl, label, className, description }) {
+  function FramePanel(props: z.infer<typeof boxProps>) {
     const [isOpen, setIsOpen] = useState(false);
+    const titleSize = props.small ? "md:text-xl" : "text-2xl md:text-4xl";
+    const filters = props.unfiltered ? "" : "grayscale";
+    const fallbackBackground = props.fallbackBackgroundColor || "bg-yellow-400";
 
-    if (!thumbnail || !frameUrl) return null;
+    if (!props.frameUrl) return null;
 
     return (
-      <div className={twMerge("cut-corners bg-black text-white", className)}>
-        <img className="h-full w-full object-cover" src={thumbnail} alt="" onClick={() => setIsOpen(true)} />
+      <div className={twMerge(`cut-corners group relative flex aspect-square`, props.className)}>
+        <div
+          className={`relative z-20 cursor-pointer p-5 ${
+            props.dark ? "text-black" : "text-white"
+          } flex h-full w-full flex-col justify-between gap-3 no-underline`}
+          onClick={() => setIsOpen(true)}
+        >
+          <div className="text-md text-center font-mono uppercase">{props.type || " "}</div>
+          <div className={`mx-auto text-center ${titleSize} font-medium`}>{props.title || " "}</div>
+          <div className="text-center">{props.subtitle || " "}</div>
+        </div>
+
+        <div className={`absolute inset-0 z-10 overflow-hidden ${fallbackBackground}`}>
+          {props.backgroundImage ? (
+            <img
+              alt=""
+              className={`h-full w-full object-cover ${filters} scale-105 transition-transform duration-1000 ease-in-out group-hover:scale-110`}
+              src={props.backgroundImage}
+            />
+          ) : null}
+          {props.backgroundColor ? (
+            <div className={`absolute inset-0 mix-blend-multiply ${props.backgroundColor} pointer-events-none`}></div>
+          ) : null}
+        </div>
 
         <Dialog className="relative z-50" open={isOpen} onClose={() => setIsOpen(false)}>
           <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
@@ -39,16 +85,22 @@ export default block(
               <div className="w-full flex-1">
                 <iframe
                   className="h-full w-full border-none object-cover"
-                  src={frameUrl}
+                  src={props.frameUrl}
                   referrerPolicy="no-referrer"
                   allow="autoplay"
                   sandbox="allow-scripts allow-same-origin allow-presentation"
                 ></iframe>
               </div>
-              <div className="p-8 text-white">
-                <div className="uppercase">{label}</div>
-                <div>{description}</div>
-              </div>
+
+              <footer className="flex flex-col items-center gap-8 bg-black p-8 text-white md:min-h-32 md:flex-row">
+                <div className="flex-1">
+                  <div>{props.frameLabel}</div>
+                  <div>{props.frameDescription}</div>
+                </div>
+                <a className="underline underline-offset-4" href={props.frameUrl} target="_blank">
+                  Open in new window
+                </a>
+              </footer>
             </Dialog.Panel>
           </div>
         </Dialog>