Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Breadcrumbs on Desktop and Mobile #1001

Merged
merged 20 commits into from
Oct 25, 2024
+1,041 −1
Merged

Fix Breadcrumbs on Desktop and Mobile #1001

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
7980202
fix breadcrumb
krofax Oct 18, 2024
1169966
Create an automation script
krofax Oct 18, 2024
fbc2ca8
updated scripts
krofax Oct 18, 2024
f7411ae
update script commad
krofax Oct 18, 2024
0bead81
create breadcrumbs
krofax Oct 18, 2024
598285d
update the breadcrumb result
krofax Oct 18, 2024
d497a48
updated the breadcrumb contents
krofax Oct 18, 2024
081c329
remove comments
krofax Oct 18, 2024
b832d2f
fix lint issues
krofax Oct 18, 2024
e10fafa
Apply suggestions from code review
sbvegan Oct 22, 2024
2b7cbea
Add descriptions
krofax Oct 24, 2024
5d10446
fix lint issues
krofax Oct 24, 2024
1a635fa
updated lyche
krofax Oct 24, 2024
83d183b
use OP stack instead of OP mainnet
krofax Oct 24, 2024
0a42b36
clean the code
krofax Oct 24, 2024
91013c7
update text
krofax Oct 24, 2024
d766fbf
fix lint issues
krofax Oct 24, 2024
10183e7
Merge branch 'main' into breadcrumbs
krofax Oct 24, 2024
1f7af32
wrote docs for teh script
krofax Oct 24, 2024
c502be9
updated content
krofax Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion lychee.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ exclude = [
'https://archive.org',
'https://web.archive.org',
'https://mainnet.base.org',
'https://sepolia.base.org'
'https://sepolia.base.org',
'https://optimism.easscan.org'
]

# Accept these status codes
Expand Down
36 changes: 36 additions & 0 deletions notes/breadcrumbs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# Documentation Breadcrumbs Script
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Add reference to breadcrumbs documentation in CONTRIBUTING.md

Based on the content review, while we have a comprehensive CONTRIBUTING.md file that guides contributors through the documentation process, it should include a reference to the breadcrumbs documentation to help future contributors discover and understand this important documentation feature.

  • Add a reference to the breadcrumbs documentation under the "Files and Folders Architecture" section in CONTRIBUTING.md
🔗 Analysis chain

Add reference to this guide in README

As suggested in the PR comments, consider adding a reference to this breadcrumbs documentation in the repository's README or contributing guidelines to help future contributors discover it.

Let's check if the README exists and its current content:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if README exists and look for any existing breadcrumb documentation references
if [ -f README.md ]; then
    echo "Checking README.md for breadcrumb documentation references..."
    rg -i "breadcrumb" README.md
fi

Length of output: 184

Script:

#!/bin/bash
# First check if README.md exists and get its content
if [ -f README.md ]; then
    echo "=== README.md content ==="
    cat README.md
fi

# Also check for any documentation-related files in docs/ directory
echo -e "\n=== Looking for documentation files ==="
fd -t f . docs/ || true

# Check for any contributing guidelines
echo -e "\n=== Looking for contributing guidelines ==="
fd -i "contributing" || true

Length of output: 1649

Script:

#!/bin/bash
# Let's check the content of CONTRIBUTING.md for any existing documentation guidelines
echo "=== CONTRIBUTING.md content ==="
cat CONTRIBUTING.md

# Also check the style guide mentioned in README
echo -e "\n=== Style Guide content ==="
cat "pages/connect/contribute/style-guide.mdx" || true

Length of output: 42495


Quick guide on using our breadcrumbs automation script for the OP Stack documentation.

## What the Script Does

* Creates `.mdx` files for each folder (breadcrumb pages)
* Populates Card components linking to contained files
* Preserves existing descriptions that already
* Maintains consistent navigation structure

Comment on lines +5 to +11
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix incomplete sentence and add missing features

There's an incomplete sentence on line 9, and the overview should include all key features mentioned in the PR objectives.

Apply this diff to fix and enhance the overview:

 ## What the Script Does

 *   Creates `.mdx` files for each folder (breadcrumb pages)
 *   Populates Card components linking to contained files
-*   Preserves existing descriptions that already
+*   Preserves existing descriptions that are already present
 *   Maintains consistent navigation structure
+*   Updates terminology from "OP Mainnet" to "OP Stack"
+*   Applies Title Case formatting to headers and titles
+*   Prevents duplicate updates by checking existing content
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
## What the Script Does
* Creates `.mdx` files for each folder (breadcrumb pages)
* Populates Card components linking to contained files
* Preserves existing descriptions that already
* Maintains consistent navigation structure
## What the Script Does
* Creates `.mdx` files for each folder (breadcrumb pages)
* Populates Card components linking to contained files
* Preserves existing descriptions that are already present
* Maintains consistent navigation structure
* Updates terminology from "OP Mainnet" to "OP Stack"
* Applies Title Case formatting to headers and titles
* Prevents duplicate updates by checking existing content

## Using the Script

Breadcrumbs for the docs can be generated by running:

```bash
pnpm create-breadcrumbs
```

### What to Watch For

1. **Before Running**
* Commit your current changes
* Ensure you're in the docs root directory
* Target folders should exist: `builders`, `chain`, `stack`, `connect`

2. **After Running**
* Review generated `.mdx` files in each folder
* Check updated descriptions
* Verify Card components and links

## Common Issues

* ***Script fails**: Ensure you're in the root directory
* **No files generated**: Check folder structure matches expected paths
* **Unexpected content**: Review git diff before committing
Comment on lines +34 to +36
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix formatting and add more troubleshooting scenarios

There's a formatting issue in the first bullet point, and more common scenarios should be added.

Apply this diff to fix formatting and enhance troubleshooting:

-*   ***Script fails**: Ensure you're in the root directory
+*   **Script fails**: Ensure you're in the root directory
 *   **No files generated**: Check folder structure matches expected paths
 *   **Unexpected content**: Review git diff before committing
+*   **Inconsistent terminology**: Run script again to update all "OP Mainnet" references
+*   **Incorrect title formatting**: Verify Title Case is applied correctly
+*   **Mobile display issues**: Check breadcrumb wrapping on smaller screens
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
* ***Script fails**: Ensure you're in the root directory
* **No files generated**: Check folder structure matches expected paths
* **Unexpected content**: Review git diff before committing
* **Script fails**: Ensure you're in the root directory
* **No files generated**: Check folder structure matches expected paths
* **Unexpected content**: Review git diff before committing
* **Inconsistent terminology**: Run script again to update all "OP Mainnet" references
* **Incorrect title formatting**: Verify Title Case is applied correctly
* **Mobile display issues**: Check breadcrumb wrapping on smaller screens

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"spellcheck:lint": "cspell lint \"**/*.mdx\"",
"spellcheck:fix": "cspell --words-only --unique \"**/*.mdx\" | sort --ignore-case | uniq > words.txt",
"linkcheck": "lychee --config ./lychee.toml --quiet \"./pages\"",
"create-breadcrumbs":"npx ts-node --skip-project utils/create-breadcrumbs.ts",
"index:docs": "npx ts-node --skip-project utils/algolia-indexer.ts",
"dev": "next dev",
"build": "next build",
Expand Down
20 changes: 20 additions & 0 deletions pages/builders.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
title: Builders
lang: en-US
description: Learn about deploying contracts, cross-chain messaging, and tutorials to help you build applications on OP Mainnet.
---

import { Card, Cards } from 'nextra/components'

# Builders

Welcome to the Builders section. Here you'll find resources and guides for developers, operators, and other stakeholders involved in building on OP Stack. Explore the categories below to find the information you need.

<Cards>
<Card title="Notices" href="/builders/notices" />
<Card title="App Developers" href="/builders/app-developers" />
<Card title="Chain Operators" href="/builders/chain-operators" />
<Card title="Node Operators" href="/builders/node-operators" />
<Card title="Wallets & CEXs" href="/builders/cex-wallet-developers" />
<Card title="Developer Tools" href="/builders/tools" />
</Cards>
28 changes: 28 additions & 0 deletions pages/builders/app-developers.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
title: App Developers
lang: en-US
description: Essential resources for app developers building on the OP Stack, including guides for deploying contracts, handling transactions, and cross-chain messaging.
---

import { Card, Cards } from 'nextra/components'

# App Developers

Welcome to the App Developers section, where you'll find essential resources for deploying contracts, handling transactions, cross-chain messaging, and more.
Access quick-start guides, tutorials, and tools to help you build applications on the OP Stack efficiently

<Cards>
<Card title="Overview" href="/builders/app-developers/overview" />

<Card title="Superchain App Quick Start" href="/builders/app-developers/quick-start" />

<Card title="Tutorials" href="/builders/app-developers/tutorials" />

<Card title="Smart Contracts" href="/builders/app-developers/contracts" />

<Card title="Transactions" href="/builders/app-developers/transactions" />

<Card title="Bridging" href="/builders/app-developers/bridging" />

<Card title="App Tools" href="/builders/app-developers/tools" />
</Cards>
21 changes: 21 additions & 0 deletions pages/builders/app-developers/bridging.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
title: Bridging
lang: en-US
description: Learn about bridging basics, custom bridges, data transmission between L1 and L2, and using the standard bridge in OP Stack.
---

import { Card, Cards } from 'nextra/components'

# Bridging

This section provides information on bridging basics, custom bridges, sending data between l1 and l2 and using the standard bridge. You'll find guide, overview to help you understand and work with these topics.

<Cards>
<Card title="Bridging basics" href="/builders/app-developers/bridging/basics" />

<Card title="Custom bridges" href="/builders/app-developers/bridging/custom-bridge" />

<Card title="Sending data between l1 and l2" href="/builders/app-developers/bridging/messaging" />

<Card title="Using the standard bridge" href="/builders/app-developers/bridging/standard-bridge" />
</Cards>
21 changes: 21 additions & 0 deletions pages/builders/app-developers/contracts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
title: Contracts
lang: en-US
description: >-
Information on Solidity compatibility, contract optimization, and system
contracts for OP Stack.
---

import { Card, Cards } from 'nextra/components'

# Contracts

This section provides information on Solidity compatibility, contract optimization on OP Stack, and using OP Stack system contracts. You'll find guides and tutorials to help you understand and work with these topics.

<Cards>
<Card title="Solidity Compatibility" href="/builders/app-developers/contracts/compatibility" />

<Card title="Contract Optimization on OP Stack" href="/builders/app-developers/contracts/optimization" />

<Card title="Using OP Stack System Contracts" href="/builders/app-developers/contracts/system-contracts" />
</Cards>
17 changes: 17 additions & 0 deletions pages/builders/app-developers/tools.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
title: Tools
lang: en-US
description: Information on open-source code repositories for OP Stack builders and SuperSim.
---

import { Card, Cards } from 'nextra/components'

# Tools

This section provides information on open-source code repositories for OP Stack builders and SuperSim. Users will find references to help understand and work with these topics.

<Cards>
<Card title="Open-Source Code Repository for OP Stack Builders" href="/builders/app-developers/tools/ecosystem-overview" />

<Card title="SuperSim" href="/builders/app-developers/tools/supersim" />
</Cards>
5 changes: 5 additions & 0 deletions pages/builders/app-developers/tools/supersim.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
---
title: Supersim
lang: en-US
description: >-
Learn about supersim in the Optimism ecosystem. This guide provides detailed
information and resources about supersim.
---

import Supersim from '@/pages/stack/interop/supersim.mdx'
Expand Down
25 changes: 25 additions & 0 deletions pages/builders/app-developers/transactions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
---
title: Transactions
lang: en-US
description: >-
Guide to understanding and working with transactions on OP Stack, including
fee estimation, gas parameters, and troubleshooting.
---

import { Card, Cards } from 'nextra/components'

# Transactions

This section provides information on transactions in OP Mainnet, including fee estimation, gas parameters, transaction statuses, and troubleshooting. You'll find guides to help you understand and work with these topics.

<Cards>
<Card title="Estimating Transaction Fees on OP Mainnet" href="/builders/app-developers/transactions/estimates" />

<Card title="Understanding Fees on OP Mainnet" href="/builders/app-developers/transactions/fees" />

<Card title="Setting Transaction Gas Parameters on OP Mainnet" href="/builders/app-developers/transactions/parameters" />

<Card title="Transaction Statuses on OP Mainnet" href="/builders/app-developers/transactions/statuses" />

<Card title="Troubleshooting Transactions on OP Mainnet" href="/builders/app-developers/transactions/troubleshooting" />
</Cards>
5 changes: 5 additions & 0 deletions pages/builders/app-developers/transactions/fees.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
---
title: TransactionFees
lang: en-US
description: >-
Learn about fees in the Optimism ecosystem. This guide provides detailed
information and resources about fees.
---

import TransactionFees from '@/pages/stack/transactions/fees.mdx'
Expand Down
33 changes: 33 additions & 0 deletions pages/builders/app-developers/tutorials.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
title: Tutorials
lang: en-US
description: A collection of tutorials for app developers building on OP Stack, covering topics such as bridging tokens, deploying contracts, and estimating transaction costs.
---

import { Card, Cards } from 'nextra/components'

# Tutorials

This section provides information on bridging erc 20 tokens to op mainnet with the optimism sdk, bridging eth to op mainnet with the optimism sdk, communicating between op mainnet and ethereum in solidity, deploying your first contract on op mainnet, estimating transaction costs on op mainnet, tracing deposits and withdrawals, viewing deposits and withdrawals by address, triggering op mainnet transactions from ethereum, bridging your custom erc 20 token using the standard bridge and bridging your standard erc 20 token using the standard bridge. You'll find tutorial to help you understand and work with these topics.

<Cards>
<Card title="Bridging erc 20 tokens to op mainnet with the optimism sdk" href="/builders/app-developers/tutorials/cross-dom-bridge-erc20" />

<Card title="Bridging eth to op mainnet with the optimism sdk" href="/builders/app-developers/tutorials/cross-dom-bridge-eth" />

<Card title="Communicating between op mainnet and ethereum in solidity" href="/builders/app-developers/tutorials/cross-dom-solidity" />

<Card title="Deploying your first contract on op mainnet" href="/builders/app-developers/tutorials/first-contract" />

<Card title="Estimating transaction costs on op mainnet" href="/builders/app-developers/tutorials/sdk-estimate-costs" />

<Card title="Tracing deposits and withdrawals" href="/builders/app-developers/tutorials/sdk-trace-txns" />

<Card title="Viewing deposits and withdrawals by address" href="/builders/app-developers/tutorials/sdk-view-txns" />

<Card title="Triggering op mainnet transactions from ethereum" href="/builders/app-developers/tutorials/send-tx-from-eth" />

<Card title="Bridging your custom erc 20 token using the standard bridge" href="/builders/app-developers/tutorials/standard-bridge-custom-token" />

<Card title="Bridging your standard erc 20 token using the standard bridge" href="/builders/app-developers/tutorials/standard-bridge-standard-token" />
</Cards>
19 changes: 19 additions & 0 deletions pages/builders/cex-wallet-developers.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
title: CEX Wallet Developers
description: >-
This section provides information on supporting OP Stack in your exchange and
supporting OP Stack in your wallet. You'll find guide to help you...
Comment on lines +3 to +5
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix grammatical error in the description

The word "guide" should be plural as it refers to multiple guides.

  This section provides information on supporting OP Stack in your exchange and
- supporting OP Stack in your wallet. You'll find guide to help you...
+ supporting OP Stack in your wallet. You'll find guides to help you...
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
description: >-
This section provides information on supporting OP Stack in your exchange and
supporting OP Stack in your wallet. You'll find guide to help you...
description: >-
This section provides information on supporting OP Stack in your exchange and
supporting OP Stack in your wallet. You'll find guides to help you...

lang: en-US
---

import { Card, Cards } from 'nextra/components'

# CEX Wallet Developers

This section provides information on supporting op mainnet in your exchange and supporting op mainnet in your wallet. You'll find guide to help you understand and work with these topics.

<Cards>
<Card title="Supporting op mainnet in your exchange" href="/builders/cex-wallet-developers/cex-support" />

<Card title="Supporting op mainnet in your wallet" href="/builders/cex-wallet-developers/wallet-support" />
</Cards>
31 changes: 31 additions & 0 deletions pages/builders/chain-operators.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
title: Chain Operators
lang: en-US
description: Information on chain architecture, configuration, deployment, and management for OP Stack chain operators.
---

import { Card, Cards } from 'nextra/components'

# Chain operators

This section provides information on chain architecture, configuration, deployment, features, hacks, management, and how to start a self-hosted chain. You'll also find tools, APIs, overviews, guides, and introductions to help you understand and work with these topics.

<Cards>
<Card title="Chain architecture" href="/builders/chain-operators/architecture" />

<Card title="Configuration" href="/builders/chain-operators/configuration" />

<Card title="Deployment" href="/builders/chain-operators/deploy" />

<Card title="Features" href="/builders/chain-operators/features" />

<Card title="Hacks" href="/builders/chain-operators/hacks" />

<Card title="Management" href="/builders/chain-operators/management" />

<Card title="How to Start a Self-Hosted Chain" href="/builders/chain-operators/self-hosted" />

<Card title="Tools" href="/builders/chain-operators/tools" />

<Card title="Tutorials" href="/builders/chain-operators/tutorials" />
</Cards>
21 changes: 21 additions & 0 deletions pages/builders/chain-operators/configuration.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
title: Configuration
lang: en-US
description: Overview of configuration options for batchers, chain operators, proposers, and rollup deployments.
---

import { Card, Cards } from 'nextra/components'

# Configuration

This section provides information on batcher configuration, chain operator configurations, proposer configuration, and rollup deployment configuration. Users will find API references and overviews to help understand and work with these topics.

<Cards>
<Card title="Batcher configuration" href="/builders/chain-operators/configuration/batcher" />

<Card title="Chain operator configurations" href="/builders/chain-operators/configuration/overview" />

<Card title="Proposer configuration" href="/builders/chain-operators/configuration/proposer" />

<Card title="Rollup deployment configuration" href="/builders/chain-operators/configuration/rollup" />
</Cards>
19 changes: 19 additions & 0 deletions pages/builders/chain-operators/deploy.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
title: Deploy
lang: en-US
description: Information on OP Stack genesis creation, deployment overview, and smart contract deployment.
---

import { Card, Cards } from 'nextra/components'

# Deploy

This section provides information on OP Stack genesis creation, deployment overview, and smart contract deployment. You'll find guides and overviews to help you understand and work with these topics.

<Cards>
<Card title="Op stack genesis creation" href="/builders/chain-operators/deploy/genesis" />

<Card title="Op stack deployment overview" href="/builders/chain-operators/deploy/overview" />

<Card title="Op stack smart contract deployment" href="/builders/chain-operators/deploy/smart-contracts" />
</Cards>
25 changes: 25 additions & 0 deletions pages/builders/chain-operators/features.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
---
title: Features
lang: en-US
description: >-
Learn about features in the Optimism ecosystem. This guide provides detailed
information and resources about features.
---

import { Card, Cards } from 'nextra/components'

# Features

This section provides information on various features for chain operators. You'll find guides and overviews to help you understand and work with topics such as running an alternative data availability mode chain, implementing the bridged USDC standard on the OP Stack, running a custom gas token chain, OP Stack preinstalls, and span batches.

<Cards>
<Card title="How to run an alt Da mode chain" href="/builders/chain-operators/features/alt-da-mode" />

<Card title="Bridged usdc standard on the op stack" href="/builders/chain-operators/features/bridged-usdc-standard" />

<Card title="How to run a custom gas token chain" href="/builders/chain-operators/features/custom-gas-token" />

<Card title="Op stack preinstalls" href="/builders/chain-operators/features/preinstalls" />

<Card title="Span batches" href="/builders/chain-operators/features/span-batches" />
</Cards>
27 changes: 27 additions & 0 deletions pages/builders/chain-operators/hacks.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
title: Hacks
lang: en-US
description: >-
Learn about hacks in the Optimism ecosystem. This guide provides detailed
information and resources about hacks.
---

import { Card, Cards } from 'nextra/components'

# Hacks

This section provides information on various types of hacks related to OP Stack, including data availability, derivation, execution, and settlement. You'll find an overview and introduction to help you understand and work with these topics, as well as featured hacks for practical examples.

<Cards>
<Card title="Data availability hacks" href="/builders/chain-operators/hacks/data-availability" />

<Card title="Derivation hacks" href="/builders/chain-operators/hacks/derivation" />

<Card title="Execution hacks" href="/builders/chain-operators/hacks/execution" />

<Card title="Featured hacks" href="/builders/chain-operators/hacks/featured-hacks" />

<Card title="Introduction to op stack hacks" href="/builders/chain-operators/hacks/overview" />

<Card title="Settlement hacks" href="/builders/chain-operators/hacks/settlement" />
</Cards>
Loading
Loading