From cb53c1b90d6c07164727e9398b1857c492d1ce98 Mon Sep 17 00:00:00 2001
From: Graeme Fulton <graeme@prototypr.io>
Date: Mon, 12 Feb 2024 16:37:09 +0100
Subject: [PATCH] blog page

---
 components/authorBio.js |  2 +-
 lib/removeFirstImage.js | 52 ++++++++++++++++++++++++-----------------
 pages/post/[slug].js    | 12 +++++++---
 styles/posts-page.scss  | 13 +++++++----
 4 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/components/authorBio.js b/components/authorBio.js
index 366d0c13..adf23738 100644
--- a/components/authorBio.js
+++ b/components/authorBio.js
@@ -16,7 +16,7 @@ export default function AuthorBio({ author, slug, title }) {
         className="flex md:px-0 justify-between mx-auto"
         style={{ maxWidth: "43rem" }}
       >
-        <div className="my-auto mx-auto text-center pt-20">
+        <div className="my-auto mx-auto text-center pt-12">
           {/* <div className="w-full border-b border-gray-300 my-8" /> */}
           <div className="text-xs uppercase mb-4 mx-auto font-medium text-gray-600">
             Share to your friends
diff --git a/lib/removeFirstImage.js b/lib/removeFirstImage.js
index d9cf275a..68407ad1 100644
--- a/lib/removeFirstImage.js
+++ b/lib/removeFirstImage.js
@@ -1,37 +1,47 @@
 import { JSDOM } from 'jsdom';
 
-const removeFirstImageIfMatch = (htmlString, imageUrl)=> {
-  // Parse the HTML string with jsdom
+const removeFirstImageIfMatch = (htmlString, imageUrlToMatch) => {
   const dom = new JSDOM(htmlString);
   const document = dom.window.document;
 
+  // Parse the imageUrlToMatch to ignore query strings
+  const targetUrl = new dom.window.URL(imageUrlToMatch, 'http://example.com'); // Base URL for relative URLs
+
   // Get all image elements
   const images = document.querySelectorAll('img');
 
-  // Check if the first image matches the given URL and it's the very first element
-  if (images.length > 0 && images[0].src === imageUrl) {
-    const firstElementChild = images[0].parentNode.firstChild;
-    let isVeryFirstImage = false;
-
-    // Traverse to check if it's the very first element (ignoring text nodes, comments, etc.)
-    let currentNode = firstElementChild;
-    while (currentNode) {
-      if (currentNode.nodeType === dom.window.Node.ELEMENT_NODE) {
-        if (currentNode === images[0]) {
-          isVeryFirstImage = true;
+  if (images.length > 0) {
+    // Create a URL object from the first image's src for comparison
+    const firstImageUrl = new dom.window.URL(images[0].src, 'http://example.com'); // Same base URL for comparison
+
+    // Check if the first image matches the given URL without the query string
+    if (
+      firstImageUrl.origin === targetUrl.origin &&
+      firstImageUrl.pathname === targetUrl.pathname &&
+      images[0] === images[0].parentNode.firstChild
+    ) {
+      // Determine if the image is within a <figure> element
+      let parentElement = images[0].parentNode;
+      while (parentElement && parentElement !== document.body) {
+        if (parentElement.tagName.toLowerCase() === 'figure') {
+          // If the parent <figure> is found, remove the <figure> element
+          parentElement.parentNode.removeChild(parentElement);
+          break;
+        } else if (parentElement.parentNode) {
+          // Move up the DOM tree if no <figure> is found immediately
+          parentElement = parentElement.parentNode;
+        } else {
+          // If the image is not within a <figure>, remove just the image
+          images[0].parentNode.removeChild(images[0]);
+          break;
         }
-        break;
       }
-      currentNode = currentNode.nextSibling;
-    }
-
-    // If it's the very first image, remove it
-    if (isVeryFirstImage) {
-      images[0].parentNode.removeChild(images[0]);
     }
   }
 
   // Serialize the DOM back to a string and return it
   return dom.serialize();
-}
+};
+
+
 export default removeFirstImageIfMatch
diff --git a/pages/post/[slug].js b/pages/post/[slug].js
index ef554b44..a5ce91a6 100644
--- a/pages/post/[slug].js
+++ b/pages/post/[slug].js
@@ -81,6 +81,9 @@ export default function Post({ post, preview, relatedPosts, postContent }) {
     : post?.ogImage
     ? post?.ogImage.opengraphImage
     : "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png";
+
+    console.log(image)
+    console.log(post)
   const canonical = post?.attributes?.seo?.canonical
     ? post?.attributes?.seo?.canonical
     : post?.attributes?.slug &&
@@ -156,7 +159,7 @@ const date = post.attributes.date
       preview={preview}
     >
       <Container padding={false} maxWidth="max-w-full mx-auto -mt-[96px] bg-gray-100/20">
-        <div className="w-full h-full grid grid-cols-12 gap-1 mx-auto px-3 mx-auto">
+        <div className="w-full h-full grid grid-cols-12 gap-1 mx-auto px-3 md:px-0 mx-auto">
           {user?.isAdmin && (
             <div className="fixed bottom-0 mb-16 z-50 border border-gray-100 bg-white mr-16 right-0 p-4 rounded shadow">
               <p className="text-sm">Hi, Admin 👩‍✈️</p>
@@ -183,7 +186,7 @@ const date = post.attributes.date
 
                     <div 
                     style={{"backgroundImage":"linear-gradient(rgba(32, 52, 144,0.2) 1px, transparent 1px), linear-gradient(to right, rgba(32, 52, 144,0.2) 1px, rgba(247, 247, 247,0.2) 1px)","backgroundSize":"26px 26px"}}
-                    className="relative mx-auto w-[1301px] border-b border-r border-blue-500/10 max-w-full z-10">
+                    className="relative mx-auto w-[1301px] border-b border-b-indigo-500/30 border-r border-indigo-500/10 max-w-full z-10">
                           {!post.currentLocaleAvailable && <NoticeTranslation />}
 
                         <div className="pt-4">
@@ -223,7 +226,10 @@ const date = post.attributes.date
                       </div>
 
                       </div>
-                    <img className="border border-[3px] border-white z-20 relative -mt-[80px] max-h-[550px] w-full object-cover rounded-2xl max-w-[1050px] shadow-md border border-1 border-gray-200/80 mx-auto" src={image}/>
+                      <div className="h-[550px] w-[1020px] bg-blue-50 border border-[3px] border-white mx-auto z-30 -mt-[80px] relative rounded-2xl shadow-md outline outline-1 outline-gray-300/20 overflow-hidden">
+                        <div className="animate-pulse z-10 absolute top-0 left-0 duration-50 h-[544px] w-[1014px] bg-gray-100 mx-auto z-30 rounded-2xl"/>
+                        <Image width={1014} height={544} loader={gumletLoader} className="h-full z-20 relative h-[544px] w-full object-cover rounded-2xl max-w-[1014px] mx-auto" src={image}/>
+                      </div>
                    
                    <div className="w-full flex justify-between max-w-[1020px] mx-auto mt-6">
 
diff --git a/styles/posts-page.scss b/styles/posts-page.scss
index b3dddf79..2c3d647a 100644
--- a/styles/posts-page.scss
+++ b/styles/posts-page.scss
@@ -51,7 +51,7 @@ figure, pre{
             font-size:20px;
             font-family:"Inter", serif!important;
     }
-    strong{
+    strong,b{
         font-weight: 600;
     }
      a:not(.headline){
@@ -180,8 +180,13 @@ figure, pre{
    }
    figure img, p>img{
     border-radius:4px;
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    border: 1px solid #f8f8f8;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    border: 1px solid #efefef;
+   }
+   img[alt="decorative section divider"]{
+    border-radius:4px;
+    box-shadow:none;
+    border: 0px;
    }
    [data-card]{
     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -206,7 +211,7 @@ figure, pre{
   figcaption{
   margin-top:14px!important;
   font-size: 1rem;
-  color: #718096;
+  color: #242424b6;
   margin-top: -0.5rem;
   text-align: center;
   max-width: 40rem!important;