Skip to content

Commit 501bbc4

Browse files
mrholekmrholek
committed
docs: update theme
1 parent a88ef96 commit 501bbc4

File tree

17 files changed

+381
-122
lines changed

17 files changed

+381
-122
lines changed

‎packages/docs/gatsby-config.js

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,14 @@ module.exports = {
4444
{
4545
resolve: `gatsby-plugin-mdx`,
4646
options: {
47-
defaultLayouts: {
48-
docs: require.resolve(`./src/templates/Docs.tsx`),
49-
},
5047
gatsbyRemarkPlugins: [
5148
{
52-
resolve: require.resolve(`./src/plugins/gatsby-remark-import-markdown`),
49+
resolve: `gatsby-remark-import-markdown`,
5350
options: {
5451
directory: `${__dirname}/content/api/`,
5552
},
5653
},
54+
`gatsby-remark-jsx-preview`,
5755
{
5856
resolve: `gatsby-remark-autolink-headers`,
5957
options: {
@@ -63,12 +61,12 @@ module.exports = {
6361
},
6462
},
6563
{
66-
resolve: "gatsby-remark-external-links",
64+
resolve: 'gatsby-remark-external-links',
6765
options: {
68-
target: "_blank",
69-
rel: "nofollow"
70-
}
71-
}
66+
target: '_blank',
67+
rel: 'nofollow',
68+
},
69+
},
7270
],
7371
},
7472
},

‎packages/docs/gatsby-node.js

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
3636
slug
3737
}
3838
tableOfContents(maxDepth: 10)
39+
internal {
40+
contentFilePath
41+
}
3942
}
4043
}
4144
}
@@ -46,18 +49,20 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
4649
}
4750
// Create blog post pages.
4851
const posts = result.data.allMdx.edges
52+
const docsTemplate = path.resolve(`./src/templates/Docs.tsx`)
4953
// you'll call `createPage` for each result
5054
posts.forEach(({ node }, index) => {
51-
createPage({
52-
// This is the slug you created before
53-
// (or `node.frontmatter.slug`)
54-
path: node.fields.slug,
55-
// This component will wrap our MDX content
56-
component: path.resolve(`./src/templates/Docs.tsx`),
57-
// You can use the values in this context in
58-
// our page layout component
59-
context: { id: node.id },
60-
})
55+
!node.internal.contentFilePath.includes('api') &&
56+
createPage({
57+
// This is the slug you created before
58+
// (or `node.frontmatter.slug`)
59+
path: node.fields.slug,
60+
// This component will wrap our MDX content
61+
component: `${docsTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
62+
// You can use the values in this context in
63+
// our page layout component
64+
context: { id: node.id },
65+
})
6166
})
6267
createRedirect({
6368
fromPath: `/`,

‎packages/docs/package.json

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"scripts": {
1717
"api": "rimraf \"content/api/*\" & node build/api.js",
1818
"build": "gatsby build",
19-
"develop": "gatsby develop",
19+
"develop": "NODE_OPTIONS=--max-old-space-size=8192 gatsby develop",
2020
"dist": "run-s api build",
2121
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
2222
"start": "gatsby develop",
@@ -26,26 +26,26 @@
2626
"dependencies": {
2727
"@coreui/chartjs": "^3.0.0",
2828
"@coreui/coreui": "^4.2.4",
29-
"@coreui/icons": "^2.1.0",
29+
"@coreui/icons": "^3.0.0-0",
3030
"@coreui/icons-react": "^2.0.0",
3131
"@coreui/react-chartjs": "^2.0.0",
32-
"@mdx-js/mdx": "^1.6.22",
33-
"@mdx-js/react": "^1.6.22",
32+
"@mdx-js/mdx": "^2.2.1",
33+
"@mdx-js/react": "^2.2.1",
3434
"@types/react-helmet": "^6.1.6",
35-
"gatsby": "^4.25.0",
36-
"gatsby-plugin-google-gtag": "^4.25.0",
37-
"gatsby-plugin-image": "^2.25.0",
38-
"gatsby-plugin-manifest": "^4.25.0",
39-
"gatsby-plugin-mdx": "^3.18.0",
40-
"gatsby-plugin-offline": "^5.25.0",
41-
"gatsby-plugin-react-helmet": "^5.25.0",
42-
"gatsby-plugin-sass": "^5.25.0",
43-
"gatsby-plugin-sharp": "^4.25.0",
44-
"gatsby-plugin-sitemap": "^5.25.0",
45-
"gatsby-remark-autolink-headers": "^5.25.0",
35+
"gatsby": "^5.4.2",
36+
"gatsby-plugin-google-gtag": "^5.4.0",
37+
"gatsby-plugin-image": "^3.4.0",
38+
"gatsby-plugin-manifest": "^5.4.0",
39+
"gatsby-plugin-mdx": "^5.4.0",
40+
"gatsby-plugin-offline": "^6.4.0",
41+
"gatsby-plugin-react-helmet": "^6.4.0",
42+
"gatsby-plugin-sass": "^6.4.0",
43+
"gatsby-plugin-sharp": "^5.4.0",
44+
"gatsby-plugin-sitemap": "^6.4.0",
45+
"gatsby-remark-autolink-headers": "^6.4.0",
4646
"gatsby-remark-external-links": "^0.0.4",
47-
"gatsby-source-filesystem": "^4.25.0",
48-
"gatsby-transformer-sharp": "^4.25.0",
47+
"gatsby-source-filesystem": "^5.4.0",
48+
"gatsby-transformer-sharp": "^5.4.0",
4949
"glob": "^7.2.0",
5050
"globby": "^11.0.4",
5151
"prism-react-renderer": "^1.3.5",
@@ -55,7 +55,6 @@
5555
"react-docgen-typescript": "^2.2.2",
5656
"react-dom": "^18.2.0",
5757
"react-helmet": "^6.1.0",
58-
"remark-html": "^13.0.2",
5958
"rimraf": "^3.0.2",
6059
"sass": "^1.57.0"
6160
},

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import React, { FC, useEffect, useRef } from 'react'
22

3-
const Ads: FC = ({ code, placement }: { code: string; placement: string }) => {
3+
interface AdsProps {
4+
code: string
5+
placement: string
6+
}
7+
8+
export const Ads: FC<AdsProps> = ({ code, placement }) => {
49
const ref = useRef<HTMLDivElement>(null)
510

611
useEffect(() => {

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { FC } from 'react'
2+
import { CLink } from '@coreui/react/src/index'
3+
4+
interface BannerProps {
5+
pro: boolean
6+
}
7+
8+
const Banner: FC<BannerProps> = ({ pro }) => {
9+
return pro ? (
10+
<div className="bg-danger bg-opacity-10 border-start border-start-5 border-start-danger p-4 pb-3 mb-5">
11+
<h3 className="mb-4">CoreUI PRO Component</h3>
12+
<p>
13+
To use this component you must have a CoreUI PRO license. Buy the{' '}
14+
<a href="https://coreui.io/pricing/?framework=react&docs=coreui-banner-pro">CoreUI PRO</a>{' '}
15+
and get access to all PRO components, features, templates, and dedicated support.
16+
</p>
17+
</div>
18+
) : (
19+
<div className="bg-info bg-opacity-10 border-start border-start-5 border-start-info p-4 pb-3 mb-5">
20+
<h3 className="mb-4">Support CoreUI Development</h3>
21+
<p>
22+
CoreUI is an MIT-licensed open source project and is completely free to use. However, the
23+
amount of effort needed to maintain and develop new features for the project is not
24+
sustainable without proper financial backing.
25+
</p>
26+
<p>You can support our Open Source software development in the following ways:</p>
27+
<ul>
28+
<li>
29+
Buy the{' '}
30+
<CLink href="https://coreui.io/pricing/?framework=react&docs=coreui-banner-free">
31+
CoreUI PRO
32+
</CLink>
33+
, and get access to PRO components, and dedicated support.
34+
</li>
35+
<li>
36+
<CLink href="https://opencollective.com/coreui" target="_blank">
37+
Became a sponsor
38+
</CLink>
39+
, and get your logo on BACKERS.md/README.md files or each site of this documentation
40+
</li>
41+
<li>
42+
Give us a star ⭐️ on{' '}
43+
<CLink href="https://github.com/coreui/coreui-react" target="_blank">
44+
Github
45+
</CLink>
46+
.
47+
</li>
48+
</ul>
49+
</div>
50+
)
51+
}
52+
53+
Banner.displayName = 'Banner'
54+
55+
export default Banner

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@ import React, { FC } from 'react'
22
import PropTypes from 'prop-types'
33
import Highlight, { defaultProps } from 'prism-react-renderer'
44

5-
const CodeBlock: FC = ({ children }) => {
6-
const _children = children.props.children
5+
interface CodeBlockProps {
6+
children: any
7+
}
8+
9+
const CodeBlock: FC<CodeBlockProps> = ({ children }) => {
10+
const _children = children && children.props.children
711
const language = children.props.className
812
? children.props.className.replace(/language-/, '')
913
: 'jsx'

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React, { FC } from 'react'
2-
import PropTypes from 'prop-types'
3-
1+
import React, { FC, ReactNode } from 'react'
42
interface ExampleProps {
3+
children: ReactNode
54
className: string
65
}
76

@@ -18,10 +17,6 @@ const Example: FC<ExampleProps> = ({ children, className, ...rest }) => {
1817
)
1918
}
2019

21-
Example.propTypes = {
22-
className: PropTypes.string,
23-
}
24-
2520
Example.displayName = 'Example'
2621

2722
export default Example

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,19 @@ import { Helmet } from 'react-helmet'
44
import { useLocation } from '@reach/router'
55
import { useStaticQuery, graphql } from 'gatsby'
66

7-
const SEO = ({ title, description, name, image, article }) => {
7+
const SEO = ({
8+
title,
9+
description,
10+
name,
11+
image,
12+
article,
13+
}: {
14+
title: string
15+
description: string
16+
name: string
17+
image: string
18+
article: string
19+
}) => {
820
const { pathname } = useLocation()
921
const { site } = useStaticQuery(query)
1022

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

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
import React, { FC } from 'react'
2-
import PropTypes from 'prop-types'
32
import { CNav } from '@coreui/react/src/index'
43

5-
const Toc: FC = (props) => {
6-
const { items } = props
4+
type TocItem = {
5+
url: string
6+
title: string
7+
items: TocItem[]
8+
}
9+
10+
interface TocProps {
11+
items: TocItem[]
12+
}
713

8-
const toc = (items) => {
14+
const Toc: FC<TocProps> = ({ items }) => {
15+
console.log(items)
16+
const toc = (items: TocItem[]) => {
917
return (
1018
items &&
1119
items.map((item, index) => {
@@ -30,14 +38,10 @@ const Toc: FC = (props) => {
3038
<div className="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-muted">
3139
<strong className="d-block h6 mb-2 pb-2 border-bottom">On this page</strong>
3240
<CNav component="nav" className="flex-column">
33-
<ul>{toc(items.items)}</ul>
41+
<ul>{toc(items)}</ul>
3442
</CNav>
3543
</div>
3644
)
3745
}
3846

39-
Toc.propTypes = {
40-
item: PropTypes.node,
41-
}
42-
4347
export default Toc

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Ads from './Ads'
2+
import Banner from './Banner'
23
import CodeBlock from './CodeBlock'
34
import Example from './Example'
45
import Footer from './Footer'
@@ -9,4 +10,4 @@ import Sidebar from './Sidebar'
910
import { SidebarNav } from './SidebarNav'
1011
import Toc from './Toc'
1112

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

‎packages/docs/src/templates/other_frameworks.json renamed to ‎packages/docs/src/data/other_frameworks.json

File renamed without changes.

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,17 @@
135135
margin-left: .5rem;
136136
}
137137

138+
// Badges
139+
> .btn + .btn {
140+
margin-left: .25rem;
141+
}
142+
> br + .btn {
143+
margin-top: .25rem;
144+
}
145+
> .badge + .badge {
146+
margin-left: .25rem;
147+
}
148+
138149
// Buttons
139150
> .btn,
140151
> .btn-group {

0 commit comments

Comments
 (0)