diff --git a/.gitignore b/.gitignore index d0e9d4806..5f47e70ea 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,5 @@ node_modules/ package-lock.json .idea/ .env.development -.env.production \ No newline at end of file +.env.production +.vercel diff --git a/README.md b/README.md index d2ce141bd..b96844f1e 100644 --- a/README.md +++ b/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. diff --git a/package.json b/package.json index e730a24ca..cdb4645bf 100644 --- a/package.json +++ b/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", diff --git a/src/components/framework-tabs.js b/src/components/framework-tabs.js index ea7d84fec..3d85593d6 100644 --- a/src/components/framework-tabs.js +++ b/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 (
@@ -20,6 +29,7 @@ const FrameworkTabs = ({ content, categories, anchorId, section }) => { {allUniqueCategories.map(function (category) { return (
{
Blobstream
Use Celestia as the DA layer for your Ethereum L2.
- + Blobstream documentation
Node API
Use the celestia-node API to publish and retrieve transactions from Celestia.
- + Node API Documentation
diff --git a/src/pages/build.js b/src/pages/build.js index c8bce9a41..fa6903d30 100644 --- a/src/pages/build.js +++ b/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 (