Skip to content

Commit 77a882c

Browse files
sserratasserrata
authored
Apply docusaurus.io styles to demo (#443)
* Apply docusaurus.io styles * Apply docusaurus.io syntax highlighting
1 parent c63dc3f commit 77a882c

File tree

4 files changed

+204
-58
lines changed

4 files changed

+204
-58
lines changed

‎demo/docusaurus.config.js

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
// @ts-check
22
// Note: type annotations allow type checking and IDEs autocompletion
33

4-
const lightCodeTheme = require("prism-react-renderer/themes/github");
5-
const darkCodeTheme = require("prism-react-renderer/themes/dracula");
64
const { DOCUSAURUS_VERSION } = require("@docusaurus/utils");
75

86
/** @type {import('@docusaurus/types').Config} */
@@ -138,8 +136,6 @@ const config = {
138136
copyright: `Copyright © ${new Date().getFullYear()} Palo Alto Networks, Inc. Built with Docusaurus ${DOCUSAURUS_VERSION}.`,
139137
},
140138
prism: {
141-
theme: lightCodeTheme,
142-
darkTheme: darkCodeTheme,
143139
additionalLanguages: ["ruby", "csharp", "php", "java"],
144140
},
145141
languageTabs: [
@@ -294,4 +290,14 @@ const config = {
294290
],
295291
};
296292

297-
module.exports = config;
293+
async function createConfig() {
294+
const lightTheme = (await import("./src/utils/prismLight.mjs")).default;
295+
const darkTheme = (await import("./src/utils/prismDark.mjs")).default;
296+
// @ts-expect-error: we know it exists, right
297+
config.themeConfig.prism.theme = lightTheme;
298+
// @ts-expect-error: we know it exists, right
299+
config.themeConfig.prism.darkTheme = darkTheme;
300+
return config;
301+
}
302+
303+
module.exports = createConfig;

‎demo/src/css/custom.css

Lines changed: 14 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,29 @@
55
*/
66

77
/* You can override the default Infima variables here. */
8-
@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Sans&display=swap");
98

109
:root {
11-
--ifm-color-primary: #2980b9;
12-
--ifm-color-primary-dark: #2573a7;
13-
--ifm-color-primary-darker: #236d9d;
14-
--ifm-color-primary-darkest: #1d5a82;
15-
--ifm-color-primary-light: #2d8dcc;
16-
--ifm-color-primary-lighter: #3293d2;
17-
--ifm-color-primary-lightest: #4ea1d8;
10+
--ifm-color-primary: #2e8555;
11+
--ifm-color-primary-dark: #29784c;
12+
--ifm-color-primary-darker: #277148;
13+
--ifm-color-primary-darkest: #205d3b;
14+
--ifm-color-primary-light: #33925d;
15+
--ifm-color-primary-lighter: #359962;
16+
--ifm-color-primary-lightest: #3cad6e;
1817
--ifm-code-font-size: 95%;
1918
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
20-
21-
--ifm-font-family-monospace: "Fira Code", monospace;
22-
--ifm-font-size-base: 95%;
23-
--ifm-code-font-size: 90%;
24-
25-
--ifm-background-color: var(--ifm-color-emphasis-0) !important;
2619
--site-primary-hue-saturation: 167 68%;
2720
}
2821

2922
/* For readability concerns, you should choose a lighter palette in dark mode. */
3023
[data-theme="dark"] {
31-
--ifm-color-primary: #3498db;
32-
--ifm-color-primary-dark: #258bcf;
33-
--ifm-color-primary-darker: #2383c4;
34-
--ifm-color-primary-darkest: #1d6ca1;
35-
--ifm-color-primary-light: #4ba4df;
36-
--ifm-color-primary-lighter: #57aae1;
37-
--ifm-color-primary-lightest: #79bbe7;
24+
--ifm-color-primary: #25c2a0;
25+
--ifm-color-primary-dark: #21af90;
26+
--ifm-color-primary-darker: #1fa588;
27+
--ifm-color-primary-darkest: #1a8870;
28+
--ifm-color-primary-light: #29d5b0;
29+
--ifm-color-primary-lighter: #32d8b4;
30+
--ifm-color-primary-lightest: #4fddbf;
3831
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
3932
}
4033

@@ -130,38 +123,6 @@ html[data-theme="dark"] .header-github-link:before {
130123
font-size: x-large;
131124
}
132125

133-
/* Center all columns in main wrapper */
134-
.main-wrapper {
135-
max-width: 1400px;
136-
width: 1400px;
137-
align-self: center;
138-
}
139-
140-
.main-wrapper h1[class^="docTitle"] {
141-
font-size: 2.8rem;
142-
}
143-
144-
@media (max-width: 1416px) {
145-
.main-wrapper {
146-
max-width: 100%;
147-
width: 100%;
148-
}
149-
}
150-
151-
@media (max-width: 1320px) and (min-width: 997px) {
152-
.container {
153-
max-width: calc(
154-
var(--ifm-container-width) - 125px - var(--ifm-spacing-horizontal) * 2
155-
);
156-
}
157-
}
158-
159-
/* Center navbar items */
160-
.navbar__inner {
161-
max-width: 1360px;
162-
margin: 0 auto;
163-
}
164-
165126
div[class^="announcementBar_"] {
166127
--site-announcement-bar-stripe-color1: hsl(
167128
var(--site-primary-hue-saturation) 85%

‎demo/src/utils/prismDark.mjs

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import darkTheme from "prism-react-renderer/themes/vsDark/index.cjs.js";
9+
10+
export default {
11+
plain: {
12+
color: "#D4D4D4",
13+
backgroundColor: "#212121",
14+
},
15+
styles: [
16+
...darkTheme.styles,
17+
{
18+
types: ["title"],
19+
style: {
20+
color: "#569CD6",
21+
fontWeight: "bold",
22+
},
23+
},
24+
{
25+
types: ["property", "parameter"],
26+
style: {
27+
color: "#9CDCFE",
28+
},
29+
},
30+
{
31+
types: ["script"],
32+
style: {
33+
color: "#D4D4D4",
34+
},
35+
},
36+
{
37+
types: ["boolean", "arrow", "atrule", "tag"],
38+
style: {
39+
color: "#569CD6",
40+
},
41+
},
42+
{
43+
types: ["number", "color", "unit"],
44+
style: {
45+
color: "#B5CEA8",
46+
},
47+
},
48+
{
49+
types: ["font-matter"],
50+
style: {
51+
color: "#CE9178",
52+
},
53+
},
54+
{
55+
types: ["keyword", "rule"],
56+
style: {
57+
color: "#C586C0",
58+
},
59+
},
60+
{
61+
types: ["regex"],
62+
style: {
63+
color: "#D16969",
64+
},
65+
},
66+
{
67+
types: ["maybe-class-name"],
68+
style: {
69+
color: "#4EC9B0",
70+
},
71+
},
72+
{
73+
types: ["constant"],
74+
style: {
75+
color: "#4FC1FF",
76+
},
77+
},
78+
],
79+
};

‎demo/src/utils/prismLight.mjs

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import lightTheme from "prism-react-renderer/themes/github/index.cjs.js";
9+
10+
export default {
11+
...lightTheme,
12+
styles: [
13+
...lightTheme.styles,
14+
{
15+
types: ["title"],
16+
style: {
17+
color: "#0550AE",
18+
fontWeight: "bold",
19+
},
20+
},
21+
{
22+
types: ["parameter"],
23+
style: {
24+
color: "#953800",
25+
},
26+
},
27+
{
28+
types: ["boolean", "rule", "color", "number", "constant", "property"],
29+
style: {
30+
color: "#005CC5",
31+
},
32+
},
33+
{
34+
types: ["atrule", "tag"],
35+
style: {
36+
color: "#22863A",
37+
},
38+
},
39+
{
40+
types: ["script"],
41+
style: {
42+
color: "#24292E",
43+
},
44+
},
45+
{
46+
types: ["operator", "unit", "rule"],
47+
style: {
48+
color: "#D73A49",
49+
},
50+
},
51+
{
52+
types: ["font-matter", "string", "attr-value"],
53+
style: {
54+
color: "#C6105F",
55+
},
56+
},
57+
{
58+
types: ["class-name"],
59+
style: {
60+
color: "#116329",
61+
},
62+
},
63+
{
64+
types: ["attr-name"],
65+
style: {
66+
color: "#0550AE",
67+
},
68+
},
69+
{
70+
types: ["keyword"],
71+
style: {
72+
color: "#CF222E",
73+
},
74+
},
75+
{
76+
types: ["function"],
77+
style: {
78+
color: "#8250DF",
79+
},
80+
},
81+
{
82+
types: ["selector"],
83+
style: {
84+
color: "#6F42C1",
85+
},
86+
},
87+
{
88+
types: ["variable"],
89+
style: {
90+
color: "#E36209",
91+
},
92+
},
93+
{
94+
types: ["comment"],
95+
style: {
96+
color: "#6B6B6B",
97+
},
98+
},
99+
],
100+
};

0 commit comments

Comments
 (0)