fixing the build page query parameters (#397)

* Fix build page query params

* test

* fix

* fix infinit loop

* fix double All category

* doc for query parameters

* removed file contaminations

---------

Co-authored-by: SeraGabor <sragabor@gmail.com>

.gitignore

@@ -6,4 +6,5 @@ node_modules/
 package-lock.json
 .idea/
 .env.development
-.env.production
+.env.production
+.vercel

README.md

@@ -40,3 +40,100 @@ If the repo already exists locally:
 -   The server build environment requires Node.js [v18.17.0](https://nodejs.org/en/blog/release/v18.17.0) or higher
 -   For node modules installation, the `npm install --legacy-peer-deps` command should be defined in the node modules install config
 -   For cached fast builds, the `npm run build` command should be defined in the build config
+
+### Build page query parameters for specific tabs
+
+All possible combinations based on the data files. Let's break it down for each section:
+
+1. Framework categories (from frameworks.js):
+
+-   All
+-   Ethereum
+-   Sovereign
+
+2. Rollups categories (from rollups.js):
+
+-   All
+-   Arbitrum ORBIT
+-   OP Stack
+-   Polygon CDK
+-   Starknet Stack
+
+#### Here are all possible query parameter combinations:
+
+1. Single parameter combinations:
+
+```
+// Frameworks
+?framework_category=All
+?framework_category=Ethereum
+?framework_category=Sovereign
+
+// Rollups
+?rollups_category=All
+?rollups_category=Arbitrum%20ORBIT
+?rollups_category=OP%20Stack
+?rollups_category=Polygon%20CDK
+?rollups_category=Starknet%20Stack
+```
+
+2. All possible combinations of both parameters:
+
+```
+?framework_category=All&rollups_category=All
+?framework_category=All&rollups_category=Arbitrum%20ORBIT
+?framework_category=All&rollups_category=OP%20Stack
+?framework_category=All&rollups_category=Polygon%20CDK
+?framework_category=All&rollups_category=Starknet%20Stack
+
+?framework_category=Ethereum&rollups_category=All
+?framework_category=Ethereum&rollups_category=Arbitrum%20ORBIT
+?framework_category=Ethereum&rollups_category=OP%20Stack
+?framework_category=Ethereum&rollups_category=Polygon%20CDK
+?framework_category=Ethereum&rollups_category=Starknet%20Stack
+
+?framework_category=Sovereign&rollups_category=All
+?framework_category=Sovereign&rollups_category=Arbitrum%20ORBIT
+?framework_category=Sovereign&rollups_category=OP%20Stack
+?framework_category=Sovereign&rollups_category=Polygon%20CDK
+?framework_category=Sovereign&rollups_category=Starknet%20Stack
+```
+
+3. Combinations with the possible IDs at the end to jump to sections in the same time.
+
+```
+?framework_category=All#build
+?framework_category=All#integrate
+?framework_category=All#deploy
+?framework_category=Ethereum#build
+?framework_category=Ethereum#integrate
+?framework_category=Ethereum#deploy
+// ...
+
+?rollups_category=All#build
+?rollups_category=All#integrate
+?rollups_category=All#deploy
+
+?rollups_category=Arbitrum%20ORBIT#build
+?rollups_category=Arbitrum%20ORBIT#integrate
+?rollups_category=Arbitrum%20ORBIT#deploy
+// ...
+
+?framework_category=All&rollups_category=All#build
+?framework_category=All&rollups_category=All#integrate
+?framework_category=All&rollups_category=All#deploy
+
+?framework_category=All&rollups_category=Arbitrum%20ORBIT#build
+?framework_category=All&rollups_category=Arbitrum%20ORBIT#integrate
+?framework_category=All&rollups_category=Arbitrum%20ORBIT#deploy
+// ...
+
+```
+
+**Remember that:**
+
+1. These can be appended to the base URL: `https://celestia.org/build/`
+2. You can add `#build` etc. id's at the end of any URL to anchor to the specific section.
+3. Spaces in categories should be URL-encoded (%20) in actual use.
+
+These combinations cover all possible states based on the data in the provided files. The implementation will default to "All" for any category if an invalid or non-existent category is provided in the URL parameters.

package.json

@@ -50,6 +50,7 @@
 		"jquery": "^3.6.0",
 		"lottie-react": "^2.4.0",
 		"qs": "^6.11.2",
+		"query-string": "^9.1.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-google-recaptcha": "^3.1.0",

src/components/framework-tabs.js

@@ -1,13 +1,22 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import IconCard from "./modules/icon-card";
 import { AnchorLink } from "gatsby-plugin-anchor-links";
 
 const FrameworkTabs = ({ content, categories, anchorId, section }) => {
 	const [selectedTab, setSelectedTab] = useState("All");
 
-	const allUniqueCategories = [...new Set(categories.items.flatMap((item) => item.category))];
+	useEffect(() => {
+		if (typeof window !== "undefined") {
+			const urlParams = new URLSearchParams(window.location.search);
+			const paramName = section.toLowerCase() + "_category";
+			const categoryFromUrl = urlParams.get(paramName);
+			if (categoryFromUrl && categories.items.some((item) => item.category.includes(categoryFromUrl))) {
+				setSelectedTab(categoryFromUrl);
+			}
+		}
+	}, [section, categories.items]);
 
-	console.log(allUniqueCategories);
+	const allUniqueCategories = [...new Set(categories.items.flatMap((item) => item.category))];
 
 	return (
 		<section className='frameworks' id={`${content.items[anchorId].title.replace(/\s+/g, "-").toLowerCase()}`}>
@@ -20,6 +29,7 @@ const FrameworkTabs = ({ content, categories, anchorId, section }) => {
 					{allUniqueCategories.map(function (category) {
 						return (
 							<div
+								key={category}
 								className={`col-auto tab-item ${selectedTab === category && "active"} plausible-event-name=${category.replace(
 									/\s+/g,
 									"-"

src/components/sections/integrate-section.js

@@ -9,14 +9,22 @@ const IntegrateSection = ({ content, anchorId }) => {
 						<div className={"col box me-md-1"}>
 							<div className={"title"}>Blobstream</div>
 							<div className={"text"}>Use Celestia as the DA layer for your Ethereum L2.</div>
-							<a href={"https://docs.celestia.org/developers/blobstream/"} className={"button button-simple plausible-event-name=Blobstream--Developer_Portal-Integrate_Section"} target="_blank">
+							<a
+								href={"https://docs.celestia.org/developers/blobstream/"}
+								className={"button button-simple plausible-event-name=Blobstream--Developer_Portal-Integrate_Section"}
+								target='_blank'
+							>
 								Blobstream documentation
 							</a>
 						</div>
 						<div className={"col box ms-md-1"}>
 							<div className={"title"}>Node API</div>
 							<div className={"text"}>Use the celestia-node API to publish and retrieve transactions from Celestia.</div>
-							<a href={"https://node-rpc-docs.celestia.org/?version=v0.12.0/"} className={"button button-simple plausible-event-name=Node_API--Developer_Portal-Integrate_Section"} target="_blank">
+							<a
+								href={"https://node-rpc-docs.celestia.org/?version=v0.12.0/"}
+								className={"button button-simple plausible-event-name=Node_API--Developer_Portal-Integrate_Section"}
+								target='_blank'
+							>
 								Node API Documentation
 							</a>
 						</div>

src/pages/build.js

@@ -1,4 +1,6 @@
-import * as React from "react";
+import React, { useEffect, useState } from "react";
+import { navigate } from "gatsby";
+import queryString from "query-string";
 
 import { heroData } from "../datas/build/hero-data";
 import { getStarted } from "../datas/build/get-started";
@@ -18,6 +20,28 @@ import ContactSection from "../components/sections/contact-section";
 import IntegrateSection from "../components/sections/integrate-section";
 
 const Build = () => {
+	const [isInitialized, setIsInitialized] = useState(false);
+
+	useEffect(() => {
+		if (typeof window !== "undefined" && !isInitialized) {
+			const params = queryString.parse(window.location.search);
+			const frameworkCategory = params.framework_category;
+			const rollupsCategory = params.rollups_category;
+
+			if (frameworkCategory || rollupsCategory) {
+				const newParams = {};
+				if (frameworkCategory) newParams.framework_category = frameworkCategory;
+				if (rollupsCategory) newParams.rollups_category = rollupsCategory;
+
+				const newSearch = queryString.stringify(newParams);
+				if (newSearch !== window.location.search.slice(1)) {
+					navigate(`/build?${newSearch}`, { replace: true });
+				}
+			}
+			setIsInitialized(true);
+		}
+	}, [isInitialized]);
+
 	return (
 		<Layout footerBoxes={FooterBoxes}>
 			<Seo title={seoContent.title} description={seoContent.description} ogTitle={seoContent.ogTitle} image={seoContent.image} />