From 566953d5e164c389774136b750e7975c666eccb3 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 30 Nov 2018 11:08:49 -0800 Subject: feat: implement code generation --- packages/website/ts/pages/instant/code_demo.tsx | 34 ++++++------------- packages/website/ts/pages/instant/configurator.tsx | 38 +++++++++++++++++++++- packages/website/ts/pages/instant/features.tsx | 4 +-- 3 files changed, 49 insertions(+), 27 deletions(-) diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index e9ecad40d..fa0cebc62 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -6,7 +6,7 @@ import { styled } from 'ts/style/theme'; const CustomPre = styled.pre` margin: 0px; line-height: 24px; - overflow: hidden; + overflow: scroll; width: 600px; height: 500px; border-radius: 4px; @@ -123,7 +123,7 @@ const customStyle = { }, hljs: { display: 'block', - overflowX: 'auto', + overflowX: 'hidden', background: colors.instantSecondaryBackground, color: 'white', fontSize: '12px', @@ -136,26 +136,12 @@ const customStyle = { }, }; -export interface CodeDemoProps {} +export interface CodeDemoProps { + children: string; +} -export const CodeDemo: React.StatelessComponent = props => { - const codeString = ` - - - - -`; - return ( - - {codeString} - - ); -}; +export const CodeDemo: React.StatelessComponent = props => ( + + {props.children} + +); diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index f4987c0de..0fb6d7ef8 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -1,3 +1,4 @@ +import * as _ from 'lodash'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; @@ -26,6 +27,7 @@ export class Configurator extends React.Component { }; public render(): React.ReactNode { const { hash } = this.props; + const codeToDisplay = this._generateCodeDemoCode(); return ( { - + {codeToDisplay} ); @@ -57,4 +59,38 @@ export class Configurator extends React.Component { instantConfig: config, }); }; + private readonly _generateCodeDemoCode = (): string => { + const { instantConfig } = this.state; + console.log(instantConfig.availableAssetDatas); + return ` + + + + + `; + }; + private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => { + const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`); + if (availableAssetDatas.length < 2) { + return `[${stringAvailableAssetDatas.join(', ')}]`; + } + return `[\n\t\t\t${stringAvailableAssetDatas.join(', \n\t\t\t')}\n\t\t]`; + }; } diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index c88958bbf..230a8496b 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -91,8 +91,8 @@ const FeatureItem = (props: FeatureItemProps) => { {_.map(linkInfos, linkInfo => ( - - + + ))} -- cgit