aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-30 03:23:16 +0800
committerFred Carlsen <fred@sjelfull.no>2018-12-06 18:53:46 +0800
commit9e1a94266e775ac52ad8da0d825e6814457bacd4 (patch)
tree247efd9e0486a36dc4445f2a736ff1d934315a71 /packages
parenta9895c55f909b25dab52c4409d739e34709759b2 (diff)
downloaddexon-sol-tools-9e1a94266e775ac52ad8da0d825e6814457bacd4.tar
dexon-sol-tools-9e1a94266e775ac52ad8da0d825e6814457bacd4.tar.gz
dexon-sol-tools-9e1a94266e775ac52ad8da0d825e6814457bacd4.tar.bz2
dexon-sol-tools-9e1a94266e775ac52ad8da0d825e6814457bacd4.tar.lz
dexon-sol-tools-9e1a94266e775ac52ad8da0d825e6814457bacd4.tar.xz
dexon-sol-tools-9e1a94266e775ac52ad8da0d825e6814457bacd4.tar.zst
dexon-sol-tools-9e1a94266e775ac52ad8da0d825e6814457bacd4.zip
feat: have basic code syntax highlighting working
Diffstat (limited to 'packages')
-rw-r--r--packages/website/package.json2
-rw-r--r--packages/website/public/index.html217
-rw-r--r--packages/website/ts/pages/documentation/developers_page.tsx4
-rw-r--r--packages/website/ts/pages/instant/code_demo.tsx45
-rw-r--r--packages/website/ts/pages/instant/configurator.tsx7
5 files changed, 184 insertions, 91 deletions
diff --git a/packages/website/package.json b/packages/website/package.json
index 52d5c8f96..f2ca3c2d3 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -55,6 +55,7 @@
"react-popper": "^1.0.0-beta.6",
"react-redux": "^5.0.3",
"react-scroll": "0xproject/react-scroll#pr-330-and-replace-state",
+ "react-syntax-highlighter": "^10.1.1",
"react-tooltip": "^3.2.7",
"react-typist": "^2.0.4",
"redux": "^3.6.0",
@@ -84,6 +85,7 @@
"@types/react-helmet": "^5.0.6",
"@types/react-redux": "^4.4.37",
"@types/react-scroll": "1.5.3",
+ "@types/react-syntax-highlighter": "^0.0.8",
"@types/react-tap-event-plugin": "0.0.30",
"@types/redux": "^3.6.0",
"@types/web3-provider-engine": "^14.0.0",
diff --git a/packages/website/public/index.html b/packages/website/public/index.html
index a8a61f8ad..538eca6d9 100644
--- a/packages/website/public/index.html
+++ b/packages/website/public/index.html
@@ -1,95 +1,132 @@
<!DOCTYPE html>
<html>
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="description" content="An Open Protocol For Decentralized Exchange On The Ethereum Blockchain" />
+ <meta property="og:type" content="website" />
+ <meta property="og:title" content="0x" />
+ <meta
+ property="og:description"
+ content="An Open Protocol For Decentralized Exchange On The Ethereum Blockchain"
+ />
+ <meta property="og:image" content="/images/og_image.png" />
+ <title>0x: The Protocol for Trading Tokens</title>
+ <link rel="icon" type="image/png" href="/images/favicon/favicon-2-32x32.png" sizes="32x32" />
+ <link rel="icon" type="image/png" href="/images/favicon/favicon-2-16x16.png" sizes="16x16" />
+ <link rel="stylesheet" href="/css/material-design-iconic-font.min.css" />
+ <link rel="stylesheet" href="/css/roboto.css" />
+ <link rel="stylesheet" href="/css/roboto_mono.css" />
+ <link rel="stylesheet" href="/css/basscss_responsive_custom.css" />
+ <link rel="stylesheet" href="/css/basscss_responsive_padding.css" />
+ <link rel="stylesheet" href="/css/basscss_responsive_margin.css" />
+ <link rel="stylesheet" href="/css/basscss_responsive_type_scale.css" />
+ </head>
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="description" content="An Open Protocol For Decentralized Exchange On The Ethereum Blockchain" />
- <meta property="og:type" content="website" />
- <meta property="og:title" content="0x" />
- <meta property="og:description" content="An Open Protocol For Decentralized Exchange On The Ethereum Blockchain" />
- <meta property="og:image" content="/images/og_image.png" />
- <title>0x: The Protocol for Trading Tokens</title>
- <link rel="icon" type="image/png" href="/images/favicon/favicon-2-32x32.png" sizes="32x32" />
- <link rel="icon" type="image/png" href="/images/favicon/favicon-2-16x16.png" sizes="16x16" />
- <link rel="stylesheet" href="/css/github-gist.css">
- <link rel="stylesheet" href="/css/material-design-iconic-font.min.css">
- <link rel="stylesheet" href="/css/roboto.css">
- <link rel="stylesheet" href="/css/roboto_mono.css">
- <link rel="stylesheet" href="/css/basscss_responsive_custom.css">
- <link rel="stylesheet" href="/css/basscss_responsive_padding.css">
- <link rel="stylesheet" href="/css/basscss_responsive_margin.css">
- <link rel="stylesheet" href="/css/basscss_responsive_type_scale.css">
-</head>
+ <body style="margin: 0px; min-width: 355px;">
+ <!-- Heap SDK -->
+ <script type="text/javascript">
+ (window.heap = window.heap || []),
+ (heap.load = function(e, t) {
+ (window.heap.appid = e), (window.heap.config = t = t || {});
+ var r = t.forceSSL || 'https:' === document.location.protocol,
+ a = document.createElement('script');
+ (a.type = 'text/javascript'),
+ (a.async = !0),
+ (a.src = (r ? 'https:' : 'http:') + '//cdn.heapanalytics.com/js/heap-' + e + '.js');
+ var n = document.getElementsByTagName('script')[0];
+ n.parentNode.insertBefore(a, n);
+ for (
+ var o = function(e) {
+ return function() {
+ heap.push([e].concat(Array.prototype.slice.call(arguments, 0)));
+ };
+ },
+ p = [
+ 'addEventProperties',
+ 'addUserProperties',
+ 'clearEventProperties',
+ 'identify',
+ 'resetIdentity',
+ 'removeEventProperty',
+ 'setEventProperties',
+ 'track',
+ 'unsetEventProperty',
+ ],
+ c = 0;
+ c < p.length;
+ c++
+ )
+ heap[p[c]] = o(p[c]);
+ });
+ heap.load('410099666');
+ </script>
+ <!-- End Heap SDK -->
+ <!-- Global site tag (gtag.js) - Google Analytics -->
+ <script async src="https://www.googletagmanager.com/gtag/js?id=UA-98720122-1"></script>
+ <script>
+ window.dataLayer = window.dataLayer || [];
+ function gtag() {
+ dataLayer.push(arguments);
+ }
+ gtag('js', new Date());
-<body style="margin: 0px; min-width: 355px;">
- <!-- Heap SDK -->
- <script type="text/javascript">
- window.heap = window.heap || [], heap.load = function (e, t) { window.heap.appid = e, window.heap.config = t = t || {}; var r = t.forceSSL || "https:" === document.location.protocol, a = document.createElement("script"); a.type = "text/javascript", a.async = !0, a.src = (r ? "https:" : "http:") + "//cdn.heapanalytics.com/js/heap-" + e + ".js"; var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(a, n); for (var o = function (e) { return function () { heap.push([e].concat(Array.prototype.slice.call(arguments, 0))) } }, p = ["addEventProperties", "addUserProperties", "clearEventProperties", "identify", "resetIdentity", "removeEventProperty", "setEventProperties", "track", "unsetEventProperty"], c = 0; c < p.length; c++)heap[p[c]] = o(p[c]) };
- heap.load("410099666");
- </script>
- <!-- End Heap SDK -->
- <!-- Global site tag (gtag.js) - Google Analytics -->
- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-98720122-1"></script>
- <script>
- window.dataLayer = window.dataLayer || [];
- function gtag() {
- dataLayer.push(arguments);
- }
- gtag('js', new Date());
+ gtag('config', 'UA-98720122-1');
+ </script>
+ <!-- End Google Analytics -->
+ <!-- Facebook SDK -->
+ <div id="fb-root"></div>
+ <script>
+ (function(d, s, id) {
+ var js,
+ fjs = d.getElementsByTagName(s)[0];
+ if (d.getElementById(id)) return;
+ js = d.createElement(s);
+ js.id = id;
+ js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=1687545238205192';
+ fjs.parentNode.insertBefore(js, fjs);
+ })(document, 'script', 'facebook-jssdk');
+ </script>
+ <div id="app"></div>
+ <!-- End Facebook SDK -->
+ <!-- Twitter SDK -->
+ <script>
+ window.twttr = (function(d, s, id) {
+ var js,
+ fjs = d.getElementsByTagName(s)[0],
+ t = window.twttr || {};
+ if (d.getElementById(id)) return t;
+ js = d.createElement(s);
+ js.id = id;
+ js.src = 'https://platform.twitter.com/widgets.js';
+ fjs.parentNode.insertBefore(js, fjs);
- gtag('config', 'UA-98720122-1');
- </script>
- <!-- End Google Analytics -->
- <!-- Facebook SDK -->
- <div id="fb-root"></div>
- <script>
- (function (d, s, id) {
- var js,
- fjs = d.getElementsByTagName(s)[0];
- if (d.getElementById(id)) return;
- js = d.createElement(s);
- js.id = id;
- js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=1687545238205192';
- fjs.parentNode.insertBefore(js, fjs);
- })(document, 'script', 'facebook-jssdk');
- </script>
- <div id="app"></div>
- <!-- End Facebook SDK -->
- <!-- Twitter SDK -->
- <script>
- window.twttr = (function (d, s, id) {
- var js,
- fjs = d.getElementsByTagName(s)[0],
- t = window.twttr || {};
- if (d.getElementById(id)) return t;
- js = d.createElement(s);
- js.id = id;
- js.src = 'https://platform.twitter.com/widgets.js';
- fjs.parentNode.insertBefore(js, fjs);
-
- t._e = [];
- t.ready = function (f) {
- t._e.push(f);
- };
- return t;
- })(document, 'script', 'twitter-wjs');
- </script>
- <!-- End Twitter SDK -->
- <!-- Hotjar Tracking Code for https://0xproject.com/ -->
- <script>
- (function (h, o, t, j, a, r) {
- h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) };
- h._hjSettings = { hjid: 935597, hjsv: 6 };
- a = o.getElementsByTagName('head')[0];
- r = o.createElement('script'); r.async = 1;
- r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
- a.appendChild(r);
- })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
- </script>
- <!-- End Hotjar Tracking Code -->
- <!-- Main -->
- <script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script>
-</body>
-
-</html> \ No newline at end of file
+ t._e = [];
+ t.ready = function(f) {
+ t._e.push(f);
+ };
+ return t;
+ })(document, 'script', 'twitter-wjs');
+ </script>
+ <!-- End Twitter SDK -->
+ <!-- Hotjar Tracking Code for https://0xproject.com/ -->
+ <script>
+ (function(h, o, t, j, a, r) {
+ h.hj =
+ h.hj ||
+ function() {
+ (h.hj.q = h.hj.q || []).push(arguments);
+ };
+ h._hjSettings = { hjid: 935597, hjsv: 6 };
+ a = o.getElementsByTagName('head')[0];
+ r = o.createElement('script');
+ r.async = 1;
+ r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+ a.appendChild(r);
+ })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
+ </script>
+ <!-- End Hotjar Tracking Code -->
+ <!-- Main -->
+ <script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script>
+ </body>
+</html>
diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index a84be7bfe..fcca2b6ad 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -2,6 +2,7 @@ import { colors, constants as sharedConstants, utils as sharedUtils } from '@0x/
import * as _ from 'lodash';
import * as React from 'react';
import DocumentTitle from 'react-document-title';
+import { Helmet } from 'react-helmet';
import { DocsLogo } from 'ts/components/documentation/docs_logo';
import { DocsTopBar } from 'ts/components/documentation/docs_top_bar';
import { Container } from 'ts/components/ui/container';
@@ -146,6 +147,9 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
} 50%, ${colors.white} 100%)`}
>
<DocumentTitle title="0x Docs" />
+ <Helmet>
+ <link rel="stylesheet" href="/css/github-gist.css" />
+ </Helmet>
<Container className="flex mx-auto" height="100vh">
<Container
className="sm-hide xs-hide relative"
diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
new file mode 100644
index 000000000..9764227a1
--- /dev/null
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs';
+import { styled } from 'ts/style/theme';
+
+import { Container } from 'ts/components/ui/container';
+
+const CustomPre = styled.pre`
+ code {
+ background-color: inherit !important;
+ border-radius: 0px;
+ font-family: 'Roboto Mono', sans-serif;
+ border: none;
+ }
+`;
+
+export interface CodeDemoProps {}
+
+export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => {
+ const codeString = `<head>
+ <script src="http://0x-instant-staging.s3-website-us-east-1.amazonaws.com/main.bundle.js"></script>
+</head>
+<body>
+ <script>
+ zeroExInstant.render({
+ liquiditySource: 'https://api.relayer.com/sra/v2/',
+ affiliateInfo: {
+ feeRecipient: '0x50ff5828a216170cf224389f1c5b0301a5d0a230',
+ feePercentage: 0.03
+ }
+ }, 'body');
+ </script>
+</body>`;
+ return (
+ <SyntaxHighlighter
+ useInlineStyles={true}
+ language="html"
+ style={atelierCaveDark}
+ showLineNumbers={true}
+ PreTag={CustomPre}
+ >
+ {codeString}
+ </SyntaxHighlighter>
+ );
+};
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index c836739bb..2314f968f 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
+import { CodeDemo } from 'ts/pages/instant/code_demo';
import { colors } from 'ts/style/colors';
export interface ConfiguratorProps {
@@ -8,5 +9,9 @@ export interface ConfiguratorProps {
}
export const Configurator = (props: ConfiguratorProps) => (
- <Container id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground} />
+ <Container id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}>
+ <Container width="50%">
+ <CodeDemo />
+ </Container>
+ </Container>
);
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-10 17:05:17 +0800