From c31393b4edece4832ca8f3f2eccd6200710ff13b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Blanchemain?= Date: Wed, 29 Jan 2025 11:51:09 -0800 Subject: [PATCH 1/4] feat: add vanilla admonition component --- .../vanilla-admonition-test-page.mdx | 42 ++++++++++ website/sidebars.js | 51 +++++++----- .../VanillaAdmonition/Icons/index.tsx | 46 ++++++++++ .../components/VanillaAdmonition/index.tsx | 39 +++++++++ .../VanillaAdmonition/styles.module.css | 83 +++++++++++++++++++ 5 files changed, 238 insertions(+), 23 deletions(-) create mode 100644 arbitrum-docs/vanilla-admonition-test-page.mdx create mode 100644 website/src/components/VanillaAdmonition/Icons/index.tsx create mode 100644 website/src/components/VanillaAdmonition/index.tsx create mode 100644 website/src/components/VanillaAdmonition/styles.module.css diff --git a/arbitrum-docs/vanilla-admonition-test-page.mdx b/arbitrum-docs/vanilla-admonition-test-page.mdx new file mode 100644 index 000000000..20dd892e7 --- /dev/null +++ b/arbitrum-docs/vanilla-admonition-test-page.mdx @@ -0,0 +1,42 @@ +--- +title: 'Vanilla Admonition test page' +description: 'Vanilla Admonition test page' +author: anegg0 +sme: anegg0 +sidebar_position: 1 +content_type: how-to +--- + +import { VanillaAdmonition } from '@site/src/components/VanillaAdmonition'; + +## Vanilla Admonitions examples + + + This is an info message + + + + This is an info message + + + + This is an info message + + + + This is an info message + + +## Regular Docusaurus Admonitions + +:::caution Avoid Losing Funds! + +If a ticket expires after 7 days without being redeemed or re-scheduled to a future date, any message and value (other than the escrowed `callvalue`) it carries could be lost without possibility of being recovered. + +::: + +:::info Example scripts available in the Orbit SDK + +This section will explain the process of deploying and configuring a distribution contract manually, but the Orbit SDK includes an [example to perform this process through a script](https://github.com/OffchainLabs/arbitrum-orbit-sdk/tree/main/examples/setup-fee-distributor-contract). + +::: diff --git a/website/sidebars.js b/website/sidebars.js index 5cf566543..a6e474ac0 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -12,6 +12,11 @@ const sidebars = { label: 'Welcome', collapsed: false, items: [ + { + type: 'doc', + id: 'vanilla-admonition-test-page', + label: 'Vanilla admonition test page', + }, { type: 'doc', id: 'welcome/arbitrum-gentle-introduction', @@ -238,7 +243,7 @@ const sidebars = { items: [ { type: 'doc', - id: 'launch-orbit-chain/orbit-gentle-introduction', + id: 'launch-orbit-chain/a-gentle-introduction', label: 'A gentle introduction', }, { @@ -258,12 +263,12 @@ const sidebars = { items: [ { type: 'doc', - id: 'launch-orbit-chain/how-tos/orbit-managing-state-growth', + id: 'launch-orbit-chain/maintain-your-chain/guidance/state-growth', label: `Manage gas state growth`, }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/orbit-managing-gas-speed-limit', + id: 'launch-orbit-chain/maintain-your-chain/guidance/state-size-limit', label: `Manage gas speed limit`, }, ], @@ -280,17 +285,17 @@ const sidebars = { }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/orbit-sdk-deploying-rollup-chain', + id: 'launch-orbit-chain/deploy-an-orbit-chain/deploying-rollup-chain', label: `Rollup Orbit Deployment`, }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/orbit-sdk-deploying-anytrust-chain', + id: 'launch-orbit-chain/deploy-an-orbit-chain/deploying-anytrust-chain', label: `AnyTrust Orbit Deployment`, }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/orbit-sdk-deploying-custom-gas-token-chain', + id: 'launch-orbit-chain/deploy-an-orbit-chain/deploying-custom-gas-token-chain', label: `Custom Gas Token Orbit Deployment`, }, { @@ -300,12 +305,12 @@ const sidebars = { }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/orbit-sdk-deploying-token-bridge', + id: 'launch-orbit-chain/deploy-an-orbit-chain/deploying-token-bridge', label: `Token bridge deployment`, }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/orbit-sdk-configuring-orbit-chain', + id: 'launch-orbit-chain/deploy-an-orbit-chain/configuring-orbit-chain', label: `Orbit Chain Configuration`, }, ], @@ -327,17 +332,17 @@ const sidebars = { }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/use-a-custom-gas-token', + id: 'launch-orbit-chain/configure-your-chain/common-configurations/use-a-custom-gas-token', label: `Use a custom gas token`, }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/customize-precompile', + id: 'launch-orbit-chain/customize-your-chain/customize-precompile', label: `Customize your chain's precompiles`, }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/customize-stf', + id: 'launch-orbit-chain/customize-your-chain/customize-stf', label: `Customize your chain's behavior`, }, { @@ -348,21 +353,21 @@ const sidebars = { { type: 'doc', id: 'launch-orbit-chain/how-tos/manage-fee-collectors', - label: `Manage the fee collectors`, + label: `Manage the fee parameters`, }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/customize-arbos', + id: 'launch-orbit-chain/customize-your-chain/customize-arbos', label: `Customize ArbOS version`, }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/usdc-standard-bridge', + id: 'launch-orbit-chain/third-party-integrations/bridged-usdc-standard', label: `Implement Circle bridged USDC`, }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/fast-withdrawals', + id: 'launch-orbit-chain/configure-your-chain/advanced-configurations/fast-withdrawals', label: `Enable fast withdrawals`, }, { @@ -372,17 +377,17 @@ const sidebars = { items: [ { type: 'doc', - id: 'launch-orbit-chain/aep-fee-router-introduction', + id: 'launch-orbit-chain/configure-your-chain/common-configurations/aep-fee-router-introduction', label: `AEP fee router overview`, }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/set-up-aep-fee-router', + id: 'launch-orbit-chain/configure-your-chain/common-configurations/set-up-aep-fee-router', label: `Set up AEP fee router`, }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/calculate-aep-fees', + id: 'launch-orbit-chain/configure-your-chain/common-configurations/calculate-aep-fees', label: `Calculate AEP license fees`, }, ], @@ -403,7 +408,7 @@ const sidebars = { }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/arbos-upgrade', + id: 'launch-orbit-chain/configure-your-chain/common-configurations/arbos-upgrade', label: `Upgrade ArbOS`, }, ], @@ -444,7 +449,7 @@ const sidebars = { }, { type: 'doc', - id: 'launch-orbit-chain/reference/monitoring-tools-and-considerations', + id: 'launch-orbit-chain/deploy-an-orbit-chain/monitoring-tools-and-considerations', label: 'Monitoring tools and considerations', }, { @@ -454,7 +459,7 @@ const sidebars = { }, { type: 'doc', - id: 'launch-orbit-chain/how-tos/add-orbit-chain-to-bridge-ui', + id: 'launch-orbit-chain/ecosystem-support/add-orbit-chain-to-bridge-ui', label: `Add your chain to the bridge`, }, { @@ -479,12 +484,12 @@ const sidebars = { }, { type: 'doc', - id: 'launch-orbit-chain/infra-options-orbit-chains', + id: 'launch-orbit-chain/third-party-integrations/third-party-providers', label: 'Third-party infrastructure providers', }, { type: 'doc', - id: 'launch-orbit-chain/troubleshooting-building-orbit', + id: 'launch-orbit-chain/faq-troubleshooting/troubleshooting-building-orbit', label: 'FAQ', }, ], diff --git a/website/src/components/VanillaAdmonition/Icons/index.tsx b/website/src/components/VanillaAdmonition/Icons/index.tsx new file mode 100644 index 000000000..f67a911f6 --- /dev/null +++ b/website/src/components/VanillaAdmonition/Icons/index.tsx @@ -0,0 +1,46 @@ +import React from 'react'; + +export const DangerIcon = (props: React.SVGProps) => ( + + + +); + +export const InfoIcon = (props: React.SVGProps) => ( + + + +); + +export const NoteIcon = (props: React.SVGProps) => ( + + + +); + +export const TipIcon = (props: React.SVGProps) => ( + + + +); + +export const WarningIcon = (props: React.SVGProps) => ( + + + +); diff --git a/website/src/components/VanillaAdmonition/index.tsx b/website/src/components/VanillaAdmonition/index.tsx new file mode 100644 index 000000000..d1cb6f7b6 --- /dev/null +++ b/website/src/components/VanillaAdmonition/index.tsx @@ -0,0 +1,39 @@ +import React, { ReactNode } from 'react'; +import { DangerIcon, InfoIcon, NoteIcon, TipIcon, WarningIcon } from './Icons'; +import styles from './styles.module.css'; + +type AdmonitionType = 'note' | 'tip' | 'info' | 'warning' | 'danger'; + +interface AdmonitionProps { + type: AdmonitionType; + title?: string; + children: ReactNode; +} + +const defaultTitles: Record = { + note: 'Note', + tip: 'Tip', + info: 'Info', + warning: 'Warning', + danger: 'Danger', +}; + +const icons: Record = { + note: , + tip: , + info: , + warning: , + danger: , +}; + +export function VanillaAdmonition({ type, title, children }: AdmonitionProps) { + return ( +
+
+ {icons[type]} + {title || defaultTitles[type]} +
+
{children}
+
+ ); +} diff --git a/website/src/components/VanillaAdmonition/styles.module.css b/website/src/components/VanillaAdmonition/styles.module.css new file mode 100644 index 000000000..0341c36ff --- /dev/null +++ b/website/src/components/VanillaAdmonition/styles.module.css @@ -0,0 +1,83 @@ +.admonition { + margin-bottom: 16px; + padding: 8px 10px 3px 10px; + border-radius: 4px; + border-left: 6px solid; + opacity: 0.7; + font-family: system-ui, -apple-system, sans-serif; +} + +.admonitionHeader { + display: flex; + align-items: center; + margin-bottom: 1px; +} + +.admonitionIcon { + margin-right: 8px; + display: flex; + align-items: center; +} + +.admonitionTitle { + font-weight: 600; + font-size: 14px; + color: #ffffff; +} + +.admonitionContent { + font-size: 14px; + color: rgba(255, 255, 255, 0.8); + line-height: 1.5; + padding: 0px; +} + +/* Type-specific styles with literal colors */ +.note { + border-left-color: #5c6370; + background: rgba(92, 99, 112, 0.1); +} + +.tip { + border-left-color: #28a745; + background: rgba(40, 167, 69, 0.1); +} + +.info { + border-left-color: #0366d6; + background: rgba(3, 102, 214, 0.1); +} + +.warning { + border-left-color: #f0b400; + background: rgba(240, 180, 0, 0.1); +} + +.danger { + border-left-color: #d73a49; + background: rgba(215, 58, 73, 0.1); +} + +/* Light theme overrides */ +[data-theme='light'] .admonitionTitle { + color: #1f2328; +} + +[data-theme='light'] .admonitionContent { + color: rgba(31, 35, 40, 0.8); +} +/* Light theme overrides */ +[data-theme='dark'] .admonitionTitle { + color: #b5c2d3; + } + + [data-theme='dark'] .admonitionContent { + color: rgba(184, 194, 205, 0.8); + } + +/* Add these styles */ +.icon { + width: 16px; + height: 16px; + fill: currentColor; +} \ No newline at end of file From 437862bb5070eb4fa7bc8e974c033373666b49cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Blanchemain?= Date: Wed, 29 Jan 2025 12:07:56 -0800 Subject: [PATCH 2/4] fix: add demo page --- website/sidebars.js | 48 ++++++++++++++++++++++----------------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/website/sidebars.js b/website/sidebars.js index a6e474ac0..4f779c269 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -15,7 +15,7 @@ const sidebars = { { type: 'doc', id: 'vanilla-admonition-test-page', - label: 'Vanilla admonition test page', + label: 'Vanilla Admonition test page', }, { type: 'doc', @@ -243,7 +243,7 @@ const sidebars = { items: [ { type: 'doc', - id: 'launch-orbit-chain/a-gentle-introduction', + id: 'launch-orbit-chain/orbit-gentle-introduction', label: 'A gentle introduction', }, { @@ -263,12 +263,12 @@ const sidebars = { items: [ { type: 'doc', - id: 'launch-orbit-chain/maintain-your-chain/guidance/state-growth', + id: 'launch-orbit-chain/how-tos/orbit-managing-state-growth', label: `Manage gas state growth`, }, { type: 'doc', - id: 'launch-orbit-chain/maintain-your-chain/guidance/state-size-limit', + id: 'launch-orbit-chain/how-tos/orbit-managing-gas-speed-limit', label: `Manage gas speed limit`, }, ], @@ -285,17 +285,17 @@ const sidebars = { }, { type: 'doc', - id: 'launch-orbit-chain/deploy-an-orbit-chain/deploying-rollup-chain', + id: 'launch-orbit-chain/how-tos/orbit-sdk-deploying-rollup-chain', label: `Rollup Orbit Deployment`, }, { type: 'doc', - id: 'launch-orbit-chain/deploy-an-orbit-chain/deploying-anytrust-chain', + id: 'launch-orbit-chain/how-tos/orbit-sdk-deploying-anytrust-chain', label: `AnyTrust Orbit Deployment`, }, { type: 'doc', - id: 'launch-orbit-chain/deploy-an-orbit-chain/deploying-custom-gas-token-chain', + id: 'launch-orbit-chain/how-tos/orbit-sdk-deploying-custom-gas-token-chain', label: `Custom Gas Token Orbit Deployment`, }, { @@ -305,12 +305,12 @@ const sidebars = { }, { type: 'doc', - id: 'launch-orbit-chain/deploy-an-orbit-chain/deploying-token-bridge', + id: 'launch-orbit-chain/how-tos/orbit-sdk-deploying-token-bridge', label: `Token bridge deployment`, }, { type: 'doc', - id: 'launch-orbit-chain/deploy-an-orbit-chain/configuring-orbit-chain', + id: 'launch-orbit-chain/how-tos/orbit-sdk-configuring-orbit-chain', label: `Orbit Chain Configuration`, }, ], @@ -332,17 +332,17 @@ const sidebars = { }, { type: 'doc', - id: 'launch-orbit-chain/configure-your-chain/common-configurations/use-a-custom-gas-token', + id: 'launch-orbit-chain/how-tos/use-a-custom-gas-token', label: `Use a custom gas token`, }, { type: 'doc', - id: 'launch-orbit-chain/customize-your-chain/customize-precompile', + id: 'launch-orbit-chain/how-tos/customize-precompile', label: `Customize your chain's precompiles`, }, { type: 'doc', - id: 'launch-orbit-chain/customize-your-chain/customize-stf', + id: 'launch-orbit-chain/how-tos/customize-stf', label: `Customize your chain's behavior`, }, { @@ -353,21 +353,21 @@ const sidebars = { { type: 'doc', id: 'launch-orbit-chain/how-tos/manage-fee-collectors', - label: `Manage the fee parameters`, + label: `Manage the fee collectors`, }, { type: 'doc', - id: 'launch-orbit-chain/customize-your-chain/customize-arbos', + id: 'launch-orbit-chain/how-tos/customize-arbos', label: `Customize ArbOS version`, }, { type: 'doc', - id: 'launch-orbit-chain/third-party-integrations/bridged-usdc-standard', + id: 'launch-orbit-chain/how-tos/usdc-standard-bridge', label: `Implement Circle bridged USDC`, }, { type: 'doc', - id: 'launch-orbit-chain/configure-your-chain/advanced-configurations/fast-withdrawals', + id: 'launch-orbit-chain/how-tos/fast-withdrawals', label: `Enable fast withdrawals`, }, { @@ -377,17 +377,17 @@ const sidebars = { items: [ { type: 'doc', - id: 'launch-orbit-chain/configure-your-chain/common-configurations/aep-fee-router-introduction', + id: 'launch-orbit-chain/aep-fee-router-introduction', label: `AEP fee router overview`, }, { type: 'doc', - id: 'launch-orbit-chain/configure-your-chain/common-configurations/set-up-aep-fee-router', + id: 'launch-orbit-chain/how-tos/set-up-aep-fee-router', label: `Set up AEP fee router`, }, { type: 'doc', - id: 'launch-orbit-chain/configure-your-chain/common-configurations/calculate-aep-fees', + id: 'launch-orbit-chain/how-tos/calculate-aep-fees', label: `Calculate AEP license fees`, }, ], @@ -408,7 +408,7 @@ const sidebars = { }, { type: 'doc', - id: 'launch-orbit-chain/configure-your-chain/common-configurations/arbos-upgrade', + id: 'launch-orbit-chain/how-tos/arbos-upgrade', label: `Upgrade ArbOS`, }, ], @@ -449,7 +449,7 @@ const sidebars = { }, { type: 'doc', - id: 'launch-orbit-chain/deploy-an-orbit-chain/monitoring-tools-and-considerations', + id: 'launch-orbit-chain/reference/monitoring-tools-and-considerations', label: 'Monitoring tools and considerations', }, { @@ -459,7 +459,7 @@ const sidebars = { }, { type: 'doc', - id: 'launch-orbit-chain/ecosystem-support/add-orbit-chain-to-bridge-ui', + id: 'launch-orbit-chain/how-tos/add-orbit-chain-to-bridge-ui', label: `Add your chain to the bridge`, }, { @@ -484,12 +484,12 @@ const sidebars = { }, { type: 'doc', - id: 'launch-orbit-chain/third-party-integrations/third-party-providers', + id: 'launch-orbit-chain/infra-options-orbit-chains', label: 'Third-party infrastructure providers', }, { type: 'doc', - id: 'launch-orbit-chain/faq-troubleshooting/troubleshooting-building-orbit', + id: 'launch-orbit-chain/troubleshooting-building-orbit', label: 'FAQ', }, ], From 3b5f2452db2a34b23052a6ee1a02a1029329b991 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Blanchemain?= Date: Thu, 30 Jan 2025 07:34:36 -0800 Subject: [PATCH 3/4] fix: remove text content's transparency --- website/src/components/VanillaAdmonition/styles.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/website/src/components/VanillaAdmonition/styles.module.css b/website/src/components/VanillaAdmonition/styles.module.css index 0341c36ff..7b04125f9 100644 --- a/website/src/components/VanillaAdmonition/styles.module.css +++ b/website/src/components/VanillaAdmonition/styles.module.css @@ -3,7 +3,6 @@ padding: 8px 10px 3px 10px; border-radius: 4px; border-left: 6px solid; - opacity: 0.7; font-family: system-ui, -apple-system, sans-serif; } From c49289442c4c380dfdac405d408a65d3f816c2d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Blanchemain?= Date: Thu, 30 Jan 2025 08:21:09 -0800 Subject: [PATCH 4/4] fix: remove demo --- .../vanilla-admonition-test-page.mdx | 42 ------------------- website/sidebars.js | 5 --- 2 files changed, 47 deletions(-) delete mode 100644 arbitrum-docs/vanilla-admonition-test-page.mdx diff --git a/arbitrum-docs/vanilla-admonition-test-page.mdx b/arbitrum-docs/vanilla-admonition-test-page.mdx deleted file mode 100644 index 20dd892e7..000000000 --- a/arbitrum-docs/vanilla-admonition-test-page.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: 'Vanilla Admonition test page' -description: 'Vanilla Admonition test page' -author: anegg0 -sme: anegg0 -sidebar_position: 1 -content_type: how-to ---- - -import { VanillaAdmonition } from '@site/src/components/VanillaAdmonition'; - -## Vanilla Admonitions examples - - - This is an info message - - - - This is an info message - - - - This is an info message - - - - This is an info message - - -## Regular Docusaurus Admonitions - -:::caution Avoid Losing Funds! - -If a ticket expires after 7 days without being redeemed or re-scheduled to a future date, any message and value (other than the escrowed `callvalue`) it carries could be lost without possibility of being recovered. - -::: - -:::info Example scripts available in the Orbit SDK - -This section will explain the process of deploying and configuring a distribution contract manually, but the Orbit SDK includes an [example to perform this process through a script](https://github.com/OffchainLabs/arbitrum-orbit-sdk/tree/main/examples/setup-fee-distributor-contract). - -::: diff --git a/website/sidebars.js b/website/sidebars.js index 9f01ef8a8..38b6dfe4c 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -12,11 +12,6 @@ const sidebars = { label: 'Welcome', collapsed: false, items: [ - { - type: 'doc', - id: 'vanilla-admonition-test-page', - label: 'Vanilla Admonition test page', - }, { type: 'doc', id: 'welcome/arbitrum-gentle-introduction',