Skip to content

Commit 056b99e

Browse files
nathanosdevnathanosdev
authored
docs: update theme and add overview page (#1110)
1 parent 9f6ca85 commit 056b99e

File tree

10 files changed

+252
-73
lines changed

10 files changed

+252
-73
lines changed

‎docs/astro.config.mjs‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-check
2-
import { defineConfig } from 'astro/config';
2+
import { defineConfig, passthroughImageService } from 'astro/config';
33
import starlight from '@astrojs/starlight';
44
import { additionalFilesPlugin } from '@dfinity/starlight/additional-files';
55
import { markdownUrlsPlugin } from '@dfinity/starlight/markdown-urls';
@@ -10,6 +10,9 @@ import { libsPlugin } from '@dfinity/starlight/libs';
1010
export default defineConfig({
1111
site: 'https://js.icp.build/',
1212
base: '/core/',
13+
image: {
14+
service: passthroughImageService(),
15+
},
1316
integrations: [
1417
starlight({
1518
title: 'ICP JS SDK Core',
@@ -42,8 +45,8 @@ export default defineConfig({
4245
],
4346
sidebar: [
4447
{
45-
label: 'Release Notes',
46-
autogenerate: { directory: 'release-notes', collapsed: true },
48+
label: 'Upgrading',
49+
autogenerate: { directory: 'upgrading', collapsed: true },
4750
},
4851
],
4952
}),

‎docs/plugins/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,10 @@
3636
"exports": {
3737
".": "./src/mod.ts",
3838
"./assets/icp.svg": "./src/assets/icp.svg",
39+
"./assets/layers.css": "./src/assets/layers.css",
3940
"./assets/theme.css": "./src/assets/theme.css",
41+
"./assets/overrides.css": "./src/assets/overrides.css",
42+
"./assets/elements.css": "./src/assets/elements.css",
4043
"./additional-files": "./src/additional-files.ts",
4144
"./libs": "./src/libs.ts",
4245
"./markdown-urls": "./src/markdown-urls.ts",

‎docs/plugins/src/assets/elements.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@layer elements {
2+
/**
3+
* Common
4+
*/
5+
:root {
6+
.dfn-text-highlight {
7+
color: var(--sl-color-accent);
8+
}
9+
10+
.dfn-text-gradient {
11+
background-image: linear-gradient(
12+
90deg,
13+
var(--dfn-color-text-gradient-start),
14+
var(--dfn-color-text-gradient-end)
15+
);
16+
-webkit-text-fill-color: transparent;
17+
background-clip: text;
18+
}
19+
20+
.dfn-bg-gradient {
21+
background-image: linear-gradient(
22+
0deg,
23+
var(--dfn-color-bg-gradient-start),
24+
var(--dfn-color-bg-gradient-end)
25+
);
26+
}
27+
}
28+
}

‎docs/plugins/src/assets/layers.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@layer starlight, theme, overrides, elements;

‎docs/plugins/src/assets/overrides.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@layer overrides {
2+
.sl-link-button {
3+
border-radius: var(--dfn-border-radius);
4+
}
5+
6+
.card {
7+
border-radius: var(--dfn-border-radius);
8+
}
9+
}

‎docs/plugins/src/assets/theme.css‎

Lines changed: 82 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,86 @@
11
/* Available props: https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css */
22

3-
:root {
4-
--sl-font-system:
5-
"CircularXX", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
6-
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
7-
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
8-
"Noto Color Emoji";
9-
10-
--dfn-color-black: hsl(259, 0%, 13%);
11-
--dfn-color-gray-7: hsl(259, 4%, 13%);
12-
--dfn-color-gray-6: hsl(259, 4%, 17%);
13-
--dfn-color-gray-5: hsl(259, 4%, 40%);
14-
--dfn-color-gray-4: hsl(259, 4%, 46%);
15-
--dfn-color-gray-3: hsl(259, 4%, 56%);
16-
--dfn-color-gray-2: hsl(259, 4%, 80%);
17-
--dfn-color-gray-1: hsl(259, 4%, 93%);
18-
--dfn-color-white: hsl(259, 0%, 100%);
19-
20-
--dfn-pink: hsl(312, 100%, 45%);
21-
--dfn-purple: hsl(250, 100%, 81%);
22-
--dfn-dark-purple: hsl(259, 100%, 36%);
23-
24-
--dfn-color-bg-navbar: var(--dfn-color-black);
25-
--dfn-color-bg-sidebar: var(--dfn-color-black);
26-
27-
--sl-color-accent: var(--dfn-dark-purple);
28-
--sl-color-accent-low: var(--dfn-color-black);
29-
--sl-color-accent-high: var(--dfn-purple);
30-
31-
--sl-color-bg-nav: var(--dfn-color-bg-navbar);
32-
--sl-color-bg-sidebar: var(--dfn-color-bg-sidebar);
33-
34-
--sl-color-white: var(--dfn-color-white);
35-
--sl-color-gray-1: var(--dfn-color-gray-1);
36-
--sl-color-gray-2: var(--dfn-color-gray-2);
37-
--sl-color-gray-3: var(--dfn-color-gray-3);
38-
--sl-color-gray-4: var(--dfn-color-gray-4);
39-
--sl-color-gray-5: var(--dfn-color-gray-5);
40-
--sl-color-gray-6: var(--dfn-color-gray-6);
41-
--sl-color-gray-7: var(--dfn-color-gray-7);
42-
--sl-color-black: var(--dfn-color-black);
43-
}
3+
@layer theme {
4+
/**
5+
* Common
6+
*/
7+
:root {
8+
--sl-font-system:
9+
'CircularXX', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
10+
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
11+
'Segoe UI Symbol', 'Noto Color Emoji';
12+
13+
--dfn-color-black: #181818;
14+
--dfn-color-gray-7: hsl(259, 4%, 13%);
15+
--dfn-color-gray-6: hsl(259, 4%, 17%);
16+
--dfn-color-gray-5: hsl(259, 4%, 20%);
17+
--dfn-color-gray-4: hsl(259, 4%, 46%);
18+
--dfn-color-gray-3: hsl(259, 4%, 56%);
19+
--dfn-color-gray-2: hsl(259, 4%, 80%);
20+
--dfn-color-gray-1: hsl(259, 4%, 93%);
21+
--dfn-color-white: #ffffff;
22+
23+
--dfn-color-infinite: #3b00b9;
24+
--dfn-color-dark-infinite: #1e005d;
25+
--dfn-color-razzmatazz: #ed1e79;
26+
--dfn-color-meteorite: #522785;
27+
--dfn-color-picton-blue: #29abe2;
28+
--dfn-color-flamingo: #f15a24;
29+
--dfn-color-sea-buckthorn: #fbb03b;
30+
31+
--dfn-color-text-gradient-start: #6a85f1;
32+
--dfn-color-text-gradient-end: #c572ef;
33+
34+
--dfn-border-radius: 0.75rem;
35+
}
36+
37+
/**
38+
* Dark mode
39+
*/
40+
:root {
41+
--sl-color-accent-low: var(--dfn-color-black);
42+
--sl-color-accent: var(--dfn-color-picton-blue);
43+
--sl-color-accent-high: var(--dfn-color-sea-buckthorn);
44+
45+
--sl-color-white: var(--dfn-color-white);
46+
--sl-color-gray-1: var(--dfn-color-gray-1);
47+
--sl-color-gray-2: var(--dfn-color-gray-2);
48+
--sl-color-gray-3: var(--dfn-color-gray-3);
49+
--sl-color-gray-4: var(--dfn-color-gray-4);
50+
--sl-color-gray-5: var(--dfn-color-gray-5);
51+
--sl-color-gray-6: var(--dfn-color-gray-6);
52+
--sl-color-gray-7: var(--dfn-color-gray-7);
53+
--sl-color-black: var(--dfn-color-black);
54+
55+
--sl-color-bg-nav: var(--dfn-color-black);
56+
--sl-color-bg-sidebar: var(--dfn-color-black);
57+
58+
--dfn-color-bg-gradient-start: #0e031f;
59+
--dfn-color-bg-gradient-end: #281447;
60+
}
61+
62+
/**
63+
* Light mode
64+
*/
65+
:root[data-theme='light'] {
66+
--sl-color-accent-low: var(--dfn-color-dark-infinite);
67+
--sl-color-accent: var(--dfn-color-infinite);
68+
--sl-color-accent-high: var(--dfn-color-flamingo);
69+
70+
--sl-color-white: var(--dfn-color-black);
71+
--sl-color-gray-1: var(--dfn-color-gray-7);
72+
--sl-color-gray-2: var(--dfn-color-gray-6);
73+
--sl-color-gray-3: var(--dfn-color-gray-5);
74+
--sl-color-gray-4: var(--dfn-color-gray-4);
75+
--sl-color-gray-5: var(--dfn-color-gray-3);
76+
--sl-color-gray-6: var(--dfn-color-gray-2);
77+
--sl-color-gray-7: var(--dfn-color-gray-1);
78+
--sl-color-black: var(--dfn-color-white);
79+
80+
--sl-color-bg-nav: #e8e4ed;
81+
--sl-color-bg-sidebar: #f1eef5;
4482

45-
:root[data-theme="light"] {
46-
--dfn-color-bg-navbar: #e8e4ed;
47-
--dfn-color-bg-sidebar: #f1eef5;
48-
49-
--sl-color-white: var(--dfn-color-black);
50-
--sl-color-gray-1: var(--dfn-color-gray-7);
51-
--sl-color-gray-2: var(--dfn-color-gray-6);
52-
--sl-color-gray-3: var(--dfn-color-gray-5);
53-
--sl-color-gray-4: var(--dfn-color-gray-4);
54-
--sl-color-gray-5: var(--dfn-color-gray-3);
55-
--sl-color-gray-6: var(--dfn-color-gray-2);
56-
--sl-color-gray-7: var(--dfn-color-gray-1);
57-
--sl-color-black: var(--dfn-color-white);
83+
--dfn-color-bg-gradient-start: #c0d9ff;
84+
--dfn-color-bg-gradient-end: #f0b9e5;
85+
}
5886
}

‎docs/plugins/src/theme.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
1-
import type { StarlightPlugin } from "@astrojs/starlight/types";
1+
import type { StarlightPlugin } from '@astrojs/starlight/types';
22

33
export function dfinityStarlightTheme(): StarlightPlugin {
44
return {
5-
name: "@dfinity/starlight/theme",
5+
name: '@dfinity/starlight/theme',
66
hooks: {
7-
"config:setup": (ctx) => {
7+
'config:setup': ctx => {
88
ctx.updateConfig({
99
logo: {
10-
src: "@dfinity/starlight/assets/icp.svg",
11-
alt: "Internet Computer Logo",
10+
src: '@dfinity/starlight/assets/icp.svg',
11+
alt: 'Internet Computer Logo',
12+
replacesTitle: true,
1213
},
1314
customCss: [
1415
...(ctx.config.customCss || []),
15-
"@dfinity/starlight/assets/theme.css",
16+
'@dfinity/starlight/assets/layers.css',
17+
'@dfinity/starlight/assets/theme.css',
18+
'@dfinity/starlight/assets/overrides.css',
19+
'@dfinity/starlight/assets/elements.css',
1620
],
1721
});
1822
},

‎docs/src/content/docs/index.mdx‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎docs/src/content/docs/release-notes/v3.0.0.md‎ renamed to ‎docs/src/content/docs/upgrading/v3.md‎

File renamed without changes.

‎docs/src/pages/index.astro‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
// Import the `<StarlightPage>` component first to set up cascade layers.
3+
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
4+
import { Card, CardGrid, LinkButton } from '@astrojs/starlight/components';
5+
import icpSvg from '@dfinity/starlight/assets/icp.svg';
6+
---
7+
8+
<StarlightPage
9+
frontmatter={{
10+
title: 'ICP JavaScript SDK Core',
11+
template: 'splash',
12+
banner: {
13+
content: `Still using <code>@dfinity/agent</code>? Migrate to <a href="/core/latest/upgrading/v4">@icp-sdk/core</a>!`,
14+
},
15+
next: false,
16+
prev: false,
17+
hero: {
18+
title: `ICP JavaScript SDK <span class="dfn-text-gradient">Core</span>`,
19+
tagline:
20+
'Build applications that interact with the Internet Computer from browsers, Node.js, and other JavaScript runtimes.',
21+
image: {
22+
file: icpSvg,
23+
alt: 'Internet Computer Logo',
24+
},
25+
},
26+
}}
27+
>
28+
<section>
29+
<h3>Modules</h3>
30+
31+
<CardGrid>
32+
<Card title="Agent">
33+
Build applications that interact with the Internet Computer from browsers, Node.js, and
34+
other JavaScript runtimes.
35+
36+
<LinkButton href="libs/agent" variant="minimal" icon="right-caret" iconPlacement="start">
37+
See <code class="dfn-text-highlight">@icp-sdk/core/agent</code> docs
38+
</LinkButton>
39+
</Card>
40+
41+
<Card title="Candid">
42+
Build applications that interact with the Internet Computer from browsers, Node.js, and
43+
other JavaScript runtimes.
44+
45+
<LinkButton href="libs/candid" variant="minimal" icon="right-caret" iconPlacement="start">
46+
See <code class="dfn-text-highlight">@icp-sdk/core/candid</code> docs
47+
</LinkButton>
48+
</Card>
49+
50+
<Card title="Identity">
51+
Build applications that interact with the Internet Computer from browsers, Node.js, and
52+
other JavaScript runtimes.
53+
54+
<LinkButton href="libs/identity" variant="minimal" icon="right-caret" iconPlacement="start">
55+
See <code class="dfn-text-highlight">@icp-sdk/core/identity</code> docs
56+
</LinkButton>
57+
</Card>
58+
59+
<Card title="Principal">
60+
Build applications that interact with the Internet Computer from browsers, Node.js, and
61+
other JavaScript runtimes.
62+
63+
<LinkButton
64+
href="libs/principal"
65+
variant="minimal"
66+
icon="right-caret"
67+
iconPlacement="start"
68+
>
69+
See <code class="dfn-text-highlight">@icp-sdk/core/principal</code> docs
70+
</LinkButton>
71+
</Card>
72+
</CardGrid>
73+
</section>
74+
75+
<section>
76+
<h3>Upgrading</h3>
77+
78+
<CardGrid>
79+
<Card title="ICP JS SDK Core">
80+
<p>
81+
If you're using <code>@dfinity/agent</code> version 3.x, you can migrate to
82+
<code>@icp-sdk/core</code> with the help of our automated migration tools or manual migration
83+
guide.
84+
</p>
85+
86+
<LinkButton
87+
href="upgrading/v4"
88+
variant="minimal"
89+
icon="right-caret"
90+
iconPlacement="start"
91+
>
92+
Migrate to <code class="dfn-text-highlight">@icp-sdk/core</code>
93+
</LinkButton>
94+
</Card>
95+
96+
<Card title="Agent JS v3">
97+
<p>
98+
If you're still using <code>@dfinity/agent</code> version 2.x, you can migrate to 3.x with
99+
the help of our migration guide.
100+
</p>
101+
102+
<LinkButton
103+
href="upgrading/v3"
104+
variant="minimal"
105+
icon="right-caret"
106+
iconPlacement="start"
107+
>
108+
Migrate to <code class="dfn-text-highlight">@dfinity/agent@v3</code>
109+
</LinkButton>
110+
</Card>
111+
</CardGrid>
112+
</section>
113+
</StarlightPage>

0 commit comments

Comments
 (0)