Skip to content

Commit

Permalink
chore(website): update code preview
Browse files Browse the repository at this point in the history
  • Loading branch information
gary-Shen committed Feb 1, 2024
1 parent 334c787 commit 4756439
Show file tree
Hide file tree
Showing 13 changed files with 290 additions and 275 deletions.
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,20 @@
"name": "labelu-website",
"private": true,
"dependencies": {
"@codemirror/lang-json": "^6.0.1",
"@loadable/component": "^5.15.3",
"@mdx-js/react": "^3.0.0",
"@react-icons/all-files": "^4.1.0",
"@tailwindcss/typography": "^0.5.10",
"@uiw/react-codemirror": "^4.21.21",
"clsx": "^2.0.0",
"i18next": "^23.6.0",
"i18next-browser-languagedetector": "^7.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^13.3.1",
"react-router": "^6.17.0",
"react-router-dom": "^6.17.0",
"react-syntax-highlighter": "^15.5.0"
"react-router-dom": "^6.17.0"
},
"scripts": {
"start": "vite --port 3005",
Expand All @@ -28,7 +29,6 @@
"@shlab/fabric": "^1.2.1",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/react-syntax-highlighter": "^15.5.10",
"@vitejs/plugin-react": "^3.1.0",
"autoprefixer": "^10.4.16",
"daisyui": "^3.9.3",
Expand Down
390 changes: 197 additions & 193 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

24 changes: 24 additions & 0 deletions src/components/code-preview/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import CodeMirror from '@uiw/react-codemirror';
import { json } from '@codemirror/lang-json';
import { useMemo } from 'react';

export interface CodePreviewProps {
value: string;
}

export default function CodePreview({ value }: CodePreviewProps) {
const code = useMemo(() => {
try {
if (typeof value !== 'string') {
return JSON.stringify(value, null, 2);
}

return value;
} catch (error) {
return value;
}
}, []);


return <CodeMirror className='border' value={code} height="auto" extensions={[json()]} />;
}
54 changes: 27 additions & 27 deletions src/components/markdown-with-highlight/index.tsx
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
import SyntaxHighlighter from 'react-syntax-highlighter';
import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
// import SyntaxHighlighter from 'react-syntax-highlighter';
// import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import React from 'react';
import type { MDXComponents, MergeComponents } from '@mdx-js/react/lib';

function code({ className, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>) {
const match = /language-(\w+)/.exec(className || '');
// function code({ className, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>) {
// const match = /language-(\w+)/.exec(className || '');

return match ? (
<SyntaxHighlighter
lineNumberStyle={{
color: '#999',
}}
showLineNumbers={match[1] !== 'bash'}
language={match[1]}
PreTag="div"
// @ts-ignore
style={githubGist}
{...props}
/>
) : (
<code className={className} {...props} />
);
}
// return match ? (
// <SyntaxHighlighter
// lineNumberStyle={{
// color: '#999',
// }}
// showLineNumbers={match[1] !== 'bash'}
// language={match[1]}
// PreTag="div"
// // @ts-ignore
// style={githubGist}
// {...props}
// />
// ) : (
// <code className={className} {...props} />
// );
// }

interface ExtraProps {
components: Readonly<MDXComponents> | MergeComponents | null | undefined;
}

export default function MarkdownWithHighlight({ children }: React.PropsWithChildren) {
const childrenWithExtraProp = React.Children.map(children, (child) => {
if (React.isValidElement<ExtraProps>(child)) {
return React.cloneElement(child, { components: { code } });
}
// const childrenWithExtraProp = React.Children.map(children, (child) => {
// if (React.isValidElement<ExtraProps>(child)) {
// return React.cloneElement(child, { components: { code } });
// }

return child;
});
// return child;
// });

return childrenWithExtraProp;
return children;
}
7 changes: 3 additions & 4 deletions src/pages/schema.audio.frame/example.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import jsonschema from './schema.json';
import JsonSchemaTable from '../../components/schema-table';
import CodePreview from '../../components/code-preview';

## Audio Timestamp Schema

<JsonSchemaTable schema={jsonschema} />

## Example

```json filename="index.json"
{
<CodePreview value={{
"toolName": "audioFrameTool",
"result": [
{
Expand All @@ -30,5 +30,4 @@ import JsonSchemaTable from '../../components/schema-table';
}
}
]
}
```
}} />
7 changes: 3 additions & 4 deletions src/pages/schema.audio.segment/example.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import jsonschema from './schema.json';
import JsonSchemaTable from '../../components/schema-table';
import CodePreview from '../../components/code-preview';

## Audio Segment Schema

<JsonSchemaTable schema={jsonschema} />

## Example

```json
{
<CodePreview value={{
"toolName": "audioSegmentTool",
"result": [
{
Expand All @@ -32,5 +32,4 @@ import JsonSchemaTable from '../../components/schema-table';
}
}
]
}
```
}} />
7 changes: 3 additions & 4 deletions src/pages/schema.image.cuboid/example.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import jsonschema from './schema.json';
import JsonSchemaTable from '../../components/schema-table';
import CodePreview from '../../components/code-preview';

## Polygon Schema

<JsonSchemaTable schema={jsonschema} />

## Example

```json
{
<CodePreview value={{
"toolName": "cuboidTool",
"result": [
{
Expand Down Expand Up @@ -102,5 +102,4 @@ import JsonSchemaTable from '../../components/schema-table';
"attribute": "suv"
}
]
}
```
}} />
17 changes: 7 additions & 10 deletions src/pages/schema.image.line/example.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import jsonschema from './schema.json';
import JsonSchemaTable from '../../components/schema-table';
import CodePreview from '../../components/code-preview';

## Line Schema

Expand All @@ -9,8 +10,8 @@ import JsonSchemaTable from '../../components/schema-table';

### Line

```json
{
<CodePreview value={{
"toolName": "lineTool",
"result": [
{
"pointList": [
Expand Down Expand Up @@ -65,15 +66,12 @@ import JsonSchemaTable from '../../components/schema-table';
"order": 2,
"label": "noneAttribute"
}
],
"toolName": "lineTool"
}
```
]
}} />

### Spline

```json
{
<CodePreview value={{
"toolName": "lineTool",
"result": [
{
Expand Down Expand Up @@ -118,5 +116,4 @@ import JsonSchemaTable from '../../components/schema-table';
]
}
]
}
```
}} />
11 changes: 5 additions & 6 deletions src/pages/schema.image.point/example.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import jsonschema from './schema.json';
import JsonSchemaTable from '../../components/schema-table';
import CodePreview from '../../components/code-preview';

## Point Schema

<JsonSchemaTable schema={jsonschema} />

## Example

```json
{
<CodePreview value={{
"toolName": "pointTool",
"result": [
{
"x": 134.5060975609757,
Expand All @@ -18,7 +19,5 @@ import JsonSchemaTable from '../../components/schema-table';
"order": 3,
"label": "label-1"
}
],
"toolName": "pointTool"
}
```
]
}} />
17 changes: 7 additions & 10 deletions src/pages/schema.image.polygon/example.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import jsonschema from './schema.json';
import JsonSchemaTable from '../../components/schema-table';
import CodePreview from '../../components/code-preview';

## Polygon Schema

Expand All @@ -9,8 +10,8 @@ import JsonSchemaTable from '../../components/schema-table';

### Polygon

```json
{
<CodePreview value={{
"toolName": "polygonTool",
"result": [
{
"id": "FuzuAJ4q",
Expand Down Expand Up @@ -40,15 +41,12 @@ import JsonSchemaTable from '../../components/schema-table';
"order": 6,
"label": "label-1"
}
],
"toolName": "polygonTool"
}
```
]
}} />

### Close-Spline

```json
{
<CodePreview value={{
"toolName": "polygonTool",
"result": [
{
Expand Down Expand Up @@ -127,5 +125,4 @@ import JsonSchemaTable from '../../components/schema-table';
]
}
]
}
```
}} />
11 changes: 5 additions & 6 deletions src/pages/schema.image.rect/example.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import jsonschema from './schema.json';
import JsonSchemaTable from '../../components/schema-table';
import CodePreview from '../../components/code-preview';

## Rect Schema

<JsonSchemaTable schema={jsonschema} />

## Example

```json
{
<CodePreview value={{
"toolName": "rectTool",
"result": [
{
"x": 148.66463414634154,
Expand All @@ -30,7 +31,5 @@ import JsonSchemaTable from '../../components/schema-table';
"order": 5,
"label": "label-1"
}
],
"toolName": "rectTool"
}
```
]
}} />
7 changes: 3 additions & 4 deletions src/pages/schema.video.frame/example.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import jsonschema from './schema.json';
import JsonSchemaTable from '../../components/schema-table';
import CodePreview from '../../components/code-preview';

## Video Timestamp Schema

<JsonSchemaTable schema={jsonschema} />

## Example

```json filename="index.json"
{
<CodePreview value={{
"toolName": "videoFrameTool",
"result": [
{
Expand All @@ -30,5 +30,4 @@ import JsonSchemaTable from '../../components/schema-table';
}
}
]
}
```
}} />
7 changes: 3 additions & 4 deletions src/pages/schema.video.segment/example.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import jsonschema from './schema.json';
import JsonSchemaTable from '../../components/schema-table';
import CodePreview from '../../components/code-preview';

## Video Segment Schema

<JsonSchemaTable schema={jsonschema} />

## Example

```json
{
<CodePreview value={{
"toolName": "videoSegmentTool",
"result": [
{
Expand All @@ -32,5 +32,4 @@ import JsonSchemaTable from '../../components/schema-table';
}
}
]
}
```
}} />

0 comments on commit 4756439

Please sign in to comment.