Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 7ad6008

Browse filesBrowse files
mrholekmrholek
committed
docs: update layout
1 parent 720b173 commit 7ad6008
Copy full SHA for 7ad6008

File tree

Expand file treeCollapse file tree

7 files changed

+125
-135
lines changed
Filter options
Expand file treeCollapse file tree

7 files changed

+125
-135
lines changed

‎packages/docs/gatsby-browser.tsx

Copy file name to clipboard
+8-3Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
import React from 'react'
1+
import React, { ReactNode } from 'react'
22
import '@docsearch/css'
33
import DefaultLayout from './src/templates/DefaultLayout'
4+
import DocsLayout from './src/templates/DocsLayout'
45
import './src/styles/styles.scss'
56

6-
export const wrapPageElement = ({ element, props }) => {
7-
return <DefaultLayout {...props}>{element}</DefaultLayout>
7+
export const wrapRootElement = ({ element }: { element: ReactNode }) => {
8+
return <DefaultLayout>{element}</DefaultLayout>
9+
}
10+
11+
export const wrapPageElement = ({ element, props }: { element: ReactNode; props: any }) => {
12+
return <DocsLayout {...props}>{element}</DocsLayout>
813
}

‎packages/docs/gatsby-ssr.tsx

Copy file name to clipboard
+8-3Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
import React from 'react'
1+
import React, { ReactNode } from 'react'
22
import '@docsearch/css'
33
import DefaultLayout from './src/templates/DefaultLayout'
4+
import DocsLayout from './src/templates/DocsLayout'
45
import './src/styles/styles.scss'
56

6-
export const wrapPageElement = ({ element, props }) => {
7-
return <DefaultLayout {...props}>{element}</DefaultLayout>
7+
export const wrapRootElement = ({ element }: { element: ReactNode }) => {
8+
return <DefaultLayout>{element}</DefaultLayout>
9+
}
10+
11+
export const wrapPageElement = ({ element, props }: { element: ReactNode; props: any }) => {
12+
return <DocsLayout {...props}>{element}</DocsLayout>
813
}

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

Copy file name to clipboardExpand all lines: packages/docs/src/components/Seo.tsx
-11Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -40,27 +40,16 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
4040
<title>{formattedTitle}</title>
4141
<meta name="description" content={seo.description} />
4242
<meta name="image" content={seo.image} />
43-
4443
{seo.url && <meta property="og:url" content={seo.url.replace('docs//', 'docs/')} />}
45-
4644
{(article ? true : null) && <meta property="og:type" content="article" />}
47-
4845
{seo.title && <meta property="og:title" content={seo.title} />}
49-
5046
{seo.description && <meta property="og:description" content={seo.description} />}
51-
5247
{seo.image && <meta property="og:image" content={seo.image} />}
53-
5448
<meta name="twitter:card" content="summary_large_image" />
55-
5649
{twitterUsername && <meta name="twitter:creator" content={twitterUsername} />}
57-
5850
{seo.title && <meta name="twitter:title" content={seo.title} />}
59-
6051
{seo.description && <meta name="twitter:description" content={seo.description} />}
61-
6252
{seo.image && <meta name="twitter:image" content={seo.image} />}
63-
6453
{seo.name && (
6554
<script type="application/ld+json">
6655
{`{

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

Copy file name to clipboardExpand all lines: packages/docs/src/components/Sidebar.tsx
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ const Sidebar: FC = () => {
2323
position="fixed"
2424
size="lg"
2525
visible={context.sidebarVisible}
26-
onVisibleChange={(value: boolean) => {
26+
onVisibleChange={(value: boolean) =>
2727
context.setSidebarVisible && context.setSidebarVisible(value)
28-
}}
28+
}
2929
>
3030
<CSidebarBrand className="justify-content-start ps-3">
3131
<svg

‎packages/docs/src/templates/DefaultLayout.tsx

Copy file name to clipboardExpand all lines: packages/docs/src/templates/DefaultLayout.tsx
+4-23Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,11 @@
1-
import React, { FC, useState } from 'react'
2-
import { Footer, Header, Sidebar } from '../components'
3-
import { CContainer } from '@coreui/react/src/'
4-
import DocsLayout from './DocsLayout'
5-
1+
import React, { FC, ReactNode, useState } from 'react'
62
import { AppContext } from '../AppContext'
73

84
interface DefaultLayoutProps {
9-
children: any // eslint-disable-line @typescript-eslint/no-explicit-any
10-
data: any // eslint-disable-line @typescript-eslint/no-explicit-any
11-
location: any // eslint-disable-line @typescript-eslint/no-explicit-any
12-
pageContext: any // eslint-disable-line @typescript-eslint/no-explicit-any
13-
path: any // eslint-disable-line @typescript-eslint/no-explicit-any
5+
children: ReactNode
146
}
157

16-
const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, location, pageContext, path }) => {
8+
const DefaultLayout: FC<DefaultLayoutProps> = ({ children }) => {
179
const [sidebarVisible, setSidebarVisible] = useState()
1810
return (
1911
<AppContext.Provider
@@ -22,18 +14,7 @@ const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, location, pageC
2214
setSidebarVisible,
2315
}}
2416
>
25-
<Sidebar />
26-
<div className="wrapper flex-grow-1">
27-
<Header />
28-
{path === '/404/' ? (
29-
<CContainer lg>{children}</CContainer>
30-
) : (
31-
<DocsLayout data={data} location={location} pageContext={pageContext}>
32-
{children}
33-
</DocsLayout>
34-
)}
35-
<Footer />
36-
</div>
17+
{children}
3718
</AppContext.Provider>
3819
)
3920
}

‎packages/docs/src/templates/DocsLayout.tsx

Copy file name to clipboardExpand all lines: packages/docs/src/templates/DocsLayout.tsx
+65-53Lines changed: 65 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { FC, ReactNode, useMemo } from 'react'
2-
import { Ads, Banner, Seo, Toc } from '../components'
2+
import { Ads, Banner, Footer, Header, Sidebar, Toc } from '../components'
33
import { CContainer, CNav, CNavItem, CNavLink } from '@coreui/react'
44
// @ts-expect-error json file
55
import jsonData from './../data/other_frameworks.json'
@@ -11,6 +11,7 @@ interface DocsLayoutProps {
1111
data: DocsData
1212
location: Location
1313
pageContext: PageContext
14+
path: string
1415
}
1516

1617
interface DocsData {
@@ -144,7 +145,7 @@ const DocsNav: FC<{
144145
)
145146
}
146147

147-
const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext }) => {
148+
const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext, path }) => {
148149
const frontmatter = pageContext.frontmatter || {}
149150

150151
const {
@@ -164,58 +165,69 @@ const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext
164165

165166
return (
166167
<>
167-
<Seo title={title} description={description} name={name} />
168-
<CContainer lg className="my-md-4 flex-grow-1">
169-
<main className="docs-main order-1">
170-
{hasNav && (
171-
<DocsNav locationPathname={location.pathname} nodes={data?.allMdx?.edges as Item[]} />
172-
)}
173-
<div className="docs-intro ps-lg-4">
174-
{name && name !== title ? (
175-
<div className="d-flex flex-column">
176-
<h1 className="order-2 h5 mb-4 text-body-secondary" id="content">
177-
{title}
178-
</h1>
179-
<h2 className="docs-title order-1 h1">{name}</h2>
168+
<Sidebar />
169+
<div className="wrapper flex-grow-1">
170+
<Header />
171+
{path === '/404/' ? (
172+
<CContainer lg>{children}</CContainer>
173+
) : (
174+
<CContainer lg className="my-md-4 flex-grow-1">
175+
<main className="docs-main order-1">
176+
{hasNav && (
177+
<DocsNav
178+
locationPathname={location.pathname}
179+
nodes={data?.allMdx?.edges as Item[]}
180+
/>
181+
)}
182+
<div className="docs-intro ps-lg-4">
183+
{name && name !== title ? (
184+
<div className="d-flex flex-column">
185+
<h1 className="order-2 h5 mb-4 text-body-secondary" id="content">
186+
{title}
187+
</h1>
188+
<h2 className="docs-title order-1 h1">{name}</h2>
189+
</div>
190+
) : (
191+
<h1 className="docs-title" id="content">
192+
{title}
193+
</h1>
194+
)}
195+
<Banner pro={proComponent} />
196+
<p className="docs-lead">{description}</p>
197+
<Ads code="CEAICKJY" location={route} placement="coreuiio" />
198+
{frameworks.length > 0 && (
199+
<>
200+
<h2>Other Frameworks</h2>
201+
<p>
202+
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and
203+
Vue components. To learn more please visit the following pages.
204+
</p>
205+
<ul>
206+
{frameworks.map((item) => (
207+
<React.Fragment key={item}>
208+
{Object.entries(otherFrameworks[item] || {})
209+
.filter(([key]) => key !== 'react')
210+
.map(([framework, url]) => (
211+
<li key={framework}>
212+
<a href={url}>
213+
{framework.charAt(0).toUpperCase() + framework.slice(1)}{' '}
214+
{humanize(item)}
215+
</a>
216+
</li>
217+
))}
218+
</React.Fragment>
219+
))}
220+
</ul>
221+
</>
222+
)}
180223
</div>
181-
) : (
182-
<h1 className="docs-title" id="content">
183-
{title}
184-
</h1>
185-
)}
186-
<Banner pro={proComponent} />
187-
<p className="docs-lead">{description}</p>
188-
<Ads code="CEAICKJY" location={route} placement="coreuiio" />
189-
{frameworks.length > 0 && (
190-
<>
191-
<h2>Other Frameworks</h2>
192-
<p>
193-
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue
194-
components. To learn more please visit the following pages.
195-
</p>
196-
<ul>
197-
{frameworks.map((item) => (
198-
<React.Fragment key={item}>
199-
{Object.entries(otherFrameworks[item] || {})
200-
.filter(([key]) => key !== 'react')
201-
.map(([framework, url]) => (
202-
<li key={framework}>
203-
<a href={url}>
204-
{framework.charAt(0).toUpperCase() + framework.slice(1)}{' '}
205-
{humanize(item)}
206-
</a>
207-
</li>
208-
))}
209-
</React.Fragment>
210-
))}
211-
</ul>
212-
</>
213-
)}
214-
</div>
215-
{data?.mdx && <Toc items={data.mdx.tableOfContents.items} />}
216-
<div className="docs-content ps-lg-4">{children}</div>
217-
</main>
218-
</CContainer>
224+
{data?.mdx && <Toc items={data.mdx.tableOfContents.items} />}
225+
<div className="docs-content ps-lg-4">{children}</div>
226+
</main>
227+
</CContainer>
228+
)}
229+
<Footer />
230+
</div>
219231
</>
220232
)
221233
}

‎packages/docs/src/templates/MdxLayout.tsx

Copy file name to clipboardExpand all lines: packages/docs/src/templates/MdxLayout.tsx
+38-40Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FC } from 'react'
1+
import React, { FC, useMemo } from 'react'
22
import { graphql, PageProps } from 'gatsby'
33
import { MDXProvider } from '@mdx-js/react'
44
import {
@@ -48,46 +48,44 @@ interface Toc {
4848
}
4949

5050
const MdxLayout: FC<PageProps<DataProps>> = ({ children }) => {
51-
return (
52-
<MDXProvider
53-
components={{
54-
Callout: (props: CalloutProps) => {
55-
const { children, title, ...rest } = props
56-
return (
57-
<Callout {...rest}>
58-
{title && <h5>{title}</h5>}
59-
{children}
60-
</Callout>
61-
)
62-
},
63-
ClassNamesDocs: (props: { files: string | string[] }) => <ClassNamesDocs {...props} />,
64-
Example: (props: ExampleProps) => {
65-
const { children, ...rest } = props
66-
return (
67-
<Example {...rest}>
68-
{React.Children.map(children, (child) => {
69-
if (React.isValidElement(child)) {
70-
return React.cloneElement(child)
71-
}
72-
return
73-
})}
74-
</Example>
75-
)
76-
},
77-
ExampleSnippet: (props: ExampleSnippetProps) => <ExampleSnippet {...props} />,
78-
JSXDocs: (props: { code: string }) => <JSXDocs {...props} />,
79-
ScssDocs: (props: ScssDocsProps) => <ScssDocs {...props} />,
80-
pre: (props: CodeBlockProps) => <CodeBlock {...props} />,
81-
table: (props) => (
82-
<div className="table-responsive table-docs border rounded mb-3">
83-
<table className="table table-docs" {...props} />
84-
</div>
85-
),
86-
}}
87-
>
88-
{children}
89-
</MDXProvider>
51+
const components = useMemo(
52+
() => ({
53+
Callout: (props: CalloutProps) => {
54+
const { children, title, ...rest } = props
55+
return (
56+
<Callout {...rest}>
57+
{title && <h5>{title}</h5>}
58+
{children}
59+
</Callout>
60+
)
61+
},
62+
ClassNamesDocs: (props: { files: string | string[] }) => <ClassNamesDocs {...props} />,
63+
Example: (props: ExampleProps) => {
64+
const { children, ...rest } = props
65+
return (
66+
<Example {...rest}>
67+
{React.Children.map(children, (child) => {
68+
if (React.isValidElement(child)) {
69+
return React.cloneElement(child)
70+
}
71+
return
72+
})}
73+
</Example>
74+
)
75+
},
76+
ExampleSnippet: (props: ExampleSnippetProps) => <ExampleSnippet {...props} />,
77+
JSXDocs: (props: { code: string }) => <JSXDocs {...props} />,
78+
ScssDocs: (props: ScssDocsProps) => <ScssDocs {...props} />,
79+
pre: (props: CodeBlockProps) => <CodeBlock {...props} />,
80+
table: (props) => (
81+
<div className="table-responsive table-docs border rounded mb-3">
82+
<table className="table table-docs" {...props} />
83+
</div>
84+
),
85+
}),
86+
[],
9087
)
88+
return <MDXProvider components={components}>{children}</MDXProvider>
9189
}
9290

9391
MdxLayout.displayName = 'MdxLayout'

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.