Migrate Handbook Pages into MDX Collections

gatsby-node.js

@@ -135,6 +135,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     `
     : "";
 
+  const HandbookTemplate = path.resolve("src/templates/handbook-template.js");
+
+
   const res = await graphql(`
     {
       allPosts: allMdx(filter: { frontmatter: { published: { eq: true } } }) {
@@ -152,6 +155,19 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
           }
         }
       }
+      handbookPages: allMdx(
+        filter: { fields: { collection: { eq: "handbook" } } }
+      ) {
+        nodes {
+          fields {
+            slug
+            collection
+          }
+          internal {
+            contentFilePath
+          }
+        }
+      }
       blogTags: allMdx(
         filter: {
           fields: { collection: { eq: "blog" } }
@@ -251,6 +267,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   const members = filterByCollection("members");
   const integrations = filterByCollection("integrations");
 
+  const handbook = res.data.handbookPages.nodes;
+
+
   const singleWorkshop = res.data.singleWorkshop.nodes;
   const labs = res.data.labs.nodes;
 
@@ -412,6 +431,17 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     });
   }
 
+  handbook.forEach((page) => {
+    envCreatePage({
+      path: page.fields.slug,
+      component: `${HandbookTemplate}?__contentFilePath=${page.internal.contentFilePath}`,
+      context: {
+        slug: page.fields.slug,
+      },
+    });
+  });
+
+
   programs.forEach((program) => {
     envCreatePage({
       path: `/programs/${program.frontmatter.programSlug}`,
@@ -668,6 +698,9 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
           if (node.frontmatter.published)
             slug = `/community/members/${node.frontmatter.permalink ?? slugify(node.frontmatter.name)}`;
           break;
+        case "handbook":
+          slug = `/community/handbook/${slugify(node.frontmatter.title)}`;
+          break;
         case "events":
           if (node.frontmatter.title)
             slug = `/community/events/${slugify(node.frontmatter.title)}`;

src/collections/handbook/about/index.mdx

@@ -0,0 +1,118 @@
+---
+title: "About"
+description: "Layer5 offers cloud native application management by harnessing the power of a developer-friendly applications management system that supports visualization of the modern infrastructure leading to effective operation with best practices."
+type: Handbook
+contents:
+  - id: 0
+    link: "#About Layer5"
+    text: "About Layer5"
+  - id: 1
+    link: "#Goals"
+    text: "Goals"
+  - id: 2
+    link: "#Newcomer's Path"
+    text: "Newcomer's Path"
+  - id: 3
+    link: "#Working on your issue"
+    text: "Working on your issue"
+  - id: 4
+    link: "#While your issue is under review"
+    text: "While your issue is under review"
+---
+
+import { Container, Row, Col } from "../../../reusecore/Layout";
+import NewcomersMap from "../../../sections/Community/Newcomers-guide/newcomers-map";
+import longArrow from "../../../sections/Community/Newcomers-guide/long-arrow.svg";
+import { useState } from "react";
+
+
+export const JourneySection = () => {
+  const [hover, setHover] = useState(false);
+  return (
+    <Row className="newcomers-journey">
+      <Col
+        className="heading"
+        $sm={12}
+        $lg={6}
+        onMouseOver={() => setHover(true)}
+        onMouseOut={() => setHover(false)}
+      >
+        <h2>Contributor's Journey</h2>
+        <div className="heading-start">
+          <h5>Start Here</h5>
+          <img className="heading-start__arrow" src={longArrow} alt="longArrow" />
+        </div>
+      </Col>
+      <Col $sm={12} $lg={6}>
+        <NewcomersMap handleMouseHover={hover} />
+      </Col>
+    </Row>
+  );
+};
+
+<a id="About Layer5">
+  <h2>About Layer5</h2>
+</a>
+
+At Layer5, we champion developer-defined infrastructure, giving engineers the power to reshape application delivery. We empower operators in reimagining how they manage modern infrastructure: collaboratively.
+<br />
+Layer5 is not just a company, we are also:
+
+#### Community First
+
+The Layer5 community builds projects to provide learning environments, deployment, and operational best practices, performance benchmarks, create documentation, share networking opportunities, and more. Our shared commitment to the open-source spirit pushes Layer5 projects forward. New members are always welcome.
+
+#### Open Source First
+
+All Layer5 projects are open-source. Anyone can download, use, work on, and share it with others. It's built on principles like collaboration, globalism, and innovation. Layer5 projects are distributed under the terms of <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache v2</a>.
+
+<a id="Goals">
+  <h2>Goals</h2>
+</a>
+
+- To build a large collection of cloud native technologies.
+- To build products that are accessible and easy to use.
+- To build a welcoming community for open-source contributions.
+
+<a id="Newcomer's Path">
+  <h2>Newcomer's Path</h2>
+</a>
+
+Thank you for your interest in contributing to Layer5 open source initiatives!
+
+<JourneySection />
+
+In combination with the Layer5 Community Guide and Contributing Guide, the following set of instructions are to encourage and support first-time (or near first-time) open-source contributors.
+
+<a id="How to contribute?">
+  <h3>How to contribute?</h3>
+</a>
+
+The following steps outline the process by which you can openly engage, learn, and participate in the broad set of open source projects at Layer5.
+
+1. Browse the list of <a href="https://github.com/layer5io">Layer5</a> org issues bearing the <a href="https://github.com/search?q=is%3Aopen+is%3Aissue+archived%3Afalse+org%3Alayer5io+label%3A%22good+first+issue%22+no%3Aassignee">"good first issue"</a>, <a href="https://github.com/search?q=is%3Aopen+is%3Aissue+archived%3Afalse+org%3Alayer5io+label%3A%22first+timers+only%22+no%3Aassignee">"first-timers-only"</a> or the <a href="https://github.com/search?q=is%3Aopen+is%3Aissue+archived%3Afalse+org%3Alayer5io+label%3A%22help+wanted%22+no%3A%22assignee%22">"help wanted"</a> label.
+
+2. Alternatively, find an area of interest by checking out the Layer5 Repository Overview section of this handbook.
+
+3. After identifying the issue you wish to work on, check if it has been assigned by taking a look at the assignee section on the issue, otherwise signal your interest by commenting on the issue so that it can be assigned to you.
+
+<a id="Working on your issue">
+  <h3>Working on your issue</h3>
+</a>
+
+Once an issue has been assigned to you, it's time to get started!
+
+1. Be sure to <a href="https://github.com/layer5io/meshery/blob/master/CONTRIBUTING.md#signing-off-on-commits-developer-certificate-of-origin">sign off on your commits</a>
+
+2. Contributions of all sizes are welcome.
+
+3. If you need some additional help, please join the Layer5 Slack workspace and find your way to the #newcomers channel. Feel free to ask questions.
+
+<a id="While your issue is under review">
+  <h3>While your issue is under review</h3>
+</a>
+
+1. Please double-check that you have signed off on all of your git commits.
+
+2. Be patient. There are a large number of contributors and only a small number of maintainers/reviewers. All contributors are equally important to us, and we'll be sure to get to you as soon as possible. In the meanwhile, you are welcome to join our Slack workspace and take a look at all our projects.
+

src/collections/handbook/code-of-conduct/index.mdx

@@ -0,0 +1,31 @@
+---
+title: "Code of Conduct"
+description: "At Layer5 We follow the CNCF Code of Conduct. We pledge to respect all people who contribute through reporting issues, to submit pull requests or patches, and other activities."
+type: Handbook
+---
+
+import Point from "./bullet.svg";
+
+<h2 className="heading-top">Community Code of Conduct</h2>
+
+Layer5 follows the <a href="https://github.com/cncf/foundation/blob/master/code-of-conduct.md">CNCF Code of Conduct</a> which states that:
+
+As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, to post feature requests, to update documentation, to submit pull requests or patches, and other activities.
+
+We are committed to participating in this project as a harassment-free experience for everyone, regardless of the level of experience, gender, gender identity, and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality.
+
+Examples of unacceptable behavior by participants include:
+
+<p><img className="logo" src={Point} alt="Point" />The use of sexualized language or imagery</p>
+<p><img className="logo" src={Point} alt="Point" />Personal attacks</p>
+<p><img className="logo" src={Point} alt="Point" />Trolling or insulting/derogatory comments</p>
+<p><img className="logo" src={Point} alt="Point" />Public or private harassment</p>
+<p><img className="logo" src={Point} alt="Point" />Publishing other's private information, such as physical or electronic addresses, without explicit permission</p>
+<p><img className="logo" src={Point} alt="Point" />Other unethical or unprofessional conduct</p>
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team.
+
+This code of conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting <a href="http://[email protected].">[email protected].</a>
+