Skip to content

Commit 2b5ac3a

Browse files
maanasb01maanasb01
authored
fix: increase blog page width for large screens (#265)
* fix: increase blog page width for large screens * fix: use tailwind to improve blog page responsiveness
1 parent 0771527 commit 2b5ac3a

File tree

3 files changed

+133
-152
lines changed

3 files changed

+133
-152
lines changed

‎src/components/BlogSidebar.jsx‎

Lines changed: 47 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,69 @@
1-
import React from 'react';
2-
import { Box, Heading, Text, ResponsiveContext } from 'grommet';
3-
import { GatsbyImage } from 'gatsby-plugin-image';
4-
import { PlainLink } from './atomic/TattleLinks';
5-
1+
import React from "react"
2+
import { Box, Heading, Text } from "grommet"
3+
import { GatsbyImage } from "gatsby-plugin-image"
4+
import { PlainLink } from "./atomic/TattleLinks"
65

76
const RelatedPostItem = ({ post }) => (
87
<Box
9-
margin={{ bottom: 'small' }}
10-
border={{ color: 'light-4', size: 'xsmall', side: 'bottom' }}
11-
pad={{ bottom: 'xsmall' }}
8+
margin={{ bottom: "small" }}
9+
border={{ color: "light-4", size: "xsmall", side: "bottom" }}
10+
pad={{ bottom: "xsmall" }}
1211
>
1312
<PlainLink to={`/blog/${post.slug}`}>
1413
{post.coverImage && (
15-
<Box margin={{ bottom: 'xsmall' }} height="130px" overflow="hidden">
14+
<Box
15+
margin={{ bottom: "xsmall" }}
16+
overflow="hidden"
17+
className="w-full flex justify-center"
18+
>
1619
<GatsbyImage
1720
image={post.coverImage}
1821
alt={post.title || "Related post"}
19-
className="rounded w-full h-full object-cover"
22+
className="rounded max-w-[80%] self-center object-cover"
2023
/>
2124
</Box>
2225
)}
23-
<Heading
24-
level={5}
25-
margin={{ bottom: 'xsmall' }}
26-
className="font-[Bitter] text-[0.9rem] leading-[1.3]"
27-
>
28-
{post.title}
29-
</Heading>
26+
<Box className="w-full flex justify-center ">
27+
<Text margin={{ bottom: "xsmall" }} size="small">
28+
{post.title}
29+
</Text>
30+
</Box>
3031
</PlainLink>
3132
{post.excerpt && (
32-
<Text
33-
size="small"
34-
color="dark-3"
35-
className="line-clamp-3"
36-
>
33+
<Text size="xsmall" color="dark-3" className="line-clamp-3 lg:text-start">
3734
{post.excerpt}
3835
</Text>
3936
)}
4037
</Box>
41-
);
38+
)
4239

4340
const BlogSidebar = ({ relatedPosts }) => {
4441
return (
45-
<ResponsiveContext.Consumer>
46-
{(size) => {
47-
const isMobile = size === "small";
48-
const isLarge = size === "large" || size === "xlarge";
49-
50-
return (
51-
<Box
52-
pad={isMobile ? "small" : isLarge ? "medium" : "medium"}
53-
background="visuals-two"
54-
round="small"
55-
elevation="small"
56-
width="100%"
57-
margin={isMobile ? { top: "medium" } : "40px"}
58-
>
59-
<Heading
60-
level={4}
61-
margin={{ bottom: isLarge ? "medium" : "small" }}
62-
className={`font-[Bitter] text-center ${isLarge ? "text-[1.2rem]" : ""}`}
63-
>
64-
Related Posts
65-
</Heading>
66-
67-
<Box direction="column" gap={isLarge ? "medium" : "small"}>
68-
{relatedPosts.length > 0 ? (
69-
relatedPosts.map((post) => (
70-
<RelatedPostItem key={post.id} post={post} />
71-
))
72-
) : (
73-
<Text size={isLarge ? "medium" : "small"} color="dark-3" className="text-center">
74-
No related posts found
75-
</Text>
76-
)}
77-
</Box>
78-
</Box>
79-
);
80-
}}
81-
</ResponsiveContext.Consumer>
82-
);
83-
};
42+
<Box
43+
pad={"medium"}
44+
background="visuals-two"
45+
round="small"
46+
elevation="small"
47+
width="100%"
48+
className="mt-10 lg:mt-0 lg:ml-10 w-full text-center flex flex-col"
49+
>
50+
<Heading level={3} className={`w-full text-center mx-auto`}>
51+
Related Posts
52+
</Heading>
53+
54+
<Box className=" flex flex-col w-full">
55+
{relatedPosts.length > 0 ? (
56+
relatedPosts.map((post) => (
57+
<RelatedPostItem key={post.id} post={post} />
58+
))
59+
) : (
60+
<Text color="dark-3" className="text-center">
61+
No related posts found
62+
</Text>
63+
)}
64+
</Box>
65+
</Box>
66+
)
67+
}
8468

85-
export default BlogSidebar;
69+
export default BlogSidebar

‎src/components/atomic/layout/narrow-content-wrapper.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
1-
import React, { useContext } from "react"
1+
import React, { useContext, useEffect, useState } from "react"
22
import { Box, ResponsiveContext } from "grommet"
3+
import { useLocation } from "@reach/router"
34
/**
45
* @author
56
* @function NarrowSection
67
**/
78

89
const NarrowContentWrapper = ({ children, justify, width, ...props }) => {
910
const size = useContext(ResponsiveContext)
11+
const location = useLocation()
12+
const [defaultLargeWidth, setDefaultLargeWidth] = useState("960px")
13+
14+
useEffect(() => {
15+
// Set default width for large screen size to 65% only for the blog pages
16+
if (location.pathname.includes("/blog/")) {
17+
setDefaultLargeWidth("65%")
18+
}
19+
}, [location])
20+
1021
const Section = () => (
1122
<Box
12-
width={width ? width : "960px"}
23+
width={width ? width : defaultLargeWidth}
1324
alignSelf={"center"}
1425
flex={"grow"}
1526
justify={justify ? justify : "start"}

‎src/components/default-blog-layout.js‎

Lines changed: 73 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,102 @@
1-
import React, { useState, useEffect } from "react";
2-
import { graphql } from "gatsby";
3-
import { Box, ResponsiveContext } from "grommet";
4-
import { MDXProvider } from "@mdx-js/react";
5-
import { Link } from "gatsby";
6-
import { primaryNav, footerItems } from "../config/options";
7-
import AppShell from "./atomic/AppShell";
8-
import BlogHeaderCard from "./atomic/BlogHeaderCard";
9-
import { PlainLink } from "./atomic/TattleLinks";
10-
import { Heading } from "grommet";
11-
import { useLocation } from "@reach/router";
12-
import CustomCodeBlock from "./atomic/customCodeBlock";
13-
import InlineCodeBlock from "./atomic/inlineCodeBlock";
14-
import useBlogTags from "../hooks/useBlogTags";
15-
import BlogSidebar from "./BlogSidebar";
16-
import { projectSlugMaker } from "../lib/project-slug-maker";
17-
import TagsRenderer from "./TagsRenderer";
18-
import { getSrc, getImage } from "gatsby-plugin-image";
1+
import React, { useState, useEffect } from "react"
2+
import { graphql } from "gatsby"
3+
import { Box, ResponsiveContext } from "grommet"
4+
import { MDXProvider } from "@mdx-js/react"
5+
import { Link } from "gatsby"
6+
import { primaryNav, footerItems } from "../config/options"
7+
import AppShell from "./atomic/AppShell"
8+
import BlogHeaderCard from "./atomic/BlogHeaderCard"
9+
import { PlainLink } from "./atomic/TattleLinks"
10+
import { Heading } from "grommet"
11+
import { useLocation } from "@reach/router"
12+
import CustomCodeBlock from "./atomic/customCodeBlock"
13+
import InlineCodeBlock from "./atomic/inlineCodeBlock"
14+
import useBlogTags from "../hooks/useBlogTags"
15+
import BlogSidebar from "./BlogSidebar"
16+
import { projectSlugMaker } from "../lib/project-slug-maker"
17+
import TagsRenderer from "./TagsRenderer"
18+
import { getSrc, getImage } from "gatsby-plugin-image"
1919

2020
const shortcodes = {
2121
Link,
2222
BlogHeaderCard,
2323
code: (props) => <CustomCodeBlock {...props} />,
2424
inlineCode: (props) => <InlineCodeBlock {...props} />,
25-
};
25+
}
2626

27-
export default function PageTemplate({ data: { mdx }, pageContext: { blogNodes = [] }, children }) {
28-
const { tagCounts, projectTagsCounts } = useBlogTags();
29-
const { name, author, project, date, excerpt, cover } = mdx.frontmatter;
27+
export default function PageTemplate({
28+
data: { mdx },
29+
pageContext: { blogNodes = [] },
30+
children,
31+
}) {
32+
const { tagCounts, projectTagsCounts } = useBlogTags()
33+
const { name, author, project, date, excerpt, cover } = mdx.frontmatter
3034
const tags = mdx.frontmatter.tags
3135
? mdx.frontmatter.tags.split(",").map((tag) => tag.trim())
32-
: [];
36+
: []
3337

34-
const location = useLocation();
35-
const [label, setLabel] = useState("");
38+
const location = useLocation()
39+
const [label, setLabel] = useState("")
3640

3741
useEffect(() => {
38-
setLabel(location.pathname.split("/")[1]);
39-
}, [location]);
42+
setLabel(location.pathname.split("/")[1])
43+
}, [location])
4044

41-
4245
const findRelatedPosts = () => {
4346
// If no tags, return 5 most recent posts
4447
if (!blogNodes.length) {
45-
return [];
48+
return []
4649
}
4750
if (!tags.length) {
4851
return blogNodes
49-
.filter(node => node.id !== mdx.id)
50-
.sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date))
52+
.filter((node) => node.id !== mdx.id)
53+
.sort(
54+
(a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date)
55+
)
5156
.slice(0, 5)
52-
.map(post => ({
57+
.map((post) => ({
5358
id: post.id,
5459
title: post.frontmatter.name,
5560
slug: post.fields.slug,
56-
coverImage: post.frontmatter.cover ? getImage(post.frontmatter.cover) : null,
61+
coverImage: post.frontmatter.cover
62+
? getImage(post.frontmatter.cover)
63+
: null,
5764
excerpt: post.frontmatter.excerpt,
5865
matchingTags: [],
59-
relevanceScore: 0
60-
}));
66+
relevanceScore: 0,
67+
}))
6168
}
62-
69+
6370
const postsWithRelevance = blogNodes
64-
.filter(node => node.id !== mdx.id)
65-
.map(post => {
71+
.filter((node) => node.id !== mdx.id)
72+
.map((post) => {
6673
const postTags = post.frontmatter.tags
67-
? post.frontmatter.tags.split(",").map(tag => tag.trim())
68-
: [];
69-
70-
const matchingTags = tags.filter(tag => postTags.includes(tag));
71-
72-
const coverImage = post.frontmatter.cover
73-
? getImage(post.frontmatter.cover)
74-
: null;
75-
74+
? post.frontmatter.tags.split(",").map((tag) => tag.trim())
75+
: []
76+
77+
const matchingTags = tags.filter((tag) => postTags.includes(tag))
78+
79+
const coverImage = post.frontmatter.cover
80+
? getImage(post.frontmatter.cover)
81+
: null
82+
7683
return {
7784
id: post.id,
7885
title: post.frontmatter.name,
7986
slug: post.fields.slug,
8087
coverImage: coverImage,
8188
excerpt: post.frontmatter.excerpt,
8289
matchingTags: matchingTags,
83-
relevanceScore: matchingTags.length
84-
};
90+
relevanceScore: matchingTags.length,
91+
}
8592
})
86-
.filter(post => post.relevanceScore > 0)
87-
.sort((a, b) => b.relevanceScore - a.relevanceScore);
88-
89-
return postsWithRelevance.slice(0, 5);
90-
};
93+
.filter((post) => post.relevanceScore > 0)
94+
.sort((a, b) => b.relevanceScore - a.relevanceScore)
9195

92-
const relatedPosts = findRelatedPosts();
96+
return postsWithRelevance.slice(0, 5)
97+
}
98+
99+
const relatedPosts = findRelatedPosts()
93100

94101
return (
95102
<AppShell
@@ -112,7 +119,7 @@ export default function PageTemplate({ data: { mdx }, pageContext: { blogNodes =
112119
<Heading level={4}>back to all blogs</Heading>
113120
</PlainLink>
114121
</Box>
115-
122+
116123
<Box>
117124
<BlogHeaderCard
118125
name={name}
@@ -141,40 +148,19 @@ export default function PageTemplate({ data: { mdx }, pageContext: { blogNodes =
141148
)}
142149
</Box>
143150
</Box>
144-
<ResponsiveContext.Consumer>
145-
{size => {
146-
const isLarge = size === "large" || size === "xlarge";
147-
return (
148-
<Box
149-
direction={size === "small" ? "column" : "row"}
150-
gap={isLarge ? "xlarge" : "medium"}
151-
align="start"
152-
153-
>
154-
{/* Main Content */}
155-
<Box
156-
flex={true}
157-
width={size === "small" ? "100%" : undefined}
158-
159-
>
160-
{children}
161-
</Box>
162151

163-
{/* Sidebar Section */}
164-
<Box
165-
width={size === "small" ? "100%" : isLarge ? "320px" : "390px"}
166-
167-
flex={false}
168-
>
169-
<BlogSidebar relatedPosts={relatedPosts} />
152+
<Box align="start" className="flex flex-col lg:flex-row">
153+
{/* Main Content */}
154+
<Box flex={true}>{children}</Box>
155+
156+
{/* Sidebar Section */}
157+
<Box className="text-center w-full lg:w-[35%] flex">
158+
<BlogSidebar relatedPosts={relatedPosts} />
159+
</Box>
170160
</Box>
171-
</Box>
172-
);
173-
}}
174-
</ResponsiveContext.Consumer>
175161
</MDXProvider>
176162
</AppShell>
177-
);
163+
)
178164
}
179165

180166
export const pageQuery = graphql`
@@ -200,4 +186,4 @@ export const pageQuery = graphql`
200186
}
201187
}
202188
}
203-
`;
189+
`

0 commit comments

Comments
 (0)