Merge pull request #5372 from lakshz/sistent

feat: Sistent site

package.json

@@ -25,17 +25,22 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
     "@fullcalendar/daygrid": "^5.11.3",
     "@fullcalendar/google-calendar": "^6.1.9",
     "@fullcalendar/interaction": "^6.1.10",
     "@fullcalendar/react": "^5.11.2",
     "@layer5/meshery-design-embed": "^0.2.0",
+    "@layer5/sistent": "^0.14.13",
     "@loadable/component": "^5.15.3",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
+    "@mui/material": "^5.15.11",
     "@react-icons/all-files": "^4.1.0",
     "@sideway/address": "^5.0.0",
     "@svgr/webpack": "^8.0.1",
+    "@types/mui-datatables": "^4.3.12",
     "axios": "^1.6.7",
     "babel-plugin-styled-components": "^2.1.4",
     "babel-preset-gatsby": "^2.22.0",
@@ -70,6 +75,7 @@
     "joi": "^17.10.2",
     "js-search": "^2.0.0",
     "lodash": "^4.17.21",
+    "mui-datatables": "^4.3.0",
     "prism-react-renderer": "^1.3.5",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",

src/components/Features/style.js

@@ -1,4 +1,4 @@
-import styled, { keyframes } from "styled-components";
+import styled from "styled-components";
 
 export const Container = styled.div`
   border-radius: 1rem;

src/components/SistentNavigation/content.js

@@ -0,0 +1,46 @@
+export const content = [
+  { id: 0, link: "/projects/sistent/about", text: "About Sistent" },
+  { id: 1, link: "/projects/sistent/identity/color", text: "Colors" },
+  { id: 2, link: "/projects/sistent/identity/color/guidance", text: "Colors" },
+  { id: 3, link: "/projects/sistent/identity/color/code", text: "Colors" },
+  { id: 4, link: "/projects/sistent/identity/spacing", text: "Spacing" },
+  {
+    id: 5,
+    link: "/projects/sistent/identity/spacing/guidance",
+    text: "Spacing",
+  },
+  { id: 6, link: "/projects/sistent/identity/spacing/code", text: "Spacing" },
+  { id: 7, link: "/projects/sistent/identity/typography", text: "Typography" },
+  {
+    id: 8,
+    link: "/projects/sistent/identity/typography/guidance",
+    text: "Typography",
+  },
+  {
+    id: 9,
+    link: "/projects/sistent/identity/typography/code",
+    text: "Typography",
+  },
+  { id: 10, link: "/projects/sistent/components/button", text: "Button" },
+  {
+    id: 10,
+    link: "/projects/sistent/components/button/guidance",
+    text: "Button",
+  },
+  { id: 11, link: "/projects/sistent/components/button/code", text: "Button" },
+  {
+    id: 12,
+    link: "/projects/sistent/components/text-input",
+    text: "Text Input",
+  },
+  {
+    id: 13,
+    link: "/projects/sistent/components/text-input/guidance",
+    text: "Text Input",
+  },
+  {
+    id: 14,
+    link: "/projects/sistent/components/text-input/code",
+    text: "Text Input",
+  },
+];

src/components/SistentNavigation/index.js

@@ -0,0 +1,131 @@
+import React, { useState } from "react";
+import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevronLeft";
+import { Link } from "gatsby";
+import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
+import { IoIosArrowDropdownCircle } from "@react-icons/all-files/io/IoIosArrowDropdownCircle";
+
+import TOCWrapper from "./toc.style";
+import { IoIosArrowDown } from "@react-icons/all-files/io/IoIosArrowDown";
+import { IoIosArrowUp } from "@react-icons/all-files/io/IoIosArrowUp";
+
+import { useLocation } from "@reach/router";
+
+const TOC = () => {
+  const [expand, setExpand] = useState(false);
+  const location = useLocation();
+  const [expandIdenity, setExpandIdentity] = useState(
+    location.pathname.includes("/identity")
+  );
+
+  return (
+    <TOCWrapper>
+      <div className="go-back">
+        <Link to="/projects/sistent">
+          <HiOutlineChevronLeft />
+          <h4>Table of Contents</h4>
+        </Link>
+        <div className="toc-toggle-btn">
+          {expand ? (
+            <IoMdClose
+              className="toc-menu-icon"
+              onClick={function () {
+                setExpand(!expand);
+              }}
+            />
+          ) : (
+            <IoIosArrowDropdownCircle
+              className="toc-menu-icon"
+              onClick={function () {
+                setExpand(!expand);
+              }}
+            />
+          )}
+        </div>
+      </div>
+      <div className="toc-list">
+        <ul className={`toc-ul ${expand ? "toc-ul-open" : ""}`}>
+          <li>
+            <Link
+              to="/projects/sistent/about"
+              className="toc-sub-heading toc-sub-inline"
+              activeClassName="active"
+            >
+              About
+            </Link>
+          </li>
+          <li>
+            <div>
+              <li
+                className="toc-sub-heading identity"
+                onClick={() => setExpandIdentity((prev) => !prev)}
+              >
+                Idenitity
+                {expandIdenity ? <IoIosArrowUp /> : <IoIosArrowDown />}
+              </li>
+              {expandIdenity && (
+                <div className="identity-sublinks">
+                  <li>
+                    <Link
+                      to="/projects/sistent/identity/color"
+                      className={`toc-sub-heading toc-sub-inline identity-item ${
+                        location.pathname.includes(
+                          "/projects/sistent/identity/color"
+                        )
+                          ? "active"
+                          : ""
+                      }`}
+                      activeClassName="active"
+                    >
+                      Color
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      to="/projects/sistent/identity/spacing"
+                      className={`toc-sub-heading toc-sub-inline identity-item ${
+                        location.pathname.includes(
+                          "/projects/sistent/identity/spacing"
+                        )
+                          ? "active"
+                          : ""
+                      }`}
+                      activeClassName="active"
+                    >
+                      Spacing
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      to="/projects/sistent/identity/typography"
+                      className={`toc-sub-heading toc-sub-inline identity-item ${
+                        location.pathname.includes(
+                          "/projects/sistent/identity/typography"
+                        )
+                          ? "active"
+                          : ""
+                      }`}
+                      activeClassName="active"
+                    >
+                      Typography
+                    </Link>
+                  </li>
+                </div>
+              )}
+            </div>
+          </li>
+          <li>
+            <Link
+              to="/projects/sistent/components"
+              activeClassName="active"
+              className="toc-sub-heading toc-sub-inline"
+            >
+              Components
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </TOCWrapper>
+  );
+};
+
+export default TOC;

src/components/SistentNavigation/intra-page.js

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "gatsby";
+import styled from "styled-components";
+
+const JoinCommunityWrapper = styled.div`
+  width: 18rem;
+
+  @media screen and (max-width: 750px) {
+    display: none;
+  }
+
+  @media screen and (min-width: 751px) and (max-width: 1279px) {
+    display: none;
+  }
+  .intra-page {
+    position: sticky;
+    top: 10rem;
+    right: 0rem;
+    margin-right: 1rem;
+    padding-bottom: 5rem;
+    padding-right: 2rem;
+    align-items: left;
+    justify-content: space-around;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .list {
+      color: #000000;
+    }
+    .active {
+      font-weight: 5000;
+      color: #000000;
+    }
+
+    ul {
+      list-style: none;
+      top: 3rem;
+      li {
+        padding-bottom: 0.5rem;
+        padding-top: 0.5rem;
+      }
+    }
+    @media only screen and (min-width: 1280px) and (max-width: 1350px) {
+      padding-right: 0rem;
+      margin-right: 0rem;
+    }
+    @media only screen and (max-width: 950px) {
+      width: 0;
+      opacity: 0;
+      height: 0;
+      transition: none;
+      visibility: hidden;
+    }
+  }
+
+  .learn {
+    width: 10rem;
+  }
+`;
+
+function IntraPage() {
+  const [contents, setContents] = useState([]);
+
+  useEffect(() => {
+    const anchors = document.querySelectorAll(".main-content > a");
+    console.log(anchors);
+    if (anchors) {
+      setContents(
+        Array.from(anchors).map((a) => ({
+          id: a.id,
+          link: `#${a.id}`,
+          text: a.id,
+        }))
+      );
+    }
+  }, []);
+
+  const [intapath, setIntapath] = useState(null);
+  useEffect(() => {
+    const path = window.location.pathname;
+    setIntapath(path);
+  }, []);
+
+  return (
+    <JoinCommunityWrapper>
+      <div className="intra-page">
+        <ul>
+          {contents.map((x) => (
+            <li key={x.id} className="list">
+              <Link
+                to={`${intapath}${x.link}`}
+                key={x.id}
+                activeClassName="active"
+              >
+                {x.text}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </JoinCommunityWrapper>
+  );
+}
+
+export default IntraPage;

src/components/SistentNavigation/pagination.js

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from "react";
+
+import { content } from "./content";
+import Button from "../../reusecore/Button";
+import PaginationWrapper from "./pagination.style";
+
+const SistentPagination = () => {
+  const [currentPage, setCurrentPage] = useState(0);
+
+  useEffect(() => {
+    const path = window.location.pathname;
+    const index = content.findIndex((x) => x.link === path);
+    setCurrentPage(index);
+  }, []);
+
+  return (
+    <PaginationWrapper>
+      {currentPage > 0 ? (
+        <Button secondary url={content[currentPage - 1]?.link}>
+          &larr; Previous
+        </Button>
+      ) : null}
+
+      {currentPage < content.length - 1 ? (
+        <Button primary url={content[currentPage + 1]?.link}>
+          Next &rarr;
+        </Button>
+      ) : null}
+    </PaginationWrapper>
+  );
+};
+
+export default SistentPagination;

src/components/SistentNavigation/pagination.style.js

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+const TocPaginationWrapper = styled.div`
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin: 3rem 2rem 4rem 2rem;
+
+  @media screen and (max-width: 540px) {
+    margin: 0 0 2rem 0;
+    flex-flow: row wrap;
+    gap: 0.3rem;
+  }
+`;
+
+export default TocPaginationWrapper;