Skip to content

Commit 3e479b0

Browse files
hassankhanhassankhan
authored
docs: finalise new documentation platform (#6631)
1 parent ec3ce22 commit 3e479b0

File tree

298 files changed

+13274
-3942
lines changed

Some content is hidden

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

298 files changed

+13274
-3942
lines changed

‎docs-gen/src/resources/helpers/member-title.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,6 @@ export function memberTitle(this: DeclarationReflection) {
2828

2929

3030
md.push(heading(headingLevel));
31-
if (parentName) {
32-
md.push(`<--{"id" : "${parentName}"}--> `);
33-
}
3431
md.push(this.name);
3532
return md.join(' ');
3633
}

‎docs-gen/src/resources/helpers/meta.ts‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,30 @@ export function meta(this: ProjectReflection) {
66
if (!reflection) {
77
return null;
88
}
9-
9+
1010
if (reflection?.comment) {
1111
return reflection;
1212
}
1313

1414
return findModuleRelection(reflection?.children?.[0]);
1515
}
16-
16+
1717
function tagConverter(tag: string) {
1818
const tags = {
1919
menucategory: 'category',
2020
subcategory: 'subCategory',
2121
menuorder: 'menuOrder'
2222
};
23-
23+
2424
return tags[tag] ?? tag;
2525
}
2626

2727
const moduleReflection = findModuleRelection(this);
2828

2929
if (moduleReflection) {
3030
const { comment } = moduleReflection;
31-
const md = ['---'];
32-
33-
(comment?.tags || []).forEach((tag: CommentTag) => {
34-
if (tag.tagName !== 'description') {
35-
const text = tag.text.startsWith('@') ? `'${tag.text}'` : tag.text;
36-
md.push(`${tagConverter(tag.tagName)}: ${text}`.replace('\n', ''));
37-
}
38-
});
39-
md.push('---');
31+
const title = (comment?.tags || []).find((tag: CommentTag) => tag.tagName === 'title');
32+
const md = [`# ${title.text}`];
4033
const description = (comment?.tags || []).find((tag: CommentTag) => tag.tagName === 'description');
4134

4235
if (description) {

‎docs-gen/src/resources/helpers/parameter-table.ts‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,21 @@ import MarkdownTheme from '../../theme';
44
import { stripLineBreaks } from './strip-line-breaks';
55
import paramTypeToString from './param-type-to-string';
66

7+
const escape = (s: string) => {
8+
const lookup = {
9+
'&': '&amp;',
10+
'"': '&quot;',
11+
'\'': '&apos;',
12+
'<': '&lt;',
13+
'>': '&gt;',
14+
'|': '&#124;'
15+
};
16+
const regex = new RegExp(`[${Object.keys(lookup).join('')}]`, 'g');
17+
return s.replace( regex, c => lookup[c] );
18+
}
19+
20+
const wrapInCodeTags = (s) => `<code class='nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10'>${s}</code>`
21+
722
export function parameterTable(this: ParameterReflection[], hideUncommented: boolean) {
823
const md = [];
924
const defaultValues = this.map((param) => !!param.defaultValue);
@@ -38,8 +53,8 @@ export function parameterTable(this: ParameterReflection[], hideUncommented: boo
3853
const typeOut = paramTypeToString(parameter);
3954

4055
const row = [
41-
`${parameter.flags.isRest ? '...' : ''}${parameter.name}${isOptional ? '?' : ''}`,
42-
typeOut ? typeOut.toString().replace(/\|/g, '&#124;') : '',
56+
wrapInCodeTags(`${parameter.flags.isRest ? '...' : ''}${parameter.name}${isOptional ? '?' : ''}`),
57+
typeOut ? wrapInCodeTags(escape(typeOut.toString())) : '',
4358
];
4459
if (hasDefaultValues) {
4560
row.push(parameter.defaultValue ? parameter.defaultValue : '-');
@@ -56,10 +71,10 @@ export function parameterTable(this: ParameterReflection[], hideUncommented: boo
5671
}
5772
row.push(commentsText.length > 0 ? commentsText.join(' ') : '-');
5873
}
59-
return `${row.join(' | ')} |\n`;
74+
return `| ${row.join(' | ')} |\n`;
6075
});
6176

62-
md.push(`\n${headers.join(' | ')} |\n${headers.map(() => '------').join(' | ')} |\n${rows.join('')}`);
77+
md.push(`\n| ${headers.join(' | ')} |\n| ${headers.map(() => '------').join(' | ')} |\n${rows.join('')}`);
6378

6479
return md.join('');
6580
}

‎docs-gen/src/resources/partials/member.declaration.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
{{#with type.declaration.children}}
88

9-
{{{parameterTableJsx false}}}
9+
{{{parameterTable false}}}
1010

1111
{{/with}}
1212

‎docs-gen/src/resources/partials/member.signature.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
{{#with parameters}}
2222

23-
{{{parameterTableJsx true}}}
23+
{{{parameterTable true}}}
2424

2525
{{/with}}
2626

‎docs-gen/tasks/generate.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const TypeDoc = require('typedoc');
22
const path = require('path');
33
const fs = require('fs-extra');
44

5-
const outputDir = '../docs/content/Reference/Frontend';
5+
const outputDir = '../docs/docs-new/pages/reference/frontend';
66

77
const app = new TypeDoc.Application();
88

@@ -50,7 +50,7 @@ projects.forEach(({ name, docsPath, outputDir }) => {
5050
const pathArr = tmpDir.split('/');
5151
pathArr.splice(-1, 1);
5252
const out = path.join(...pathArr);
53-
const currentPath = path.join(out, `${name}.md`);
53+
const currentPath = path.join(out, `${name.replace('@', '')}.mdx`);
5454

5555
fs.copyFileSync(path.join(tmpDir, tmpFileName), currentPath);
5656
fs.removeSync(tmpDir);

‎docs-gen/template/publish.js‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -101,13 +101,7 @@ const tagValue = (doclet, tagOriginalTitle) => {
101101
return tag && tag.value;
102102
};
103103

104-
const generateModuleSection = (doclet) => `---
105-
title: '${doclet.name}'
106-
permalink: ${tagValue(doclet, 'permalink')}
107-
category: Reference
108-
subCategory: ${tagValue(doclet, 'subCategory')}
109-
menuOrder: ${tagValue(doclet, 'menuOrder')}
110-
---
104+
const generateModuleSection = (doclet) => `# ${doclet.name}
111105
112106
${doclet.description}\n\n`;
113107

‎docs/docs-new/components/common/Button/Button.module.scss‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
.ButtonGroup {
2+
display: flex;
3+
margin: 1rem 0;
4+
grid-gap: 0.5rem;
5+
}
6+
7+
.Button {
8+
display: inline-flex;
9+
align-items: center;
10+
justify-content: center;
11+
min-width: 88px;
12+
padding: 0.625rem 1.5rem;
13+
border: none;
14+
font: inherit;
15+
color: inherit;
16+
background-color: transparent;
17+
cursor: pointer;
18+
transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out;
19+
20+
&[disabled] {
21+
cursor: not-allowed;
22+
}
23+
24+
span {
25+
font-family: var(--font);
26+
font-size: 14px;
27+
font-weight: 500;
28+
}
29+
30+
// For icons
31+
svg {
32+
margin-right: 9px;
33+
}
34+
> img {
35+
margin-right: 0.5rem;
36+
}
37+
}
38+
39+
.primary {
40+
background-color: var(--white);
41+
border: 1px solid var(--dark_05);
42+
border-radius: 0.25rem;
43+
color: var(--dark_01);
44+
45+
&:hover {
46+
border-color: var(--purple_a12);
47+
color: var(--purple_bright);
48+
}
49+
50+
&:active {
51+
background-color: var(--purple_bg_a08);
52+
border-color: var(--purple_a12);
53+
color: var(--purple_bright);
54+
}
55+
56+
&:focus {
57+
box-shadow: 0 0 0 3px var(--purple_03);
58+
border-radius: 4px;
59+
}
60+
61+
&[disabled] {
62+
background-color: var(--dark_bg);
63+
border-color: var(--dark_05);
64+
color: var(--dark_04);
65+
}
66+
}
67+
68+
.secondary {
69+
background-color: transparent;
70+
border: 1px solid transparent;
71+
border-radius: 0.25rem;
72+
color: var(--dark_01);
73+
74+
&:hover {
75+
color: var(--purple_bright);
76+
}
77+
78+
&:active {
79+
color: var(--purple_bright);
80+
}
81+
82+
&:focus {
83+
box-shadow: 0 0 0 3px var(--purple_03);
84+
border-radius: 4px;
85+
}
86+
87+
&[disabled] {
88+
color: var(--dark_04);
89+
}
90+
}
91+
92+
.success {
93+
background-color: var(--white);
94+
border: 1px solid var(--dark_05);
95+
border-radius: 0.25rem;
96+
color: var(--dark_01);
97+
98+
&:hover {
99+
background-color: rgba(233, 249, 242, 0.5);
100+
border-color: rgba(38, 83, 75, 0.1);
101+
}
102+
103+
&:active {
104+
background-color: #E9F9F2;
105+
border-color: rgba(38, 83, 75, 0.1);
106+
color: #26534B;
107+
}
108+
109+
&:focus {
110+
box-shadow: 0 0 0 3px var(--purple_03);
111+
border-radius: 4px;
112+
}
113+
114+
&[disabled] {
115+
background-color: var(--dark_bg);
116+
border-color: var(--dark_05);
117+
color: var(--dark_04);
118+
}
119+
}
120+
121+
.danger {
122+
background-color: var(--white);
123+
border: 1px solid var(--dark_05);
124+
border-radius: 0.25rem;
125+
color: var(--dark_01);
126+
127+
&:hover {
128+
background-color: rgba(252, 235, 235, 0.5);
129+
border-color: rgba(131, 20, 20, 0.1);
130+
}
131+
132+
&:active {
133+
background-color: #FCEBEB;
134+
border-color: rgba(131, 20, 20, 0.1);
135+
color: #831414;
136+
}
137+
138+
&:focus {
139+
box-shadow: 0 0 0 3px var(--purple_03);
140+
border-radius: 4px;
141+
}
142+
143+
&[disabled] {
144+
background-color: var(--dark_bg);
145+
border-color: var(--dark_05);
146+
color: var(--dark_04);
147+
}
148+
}

‎docs/docs-new/components/common/Button/Button.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import classnames from 'classnames/bind';
2+
import React from 'react';
3+
import Image from 'next/image';
4+
5+
6+
import LikeIcon from './like.inline.svg';
7+
import DislikeIcon from './dislike.inline.svg';
8+
import * as styles from './Button.module.scss';
9+
10+
const cn = classnames.bind(styles);
11+
12+
export const ButtonGroup = (props) => (
13+
<div
14+
{...props}
15+
className={cn('ButtonGroup', props.className)}
16+
/>
17+
)
18+
19+
export interface ButtonProps extends React.ComponentProps<'button'> {
20+
variant?: 'primary' | 'secondary' | 'success' | 'danger';
21+
icon?: React.ReactNode;
22+
}
23+
24+
export const Button = ({ variant = 'primary', children, icon, ...rest }: ButtonProps) => {
25+
return (
26+
<button
27+
{...rest}
28+
className={cn('Button', styles[variant])}
29+
>
30+
{icon ?? null}
31+
<span>{children}</span>
32+
</button>
33+
);
34+
};
35+
36+
export const LikeButton = (props) => {
37+
return (
38+
<Button
39+
{...props}
40+
variant="success"
41+
icon={<Image alt='Like' src={LikeIcon} />}
42+
/>
43+
);
44+
};
45+
46+
export const DislikeButton = (props) => {
47+
return (
48+
<Button
49+
{...props}
50+
variant="danger"
51+
icon={<Image alt='Dislike' src={DislikeIcon} />}
52+
/>
53+
);
54+
};

‎docs/docs-new/components/common/Button/dislike.inline.svg‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)