From 49c5ad557d458d99fbda8de7e6cf3874d9d46d5f Mon Sep 17 00:00:00 2001 From: quasystaty Date: Tue, 9 Apr 2024 13:26:46 +0300 Subject: [PATCH] chore(docs): implement docs design --- docs/.vitepress/config.mts | 169 ++++++++------- docs/.vitepress/theme/style.css | 357 ++++++++++++++++---------------- docs/index.md | 4 +- docs/public/developer-icon.svg | 9 + docs/public/hero-img.svg | 282 +++++++++++++++++++++++++ docs/public/learn-icon.svg | 9 + 6 files changed, 577 insertions(+), 253 deletions(-) create mode 100644 docs/public/developer-icon.svg create mode 100644 docs/public/hero-img.svg create mode 100644 docs/public/learn-icon.svg diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index 81a5b4b3..302ebe66 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 @@ + + + + + + + + +