feat: add showcase frontend page

website/docusaurus.config.js

@@ -8,6 +8,19 @@ module.exports = {
   favicon: "img/favicon.ico",
   organizationName: "neogcamp", // Usually your GitHub org/user name.
   projectName: "mockBee", // Usually your repo name.
+  plugins: [
+    [
+      require.resolve("@docusaurus/plugin-ideal-image"),
+      {
+        quality: 70,
+        max: 1030,
+        min: 640,
+        steps: 2,
+        // Use false to debug, but it incurs huge perf costs
+        disableInDev: true,
+      },
+    ],
+  ],
   presets: [
     [
       "@docusaurus/preset-classic",
@@ -40,6 +53,7 @@ module.exports = {
           position: "left",
         },
         { to: "/docs/api/introduction", label: "API", position: "left" },
+        { to: "/showcase", label: "Showcase", position: "left" },
         {
           href: "https://github.com/neogcamp/neoG-Camp-mock-backend",
           label: "GitHub",
@@ -102,6 +116,6 @@ module.exports = {
   },
   onDuplicateRoutes: "warn",
   customFields: {},
-  plugins: [],
+  // plugins: [],
   themes: [],
 };

website/package.json

@@ -14,8 +14,9 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.6",
-    "@docusaurus/preset-classic": "2.0.0-beta.6",
+    "@docusaurus/core": "^2.0.0-rc.1",
+    "@docusaurus/plugin-ideal-image": "^2.0.0-rc.1",
+    "@docusaurus/preset-classic": "^2.0.0-rc.1",
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",

website/src/components/cardfilterchip/CardFilterChip.css

@@ -0,0 +1,22 @@
+.card-filter-chip-wrapper {
+    width: max-content;
+    padding: 0 5px;
+    margin: 5px;
+    border: 1px solid white;
+    display: flex;
+    align-items: center;
+    border-radius: 5rem;
+}
+
+.card-filter-chip-text {
+    padding: 0;
+    margin: 0;
+    font-size: 12px;
+}
+
+.card-filter-chip-icon {
+    margin-left: 10px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}

website/src/components/cardfilterchip/CardFilterChip.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "./CardFilterChip.css";
+
+function CardFilterChip({ filter }) {
+  return (
+    <div className="card-filter-chip-wrapper">
+      <p className="card-filter-chip-text">{filter.name}</p>
+      <span
+        style={{ backgroundColor: filter.color }}
+        className="card-filter-chip-icon"
+      ></span>
+    </div>
+  );
+}
+
+export default CardFilterChip;

website/src/components/filterchip/FilterChip.css

@@ -0,0 +1,21 @@
+.filter-chip-wrapper {
+    width: max-content;
+    padding: 5px 1rem;
+    margin: 5px;
+    border: 1px solid white;
+    display: flex;
+    align-items: center;
+}
+
+.filter-chip-text {
+    padding: 0;
+    margin: 0;
+    font-size: 12px;
+}
+
+.filter-chip-icon {
+    margin-left: 10px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}

website/src/components/filterchip/FilterChip.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "./FilterChip.css";
+
+function FilterChip({ filter }) {
+  return (
+    <div className="filter-chip-wrapper">
+      <p className="filter-chip-text">{filter.name}</p>
+      <span
+        style={{ backgroundColor: filter.color }}
+        className="filter-chip-icon"
+      ></span>
+    </div>
+  );
+}
+
+export default FilterChip;

website/src/components/showcasecard/ShowcaseCard.css

@@ -0,0 +1,39 @@
+.showcase-card-wrapper {
+    background-color: var(--ifm-card-background-color);
+    width: 22rem;
+    border-radius: 10px;
+    box-shadow: var(--ifm-global-shadow-md);
+}
+
+.showcase-card-thumbnail {
+    max-width: 100%;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
+.showcase-card-header,
+.showcase-card-desc,
+.showcase-card-footer {
+    margin: 1rem;
+}
+
+.showcase-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.showcase-card-heading {
+    margin: 0;
+    padding: 0;
+}
+
+.showcase-card-icon {
+    margin: 0 10px;
+}
+
+.showcase-card-footer {
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: 1rem;
+}

website/src/components/showcasecard/ShowcaseCard.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import CardFilterChip from "../cardfilterchip/CardFilterChip";
+import Image from "@theme/IdealImage";
+import { filters } from "../../data/filters";
+import "./ShowcaseCard.css";
+
+function ShowcaseCards({ user }) {
+  return (
+    <div className="showcase-card-wrapper">
+      <Image
+        img={user.preview}
+        alt={user.title}
+        className="showcase-card-thumbnail"
+      />
+      <div className="showcase-card-header">
+        <h4 className="showcase-card-heading">{user.title}</h4>
+        <div>
+          <span className="showcase-card-icon">Heart Icon</span>
+          <button className="source-btn">Source</button>
+        </div>
+      </div>
+      <p className="showcase-card-desc">{user.description}</p>
+      <div className="showcase-card-footer">
+        {filters.map((filter) => (
+          <CardFilterChip key={filter.id} filter={filter} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default ShowcaseCards;

website/src/data/filters.jsx

@@ -0,0 +1,22 @@
+export const filters = [
+  {
+    id: 1,
+    name: "Favourite",
+    color: "pink",
+  },
+  {
+    id: 2,
+    name: "Open Source",
+    color: "red",
+  },
+  {
+    id: 3,
+    name: "Product",
+    color: "green",
+  },
+  {
+    id: 4,
+    name: "Design",
+    color: "blue",
+  },
+];

website/src/data/users.jsx

@@ -0,0 +1,97 @@
+import { v4 as uuid } from "uuid";
+/*
+Welcome to submissions for Mockbee.
+
+Below you will see an array of objects. Each object signifies a project currently shown at the <url>/showcase. 
+You can add yours below , by simply creating an object below with the exact same keys, but your own values.
+For example, an Adarsh Balika would make the following object :
+{
+  title:"Principles of Javascript",
+  description:"Javascript is the best , I dont like anything else.",
+  preview: require("./showcase/<adarsh-image.jpg>"),
+  source:"https://github.com/<adarsh-balika-repo>",
+  tags :["Adarsh","Balika"]
+}
+Here's and example of a good PR :<link>
+
+There are two ways to create a PR: 
+1.Github UI Interface
+2.Forking the repo and making the changes locally then commiting them and creating a PR.
+
+A few steps to be followed :
+
+1.Github UI Interface.
+ * - Create a PR in this file of Users.
+ * - This will create a branch on your Docusaurus fork (usually "patch-1").
+ * - Rename the branch to addtoshowcase/<yourprojecttitle>
+ * - Go to https://github.com/sashaboi/docasaurus-testing/tree/master/src/data/showcase
+ * - Drag-and-drop an image here to add it to your existing PR. <dimensions to be followed>
+
+2.Forking.
+
+ * - Create a branch with name which follows addtoshowcase/<yourprojecttitle>
+ * - Make changes to users.jsx , and add your image to the docasaurus-testing/tree/master/src/data/showcase folder.
+ * - Commit to your own branch and create a pull request to merge to the <whichever we want> Master branch
+ * 
+
+After submission , our maintainers will take 3-5 weeks to review, process, approve your applications and then merge your changes into the production branch.
+Thank you for submitting!
+
+*/
+
+export const users = [
+  {
+    id: uuid(),
+    title: "AgileTs",
+    description: "Global State and Logic Framework for reactive Applications",
+    preview: require("./showcase/agilets.png"),
+    website: "https://agile-ts.org/",
+    source: "https://github.com/agile-ts/documentation",
+    tags: ["opensource", "design"],
+  },
+  {
+    id: uuid(),
+    title: "AgileTs",
+    description: "Global State and Logic Framework for reactive Applications",
+    preview: require("./showcase/agilets.png"),
+    website: "https://agile-ts.org/",
+    source: "https://github.com/agile-ts/documentation",
+    tags: ["opensource", "design"],
+  },
+  {
+    id: uuid(),
+    title: "AgileTs",
+    description: "Global State and Logic Framework for reactive Applications",
+    preview: require("./showcase/agilets.png"),
+    website: "https://agile-ts.org/",
+    source: "https://github.com/agile-ts/documentation",
+    tags: ["opensource", "design"],
+  },
+  {
+    id: uuid(),
+    title: "AgileTs",
+    description: "Global State and Logic Framework for reactive Applications",
+    preview: require("./showcase/agilets.png"),
+    website: "https://agile-ts.org/",
+    source: "https://github.com/agile-ts/documentation",
+    tags: ["opensource", "design"],
+  },
+  {
+    id: uuid(),
+    title: "AgileTs",
+    description: "Global State and Logic Framework for reactive Applications",
+    preview: require("./showcase/agilets.png"),
+    website: "https://agile-ts.org/",
+    source: "https://github.com/agile-ts/documentation",
+    tags: ["opensource", "design"],
+  },
+  {
+    id: uuid(),
+    title: "AgileTs",
+    description: "Global State and Logic Framework for reactive Applications",
+    preview: require("./showcase/agilets.png"),
+    website: "https://agile-ts.org/",
+    source: "https://github.com/agile-ts/documentation",
+    tags: ["opensource", "design"],
+  },
+];

website/src/pages/showcase/index.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+import Translate from "@docusaurus/Translate";
+import Layout from "@theme/Layout";
+import { users } from "../../data/users";
+import ShowcaseCard from "../../components/ShowcaseCard/ShowcaseCard";
+import FilterChip from "../../components/FilterChip/FilterChip";
+import { filters } from "../../data/filters";
+import "./showcase.css";
+
+const ShowcaseHeader = () => {
+  return (
+    <section className="margin-top--lg margin-bottom--lg text--center">
+      <h1>Mockbee Showcase</h1>
+      <p>List of projetcs people are building with Mockbee</p>
+      <a
+        className="button button--primary"
+        href="#"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <Translate id="showcase.header.button">
+          🙏 Please add your site
+        </Translate>
+      </a>
+    </section>
+  );
+};
+
+function ShowcaseFilters() {
+  return (
+    <section className="container margin-top--l margin-bottom--lg">
+      <div className="margin-bottom--sm">
+        <div>
+          <h2>
+            <Translate id="showcase.filters.title">Filters</Translate>
+          </h2>
+        </div>
+      </div>
+      <ul className="clean-list filter-container">
+        {filters.map((filter) => (
+          <FilterChip key={filter.id} filter={filter} />
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function ShowcaseCards() {
+  return (
+    <div className="showcase-cards-container container margin-top--l margin-bottom--lg">
+      {users.map((user) => (
+        <ShowcaseCard key={user.id} user={user} />
+      ))}
+    </div>
+  );
+}
+
+const Showcase = () => {
+  return (
+    <Layout
+      title={`Showcase`}
+      description="Description will go into a meta tag in <head />"
+    >
+      <ShowcaseHeader />
+      <ShowcaseFilters />
+      <ShowcaseCards />
+    </Layout>
+  );
+};
+
+export default Showcase;