developers

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",

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 (
+    <div className="desktop:max-w-terminal">
+      <div className="bg-palette-400 rounded-t space-x-2 px-2">
+        <div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-error"></div>
+        <div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-warning"></div>
+        <div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-primary"></div>
+      </div>
+      <div className="p-4 bg-palette-500 text-sm" style={{ backgroundColor: "rgb(40, 44, 52)" }}>
+        <SyntaxHighlighter language="javascript" showLineNumbers={true} wrapLongLines={true} style={style}>
+          {codeString}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  );
+};
+
+CodeTerminal.propTypes = {};
+
+CodeTerminal.defaultProps = {};
+
+export default CodeTerminal;

packages/website/src/components/CodeTerminal/index.js

@@ -0,0 +1 @@
+export { default } from "./CodeTerminal";

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,13 +74,15 @@ const DevelopersPage = () => (
     <SEO title="Developers" />
 
     <Section>
+      <div className="flex flex-col desktop:flex-row desktop:space-y-0 space-y-12">
+        <div className="space-y-12">
           <h1 className="font-semibold text-4xl desktop:text-6xl desktop:leading-16 text-white">
             Decentralized Apps with speed, confidence, and <span className="text-primary underline">usability</span>
           </h1>
 
-      <ul className="mt-12 space-y-2">
+          <ul className="space-y-2">
             {docs.map(({ name, href }, index) => (
-          <li>
+              <li key={index}>
                 <a
                   href={href}
                   target="_blank"
@@ -91,6 +94,10 @@ const DevelopersPage = () => (
               </li>
             ))}
           </ul>
+        </div>
+
+        <CodeTerminal />
+      </div>
     </Section>
 
     <Section className="bg-white">

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",