Skip to content

Commit 815b90b

Browse files
estruyfestruyf
committed
Merge branch 'dev'
2 parents 322f861 + b927910 commit 815b90b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+4319
-3200
lines changed

‎additional.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module 'mdx-annotations'

‎components/Docs/CodeHighlighting.tsx

Lines changed: 83 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,80 @@
11
import * as React from 'react';
2-
import * as shiki from '@antfu/shiki';
2+
import * as shiki from 'shiki';
3+
import { Children, useMemo } from 'react';
4+
import { CopyButton } from './CopyButton';
35

46
export interface ICodeHighlightingProps {
57
className?: string;
68
}
79

8-
export const CodeHighlighting: React.FunctionComponent<ICodeHighlightingProps> = ({className, children}: React.PropsWithChildren<ICodeHighlightingProps>) => {
10+
export interface ICodeBlockProps {
11+
className?: string;
12+
annotation?: string;
13+
}
14+
15+
export const CodeBlock: React.FunctionComponent<ICodeBlockProps> = ({ className, children, annotation, ...props }: React.PropsWithChildren<ICodeBlockProps>) => {
16+
return (
17+
<>
18+
{
19+
children && Children.map(children, (child, childIndex) => (
20+
<CodePanel annotation={annotation} {...props}>{child}</CodePanel>
21+
))
22+
}
23+
</>
24+
)
25+
}
26+
27+
const CodePanel = ({ annotation, children, ...props }: React.PropsWithChildren<ICodeBlockProps>) => {
28+
const child = Children.only(children) as any;
29+
30+
const { title, description } = useMemo(() => {
31+
let data = { title: '', description: '' };
32+
33+
try {
34+
if (annotation) {
35+
data = JSON.parse(annotation);
36+
}
37+
} catch (e) {
38+
// ignore
39+
}
40+
41+
return {
42+
title: data.title,
43+
description: data.description
44+
};
45+
}, [annotation]);
46+
47+
const code = useMemo(() => {
48+
if (child?.props?.children) {
49+
return child.props.children.toString();
50+
}
51+
}, [child])
52+
53+
return (
54+
<div className='code__wrapper group'>
55+
{
56+
title && (
57+
<div className={`code__wrapper__title bg-vulcan-200 flex items-center justify-between px-4 py-2`}>
58+
<div className={`text-lg font-bold text-whisper-500`}>{title}</div>
59+
<div className={`text-sm text-whisper-50`}>{description}</div>
60+
</div>
61+
)
62+
}
63+
64+
<div className='relative'>
65+
<pre>
66+
{children}
67+
</pre>
68+
69+
{
70+
code && <CopyButton code={code} />
71+
}
72+
</div>
73+
</div>
74+
);
75+
}
76+
77+
export const CodeHighlighting: React.FunctionComponent<ICodeHighlightingProps> = ({ className, children, ...props }: React.PropsWithChildren<ICodeHighlightingProps>) => {
978
const [ code, setCode ] = React.useState('');
1079

1180
React.useEffect(() => {
@@ -18,7 +87,17 @@ export const CodeHighlighting: React.FunctionComponent<ICodeHighlightingProps> =
1887
langs: [language as any],
1988
theme: `the-unnamed`
2089
}).then((highlighter: shiki.Highlighter) => {
21-
setCode(highlighter.codeToHtml(children.toString(), getLanguage(className)));
90+
let code = children.toString();
91+
92+
if (code.endsWith(`\n`)) {
93+
code = code.slice(0, -1);
94+
}
95+
96+
setCode(
97+
highlighter.codeToHtml(code, {
98+
lang: getLanguage(className)
99+
})
100+
);
22101
}).then(() => {
23102
if (location.hash) {
24103
location.href = location.href;
@@ -43,7 +122,7 @@ export const CodeHighlighting: React.FunctionComponent<ICodeHighlightingProps> =
43122
return language;
44123
}
45124
}
46-
125+
47126
if (!className && children) {
48127
return <code>{children}</code>;
49128
}

‎components/Docs/CopyButton.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { ClipboardCopyIcon } from "@heroicons/react/outline"
2+
import { useEffect, useState } from "react"
3+
4+
export function CopyButton({ code }: any) {
5+
let [copyCount, setCopyCount] = useState(0)
6+
let copied = copyCount > 0
7+
8+
useEffect(() => {
9+
if (copyCount > 0) {
10+
let timeout = setTimeout(() => setCopyCount(0), 1000)
11+
return () => {
12+
clearTimeout(timeout)
13+
}
14+
}
15+
}, [copyCount])
16+
17+
return (
18+
<button
19+
type="button"
20+
className={`group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100 ${copied
21+
? 'bg-teal-400/80 ring-1 ring-inset ring-teal-200/20'
22+
: 'bg-vulcan-200 hover:bg-vulcan-100'}`}
23+
onClick={() => {
24+
window.navigator.clipboard.writeText(code).then(() => {
25+
setCopyCount((count) => count + 1)
26+
})
27+
}}
28+
>
29+
<span
30+
aria-hidden={copied}
31+
className={`pointer-events-none flex items-center gap-0.5 text-whisper-400 transition duration-300 ${copied && '-translate-y-1.5 opacity-0'}`}
32+
>
33+
<ClipboardCopyIcon className="h-5 w-5 fill-whisper-500/20 stroke-whisper-500 transition-colors group-hover/button:stroke-whisper-400" />
34+
Copy
35+
</span>
36+
<span
37+
aria-hidden={!copied}
38+
className={`pointer-events-none absolute inset-0 flex items-center justify-center text-whisper-400 transition duration-300 ${!copied && 'translate-y-1.5 opacity-0'}`}
39+
>
40+
Copied!
41+
</span>
42+
</button>
43+
)
44+
}

‎components/Docs/Markdown.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { useEffect } from 'react';
55
import ReactMarkdown from 'react-markdown';
66
import rehypeRaw from 'rehype-raw';
77
import remarkGfm from 'remark-gfm';
8-
import { CodeHighlighting } from './CodeHighlighting';
8+
import { CodeBlock, CodeHighlighting } from './CodeHighlighting';
9+
import { mdxAnnotations } from 'mdx-annotations';
910

1011
export interface IMarkdownProps {
1112
content: string | undefined;
@@ -55,19 +56,21 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({content}: Rea
5556
const vscodeUrl = props && (props as any)["data-vscode"] ? (props as any)["data-vscode"] : "";
5657
const title = getTitle(props);
5758
if (vscodeUrl) {
58-
return <Link key={vscodeUrl as string} href={vscodeUrl as string}><a title={title}>{title}</a></Link>;
59+
return <Link key={vscodeUrl as string} href={vscodeUrl as string} title={title}>{title}</Link>;
5960
}
60-
return <Link key={url as string} href={url as string}><a title={title}>{title}</a></Link>;
61+
return <Link key={url as string} href={url as string} title={title}>{title}</Link>;
6162
},
62-
h1: ({node, ...props}) => (<h1 id={generateId(props)} className={`header__offset group`}>{getTitle(props)}{generateLink(props)}</h1>),
63-
h2: ({node, ...props}) => (<h2 id={generateId(props)} className={`header__offset group`}>{getTitle(props)}{generateLink(props)}</h2>),
64-
h3: ({node, ...props}) => (<h3 id={generateId(props)} className={`header__offset group`}>{getTitle(props)}{generateLink(props)}</h3>),
65-
h4: ({node, ...props}) => (<h4 id={generateId(props)} className={`header__offset group`}>{getTitle(props)}{generateLink(props)}</h4>),
66-
h5: ({node, ...props}) => (<h5 id={generateId(props)} className={`header__offset group`}>{getTitle(props)}{generateLink(props)}</h5>),
63+
h1: ({node, ...props}) => (<h1 id={generateId(props)} className={`header__offset scroll-mt-24 group`}>{getTitle(props)}{generateLink(props)}</h1>),
64+
h2: ({node, ...props}) => (<h2 id={generateId(props)} className={`header__offset scroll-mt-24 group`}>{getTitle(props)}{generateLink(props)}</h2>),
65+
h3: ({node, ...props}) => (<h3 id={generateId(props)} className={`header__offset scroll-mt-24 group`}>{getTitle(props)}{generateLink(props)}</h3>),
66+
h4: ({node, ...props}) => (<h4 id={generateId(props)} className={`header__offset scroll-mt-24 group`}>{getTitle(props)}{generateLink(props)}</h4>),
67+
h5: ({node, ...props}) => (<h5 id={generateId(props)} className={`header__offset scroll-mt-24 group`}>{getTitle(props)}{generateLink(props)}</h5>),
6768
table: ({node, ...props}) => (<div className='table__wrapper'><table>{props.children}</table></div>),
6869
code: ({...props}) => <CodeHighlighting {...props} />,
70+
pre: ({...props}) => <CodeBlock {...props} />,
6971
}}
70-
rehypePlugins={[rehypeRaw, remarkGfm]}
72+
rehypePlugins={[rehypeRaw, remarkGfm, mdxAnnotations.rehype]}
73+
remarkPlugins={[mdxAnnotations.remark]}
7174
children={content} />
7275
</div>
7376
);

‎components/Docs/Page.tsx

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,22 @@ import * as React from 'react';
22
import { PageFrontMatter } from '../../models/PageFrontMatter';
33
import { PageActions } from './PageActions';
44
import { PageInfo } from './PageInfo';
5-
import { Sidebar } from './Sidebar';
65

76
export interface IPageProps {
87
items: PageFrontMatter[];
98
page: PageFrontMatter | undefined;
109
}
1110

12-
export const Page: React.FunctionComponent<IPageProps> = ({items, page, children}: React.PropsWithChildren<IPageProps>) => {
11+
export const Page: React.FunctionComponent<React.PropsWithChildren<IPageProps>> = ({items, page, children}: React.PropsWithChildren<IPageProps>) => {
1312

1413
return (
15-
<div className={`mb-6 py-8 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`}>
16-
<div className={`relative lg:flex`}>
14+
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`}>
15+
<div className={`relative my-16 min-w-0 w-full flex-auto lg:max-h-full`} style={{marginLeft: '-1px'}}>
16+
<PageActions page={page} />
1717

18-
<aside className={`top-16 hidden lg:block lg:w-80 xl:w-96`}>
19-
<Sidebar items={items} />
20-
</aside>
18+
{children}
2119

22-
<div className={`min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible lg:pl-8 lg:border-l lg:border-vulcan-300`} style={{marginLeft: '-1px'}}>
23-
<PageActions page={page} />
24-
25-
{children}
26-
27-
<PageInfo page={page} items={items} />
28-
</div>
20+
<PageInfo page={page} items={items} />
2921
</div>
3022
</div>
3123
);

‎components/Docs/PageInfo.tsx

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useMemo } from 'react';
44
import { Extension } from '../../constants/extension';
55
import { PageFrontMatter } from '../../models/PageFrontMatter';
66
import { GitHub } from '../Images/GitHub';
7+
import Giscus from "@giscus/react";
78

89
export interface IPageInfoProps {
910
items: PageFrontMatter[];
@@ -42,22 +43,52 @@ export const PageInfo: React.FunctionComponent<IPageInfoProps> = ({page, items}:
4243
{
4344
(prevPage || nextPage) && (
4445
<div className={`mt-16 w-full flex justify-between text-xl`}>
45-
{ (prevPage && prevPage.slug && prevPage.title) && ( <a href={`/docs/${(prevPage as PageFrontMatter).slug}`} title={prevPage.title} className={`text-teal-500 hover:text-teal-900`}>&larr; {(prevPage as PageFrontMatter).title}</a> ) }
46-
{ (nextPage && nextPage.slug && nextPage.title) && ( <a href={`/docs/${(nextPage as PageFrontMatter).slug}`} title={nextPage.title} className={`text-teal-500 hover:text-teal-900`}>{(nextPage as PageFrontMatter).title} &rarr;</a> ) }
46+
{ (prevPage && prevPage.slug && prevPage.title) && (
47+
<a href={`/docs/${(prevPage as PageFrontMatter).slug}`}
48+
title={prevPage.title}
49+
className={`items-start flex flex-col gap-2 text-teal-500 hover:text-teal-900`}>
50+
<span className="flex items-center justify-center px-2 py-1 border border-transparent text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70">&larr; Previous</span>
51+
<span>{(prevPage as PageFrontMatter).title}</span>
52+
</a>
53+
) }
54+
{ (nextPage && nextPage.slug && nextPage.title) && (
55+
<a href={`/docs/${(nextPage as PageFrontMatter).slug}`}
56+
title={nextPage.title}
57+
className={`items-end ml-auto flex flex-col gap-2 text-teal-500 hover:text-teal-900`}>
58+
<span className="flex items-center justify-center px-2 py-1 border border-transparent text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70">Next &rarr;</span>
59+
<span>{(nextPage as PageFrontMatter).title}</span>
60+
</a>
61+
) }
4762
</div>
4863
)
4964
}
5065

5166
<div className={`mt-16`}>
52-
<h2 className={`tracking-tight font-extrabold sm:leading-none text-3xl xl:text-4xl`}>Feedback</h2>
67+
<h2 className={`tracking-tight font-extrabold sm:leading-none text-3xl xl:text-4xl`}>Feedback/comments</h2>
5368

54-
<div className={`my-4 bg-vulcan-100 p-4`}>
69+
{/* <div className={`my-4 bg-vulcan-100 p-4`}>
5570
<p>Do you want to provide feedback about this page/content?</p>
5671
5772
<a href={feedbackUrl} className={`py-4 px-2 mt-4 inline-flex items-center h-5 bg-vulcan-300 hover:bg-vulcan-400`}>
5873
<GitHub className={`w-5 h-5 mr-2 inline`} />
5974
<span>Provide feedback</span>
6075
</a>
76+
</div> */}
77+
78+
<div className={`my-4`}>
79+
<Giscus
80+
repo="FrontMatter/feedback"
81+
repoId="R_kgDOIo5HTQ"
82+
category="Comments"
83+
categoryId="DIC_kwDOIo5HTc4CTI9X"
84+
mapping="pathname"
85+
strict="0"
86+
reactionsEnabled="0"
87+
emitMetadata="0"
88+
inputPosition="top"
89+
theme={process.env.NEXT_PUBLIC_GISCUS_THEME}
90+
lang="en"
91+
loading="lazy" />
6192
</div>
6293

6394
{

‎components/Docs/Sidebar.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,16 @@ import { Section } from '../Link/Section';
66

77
export interface ISidebarProps {
88
items: PageFrontMatter[];
9+
className?: string;
910
}
1011

11-
export const Sidebar: React.FunctionComponent<ISidebarProps> = ({ items }: React.PropsWithChildren<ISidebarProps>) => {
12+
export const Sidebar: React.FunctionComponent<ISidebarProps> = ({ items, className }: React.PropsWithChildren<ISidebarProps>) => {
1213

1314
let sorted = items?.sort((a, b) => { return (a.weight || 99) - (b.weight || 99); }) || [];
1415

1516
// Retrieve only the root sections, not the sub-sections
1617
sorted = sorted.filter((item) => (item.weight || 99) % 1 === 0);
1718

18-
19-
2019
const getLinks = (item: PageFrontMatter) => {
2120
const { content } = item;
2221
const links = Array.from(content.matchAll(/^## (.*$)/gim));
@@ -53,7 +52,7 @@ export const Sidebar: React.FunctionComponent<ISidebarProps> = ({ items }: React
5352
}
5453

5554
return (
56-
<nav role={`navigation`} className={`space-y-8 lg:pr-8 lg:border-r lg:border-vulcan-300`}>
55+
<nav role={`navigation`} className={className || ""}>
5756
{sorted.map((item, index) => {
5857
return (
5958
<div key={index}>

‎components/GitHub/Stargazers.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,12 @@ export const Stargazers: React.FunctionComponent<IStargazersProps> = (props: Rea
2424

2525
return (
2626
<div className={`stargazers group flex items-center`} style={{height:"36px"}}>
27-
<Link href={Extension.githubLink}>
28-
<a className={`h-full flex items-center bg-whisper-500 text-vulcan-500 p-2 text-xs font-bold group-hover:bg-whisper-700`} title={`Give the project a star on GitHub`}>
29-
<GitHub className={`h-4 w-4 mr-1`} />
30-
<span>Star</span>
31-
</a>
27+
<Link
28+
href={Extension.githubLink}
29+
className={`h-full flex items-center bg-whisper-500 text-vulcan-500 p-2 text-xs font-bold group-hover:bg-whisper-700`}
30+
title={`Give the project a star on GitHub`}>
31+
<GitHub className={`h-4 w-4 mr-1`} />
32+
<span>Star</span>
3233
</Link>
3334

3435
{
@@ -38,10 +39,11 @@ export const Stargazers: React.FunctionComponent<IStargazersProps> = (props: Rea
3839
<div className="h-4 bg-whisper-500 group-hover:bg-whisper-700 -rotate-45 transform origin-top-right"></div>
3940
</div>
4041

41-
<Link href={Extension.stars}>
42-
<a className={`h-full flex items-center bg-whisper-500 text-vulcan-500 p-2 text-xs font-bold group-hover:bg-whisper-700`} title={`Give the project a star on GitHub`}>
43-
{stars}
44-
</a>
42+
<Link
43+
href={Extension.stars}
44+
className={`h-full flex items-center bg-whisper-500 text-vulcan-500 p-2 text-xs font-bold group-hover:bg-whisper-700`}
45+
title={`Give the project a star on GitHub`}>
46+
{stars}
4547
</Link>
4648
</>
4749
)

‎components/Link/Link.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,12 @@ export const Link: React.FunctionComponent<ILinkProps> = ({title, link, hideDot}
2020
}, [router.asPath]);
2121

2222
return (
23-
<NextLink href={link}>
24-
<a className={`inline-flex items-center transition-colors duration-200 relative hover:text-teal-900 ${isActive ? `text-teal-800` : `text-whisper-900`}`} title={title}>
25-
{ !hideDot && <div className='w-1 h-1 rounded-full bg-current mr-2'></div> }
26-
{title}
27-
</a>
23+
<NextLink
24+
href={link}
25+
title={title}
26+
className={`inline-flex items-center transition-colors duration-200 relative hover:text-teal-900 ${isActive ? `text-teal-800` : `text-whisper-900`}`}>
27+
{ !hideDot && <div className='w-1 h-1 rounded-full bg-current mr-2'></div> }
28+
{title}
2829
</NextLink>
2930
);
3031
};

0 commit comments

Comments
 (0)