Adding roadmap to the platform.

api/api/feature/config/routes.json

@@ -0,0 +1,52 @@
+{
+  "routes": [
+    {
+      "method": "GET",
+      "path": "/features",
+      "handler": "feature.find",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "GET",
+      "path": "/features/count",
+      "handler": "feature.count",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "GET",
+      "path": "/features/:id",
+      "handler": "feature.findOne",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "POST",
+      "path": "/features",
+      "handler": "feature.create",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "PUT",
+      "path": "/features/:id",
+      "handler": "feature.update",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "DELETE",
+      "path": "/features/:id",
+      "handler": "feature.delete",
+      "config": {
+        "policies": []
+      }
+    }
+  ]
+}

api/api/feature/controllers/feature.js

@@ -0,0 +1,8 @@
+'use strict';
+
+/**
+ * Read the documentation (https://strapi.io/documentation/v3.x/concepts/controllers.html#core-controllers)
+ * to customize this controller
+ */
+
+module.exports = {};

api/api/feature/models/feature.js

@@ -0,0 +1,8 @@
+'use strict';
+
+/**
+ * Read the documentation (https://strapi.io/documentation/v3.x/concepts/models.html#lifecycle-hooks)
+ * to customize this model
+ */
+
+module.exports = {};

api/api/feature/models/feature.settings.json

@@ -0,0 +1,29 @@
+{
+  "kind": "collectionType",
+  "collectionName": "features",
+  "info": {
+    "name": "Feature",
+    "description": "A feature to be added to the roadmap"
+  },
+  "options": {
+    "increments": true,
+    "timestamps": true
+  },
+  "attributes": {
+    "name": {
+      "type": "string",
+      "description": "The name/title of the feature",
+      "required": true
+    },
+    "stage": {
+      "type": "enumeration",
+      "enum": ["under_consideration", "planned", "in_development", "launched"],
+      "default": "under_consideration"
+    },
+    "description": {
+      "type": "text",
+      "description": "Complete description of the wanted feature",
+      "required": true
+    }
+  }
+}

api/api/feature/services/feature.js

@@ -0,0 +1,8 @@
+'use strict';
+
+/**
+ * Read the documentation (https://strapi.io/documentation/v3.x/concepts/services.html#core-services)
+ * to customize this service
+ */
+
+module.exports = {};

api/config/functions/bootstrap.js

@@ -86,6 +86,7 @@ module.exports = async () => {
         "library-media",
         "category",
         "faq",
+        "feature",
         "help-section",
         "library-section",
         "user",

components/Header.js

@@ -175,6 +175,11 @@ export default function Header() {
       slug: "library",
       id: 7,
     },
+    {
+      label: "Roadmap",
+      slug: "roadmap",
+      id: 8,
+    },
   ];
 
   return (

components/Modal.js

@@ -3,6 +3,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import styled from "styled-components";
 import Close from "../public/icons/close.svg";
+import Breaks from "../utils/breakpoints";
 import Card from "./cards/Card";
 import Icon from "./Icon";
 
@@ -28,24 +29,31 @@ const ModalContainer = styled(Card)`
   && {
     padding: 0;
     height: unset;
-    width: unset;
+    width: 740px;
 
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
+
+    @media screen and (max-width: ${Breaks.large}) {
+      width: 680px;
+      min-height: 470px;
+    }
+
+    @media screen and (max-width: ${Breaks.medium}) {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   & p {
-    max-width: 512px;
     margin-bottom: 1rem;
   }
 `;
 
 const ModalHead = styled.div`
   display: flex;
-  align-items: center;
 
+  background-color: #252525;
   border-bottom: 1px solid ${(props) => props.theme.grey};
 
   width: 100%;

components/cards/FeatureCard.js

@@ -0,0 +1,84 @@
+import { format, parseISO } from "date-fns";
+import PropTypes from "prop-types";
+import React from "react";
+import styled from "styled-components";
+import useModal from "../../utils/useModal";
+import Modal from "../Modal";
+import Card from "./Card";
+
+const Container = styled(Card)`
+  flex-flow: column;
+
+  text-align: start;
+`;
+
+const Name = styled.b`
+  width: 100%;
+  max-width: 100%;
+
+  max-height: 1.5em;
+
+  margin: 0 0 1em 0;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const Description = styled.p`
+  display: -webkit-box;
+  -webkit-line-clamp: 6;
+  -webkit-box-orient: vertical;
+
+  height: 9em;
+  max-height: 9em;
+
+  font-size: 15px;
+  overflow: hidden;
+`;
+
+const FeatureMetaData = styled.div`
+  display: flex;
+  align-items: center;
+
+  font-size: 14px;
+  line-height: 1.5;
+  text-transform: uppercase;
+
+  color: ${(props) => props.theme.primary};
+`;
+
+export default function FeatureCard({ className, feature }) {
+  const { show, toggle } = useModal();
+  const date = parseISO(feature.created_at);
+
+  return (
+    <>
+      <Modal title={feature.name} show={show} handleClose={toggle}>
+        <FeatureMetaData>
+          <p>
+            ID {feature.id} | <b> Posted on {format(date, "MMMM dd, yyyy")} </b>
+          </p>
+        </FeatureMetaData>
+
+        <p>{feature.description}</p>
+      </Modal>
+
+      <Container animateOnHover onClick={() => toggle()} className={className}>
+        <Name>{feature.name}</Name>
+        <Description>{feature.description}</Description>
+      </Container>
+    </>
+  );
+}
+
+FeatureCard.propTypes = {
+  /**
+   * Object containing the feature details
+   */
+  feature: PropTypes.object.isRequired,
+  /**
+   * Styling class of the container. Used by styled-components.
+   */
+  className: PropTypes.string,
+};

pages/roadmap.js

@@ -0,0 +1,83 @@
+import React from "react";
+import styled from "styled-components";
+import FeatureCard from "../components/cards/FeatureCard";
+import ItemsGrid from "../components/grids/ItemsGrid";
+import MainLayout from "../components/layouts/MainLayout";
+import { getAllFeatures } from "../services/community";
+import { REVALIDATION_DELAY } from "../utils/settings";
+import useTabs from "../utils/useTabs";
+
+const CardGrid = styled(ItemsGrid)`
+  && {
+    grid-template-rows: unset;
+  }
+`;
+
+const TabsHolder = styled.div`
+  padding: 1rem 0 0 0;
+`;
+
+export default function Roadmap({ features }) {
+  const { Tabs, currentTab } = useTabs([
+    "Under Consideration",
+    "Planned",
+    "In Development",
+    "Launched",
+  ]);
+
+  return (
+    <MainLayout
+      pageTitle={"RoadMap"}
+      metaTitle={"RoadMap"}
+      metaDescription={
+        "The official AstroPlant roadmap! Everything we are working on right now and planning for the future."
+      }
+    >
+      <TabsHolder>
+        <Tabs />
+      </TabsHolder>
+
+      <CardGrid columns={4}>
+        {currentTab === "Under Consideration" && (
+          <>
+            {features.under_consideration.map((feature) => (
+              <FeatureCard feature={feature} key={feature.id} />
+            ))}
+          </>
+        )}
+        {currentTab === "Planned" && (
+          <>
+            {features.planned.map((feature) => (
+              <FeatureCard feature={feature} key={feature.id} />
+            ))}
+          </>
+        )}
+        {currentTab === "In Development" && (
+          <>
+            {features.in_development.map((feature) => (
+              <FeatureCard feature={feature} key={feature.id} />
+            ))}
+          </>
+        )}
+        {currentTab === "Launched" && (
+          <>
+            {features.launched.map((feature) => (
+              <FeatureCard feature={feature} key={feature.id} />
+            ))}
+          </>
+        )}
+      </CardGrid>
+    </MainLayout>
+  );
+}
+
+export async function getStaticProps() {
+  const res = await getAllFeatures();
+
+  return {
+    props: {
+      features: res.data || [],
+    },
+    revalidate: REVALIDATION_DELAY,
+  };
+}

services/community.js

@@ -747,6 +747,32 @@ export async function search({
   return getQuery(graphQLQuery);
 }
 
+/**********************************************
+ *                   FEATURES                 *
+ **********************************************/
+
+const featureModel = `{
+    id
+    created_at
+    stage
+    name
+    description
+  }`;
+
+/**
+ * Get all the features from the API
+ */
+export async function getAllFeatures() {
+  const graphQLQuery = `{
+    under_consideration: features(where: { stage: "under_consideration" }) ${featureModel}
+    planned: features(where: { stage: "planned" }) ${featureModel}
+    in_development: features(where: { stage: "in_development" }) ${featureModel}
+    launched: features(where: { stage: "launched" }) ${featureModel}
+  }`;
+
+  return getQuery(graphQLQuery);
+}
+
 /**********************************************
  *                USERS GRAPHS                *
  **********************************************/