diff --git a/packages/website/package.json b/packages/website/package.json
index 96742e16..f873170c 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -44,6 +44,7 @@
"react-dropzone": "^11.3.2",
"react-helmet": "^6.1.0",
"react-svg-loader": "^3.0.3",
+ "react-syntax-highlighter": "^13.5.3",
"react-use": "^17.2.1",
"skynet-js": "^3.0.2",
"stream-browserify": "^2.0.2",
diff --git a/packages/website/src/components/CodeTerminal/CodeTerminal.js b/packages/website/src/components/CodeTerminal/CodeTerminal.js
new file mode 100644
index 00000000..f010492f
--- /dev/null
+++ b/packages/website/src/components/CodeTerminal/CodeTerminal.js
@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import js from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
+import style from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark";
+
+SyntaxHighlighter.registerLanguage("javascript", js);
+
+const CodeTerminal = () => {
+ const codeString = `import { SkynetClient } from "skynet-js";
+
+// create a client
+const client = new SkynetClient();
+
+// Assume we have a file from an input form.
+
+async function example() {
+ try {
+ // upload
+ const { skylink } = await client.uploadFile(file);
+
+ // download
+ await client.downloadFile(skylink);
+
+ console.log('Download successful');
+ } catch (error) {
+ console.log(error)
+ }
+}`;
+
+ return (
+
+
+
+
+ {codeString}
+
+
+
+ );
+};
+
+CodeTerminal.propTypes = {};
+
+CodeTerminal.defaultProps = {};
+
+export default CodeTerminal;
diff --git a/packages/website/src/components/CodeTerminal/index.js b/packages/website/src/components/CodeTerminal/index.js
new file mode 100644
index 00000000..e4d92c4b
--- /dev/null
+++ b/packages/website/src/components/CodeTerminal/index.js
@@ -0,0 +1 @@
+export { default } from "./CodeTerminal";
diff --git a/packages/website/src/pages/developers.js b/packages/website/src/pages/developers.js
index 615bcb52..c31ef753 100644
--- a/packages/website/src/pages/developers.js
+++ b/packages/website/src/pages/developers.js
@@ -1,6 +1,7 @@
import * as React from "react";
import Layout, { Section, SectionTitle, CardWithDescription } from "../components/Layout";
import { ExternalLink, DataSwap, Encryption, Layers, Mesh, Toolkit, DevBig } from "../components/Icons";
+import CodeTerminal from "../components/CodeTerminal";
import SEO from "../components/seo";
const LearnMoreButton = () => (
@@ -73,24 +74,30 @@ const DevelopersPage = () => (
-
- Decentralized Apps with speed, confidence, and usability
-
+
+
+
+ Decentralized Apps with speed, confidence, and usability
+
-
- {docs.map(({ name, href }, index) => (
- -
-
- {name}
-
-
- ))}
-
+
+ {docs.map(({ name, href }, index) => (
+ -
+
+ {name}
+
+
+ ))}
+
+
+
+
+
diff --git a/packages/website/tailwind.config.js b/packages/website/tailwind.config.js
index a56285e2..bf48b19f 100644
--- a/packages/website/tailwind.config.js
+++ b/packages/website/tailwind.config.js
@@ -3,6 +3,7 @@ const plugin = require("tailwindcss/plugin");
const colors = {
primary: "#00c65e",
+ warning: "#ffd567",
error: "#ED5454",
palette: {
100: "#f5f7f7",
@@ -42,6 +43,7 @@ module.exports = {
},
maxWidth: {
column: "320px",
+ terminal: "640px",
tablet: "640px",
desktop: "1024px",
content: "992px",