Skip to content

Commit

Permalink
blog page
Browse files Browse the repository at this point in the history
  • Loading branch information
GraemeFulton committed Feb 12, 2024
1 parent 86cb716 commit cb53c1b
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 29 deletions.
2 changes: 1 addition & 1 deletion components/authorBio.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
52 changes: 31 additions & 21 deletions lib/removeFirstImage.js
Original file line number Diff line number Diff line change
@@ -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
12 changes: 9 additions & 3 deletions pages/post/[slug].js
Original file line number Diff line number Diff line change
Expand Up @@ -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 &&
Expand Down Expand Up @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -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">

Expand Down
13 changes: 9 additions & 4 deletions styles/posts-page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ figure, pre{
font-size:20px;
font-family:"Inter", serif!important;
}
strong{
strong,b{
font-weight: 600;
}
a:not(.headline){
Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand Down

0 comments on commit cb53c1b

Please sign in to comment.