forked from AztecProtocol/aztec-packages
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
84 lines (75 loc) · 2.51 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React, { useEffect, useState } from "react";
import axios from "axios";
import Highlight, { defaultProps } from "prism-react-renderer";
import github from "prism-react-renderer/themes/github";
//import vsDark from 'prism-react-renderer/themes/vsDark';
/**
* NOTE: See the docs/README.md for a better (more robust) way to embed code snippets from the codebase into your docs.
*
*
* EXAMPLE USAGE:
* Inside a markdown file:
*
* import GithubCode from '../src/components/GithubCode';
* <GithubCode owner="AztecProtocol" language="rust" repo="aztec-packages" branch="master" filePath="noir-projects/noir-contracts/contracts/token_contract/src/main.nr" startLine={2} endLine={30000} />
*/
const GithubCode = ({
owner,
repo,
branch = "master",
filePath,
language,
startLine = 1,
endLine = Infinity,
}) => {
const [code, setCode] = useState("");
const [response, setResponse] = useState("");
useEffect(() => {
const fetchCode = async () => {
const url = `https://api.github.com/repos/${owner}/${repo}/contents/${filePath}?ref=${branch}`;
try {
const response = await axios.get(url);
const content = response.data.content;
const decodedContent = atob(content); // Decode Base64 content
const lines = decodedContent.split("\n");
const desiredLines = lines
.slice(startLine - 1, endLine)
.join("\n")
.trimEnd();
setResponse(response);
setCode(desiredLines);
} catch (error) {
console.error("Failed to fetch GitHub code:", error);
}
};
fetchCode();
}, [owner, repo, branch, filePath, startLine, endLine]);
const highlightedCode = (
<Highlight {...defaultProps} code={code} theme={github} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<pre style={style}>
{tokens.map((line, i) => (
<div key={i} {...getLineProps({ line })}>
{/* uncomment for line numbers */}
{/* <span>{i + 1}</span> */}
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token })} />
))}
</div>
))}
</pre>
{response.data?.html_url ? (
<a href={response.data.html_url} target="_blank">
Link to source code.
</a>
) : (
""
)}
</div>
)}
</Highlight>
);
return highlightedCode;
};
export default GithubCode;