Skip to content

Commit cc45282

Browse files
mrholekmrholek
committed
docs: update documentation
1 parent d672653 commit cc45282

File tree

11 files changed

+214
-86
lines changed

11 files changed

+214
-86
lines changed

‎packages/docs/content/4.2/templates.mdx

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: React Templates
3+
name: React Templates
4+
description: Develop modern, beautiful, and responsive applications in half the time with high-performing and easy-to-customize react admin panels to cover any requirement.
5+
menu: Templates
6+
route: /templates
7+
---
8+
9+
import {
10+
CCard,
11+
CCardBody,
12+
CCardSubtitle,
13+
CCardTitle,
14+
CCol,
15+
CImage,
16+
CLink,
17+
CRow
18+
} from '@coreui/react/src/index'
19+
20+
## React Admin & Dashboard Templates
21+
22+
Check out the fully-featured, ready-to-use admin dashboard templates built using CoreUI for React.js, and CoreUI PRO for React.js
23+
24+
<CRow>
25+
<CCol md={6}>
26+
<CCard className="mb-4">
27+
<CCardBody>
28+
<CLink className="text-decoration-none text-reset" href="https://coreui.io/react/#compare" target="_blank">
29+
<CCardTitle>Free React Admin Template</CCardTitle>
30+
<CCardSubtitle className="mb-3 text-muted">Default Theme</CCardSubtitle>
31+
<CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_free_1440.webp" alt=""/>
32+
</CLink>
33+
</CCardBody>
34+
</CCard>
35+
</CCol>
36+
<CCol md={6}>
37+
<CCard className="mb-4">
38+
<CCardBody>
39+
<CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=default-v3" target="_blank">
40+
<CCardTitle>React Dashboard Template</CCardTitle>
41+
<CCardSubtitle className="mb-3 text-muted">Default Theme v3</CCardSubtitle>
42+
<CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_default_v3_1440.webp" alt=""/>
43+
</CLink>
44+
</CCardBody>
45+
</CCard>
46+
</CCol>
47+
<CCol md={6}>
48+
<CCard className="mb-4">
49+
<CCardBody>
50+
<CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=light-v3" target="_blank">
51+
<CCardTitle>React Dashboard Template</CCardTitle>
52+
<CCardSubtitle className="mb-3 text-muted">Light Theme v3</CCardSubtitle>
53+
<CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_light_v3_1440.webp" alt=""/>
54+
</CLink>
55+
</CCardBody>
56+
</CCard>
57+
</CCol>
58+
<CCol md={6}>
59+
<CCard className="mb-4">
60+
<CCardBody>
61+
<CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=default" target="_blank">
62+
<CCardTitle>React Dashboard Template</CCardTitle>
63+
<CCardSubtitle className="mb-3 text-muted">Default Theme</CCardSubtitle>
64+
<CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_default_1440.webp" alt=""/>
65+
</CLink>
66+
</CCardBody>
67+
</CCard>
68+
</CCol>
69+
<CCol md={6}>
70+
<CCard className="mb-4">
71+
<CCardBody>
72+
<CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=light" target="_blank">
73+
<CCardTitle>React Dashboard Template</CCardTitle>
74+
<CCardSubtitle className="mb-3 text-muted">Light Theme</CCardSubtitle>
75+
<CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_light_1440.webp" alt=""/>
76+
</CLink>
77+
</CCardBody>
78+
</CCard>
79+
</CCol>
80+
<CCol md={6}>
81+
<CCard className="mb-4">
82+
<CCardBody>
83+
<CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=dark" target="_blank">
84+
<CCardTitle>React Dashboard Template</CCardTitle>
85+
<CCardSubtitle className="mb-3 text-muted">Dark Theme</CCardSubtitle>
86+
<CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_dark_1440.webp" alt=""/>
87+
</CLink>
88+
</CCardBody>
89+
</CCard>
90+
</CCol>
91+
</CRow>

‎packages/docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
},
2929
"dependencies": {
3030
"@coreui/chartjs": "^3.0.0",
31-
"@coreui/coreui": "^4.1.6",
31+
"@coreui/coreui": "^4.2.0",
3232
"@coreui/icons": "^2.1.0",
3333
"@coreui/icons-react": "^2.0.0",
3434
"@coreui/react-chartjs": "^2.0.0",

‎packages/docs/src/components/Ads.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const Ads: FC = ({ code, placement }: { code: string; placement: string }) => {
1313
}
1414
}, [])
1515

16-
return <div id="carbonads" className="my-3" ref={ref} />
16+
return <div ref={ref} />
1717
}
1818

1919
Ads.displayName = 'Ads'

‎packages/docs/src/components/CodeBlock.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const CodeBlock: FC = ({ children }) => {
99
: 'jsx'
1010

1111
return (
12-
<div className="code mb-4" style={{ maxHeight: '500px', overflow: 'scroll' }}>
12+
<div className="code mb-4">
1313
<Highlight {...defaultProps} theme={undefined} code={_children?.trim()} language={language}>
1414
{({ className, style, tokens, getLineProps, getTokenProps }) => (
1515
<pre className={className} style={{ ...style }}>

‎packages/docs/src/components/Header.tsx

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,14 @@
11
import React, { FC } from 'react'
2-
import GitHubButton from 'react-github-btn'
32

43
import CIcon from '@coreui/icons-react'
54
import { cibGithub, cibTwitter, cilCloudDownload, cilMenu } from '@coreui/icons'
6-
import {
7-
CAlert,
8-
CButton,
9-
CHeader,
10-
CHeaderNav,
11-
CHeaderToggler,
12-
CNavItem,
13-
} from '@coreui/react/src/index'
5+
import { CButton, CHeader, CHeaderNav, CHeaderToggler, CNavItem } from '@coreui/react/src/index'
146

157
import { myContext } from './../templates/Docs'
168

179
const Header: FC = () => {
1810
return (
1911
<>
20-
<CAlert color="light" className="d-flex justify-content-center rounded-0 border-bottom mb-0">
21-
<span className="me-3">
22-
If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️
23-
</span>
24-
<GitHubButton
25-
href="https://github.com/coreui/coreui-react"
26-
data-size="large"
27-
aria-label="Star coreui/coreui-react on GitHub"
28-
>
29-
Star
30-
</GitHubButton>
31-
<span className="ms-3">🙏</span>
32-
</CAlert>
3312
<myContext.Consumer>
3413
{(context) => (
3514
<CHeader className="mb-5" position="sticky">

‎packages/docs/src/components/ScssDocs.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React, { FC } from 'react'
2+
import Highlight, { defaultProps } from 'prism-react-renderer'
3+
4+
const ScssDocs: FC = ({ file, capture }: { file?: string; capture?: string }) => {
5+
const _file = file
6+
const captureStart = `scss-docs-start ${capture}`
7+
const captureEnd = `scss-docs-end ${capture}`
8+
const re = new RegExp(`${captureStart}((?:.|\n)*)${captureEnd}`)
9+
const code = re.exec(_file)
10+
11+
return (
12+
<Highlight {...defaultProps} code={code[1]} language="scss">
13+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
14+
<pre className={className} style={style}>
15+
{tokens.map((line, i) => (
16+
<div {...getLineProps({ line, key: i })}>
17+
{line.map((token, key) => (
18+
<span {...getTokenProps({ token, key })} />
19+
))}
20+
</div>
21+
))}
22+
</pre>
23+
)}
24+
</Highlight>
25+
)
26+
}
27+
28+
ScssDocs.displayName = 'ScssDocs'
29+
30+
export default ScssDocs

‎packages/docs/src/components/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import CodeBlock from './CodeBlock'
33
import Example from './Example'
44
import Footer from './Footer'
55
import Header from './Header'
6+
import ScssDocs from './ScssDocs'
67
import Seo from './Seo'
78
import Sidebar from './Sidebar'
89
import { SidebarNav } from './SidebarNav'
910
import Toc from './Toc'
1011

11-
export { Ads, CodeBlock, Example, Footer, Header, Seo, Sidebar, SidebarNav, Toc }
12+
export { Ads, CodeBlock, Example, Footer, Header, ScssDocs, Seo, Sidebar, SidebarNav, Toc }

‎packages/docs/src/nav.tsx

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -228,14 +228,14 @@ const nav = [
228228
name: 'Modal',
229229
to: '/components/modal/',
230230
},
231-
{
232-
name: 'Navs & Tabs',
233-
to: '/components/navs-tabs/',
234-
},
235231
{
236232
name: 'Navbar',
237233
to: '/components/navbar/',
238234
},
235+
{
236+
name: 'Navs & Tabs',
237+
to: '/components/navs-tabs/',
238+
},
239239
{
240240
name: 'Offcanvas',
241241
to: '/components/offcanvas/',
@@ -303,6 +303,25 @@ const nav = [
303303
},
304304
],
305305
},
306+
{
307+
name: 'Templates',
308+
to: '/templates/',
309+
icon: (
310+
<CIcon
311+
customClassName="nav-icon text-primary"
312+
icon={[
313+
'512 512',
314+
'<path fill="var(--ci-primary-color, currentColor)" d="M472,232H424V120a24.028,24.028,0,0,0-24-24H40a24.028,24.028,0,0,0-24,24V366a24.028,24.028,0,0,0,24,24H212v50H152v32H304V440H244V390h92v58a24.027,24.027,0,0,0,24,24H472a24.027,24.027,0,0,0,24-24V256A24.027,24.027,0,0,0,472,232ZM336,256V358H48V128H392V232H360A24.027,24.027,0,0,0,336,256ZM464,440H368V264h96Z" class="ci-primary"/>',
315+
]}
316+
width={64}
317+
height={64}
318+
/>
319+
),
320+
badge: {
321+
color: 'success',
322+
text: 'New',
323+
},
324+
},
306325
]
307326

308327
export default nav

‎packages/docs/src/styles/_ads.scss

Lines changed: 25 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,32 @@
1-
2-
#carbonads * {
3-
margin: initial;
4-
padding: initial;
5-
}
61
#carbonads {
7-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
8-
'Helvetica Neue', Helvetica, Arial, sans-serif;
9-
}
10-
#carbonads {
11-
display: flex;
12-
max-width: 330px;
13-
background-color: hsl(0, 0%, 98%);
14-
box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
15-
z-index: 100;
16-
}
17-
#carbonads a {
18-
color: inherit;
19-
text-decoration: none;
20-
}
21-
#carbonads a:hover {
22-
color: inherit;
23-
}
24-
#carbonads span {
25-
position: relative;
2+
position: static;
263
display: block;
4+
max-width: 400px;
5+
padding: 15px 15px 15px 160px;
6+
margin: 2rem 0;
277
overflow: hidden;
28-
}
29-
#carbonads .carbon-wrap {
30-
display: flex;
31-
}
32-
#carbonads .carbon-img {
33-
display: block;
34-
margin: 0;
35-
line-height: 1;
36-
}
37-
#carbonads .carbon-img img {
38-
display: block;
39-
}
40-
#carbonads .carbon-text {
41-
font-size: 13px;
42-
padding: 10px;
43-
margin-bottom: 16px;
44-
line-height: 1.5;
8+
@include font-size(.8125rem);
9+
line-height: 1.4;
4510
text-align: left;
11+
background-color: $gray-100;
12+
13+
a {
14+
color: $gray-800;
15+
text-decoration: none;
16+
}
17+
18+
@include media-breakpoint-up(sm) {
19+
@include border-radius(.5rem);
20+
}
21+
}
22+
23+
.carbon-img {
24+
float: left;
25+
margin-left: -145px;
4626
}
47-
#carbonads .carbon-poweredby {
27+
28+
.carbon-poweredby {
4829
display: block;
49-
padding: 6px 8px;
50-
background: #f1f1f2;
51-
text-align: center;
52-
text-transform: uppercase;
53-
letter-spacing: 0.5px;
54-
font-weight: 600;
55-
font-size: 8px;
56-
line-height: 1;
57-
border-top-left-radius: 3px;
58-
position: absolute;
59-
bottom: 0;
60-
right: 0;
30+
margin-top: .75rem;
31+
color: $gray-700 !important;
6132
}

‎packages/docs/src/styles/_prism.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,11 @@ pre[class*='language-'] {
3333
pre[class*='language-'] {
3434
padding: 1em;
3535
margin: 0.5em 0;
36-
overflow: auto;
36+
}
37+
38+
pre[class*='language-']:not(.language-sass) {
39+
overflow: scroll;
40+
max-height: 500px;
3741
}
3842

3943
:not(pre) > code[class*='language-'],

0 commit comments

Comments
 (0)