Skip to content

Commit 4617f9d

Browse files
mrholekmrholek
committed
docs: improve layout, add tabs support to mdx files
1 parent 8dc9853 commit 4617f9d

13 files changed

+498
-90
lines changed

‎packages/docs/gatsby-browser.js renamed to ‎packages/docs/gatsby-browser.tsx

File renamed without changes.

‎packages/docs/gatsby-config.js renamed to ‎packages/docs/gatsby-config.mjs

+12-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
module.exports = {
1+
import remarkGfm from 'remark-gfm'
2+
import remarkCodeTabs from 'remark-code-tabs'
3+
4+
import { dirname } from 'node:path'
5+
import { fileURLToPath } from 'node:url'
6+
7+
const __dirname = dirname(fileURLToPath(import.meta.url))
8+
9+
const config = {
210
siteMetadata: {
311
title: `CoreUI for React.js`,
412
titleTemplate: `%s · React UI Components · CoreUI `,
@@ -52,10 +60,7 @@ module.exports = {
5260
resolve: `gatsby-plugin-mdx`,
5361
options: {
5462
mdxOptions: {
55-
remarkPlugins: [
56-
// Add GitHub Flavored Markdown (GFM) support
57-
require(`remark-gfm`),
58-
],
63+
remarkPlugins: [remarkGfm, remarkCodeTabs],
5964
},
6065
gatsbyRemarkPlugins: [
6166
{
@@ -99,3 +104,5 @@ module.exports = {
99104
},
100105
],
101106
}
107+
108+
export default config

‎packages/docs/gatsby-node.js renamed to ‎packages/docs/gatsby-node.mjs

+14-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
const path = require('node:path')
2-
const { createFilePath } = require('gatsby-source-filesystem')
1+
import { resolve } from 'node:path'
2+
import { createFilePath } from 'gatsby-source-filesystem'
33

4-
exports.onCreateNode = async ({ node, loadNodeContent, actions: { createNodeField }, getNode }) => {
4+
export const onCreateNode = async ({
5+
node,
6+
loadNodeContent,
7+
actions: { createNodeField },
8+
getNode,
9+
}) => {
510
if (node.internal.type === 'Mdx') {
611
const slug = createFilePath({ node, getNode })
712

@@ -22,7 +27,11 @@ exports.onCreateNode = async ({ node, loadNodeContent, actions: { createNodeFiel
2227
}
2328
}
2429

25-
exports.createPages = async ({ graphql, actions: { createPage, createRedirect }, reporter }) => {
30+
export const createPages = async ({
31+
graphql,
32+
actions: { createPage, createRedirect },
33+
reporter,
34+
}) => {
2635
const result = await graphql(`
2736
query {
2837
allMdx {
@@ -50,7 +59,7 @@ exports.createPages = async ({ graphql, actions: { createPage, createRedirect },
5059
posts.forEach((node) => {
5160
createPage({
5261
path: node.fields.slug,
53-
component: `${path.resolve(`./src/templates/MdxLayout.tsx`)}?__contentFilePath=${
62+
component: `${resolve(`./src/templates/MdxLayout.tsx`)}?__contentFilePath=${
5463
node.internal.contentFilePath
5564
}`,
5665
context: { id: node.id },

‎packages/docs/gatsby-ssr.js renamed to ‎packages/docs/gatsby-ssr.tsx

File renamed without changes.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const ScssDocs = ({ file, capture }: ScssDocsProps) => {
4343

4444
return (
4545
code && (
46-
<div className="highlight">
46+
<div className="highlight mb-3">
4747
<Highlight
4848
code={code
4949
.replaceAll('--#{$prefix}', '--cui-')

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

+46-22
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { FC } from 'react'
2-
import { CNav } from '@coreui/react/src/index'
1+
import React, { FC, useState } from 'react'
2+
import { CCollapse, CNav } from '@coreui/react/src/index'
33

44
type TocItem = {
55
url: string
@@ -11,34 +11,58 @@ interface TocProps {
1111
items: TocItem[]
1212
}
1313

14-
const Toc: FC<TocProps> = ({ items }) => {
15-
const toc = (items: TocItem[]) => {
16-
return (
17-
items &&
18-
items.map((item, index) => {
19-
if (Array.isArray(item.items)) {
20-
return (
21-
<li key={index}>
22-
<a href={item.url}>{item.title}</a>
23-
<ul>{toc(item.items)}</ul>
24-
</li>
25-
)
26-
}
14+
const toc = (items: TocItem[]) => {
15+
return (
16+
items &&
17+
items.map((item, index) => {
18+
if (Array.isArray(item.items)) {
2719
return (
2820
<li key={index}>
2921
<a href={item.url}>{item.title}</a>
22+
<ul>{toc(item.items)}</ul>
3023
</li>
3124
)
32-
})
33-
)
34-
}
25+
}
26+
return (
27+
<li key={index}>
28+
<a href={item.url}>{item.title}</a>
29+
</li>
30+
)
31+
})
32+
)
33+
}
3534

35+
const Toc: FC<TocProps> = ({ items }) => {
36+
const [visible, setVisible] = useState(false)
3637
return (
3738
<div className="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
38-
<strong className="d-block h6 mb-2 pb-2 border-bottom">On this page</strong>
39-
<CNav as="nav" className="flex-column">
40-
<ul>{toc(items)}</ul>
41-
</CNav>
39+
<button
40+
className="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none docs-toc-toggle d-md-none"
41+
type="button"
42+
aria-expanded={visible ? true : false}
43+
aria-controls="tocContents"
44+
onClick={() => setVisible(!visible)}
45+
>
46+
On this page
47+
<svg
48+
xmlns="http://www.w3.org/2000/svg"
49+
className="icon d-md-none ms-2"
50+
aria-hidden="true"
51+
viewBox="0 0 512 512"
52+
>
53+
<polygon
54+
fill="var(--ci-primary-color, currentColor)"
55+
points="256 382.627 60.687 187.313 83.313 164.687 256 337.372 428.687 164.687 451.313 187.313 256 382.627"
56+
className="ci-primary"
57+
/>
58+
</svg>
59+
</button>
60+
<strong className="d-none d-md-block h6 mb-2 pb-2 border-bottom">On this page</strong>
61+
<CCollapse className="docs-toc-collapse" id="tocContents" visible={visible}>
62+
<CNav as="nav">
63+
<ul>{toc(items)}</ul>
64+
</CNav>
65+
</CCollapse>
4266
</div>
4367
)
4468
}

‎packages/docs/src/styles/_component-examples.scss

+12-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22
// Docs examples
33
//
44

5+
.tab-content .tab-pane {
6+
@include border-top-radius(0);
7+
8+
.highlight {
9+
@include border-top-radius(0);
10+
}
11+
}
12+
513
.docs-example-snippet {
614
border: solid var(--cui-border-color);
715
border-width: 1px 0;
@@ -373,19 +381,20 @@
373381
.highlight {
374382
position: relative;
375383
padding: .75rem ($cd-gutter-x * .5);
376-
margin-bottom: 1rem;
384+
margin: 0 ($cd-gutter-x * -.5) 1rem ($cd-gutter-x * -.5) ;
377385
border: 1px solid var(--cui-border-color);
378386
background-color: var(--cd-pre-bg);
379387

380388
@include media-breakpoint-up(md) {
381389
padding: .75rem 1.25rem;
390+
margin-right: 0;
391+
margin-left: 0;
382392
@include border-radius(var(--cui-border-radius));
383393
}
384394

385395
pre {
386396
padding: .25rem 0 .875rem;
387397
margin-top: .8125rem;
388-
margin-right: 1.875rem;
389398
margin-bottom: 0;
390399
overflow: overlay;
391400
white-space: pre;
@@ -404,7 +413,7 @@
404413
margin: 0 ($cd-gutter-x * -.5) $spacer;
405414

406415
.highlight {
407-
margin-bottom: 0;
416+
margin: 0;
408417
}
409418

410419
.docs-example ~ .highlight {

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

+48
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,52 @@
33
@include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
44
will-change: auto;
55
@include transition(padding .15s);
6+
7+
> .container-lg {
8+
--cui-gutter-x: 3rem;
9+
}
10+
}
11+
12+
.docs-sidebar {
13+
grid-area: sidebar;
14+
}
15+
16+
.docs-main {
17+
grid-area: main;
18+
19+
@include media-breakpoint-down(lg) {
20+
max-width: 760px;
21+
margin-inline: auto;
22+
}
23+
24+
@include media-breakpoint-up(md) {
25+
display: grid;
26+
grid-template-areas:
27+
"intro"
28+
"toc"
29+
"content";
30+
grid-template-rows: auto auto 1fr;
31+
gap: $grid-gutter-width;
32+
}
33+
34+
@include media-breakpoint-up(lg) {
35+
grid-template-areas:
36+
"intro toc"
37+
"content toc";
38+
grid-template-rows: auto 1fr;
39+
grid-template-columns: 4fr 1fr;
40+
}
41+
}
42+
43+
.docs-intro {
44+
grid-area: intro;
45+
}
46+
47+
.docs-toc {
48+
grid-area: toc;
49+
}
50+
51+
.docs-content {
52+
grid-area: content;
53+
min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
654
}

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

+46-1
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,49 @@
3939
}
4040
}
4141
}
42-
}
42+
}
43+
44+
.docs-toc-toggle {
45+
display: flex;
46+
align-items: center;
47+
48+
@include media-breakpoint-down(sm) {
49+
justify-content: space-between;
50+
width: 100%;
51+
}
52+
53+
@include media-breakpoint-down(md) {
54+
color: var(--cui-body-color);
55+
border: 1px solid var(--cui-border-color);
56+
@include border-radius(var(--cui-border-radius));
57+
58+
&:hover,
59+
&:focus,
60+
&:active,
61+
&[aria-expanded="true"] {
62+
color: var(--cui-primary);
63+
background-color: var(--cui-body-bg);
64+
border-color: var(--cui-primary);
65+
}
66+
67+
&:focus,
68+
&[aria-expanded="true"] {
69+
box-shadow: 0 0 0 3px rgba(var(--cui-primary-rgb), .25);
70+
}
71+
}
72+
}
73+
74+
.docs-toc-collapse {
75+
@include media-breakpoint-down(md) {
76+
nav {
77+
padding: 1.25rem 1.25rem 1.25rem 1rem;
78+
background-color: var(--cui-tertiary-bg);
79+
border: 1px solid var(--cui-border-color);
80+
@include border-radius(var(--cui-border-radius));
81+
}
82+
}
83+
84+
@include media-breakpoint-up(md) {
85+
display: block !important; // stylelint-disable-line declaration-no-important
86+
}
87+
}

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

+8-10
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,15 @@ const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, pageContext, pa
2929
>
3030
<Seo title={title} description={description} name={name} />
3131
<Sidebar />
32-
<div className="wrapper d-flex flex-column min-vh-100">
32+
<div className="wrapper flex-grow-1">
3333
<Header />
34-
<div className="body flex-grow-1 px-3">
35-
{path === '/404/' ? (
36-
<CContainer lg>{children}</CContainer>
37-
) : (
38-
<DocsLayout data={data} pageContext={pageContext}>
39-
{children}
40-
</DocsLayout>
41-
)}
42-
</div>
34+
{path === '/404/' ? (
35+
<CContainer lg>{children}</CContainer>
36+
) : (
37+
<DocsLayout data={data} pageContext={pageContext}>
38+
{children}
39+
</DocsLayout>
40+
)}
4341
<Footer />
4442
</div>
4543
<Script

0 commit comments

Comments
 (0)