From a9545e8a3658abbe80252d4db766996090b5b99b Mon Sep 17 00:00:00 2001 From: NathanosDev Date: Wed, 20 Aug 2025 22:16:45 +0200 Subject: [PATCH 1/2] docs: update theme and add overview page --- docs/astro.config.mjs | 4 +- docs/plugins/package.json | 3 + docs/plugins/src/assets/elements.css | 28 ++++ docs/plugins/src/assets/layers.css | 1 + docs/plugins/src/assets/overrides.css | 9 ++ docs/plugins/src/assets/theme.css | 136 +++++++++++------- docs/plugins/src/theme.ts | 16 ++- docs/src/content/docs/index.mdx | 10 -- .../v3.0.0.md => upgrading/v3.md} | 0 docs/src/pages/index.astro | 113 +++++++++++++++ 10 files changed, 248 insertions(+), 72 deletions(-) create mode 100644 docs/plugins/src/assets/elements.css create mode 100644 docs/plugins/src/assets/layers.css create mode 100644 docs/plugins/src/assets/overrides.css delete mode 100644 docs/src/content/docs/index.mdx rename docs/src/content/docs/{release-notes/v3.0.0.md => upgrading/v3.md} (100%) create mode 100644 docs/src/pages/index.astro diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 139a43fac..f3d5119b8 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -42,8 +42,8 @@ export default defineConfig({ ], sidebar: [ { - label: 'Release Notes', - autogenerate: { directory: 'release-notes', collapsed: true }, + label: 'Upgrading', + autogenerate: { directory: 'upgrading', collapsed: true }, }, ], }), diff --git a/docs/plugins/package.json b/docs/plugins/package.json index 231ce5c24..a0bdbbca9 100644 --- a/docs/plugins/package.json +++ b/docs/plugins/package.json @@ -36,7 +36,10 @@ "exports": { ".": "./src/mod.ts", "./assets/icp.svg": "./src/assets/icp.svg", + "./assets/layers.css": "./src/assets/layers.css", "./assets/theme.css": "./src/assets/theme.css", + "./assets/overrides.css": "./src/assets/overrides.css", + "./assets/elements.css": "./src/assets/elements.css", "./additional-files": "./src/additional-files.ts", "./libs": "./src/libs.ts", "./markdown-urls": "./src/markdown-urls.ts", diff --git a/docs/plugins/src/assets/elements.css b/docs/plugins/src/assets/elements.css new file mode 100644 index 000000000..6e91431af --- /dev/null +++ b/docs/plugins/src/assets/elements.css @@ -0,0 +1,28 @@ +@layer elements { + /** + * Common + */ + :root { + .dfn-text-highlight { + color: var(--sl-color-accent); + } + + .dfn-text-gradient { + background-image: linear-gradient( + 90deg, + var(--dfn-color-text-gradient-start), + var(--dfn-color-text-gradient-end) + ); + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .dfn-bg-gradient { + background-image: linear-gradient( + 0deg, + var(--dfn-color-bg-gradient-start), + var(--dfn-color-bg-gradient-end) + ); + } + } +} diff --git a/docs/plugins/src/assets/layers.css b/docs/plugins/src/assets/layers.css new file mode 100644 index 000000000..8e54fd20b --- /dev/null +++ b/docs/plugins/src/assets/layers.css @@ -0,0 +1 @@ +@layer starlight, theme, overrides, elements; diff --git a/docs/plugins/src/assets/overrides.css b/docs/plugins/src/assets/overrides.css new file mode 100644 index 000000000..74fe67cc1 --- /dev/null +++ b/docs/plugins/src/assets/overrides.css @@ -0,0 +1,9 @@ +@layer overrides { + .sl-link-button { + border-radius: var(--dfn-border-radius); + } + + .card { + border-radius: var(--dfn-border-radius); + } +} diff --git a/docs/plugins/src/assets/theme.css b/docs/plugins/src/assets/theme.css index 1acc14d43..356451482 100644 --- a/docs/plugins/src/assets/theme.css +++ b/docs/plugins/src/assets/theme.css @@ -1,58 +1,86 @@ /* Available props: https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css */ -:root { - --sl-font-system: - "CircularXX", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, - "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", - "Noto Color Emoji"; - - --dfn-color-black: hsl(259, 0%, 13%); - --dfn-color-gray-7: hsl(259, 4%, 13%); - --dfn-color-gray-6: hsl(259, 4%, 17%); - --dfn-color-gray-5: hsl(259, 4%, 40%); - --dfn-color-gray-4: hsl(259, 4%, 46%); - --dfn-color-gray-3: hsl(259, 4%, 56%); - --dfn-color-gray-2: hsl(259, 4%, 80%); - --dfn-color-gray-1: hsl(259, 4%, 93%); - --dfn-color-white: hsl(259, 0%, 100%); - - --dfn-pink: hsl(312, 100%, 45%); - --dfn-purple: hsl(250, 100%, 81%); - --dfn-dark-purple: hsl(259, 100%, 36%); - - --dfn-color-bg-navbar: var(--dfn-color-black); - --dfn-color-bg-sidebar: var(--dfn-color-black); - - --sl-color-accent: var(--dfn-dark-purple); - --sl-color-accent-low: var(--dfn-color-black); - --sl-color-accent-high: var(--dfn-purple); - - --sl-color-bg-nav: var(--dfn-color-bg-navbar); - --sl-color-bg-sidebar: var(--dfn-color-bg-sidebar); - - --sl-color-white: var(--dfn-color-white); - --sl-color-gray-1: var(--dfn-color-gray-1); - --sl-color-gray-2: var(--dfn-color-gray-2); - --sl-color-gray-3: var(--dfn-color-gray-3); - --sl-color-gray-4: var(--dfn-color-gray-4); - --sl-color-gray-5: var(--dfn-color-gray-5); - --sl-color-gray-6: var(--dfn-color-gray-6); - --sl-color-gray-7: var(--dfn-color-gray-7); - --sl-color-black: var(--dfn-color-black); -} +@layer theme { + /** + * Common + */ + :root { + --sl-font-system: + 'CircularXX', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; + + --dfn-color-black: #181818; + --dfn-color-gray-7: hsl(259, 4%, 13%); + --dfn-color-gray-6: hsl(259, 4%, 17%); + --dfn-color-gray-5: hsl(259, 4%, 20%); + --dfn-color-gray-4: hsl(259, 4%, 46%); + --dfn-color-gray-3: hsl(259, 4%, 56%); + --dfn-color-gray-2: hsl(259, 4%, 80%); + --dfn-color-gray-1: hsl(259, 4%, 93%); + --dfn-color-white: #ffffff; + + --dfn-color-infinite: #3b00b9; + --dfn-color-dark-infinite: #1e005d; + --dfn-color-razzmatazz: #ed1e79; + --dfn-color-meteorite: #522785; + --dfn-color-picton-blue: #29abe2; + --dfn-color-flamingo: #f15a24; + --dfn-color-sea-buckthorn: #fbb03b; + + --dfn-color-text-gradient-start: #6a85f1; + --dfn-color-text-gradient-end: #c572ef; + + --dfn-border-radius: 0.75rem; + } + + /** + * Dark mode + */ + :root { + --sl-color-accent-low: var(--dfn-color-black); + --sl-color-accent: var(--dfn-color-picton-blue); + --sl-color-accent-high: var(--dfn-color-sea-buckthorn); + + --sl-color-white: var(--dfn-color-white); + --sl-color-gray-1: var(--dfn-color-gray-1); + --sl-color-gray-2: var(--dfn-color-gray-2); + --sl-color-gray-3: var(--dfn-color-gray-3); + --sl-color-gray-4: var(--dfn-color-gray-4); + --sl-color-gray-5: var(--dfn-color-gray-5); + --sl-color-gray-6: var(--dfn-color-gray-6); + --sl-color-gray-7: var(--dfn-color-gray-7); + --sl-color-black: var(--dfn-color-black); + + --sl-color-bg-nav: var(--dfn-color-black); + --sl-color-bg-sidebar: var(--dfn-color-black); + + --dfn-color-bg-gradient-start: #0e031f; + --dfn-color-bg-gradient-end: #281447; + } + + /** + * Light mode + */ + :root[data-theme='light'] { + --sl-color-accent-low: var(--dfn-color-dark-infinite); + --sl-color-accent: var(--dfn-color-infinite); + --sl-color-accent-high: var(--dfn-color-flamingo); + + --sl-color-white: var(--dfn-color-black); + --sl-color-gray-1: var(--dfn-color-gray-7); + --sl-color-gray-2: var(--dfn-color-gray-6); + --sl-color-gray-3: var(--dfn-color-gray-5); + --sl-color-gray-4: var(--dfn-color-gray-4); + --sl-color-gray-5: var(--dfn-color-gray-3); + --sl-color-gray-6: var(--dfn-color-gray-2); + --sl-color-gray-7: var(--dfn-color-gray-1); + --sl-color-black: var(--dfn-color-white); + + --sl-color-bg-nav: #e8e4ed; + --sl-color-bg-sidebar: #f1eef5; -:root[data-theme="light"] { - --dfn-color-bg-navbar: #e8e4ed; - --dfn-color-bg-sidebar: #f1eef5; - - --sl-color-white: var(--dfn-color-black); - --sl-color-gray-1: var(--dfn-color-gray-7); - --sl-color-gray-2: var(--dfn-color-gray-6); - --sl-color-gray-3: var(--dfn-color-gray-5); - --sl-color-gray-4: var(--dfn-color-gray-4); - --sl-color-gray-5: var(--dfn-color-gray-3); - --sl-color-gray-6: var(--dfn-color-gray-2); - --sl-color-gray-7: var(--dfn-color-gray-1); - --sl-color-black: var(--dfn-color-white); + --dfn-color-bg-gradient-start: #c0d9ff; + --dfn-color-bg-gradient-end: #f0b9e5; + } } diff --git a/docs/plugins/src/theme.ts b/docs/plugins/src/theme.ts index a9c982b28..c19fc1972 100644 --- a/docs/plugins/src/theme.ts +++ b/docs/plugins/src/theme.ts @@ -1,18 +1,22 @@ -import type { StarlightPlugin } from "@astrojs/starlight/types"; +import type { StarlightPlugin } from '@astrojs/starlight/types'; export function dfinityStarlightTheme(): StarlightPlugin { return { - name: "@dfinity/starlight/theme", + name: '@dfinity/starlight/theme', hooks: { - "config:setup": (ctx) => { + 'config:setup': ctx => { ctx.updateConfig({ logo: { - src: "@dfinity/starlight/assets/icp.svg", - alt: "Internet Computer Logo", + src: '@dfinity/starlight/assets/icp.svg', + alt: 'Internet Computer Logo', + replacesTitle: true, }, customCss: [ ...(ctx.config.customCss || []), - "@dfinity/starlight/assets/theme.css", + '@dfinity/starlight/assets/layers.css', + '@dfinity/starlight/assets/theme.css', + '@dfinity/starlight/assets/overrides.css', + '@dfinity/starlight/assets/elements.css', ], }); }, diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx deleted file mode 100644 index 4d196e18a..000000000 --- a/docs/src/content/docs/index.mdx +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: ICP JavaScript SDK - Core -description: Get started building your JavaScript powered ICP application. -template: splash -hero: - actions: - - text: Getting started - link: /core/libs/agent/ - icon: right-arrow ---- diff --git a/docs/src/content/docs/release-notes/v3.0.0.md b/docs/src/content/docs/upgrading/v3.md similarity index 100% rename from docs/src/content/docs/release-notes/v3.0.0.md rename to docs/src/content/docs/upgrading/v3.md diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro new file mode 100644 index 000000000..7242adb2d --- /dev/null +++ b/docs/src/pages/index.astro @@ -0,0 +1,113 @@ +--- +// Import the `` component first to set up cascade layers. +import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'; +import { Card, CardGrid, LinkButton } from '@astrojs/starlight/components'; +import icpSvg from '@dfinity/starlight/assets/icp.svg'; +--- + +@dfinity/agent? Migrate to @icp-sdk/core!`, + }, + next: false, + prev: false, + hero: { + title: `ICP JavaScript SDK Core`, + tagline: + 'Build applications that interact with the Internet Computer from browsers, Node.js, and other JavaScript runtimes.', + image: { + file: icpSvg, + alt: 'Internet Computer Logo', + }, + }, + }} +> +
+

Modules

+ + + + Build applications that interact with the Internet Computer from browsers, Node.js, and + other JavaScript runtimes. + + + See @icp-sdk/core/agent docs + + + + + Build applications that interact with the Internet Computer from browsers, Node.js, and + other JavaScript runtimes. + + + See @icp-sdk/core/candid docs + + + + + Build applications that interact with the Internet Computer from browsers, Node.js, and + other JavaScript runtimes. + + + See @icp-sdk/core/identity docs + + + + + Build applications that interact with the Internet Computer from browsers, Node.js, and + other JavaScript runtimes. + + + See @icp-sdk/core/principal docs + + + +
+ +
+

Upgrading

+ + + +

+ If you're using @dfinity/agent version 3.x, you can migrate to + @icp-sdk/core with the help of our automated migration tools or manual migration + guide. +

+ + + Migrate to @icp-sdk/core + + + + +

+ If you're still using @dfinity/agent version 2.x, you can migrate to 3.x with + the help of our migration guide. +

+ + + Migrate to @dfinity/agent@v3 + + + +
+ From 89dd4ae60501db39f55ace02b35c89f3ff8409ed Mon Sep 17 00:00:00 2001 From: NathanosDev Date: Wed, 20 Aug 2025 22:21:25 +0200 Subject: [PATCH 2/2] docs: use passthrough image service --- docs/astro.config.mjs | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index f3d5119b8..9ddd06b57 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -1,5 +1,5 @@ // @ts-check -import { defineConfig } from 'astro/config'; +import { defineConfig, passthroughImageService } from 'astro/config'; import starlight from '@astrojs/starlight'; import { additionalFilesPlugin } from '@dfinity/starlight/additional-files'; import { markdownUrlsPlugin } from '@dfinity/starlight/markdown-urls'; @@ -10,6 +10,9 @@ import { libsPlugin } from '@dfinity/starlight/libs'; export default defineConfig({ site: 'https://js.icp.build/', base: '/core/', + image: { + service: passthroughImageService(), + }, integrations: [ starlight({ title: 'ICP JS SDK Core',