Initial site

SpencerPark · Jan 2, 2017 · 101cbc5 · 101cbc5
commit 101cbc5
Show file tree

Hide file tree

Showing 35 changed files with 2,068 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+dist/
+node_modules/
+.idea/
diff --git a/MDRenderer.js b/MDRenderer.js
@@ -0,0 +1,68 @@
+const marked = require('marked'),
+      escape = require('escape-html');
+const MDRenderer = new marked.Renderer();
+
+
+const HIDE_LINE = /^!(.*(?:(?:\n\r?)|$))/gm;
+MDRenderer.code = function (code, language) {
+    const realCode = code.replace(HIDE_LINE, '$1');
+    const displayCode = code.replace(HIDE_LINE, '');
+    return `<div class="try-mellowd">
+                <pre>${escape(displayCode)}</pre>
+                <pre style="display: none;">${escape(realCode)}</pre>
+            </div>\n`;
+};
+
+MDRenderer.heading = function (text, level, raw) {
+    /*text = ' ' + text;
+    for (let i = 0; i < level; i++) {
+        text = '#' + text;
+    }
+    */return `<h${level} id="${raw.toLowerCase().replace(/[^\w]+/g, '-')}">${text}</h${level}>\n`;
+};
+
+MDRenderer.strong = function (text) {
+    return `<strong>**${text}**</strong>`
+};
+
+MDRenderer.em = function (text) {
+    return `<em>_${text}_</em>`
+};
+
+MDRenderer.codespan = function(text) {
+    return '`<code>' + text + '</code>`';
+};
+
+const ALERT = /^!(success|info|warning|danger)!/;
+const LEAD = /^!lead!/;
+MDRenderer.paragraph = function (text) {
+    let alertType = ALERT.exec(text);
+    if (alertType != null) {
+        return `<div class="alert alert-${alertType[1]}" role="alert">${text.substr(2 + alertType[1].length)}</div>\n`;
+    } else if (LEAD.test(text)) {
+        return `<p class="lead">${text.substr(6)}</p>`
+    }
+    return `<p>${text}</p>\n`
+};
+
+MDRenderer.table = function (header, body) {
+    return `<table class="table">
+                <thead>
+                    ${header}
+                </thead>
+                <tbody>
+                    ${body}
+                </tbody>
+            </table>\n`;
+};
+
+const superLink = MDRenderer.link;
+MDRenderer.link = function(href, title, text) {
+    if (href === '!tt!') {
+        return `<span data-toggle="tooltip" data-placement="top" title="${title}">
+                    ${text}
+                </span>`;
+    }
+    return superLink.call(MDRenderer, href, title, text);
+};
+module.exports = MDRenderer;
diff --git a/WikiLoader.js b/WikiLoader.js
@@ -0,0 +1,50 @@
+const path = require("path"),
+    through = require("through2"),
+    marked = require("marked"),
+    MDRenderer = require("./MDRenderer");
+
+module.exports = function () {
+    let transform = function (file, encoding, callback) {
+        if (file.isNull()) {
+            return callback(null, file);
+        }
+
+        let contents = file.contents.toString("utf8");
+
+        marked.setOptions({
+            renderer: MDRenderer
+        });
+
+        let name = path.basename(file.path);
+        name = name.substr(0, name.length - 3);
+        file.path = path.dirname(file.path) + path.sep + name + ".html";
+
+        contents = marked(contents);
+
+        let output = `<html>
+<head>
+    <title>${name}</title>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/codemirror.min.css" integrity="sha256-B4lcRQIA/hXjqRxuZHImRuHmb0IT1kscrY9mYJ7FsMs=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/theme/ambiance.min.css" integrity="sha256-ktyzhaUskWVTfFHilWbMGjsiXmi7GZkOXbOMW6wpt5w=" crossorigin="anonymous" />
+    
+    <link type="text/css" rel="stylesheet" href="../public/css/wiki.css"/>
+</head>
+<body>
+    <div class="container">
+        ${contents}
+    </div>
+    <script type="text/javascript" src="../wiki.js"></script>
+</body>
+</html>`;
+
+        file.contents = new Buffer(output);
+
+        callback(null, file);
+    };
+
+    return through.obj(transform);
+};
diff --git a/assets/css/editor.css b/assets/css/editor.css
diff --git a/assets/css/wiki.css b/assets/css/wiki.css
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,26 @@
+const
+    gulp = require('gulp'),
+    del = require("del"),
+    ts = require("gulp-typescript"),
+    webpack = require("gulp-webpack"),
+    loadWiki = require("./WikiLoader");
+
+const tsProject = ts.createProject("tsconfig.json");
+gulp.task("build", ["install assets", "compile wiki"], function () {
+    return tsProject.src()
+        .pipe(tsProject())
+        .js
+        .pipe(webpack(require('./webpack.config.js')(false)))
+        .pipe(gulp.dest("dist/"));
+});
+
+gulp.task("install assets", function () {
+    return gulp.src('assets/**/*')
+        .pipe(gulp.dest('dist/public/'));
+});
+
+gulp.task("compile wiki", function () {
+    return gulp.src('src/Wiki/pages/**/*.md')
+        .pipe(loadWiki())
+        .pipe(gulp.dest("dist/wiki/"));
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "mellowd-site",
+  "version": "1.0.0",
+  "description": "MellowD website",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@types/codemirror": "0.0.35",
+    "@types/lodash": "^4.14.44",
+    "@types/marked": "0.0.28",
+    "@types/react": "^0.14.55",
+    "@types/react-dom": "^0.14.19",
+    "@types/react-redux": "^4.4.35",
+    "@types/redux-actions": "^0.8.34",
+    "codemirror": "^5.22.0",
+    "gulp": "^3.9.1",
+    "immutable": "^3.8.1",
+    "lodash": "^4.17.3",
+    "marked": "^0.3.6",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1",
+    "react-redux": "^5.0.1",
+    "redux": "^3.6.0",
+    "redux-actions": "^1.2.0"
+  },
+  "devDependencies": {
+    "del": "^2.2.2",
+    "escape-html": "^1.0.3",
+    "gulp-typescript": "^3.1.3",
+    "gulp-webpack": "^1.5.0",
+    "html-webpack-plugin": "^2.24.1",
+    "style-loader": "^0.13.1",
+    "through2": "^2.0.3",
+    "ts-loader": "^1.3.3",
+    "typescript": "^2.1.4",
+    "webpack": "^1.14.0"
+  }
+}
diff --git a/src/App/components/Alert.tsx b/src/App/components/Alert.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { AlertContextualColor } from "../semantics";
+
+interface AlertProps {
+    color: AlertContextualColor
+
+    onDismiss?: () => any;
+}
+class Alert extends React.Component<AlertProps, any> {
+    render(): JSX.Element|any {
+        return (
+            <div className={"alert alert-" + this.props.color + (this.props.onDismiss ? " alert-dismissible" : "")}
+                 role="alert">
+                { this.props.onDismiss ?
+                    <button type="button" className="close" data-dismiss="alert" aria-label="Close"
+                            onClick={this.props.onDismiss}>
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    : null
+                }
+                { this.props.children }
+            </div>
+        )
+    }
+}
+
+export default Alert;
diff --git a/src/App/components/AppFrame.tsx b/src/App/components/AppFrame.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+class AppFrame extends React.Component<any, any> {
+    render(): JSX.Element|any {
+        return (
+            <div className="container">
+                { this.props.children }
+            </div>
+        );
+    }
+}
+
+export default AppFrame;
diff --git a/src/App/components/Icon.tsx b/src/App/components/Icon.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+interface IconProps {
+    icon: string;
+}
+
+class Icon extends React.Component<IconProps, any> {
+    render(): JSX.Element|any {
+        return <span className={"glyphicon glyphicon-" + this.props.icon}/>;
+    }
+}
+
+export default Icon;
diff --git a/src/App/components/Label.tsx b/src/App/components/Label.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { LabelContextualColor } from "../semantics";
+
+interface LabelProps {
+    color: LabelContextualColor
+    text: string
+}
+class Label extends React.Component<LabelProps, any> {
+    render(): JSX.Element|any {
+        return (
+            <span className={"label label-" + this.props.color}>{this.props.text}</span>
+        )
+    }
+}
+
+export default Label;
diff --git a/src/App/components/LandingPage.tsx b/src/App/components/LandingPage.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+class LandingPage extends React.Component<any, any> {
+
+    render(): JSX.Element|any {
+        return (
+            <div className="row">
+                <div className="col-xs-6">
+                    <img src="public/assets/img/logo.png" className="img-fluid" alt="Responsive image"/>
+                    <p>A language for writing music with code!</p>
+                </div>
+                <div className="col-xs-6">
+                    EDITOR
+                </div>
+            </div>
+        )
+    }
+}
+
+export default LandingPage;
diff --git a/src/App/components/PageNotFound.tsx b/src/App/components/PageNotFound.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+class PageNotFound extends React.Component<any, any> {
+    render(): JSX.Element|any {
+        return (
+            <div>
+                404 page not found, GO FIND ANOTHER ONE
+            </div>
+        )
+    }
+}
+
+export default PageNotFound;
diff --git a/src/App/semantics.ts b/src/App/semantics.ts
@@ -0,0 +1,20 @@
+
+/**
+ * label label-${color}
+ */
+export type LabelContextualColor = 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' ;
+
+/**
+ * text-${color}
+ */
+export type TextContextualColor = 'muted' | 'primary' | 'success' | 'info' | 'warning' | 'danger' ;
+
+/**
+ * alert alert-${color}
+ */
+export type AlertContextualColor = 'success' | 'info' | 'warning' | 'danger' ;
+
+/**
+ * bg-${color}
+ */
+export type BackgroundContextualColor = 'primary' | 'success' | 'info' | 'warning' | 'danger' ;
diff --git a/src/Editor/actions.ts b/src/Editor/actions.ts
@@ -0,0 +1,41 @@
+import { createAction, Action } from 'redux-actions';
+import { ErrorResponse, MusicPlayerState, MessageType, CodeState } from "./model";
+
+export const ADD_ERRORS = 'ADD_ERRORS';
+export const CLEAR_ERRORS = 'CLEAR_ERRORS';
+export const ADD_MESSAGE = 'ADD_MESSAGE';
+export const DISMISS_MESSAGE = 'DISMISS_MESSAGE';
+
+export const SET_MUSIC_DATA = 'SET_MUSIC_DATA';
+export const SET_PLAYER_STATE = 'SET_PLAYER_STATE';
+
+export type AddErrorsAction = Action<ErrorResponse[]>;
+export const createAddErrors = createAction<ErrorResponse[]>(ADD_ERRORS);
+
+export type ClearErrorsAction = Action<void>;
+export const createClearErrors = createAction<void>(CLEAR_ERRORS);
+
+export interface Message {
+    type: MessageType;
+
+    header: string;
+    body?: string | string[];
+
+    dismissible?: boolean;
+    expandable?: boolean;
+}
+export type AddMessageAction = Action<Message>;
+export const createAddMessage = createAction<Message>(ADD_MESSAGE);
+
+export type DismissMessageAction = Action<number>;
+export const createDismissMessage = createAction<number>(DISMISS_MESSAGE);
+
+export interface MusicData {
+    song: string;
+    length: number;
+}
+export type SetMusicDataAction = Action<MusicData | CodeState>;
+export const createSetMusicData = createAction<MusicData>(SET_MUSIC_DATA);
+
+export type SetPlayerStateAction = Action<MusicPlayerState>;
+export const createSetPlayerState = createAction<MusicPlayerState>(SET_PLAYER_STATE);