From 5a3b835b5f2884bc4776bb75799d50c8d90f4179 Mon Sep 17 00:00:00 2001 From: Hunain Date: Mon, 9 Sep 2024 02:50:13 +0500 Subject: [PATCH 1/7] initial commit: redesign blog landing page --- docusaurus.config.ts | 2 +- package.json | 1 + src/css/custom.css | 25 ++++ src/theme/BlogLayout/categories.tsx | 33 +++++ src/theme/BlogLayout/customblogitem.tsx | 46 +++++++ src/theme/BlogLayout/featured.tsx | 22 ++++ src/theme/BlogLayout/index.tsx | 154 +++++++++++++++++++++--- src/utils/index.ts | 17 +++ 8 files changed, 285 insertions(+), 15 deletions(-) create mode 100644 src/theme/BlogLayout/categories.tsx create mode 100644 src/theme/BlogLayout/customblogitem.tsx create mode 100644 src/theme/BlogLayout/featured.tsx diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 40af9d9a2b..d1099e5052 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -220,7 +220,7 @@ export default { routeBasePath: "blog", include: ["**/*.{md,mdx}"], exclude: ["**/_*.{js,jsx,ts,tsx,md,mdx}", "**/_*/**", "**/*.test.{js,jsx,ts,tsx}", "**/__tests__/**"], - postsPerPage: 10, + postsPerPage: 'ALL', blogListComponent: "@theme/BlogListPage", blogPostComponent: "@theme/BlogPostPage", blogTagsListComponent: "@theme/BlogTagsListPage", diff --git a/package.json b/package.json index 7d4bed23c1..be399c6995 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "react-hot-toast": "^2.4.1", "react-on-screen": "^2.1.1", "react-platform-js": "^0.0.1", + "react-tabs-scrollable": "^2.0.7", "tailwindcss": "^3.4.4" }, "devDependencies": { diff --git a/src/css/custom.css b/src/css/custom.css index 4f5004ecfe..44d5e1165a 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -681,3 +681,28 @@ span.token.tag.script.language-javascript { .pagination-nav a:nth-child(2) { @apply justify-end; } + +.rts___tab { + border: none !important; + border-radius: 0px !important; +} + +.rts___btn { + background: transparent !important; + border: none !important; +} + +.rts___tab___selected { + border-bottom: 2px solid black !important; + background: transparent !important; + color: black !important; + box-shadow: none !important; +} + +.rts___svg___icon:hover { + stroke: black !important; +} + +button[disabled] { + display: none !important; +} diff --git a/src/theme/BlogLayout/categories.tsx b/src/theme/BlogLayout/categories.tsx new file mode 100644 index 0000000000..1c8665137e --- /dev/null +++ b/src/theme/BlogLayout/categories.tsx @@ -0,0 +1,33 @@ +import {useState} from "react" +import {Tab, Tabs} from "react-tabs-scrollable" +import "react-tabs-scrollable/dist/rts.css" + +export default function Categories(props: any): JSX.Element { + const {tags, activeTag, setActiveTag} = props + + // define state with initial value to let the tabs start with that value + const [activeTab, setActiveTab] = useState(0) + + // define a onClick function to bind the value on tab click + const onTabClick = (e, index) => { + setActiveTab(index) + setActiveTag(tags[index]) + } + + return ( + <> + + {/* generating an array to loop through it */} + {tags.map((name) => ( + {name} + ))} + + + ) +} diff --git a/src/theme/BlogLayout/customblogitem.tsx b/src/theme/BlogLayout/customblogitem.tsx new file mode 100644 index 0000000000..f12f16368c --- /dev/null +++ b/src/theme/BlogLayout/customblogitem.tsx @@ -0,0 +1,46 @@ +import {dateformatter, limitApplier} from "@site/src/utils" + +export default function BlogItemCustom(props) { + const {title, authors, ismobile, main, link, image, date} = props + + console.log(props) + + return ( + title && ( +
+ {(!ismobile || main) && ( + + + + )} +

{dateformatter(date)}

+ +
{authors?.map((info) => )}
+
+ ) + ) +} + +export const AuthorInfo = ({url, image_url, name}) => ( + +
+ +

{name}

+
+ +) + +export const BlogIntro = ({title, description, main, link}) => { + const [ttlLimit, descLimit] = main ? [50, 150] : [48, 70] + return ( + <> + +

{limitApplier(title, ttlLimit)}

+ +

{limitApplier(description, descLimit)}

+ + ) +} diff --git a/src/theme/BlogLayout/featured.tsx b/src/theme/BlogLayout/featured.tsx new file mode 100644 index 0000000000..50ff0c4b9b --- /dev/null +++ b/src/theme/BlogLayout/featured.tsx @@ -0,0 +1,22 @@ +import {AuthorInfo, BlogIntro} from "./customblogitem" + +export default function Featured({items}) { + return ( +
+

Featured Posts

+ {items?.slice(0, 6).map((item) => )} +
+ ) +} + +const FeaturedItem = (props) => { + return ( +
+ + +
+ ) +} diff --git a/src/theme/BlogLayout/index.tsx b/src/theme/BlogLayout/index.tsx index 400fcb4b68..5d5b13d312 100644 --- a/src/theme/BlogLayout/index.tsx +++ b/src/theme/BlogLayout/index.tsx @@ -1,29 +1,155 @@ -import React from "react" +import React, {useEffect, useState} from "react" import clsx from "clsx" import Layout from "@theme/Layout" import BlogRecentPosts from "../BlogRecentPosts" import type {Props} from "@theme/BlogLayout" +import Categories from "./categories" +import LinkButton from "@site/src/components/shared/LinkButton" +import {Theme} from "@site/src/constants" +import Featured from "./featured" +import BlogItemCustom from "./customblogitem" export default function BlogLayout(props: Props): JSX.Element { const {sidebar, toc, children, ...layoutProps} = props const hasSidebar = sidebar && sidebar.items.length > 0 + const [tags, setTags] = useState([]) + const [activeTag, setActiveTag] = useState("All") + const [mainPage, setMainPage] = useState(false) + const [loadmore, setloadmore] = useState(false) + const [ismobile, setismobile] = useState(false) + const [allBlogs, setAllBlogs] = useState({}) + const [featuredBlogsState, setFeaturedBlogs] = useState([]) + + useEffect(() => { + if (!children[0].props?.items) { + //return if its not the home page + return + } else { + setMainPage(true) + } + + console.log(children, sidebar) + + //initialize the setup + tagsSetup(children[0].props.items) + }, [children]) + + // code to maintain responsiveness + useEffect(() => { + window.addEventListener("resize", updateMobileState) + updateMobileState() + }, [window]) + + const updateMobileState = () => { + setismobile(window.innerWidth <= 650) + } + + // end mobile control + + //this one is often called in parallel for each blog + const blogProcessor = async (blog, tagOccurances) => { + return new Promise((resolve) => { + //now the logic + let tagsOfThis = blog.frontMatter.tags || [] + let isFeatured = false + let polishedBlog = blogInfoGather(blog) + + tagsOfThis.forEach((tag) => { + if (tag === "Featured") { + //save as featured + isFeatured = true + } else { + // good luck figuring this out :) + tagOccurances[tag] = { + occurances: tagOccurances[tag]?.occurances + 1 || 1, + blogs: [polishedBlog, ...(tagOccurances[tag]?.blogs || [])], + } + } + }) + + //now, add it to the 'All' tag + tagOccurances["All"] = { + occurances: tagOccurances["All"]?.occurances + 1 || 1, + blogs: [polishedBlog, ...(tagOccurances["All"]?.blogs || [])], + } + + resolve(isFeatured ? polishedBlog : undefined) + }) + } + + //this is the parent function + const tagsSetup = async (allblogs) => { + //get all the tags first + // let tagOccurances = {tag: {occurances: 5, blogs: []}, } + let tagOccurances: any = {} + + //process each blog in parallel, it also reaturns the featured posts + let featuredBlogs = await Promise.all(allblogs.map(({content}) => blogProcessor(content, tagOccurances))) + //unfortunately, it also sends undefineds + featuredBlogs = featuredBlogs.filter((b) => b !== undefined) + + //now update the states + + setTags(["All", ...Object.keys(tagOccurances)]) + setAllBlogs(tagOccurances) + setFeaturedBlogs(featuredBlogs) + } + + //this one extracts usefull data from the frontmatter jargon + const blogInfoGather = (rawInfo) => { + return {...rawInfo.frontMatter, date: rawInfo.metadata.date, link: rawInfo.metadata.permalink} + } + + // return ( -
-
-
+
- {children} -
- {toc &&
{toc}
} -
-
- +
+ +
+ +
+
+ {allBlogs[activeTag]?.blogs.slice(1, 7).map((blog) => )} + {loadmore && + allBlogs[activeTag]?.blogs.slice(7).map((blog) => )} +
+ {!loadmore && allBlogs[activeTag]?.blogs.length > 6 && ( + setloadmore(true)} /> + )} +
+ {toc &&
{toc}
} +
+ {!ismobile && } + + + ) : ( + <> +
+
+
+ {children} +
+ {toc &&
{toc}
} +
+
+ + + )} ) } diff --git a/src/utils/index.ts b/src/utils/index.ts index f1f22ef712..23b7053cca 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -33,3 +33,20 @@ export const isValidURL = (url: string) => { return false } } + +export const limitApplier = (string: string, limit: number) => { + if (string?.length > limit) { + return string.substr(0, limit) + "..." + } else { + return string + } +} + +export const dateformatter = (date: string) => { + let dateobj = new Date(date) + return dateobj.toLocaleDateString("en-US", { + year: "numeric", + month: "long", + day: "numeric", + }) +} From 755987dd041bde33fc48423e2c48b39279e7b647 Mon Sep 17 00:00:00 2001 From: Hunain Date: Mon, 9 Sep 2024 21:05:38 +0500 Subject: [PATCH 2/7] clean and fix format --- src/theme/BlogLayout/customblogitem.tsx | 2 -- src/theme/BlogLayout/index.tsx | 2 -- 2 files changed, 4 deletions(-) diff --git a/src/theme/BlogLayout/customblogitem.tsx b/src/theme/BlogLayout/customblogitem.tsx index f12f16368c..3973bdd7cd 100644 --- a/src/theme/BlogLayout/customblogitem.tsx +++ b/src/theme/BlogLayout/customblogitem.tsx @@ -3,8 +3,6 @@ import {dateformatter, limitApplier} from "@site/src/utils" export default function BlogItemCustom(props) { const {title, authors, ismobile, main, link, image, date} = props - console.log(props) - return ( title && (
Date: Mon, 9 Sep 2024 21:16:48 +0500 Subject: [PATCH 3/7] fix spelling --- src/theme/BlogLayout/index.tsx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/theme/BlogLayout/index.tsx b/src/theme/BlogLayout/index.tsx index ff9ce5d5ea..d39a228e53 100644 --- a/src/theme/BlogLayout/index.tsx +++ b/src/theme/BlogLayout/index.tsx @@ -45,7 +45,7 @@ export default function BlogLayout(props: Props): JSX.Element { // end mobile control //this one is often called in parallel for each blog - const blogProcessor = async (blog, tagOccurances) => { + const blogProcessor = async (blog, tagOccurences) => { return new Promise((resolve) => { //now the logic let tagsOfThis = blog.frontMatter.tags || [] @@ -58,17 +58,17 @@ export default function BlogLayout(props: Props): JSX.Element { isFeatured = true } else { // good luck figuring this out :) - tagOccurances[tag] = { - occurances: tagOccurances[tag]?.occurances + 1 || 1, - blogs: [polishedBlog, ...(tagOccurances[tag]?.blogs || [])], + tagOccurences[tag] = { + occurences: tagOccurences[tag]?.occurences + 1 || 1, + blogs: [polishedBlog, ...(tagOccurences[tag]?.blogs || [])], } } }) //now, add it to the 'All' tag - tagOccurances["All"] = { - occurances: tagOccurances["All"]?.occurances + 1 || 1, - blogs: [polishedBlog, ...(tagOccurances["All"]?.blogs || [])], + tagOccurences["All"] = { + occurences: tagOccurences["All"]?.occurences + 1 || 1, + blogs: [polishedBlog, ...(tagOccurences["All"]?.blogs || [])], } resolve(isFeatured ? polishedBlog : undefined) @@ -78,22 +78,22 @@ export default function BlogLayout(props: Props): JSX.Element { //this is the parent function const tagsSetup = async (allblogs) => { //get all the tags first - // let tagOccurances = {tag: {occurances: 5, blogs: []}, } - let tagOccurances: any = {} + // let tagOccurences = {tag: {occurences: 5, blogs: []}, } + let tagOccurences: any = {} //process each blog in parallel, it also reaturns the featured posts - let featuredBlogs = await Promise.all(allblogs.map(({content}) => blogProcessor(content, tagOccurances))) + let featuredBlogs = await Promise.all(allblogs.map(({content}) => blogProcessor(content, tagOccurences))) //unfortunately, it also sends undefineds featuredBlogs = featuredBlogs.filter((b) => b !== undefined) //now update the states - setTags(["All", ...Object.keys(tagOccurances)]) - setAllBlogs(tagOccurances) + setTags(["All", ...Object.keys(tagOccurences)]) + setAllBlogs(tagOccurences) setFeaturedBlogs(featuredBlogs) } - //this one extracts usefull data from the frontmatter jargon + //this one extracts useful data from the frontmatter jargon const blogInfoGather = (rawInfo) => { return {...rawInfo.frontMatter, date: rawInfo.metadata.date, link: rawInfo.metadata.permalink} } From 4a4171d5202dd4636ccdecf4b432fdc39c5fd6a6 Mon Sep 17 00:00:00 2001 From: Hunain Date: Mon, 9 Sep 2024 21:20:01 +0500 Subject: [PATCH 4/7] fix spelling x2 --- src/theme/BlogLayout/index.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/theme/BlogLayout/index.tsx b/src/theme/BlogLayout/index.tsx index d39a228e53..6b3cb2b287 100644 --- a/src/theme/BlogLayout/index.tsx +++ b/src/theme/BlogLayout/index.tsx @@ -45,7 +45,7 @@ export default function BlogLayout(props: Props): JSX.Element { // end mobile control //this one is often called in parallel for each blog - const blogProcessor = async (blog, tagOccurences) => { + const blogProcessor = async (blog, tagOccurrences) => { return new Promise((resolve) => { //now the logic let tagsOfThis = blog.frontMatter.tags || [] @@ -58,17 +58,17 @@ export default function BlogLayout(props: Props): JSX.Element { isFeatured = true } else { // good luck figuring this out :) - tagOccurences[tag] = { - occurences: tagOccurences[tag]?.occurences + 1 || 1, - blogs: [polishedBlog, ...(tagOccurences[tag]?.blogs || [])], + tagOccurrences[tag] = { + occurrences: tagOccurrences[tag]?.occurrences + 1 || 1, + blogs: [polishedBlog, ...(tagOccurrences[tag]?.blogs || [])], } } }) //now, add it to the 'All' tag - tagOccurences["All"] = { - occurences: tagOccurences["All"]?.occurences + 1 || 1, - blogs: [polishedBlog, ...(tagOccurences["All"]?.blogs || [])], + tagOccurrences["All"] = { + occurrences: tagOccurrences["All"]?.occurrences + 1 || 1, + blogs: [polishedBlog, ...(tagOccurrences["All"]?.blogs || [])], } resolve(isFeatured ? polishedBlog : undefined) @@ -78,18 +78,18 @@ export default function BlogLayout(props: Props): JSX.Element { //this is the parent function const tagsSetup = async (allblogs) => { //get all the tags first - // let tagOccurences = {tag: {occurences: 5, blogs: []}, } - let tagOccurences: any = {} + // let tagOccurrences = {tag: {occurrences: 5, blogs: []}, } + let tagOccurrences: any = {} //process each blog in parallel, it also reaturns the featured posts - let featuredBlogs = await Promise.all(allblogs.map(({content}) => blogProcessor(content, tagOccurences))) + let featuredBlogs = await Promise.all(allblogs.map(({content}) => blogProcessor(content, tagOccurrences))) //unfortunately, it also sends undefineds featuredBlogs = featuredBlogs.filter((b) => b !== undefined) //now update the states - setTags(["All", ...Object.keys(tagOccurences)]) - setAllBlogs(tagOccurences) + setTags(["All", ...Object.keys(tagOccurrences)]) + setAllBlogs(tagOccurrences) setFeaturedBlogs(featuredBlogs) } From 5d24833078a1ab8c9cee3fa5ea43ef88fcac0ef5 Mon Sep 17 00:00:00 2001 From: Hunain Date: Mon, 9 Sep 2024 21:22:50 +0500 Subject: [PATCH 5/7] fix formatting --- docusaurus.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index d1099e5052..9b772327c8 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -220,7 +220,7 @@ export default { routeBasePath: "blog", include: ["**/*.{md,mdx}"], exclude: ["**/_*.{js,jsx,ts,tsx,md,mdx}", "**/_*/**", "**/*.test.{js,jsx,ts,tsx}", "**/__tests__/**"], - postsPerPage: 'ALL', + postsPerPage: "ALL", blogListComponent: "@theme/BlogListPage", blogPostComponent: "@theme/BlogPostPage", blogTagsListComponent: "@theme/BlogTagsListPage", From a2720545235fc06d245f07cedbbabe4e2eef5a49 Mon Sep 17 00:00:00 2001 From: Hunain Date: Mon, 9 Sep 2024 22:00:32 +0500 Subject: [PATCH 6/7] fix ssg window not found issue --- src/theme/BlogLayout/index.tsx | 50 +++++++++++++++++++++++----------- 1 file changed, 34 insertions(+), 16 deletions(-) diff --git a/src/theme/BlogLayout/index.tsx b/src/theme/BlogLayout/index.tsx index 6b3cb2b287..74d1e399fa 100644 --- a/src/theme/BlogLayout/index.tsx +++ b/src/theme/BlogLayout/index.tsx @@ -1,16 +1,17 @@ -import React, {useEffect, useState} from "react" +import React, { useEffect, useState } from "react" import clsx from "clsx" import Layout from "@theme/Layout" import BlogRecentPosts from "../BlogRecentPosts" -import type {Props} from "@theme/BlogLayout" +import type { Props } from "@theme/BlogLayout" import Categories from "./categories" import LinkButton from "@site/src/components/shared/LinkButton" -import {Theme} from "@site/src/constants" +import { Theme } from "@site/src/constants" import Featured from "./featured" import BlogItemCustom from "./customblogitem" +import BrowserOnly from "@docusaurus/BrowserOnly" export default function BlogLayout(props: Props): JSX.Element { - const {sidebar, toc, children, ...layoutProps} = props + const { sidebar, toc, children, ...layoutProps } = props const hasSidebar = sidebar && sidebar.items.length > 0 const [tags, setTags] = useState([]) const [activeTag, setActiveTag] = useState("All") @@ -33,12 +34,9 @@ export default function BlogLayout(props: Props): JSX.Element { }, [children]) // code to maintain responsiveness - useEffect(() => { - window.addEventListener("resize", updateMobileState) - updateMobileState() - }, [window]) - const updateMobileState = () => { + + const updateMobileState = (setismobile) => { setismobile(window.innerWidth <= 650) } @@ -82,7 +80,7 @@ export default function BlogLayout(props: Props): JSX.Element { let tagOccurrences: any = {} //process each blog in parallel, it also reaturns the featured posts - let featuredBlogs = await Promise.all(allblogs.map(({content}) => blogProcessor(content, tagOccurrences))) + let featuredBlogs = await Promise.all(allblogs.map(({ content }) => blogProcessor(content, tagOccurrences))) //unfortunately, it also sends undefineds featuredBlogs = featuredBlogs.filter((b) => b !== undefined) @@ -95,9 +93,28 @@ export default function BlogLayout(props: Props): JSX.Element { //this one extracts useful data from the frontmatter jargon const blogInfoGather = (rawInfo) => { - return {...rawInfo.frontMatter, date: rawInfo.metadata.date, link: rawInfo.metadata.permalink} + return { ...rawInfo.frontMatter, date: rawInfo.metadata.date, link: rawInfo.metadata.permalink } } + const MobileStateUpdater = ({ ismobile, setismobile }) => ( +
}> + { + + + () => { + useEffect(() => { + if (!window) { + return; + } + + window.addEventListener("resize", () => (updateMobileState(setismobile))) + updateMobileState(setismobile) + }, [window]) + return (
) + } + } + + ) // return ( @@ -106,20 +123,21 @@ export default function BlogLayout(props: Props): JSX.Element { <>
+
- +
- {allBlogs[activeTag]?.blogs.slice(1, 7).map((blog) => )} + {allBlogs[activeTag]?.blogs.slice(1, 7).map((blog) => )} {loadmore && - allBlogs[activeTag]?.blogs.slice(7).map((blog) => )} + allBlogs[activeTag]?.blogs.slice(7).map((blog) => )}
{!loadmore && allBlogs[activeTag]?.blogs.length > 6 && ( setloadmore(true)} /> From e19507fe1b8ff5fbb78eaa443e5a54c11770f70b Mon Sep 17 00:00:00 2001 From: Hunain Date: Mon, 9 Sep 2024 22:04:10 +0500 Subject: [PATCH 7/7] final: fix format --- src/theme/BlogLayout/index.tsx | 49 +++++++++++++++------------------- 1 file changed, 22 insertions(+), 27 deletions(-) diff --git a/src/theme/BlogLayout/index.tsx b/src/theme/BlogLayout/index.tsx index 74d1e399fa..d035460739 100644 --- a/src/theme/BlogLayout/index.tsx +++ b/src/theme/BlogLayout/index.tsx @@ -1,17 +1,17 @@ -import React, { useEffect, useState } from "react" +import React, {useEffect, useState} from "react" import clsx from "clsx" import Layout from "@theme/Layout" import BlogRecentPosts from "../BlogRecentPosts" -import type { Props } from "@theme/BlogLayout" +import type {Props} from "@theme/BlogLayout" import Categories from "./categories" import LinkButton from "@site/src/components/shared/LinkButton" -import { Theme } from "@site/src/constants" +import {Theme} from "@site/src/constants" import Featured from "./featured" import BlogItemCustom from "./customblogitem" import BrowserOnly from "@docusaurus/BrowserOnly" export default function BlogLayout(props: Props): JSX.Element { - const { sidebar, toc, children, ...layoutProps } = props + const {sidebar, toc, children, ...layoutProps} = props const hasSidebar = sidebar && sidebar.items.length > 0 const [tags, setTags] = useState([]) const [activeTag, setActiveTag] = useState("All") @@ -35,7 +35,6 @@ export default function BlogLayout(props: Props): JSX.Element { // code to maintain responsiveness - const updateMobileState = (setismobile) => { setismobile(window.innerWidth <= 650) } @@ -80,7 +79,7 @@ export default function BlogLayout(props: Props): JSX.Element { let tagOccurrences: any = {} //process each blog in parallel, it also reaturns the featured posts - let featuredBlogs = await Promise.all(allblogs.map(({ content }) => blogProcessor(content, tagOccurrences))) + let featuredBlogs = await Promise.all(allblogs.map(({content}) => blogProcessor(content, tagOccurrences))) //unfortunately, it also sends undefineds featuredBlogs = featuredBlogs.filter((b) => b !== undefined) @@ -93,26 +92,22 @@ export default function BlogLayout(props: Props): JSX.Element { //this one extracts useful data from the frontmatter jargon const blogInfoGather = (rawInfo) => { - return { ...rawInfo.frontMatter, date: rawInfo.metadata.date, link: rawInfo.metadata.permalink } + return {...rawInfo.frontMatter, date: rawInfo.metadata.date, link: rawInfo.metadata.permalink} } - const MobileStateUpdater = ({ ismobile, setismobile }) => ( + const MobileStateUpdater = ({ismobile, setismobile}) => (
}> - { - - - () => { - useEffect(() => { - if (!window) { - return; - } + {() => { + useEffect(() => { + if (!window) { + return + } - window.addEventListener("resize", () => (updateMobileState(setismobile))) - updateMobileState(setismobile) - }, [window]) - return (
) - } - } + window.addEventListener("resize", () => updateMobileState(setismobile)) + updateMobileState(setismobile) + }, [window]) + return
+ }} ) // @@ -123,21 +118,21 @@ export default function BlogLayout(props: Props): JSX.Element { <>
- +
- {allBlogs[activeTag]?.blogs.slice(1, 7).map((blog) => )} + {allBlogs[activeTag]?.blogs.slice(1, 7).map((blog) => )} {loadmore && - allBlogs[activeTag]?.blogs.slice(7).map((blog) => )} + allBlogs[activeTag]?.blogs.slice(7).map((blog) => )}
{!loadmore && allBlogs[activeTag]?.blogs.length > 6 && ( setloadmore(true)} />