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 2196479

Browse filesBrowse files
mrholekmrholek
committed
docs: improve layout
1 parent aa3304e commit 2196479
Copy full SHA for 2196479

File tree

4 files changed

+50
-42
lines changed
Filter options

4 files changed

+50
-42
lines changed

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

Copy file name to clipboardExpand all lines: packages/docs/src/components/Header.tsx
+19-7Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { FC } from 'react'
2+
import { DocSearch } from '@docsearch/react'
23

34
import CIcon from '@coreui/icons-react'
45
import {
@@ -36,13 +37,19 @@ const Header: FC = () => {
3637
<CHeader className="mb-5" position="sticky">
3738
<CHeaderToggler
3839
className="ms-md-3"
39-
onClick={() => {
40+
aria-label="Close"
41+
onClick={() =>
4042
context.setSidebarVisible && context.setSidebarVisible(!context.sidebarVisible)
41-
}}
43+
}
4244
>
4345
<CIcon icon={cilMenu} size="lg" />
4446
</CHeaderToggler>
45-
<div className="docs-search" id="docsearch"></div>
47+
<DocSearch
48+
appId="JIOZIZPLMM"
49+
indexName="coreui-react"
50+
apiKey="6e3f7692d2589d042bb40426b75df1b7"
51+
/>
52+
{/* <div className="docs-search" id="docsearch"></div> */}
4653
<CHeaderNav className="ms-auto">
4754
<CNavItem
4855
href="https://github.com/coreui/coreui-react/"
@@ -63,15 +70,20 @@ const Header: FC = () => {
6370
<div className="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"></div>
6471
<hr className="d-lg-none my-2 text-white-50" />
6572
</li>
66-
<CDropdown variant="nav-item" placement="bottom-end">
67-
<CDropdownToggle className="nav-link" color="link" caret={false}>
73+
<CDropdown placement="bottom-end">
74+
<CDropdownToggle
75+
className="nav-link"
76+
color="link"
77+
caret={false}
78+
aria-label="Light/Dark mode switch"
79+
>
6880
{colorMode === 'dark' ? (
6981
<CIcon icon={cilMoon} size="xl" />
70-
) : (colorMode === 'auto' ? (
82+
) : colorMode === 'auto' ? (
7183
<CIcon icon={cilContrast} size="xl" />
7284
) : (
7385
<CIcon icon={cilSun} size="xl" />
74-
))}
86+
)}
7587
</CDropdownToggle>
7688
<CDropdownMenu>
7789
<CDropdownItem

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

Copy file name to clipboardExpand all lines: packages/docs/src/components/Seo.tsx
+5-3Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react'
2-
import { Helmet } from 'react-helmet'
32
import { useLocation } from '@reach/router'
43
import { useStaticQuery, graphql } from 'gatsby'
54

@@ -34,8 +33,11 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
3433
url: `${siteUrl}${pathname.replace(`${prefix}/`, '')}`,
3534
}
3635

36+
const formattedTitle = title ? titleTemplate.replace('%s', title) : 'My Gatsby Site'
37+
3738
return (
38-
<Helmet title={seo.title} titleTemplate={titleTemplate}>
39+
<>
40+
<title>{formattedTitle}</title>
3941
<meta name="description" content={seo.description} />
4042
<meta name="image" content={seo.image} />
4143

@@ -78,7 +80,7 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
7880
}`}
7981
</script>
8082
)}
81-
</Helmet>
83+
</>
8284
)
8385
}
8486

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

Copy file name to clipboardExpand all lines: packages/docs/src/templates/DefaultLayout.tsx
+1-31Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React, { FC, useState } from 'react'
2-
import { Footer, Header, Sidebar, Seo } from '../components'
2+
import { Footer, Header, Sidebar } from '../components'
33
import { CContainer } from '@coreui/react/src/'
44
import DocsLayout from './DocsLayout'
55

66
import { AppContext } from '../AppContext'
7-
import { Script } from 'gatsby'
87

98
interface DefaultLayoutProps {
109
children: any // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -16,19 +15,13 @@ interface DefaultLayoutProps {
1615

1716
const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, location, pageContext, path }) => {
1817
const [sidebarVisible, setSidebarVisible] = useState()
19-
20-
const title = pageContext.frontmatter ? pageContext.frontmatter.title : ''
21-
const description = pageContext.frontmatter ? pageContext.frontmatter.description : ''
22-
const name = pageContext.frontmatter ? pageContext.frontmatter.name : ''
23-
2418
return (
2519
<AppContext.Provider
2620
value={{
2721
sidebarVisible,
2822
setSidebarVisible,
2923
}}
3024
>
31-
<Seo title={title} description={description} name={name} />
3225
<Sidebar />
3326
<div className="wrapper flex-grow-1">
3427
<Header />
@@ -41,29 +34,6 @@ const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, location, pageC
4134
)}
4235
<Footer />
4336
</div>
44-
<Script
45-
src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"
46-
onLoad={() => {
47-
const searchElement = document.getElementById('docsearch')
48-
49-
// @ts-expect-error global variable
50-
if (!globalThis.docsearch || !searchElement) {
51-
return
52-
}
53-
54-
// @ts-expect-error global variable
55-
globalThis.docsearch({
56-
appId: 'JIOZIZPLMM',
57-
apiKey: '6e3f7692d2589d042bb40426b75df1b7',
58-
indexName: 'coreui-react',
59-
container: searchElement,
60-
// Set debug to `true` if you want to inspect the dropdown
61-
debug: true,
62-
})
63-
}}
64-
/>
65-
66-
<script type="text/javascript"></script>
6737
</AppContext.Provider>
6838
)
6939
}

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

Copy file name to clipboardExpand all lines: packages/docs/src/templates/MdxLayout.tsx
+25-1Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import {
66
CodeBlock,
77
ClassNamesDocs,
88
Example,
9-
JSXDocs,
109
ExampleSnippet,
10+
JSXDocs,
1111
ScssDocs,
12+
Seo,
1213
} from '../components'
1314

1415
import { CalloutProps } from '../components/Callout'
@@ -34,6 +35,14 @@ interface DataProps {
3435
}
3536
}
3637

38+
interface PageContextType {
39+
frontmatter: {
40+
title: string
41+
description: string
42+
name: string
43+
}
44+
}
45+
3746
interface Toc {
3847
items: TocItem[]
3948
}
@@ -85,6 +94,21 @@ MdxLayout.displayName = 'MdxLayout'
8594

8695
export default MdxLayout
8796

97+
export const Head = ({ pageContext }: { pageContext: PageContextType }) => {
98+
const { frontmatter } = pageContext
99+
100+
const title = frontmatter?.title || ''
101+
const description = frontmatter?.description || ''
102+
const name = frontmatter?.name || ''
103+
104+
return (
105+
<>
106+
<html lang="en" />
107+
<Seo title={title} description={description} name={name} />
108+
</>
109+
)
110+
}
111+
88112
export const pageQuery = graphql`
89113
query PageQuery($id: String, $regex: String) {
90114
mdx(id: { eq: $id }) {

0 commit comments

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