posts archives

Prototypr · Jan 31, 2024 · 8821102 · 8821102
1 parent 521d19e
commit 8821102
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 14 deletions.
diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx
@@ -175,8 +175,10 @@ const Navbar = ({
         >
           <div className="space-y-1 px-2 pt-2 pb-3">
             <MobileActiveLink href={"/"}>Home</MobileActiveLink>
+            <MobileActiveLink href={"/posts"}>Articles</MobileActiveLink>
             <MobileActiveLink href={"/toolbox"}>Toolbox</MobileActiveLink>
-            <MobileActiveLink href={"/jobs"}>Opportunities</MobileActiveLink>
+            <MobileActiveLink href={"/jobs"}>Jobs</MobileActiveLink>
+            <MobileActiveLink href={"/topics"}>Topics</MobileActiveLink>
             <MobileActiveLink href={"/people"}>People</MobileActiveLink>
             {/* <MobileActiveLink href={"/web-monetization"}>
               Earn Micropayments

diff --git a/components/landing-pages/components/common/header.js b/components/landing-pages/components/common/header.js
@@ -110,8 +110,9 @@ const Header = ({collapsed, hideLocaleSwitcher, editor, showWriteButton}) => {
             >
               <div className="space-y-1 px-2 pt-2 pb-3">
                 <MobileActiveLink href={"/"}>Home</MobileActiveLink>
+                <MobileActiveLink href={"/posts"}>Articles</MobileActiveLink>
                 <MobileActiveLink href={"/toolbox"}>Toolbox</MobileActiveLink>
-                <MobileActiveLink href={"/jobs"}>Opportunities</MobileActiveLink>
+                <MobileActiveLink href={"/jobs"}>Jobs</MobileActiveLink>
                 {/* <MobileActiveLink href={"/web-monetization"}>
                   Earn Micropayments
                 </MobileActiveLink> */}

diff --git a/components/v4/card/SmallCard/MediumPost.js b/components/v4/card/SmallCard/MediumPost.js
@@ -4,7 +4,7 @@ import Avatar from "../../avatar/AvatarLine";
 import SmallTag from "../../tag/SmallTag";
 import gumletLoader from "@/components/new-index/gumletLoader";
 
-const MediumPost = ({link, title, image, tags, date, avatar, author }) => {
+const MediumPost = ({link, title, image, tags, date, avatar, author, excerpt }) => {
   return (
     <div className="flex h-full sm:mt-0 flex-col hover:bg-white transition transition-all duration-300 p-4 bg-white shadow-md rounded-2xl font-inter w-full">
       {image ? (
@@ -30,9 +30,12 @@ const MediumPost = ({link, title, image, tags, date, avatar, author }) => {
               {title}
             </h2>
           </Link>
+          <Link href={link??''}>
+            <p className="my-3 text-gray-600 line-clamp-2">{excerpt}</p>
+          </Link>
 
-        <div className="mt-2">
-          <Avatar src={avatar} author={author} date={date} size="sm" />
+        <div className="mt-3 mb-0.5">
+          <Avatar src={avatar} author={author} date={date} size="lg" />
         </div>
         </div>
         <div className="flex mt-3 text-xs">

diff --git a/components/v4/card/SmallCard/SmallCardPost.js b/components/v4/card/SmallCard/SmallCardPost.js
@@ -4,7 +4,7 @@ import Avatar from "../../avatar/AvatarLine";
 import SmallTag from "../../tag/SmallTag";
 import gumletLoader from "@/components/new-index/gumletLoader";
 
-const SmallCard = ({link, title, image, tags, date, avatar, author }) => {
+const SmallCard = ({link, title, image, tags, date, avatar, author, excerpt }) => {
   return (
     <div className="flex mt-3 sm:mt-0 flex-col sm:flex-row hover:bg-white transition transition-all duration-300 p-1 rounded-2xl font-inter w-full">
       {image ? (
@@ -46,6 +46,10 @@ const SmallCard = ({link, title, image, tags, date, avatar, author }) => {
               {title}
             </h2>
           </Link>
+
+          <Link href={link??''}>
+            <p className="mt-3 text-gray-600 mb-3 line-clamp-2">{excerpt}</p>
+          </Link>
 
         <div className="mt-2">
           <Avatar src={avatar} author={author} date={date} size="sm" />

diff --git a/components/v4/layout/LargePostGridC.js b/components/v4/layout/LargePostGridC.js
@@ -25,8 +25,8 @@ const LargePostGridC = ({ largePost, smallPosts, tools,showHeading, slug, headin
         <div className="w-full lg:w-8/12 md:p-6">
            {showHeading!==false?<div className="flex w-full justify-between mb-6">
             <div className="flex">
-              <Tag className="my-auto mr-3" size={32}/>
-              <h2 className="text-3xl capitalize font-semibold text-gray-900">
+              <Tag className="hidden md:inline-block my-auto mr-3" size={32}/>
+              <h2 className="text-xl md:text-3xl capitalize font-semibold text-gray-900">
                 {heading}
               </h2>
             </div>

diff --git a/components/v4/layout/PostsGridHero.js b/components/v4/layout/PostsGridHero.js
@@ -24,6 +24,7 @@ const PostsGridHero = ({ largePost, smallPosts, showHeading,title }) => {
     <div className="flex flex-col lg:flex-row justify-between max-w-[1320px]">
       <div className="w-full lg:w-1/2 md:pr-6">
         <BigCardPost
+          showHeading={false}
           link={`/post/${largePost?.attributes?.slug}`}
           avatar={largePostAvatar}
           excerpt={largePost?.attributes?.excerpt}
@@ -34,7 +35,7 @@ const PostsGridHero = ({ largePost, smallPosts, showHeading,title }) => {
           tags={largePost?.attributes?.tags?.data}
         />
       </div>
-        <SmallPostsGroup2Cards smallPosts={smallPosts?.slice(0,2)}/>
+        <SmallPostsGroup2Cards smallPosts={smallPosts?.slice(0,2)} />
     </div>
     {/* rows of 3 */}
     </>

diff --git a/components/v4/layout/PostsGroup3Cards.js b/components/v4/layout/PostsGroup3Cards.js
@@ -26,6 +26,7 @@ const PostsGroup3Cards = ({posts}) =>{
                   image={coverImage}
                   date={post?.attributes?.date}
                   title={post?.attributes?.title}
+                  excerpt={post?.attributes?.excerpt}
                   tags={post?.attributes?.tags?.data}
                 />
               </div>

diff --git a/components/v4/layout/SmallPostsGroup2Cards.js b/components/v4/layout/SmallPostsGroup2Cards.js
@@ -22,6 +22,7 @@ const SmallPostsGroup2Cards = ({smallPosts}) =>{
                 <SmallCardPost
                   link={`/post/${post?.attributes?.slug}`}
                   avatar={avatar}
+                  excerpt={post?.attributes?.excerpt}
                   author={post?.attributes?.author?.data?.attributes}
                   image={coverImage}
                   date={post?.attributes?.date}

diff --git a/components/v4/section/PostsSectionHero.js b/components/v4/section/PostsSectionHero.js
@@ -5,15 +5,18 @@ import PostsGroup3Cards from "../layout/PostsGroup3Cards";
 import RSSTitle from "../text/RSSTitle";
 import SectionDivider from "./SectionDivider";
 import TagsNavRow from "./TagsNavRow";
+import {CaretRight} from 'phosphor-react'
+import ToolIconCard from "../card/ToolIconCard";
+import Link from 'next/link'
 // import {RssSimple} from 'phosphor-react'
-const PostsSectionHero = ({user, heroCardPost, viewablePosts, showTags,title, showRecent,showTitle }) => {
+const PostsSectionHero = ({user, heroCardPost,toolsList,showHeroTitle, viewablePosts, showTags,title, showRecent,showTitle }) => {
   return (
     <Container maxWidth="max-w-[1320px]">
       {showRecent && 
       <>
         <div className="w-full shadow-md h-full grid grid-cols-12 flex justify-center bg-white rounded-3xl p-6 mt-6 lg:p-6">
-            <div className={`w-full max-w-full flex flex-col gap-2 col-span-12 `}>
-            <PostsGridHero title={title} largePost={heroCardPost} smallPosts={viewablePosts} />
+            <div className={`w-full max-w-full flex flex-col col-span-12 `}>
+            <PostsGridHero title={title} largePost={heroCardPost} showHeading={showHeroTitle!==false} smallPosts={viewablePosts} />
             </div>
         </div>
         <SectionDivider py="py-4" transparentLine={true}/>
@@ -41,6 +44,7 @@ const PostsSectionHero = ({user, heroCardPost, viewablePosts, showTags,title, sh
           content={jobsSidebar}
         /> */}
       </div>
+
     </Container>
   );
 };

diff --git a/pages/posts/[tag]/page/[pageNo].js b/pages/posts/[tag]/page/[pageNo].js
@@ -22,9 +22,12 @@ import { transformPostList } from "@/lib/locale/transformLocale";
 // import { SIDEBAR_STICKY_OFFSET } from "@/lib/constants";
 // import TopicSection from "@/components/v4/section/TopicSection";
 import { makeAuthorList, shuffleArray } from "@/lib/utils/postUtils";
-import { Tag } from "phosphor-react/dist";
+import { ArrowRight } from "phosphor-react/dist";
+import Link from 'next/link'
 import PostsSectionHero from "@/components/v4/section/PostsSectionHero";
-import TagsNavRow from "@/components/v4/section/TagsNavRow";
+// import TagsNavRow from "@/components/v4/section/TagsNavRow";
+import SectionDivider from "@/components/v4/section/SectionDivider";
+import ToolIconCard from "@/components/v4/card/ToolIconCard";
 // import SmallPostsGroup from "@/components/v4/layout/SmallPostsSection";
 // import Image from "next/image";
 // const Aspiring = dynamic(() => import("@/components/new-index/Aspiring"));
@@ -117,18 +120,21 @@ export default function PostsPage({
                 pagination.page && pagination.page == 1 ? (
                     morePosts.length > 0 &&  <PostsSectionHero
                     user={user}
+                    showHeroTitle={false}
                     showTags={true}
                     title={tagName}
                     heroCardPost={allPosts[0]}
                     viewablePosts={allPosts?.slice(1)}
                     showRecent={true}
+                    toolsList={tools?.slice(0, 4)}
                   />
 
                 ): (
                     allPosts.length > 0 && 
                     <div className="pt-4">
                       <PostsSectionHero
                         user={user}
+                        toolsList={tools?.slice(0, 4)}
                         showTags={false}
                         showTitle={false}
                         // heroCardPost={heroPost}
@@ -149,6 +155,51 @@ export default function PostsPage({
             }}
           />
 
+{tools?.length>3 ?
+              <>
+              <SectionDivider py="py-12" transparentLine={false}/>
+
+                <Container padding={false} maxWidth="mb-3 px-6 max-w-[1320px] mx-auto rounded-2xl w-full relative">
+                  <div className="">
+                    <div className="flex justify-between mb-8">
+                      <h3 className="font-medium capitalize text-2xl ">
+                      Related {tagName} Tools
+                      </h3>
+                      <div className="my-auto">
+                        <div className="flex relative">
+                        <div className="text-md inline text-gray-800 font-normal font-inter">
+                        <Link href={`/toolbox`}>See all</Link>
+                        </div>
+                        <div className="my-auto">
+                          <Link href={`/toolbox`}>
+                            <div className="bg-blue-100 outline outline-1 outline-blue-300/50 ml-2.5 flex justify-center my-auto h-6 w-6 rounded-full">
+                                <ArrowRight weight="bold" size={14} className="text-blue-900 my-auto"/>
+                            </div>
+                          </Link>
+                        </div>
+                      </div>
+                    </div>
+                    </div>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-8">
+                      {tools.map((tool, index) => {
+
+                        if(index<4){
+                          return (
+                            <div key={index}>
+                              <ToolIconCard withBackground={true} tool={tool?.attributes} />
+                            </div>
+                          );
+                        }
+                      })}
+                    </div>
+              </div>
+              {/* <img src="/static/images/angleshape.svg" className="absolute -mb-[80px] w-full bottom-0 z-10 left-0"/> */}
+
+                </Container>
+              <SectionDivider transparentLine={true}/>
+              </>:''
+            }
+
 {/* <TagsNavRow/> */}