diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 0f6c15f7..7d85ae67 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -9,7 +9,6 @@ export default defineConfig({
cleanUrls: true,
ignoreDeadLinks: true,
base: base,
-
themeConfig: {
editLink: {
pattern: "https://github.com/astriaorg/docs/edit/main/docs/:path",
@@ -19,10 +18,7 @@ export default defineConfig({
logo: { src: '/astria-logo-mini.svg', width: 24, height: 24 },
// https://vitepress.dev/reference/default-theme-config
- nav: [
- { text: 'Home', link: '/' },
- { text: 'Just Rollup', link: '/local-rollup/1-introduction' }
- ],
+ nav: nav(),
search: {
provider: "local",
@@ -31,79 +27,98 @@ export default defineConfig({
},
},
- sidebar: [
- {
-
- items: [
- {
- text: 'What is Astria?',
- collapsed: true,
- items: [
- { text: 'Overview', link: '/overview/1-introduction' },
- { text: 'Why Decentralized Sequencers?', link: '/overview/2-why-decentralized-sequencers' },
- { text: 'Cross-Rollup Composability', link: '/overview/3-cross-rollup-composability' },
-
- {
- text: 'Architecture',
- collapsed: true,
- items: [
- { text: 'Overview', link: '/overview/architecture/1-overview' },
- { text: 'Transaction Flow', link: '/overview/architecture/2-transaction-flow' },
- { text: 'Rollups', link: '/overview/architecture/3-rollup' },
- { text: 'Composer', link: '/overview/architecture/4-composer' },
- { text: 'The Astria Sequencer', link: '/overview/architecture/5-the-astria-sequencer' },
- { text: 'Relayer', link: '/overview/architecture/6-relayer' },
- { text: 'Conductor', link: '/overview/architecture/7-conductor' },
- { text: 'Data Availability Layer', link: '/overview/architecture/8-data-availability-layer' },
- ]
- },
- ]
- }
- ],
- },
- {
- text: 'Developers',
- collapsed: true,
- items: [
- {
- text: 'Tutorials',
- collapsed: true,
- items: [
- { text: 'Deploy a Local Rollup', link: '/local-rollup/1-introduction' },
- {
- text: 'Deploy a Cloud Rollup',
- collapsed: true,
- items: [
- { text: 'Digital Ocean', link: '/cloud-rollup/digital-ocean' },
- ]
- },
- { text: 'Using the astria cli', link: '/developer/tutorials/1-using-astria-go-cli.md' },
-
- ]
- },
- {
- text: 'The Astria EVM', link: '/astria-evm/overview'
- },
- ]
- },
- {
- text: 'Resources',
- collapsed: true,
- items: [
- {
- text: 'Community',
- collapsed: true,
- items: [
- { text: 'Overview', link: '/community/1-overview' }
- ]
- },
- { text: 'Dusknet FAQ', link: '/dusk-faq/1-information' }
- ]
- }
- ],
+ sidebar: sidebar(),
socialLinks: [
- { icon: 'github', link: 'https://github.com/astriaorg/astria' }
- ]
+ { icon: "github", link: "https://github.com/astriaorg" },
+ { icon: "twitter", link: "https://twitter.com/AstriaOrg" },
+ ],
}
})
+
+function sidebar() {
+ return [
+ {
+
+ items: [
+ {
+ text: 'What is Astria?',
+ collapsed: true,
+ items: [
+ { text: 'Overview', link: '/overview/1-introduction' },
+ { text: 'Why Decentralized Sequencers?', link: '/overview/2-why-decentralized-sequencers' },
+ { text: 'Cross-Rollup Composability', link: '/overview/3-cross-rollup-composability' },
+
+ {
+ text: 'Architecture',
+ collapsed: true,
+ items: [
+ { text: 'Overview', link: '/overview/architecture/1-overview' },
+ { text: 'Transaction Flow', link: '/overview/architecture/2-transaction-flow' },
+ { text: 'Rollups', link: '/overview/architecture/3-rollup' },
+ { text: 'Composer', link: '/overview/architecture/4-composer' },
+ { text: 'The Astria Sequencer', link: '/overview/architecture/5-the-astria-sequencer' },
+ { text: 'Relayer', link: '/overview/architecture/6-relayer' },
+ { text: 'Conductor', link: '/overview/architecture/7-conductor' },
+ { text: 'Data Availability Layer', link: '/overview/architecture/8-data-availability-layer' },
+ ]
+ },
+ ]
+ }
+ ],
+ },
+ {
+ text: 'Developers',
+ collapsed: true,
+ items: [
+ {
+ text: 'Tutorials',
+ collapsed: true,
+ items: [
+ { text: 'Deploy a Local Rollup', link: '/local-rollup/1-introduction' },
+ {
+ text: 'Deploy a Cloud Rollup',
+ collapsed: true,
+ items: [
+ { text: 'Digital Ocean', link: '/cloud-rollup/digital-ocean' },
+ ]
+ },
+ { text: 'Using the astria cli', link: '/developer/tutorials/1-using-astria-go-cli.md' },
+
+ ]
+ },
+ {
+ text: 'The Astria EVM', link: '/astria-evm/overview'
+ },
+ ]
+ },
+ {
+ text: 'Resources',
+ collapsed: true,
+ items: [
+ {
+ text: 'Community',
+ collapsed: true,
+ items: [
+ { text: 'Overview', link: '/community/1-overview' }
+ ]
+ },
+ { text: 'Dusknet FAQ', link: '/dusk-faq/1-information' }
+ ]
+ }
+ ]
+}
+
+function nav() {
+ return [
+ { text: 'Home', link: '/' },
+ {
+ text: "Join the network",
+ items: [
+ { text: "Learn", link: "/overview/1-introduction" },
+ { text: "Developers", link: "/local-rollup/1-introduction" },
+ { text: "Community", link: '/community/1-overview' },
+ ],
+ },
+ ];
+}
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 0f0a041a..b2d6d571 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -1,33 +1,195 @@
/* .vitepress/theme/custom.css */
-/* :root {
- --vp-c-brand-1: #646cff;
- --vp-c-brand-2: #747bff;
-} */
+/**
+ * Colors: Palette
+ *
+ * The primitive colors used for accent colors. These colors are referenced
+ * by functional colors such as "Text", "Background", or "Brand".
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ * satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ * It must satisfy the contrast ratio with pure white (#ffffff) text on
+ * top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ * or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ * on top of it.
+ *
+ * The soft color must be semi transparent alpha channel. This is crucial
+ * because it allows adding multiple "soft" colors on top of each other
+ * to create a accent, such as when having inline code block inside
+ * custom containers.
+ * -------------------------------------------------------------------------- */
+
+:root {
+
+ --vp-c-grad-1: linear-gradient(83.18deg, #EA9B57 0%, #CB513F 100%);
+ --vp-c-gray-1: #dddde3;
+ --vp-c-gray-2: #e4e4e9;
+ --vp-c-gray-3: #ebebef;
+ --vp-c-gray-soft: rgba(142, 150, 170, 0.14);
+
+ --vp-c-indigo-1: #3451b2;
+ --vp-c-indigo-2: #3a5ccc;
+ --vp-c-indigo-3: #5672cd;
+ --vp-c-indigo-soft: rgba(100, 108, 255, 0.14);
+
+ --vp-c-purple-1: #6f42c1;
+ --vp-c-purple-2: #7e4cc9;
+ --vp-c-purple-3: #8e5cd9;
+ --vp-c-purple-soft: rgba(159, 122, 234, 0.14);
+
+ --vp-c-green-1: #18794e;
+ --vp-c-green-2: #299764;
+ --vp-c-green-3: #30a46c;
+ --vp-c-green-soft: rgba(16, 185, 129, 0.14);
+
+ --vp-c-yellow-1: #915930;
+ --vp-c-yellow-2: #946300;
+ --vp-c-yellow-3: #9f6a00;
+ --vp-c-yellow-soft: rgba(234, 179, 8, 0.14);
+
+ --vp-c-red-1: #b8272c;
+ --vp-c-red-2: #d5393e;
+ --vp-c-red-3: #e0575b;
+ --vp-c-red-soft: rgba(244, 63, 94, 0.14);
+
+ --vp-c-sponsor: #db2777;
+}
+
+.dark {
+ --vp-c-gray-1: #515c67;
+ --vp-c-gray-2: #414853;
+ --vp-c-gray-3: #32363f;
+ --vp-c-gray-soft: rgba(101, 117, 133, 0.16);
+
+ --vp-c-indigo-1: #a8b1ff;
+ --vp-c-indigo-2: #5c73e7;
+ --vp-c-indigo-3: #3e63dd;
+ --vp-c-indigo-soft: rgba(100, 108, 255, 0.16);
+
+ --vp-c-purple-1: #c8abfa;
+ --vp-c-purple-2: #a879e6;
+ --vp-c-purple-3: #8e5cd9;
+ --vp-c-purple-soft: rgba(159, 122, 234, 0.16);
+
+ --vp-c-green-1: #3dd68c;
+ --vp-c-green-2: #30a46c;
+ --vp-c-green-3: #298459;
+ --vp-c-green-soft: rgba(16, 185, 129, 0.16);
+
+ --vp-c-yellow-1: #f9b44e;
+ --vp-c-yellow-2: #da8b17;
+ --vp-c-yellow-3: #a46a0a;
+ --vp-c-yellow-soft: rgba(234, 179, 8, 0.08);
+
+ --vp-c-red-1: #f66f81;
+ --vp-c-red-2: #f14158;
+ --vp-c-red-3: #b62a3c;
+ --vp-c-red-soft: rgba(244, 63, 94, 0.08);
+}
/* Set the background color to black */
:root {
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(89.6222deg, rgb(240, 151, 39) 0.520833%, rgb(221, 80, 34) 100%);
- --vp-home-hero-image-background-image: linear-gradient(-45deg,
- #bd6711 50%,
- #bd6711 50%);
+
--vp-home-hero-image-filter: blur(40px);
}
+/* .dark {
+ --vp-home-hero-image-background-image: linear-gradient(-45deg,
+ #7c440c 50%,
+ #884707 50%);
+} */
+
+:root {
+ --vp-c-default-1: var(--vp-c-gray-1);
+ --vp-c-default-2: var(--vp-c-gray-2);
+ --vp-c-default-3: var(--vp-c-gray-3);
+ --vp-c-default-soft: var(--vp-c-gray-soft);
+
+ --vp-c-brand-1: var(--vp-c-indigo-1);
+ --vp-c-brand-2: var(--vp-c-indigo-2);
+ --vp-c-brand-3: var(--vp-c-indigo-3);
+ --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+
+ /* DEPRECATED: Use `--vp-c-brand-1` instead. */
+ --vp-c-brand: var(--vp-c-brand-1);
+
+ --vp-c-tip-1: var(--vp-c-brand-1);
+ --vp-c-tip-2: var(--vp-c-brand-2);
+ --vp-c-tip-3: var(--vp-c-brand-3);
+ --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+ --vp-c-note-1: rgba(82, 82, 89, 0.32);
+ --vp-c-note-2: var(--vp-c-brand-2);
+ --vp-c-note-3: var(--vp-c-brand-3);
+ --vp-c-note-soft: rgba(37, 37, 41, 1);
+
+ --vp-c-success-1: var(--vp-c-green-1);
+ --vp-c-success-2: var(--vp-c-green-2);
+ --vp-c-success-3: var(--vp-c-green-3);
+ --vp-c-success-soft: var(--vp-c-green-soft);
+
+ --vp-c-important-1: var(--vp-c-purple-1);
+ --vp-c-important-2: var(--vp-c-purple-2);
+ --vp-c-important-3: var(--vp-c-purple-3);
+ --vp-c-important-soft: var(--vp-c-purple-soft);
+
+ --vp-c-warning-1: var(--vp-c-yellow-1);
+ --vp-c-warning-2: var(--vp-c-yellow-2);
+ --vp-c-warning-3: var(--vp-c-yellow-3);
+ --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+ --vp-c-danger-1: var(--vp-c-red-1);
+ --vp-c-danger-2: var(--vp-c-red-2);
+ --vp-c-danger-3: var(--vp-c-red-3);
+ --vp-c-danger-soft: var(--vp-c-red-soft);
+
+ --vp-c-caution-1: var(--vp-c-red-1);
+ --vp-c-caution-2: var(--vp-c-red-2);
+ --vp-c-caution-3: var(--vp-c-red-3);
+ --vp-c-caution-soft: var(--vp-c-red-soft);
+}
+
:root {
- --vp-custom-block-tip-border: var(--vp-c-brand);
+ --vp-custom-block-tip-border: var(--vp-c-warning-soft);
--vp-custom-block-tip-text: var(--vp-c-brand-darker);
- --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+ --vp-custom-block-tip-bg: rgba(100, 108, 255, 0.08);
+
+ --vp-custom-block-danger-border: var(--vp-c-danger-soft);
+ --vp-custom-block-danger-text: var(--vp-c-text-1);
+ --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
+
+ --vp-custom-block-warning-text: var(--vp-c-text-1);
+ --vp-custom-block-warning-bg: var(--vp-c-warning-soft);
+ --vp-custom-block-warning-border: var(--vp-c-warning-soft);
+
+ --vp-custom-block-info-border: var(--vp-c-note-1);
+ --vp-custom-block-info-text: var(--vp-c-text-1);
+ --vp-custom-block-info-bg: var(--vp-c-note-1);
--tab-text-color: #000;
}
.dark {
- --vp-custom-block-tip-border: var(--vp-c-brand);
--vp-custom-block-tip-text: var(--vp-c-brand-lightest);
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+
+ --vp-custom-block-danger-border: var(--vp-c-danger-soft);
+ --vp-custom-block-danger-text: var(--vp-c-text-1);
+ --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
+
--tab-text-color: #fff;
}
@@ -35,33 +197,21 @@
:root {
- --vp-c-brand: linear-gradient(89.6222deg, rgb(240, 151, 39) 0.520833%, rgb(221, 80, 34) 100%);
- /* Light Orange */
- --vp-c-brand-light: linear-gradient(89.6222deg, rgb(221, 80, 34) 0.520833%, rgb(204, 128, 0) 100%);
- /* Lighter Orange */
- --vp-c-brand-lighter: linear-gradient(89.6222deg, rgb(255, 243, 224) 0.520833%, rgb(255, 243, 224) 100%);
- /* Lightest Orange */
- --vp-c-brand-dark: linear-gradient(89.6222deg, rgb(204, 128, 0) 0.520833%, rgb(153, 99, 0) 100%);
- /* Dark Orange */
- --vp-c-brand-darker: linear-gradient(89.6222deg, rgb(153, 99, 0) 0.520833%, rgb(102, 66, 0) 100%);
/* Darker Orange */
--vp-c-brand-dimm: rgba(240, 151, 39, 0.08);
/* Dim Orange */
}
:root {
- --vp-c-brand: #ffaa00;
+ --vp-c-brand: #ffaa00d5;
/* Light Orange */
- --vp-c-brand-light: #ffd966;
+ --vp-c-brand-light: #ffd966bb;
/* Lighter Orange */
--vp-c-brand-lighter: #fff3e0;
/* Lightest Orange */
--vp-c-brand-dark: #cc8000;
/* Dark Orange */
--vp-c-brand-darker: #996300;
- /* Darker Orange */
- /* --vp-c-brand-dimm: rgba(255, 170, 0, 0.08); */
- /* Dim Orange */
}
:root {
@@ -71,159 +221,16 @@
/* Default text color for dark mode */
}
-/* Optionally, style links to be orange */
-a {
- color: orange;
-}
-
-
-/* Footer
-footer {
- background-color: orange;
- color: orange;
- padding: 20px;
- text-align: center;
-} */
-
-
-
-/**
- * Customize default theme styling by overriding CSS variables:
- * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
- */
-
-/**
- * Colors
- *
- * Each colors have exact same color scale system with 3 levels of solid
- * colors with different brightness, and 1 soft color.
- *
- * - `XXX-1`: The most solid color used mainly for colored text. It must
- * satisfy the contrast ratio against when used on top of `XXX-soft`.
- *
- * - `XXX-2`: The color used mainly for hover state of the button.
- *
- * - `XXX-3`: The color for solid background, such as bg color of the button.
- * It must satisfy the contrast ratio with pure white (#ffffff) text on
- * top of it.
- *
- * - `XXX-soft`: The color used for subtle background such as custom container
- * or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
- * on top of it.
- *
- * The soft color must be semi transparent alpha channel. This is crucial
- * because it allows adding multiple "soft" colors on top of each other
- * to create a accent, such as when having inline code block inside
- * custom containers.
- *
- * - `default`: The color used purely for subtle indication without any
- * special meanings attched to it such as bg color for menu hover state.
- *
- * - `brand`: Used for primary brand colors, such as link text, button with
- * brand theme, etc.
- *
- * - `tip`: Used to indicate useful information. The default theme uses the
- * brand color for this by default.
- *
- * - `warning`: Used to indicate warning to the users. Used in custom
- * container, badges, etc.
- *
- * - `danger`: Used to show error, or dangerous message to the users. Used
- * in custom container, badges, etc.
- * -------------------------------------------------------------------------- */
-
-/* :root {
- --vp-c-default-1: var(--vp-c-gray-1);
- --vp-c-default-2: var(--vp-c-gray-2);
- --vp-c-default-3: var(--vp-c-gray-3);
- --vp-c-default-soft: var(--vp-c-gray-soft);
-
- --vp-c-brand-1: var(--vp-c-indigo-1);
- --vp-c-brand-2: var(--vp-c-indigo-2);
- --vp-c-brand-3: var(--vp-c-indigo-3);
- --vp-c-brand-soft: var(--vp-c-indigo-soft);
-
- --vp-c-tip-1: var(--vp-c-brand-1);
- --vp-c-tip-2: var(--vp-c-brand-2);
- --vp-c-tip-3: var(--vp-c-brand-3);
- --vp-c-tip-soft: var(--vp-c-brand-soft);
-
- --vp-c-warning-1: var(--vp-c-yellow-1);
- --vp-c-warning-2: var(--vp-c-yellow-2);
- --vp-c-warning-3: var(--vp-c-yellow-3);
- --vp-c-warning-soft: var(--vp-c-yellow-soft);
-
- --vp-c-danger-1: var(--vp-c-red-1);
- --vp-c-danger-2: var(--vp-c-red-2);
- --vp-c-danger-3: var(--vp-c-red-3);
- --vp-c-danger-soft: var(--vp-c-red-soft);
-} */
-
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
-
-/* :root {
- --vp-button-brand-border: transparent;
+:root {
+ --vp-button-brand-border: rgba(234, 155, 87, 1);
--vp-button-brand-text: var(--vp-c-white);
- --vp-button-brand-bg: var(--vp-c-brand-3);
- --vp-button-brand-hover-border: transparent;
+ --vp-button-brand-bg: rgba(234, 155, 87, 1);
+ --vp-button-brand-hover-border: var(--vp-c-brand-light);
--vp-button-brand-hover-text: var(--vp-c-white);
- --vp-button-brand-hover-bg: var(--vp-c-brand-2);
- --vp-button-brand-active-border: transparent;
+ --vp-button-brand-hover-bg: var(--vp-c-brand-dark);
+ --vp-button-brand-active-border: var(--vp-c-brand-light);
--vp-button-brand-active-text: var(--vp-c-white);
- --vp-button-brand-active-bg: var(--vp-c-brand-1);
-} */
-
-/**
- * Component: Home
- * -------------------------------------------------------------------------- */
-
-/* :root {
- --vp-home-hero-name-color: transparent;
- --vp-home-hero-name-background: -webkit-linear-gradient(
- 120deg,
- #bd34fe 30%,
- #41d1ff
- );
-
- --vp-home-hero-image-background-image: linear-gradient(
- -45deg,
- #bd34fe 50%,
- #47caff 50%
- );
- --vp-home-hero-image-filter: blur(44px);
-}
-
-@media (min-width: 640px) {
- :root {
- --vp-home-hero-image-filter: blur(56px);
- }
-}
-
-@media (min-width: 960px) {
- :root {
- --vp-home-hero-image-filter: blur(68px);
- }
-} */
-
-/**
- * Component: Custom Block
- * -------------------------------------------------------------------------- */
-
-/* :root {
- --vp-custom-block-tip-border: transparent;
- --vp-custom-block-tip-text: var(--vp-c-text-1);
- --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
- --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
-} */
-
-/**
- * Component: Algolia
- * -------------------------------------------------------------------------- */
-
-/* .DocSearch {
- --docsearch-primary-color: var(--vp-c-brand-1) !important;
-} */
\ No newline at end of file
+ --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+}
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index 1cf78a05..71d4dafb 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -7,7 +7,7 @@ hero:
text: "The Shared Sequencer Network"
tagline: The easiest way to deploy decentralized rollups.
image:
- src: /astria-logo-inverted.svg
+ src: /hero-img.svg
alt: Astria
actions:
- theme: brand
@@ -21,8 +21,10 @@ features:
- title: Learn
details: Astria is a shared sequencing network that allows many rollups to share a single decentralized network of sequencers.
link: /overview/1-introduction
+ icon:
- title: Developers
details: Use the Astria stack to create, integrate and build your own modular rollups.
link: /developer/tutorials/1-using-astria-go-cli
+ icon:
---
diff --git a/docs/public/developer-icon.svg b/docs/public/developer-icon.svg
new file mode 100644
index 00000000..cf180b48
--- /dev/null
+++ b/docs/public/developer-icon.svg
@@ -0,0 +1,9 @@
+
diff --git a/docs/public/hero-img.svg b/docs/public/hero-img.svg
new file mode 100644
index 00000000..c2c62205
--- /dev/null
+++ b/docs/public/hero-img.svg
@@ -0,0 +1,282 @@
+
diff --git a/docs/public/learn-icon.svg b/docs/public/learn-icon.svg
new file mode 100644
index 00000000..4e39d466
--- /dev/null
+++ b/docs/public/learn-icon.svg
@@ -0,0 +1,9 @@
+