mirror of
https://github.com/OneUptime/oneuptime
synced 2024-11-21 22:59:07 +00:00
feat: Update react-syntax-highlighter to latest version and use a11yDark style
This commit updates the react-syntax-highlighter package to the latest version and switches to the a11yDark style for syntax highlighting in the MarkdownViewer component. This update ensures compatibility with the latest features and improvements of react-syntax-highlighter and enhances the accessibility of the code snippets in the MarkdownViewer.
This commit is contained in:
parent
c5062b5bc5
commit
0f0f2c1b81
@ -3,9 +3,8 @@ import React, { FunctionComponent, ReactElement } from "react";
|
|||||||
import ReactMarkdown from "react-markdown";
|
import ReactMarkdown from "react-markdown";
|
||||||
// https://github.com/remarkjs/remark-gfm
|
// https://github.com/remarkjs/remark-gfm
|
||||||
import remarkGfm from "remark-gfm";
|
import remarkGfm from "remark-gfm";
|
||||||
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
|
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||||
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'
|
import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/prism";
|
||||||
|
|
||||||
|
|
||||||
export interface ComponentProps {
|
export interface ComponentProps {
|
||||||
text: string;
|
text: string;
|
||||||
@ -78,23 +77,28 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
|
|||||||
ul: ({ ...props }: any) => {
|
ul: ({ ...props }: any) => {
|
||||||
return <ul className="list-disc px-6 m-1" {...props} />;
|
return <ul className="list-disc px-6 m-1" {...props} />;
|
||||||
},
|
},
|
||||||
code: (props) => {
|
code: (props: any) => {
|
||||||
const {children, className, node, ...rest} = props
|
const { children, className, ...rest } = props;
|
||||||
const match = /language-(\w+)/.exec(className || '')
|
const match: RegExpExecArray | null = /language-(\w+)/.exec(
|
||||||
|
className || "",
|
||||||
|
);
|
||||||
|
|
||||||
|
const content: string = String(children).replace(/\n$/, "");
|
||||||
|
|
||||||
return match ? (
|
return match ? (
|
||||||
<SyntaxHighlighter
|
<SyntaxHighlighter
|
||||||
{...rest}
|
{...rest}
|
||||||
PreTag="div"
|
PreTag="div"
|
||||||
children={String(children).replace(/\n$/, '')}
|
children={content}
|
||||||
language={match[1]}
|
language={match[1]}
|
||||||
style={dark}
|
style={a11yDark}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<code {...rest} className={className}>
|
<code {...rest} className={className}>
|
||||||
{children}
|
{children}
|
||||||
</code>
|
</code>
|
||||||
)
|
);
|
||||||
}
|
},
|
||||||
}}
|
}}
|
||||||
remarkPlugins={[remarkGfm]}
|
remarkPlugins={[remarkGfm]}
|
||||||
>
|
>
|
||||||
|
@ -347,7 +347,7 @@ const setUpRepository: PromiseVoidFunction = async (): Promise<void> => {
|
|||||||
|
|
||||||
logger.info(
|
logger.info(
|
||||||
"Repository setup PR created - #" +
|
"Repository setup PR created - #" +
|
||||||
pullRequest.pullRequestId +
|
pullRequest.pullRequestNumber +
|
||||||
". Please megre this PR to continue using Copilot. Exiting..",
|
". Please megre this PR to continue using Copilot. Exiting..",
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -102,12 +102,14 @@ export default class CodeRepositoryUtil {
|
|||||||
throw new BadDataException("Repository Name is required");
|
throw new BadDataException("Repository Name is required");
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!this.gitHubUtil) {
|
const githubUtil: GitHubUtil = this.getGitHubUtil();
|
||||||
|
|
||||||
|
if (!githubUtil) {
|
||||||
throw new BadDataException("GitHub Util is required");
|
throw new BadDataException("GitHub Util is required");
|
||||||
}
|
}
|
||||||
|
|
||||||
const pullRequest: PullRequest | undefined =
|
const pullRequest: PullRequest | undefined =
|
||||||
await this.gitHubUtil.getPullRequestByNumber({
|
await githubUtil.getPullRequestByNumber({
|
||||||
organizationName:
|
organizationName:
|
||||||
this.codeRepositoryResult.codeRepository.organizationName,
|
this.codeRepositoryResult.codeRepository.organizationName,
|
||||||
repositoryName: this.codeRepositoryResult.codeRepository.repositoryName,
|
repositoryName: this.codeRepositoryResult.codeRepository.repositoryName,
|
||||||
@ -135,7 +137,9 @@ export default class CodeRepositoryUtil {
|
|||||||
"/usr/src/app/Templates/.oneuptime",
|
"/usr/src/app/Templates/.oneuptime",
|
||||||
);
|
);
|
||||||
|
|
||||||
const repoPath: string = this.getLocalRepositoryPath();
|
const oneUptimeConfigPath: string = LocalFile.sanitizeFilePath(
|
||||||
|
this.getLocalRepositoryPath() + "/.oneuptime",
|
||||||
|
);
|
||||||
|
|
||||||
// create a new branch called oneuptime-copilot-setup
|
// create a new branch called oneuptime-copilot-setup
|
||||||
|
|
||||||
@ -145,9 +149,11 @@ export default class CodeRepositoryUtil {
|
|||||||
branchName: branchName,
|
branchName: branchName,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
await LocalFile.makeDirectory(oneUptimeConfigPath);
|
||||||
|
|
||||||
await LocalFile.copyDirectory({
|
await LocalFile.copyDirectory({
|
||||||
source: templateFolderPath,
|
source: templateFolderPath,
|
||||||
destination: repoPath,
|
destination: oneUptimeConfigPath,
|
||||||
});
|
});
|
||||||
|
|
||||||
// add all the files to the git.
|
// add all the files to the git.
|
||||||
@ -277,7 +283,11 @@ export default class CodeRepositoryUtil {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public static async executeScript(data: { script: string }): Promise<string> {
|
public static async executeScript(data: { script: string }): Promise<string> {
|
||||||
const commands: Array<string> = data.script.split("\n");
|
const commands: Array<string> = data.script
|
||||||
|
.split("\n")
|
||||||
|
.filter((command: string) => {
|
||||||
|
return command.trim() !== "" && !command.startsWith("#");
|
||||||
|
});
|
||||||
|
|
||||||
const results: Array<string> = [];
|
const results: Array<string> = [];
|
||||||
|
|
||||||
|
@ -18,8 +18,11 @@ const PullRequestViewElement: FunctionComponent<ComponentProps> = (
|
|||||||
`https://github.com/${props.organizationName}/${props.repositoryName}/pull/${props.pullRequestId}`,
|
`https://github.com/${props.organizationName}/${props.repositoryName}/pull/${props.pullRequestId}`,
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<Link to={to} openInNewTab={true}>
|
<Link to={to} className="hover:underline" openInNewTab={true}>
|
||||||
{props.pullRequestId}
|
<>
|
||||||
|
<span>#</span>
|
||||||
|
{props.pullRequestId}
|
||||||
|
</>
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -19,7 +19,7 @@ const CopilotLastRunAt: FunctionComponent<ComponentProps> = (
|
|||||||
{props.lastRunAt && (
|
{props.lastRunAt && (
|
||||||
<Alert
|
<Alert
|
||||||
type={AlertType.INFO}
|
type={AlertType.INFO}
|
||||||
strongTitle="Last Run At: "
|
strongTitle="Copilot Last Ran At"
|
||||||
title={`${OneUptimeDate.getDateAsLocalFormattedString(props.lastRunAt)}.`}
|
title={`${OneUptimeDate.getDateAsLocalFormattedString(props.lastRunAt)}.`}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
@ -378,6 +378,7 @@ services:
|
|||||||
ONEUPTIME_LLM_SERVER_URL: ${COPILOT_ONEUPTIME_LLM_SERVER_URL}
|
ONEUPTIME_LLM_SERVER_URL: ${COPILOT_ONEUPTIME_LLM_SERVER_URL}
|
||||||
DISABLE_COPILOT: ${DISABLE_COPILOT}
|
DISABLE_COPILOT: ${DISABLE_COPILOT}
|
||||||
OPENAI_API_KEY: ${COPILOT_OPENAI_API_KEY}
|
OPENAI_API_KEY: ${COPILOT_OPENAI_API_KEY}
|
||||||
|
LOG_LEVEL: ${LOG_LEVEL}
|
||||||
logging:
|
logging:
|
||||||
driver: "local"
|
driver: "local"
|
||||||
options:
|
options:
|
||||||
|
@ -356,8 +356,6 @@ services:
|
|||||||
extends:
|
extends:
|
||||||
file: ./docker-compose.base.yml
|
file: ./docker-compose.base.yml
|
||||||
service: copilot
|
service: copilot
|
||||||
environment:
|
|
||||||
- LOG_LEVEL=INFO
|
|
||||||
build:
|
build:
|
||||||
network: host
|
network: host
|
||||||
context: .
|
context: .
|
||||||
|
Loading…
Reference in New Issue
Block a user