developers

This commit is contained in:
Karol Wypchlo 2021-03-29 15:10:03 +02:00
parent caf3cdc2a7
commit 5391e1f735
5 changed files with 78 additions and 17 deletions

View File

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

View File

@ -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;

View File

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

View File

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

View File

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