Generative social cards (Consensys#486)

* article social card generation script * adding card generation as prebuild script * injecting generated social cards into <head> metadata * ESlint config update * updating node.js version for GitHub Actions * ESlint config fix * npm audit fix * minor font fix --------- Co-authored-by: oliver renwick <[email protected]>
ggramo · Mar 22, 2024 · e25ce07 · e25ce07
1 parent 18d756c
commit e25ce07
Show file tree

Hide file tree

Showing 217 changed files with 853 additions and 31 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -51,5 +51,9 @@
     "static/files/besu/config-goerli.toml",
     "static/files/besu/config-mainnet.toml"
   ],
-  "ignoreRegExpList": ["Email", "Urls", "#[\\w-]*"]
+  "ignoreRegExpList": [
+    "Email", "Urls", "#[\\w-]*",
+    "^image:\\s*([>-]\\s*)?.*$",
+    "/img/.*"
+  ]
 }
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -44,6 +44,7 @@ module.exports = {
     },
   },
   rules: {
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".tsx", ".jsx"] }],
     "import/prefer-default-export": 0,
     "react/prop-types": 0,
     "import/no-unresolved": [

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18.0
+18.17.0
diff --git a/docs/architecture/bridges/canonical-token-bridge.mdx b/docs/architecture/bridges/canonical-token-bridge.mdx
@@ -1,6 +1,7 @@
 ---
 title: Canonical Token Bridge
 sidebar_position: 1
+image: /img/socialCards/canonical-token-bridge.jpg
 ---
 
 import CodeBlock from "@theme/CodeBlock";

diff --git a/docs/architecture/bridges/index.mdx b/docs/architecture/bridges/index.mdx
@@ -1,5 +1,6 @@
 ---
 title: Bridges
+image: /img/socialCards/bridges.jpg
 ---
 
 ### Bridging is crucial to the Linea network and the ecosystem it supports.

diff --git a/docs/architecture/canonical-msg-service/index.mdx b/docs/architecture/canonical-msg-service/index.mdx
@@ -1,6 +1,7 @@
 ---
-title: "Canonical Message Service: Overview"
+title: 'Canonical Message Service: Overview'
 sidebar_position: 1
+image: /img/socialCards/canonical-message-service-overview.jpg
 ---
 
 ## Linea Canonical Message Service

diff --git a/docs/architecture/canonical-msg-service/message-service.mdx b/docs/architecture/canonical-msg-service/message-service.mdx
@@ -1,6 +1,7 @@
 ---
-title: "Message Service: Technical Reference"
+title: 'Message Service: Technical Reference'
 sidebar_position: 2
+image: /img/socialCards/message-service-technical-reference.jpg
 ---
 
 import CodeBlock from "@theme/CodeBlock";

diff --git a/docs/architecture/coordinator/index.mdx b/docs/architecture/coordinator/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Coordinator
 sidebar_position: 2
+image: /img/socialCards/coordinator.jpg
 ---
 
 ## The Coordinator

diff --git a/docs/architecture/evm-state-manager/index.mdx b/docs/architecture/evm-state-manager/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: EVM State Manager
 sidebar_position: 4
+image: /img/socialCards/evm-state-manager.jpg
 ---
 
 ## EVM State Manager

diff --git a/docs/architecture/index.mdx b/docs/architecture/index.mdx
@@ -2,6 +2,7 @@
 title: Architecture of Linea
 description: An overview of how Linea works
 sidebar: architectureSidebar
+image: /img/socialCards/architecture-of-linea.jpg
 ---
 
 # The Shape of a Line: Linea's Architecture

diff --git a/docs/architecture/network-data.md b/docs/architecture/network-data.md
@@ -1,6 +1,7 @@
 ---
 title: Network data
 sidebar_position: 7
+image: /img/socialCards/network-data.jpg
 ---
 
 ## Other Functions: Network Data

diff --git a/docs/architecture/sequencer/conflation.md b/docs/architecture/sequencer/conflation.md
@@ -1,6 +1,7 @@
 ---
 title: Conflation
 sidebar_position: 2
+image: /img/socialCards/conflation.jpg
 ---
 
 import ConflationGraphic from '/img/article_images/Architecture_of_Linea/Sequencer/Conflation/Linea_block_conflation.svg';

diff --git a/docs/architecture/sequencer/index.mdx b/docs/architecture/sequencer/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Sequencer
 sidebar_position: 3
+image: /img/socialCards/sequencer.jpg
 ---
 
 ## The sequencer

diff --git a/docs/architecture/sequencer/traces-generator.md b/docs/architecture/sequencer/traces-generator.md
@@ -1,6 +1,7 @@
 ---
 title: Traces generation
 sidebar_position: 1
+image: /img/socialCards/traces-generation.jpg
 ---
 
 ### Traces Generator

diff --git a/docs/architecture/trace-expansion-proving/index.mdx b/docs/architecture/trace-expansion-proving/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Trace Expansion and Proving
 sidebar_position: 5
+image: /img/socialCards/trace-expansion-and-proving.jpg
 ---
 
 ## Trace Expansion and Proving

diff --git a/docs/architecture/trace-expansion-proving/proving.md b/docs/architecture/trace-expansion-proving/proving.md
@@ -1,6 +1,7 @@
 ---
-title: "Proving: Circuit execution and runtime"
+title: 'Proving: Circuit execution and runtime'
 sidebar_position: 2
+image: /img/socialCards/proving-circuit-execution-and-runtime.jpg
 ---
 
 ### gnark zk-snarks

diff --git a/docs/architecture/trace-expansion-proving/trace-expansion.md b/docs/architecture/trace-expansion-proving/trace-expansion.md
@@ -1,6 +1,7 @@
 ---
-title: "Proving: Circuit building"
+title: 'Proving: Circuit building'
 sidebar_position: 1
+image: /img/socialCards/proving-circuit-building.jpg
 ---
 
 ### Corset

diff --git a/docs/architecture/transaction-lifecycle.md b/docs/architecture/transaction-lifecycle.md
@@ -1,6 +1,7 @@
 ---
 title: Transaction lifecycle
 sidebar_position: 8
+image: /img/socialCards/transaction-lifecycle.jpg
 ---
 
 Transactions on Linea mainnet and testnet proceed through the following steps:

diff --git a/docs/build-on-linea/bridge-funds.md b/docs/build-on-linea/bridge-funds.md
@@ -1,6 +1,7 @@
 ---
 title: Bridge funds
 sidebar_position: 2
+image: /img/socialCards/bridge-funds.jpg
 ---
 
 In order to start bridging on Linea, you can:

diff --git a/docs/build-on-linea/ethereum-differences.md b/docs/build-on-linea/ethereum-differences.md
@@ -1,6 +1,7 @@
 ---
 description: Ethereum and Linea differences
 sidebar_position: 4
+image: /img/socialCards/ethereum-and-linea-differences.jpg
 ---
 
 # Differences between Ethereum and Linea

diff --git a/docs/build-on-linea/gas-fees.mdx b/docs/build-on-linea/gas-fees.mdx
@@ -1,6 +1,7 @@
 ---
 description: How to estimate Linea gas costs
 sidebar_position: 6
+image: /img/socialCards/how-to-estimate-linea-gas-costs.jpg
 ---
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';
@@ -93,4 +94,4 @@ The result of the request returns hexadecimal equivalent integers of gas prices
 decimals to get the wei value. You can use any hexadecimal to decimal converter, such as
 [RapidTables](https://www.rapidtables.com/convert/number/hex-to-decimal.html).
 
-:::
+:::
diff --git a/docs/build-on-linea/goerli-to-sepolia.mdx b/docs/build-on-linea/goerli-to-sepolia.mdx
@@ -1,6 +1,7 @@
 ---
 title: Goerli to Sepolia testnet transition
 description: Advice on Linea's testnet transition for node runners and developers
+image: /img/socialCards/goerli-to-sepolia-testnet-transition.jpg
 ---
 
 In line with Ethereum mainnet, Linea's principal testnet will soon be Linea Sepolia. Although still functional, Linea Goerli is being phased out and you should make adjustments now to keep your testnet nodes and/or dapps operational.

diff --git a/docs/build-on-linea/hackathons.md b/docs/build-on-linea/hackathons.md
@@ -1,5 +1,6 @@
 ---
 title: Hackathons
+image: /img/socialCards/hackathons.jpg
 ---
 
 Looking to hack on Linea and win some bounties? Here's the page where you can find all the information you need to know to get started!

diff --git a/docs/build-on-linea/index.md b/docs/build-on-linea/index.md
@@ -1,6 +1,7 @@
 ---
-title: "Build on Linea"
+title: Build on Linea
 sidebar: developersSidebar
+image: /img/socialCards/build-on-linea.jpg
 ---
 
 To get started building on Linea, check out our [quickstart](./quickstart/index.md). Otherwise, find workshops, tutorials, and walkthroughs on our [YouTube page](https://www.youtube.com/channel/UCVOIfxxbSHfCbX6-qHsowqQ).
diff --git a/docs/build-on-linea/linea-sdk/index.md b/docs/build-on-linea/linea-sdk/index.md
@@ -1,5 +1,6 @@
 ---
 title: Linea SDK
+image: /img/socialCards/linea-sdk.jpg
 ---
 
 ## Installation

diff --git a/docs/build-on-linea/linea-version/index.mdx b/docs/build-on-linea/linea-version/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Release notes
 sidebar_position: 4
+image: /img/socialCards/release-notes.jpg
 ---
 
 import CodeBlock from "@theme/CodeBlock";

diff --git a/docs/build-on-linea/quickstart/deploy-smart-contract/atlas.md b/docs/build-on-linea/quickstart/deploy-smart-contract/atlas.md
@@ -1,5 +1,6 @@
 ---
 title: Atlas
+image: /img/socialCards/atlas.jpg
 ---
 
 Atlas is a 0-setup tool for writing, testing, and deploying smart contracts.
@@ -27,4 +28,4 @@ Want to build something bigger? Check out [this tutorial](https://www.youtube.co
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
         allowFullScreen></iframe>
     </div>
-</div>
+</div>
diff --git a/docs/build-on-linea/quickstart/deploy-smart-contract/cookbook.md b/docs/build-on-linea/quickstart/deploy-smart-contract/cookbook.md
@@ -1,5 +1,6 @@
 ---
 title: Cookbook.dev
+image: /img/socialCards/cookbookdev.jpg
 ---
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

diff --git a/docs/build-on-linea/quickstart/deploy-smart-contract/foundry.md b/docs/build-on-linea/quickstart/deploy-smart-contract/foundry.md
@@ -1,5 +1,6 @@
 ---
 title: Foundry
+image: /img/socialCards/foundry.jpg
 ---
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

diff --git a/docs/build-on-linea/quickstart/deploy-smart-contract/hardhat.mdx b/docs/build-on-linea/quickstart/deploy-smart-contract/hardhat.mdx
@@ -1,5 +1,6 @@
 ---
 title: Hardhat
+image: /img/socialCards/hardhat.jpg
 ---
 
 import Tabs from "@theme/Tabs";

diff --git a/docs/build-on-linea/quickstart/deploy-smart-contract/remix.md b/docs/build-on-linea/quickstart/deploy-smart-contract/remix.md
@@ -1,5 +1,6 @@
 ---
 title: Remix
+image: /img/socialCards/remix.jpg
 ---
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

diff --git a/docs/build-on-linea/quickstart/deploy-smart-contract/thirdweb.md b/docs/build-on-linea/quickstart/deploy-smart-contract/thirdweb.md
@@ -1,5 +1,6 @@
 ---
 title: thirdweb
+image: /img/socialCards/thirdweb.jpg
 ---
 
 thirdweb is a complete web3 development framework that provides everything you need to connect your apps and games to decentralized networks.

diff --git a/docs/build-on-linea/quickstart/index.md b/docs/build-on-linea/quickstart/index.md
@@ -1,6 +1,7 @@
 ---
 title: Building on Linea
 sidebar_position: 1
+image: /img/socialCards/building-on-linea.jpg
 ---
 
 # Building on Linea

diff --git a/docs/build-on-linea/quickstart/rpc.md b/docs/build-on-linea/quickstart/rpc.md
@@ -2,6 +2,7 @@
 title: JSON-RPC API
 description: Linea uses the Ethereum JSON-RPC API
 sidebar_position: 6
+image: /img/socialCards/json-rpc-api.jpg
 ---
 
 # JSON-RPC API

diff --git a/docs/build-on-linea/quickstart/verify-smart-contract/atlas.md b/docs/build-on-linea/quickstart/verify-smart-contract/atlas.md
@@ -1,5 +1,6 @@
 ---
 title: Atlas
+image: /img/socialCards/atlas.jpg
 ---
 
 Your contracts verify automatically on Atlas 😊
diff --git a/docs/build-on-linea/quickstart/verify-smart-contract/foundry.md b/docs/build-on-linea/quickstart/verify-smart-contract/foundry.md
@@ -1,5 +1,6 @@
 ---
 title: Foundry
+image: /img/socialCards/foundry.jpg
 ---
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

diff --git a/docs/build-on-linea/quickstart/verify-smart-contract/hardhat.md b/docs/build-on-linea/quickstart/verify-smart-contract/hardhat.md
@@ -1,5 +1,6 @@
 ---
 title: Hardhat
+image: /img/socialCards/hardhat.jpg
 ---
 
 To verify your Hardhat contracts, you can use [Hardhat's Etherscan plugin](https://hardhat.org/hardhat-runner/plugins/nomiclabs-hardhat-etherscan) to verify contracts on Lineascan.

diff --git a/docs/build-on-linea/run-a-node/index.md b/docs/build-on-linea/run-a-node/index.md
@@ -1,5 +1,6 @@
 ---
 description: Run a Linea node.
+image: /img/socialCards/run-a-linea-node.jpg
 ---
 
 import DocCardList from "@theme/DocCardList";

diff --git a/docs/build-on-linea/run-a-node/use-binary.mdx b/docs/build-on-linea/run-a-node/use-binary.mdx
@@ -1,5 +1,6 @@
 ---
 description: Install the Besu or Geth client to run a Linea node.
+image: /img/socialCards/install-the-besu-or-geth-client-to-run-a-linea-node.jpg
 ---
 
 import Tabs from "@theme/Tabs";
@@ -228,4 +229,4 @@ You should get a result, similar to:
     "highestBlock": "0x3cedec"
   }
 }
-```
+```
diff --git a/docs/build-on-linea/run-a-node/use-docker.mdx b/docs/build-on-linea/run-a-node/use-docker.mdx
@@ -1,5 +1,6 @@
 ---
 description: Use Docker to run a Besu or Geth client as a Linea node.
+image: /img/socialCards/use-docker-to-run-a-besu-or-geth-client-as-a-linea-node.jpg
 ---
 
 import Tabs from "@theme/Tabs";
@@ -122,4 +123,4 @@ You should get a result, similar to:
     "highestBlock": "0x3cedec"
   }
 }
-```
+```
diff --git a/docs/build-on-linea/run-a-node/volume-creation.mdx b/docs/build-on-linea/run-a-node/volume-creation.mdx
@@ -1,5 +1,6 @@
 ---
-title: "Creating a Custom Volume"
+title: Creating a Custom Volume
+image: /img/socialCards/creating-a-custom-volume.jpg
 ---
 
 :::note

diff --git a/docs/build-on-linea/tooling/account-abstraction/account-abstraction.mdx b/docs/build-on-linea/tooling/account-abstraction/account-abstraction.mdx
@@ -1,5 +1,6 @@
 ---
 title: Account abstraction
+image: /img/socialCards/account-abstraction.jpg
 ---
 
 `Account abstraction` is a broad category of fast-moving development in the Ethereum ecosystem. It generally refers to different ways to create and manage accounts, other than using a Secret Recovery Phrase and a wallet.

diff --git a/docs/build-on-linea/tooling/account-abstraction/arcana.md b/docs/build-on-linea/tooling/account-abstraction/arcana.md
@@ -1,5 +1,6 @@
 ---
 title: Arcana
+image: /img/socialCards/arcana.jpg
 ---
 
 # Gasless Transactions

diff --git a/docs/build-on-linea/tooling/account-abstraction/biconomy.md b/docs/build-on-linea/tooling/account-abstraction/biconomy.md
@@ -1,5 +1,6 @@
 ---
 title: Biconomy
+image: /img/socialCards/biconomy.jpg
 ---
 
 ## Superpowers for your Web3 stack

diff --git a/docs/build-on-linea/tooling/account-abstraction/etherspot.md b/docs/build-on-linea/tooling/account-abstraction/etherspot.md
@@ -1,5 +1,6 @@
 ---
 title: Etherspot
+image: /img/socialCards/etherspot.jpg
 ---
 
 ## Robust ERC4337 infrastructure for seamless web3 development

diff --git a/docs/build-on-linea/tooling/account-abstraction/noves.md b/docs/build-on-linea/tooling/account-abstraction/noves.md
@@ -1,5 +1,6 @@
 ---
 title: Noves
+image: /img/socialCards/noves.jpg
 ---
 
 ## Advanced data tooling for account abstraction

diff --git a/docs/build-on-linea/tooling/account-abstraction/oklink.md b/docs/build-on-linea/tooling/account-abstraction/oklink.md
@@ -1,5 +1,6 @@
 ---
 title: OKLink
+image: /img/socialCards/oklink.jpg
 ---
 
 [OKLink](https://www.oklink.com/) is a one-stop blockchain data platform covering a wide range of on-chain metrics. 
@@ -12,4 +13,4 @@ OKLink provides on-chain information, prioritizing accessibility by simplifying
 
 2. [View the transaction list for ERC-4337](https://www.oklink.com/linea/address/0x7fb5aa2a66bd08c61956bd29df4da48cc63d66d9/aa): can view all ERC-4337 transactions related to the address.
 
-3. [View the details page of the Entry Point](https://www.oklink.com/linea/address/0x5ff137d4b0fdcd49dca30c7cf57e578a026d2789/contract): supports viewing transactions, contract details, and performing contract read and write operations.
+3. [View the details page of the Entry Point](https://www.oklink.com/linea/address/0x5ff137d4b0fdcd49dca30c7cf57e578a026d2789/contract): supports viewing transactions, contract details, and performing contract read and write operations.
diff --git a/docs/build-on-linea/tooling/account-abstraction/particle-network.md b/docs/build-on-linea/tooling/account-abstraction/particle-network.md
@@ -1,5 +1,6 @@
 ---
 title: Particle Network
+image: /img/socialCards/particle-network.jpg
 ---
 
 ## Smart Wallet-as-a-Service on Linea