Modify design of Tools and Showcase page (#514)

* Add search bar into tools page & Modify filtering design

* Modify "Featured" tool to display as a star instead of color

* Modify tools showcase

* Remove old design

* Modify showcase design

* Fix react-popper yarn issue a

* Fix uselocation tags issue

* Set showcase toggle filter "AND" by default

* Replace website button with Get started for needed projects in showcase card

* Change "Featured" tags in in tools and showcases to "Favorite"

* Add custom "Our Favorites" section on top of tools and showcases

* Add few useful comments into tools and showcase (Remove unnecessary comments)

* Add extra commit for local testing

* Remove "Preview" comment

* Modify search placeholder in tools and showcases

* Add project counters to tools and showcases

* Remove background colour on favourite tools and showcases

* Modify counter naming in tools and showcase

* Modify counter naming in tools and showcase with conditional functionality

Co-authored-by: fill-the-fill <[email protected]>

package.json

@@ -20,10 +20,12 @@
     "@docusaurus/preset-classic": "^2.0.0-beta.14",
     "@docusaurus/theme-search-algolia": "^2.0.0-beta.14",
     "@mdx-js/react": "^1.6.22",
+    "@popperjs/core": "^2.11.2",
     "clsx": "^1.1.1",
     "node-fetch": "^2.6.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-popper": "^2.2.5",
     "ts-node": "^10.4.0",
     "typescript": "^4.5.3"
   },

src/components/showcase/ShowcaseCard/index.js

@@ -5,29 +5,93 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { memo } from "react";
-
-import styles from "./styles.module.css";
+import React, { memo, forwardRef } from "react";
 import clsx from "clsx";
 import Image from "@theme/IdealImage";
-import ShowcaseFooter from './components/ShowcaseFooter'
-import ShowcaseBody from "./components/ShowcaseBody";
+import Link from "@docusaurus/Link";
+import styles from "./styles.module.css";
+import Tooltip from "../ShowcaseTooltip/index";
+import { useLocation } from "@docusaurus/router";
+import { Tags as ToolsTags } from "../../../data/builder-tools";
+import { Tags as ShowcaseTags } from "../../../data/showcases";
+import Fav from "../../../svg/fav.svg";
 
+const TagComp = forwardRef(({ label, color, description }, ref) => (
+  <li className={styles.tag} title={description}>
+    <span className={styles.textLabel}>{label.toLowerCase()}</span>
+    <span className={styles.colorLabel} style={{ backgroundColor: color }} />
+  </li>
+));
 
+function ShowcaseCardTag({ tags }) {
+  const location = useLocation();
+  const selectedTags = location.pathname.includes("tools")
+    ? ToolsTags
+    : ShowcaseTags;
+  const tagObjects = tags.map((tag) => ({ tag, ...selectedTags[tag] }));
 
-const ShowcaseCard = memo(function ({ showcase }) {
-  const showFooter = showcase.getstarted || showcase.website || showcase.source
   return (
-    <div key={showcase.title} className="col col--4 margin-bottom--lg">
-      <div className={clsx("card", styles.showcaseCard)}>
-        <div className={clsx("card__image", styles.showcaseCardImage)}>
-          <Image img={showcase.preview} alt={showcase.title} />
-        </div>
-        <ShowcaseBody {...showcase}/>
-        {showFooter && <ShowcaseFooter {...showcase}/>}
+    <>
+      {tagObjects.map((tagObject, index) => {
+        const id = `showcase_card_tag_${tagObject.tag}`;
+
+        return (
+          <Tooltip
+            key={index}
+            text={tagObject.description}
+            anchorEl="#__docusaurus"
+            id={id}
+          >
+            <TagComp key={index} {...tagObject} />
+          </Tooltip>
+        );
+      })}
+    </>
+  );
+}
+
+const ShowcaseCard = memo((card) => (
+  <li className="card shadow--md">
+    <div className={clsx("card__image", styles.showcaseCardImage)}>
+      <Image img={card.showcase.preview} alt={card.showcase.title} />
+    </div>
+    <div className="card__body">
+      <div className={clsx(styles.showcaseCardHeader)}>
+        <h4 className={styles.showcaseCardTitle}>
+          <Link href={card.showcase.website}>{card.showcase.title}</Link>
+        </h4>
+        {card.showcase.tags.includes("favorite") && (
+          <Fav svgClass={styles.svgIconFavorite} size="small" />
+        )}
+        {card.showcase.getstarted && (
+          <Link
+            href={card.showcase.getstarted}
+            className={clsx(
+              "button button--secondary button--sm",
+              styles.showcaseCardSrcBtn
+            )}
+          >
+            Get Started
+          </Link>
+        )}
+        {card.showcase.source && (
+          <Link
+            href={card.showcase.source}
+            className={clsx(
+              "button button--secondary button--sm",
+              styles.showcaseCardSrcBtn
+            )}
+          >
+            Source
+          </Link>
+        )}
       </div>
+      <p className={styles.showcaseCardBody}>{card.showcase.description}</p>
     </div>
-  );
-});
+    <ul className={clsx("card__footer", styles.cardFooter)}>
+      <ShowcaseCardTag tags={card.showcase.tags} />
+    </ul>
+  </li>
+));
 
 export default ShowcaseCard;

src/components/showcase/ShowcaseCard/styles.module.css

@@ -5,31 +5,91 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.showcaseCard {
-  height: 100%;
-}
-
 .showcaseCardImage {
-  max-height: 175px;
   overflow: hidden;
+  height: 150px;
+  border-bottom: 2px solid var(--ifm-color-emphasis-200);
+}
+
+.showcaseCardHeader {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.showcaseCardTitle {
+  margin-bottom: 0;
+  flex: 1 1 auto;
+}
+
+.showcaseCardTitle a {
+  text-decoration: none;
+  background: linear-gradient(
+      var(--ifm-color-primary),
+      var(--ifm-color-primary)
+    )
+    0% 100% / 0% 1px no-repeat;
+  transition: background-size ease-out 200ms;
+}
+
+.showcaseCardTitle a:not(:focus):hover {
+  background-size: 100% 1px;
+}
+
+.showcaseCardTitle,
+.showcaseCardHeader .svgIconFavorite {
+  margin-right: 0.25rem;
+}
+
+.showcaseCardSrcBtn {
+  margin-left: 6px;
+  padding-left: 12px;
+  padding-right: 12px;
+  border: none !important;
+}
+
+.showcaseCardSrcBtn:focus-visible {
+  background-color: var(--ifm-color-secondary-dark);
+}
+
+html[data-theme='dark'] .showcaseCardSrcBtn {
+  background-color: var(--ifm-color-emphasis-200) !important;
+  color: inherit;
+}
+
+html[data-theme='dark'] .showcaseCardSrcBtn:hover {
+  background-color: var(--ifm-color-emphasis-300) !important;
+}
+
+.showcaseCardBody {
+  font-size: smaller;
+  line-height: 1.66;
 }
 
-.titleIconsRow {
+.cardFooter {
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
 }
 
-.titleIconsRowTitle {
-  flex: 1;
+.tag {
+  font-size: 0.675rem;
+  border: 1px solid var(--ifm-color-secondary-darkest);
+  cursor: default;
+  margin-right: 6px;
+  margin-bottom: 6px !important;
+  border-radius: 12px;
+  display: inline-flex;
+  align-items: center;
 }
 
-.titleIconsRowIcons {
-  flex-grow: 0;
-  flex-shrink: 0;
+.tag .textLabel {
+  margin-left: 8px;
 }
 
-.tagIcon {
-  margin: 0.2rem;
-  user-select: none;
+.tag .colorLabel {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  margin-left: 6px;
+  margin-right: 6px;
 }

src/components/showcase/ShowcaseCheckbox/styles.module.css

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.checkboxContainer {
+ .checkboxContainer {
   display: inline;
   padding: 5px;
   user-select: none;
@@ -20,3 +20,4 @@
   margin-left: 0.5rem;
   text-overflow: ellipsis;
 }
+