topics page

Prototypr · Jul 19, 2024 · 7e0f587 · 7e0f587
1 parent 5340bff
commit 7e0f587
Show file tree

Hide file tree

Showing 31 changed files with 1,253 additions and 182 deletions.
diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx
@@ -235,7 +235,7 @@ const Navbar = ({
         >
           <div className="space-y-1 px-2 pt-2 pb-3">
             <MobileActiveLink href={"/"}>Home</MobileActiveLink>
-            <MobileActiveLink href={"/posts"}>Articles</MobileActiveLink>
+            {/* <MobileActiveLink href={"/topics"}>Topics</MobileActiveLink> */}
             <MobileActiveLink href={"/toolbox"}>Toolbox</MobileActiveLink>
             {/* <MobileActiveLink href={"/jobs"}>Jobs</MobileActiveLink> */}
             <MobileActiveLink href={"/topics"}>Topics</MobileActiveLink>

diff --git a/components/Navbar/NavbarApp.js b/components/Navbar/NavbarApp.js
@@ -216,7 +216,7 @@ const Navbar = ({
         >
           <div className="space-y-1 px-2 pt-2 pb-3">
             <MobileActiveLink href={"/"}>Home</MobileActiveLink>
-            <MobileActiveLink href={"/posts"}>Articles</MobileActiveLink>
+            {/* <MobileActiveLink href={"/t"}>Topics</MobileActiveLink> */}
             <MobileActiveLink href={"/toolbox"}>Toolbox</MobileActiveLink>
             {/* <MobileActiveLink href={"/jobs"}>Jobs</MobileActiveLink> */}
             <MobileActiveLink href={"/topics"}>Topics</MobileActiveLink>

diff --git a/components/Navbar/parts/MenuItems.jsx b/components/Navbar/parts/MenuItems.jsx
@@ -466,9 +466,9 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => {
           </NavigationMenuItem>
           <NavigationMenuItem className="flex text-sm  xl:mr-2.5 flex-col justify-center">
             {/* <NavigationMenuTrigger active={activeNav === "posts"}> */}
-            <NavigationMenuTrigger href="articles">
+            <NavigationMenuTrigger href="topics">
               {/* {title1} */}
-              Articles
+              Topics
             </NavigationMenuTrigger>
             <NavigationMenuContent
               onPointerMove={event => event.preventDefault()}
@@ -482,26 +482,26 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => {
                 <ContentListItem href="/topics" title={submenuTitle1}>
                   {submenuDesc1}
                 </ContentListItem>
-                <ContentListItem href="/posts/ux/page/1" title={submenuTitle2}>
+                <ContentListItem href="/topic/ux/page/1" title={submenuTitle2}>
                   {submenuDesc2}
                 </ContentListItem>
                 <ContentListItem
-                  href="/posts/interview/page/1"
+                  href="/topic/interview/page/1"
                   title={submenuTitle3}
                 >
                   {submenuDesc3}
                 </ContentListItem>
                 <ContentListItem
-                  href="/posts/accessibility/page/1"
+                  href="/topic/accessibility/page/1"
                   title={submenuTitle4}
                 >
                   {submenuDesc4}
                 </ContentListItem>
-                <ContentListItem href="/posts/ui/page/1" title={submenuTitle5}>
+                <ContentListItem href="/topic/ui/page/1" title={submenuTitle5}>
                   {submenuDesc5}
                 </ContentListItem>
                 <ContentListItem
-                  href="/posts/code/page/1"
+                  href="/topic/code/page/1"
                   title={submenuTitle6}
                 >
                   {submenuDesc6}

diff --git a/components/Navbar/parts/MenuItemsApp.js b/components/Navbar/parts/MenuItemsApp.js
@@ -475,9 +475,9 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => {
           </NavigationMenuItem>
           <NavigationMenuItem className="flex text-sm  xl:mr-2.5 flex-col justify-center">
             {/* <NavigationMenuTrigger active={activeNav === "posts"}> */}
-            <NavigationMenuTrigger href="articles">
+            <NavigationMenuTrigger href="topics">
               {/* {title1} */}
-              Articles
+              Topics
             </NavigationMenuTrigger>
             <NavigationMenuContent
               onPointerMove={event => event.preventDefault()}
@@ -491,26 +491,26 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => {
                 <ContentListItem href="/topics" title={submenuTitle1}>
                   {submenuDesc1}
                 </ContentListItem>
-                <ContentListItem href="/posts/ux/page/1" title={submenuTitle2}>
+                <ContentListItem href="/topic/ux/page/1" title={submenuTitle2}>
                   {submenuDesc2}
                 </ContentListItem>
                 <ContentListItem
-                  href="/posts/interview/page/1"
+                  href="/topic/interview/page/1"
                   title={submenuTitle3}
                 >
                   {submenuDesc3}
                 </ContentListItem>
                 <ContentListItem
-                  href="/posts/accessibility/page/1"
+                  href="/topic/accessibility/page/1"
                   title={submenuTitle4}
                 >
                   {submenuDesc4}
                 </ContentListItem>
-                <ContentListItem href="/posts/ui/page/1" title={submenuTitle5}>
+                <ContentListItem href="/topic/ui/page/1" title={submenuTitle5}>
                   {submenuDesc5}
                 </ContentListItem>
                 <ContentListItem
-                  href="/posts/code/page/1"
+                  href="/topic/code/page/1"
                   title={submenuTitle6}
                 >
                   {submenuDesc6}

diff --git 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
@@ -897,3 +897,33 @@ export const PenLineSimple = ({ size, className, color }) => {
     </svg>
   );
 };
+
+export const FireIcon = ({ size, className, color }) => {
+  return (
+    <svg
+      className={className}
+      width={size ? size : "32"}
+      height={size ? size : "32"}
+      fill={color ? color : "currentColor"}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+    >
+      <path d="M183.89,153.34a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68ZM216,144a88,88,0,0,1-176,0c0-27.92,11-56.47,32.66-84.85a8,8,0,0,1,11.93-.89l24.12,23.41,22-60.41a8,8,0,0,1,12.63-3.41C165.21,36,216,84.55,216,144Zm-16,0c0-46.09-35.79-85.92-58.21-106.33L119.52,98.74a8,8,0,0,1-13.09,3L80.06,76.16C64.09,99.21,56,122,56,144a72,72,0,0,0,144,0Z"></path>
+    </svg>
+  );
+};
+
+export const ToolboxIcon = ({ size, className, color }) => {
+  return (
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    width={size ? size : "32"}
+    height={size ? size : "32"}
+    fill={color ? color : "currentColor"}
+    viewBox="0 0 256 256"
+    >
+      <path d="M224,64H176V56a24,24,0,0,0-24-24H104A24,24,0,0,0,80,56v8H32A16,16,0,0,0,16,80V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V80A16,16,0,0,0,224,64ZM96,56a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96ZM224,80v32H192v-8a8,8,0,0,0-16,0v8H80v-8a8,8,0,0,0-16,0v8H32V80Zm0,112H32V128H64v8a8,8,0,0,0,16,0v-8h96v8a8,8,0,0,0,16,0v-8h32v64Z"></path>
+    </svg>
+  );
+};
diff --git 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}) => {
             >
               <div className="space-y-1 px-2 pt-2 pb-3">
                 <MobileActiveLink href={"/"}>Home</MobileActiveLink>
-                <MobileActiveLink href={"/posts"}>Articles</MobileActiveLink>
+                <MobileActiveLink href={"/topics"}>Topics</MobileActiveLink>
                 <MobileActiveLink href={"/toolbox"}>Toolbox</MobileActiveLink>
                 <MobileActiveLink href={"/people"}>People</MobileActiveLink>
                 {/* <MobileActiveLink href={"/jobs"}>Jobs</MobileActiveLink> */}

diff --git a/components/sub-nav.js b/components/sub-nav.js
@@ -442,22 +442,22 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => {
         >
           <NavigationMenuList>
             <NavigationMenuItem className="hidden -ml-4 text-sm md:text-base xl:mr-2.5 md:block md:flex md:flex-col md:justify-center">
-              <NavigationMenuLink href="/posts/accessibility">
+              <NavigationMenuLink href="/topic/accessibility">
                 {submenuTitle4}
               </NavigationMenuLink>
             </NavigationMenuItem>
             <NavigationMenuItem className="hidden text-sm md:text-base xl:mr-2.5 md:block md:flex md:flex-col md:justify-center">
-              <NavigationMenuLink href="/posts/interview">
+              <NavigationMenuLink href="/topic/interview">
                 {submenuTitle3}
               </NavigationMenuLink>
             </NavigationMenuItem>
             <NavigationMenuItem className="hidden text-sm md:text-base xl:mr-2.5 md:block md:flex md:flex-col md:justify-center">
-              <NavigationMenuLink href="/posts/ux">
+              <NavigationMenuLink href="/topic/ux">
                 {submenuTitle2}
               </NavigationMenuLink>
             </NavigationMenuItem>
             <NavigationMenuItem className="hidden text-sm md:text-base xl:mr-2.5 md:block md:flex md:flex-col md:justify-center">
-              <NavigationMenuLink href="/posts/ui">
+              <NavigationMenuLink href="/topic/ui">
                 {submenuTitle5}
               </NavigationMenuLink>
             </NavigationMenuItem>
@@ -473,31 +473,31 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => {
                     {submenuDesc1}
                   </ContentListItem>
                   <ContentListItem
-                    href="/posts/ux/page/1"
+                    href="/topic/ux/page/1"
                     title={submenuTitle2}
                   >
                     {submenuDesc2}
                   </ContentListItem>
                   <ContentListItem
-                    href="/posts/interview/page/1"
+                    href="/topic/interview/page/1"
                     title={submenuTitle3}
                   >
                     {submenuDesc3}
                   </ContentListItem>
                   <ContentListItem
-                    href="/posts/accessibility/page/1"
+                    href="/topic/accessibility/page/1"
                     title={submenuTitle4}
                   >
                     {submenuDesc4}
                   </ContentListItem>
                   <ContentListItem
-                    href="/posts/ui/page/1"
+                    href="/topic/ui/page/1"
                     title={submenuTitle5}
                   >
                     {submenuDesc5}
                   </ContentListItem>
                   <ContentListItem
-                    href="/posts/code/page/1"
+                    href="/topic/code/page/1"
                     title={submenuTitle6}
                   >
                     {submenuDesc6}

diff --git a/components/v4/card/.ToolCard.js.swp b/components/v4/card/.ToolCard.js.swp
diff --git a/components/v4/card/CategoriesIconCard.js b/components/v4/card/CategoriesIconCard.js
@@ -12,7 +12,7 @@ const CategoriesIconCard = ({ topic, withBackground, showCount }) => {
   return (
     <div>
       <Link
-        href={`/posts/${topic.slug}/page/1`}
+        href={`/topic/${topic.slug}/page/1`}
         onClick={() => {
           plausible("toolIconCard", {
             props: {

diff --git 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 (
     <div className="flex group hover:shadow-lg hover:scale-[1.005] h-full sm:mt-0 flex-col hover:bg-white transition transition-all duration-300 p-0 bg-white shadow-sm border border-gray-300/60 rounded-2xl overflow-hidden  w-full">
       {image && post?.attributes?.base64 ? (
-        <div className={`w-full border-b border-gray-200 shrink-0 h-[240px] max-w-full ${imageHeight?imageHeight:imageVSmall?'md:h-[144px]':imageSmall?'md:h-[180px]':'md:h-[240px]'} md:max-w-full relative overflow-hidden`}>
-          <Link href={link??''}>
+        <div
+          className={`w-full border-b border-gray-200 shrink-0 h-[240px] max-w-full ${imageHeight ? imageHeight : imageVSmall ? "md:h-[144px]" : imageSmall ? "md:h-[180px]" : "md:h-[240px]"} md:max-w-full relative overflow-hidden`}
+        >
+          <Link href={link ?? ""}>
             <Image
               className="object-cover group-hover:scale-[1.03] transition transition-all duration-700 cursor-pointer"
               layout="fill"
@@ -24,42 +41,50 @@ const MediumPost = ({post,showAuthor,showDescription,link, title, image, tags, d
       ) : (
         ""
       )}
-      <div className="my-4 flex flex-col px-4 justify-between h-full">
-
-        <div className="flex flex-col justify-start">
-          <Link href={link??''}>
-            <h2 className="text-lg tracking-tight mb-3 font-medium leading-snug line-clamp-2">
-              {title}
-            </h2>
-          </Link>
-          {showDescription!==false?<Link href={link??''}>
-            <div className="mb-6 text-gray-600 line-clamp-2" dangerouslySetInnerHTML={{__html:excerpt}}/>
-            {/* <p className="">{excerpt}</p> */}
-          </Link>:null}
-
-        {showAuthor!==false?<div className="mb-3.5">
-          <Avatar src={avatar} author={author} date={date} size="lg" />
-        </div>:null}
-        </div>
-        <div className="flex text-xs">
+      <div className="my-3 flex flex-col px-4 justify-between h-full">
+        <div className="flex flex-col justify-between">
+          <div className="flex mb-3 text-xs">
             {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?<SmallTag
-                      key={index}
-                      index={index}
-                      link={`/posts/${tag?.attributes?.slug}/page/1/`}
-                    >
-                      {name}
-                    </SmallTag>:null}
+                      {tag?.attributes?.slug ? (
+                        <SmallTag
+                          key={index}
+                          index={index}
+                          link={`/posts/${tag?.attributes?.slug}/page/1/`}
+                        >
+                          {name}
+                        </SmallTag>
+                      ) : null}
                     </>
                   );
                 })
               : ""}
           </div>
+          <Link href={link ?? ""}>
+            <h2 className="text-lg tracking-tight mb-3 font-medium leading-snug line-clamp-2">
+              {title}
+            </h2>
+          </Link>
+          {showDescription !== false ? (
+            <Link href={link ?? ""}>
+              <div
+                className="mb-6 text-gray-600 line-clamp-2"
+                dangerouslySetInnerHTML={{ __html: excerpt }}
+              />
+              {/* <p className="">{excerpt}</p> */}
+            </Link>
+          ) : null}
+
+        </div>
+        {showAuthor !== false ? (
+            <div className="mb">
+              <Avatar src={avatar} author={author} date={date} size="lg" />
+            </div>
+          ) : null}
       </div>
     </div>
   );