Skip to content

Commit 18dc65e

Browse files
mrholekmrholek
committed
docs: update theme
1 parent ab0c9ed commit 18dc65e

File tree

4 files changed

+149
-121
lines changed

4 files changed

+149
-121
lines changed

‎gatsby-node.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
2525

2626
exports.createPages = async ({ graphql, actions, reporter }) => {
2727
// Destructure the createPage function from the actions object
28-
const { createPage } = actions
28+
const { createPage, createRedirect } = actions
2929
const result = await graphql(`
3030
query {
3131
allMdx {
@@ -59,4 +59,10 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
5959
context: { id: node.id },
6060
})
6161
})
62+
createRedirect({
63+
fromPath: `/`,
64+
toPath: `/getting-started/introduction/`,
65+
redirectInBrowser: true,
66+
isPermanent: true,
67+
})
6268
}

‎src/docs/components/CodeBlock.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,19 @@ import Highlight, { defaultProps } from 'prism-react-renderer'
44

55
const CodeBlock: FC = ({ children }) => {
66
const _children = children.props.children
7-
const language = children.props.className ? children.props.className.replace(/language-/, '') : 'jsx'
7+
const language = children.props.className
8+
? children.props.className.replace(/language-/, '')
9+
: 'jsx'
810
// const language = 'jsx'
911

1012
return (
1113
<div className="code mb-4" style={{ maxHeight: '500px', overflow: 'scroll' }}>
1214
<Highlight {...defaultProps} theme={false} code={_children?.trim()} language={language}>
1315
{({ className, style, tokens, getLineProps, getTokenProps }) => (
14-
<pre className={className} style={{ ...style, padding: '20px' }}>
16+
<pre className={className} style={{ ...style }}>
1517
{tokens.map((line, i) => (
1618
<div key={i} {...getLineProps({ line, key: i })}>
19+
<span className="line-no">{i + 1}</span>
1720
{line.map((token, key) => (
1821
<span key={key} {...getTokenProps({ token, key })} />
1922
))}

‎src/docs/components/Footer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const Footer: FC = ({ ...props }) => {
2727
<a href="https://coreui.io/vue/">CoreUI for Vue.js</a>
2828
</li>
2929
</ul>
30-
<p className="mb-0">CoreUI for React is Open Source UI Components Library for React.</p>
30+
<p className="mb-0">CoreUI for React is Open Source UI Components Library for React.js.</p>
3131
<p className="mb-0">
3232
Currently v{pkg.version}. Code licensed{' '}
3333
<a

‎src/docs/styles/_prism.scss

Lines changed: 136 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -6,120 +6,139 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli
66
* @author Rose Pritchard
77
*/
88

9-
code[class*="language-"],
10-
pre[class*="language-"] {
11-
color: #ccc;
12-
background: none;
13-
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14-
font-size: 1em;
15-
text-align: left;
16-
white-space: pre;
17-
word-spacing: normal;
18-
word-break: normal;
19-
word-wrap: normal;
20-
line-height: 1.5;
21-
22-
-moz-tab-size: 4;
23-
-o-tab-size: 4;
24-
tab-size: 4;
25-
26-
-webkit-hyphens: none;
27-
-moz-hyphens: none;
28-
-ms-hyphens: none;
29-
hyphens: none;
30-
31-
}
32-
33-
/* Code blocks */
34-
pre[class*="language-"] {
35-
padding: 1em;
36-
margin: .5em 0;
37-
overflow: auto;
38-
}
39-
40-
:not(pre) > code[class*="language-"],
41-
pre[class*="language-"] {
42-
background: #2d2d2d;
43-
}
44-
45-
/* Inline code */
46-
:not(pre) > code[class*="language-"] {
47-
padding: .1em;
48-
border-radius: .3em;
49-
white-space: normal;
50-
}
51-
52-
.token.comment,
53-
.token.block-comment,
54-
.token.prolog,
55-
.token.doctype,
56-
.token.cdata {
57-
color: #999;
58-
}
59-
60-
.token.punctuation {
61-
color: #ccc;
62-
}
63-
64-
.token.tag,
65-
.token.attr-name,
66-
.token.namespace,
67-
.token.deleted {
68-
color: #e2777a;
69-
}
70-
71-
.token.function-name {
72-
color: #6196cc;
73-
}
74-
75-
.token.boolean,
76-
.token.number,
77-
.token.function {
78-
color: #f08d49;
79-
}
80-
81-
.token.property,
82-
.token.class-name,
83-
.token.constant,
84-
.token.symbol {
85-
color: #f8c555;
86-
}
87-
88-
.token.selector,
89-
.token.important,
90-
.token.atrule,
91-
.token.keyword,
92-
.token.builtin {
93-
color: #cc99cd;
94-
}
95-
96-
.token.string,
97-
.token.char,
98-
.token.attr-value,
99-
.token.regex,
100-
.token.variable {
101-
color: #7ec699;
102-
}
103-
104-
.token.operator,
105-
.token.entity,
106-
.token.url {
107-
color: #67cdcc;
108-
}
109-
110-
.token.important,
111-
.token.bold {
112-
font-weight: bold;
113-
}
114-
.token.italic {
115-
font-style: italic;
116-
}
117-
118-
.token.entity {
119-
cursor: help;
120-
}
121-
122-
.token.inserted {
123-
color: green;
124-
}
125-
9+
code[class*='language-'],
10+
pre[class*='language-'] {
11+
color: #ccc;
12+
background: none;
13+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14+
font-size: .875em;
15+
text-align: left;
16+
white-space: pre;
17+
word-spacing: normal;
18+
word-break: normal;
19+
word-wrap: normal;
20+
line-height: 1.5;
21+
22+
-moz-tab-size: 4;
23+
-o-tab-size: 4;
24+
tab-size: 4;
25+
26+
-webkit-hyphens: none;
27+
-moz-hyphens: none;
28+
-ms-hyphens: none;
29+
hyphens: none;
30+
}
31+
32+
/* Code blocks */
33+
pre[class*='language-'] {
34+
padding: 1em;
35+
margin: 0.5em 0;
36+
overflow: auto;
37+
}
38+
39+
:not(pre) > code[class*='language-'],
40+
pre[class*='language-'] {
41+
background: #2d2d2d;
42+
}
43+
44+
/* Inline code */
45+
:not(pre) > code[class*='language-'] {
46+
padding: 0.1em;
47+
border-radius: 0.3em;
48+
white-space: normal;
49+
}
50+
51+
.token.comment,
52+
.token.block-comment,
53+
.token.prolog,
54+
.token.doctype,
55+
.token.cdata {
56+
color: #999;
57+
}
58+
59+
.token.punctuation {
60+
color: #ccc;
61+
}
62+
63+
.token.tag,
64+
.token.attr-name,
65+
.token.namespace,
66+
.token.deleted {
67+
color: #e2777a;
68+
}
69+
70+
.token.function-name {
71+
color: #6196cc;
72+
}
73+
74+
.token.boolean,
75+
.token.number,
76+
.token.function {
77+
color: #f08d49;
78+
}
79+
80+
.token.property,
81+
.token.class-name,
82+
.token.constant,
83+
.token.symbol {
84+
color: #f8c555;
85+
}
86+
87+
.token.selector,
88+
.token.important,
89+
.token.atrule,
90+
.token.keyword,
91+
.token.builtin {
92+
color: #cc99cd;
93+
}
94+
95+
.token.string,
96+
.token.char,
97+
.token.attr-value,
98+
.token.regex,
99+
.token.variable {
100+
color: #7ec699;
101+
}
102+
103+
.token.operator,
104+
.token.entity,
105+
.token.url {
106+
color: #67cdcc;
107+
}
108+
109+
.token.important,
110+
.token.bold {
111+
font-weight: bold;
112+
}
113+
.token.italic {
114+
font-style: italic;
115+
}
116+
117+
.token.entity {
118+
cursor: help;
119+
}
120+
121+
.token.inserted {
122+
color: green;
123+
}
124+
125+
.line-no {
126+
position: relative;
127+
display: inline-block;
128+
text-align: center;
129+
width: 4em;
130+
margin-right: 1em;
131+
margin-left: -1em;
132+
user-select: none;
133+
color: #9e9e9e;
134+
// border-right: 1px solid rgba(0, 0, 0, 0.66);
135+
136+
&:after {
137+
position: absolute;
138+
top: -50%;
139+
right: 0;
140+
content: "";
141+
height: 200%;
142+
border-right: 1px solid rgba(0, 0, 0, 0.66);
143+
}
144+
}

0 commit comments

Comments
 (0)