diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index dcdd0ecf..febbaeed 100644 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -235,7 +235,7 @@ const Navbar = ({ >
Home - Articles + {/* Topics */} Toolbox {/* Jobs */} Topics diff --git a/components/Navbar/NavbarApp.js b/components/Navbar/NavbarApp.js index 719e35ec..e0b3a8cb 100644 --- a/components/Navbar/NavbarApp.js +++ b/components/Navbar/NavbarApp.js @@ -216,7 +216,7 @@ const Navbar = ({ >
Home - Articles + {/* Topics */} Toolbox {/* Jobs */} Topics diff --git a/components/Navbar/parts/MenuItems.jsx b/components/Navbar/parts/MenuItems.jsx index 028d7a8b..e29dc6bc 100644 --- a/components/Navbar/parts/MenuItems.jsx +++ b/components/Navbar/parts/MenuItems.jsx @@ -466,9 +466,9 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => { {/* */} - + {/* {title1} */} - Articles + Topics event.preventDefault()} @@ -482,26 +482,26 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => { {submenuDesc1} - + {submenuDesc2} {submenuDesc3} {submenuDesc4} - + {submenuDesc5} {submenuDesc6} diff --git a/components/Navbar/parts/MenuItemsApp.js b/components/Navbar/parts/MenuItemsApp.js index e8576133..cbcdb9b4 100644 --- a/components/Navbar/parts/MenuItemsApp.js +++ b/components/Navbar/parts/MenuItemsApp.js @@ -475,9 +475,9 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => { {/* */} - + {/* {title1} */} - Articles + Topics event.preventDefault()} @@ -491,26 +491,26 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => { {submenuDesc1} - + {submenuDesc2} {submenuDesc3} {submenuDesc4} - + {submenuDesc5} {submenuDesc6} diff --git a/components/Settings/topicsSubscription.js b/components/Settings/topicsSubscription.js index 3ebe32e4..4a03eabf 100644 --- a/components/Settings/topicsSubscription.js +++ b/components/Settings/topicsSubscription.js @@ -12,39 +12,39 @@ const supabase = createClient( const tags = [ { name: "Accessibility", - link: "/posts/accessibility/page/1", + link: "/topic/accessibility/page/1", }, { name: "AI", - link: "/posts/ai/page/1", + link: "/topic/ai/page/1", }, { name: "Open Source", - link: "/posts/open-source/page/1", + link: "/topic/open-source/page/1", }, { name: "Branding", - link: "/posts/branding/page/1", + link: "/topic/branding/page/1", }, { name: "UI", - link: "/posts/ui/page/1", + link: "/topic/ui/page/1", }, { name: "Figma", - link: "/posts/figma/page/1", + link: "/topic/figma/page/1", }, { name: "User Research", - link: "/posts/user-research/page/1", + link: "/topic/user-research/page/1", }, { name: "Notion", - link: "/posts/notion/page/1", + link: "/topic/notion/page/1", }, { name: "Web Monetization", - link: "/posts/web-monetization/page/1", + link: "/topic/web-monetization/page/1", }, ]; diff --git a/components/icons/index.js b/components/icons/index.js index 378ac39c..25efbfa8 100644 --- a/components/icons/index.js +++ b/components/icons/index.js @@ -897,3 +897,33 @@ export const PenLineSimple = ({ size, className, color }) => { ); }; + +export const FireIcon = ({ size, className, color }) => { + return ( + + + + ); +}; + +export const ToolboxIcon = ({ size, className, color }) => { + return ( + + + + ); +}; diff --git a/components/landing-pages/components/common/header.js b/components/landing-pages/components/common/header.js index f353b65c..940ae857 100644 --- a/components/landing-pages/components/common/header.js +++ b/components/landing-pages/components/common/header.js @@ -116,7 +116,7 @@ const Header = ({collapsed, hideLocaleSwitcher, editor, showWriteButton}) => { >
Home - Articles + Topics Toolbox People {/* Jobs */} diff --git a/components/sub-nav.js b/components/sub-nav.js index ccdc7c0f..90f8c48e 100644 --- a/components/sub-nav.js +++ b/components/sub-nav.js @@ -442,22 +442,22 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => { > - + {submenuTitle4} - + {submenuTitle3} - + {submenuTitle2} - + {submenuTitle5} @@ -473,31 +473,31 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => { {submenuDesc1} {submenuDesc2} {submenuDesc3} {submenuDesc4} {submenuDesc5} {submenuDesc6} diff --git a/components/v4/card/.ToolCard.js.swp b/components/v4/card/.ToolCard.js.swp new file mode 100644 index 00000000..03edfdfd Binary files /dev/null and b/components/v4/card/.ToolCard.js.swp differ diff --git a/components/v4/card/CategoriesIconCard.js b/components/v4/card/CategoriesIconCard.js index 7be151ad..29b73598 100644 --- a/components/v4/card/CategoriesIconCard.js +++ b/components/v4/card/CategoriesIconCard.js @@ -12,7 +12,7 @@ const CategoriesIconCard = ({ topic, withBackground, showCount }) => { return (
{ plausible("toolIconCard", { props: { diff --git a/components/v4/card/SmallCard/MediumPost.js b/components/v4/card/SmallCard/MediumPost.js index c8b14b9c..b52ce5a8 100644 --- a/components/v4/card/SmallCard/MediumPost.js +++ b/components/v4/card/SmallCard/MediumPost.js @@ -4,12 +4,29 @@ import Avatar from "../../avatar/AvatarLine"; import SmallTag from "../../tag/SmallTag"; import gumletLoader from "@/components/new-index/gumletLoader"; -const MediumPost = ({post,showAuthor,showDescription,link, title, image, tags, date, avatar, author, excerpt, imageSmall, imageVSmall, imageHeight}) => { +const MediumPost = ({ + post, + showAuthor, + showDescription, + link, + title, + image, + tags, + date, + avatar, + author, + excerpt, + imageSmall, + imageVSmall, + imageHeight, +}) => { return (
{image && post?.attributes?.base64 ? ( -
- +
+ - -
- -

- {title} -

- - {showDescription!==false? -
- {/*

{excerpt}

*/} - :null} - - {showAuthor!==false?
- -
:null} -
-
+
+
+
{tags?.length ? tags.slice(0, 2).map((tag, index) => { - //2 long tags make break the layout, so remove word 'design' - let name = tag?.attributes?.name?.replace('-', ' ') + //2 long tags make break the layout, so remove word 'design' + let name = tag?.attributes?.name?.replace("-", " "); return ( <> - {tag?.attributes?.slug? - {name} - :null} + {tag?.attributes?.slug ? ( + + {name} + + ) : null} ); }) : ""}
+ +

+ {title} +

+ + {showDescription !== false ? ( + +
+ {/*

{excerpt}

*/} + + ) : null} + +
+ {showAuthor !== false ? ( +
+ +
+ ) : null}
); diff --git a/components/v4/card/SmallCard/NewsCard.js b/components/v4/card/SmallCard/NewsCard.js new file mode 100644 index 00000000..4d476272 --- /dev/null +++ b/components/v4/card/SmallCard/NewsCard.js @@ -0,0 +1,62 @@ +import Image from "next/image"; +import Link from "next/link"; +import Avatar from "../../avatar/AvatarLine"; +// import SmallTag from "../../tag/SmallTag"; +import gumletLoader from "@/components/new-index/gumletLoader"; + +const NewsCard = ({link, title, image, tags, date, avatar, author, content, excerpt }) => { + return ( +
+ +
+
+ {/*
+ {tags?.length + ? tags.slice(0, 2).map((tag, index) => { + //2 long tags make break the layout, so remove word 'design' + let name = tag.attributes?.name.replace('-', ' ') + return ( + + {name} + + ); + }) + : ""} +
*/} + +

+ {title} +

+ +
+
+
+ +
+ +
+
+
+ {image ? ( +
+ + {title} + +
+ ) : ( + "" + )} +
+ ); +}; +export default NewsCard; diff --git a/components/v4/card/ToolBackgroundCard.js b/components/v4/card/ToolBackgroundCard.js index 662c59a4..6fe76bc8 100644 --- a/components/v4/card/ToolBackgroundCard.js +++ b/components/v4/card/ToolBackgroundCard.js @@ -59,7 +59,7 @@ const ToolBackgroundCard = ({
-
+
{/*
*/}
@@ -73,7 +73,7 @@ const ToolBackgroundCard = ({ // data-src={coverImage} src={logo} /> -
+
{title}
{/* {this.props.prototool !== true && */} {post.postType == "ad" ? ( diff --git a/components/v4/card/TopicsCloudCard.js b/components/v4/card/TopicsCloudCard.js index cf525082..aee93315 100644 --- a/components/v4/card/TopicsCloudCard.js +++ b/components/v4/card/TopicsCloudCard.js @@ -2,39 +2,39 @@ import BigTag from "@/components/v4/tag/BigTag"; const tags = [ { name: "Accessibility", - link: "/posts/accessibility/page/1", + link: "/topic/accessibility/page/1", }, { name: "AI", - link: "/posts/ai/page/1", + link: "/topic/ai/page/1", }, { name: "Open Source", - link: "/posts/open-source/page/1", + link: "/topic/open-source/page/1", }, { name: "Branding", - link: "/posts/branding/page/1", + link: "/topic/branding/page/1", }, { name: "UI", - link: "/posts/ui/page/1", + link: "/topic/ui/page/1", }, { name: "Figma", - link: "/posts/figma/page/1", + link: "/topic/figma/page/1", }, { name: "User Research", - link: "/posts/user-research/page/1", + link: "/topic/user-research/page/1", }, { name: "Notion", - link: "/posts/notion/page/1", + link: "/topic/notion/page/1", }, { name: "Web Monetization", - link: "/posts/web-monetization/page/1", + link: "/topic/web-monetization/page/1", }, ]; diff --git a/components/v4/layout/CardColumn.js b/components/v4/layout/CardColumn.js index 91ceb301..217668c9 100644 --- a/components/v4/layout/CardColumn.js +++ b/components/v4/layout/CardColumn.js @@ -16,7 +16,7 @@ const CardColumn = ({ return (
{/* */} {showHeader !== false && ( diff --git a/components/v4/layout/HeroPostGrid.js b/components/v4/layout/HeroPostGrid.js index e7d60b7c..b320060a 100644 --- a/components/v4/layout/HeroPostGrid.js +++ b/components/v4/layout/HeroPostGrid.js @@ -18,6 +18,7 @@ const HeroPostGrid = ({ maxPosts, show2PostRow, imageDimensions, + tools, textDimensions, }) => { let url = largePost?.attributes?.featuredImage?.data?.attributes?.url; diff --git a/components/v4/layout/LargePostGridC.js b/components/v4/layout/LargePostGridC.js index 4039112b..12fca49a 100644 --- a/components/v4/layout/LargePostGridC.js +++ b/components/v4/layout/LargePostGridC.js @@ -28,10 +28,10 @@ const LargePostGridC = ({ largePost, smallPosts, tools,showHeading, slug, headin
- See all + See all
- +
diff --git a/components/v4/layout/NewsColumn.js b/components/v4/layout/NewsColumn.js index 21fd3a66..0e95e3e2 100644 --- a/components/v4/layout/NewsColumn.js +++ b/components/v4/layout/NewsColumn.js @@ -10,6 +10,8 @@ const NewsColumn = ({ groupedNewsPosts, showHeader, sponsor, + headline, + showBeta, }) => { const renderPosts = posts => posts.map((post, index) => { @@ -32,10 +34,10 @@ const NewsColumn = ({ className="group relative flex hover:bg-gray-50 transition transition-all duration-400" >

@@ -115,9 +117,7 @@ const NewsColumn = ({ }); return ( -
+
{/* */} {showHeader !== false && (
@@ -127,15 +127,25 @@ const NewsColumn = ({ {/*
*/} -

- {title ? title : <>News Explorer} +

+ {headline ? headline : title ? title : <>News Explorer}

- - Beta - + {showBeta !== false ? ( + + Beta + + ) : null}
-
Selected by humans.
+ {showBeta !== false ? ( +
+ Prototypr News Explorer +
+ ) : null + //
Selected by humans.
+ }
@@ -162,8 +172,12 @@ const NewsColumn = ({ */}
)} -
-
+
+
{["today", "yesterday", "thisWeek", "lastWeek", "lastMonth"].map( group => { let formattedGroup = group.replace("last", "last "); @@ -236,7 +250,9 @@ const NewsColumn = ({
); })} */} -
+ {showBeta !== false ? ( +
+ ) : null}
); diff --git a/components/v4/layout/PostNewsGroup3.js b/components/v4/layout/PostNewsGroup3.js new file mode 100644 index 00000000..c7301cd4 --- /dev/null +++ b/components/v4/layout/PostNewsGroup3.js @@ -0,0 +1,145 @@ +// import PrototyprNetworkCTA2 from "@/components/Sidebar/NetworkCTA2"; +import MediumPost from "../card/SmallCard/MediumPost"; +import NewsCard from "../card/SmallCard/NewsCard"; +import Link from "next/link"; +import { ArrowRight ,ToolboxIcon} from "@/components/icons"; +import NewsColumn from "./NewsColumn"; +import ToolIconCard from "../card/ToolIconCard"; + +const dummyAvatar = + "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png"; +// import SingleFancyCard from "./SingleFancyCard"; + +const PostsNewsGroup3 = ({ tagName,tag,posts, cols, showDescription, news,groupedNewsPosts, headline, tools, pageNo }) => { + return ( +
+ {/* */} + {news?.length ? ( +
+
+
+ +
+ +
+ ) : null} + {/* {tools?.length + ? +
+ {tools?.length && tools.map((item, index) => { + item = item?.attributes ? item?.attributes : null; + return ; + })} +
+ : ""} */} + {/* */} + {posts?.length + ? posts.map((post, index) => { + let url = post?.attributes?.featuredImage?.data?.attributes?.url + ? post?.attributes?.featuredImage?.data?.attributes?.url + : null; + + const coverImage = url + ? url + : post?.attributes?.legacyFeaturedImage?.mediaItemUrl + ? post?.attributes?.legacyFeaturedImage?.mediaItemUrl + : null; + let authorData = post?.attributes?.author?.data?.attributes + ? post?.attributes?.author?.data?.attributes + : null; + let avatar = authorData?.avatar?.data + ? authorData?.avatar?.data?.attributes?.url + : authorData?.legacyAvatar + ? authorData?.legacyAvatar + : dummyAvatar; + return ( +
+ +
+ ); + }) + : ""} + {(pageNo>1 && tools?.length) ? ( +
+
+
+
+ +
+

+ {tagName} Toolbox +

+ {/*
+ Handpicked every week +
*/} +
+
+
+
+
+ +
+ +
+ +
+
+
+
+ {tools?.length && + tools.map((item, index) => { + item = item?.attributes ? item?.attributes : null; + return ( + + ); + })} +
+
+ ) : null} +
+ ); +}; +export default PostsNewsGroup3; diff --git a/components/v4/layout/TopicsGridHome.js b/components/v4/layout/TopicsGridHome.js index 5f401755..efa85e76 100644 --- a/components/v4/layout/TopicsGridHome.js +++ b/components/v4/layout/TopicsGridHome.js @@ -28,7 +28,7 @@ const TopicsGridHome = ({ largePost, smallPosts, tools,showHeading, slug, headin
- See all + See all
diff --git a/components/v4/particles/dummyData/dummyData.js b/components/v4/particles/dummyData/dummyData.js index 9bbd8523..cad19751 100644 --- a/components/v4/particles/dummyData/dummyData.js +++ b/components/v4/particles/dummyData/dummyData.js @@ -7,7 +7,7 @@ export const dummyData = }, { src:'/static/particles/topics/box.png', - slug:'/posts/ui/page/1', + slug:'/topic/ui/page/1', position:{x:50, y:26}, topic:true }, @@ -33,7 +33,7 @@ export const dummyData = }, { src:'/static/particles/topics/accessibility.png', - slug:'/posts/accessibility/page/1', + slug:'/topic/accessibility/page/1', position:{x:70, y:25}, topic:true }, @@ -50,7 +50,7 @@ export const dummyData = { src:'/static/particles/topics/swatches.png', - slug:'/posts/branding/page/1', + slug:'/topic/branding/page/1', position:{x:76, y:89}, topic:true }, @@ -76,7 +76,7 @@ export const dummyData = }, { src:'/static/particles/topics/arrow.png', - slug:'/posts/product-design/page/1', + slug:'/topic/product-design/page/1', position:{x:59, y:42}, topic:true }, @@ -92,7 +92,7 @@ export const dummyData = }, { src:'/static/particles/topics/ai.png', - slug:'/posts/ai/page/1', + slug:'/topic/ai/page/1', position:{x:88, y:6}, topic:true }, @@ -104,7 +104,7 @@ export const dummyData = }, { src:'/static/particles/topics/github.png', - slug:'/posts/open-source/page/1', + slug:'/topic/open-source/page/1', position:{x:98, y:60}, topic:true }, @@ -116,7 +116,7 @@ export const dummyData = }, { src:'/static/particles/topics/localization.png', - slug:'/posts/localization/page/1', + slug:'/topic/localization/page/1', position:{x:55, y:69}, topic:true }, @@ -128,7 +128,7 @@ export const dummyData = }, { src:'/static/particles/topics/twitter.png', - slug:'/posts/social-media/page/1', + slug:'/topic/social-media/page/1', position:{x:78, y:48}, topic:true }, @@ -144,7 +144,7 @@ export const dummyData = }, { src:'/static/particles/topics/brain.png', - slug:'/posts/behavioural-design/page/1', + slug:'/topic/behavioural-design/page/1', position:{x:45, y:56}, topic:true }, diff --git a/components/v4/particles/dummyData/dummyDataB.js b/components/v4/particles/dummyData/dummyDataB.js index f33a0ffb..12482ee6 100644 --- a/components/v4/particles/dummyData/dummyDataB.js +++ b/components/v4/particles/dummyData/dummyDataB.js @@ -14,7 +14,7 @@ export const dummyData = }, { src:'/static/particles/topics/plain/box.png', - slug:'/posts/ui/page/1', + slug:'/topic/ui/page/1', position:{x:0, y:66}, topic:true, size:{min:16, max:18}, @@ -66,7 +66,7 @@ export const dummyData = }, { src:'/static/particles/topics/plain/accessibility.png', - slug:'/posts/accessibility/page/1', + slug:'/topic/accessibility/page/1', position:{x:20, y:70}, topic:true, size:{min:16, max:18}, @@ -97,7 +97,7 @@ export const dummyData = { src:'/static/particles/topics/plain/swatches.png', - slug:'/posts/branding/page/1', + slug:'/topic/branding/page/1', position:{x:66, y:79}, topic:true, size:{min:16, max:18}, @@ -124,7 +124,7 @@ export const dummyData = }, { src:'/static/particles/topics/plain/arrow.png', - slug:'/posts/product-design/page/1', + slug:'/topic/product-design/page/1', position:{x:45, y:44}, topic:true, size:{min:16, max:18}, @@ -141,7 +141,7 @@ export const dummyData = }, { src:'/static/particles/topics/plain/ai.png', - slug:'/posts/ai/page/1', + slug:'/topic/ai/page/1', size:{min:16, max:18}, position:{x:84, y:10}, topic:true @@ -154,7 +154,7 @@ export const dummyData = }, { src:'/static/particles/topics/plain/github.png', - slug:'/posts/open-source/page/1', + slug:'/topic/open-source/page/1', position:{x:98, y:60}, topic:true, size:{min:16, max:18}, @@ -167,7 +167,7 @@ export const dummyData = }, { src:'/static/particles/topics/plain/localization.png', - slug:'/posts/localization/page/1', + slug:'/topic/localization/page/1', position:{x:40, y:69}, topic:true, size:{min:16, max:18}, @@ -180,7 +180,7 @@ export const dummyData = }, // { // src:'/static/particles/topics/plain/twitter.png', - // slug:'/posts/social-media/page/1', + // slug:'/topic/social-media/page/1', // position:{x:68, y:48}, // topic:true // }, @@ -196,7 +196,7 @@ export const dummyData = }, { src:'/static/particles/topics/plain/brain.png', - slug:'/posts/behavioural-design/page/1', + slug:'/topic/behavioural-design/page/1', position:{x:25, y:46}, topic:true, size:{min:16, max:18}, diff --git a/components/v4/section/PostSectionHeroWithNews.js b/components/v4/section/PostSectionHeroWithNews.js new file mode 100644 index 00000000..9f5746f1 --- /dev/null +++ b/components/v4/section/PostSectionHeroWithNews.js @@ -0,0 +1,138 @@ +// import SidebarDiscover from "@/components/v4/layout/SidebarDiscover"; +import Container from "@/components/container"; +// import PostsGridHero from "@/components/v4/layout/PostsGridHero"; +import SectionDivider from "./SectionDivider"; +import HeroPostGrid from "../layout/HeroPostGrid"; +// import NewsColumn from "../layout/NewsColumn"; +import PostsNewsGroup3 from "../layout/PostNewsGroup3"; + +import { FireIcon } from "@/components/icons"; + +const PostsSectionHeroWithNews = ({ + user, + heroCardPost, + toolsList, + showHeroTitle, + groupSlice, + viewablePosts, + showTags, + title, + showRecent, + showTitle, + news, + headline, + groupedNewsPosts, + tagName, + tools, + pageNo, + tag, +}) => { + return ( + + {showRecent ? ( + <> + {/*
*/} +
+
+ {/* */} + {/* */} + + {/*
*/} +
+
+ +
+ + {/* */} +
+ + {/* */} + {/* */} +
+
+ + + ) : ( +
+
+
+ {showTitle !== false && ( +
+ {/* */} +
+ )} +
+ + + {tagName} News +
+ } + news={news} + tag={tag} + tagName={tagName} + groupedNewsPosts={groupedNewsPosts} + tools={tools} + /> +
+ {/* */} +
+ )} + + {/* {showTags && +
+ +
+ } */} + + ); +}; + +export default PostsSectionHeroWithNews; diff --git a/components/v4/section/PostsSectionHero.js b/components/v4/section/PostsSectionHero.js index c968c8a4..1fc6b9bb 100644 --- a/components/v4/section/PostsSectionHero.js +++ b/components/v4/section/PostsSectionHero.js @@ -5,34 +5,58 @@ import PostsGroup3Cards from "../layout/PostsGroup3Cards"; import SectionDivider from "./SectionDivider"; import HeroPostGrid from "../layout/HeroPostGrid"; -const PostsSectionHero = ({user, heroCardPost,toolsList,showHeroTitle,groupSlice, viewablePosts, showTags,title, showRecent,showTitle }) => { +const PostsSectionHero = ({ + user, + heroCardPost, + toolsList, + showHeroTitle, + groupSlice, + viewablePosts, + showTags, + title, + showRecent, + showTitle, +}) => { return ( - {showRecent ? - <> - {/*
*/} -
-
- {/* */} - {/* */} - - {/*
*/} -
-
- -
- - {/* + {/*
*/} +
+
+ {/* */} + {/* */} + + {/*
*/} +
+
+ +
+ + {/* */} -
- - {/* + + {/* */} - {/* */} + {/* */}
-
- - - : - -
-
-
- {showTitle!==false && -
- {/* */} -
- } +
+ + + ) : ( +
+
+
+ {showTitle !== false && ( +
+ {/* */} +
+ )}
- -
- {/* +
+ {/* */} -
- } - +
+ )} - {/* {showTags && + {/* {showTags &&
} */} - ); }; diff --git a/components/v4/section/TagsNavRow.js b/components/v4/section/TagsNavRow.js index 17198034..c2b1c2f9 100644 --- a/components/v4/section/TagsNavRow.js +++ b/components/v4/section/TagsNavRow.js @@ -3,79 +3,79 @@ import GiantTag from "../tag/GiantTag"; import {Compass} from '@/components/icons' import { useEffect, useState } from "react"; -const tags = [ +const tags = (path)=>[ { name: "Accessibility", - link: "/posts/accessibility/page/1", + link: `/${path?path:'topic'}/accessibility/page/1`, slug:"accessibility" }, { name: "AI", - link: "/posts/ai/page/1", + link: `/${path?path:'topic'}/ai/page/1`, slug:"ai" }, { name: "Branding", - link: "/posts/branding/page/1", + link: `/${path?path:'topic'}/branding/page/1`, slug:"branding" }, { name: "Figma", - link: "/posts/figma/page/1", + link: `/${path?path:'topic'}/figma/page/1`, slug:"figma" }, { name: "Notion", - link: "/posts/notion/page/1", + link: `/${path?path:'topic'}/notion/page/1`, slug:"notion" }, { name: "Interview", - link: "/posts/interview/page/1", + link: `/${path?path:'topic'}/interview/page/1`, slug:"interview" }, { name: "Open Source", - link: "/posts/open-source/page/1", + link: `/${path?path:'topic'}/open-source/page/1`, slug:"open-source" }, { name: "Psychology", - link: "/posts/design-psychology/page/1", + link: `/${path?path:'topic'}/design-psychology/page/1`, slug:"psychology" }, { name: "UI", - link: "/posts/ui/page/1", + link: `/${path?path:'topic'}/ui/page/1`, slug:"ui" }, { name: "UX", - link: "/posts/ux/page/1", + link: `/${path?path:'topic'}/ux/page/1`, slug:"ux" }, { name: "User Research", - link: "/posts/user-research/page/1", + link: `/${path?path:'topic'}/user-research/page/1`, slug:"user-research" }, // { // name: "Web Monetization", - // link: "/posts/web-monetization/page/1", + // link: `/${path?path:'topic'}/web-monetization/page/1`, // }, { name: "Career", - link: "/posts/career/page/1", + link: `/${path?path:'topic'}/career/page/1`, slug:"career" }, ]; -const TagsNavRow = ({currentPage, activeTag}) => { +const TagsNavRow = ({currentPage, activeTag, path}) => { - const [orderedTags, setOrderedTags] = useState(tags) + const [orderedTags, setOrderedTags] = useState(()=>tags(path)) useEffect(()=>{ - let reordered = orderTags(tags, activeTag) + let reordered = orderTags(tags(path), activeTag, path) setOrderedTags(reordered) },[activeTag, currentPage]) @@ -99,7 +99,7 @@ const TagsNavRow = ({currentPage, activeTag}) => { export default TagsNavRow; //function to order the tags array with the active tag first -const orderTags = (tags, activeTag) => { +const orderTags = (tags, activeTag, path) => { let taglies = [...tags] if(!activeTag) return tags; let activeTagIndex = taglies.findIndex((tag) => tag?.slug == activeTag); @@ -108,7 +108,7 @@ const orderTags = (tags, activeTag) => { //create tag if it doesn't exist in the tags array if(!activeTagObject){ const name = activeTag.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" "); - activeTagObject = {name:name, link:`/posts/${activeTag}/page/1`, slug:activeTag} + activeTagObject = {name:name, link:`/${path?path:'topic'}/${activeTag}/page/1`, slug:activeTag} } taglies.splice(activeTagIndex, 1); taglies.unshift(activeTagObject); diff --git a/components/v4/section/TopicIndexSection.js b/components/v4/section/TopicIndexSection.js index 462912a2..5b0ba7d1 100644 --- a/components/v4/section/TopicIndexSection.js +++ b/components/v4/section/TopicIndexSection.js @@ -34,7 +34,7 @@ const TopicIndexSection = ({index,user, heroCardPost, viewablePosts, jobsSidebar
- See all + See all
diff --git a/components/v4/tag/GiantTag.js b/components/v4/tag/GiantTag.js index 987490cd..4b6a6c91 100644 --- a/components/v4/tag/GiantTag.js +++ b/components/v4/tag/GiantTag.js @@ -13,7 +13,7 @@ const GiantTag = ({ link, children, index, active, classes }) => {
+ ) : ( + "" + )} + {/* todo show loading state above */} + + +