Sistent Card Component

.github/build/features-to-json.js

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 
-const fs = require("fs").promises; // Use fs.promises
-const csv = require("csvtojson");
+import { promises as fs } from "fs"; // Use fs.promises
+import csv from "csvtojson";
 const [major, minor, patch] = process.versions.node.split(".").map(Number);
-console.log(`Node.js version: ${major}.${minor}.${patch}`);
+console.log(`Using Node.js version: ${major}.${minor}.${patch}`);
 
 const headers = [
   "Theme",
@@ -13,18 +13,21 @@ const headers = [
   "Function",
   "Feature",
   "Subscription Tier",
-  "Free Tier",
-  "TeamDesigner Tier",
-  "TeamOperator Tier",
-  "Enterprise Tier",
-  "Pricing Page?",
+  "Free",
+  "Team Designer",
+  "Team Operator",
+  "Enterprise",
+  "Exclude",
   "Docs",
 ];
 
 
 async function processCSV() {
   try {
     const csvFilePath = process.argv[2] || ".github/build/spreadsheet.csv";
+      if (process.argv[2]) {
+        console.log("Downloading features to: " + process.argv[2]);
+      }
     const rows = await csv({
       noheader: true,
       headers: headers,
@@ -33,34 +36,34 @@ async function processCSV() {
 
     const filteredData = rows.map(row => {
       try {
-        const pricingPage = row["Pricing Page?"]?.toLowerCase() || "";
+        const exclude = row["Exclude"]?.toLowerCase();
         const hasXTier = [
-          "Free Tier",
-          "TeamDesigner Tier",
-          "TeamOperator Tier",
-          "Enterprise Tier"]
+          "Free",
+          "Team Designer",
+          "Team Operator",
+          "Enterprise"]
           .some(tier => row[tier]?.trim().toLowerCase() === "x");
-        const includeRow = hasXTier || (pricingPage && ["x", "X"].includes(pricingPage.toLowerCase()));
-
-        if (!includeRow) return null;
+        // const includeRow = hasXTier && !(exclude && ["x", "X"].includes(exclude.toLowerCase()));
 
-        return {
-          theme: row["Theme"],
-          categoryOrder: row["Category Order"],
-          category: row["Category"],
-          functionOrder: row["Function Order"],
-          function: row["Function"],
-          feature: row["Feature"],
-          subscription_tier: row["Subscription Tier"],
-          comparison_tiers: {
-            free: row["Free Tier"],
-            teamDesigner: row["TeamDesigner Tier"],
-            teamOperator: row["TeamOperator Tier"],
-            enterprise: row["Enterprise Tier"],
-          },
-          pricing_page: row["Pricing Page?"],
-          docs: row["Docs"]
-        };
+        // if (!includeRow) return null;
+        if (!exclude) {
+          return {
+            theme: row["Theme"],
+            categoryOrder: row["Category Order"],
+            category: row["Category"],
+            functionOrder: row["Function Order"],
+            function: row["Function"],
+            feature: row["Feature"],
+            subscription_tier: row["Subscription Tier"],
+            comparison_tiers: {
+              free: row["Free"],
+              teamDesigner: row["Team Designer"],
+              teamOperator: row["Team Operator"],
+              enterprise: row["Enterprise"],
+            },
+            docs: row["Docs"]
+          };
+        }
       } catch (error) {
         console.error("Error processing row:", row, error);
         return null;
@@ -69,8 +72,11 @@ async function processCSV() {
 
     // Read existing JSON data
     // const featuresFile = process.env.FEATURES_FILE;
-    console.log("process.argv[3]: " + process.argv[3]);
+
     const featuresFile = process.argv[3] || "src/sections/Pricing/feature_data.json";
+    if (process.argv[3]) {
+      console.log("Converting CSV to JSON in: " + process.argv[3]);
+    }
     // const featuresFile = "src/sections/Pricing/feature_data.json";
 
 

.github/workflows/build-and-preview-site.yml

@@ -28,5 +28,5 @@ jobs:
           name: public-dir
           path: ./public-dir.zip
           retention-days: 1
-      - name: Triger Inner workflow
-        run: echo "trigering inner workflow"
+      - name: Trigger Inner workflow
+        run: echo "triggering inner workflow"

CONTRIBUTING.md

@@ -5,6 +5,7 @@ We are beyond excited to see that you want to contribute! We would love to accep
 - [Before You Get Started](#before-you-get-started)
 - [Contributing to Layer5 Projects](#contributing-to-layer5-projects)
 - [Contributing to Layer5's Blogs](#contributing-to-layer5s-blogs)
+- [Contributing to Layer5's Sistent](#contributing-to-layer5s-sistent)
 - [How to Contribute](#how-to-contribute)
   - [Prerequisites](#prerequisites)
   - [Set up your Local Development Environment](#set-up-your-local-development-environment)
@@ -129,6 +130,37 @@ If you'd like to contribute a post to layer5.io/blog, please open an Issue and s
 3. Follow the instructions included in the news template and name the new file after the title of the news article.
 4. Entries will be listed in chronological order automatically.
 
+# Contributing to Layer5's Sistent
+
+If you'd like to contribute to Sistent, start by selecting the project/sistent label in the [#GitHub issue tracker](https://github.com/layer5io/layer5/labels/project%2Fsistent).
+
+### General Contribution Guidelines
+
+1. Select the [project/sistent](https://github.com/layer5io/layer5/labels/project%2Fsistent) label in the GitHub issue tracker.
+1. Navigate to the relevant directory, such as:
+   ```
+   src/sections/Projects/Sistent
+   ```
+    > Note: For other parts of the project, the file path may vary. Ensure you're working in the correct file associated with the area you're contributing to.
+1. Add or update content. The system dynamically generates pages and routes to maintain consistency.
+
+### Adding Sistent Component
+
+We've streamlined the process by introducing a dynamic page creation workflow, simplifying the addition of new pages and ensuring a consistent structure for all contributions.
+
+1. Navigate to the relevant directory, such as:
+   ```
+   src/sections/Projects/Sistent
+   ``` 
+1. To add a new page, simply update this `content.js` file with the necessary details. All content is managed in a centralized file:
+   ```
+   src/sections/Projects/Sistent/components/content.js
+   ```
+1. The system will dynamically generate pages based on this content and handle routing automatically.
+
+### Example
+Refer to the [**Button component**](https://layer5.io/projects/sistent/components/button) in the Sistent Library for an example of how to structure the content.
+
 # Common Types of Site Contributions
 
 The following list of instructions pertains to commonplace site updates by contributors.

Makefile

@@ -43,8 +43,8 @@ lint:
 
 ## Prepare a list of features for the pricing page.
 features: 
-	#`which nvm` use 18
 	curl -L https://docs.google.com/spreadsheets/d/e/2PACX-1vQwzrUSKfuSRcpkp7sJTw1cSB63s4HCjYLJeGPWECsvqn222hjaaONQlN4X8auKvlaB0es3BqV5rQyz/pub\?gid\=1153419764\&single\=true\&output\=csv -o .github/build/spreadsheet.csv
 	node .github/build/features-to-json.js .github/build/spreadsheet.csv src/sections/Pricing/feature_data.json
+	rm .github/build/spreadsheet.csv
 
 .PHONY: setup build site clean site-fast lint features

gatsby-browser.js

@@ -1,5 +1,4 @@
 import "./fonts.css";
-import posthog from "posthog-js";
 
 document.addEventListener("DOMContentLoaded", () => {
   /** init gtm after 3500 seconds - this could be adjusted */
@@ -29,19 +28,5 @@ function initGTM() {
   document.head.appendChild(script);
 }
 
-export const onClientEntry = () => {
-  if (process.env.NODE_ENV === "production") {
-    posthog.init("phc_Yynjz2lAiQDJFqTWeGT0FJrt50hl53WBx8do3eKImgX",
-      {
-        api_host: "https://us.i.posthog.com",
-        person_profiles: "always",
-        autocapture: {
-          url_ignorelist: ["community/newcomers", "/calendar", "/newcomers"]
-        }
-      }
-    );
-  }
-};
-
 export { wrapRootElement } from "./root-wrapper";
 export { wrapPageElement } from "./page-wrapper";

gatsby-config.js

@@ -17,6 +17,7 @@ module.exports = {
   },
   trailingSlash: "never",
   plugins: [
+    "@mediacurrent/gatsby-plugin-silence-css-order-warning",
     {
       resolve: "gatsby-plugin-webpack-bundle-analyser-v2",
       options: {
@@ -545,7 +546,7 @@ module.exports = {
       resolve: "gatsby-plugin-robots-txt",
       options: {
         host: "https://layer5.io",
-        sitemap: "https://layer5.io/sitemap/sitemap-index.xml",
+        sitemap: "https://layer5.io/sitemap-index.xml",
         policy: [{ userAgent: "*", allow: "/" }],
       }
     },

gatsby-node.js

@@ -9,6 +9,7 @@ const path = require("path");
 const slugify = require("./src/utils/slugify");
 const { paginate } = require("gatsby-awesome-pagination");
 const { createFilePath } = require("gatsby-source-filesystem");
+const FilterWarningsPlugin = require("webpack-filter-warnings-plugin");
 const config = require("./gatsby-config");
 const {
   componentsData,
@@ -977,7 +978,7 @@ const createSectionPage = ({ envCreatePage, node }) => {
   });
 };
 
-exports.onCreateWebpackConfig = ({ actions }) => {
+exports.onCreateWebpackConfig = ({ actions, stage, getConfig }) => {
   actions.setWebpackConfig({
     resolve: {
       fallback: {
@@ -987,7 +988,29 @@ exports.onCreateWebpackConfig = ({ actions }) => {
       },
     },
   });
+  actions.setWebpackConfig({
+    plugins: [
+      new FilterWarningsPlugin({
+        exclude:
+          /mini-css-extract-plugin[^]*Conflicting order. Following module has been added:/,
+      }),
+    ],
+  });
+
+  if (stage === "build-javascript") {
+    const config = getConfig();
+    const miniCssExtractPlugin = config.plugins.find(
+      (plugin) => plugin.constructor.name === "MiniCssExtractPlugin"
+    );
+
+    if (miniCssExtractPlugin) {
+      miniCssExtractPlugin.options.ignoreOrder = true;
+    }
+
+    actions.replaceWebpackConfig(config);
+  }
 };
+
 exports.createSchemaCustomization = ({ actions }) => {
   const { createTypes } = actions;
   const typeDefs = `