Skip to content

Commit 4d6ae48

Browse files
nathanosdevnathanosdev
authored
docs: add dfinity starlight theme (#1090)
* docs: add dfinity starlight theme * add DFINITY font * rename dfinity logo to icp logo
1 parent b4fd8d1 commit 4d6ae48

File tree

8 files changed

+135
-2
lines changed

8 files changed

+135
-2
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
- feat: adds the `getTimeDiffMsecs` method to the `HttpAgent` class, which returns the time difference in milliseconds between the IC network clock and the client's clock.
1515
- feat: adds the `hasSyncedTime` method to the `HttpAgent` class, which returns `true` if the time has been synced at least once with the IC network, `false` otherwise.
1616
- fix: use the effective canister id to delete the node keys from the local cache.
17+
- docs: add DFINITY Starlight theme to the docs
1718

1819
## [3.1.0] - 2025-07-24
1920

‎docs/astro.config.mjs‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
// @ts-check
22
import { defineConfig } from 'astro/config';
33
import starlight from '@astrojs/starlight';
4-
import { libsPlugin } from './src/libs-plugin';
4+
import { libsPlugin } from './src/plugins/libs';
5+
import { dfinityStarlightTheme } from './src/plugins/theme';
56

67
// https://astro.build/config
78
export default defineConfig({
89
site: 'https://js.icp.build/',
910
base: '/core/',
1011
integrations: [
1112
starlight({
12-
title: 'ICP JS SDK Docs',
13+
title: 'ICP JS SDK Core',
1314
social: [{ icon: 'github', label: 'GitHub', href: 'https://github.com/dfinity/agent-js' }],
1415
plugins: [
16+
dfinityStarlightTheme(),
1517
libsPlugin({
1618
clean: true,
1719
baseDir: '../packages',

‎docs/src/plugins/libs/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './libs-plugin';

‎docs/src/libs-plugin.ts‎ renamed to ‎docs/src/plugins/libs/libs-plugin.ts‎

File renamed without changes.

‎docs/src/plugins/theme/dfinity-starlight-theme.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* Available props: https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css */
2+
3+
:root {
4+
--sl-font-system:
5+
'CircularXX', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
6+
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
7+
'Segoe UI Symbol', 'Noto Color Emoji';
8+
9+
--dfn-color-black: hsl(259, 0%, 13%);
10+
--dfn-color-gray-7: hsl(259, 4%, 13%);
11+
--dfn-color-gray-6: hsl(259, 4%, 17%);
12+
--dfn-color-gray-5: hsl(259, 4%, 40%);
13+
--dfn-color-gray-4: hsl(259, 4%, 46%);
14+
--dfn-color-gray-3: hsl(259, 4%, 56%);
15+
--dfn-color-gray-2: hsl(259, 4%, 80%);
16+
--dfn-color-gray-1: hsl(259, 4%, 93%);
17+
--dfn-color-white: hsl(259, 0%, 100%);
18+
19+
--dfn-pink: hsl(312, 100%, 45%);
20+
--dfn-purple: hsl(250, 100%, 81%);
21+
--dfn-dark-purple: hsl(259, 100%, 36%);
22+
23+
--dfn-color-bg-navbar: var(--dfn-color-black);
24+
--dfn-color-bg-sidebar: var(--dfn-color-black);
25+
26+
--sl-color-accent: var(--dfn-dark-purple);
27+
--sl-color-accent-low: var(--dfn-color-black);
28+
--sl-color-accent-high: var(--dfn-purple);
29+
30+
--sl-color-bg-nav: var(--dfn-color-bg-navbar);
31+
--sl-color-bg-sidebar: var(--dfn-color-bg-sidebar);
32+
33+
--sl-color-white: var(--dfn-color-white);
34+
--sl-color-gray-1: var(--dfn-color-gray-1);
35+
--sl-color-gray-2: var(--dfn-color-gray-2);
36+
--sl-color-gray-3: var(--dfn-color-gray-3);
37+
--sl-color-gray-4: var(--dfn-color-gray-4);
38+
--sl-color-gray-5: var(--dfn-color-gray-5);
39+
--sl-color-gray-6: var(--dfn-color-gray-6);
40+
--sl-color-gray-7: var(--dfn-color-gray-7);
41+
--sl-color-black: var(--dfn-color-black);
42+
}
43+
44+
:root[data-theme='light'] {
45+
--dfn-color-bg-navbar: #e8e4ed;
46+
--dfn-color-bg-sidebar: #f1eef5;
47+
48+
--sl-color-white: var(--dfn-color-black);
49+
--sl-color-gray-1: var(--dfn-color-gray-7);
50+
--sl-color-gray-2: var(--dfn-color-gray-6);
51+
--sl-color-gray-3: var(--dfn-color-gray-5);
52+
--sl-color-gray-4: var(--dfn-color-gray-4);
53+
--sl-color-gray-5: var(--dfn-color-gray-3);
54+
--sl-color-gray-6: var(--dfn-color-gray-2);
55+
--sl-color-gray-7: var(--dfn-color-gray-1);
56+
--sl-color-black: var(--dfn-color-white);
57+
}

‎docs/src/plugins/theme/dfinity-starlight-theme.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { StarlightPlugin } from '@astrojs/starlight/types';
2+
3+
export function dfinityStarlightTheme(): StarlightPlugin {
4+
return {
5+
name: '@dfinity/starlight-theme',
6+
hooks: {
7+
'config:setup': ctx => {
8+
ctx.updateConfig({
9+
logo: {
10+
src: './src/plugins/theme/icp.svg',
11+
alt: 'Internet Computer Logo',
12+
},
13+
customCss: [
14+
...(ctx.config.customCss || []),
15+
'./src/plugins/theme/dfinity-starlight-theme.css',
16+
],
17+
components: {
18+
...ctx.config.components,
19+
},
20+
});
21+
},
22+
},
23+
};
24+
}

‎docs/src/plugins/theme/icp.svg‎

Lines changed: 47 additions & 0 deletions
Loading

‎docs/src/plugins/theme/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './dfinity-starlight-theme';

0 commit comments

Comments
 (0)