diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 7796415d..0abc9ade 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -100,10 +100,26 @@ export default withMermaid( themeConfig: { // https://vitepress.dev/reference/default-theme-config nav: [ - { text: 'Get Started', link: '/get-started/welcome' }, - { text: 'Guides', link: '/guides/build-iapp/build-&-test' }, - { text: 'References', link: '/references/dataProtector' }, - { text: 'Protocol', link: '/protocol/proof-of-contribution' }, + { + text: 'Get Started', + link: '/get-started/welcome', + activeMatch: '^/get-started/', + }, + { + text: 'Guides', + link: '/guides/build-iapp/build-&-test', + activeMatch: '^/guides/', + }, + { + text: 'References', + link: '/references/dataProtector', + activeMatch: '^/references/', + }, + { + text: 'Protocol', + link: '/protocol/proof-of-contribution', + activeMatch: '^/protocol/', + }, { component: 'ChainSelector', props: { @@ -114,6 +130,9 @@ export default withMermaid( outline: { level: [2, 4], }, + footer: { + copyright: '© All Rights Reserved iExec 2018-present', + }, sidebar: getSidebar(), diff --git a/.vitepress/sidebar.ts b/.vitepress/sidebar.ts index 45222266..b0f4074a 100644 --- a/.vitepress/sidebar.ts +++ b/.vitepress/sidebar.ts @@ -551,6 +551,7 @@ export function getSidebar() { }, { text: 'Workers & Workerpools', + collapsed: false, items: [ { text: 'Worker Quick Start', @@ -564,6 +565,7 @@ export function getSidebar() { }, { text: '🔒 TEE Technology', + collapsed: false, items: [ { text: 'Introduction to TEE Technologies', diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css index 947812b1..a1eda7c4 100644 --- a/.vitepress/theme/style.css +++ b/.vitepress/theme/style.css @@ -105,18 +105,14 @@ * -------------------------------------------------------------------------- */ :root { - /* --vp-c-text-1: #3c3c43; */ --vp-c-text-1: #1d1d24; - /* --vp-c-text-2: #67676c; */ --vp-c-text-2: #5d5d69; --vp-c-text-3: #929295; } .dark { - /* --vp-c-text-1: #dfdfd6; */ --vp-c-text-1: #fff; - /* --vp-c-text-2: #98989f; */ - --vp-c-text-2: #a3a3a8; + --vp-c-text-2: #d3d3d8; --vp-c-text-3: #6a6a71; } @@ -147,6 +143,11 @@ --vp-c-default-3: var(--vp-c-gray-3); --vp-c-default-soft: var(--vp-c-gray-soft); + --vp-c-info-1: #0067a8; + --vp-c-info-2: var(--vp-c-gray-2); + --vp-c-info-3: var(--vp-c-gray-3); + --vp-c-info-soft: #e9f7ff; + --vp-c-brand-1: #183ee9; --vp-c-brand-2: var(--vp-c-indigo-2); --vp-c-brand-3: var(--vp-c-indigo-3); @@ -172,10 +173,10 @@ --vp-c-important-3: var(--vp-c-purple-3); --vp-c-important-soft: var(--vp-c-purple-soft); - --vp-c-warning-1: #da7b0b; + --vp-c-warning-1: #a85b00; --vp-c-warning-2: var(--vp-c-yellow-2); --vp-c-warning-3: var(--vp-c-yellow-3); - --vp-c-warning-soft: #fdefde; + --vp-c-warning-soft: #fff8ef; --vp-c-danger-1: #bf3131; --vp-c-danger-2: var(--vp-c-red-2); @@ -189,6 +190,9 @@ } .dark { + --vp-c-info-1: #9edaff; + --vp-c-info-soft: #2b3d4c; + --vp-c-brand-1: #a2b3ff; --vp-c-brand-soft: #1d2032; @@ -202,32 +206,98 @@ --vp-c-warning-soft: #312720; } +/** + * Colors: Background + * + * - `bg`: The bg color used for main screen. + * + * - `bg-alt`: The alternative bg color used in places such as "sidebar", + * or "code block". + * + * - `bg-elv`: The elevated bg color. This is used at parts where it "floats", + * such as "dialog". + * + * - `bg-soft`: The bg color to slightly distinguish some components from + * the page. Used for things like "carbon ads" or "table". + * -------------------------------------------------------------------------- */ + +:root { + --vp-c-bg: #ffffff; + --vp-c-bg-alt: #f7f9fd; + --vp-c-bg-elv: #ffffff; + --vp-c-bg-soft: #f7f9fd; +} + +.dark { + --vp-c-bg: #14141b; + --vp-c-bg-alt: #17171e; + --vp-c-bg-elv: #202127; + --vp-c-bg-soft: #17171e; +} + /** * Component: Button * -------------------------------------------------------------------------- */ :root { --vp-button-brand-border: transparent; - --vp-button-brand-text: var(--vp-c-white); - --vp-button-brand-bg: var(--vp-c-brand-3); + --vp-button-brand-text: #1b1b1f; + --vp-button-brand-bg: #fcd15a; --vp-button-brand-hover-border: transparent; - --vp-button-brand-hover-text: var(--vp-c-white); - --vp-button-brand-hover-bg: var(--vp-c-brand-2); + --vp-button-brand-hover-text: #1b1b1f; + --vp-button-brand-hover-bg: #f9dd90; --vp-button-brand-active-border: transparent; - --vp-button-brand-active-text: var(--vp-c-white); - --vp-button-brand-active-bg: var(--vp-c-brand-1); + --vp-button-brand-active-text: #1b1b1f; + --vp-button-brand-active-bg: #f9dd90; + + --vp-button-alt-border: var(--vp-c-border); + --vp-button-alt-text: var(--vp-c-text-1); + --vp-button-alt-bg: transparent; + --vp-button-alt-hover-border: var(--vp-c-border); + --vp-button-alt-hover-text: var(--vp-c-text-1); + --vp-button-alt-hover-bg: #ffffff10; + --vp-button-alt-active-border: var(--vp-c-border); + --vp-button-alt-active-text: var(--vp-c-text-1); + --vp-button-alt-active-bg: var(--vp-c-default-1); } .dark { --vp-button-brand-border: transparent; --vp-button-brand-text: #1b1b1f; - --vp-button-brand-bg: var(--vp-c-brand-3); + --vp-button-brand-bg: #fcd15a; --vp-button-brand-hover-border: transparent; - --vp-button-brand-hover-text: var(--vp-c-white); - --vp-button-brand-hover-bg: var(--vp-c-brand-2); + --vp-button-brand-hover-text: #1b1b1f; + --vp-button-brand-hover-bg: #f9dd90; --vp-button-brand-active-border: transparent; - --vp-button-brand-active-text: var(--vp-c-white); - --vp-button-brand-active-bg: var(--vp-c-brand-1); + --vp-button-brand-active-text: #1b1b1f; + --vp-button-brand-active-bg: #f9dd90; + + --vp-button-alt-hover-bg: #00000020; +} + +/** + * Colors: Borders + * + * - `divider`: This is used for separators. This is used to divide sections + * within the same components, such as having separator on "h2" heading. + * + * - `border`: This is designed for borders on interactive components. + * For example this should be used for a button outline. + * + * - `gutter`: This is used to divide components in the page. For example + * the header and the lest of the page. + * -------------------------------------------------------------------------- */ + +:root { + --vp-c-border: #c2c2c4; + --vp-c-divider: #d3d3d8; + --vp-c-gutter: #e2e2e3; +} + +.dark { + --vp-c-border: #3c3f44; + --vp-c-divider: #5d5d69; + --vp-c-gutter: #000000; } /** @@ -239,6 +309,11 @@ --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); + + --vp-custom-block-info-border: transparent; + --vp-custom-block-info-text: var(--vp-c-text-1); + --vp-custom-block-info-bg: var(--vp-c-info-soft); + --vp-custom-block-info-code-bg: var(--vp-c-info-soft); } /** @@ -273,6 +348,22 @@ input { @apply w-full rounded-md border border-[var(--vp-c-divider)] bg-[var(--vp-c-bg-soft)] px-4 py-3 text-base text-[var(--vp-c-text-1)] transition focus:border-[var(--vp-c-brand-2)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-70; } +/** + * Component: AskIaButton + * -------------------------------------------------------------------------- */ + +:root { + --c-askIa-bg: #f4f7fc; + --c-askIa-bg-hover: #e3e7f7; + --c-askIa-bg-active: #d1d5db; +} + +.dark { + --c-askIa-bg: #1d1d24; + --c-askIa-bg-hover: #2b304b; + --c-askIa-bg-active: #3b426e; +} + /** * Component: Banner * -------------------------------------------------------------------------- */ @@ -307,6 +398,14 @@ input { @apply bg-[var(--vp-code-bg)]; } +.vp-doc .custom-block.info { + @apply border-l-4 border-l-[var(--vp-c-info-1)]; +} + +.vp-doc .custom-block.info strong { + @apply text-[var(--vp-c-info-1)]; +} + .vp-doc .custom-block.warning { @apply border-l-4 border-l-[var(--vp-c-warning-1)]; } @@ -345,20 +444,22 @@ input { :root { --vp-home-hero-name-color: var(--vp-c-text-1); - --vp-button-brand-bg: #fcd15a; - --vp-button-brand-hover-bg: #fcd15a; } -.VPHero .VPButton { - @apply font-medium transition hover:-translate-y-0.5 hover:shadow-md; +.VPHero.has-image.VPHomeHero { + @apply lg:pb-0; } -.VPHero .VPButton.brand { - @apply text-[var(--vp-c-black)]!; +.VPHero.has-image.VPHomeHero p { + @apply font-normal text-[var(--vp-home-hero-name-color)]; } -.VPImage.image-src { - @apply max-h-none max-w-none lg:size-[448px]!; +.VPLink.link.VPFeature { + @apply relative rounded-[32px] border bg-gradient-to-b from-[var(--vp-c-white)] to-[var(--vp-c-white)] transition-all duration-300 *:relative *:z-20 after:absolute after:inset-px after:z-10 after:rounded-[31px] after:bg-[var(--vp-c-bg-soft)] hover:shadow-lg; +} + +.dark .VPLink.link.VPFeature { + @apply from-[var(--c-border)] to-transparent; } article.box .icon { @@ -368,28 +469,30 @@ article.box .icon { 12.835px 12.835px 21.392px 0 var(--vp-c-bg); } -.image .image-container { - @apply relative flex items-center justify-center; +article.box .icon ._stroke { + @apply stroke-[var(--vp-c-brand-1)]; } -.image .image-container::before { - @apply pointer-events-none absolute top-[60%] left-1/2 -z-10 h-[929px] w-[995px] -translate-x-1/2 -translate-y-1/2 bg-contain bg-center bg-no-repeat; - content: ''; - background-image: url('/bg-gradient.svg'); +article.box .icon ._fill { + @apply fill-[var(--vp-c-brand-1)]; } -.image .image-container .VPImage.image-src { - @apply relative z-10; +/* Image */ + +.VPImage.image-src { + @apply lg:size-[448px]! lg:max-h-none lg:max-w-none; } -.VPHero.has-image.VPHomeHero { - @apply pb-0; +.image .image-container { + @apply relative flex items-center justify-center; } -.VPLink.link.VPFeature { - @apply relative rounded-[32px] border bg-gradient-to-b from-[var(--vp-c-white)] to-[var(--vp-c-white)] transition-all duration-300 *:relative *:z-20 after:absolute after:inset-px after:z-10 after:rounded-[31px] after:bg-[var(--vp-c-bg-soft)] hover:shadow-lg; +.image .image-container::before { + @apply pointer-events-none absolute top-[60%] left-1/2 -z-10 size-[724px] -translate-x-1/2 -translate-y-1/2 bg-contain bg-center bg-no-repeat lg:h-[929px] lg:w-[995px]; + content: ''; + background-image: url('/bg-gradient.svg'); } -.dark .VPLink.link.VPFeature { - @apply from-[var(--c-border)] to-transparent; +.image .image-container .VPImage.image-src { + @apply z-10 lg:relative; } diff --git a/src/assets/icons/anthropic.svg b/src/assets/icons/anthropic.svg deleted file mode 100644 index 33b13175..00000000 --- a/src/assets/icons/anthropic.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - Anthropic Icon Streamline Icon: https://streamlinehq.com - - - - \ No newline at end of file diff --git a/src/assets/icons/chatgpt.svg b/src/assets/icons/chatgpt.svg deleted file mode 100644 index c95a72af..00000000 --- a/src/assets/icons/chatgpt.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - Openai Icon Streamline Icon: https://streamlinehq.com - - - \ No newline at end of file diff --git a/src/components/AskIaButton.vue b/src/components/AskIaButton.vue index 97d7ad69..4a7019f1 100644 --- a/src/components/AskIaButton.vue +++ b/src/components/AskIaButton.vue @@ -1,30 +1,37 @@