Initial project scaffolding

5 files changed, 96 insertions, 0 deletions

diff --git a/packages/dev-tools-pages/ts/components/meta_tags.tsx b/packages/dev-tools-pages/ts/components/meta_tags.tsx
new file mode 100644
index 000000000..f6c43d23f
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/meta_tags.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+export interface MetaTagsProps {
+    title: string;
+    description: string;
+    imgSrc?: string;
+}
+
+export const MetaTags: React.StatelessComponent<MetaTagsProps> = ({ title, description, imgSrc }) => (
+    <Helmet>
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+        <meta property="og:type" content="website" />
+        <meta property="og:image" content={imgSrc} />
+        <meta name="twitter:site" content="@0xproject" />
+        <meta name="twitter:image" content={imgSrc} />
+    </Helmet>
+);
+
+MetaTags.defaultProps = {
+    imgSrc: '/images/og_image.png',
+};
diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts
new file mode 100644
index 000000000..d0890161c
--- /dev/null
+++ b/packages/dev-tools-pages/ts/globals.d.ts
@@ -0,0 +1,9 @@
+declare module 'whatwg-fetch';
+declare module 'react-document-title';
+
+declare module '*.json' {
+    const json: any;
+    /* tslint:disable */
+    export default json;
+    /* tslint:enable */
+}
diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx
new file mode 100644
index 000000000..f4db2ea3c
--- /dev/null
+++ b/packages/dev-tools-pages/ts/index.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { render } from 'react-dom';
+import { MetaTags } from 'ts/components/meta_tags';
+import { Landing } from 'ts/pages/landing/landing';
+
+const DOCUMENT_TITLE = '';
+const DOCUMENT_DESCRIPTION = '';
+
+render(
+    <div>
+        <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} />
+        <Landing />
+    </div>,
+    document.getElementById('app'),
+);
diff --git a/packages/dev-tools-pages/ts/pages/landing/landing.tsx b/packages/dev-tools-pages/ts/pages/landing/landing.tsx
new file mode 100644
index 000000000..a6cb89a7b
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/landing/landing.tsx
@@ -0,0 +1,15 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+interface LandingProps {}
+
+interface LandingState {}
+
+export class Landing extends React.Component<LandingProps, LandingState> {
+    constructor(props: LandingProps) {
+        super(props);
+    }
+    public render(): React.ReactNode {
+        return <div id="landing" className="clearfix" />;
+    }
+}
diff --git a/packages/dev-tools-pages/ts/utils/utils.ts b/packages/dev-tools-pages/ts/utils/utils.ts
new file mode 100644
index 000000000..b274706a2
--- /dev/null
+++ b/packages/dev-tools-pages/ts/utils/utils.ts
@@ -0,0 +1,32 @@
+import * as bowser from 'bowser';
+import * as _ from 'lodash';
+
+export const utils = {
+    getColSize(items: number): number {
+        const bassCssGridSize = 12; // Source: http://basscss.com/#basscss-grid
+        const colSize = bassCssGridSize / items;
+        if (!_.isInteger(colSize)) {
+            throw new Error(`Number of cols must be divisible by ${bassCssGridSize}`);
+        }
+        return colSize;
+    },
+    getCurrentBaseUrl(): string {
+        const port = window.location.port;
+        const hasPort = !_.isUndefined(port);
+        const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
+        return baseUrl;
+    },
+    onPageLoadPromise: new Promise<void>((resolve, _reject) => {
+        if (document.readyState === 'complete') {
+            resolve();
+            return;
+        }
+        window.onload = () => resolve();
+    }),
+    openUrl(url: string): void {
+        window.open(url, '_blank');
+    },
+    isMobileOperatingSystem(): boolean {
+        return bowser.mobile;
+    },
+};