aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-30 03:23:16 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-30 03:23:16 +0800
commitea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4 (patch)
treec08e304f7d1b496fab7b68faf93d4126f2075b8d /packages/website/ts
parent0f01e31cc3826df7000e0ddc35354aa9af515966 (diff)
downloaddexon-sol-tools-ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4.tar
dexon-sol-tools-ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4.tar.gz
dexon-sol-tools-ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4.tar.bz2
dexon-sol-tools-ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4.tar.lz
dexon-sol-tools-ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4.tar.xz
dexon-sol-tools-ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4.tar.zst
dexon-sol-tools-ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4.zip
feat: have basic code syntax highlighting working
Diffstat (limited to 'packages/website/ts')
-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
3 files changed, 55 insertions, 1 deletions
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>
);