From c8b174bb206a5d04f5b12c19972d70a3a878c469 Mon Sep 17 00:00:00 2001 From: Kabir Shah Date: Mon, 28 May 2018 14:44:47 -0700 Subject: [PATCH] add basic landing page --- web/css/index.css | 27 +++++++++++++++++ web/css/lib/wing.min.css | 7 +++++ web/css/styles.css | 57 +++++++++++++++++++++++++++++++++++ web/index.html | 59 ++++++++++++++++++++++++++++++++++++ web/soldfile.js | 64 ++++++++++++++++++++++++++++++++++++++++ web/template/index.html | 59 ++++++++++++++++++++++++++++++++++++ web/template/post.html | 0 7 files changed, 273 insertions(+) create mode 100644 web/css/index.css create mode 100644 web/css/lib/wing.min.css create mode 100644 web/css/styles.css create mode 100644 web/index.html create mode 100644 web/soldfile.js create mode 100644 web/template/index.html create mode 100644 web/template/post.html diff --git a/web/css/index.css b/web/css/index.css new file mode 100644 index 00000000..a6b087d5 --- /dev/null +++ b/web/css/index.css @@ -0,0 +1,27 @@ +#head { + background: #121212; + color: #F7F7F7; +} + +#head h1 { + font-size: 50px; + font-weight: 600; + letter-spacing: 1px; +} + +#head a:nth-child(2) button { + background: hsl(240, 100%, 14%); + border: 1px solid hsl(240, 100%, 20%); + color: hsl(240, 100%, 90%); +} + +#head a:nth-child(3) button { + background: #232323; + border: 1px solid #343434; + color: #E6E6E6; +} + +.feature { + margin-top: 70px; + margin-bottom: 70px; +} diff --git a/web/css/lib/wing.min.css b/web/css/lib/wing.min.css new file mode 100644 index 00000000..391c00fb --- /dev/null +++ b/web/css/lib/wing.min.css @@ -0,0 +1,7 @@ +/** + * Wing v1.0.0-beta + * Copyright 2016-2018 Kabir Shah + * Released under the MIT License + * http://usewing.ml + */ +*{box-sizing:border-box}body,html{margin:0;padding:0}body{line-height:1.6;color:#111;font-size:16px;font-weight:400;font-family:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif}.container{width:80%;max-width:960px;margin:0 auto}.row{display:flex;flex-flow:row wrap;justify-content:space-between;width:100%;margin-bottom:16px}.row:last-child{margin-bottom:0}.row .col{flex-grow:1;flex-basis:0}.row .col,.row [class*=" col-"],.row [class^=col-]{margin-right:16px}.row .col:last-child,.row [class*=" col-"]:last-child,.row [class^=col-]:last-child{margin-right:0}.row .col-1{width:8.333333333333332%}.row .col-2{width:16.666666666666664%}.row .col-3{width:25%}.row .col-4{width:33.33333333333333%}.row .col-5{width:41.66666666666667%}.row .col-6{width:50%}.row .col-7{width:58.333333333333336%}.row .col-8{width:66.66666666666666%}.row .col-9{width:75%}.row .col-10{width:83.33333333333334%}.row .col-11{width:91.66666666666666%}.row .col-12{width:100%}@media screen and (max-width:768px){.row .col,.row [class*=" col-"],.row [class^=col-]{flex-grow:0;flex-basis:100%}}h1,h2,h3,h4,h5,h6,p{margin-top:0;margin-bottom:16px;font-family:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif}h1,h2,h3,h4,h5,h6{font-weight:500}h1{font-size:37.009px;line-height:1.3}h2{font-size:32.182px;line-height:1.35}h3{font-size:27.984px;line-height:1.4}h4{font-size:24.334px;line-height:1.45}h5{font-size:21.16px;line-height:1.5}h6{font-size:18.4px;line-height:1.55}p{font-size:16px}@media (max-width:768px){h1{font-size:33.311px}h2{font-size:29.479px}h3{font-size:26.088px}h4{font-size:23.086px}h5{font-size:20.43px}h6{font-size:18.08px}}input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{height:45px;width:100%;margin-bottom:16px;padding:16px;font-size:16px;background:#f5f5f5;border:1px solid #a7a7a7;border-radius:2px;transition:all .2s ease}input[type=email]:hover,input[type=file]:hover,input[type=number]:hover,input[type=password]:hover,input[type=search]:hover,input[type=tel]:hover,input[type=text]:hover,input[type=url]:hover,select:hover,textarea:hover{border-color:#111}input[type=email]:focus,input[type=file]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{outline:0;border-color:#0062ff}textarea{min-height:70px}.button,[type=submit],button{height:45px;margin-bottom:16px;padding:10px 30px;outline:0;text-decoration:none;color:#f5f5f5;font-size:16px;background:#111;border:1px solid #111;border-radius:2px;transition:all .2s ease}.button:focus,.button:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{opacity:.9}.button:active,[type=submit]:active,button:active{opacity:.7}.button[disabled],[type=submit][disabled],button[disabled]{opacity:.8;cursor:not-allowed}.button.outline,[type=submit].outline,button.outline{color:#111;background:0 0}.button.outline:focus,.button.outline:hover,[type=submit].outline:focus,[type=submit].outline:hover,button.outline:focus,button.outline:hover{color:#f5f5f5;background:#111}a{color:#0062ff;transition:all .2s ease}a:hover{cursor:pointer;color:#111}ol,ul{margin-top:0;margin-bottom:16px;padding-left:0;list-style-position:inside}ol li,ul li{margin-bottom:16px}ol li:last-child,ul li:last-child{margin-bottom:0}ol ol,ol ul,ul ol,ul ul{margin-left:16px}img{margin-top:0;margin-bottom:16px}.box{margin-bottom:16px;padding-top:16px;padding-right:16px;padding-left:16px;border:1px solid #a7a7a7;border-radius:2px}.nav{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}.nav .nav-item{margin-right:16px}.nav .nav-item:last-child{margin-right:0}.card{display:flex;flex-direction:column;margin-bottom:16px;border:1px solid #a7a7a7;border-radius:2px}.card .card-content{margin:0;padding:16px}.card .card-image{display:block;height:auto;width:100%}pre{margin-top:0;margin-bottom:16px}pre code{display:block;padding:16px;white-space:pre-wrap;word-wrap:break-word}code{padding:2px;white-space:nowrap;background:#e7e7e7;border:1px solid #d7d7d7;border-radius:2px;font-family:Consolas,Monaco,Menlo,monospace}hr{border-width:.5px;border-color:#a7a7a7}.position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.size-full-height{min-height:100vh}.size-full-width{width:100%}.size-full{width:100%;min-height:100vh}.hidden{display:none}.flex{display:flex}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.align-start{align-items:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.direction-vertical{flex-direction:column}.direction-horizontal{flex-direction:row}.center{flex-direction:column;justify-content:center;align-items:center}.border-black{border:1px solid #111}.border-gray{border:1px solid #a7a7a7}.border-white{border:1px solid #f5f5f5}.border-blue{border:1px solid #0062ff}.border-red{border:1px solid #ff1500}.border-yellow{border:1px solid #ffbf00}.border-green{border:1px solid #00b30f}.border-rounded{border-radius:2px}.border-circle{border-radius:2px}.color-black{color:#111}.color-gray{color:#a7a7a7}.color-white{color:#f5f5f5}.color-blue{color:#0062ff}.color-red{color:#ff1500}.color-yellow{color:#ffbf00}.color-green{color:#00b30f}.background-black{background-color:#111}.background-gray{background-color:#a7a7a7}.background-white{background-color:#f5f5f5}.background-blue{background-color:#0062ff}.background-red{background-color:#ff1500}.background-yellow{background-color:#ffbf00}.background-green{background-color:#00b30f} diff --git a/web/css/styles.css b/web/css/styles.css new file mode 100644 index 00000000..7cd60b80 --- /dev/null +++ b/web/css/styles.css @@ -0,0 +1,57 @@ +body { + background: #F7F7F7; + color: #121212; +} + +.container-small { + width: 70%; + max-width: 700px; + margin: 0 auto; +} + +button { + font-size: 13px; + letter-spacing: 1px; + background: #E6E6E6; + color: #232323; +} + +pre code { + position: relative; + background: #141b1f; + border: 1px solid #343434; + color: #85a0ad; +} + +pre code::after { + position: absolute; + top: 5px; + right: 10px; + content: attr(lang); + font-size: 13px; + color: #526d7a; +} + +pre code .red { + color: #ec7979; +} + +pre code .orange { + color: #e4a281; +} + +pre code .green { + color: #a7d590; +} + +pre code .blue { + color: #79b2ec; +} + +pre code .purple { + color: #c381e4; +} + +pre code .gray { + color: #526d7a; +} diff --git a/web/index.html b/web/index.html new file mode 100644 index 00000000..995047c5 --- /dev/null +++ b/web/index.html @@ -0,0 +1,59 @@ + + + + + + + + + + Moon + + + + + + + + + + + + + +
+

Minimal

+

Moon instances have two parts — a view and data. The view is responsible for displaying the data which can contain actions to update the view. The view is defined using the Moon View Language — an intuitive template language allowing for powerful interpolation and simple logic. The data is a JavaScript object that can contain properties of any type along with actions — functions that can change the data to update the view.

+
+
+ 
<p>Count: { count }</p>
+<button @click={ increment() }>
+  Increment
+</button>
+ 
{
+  count: 0,
+  increment() {
+    this.update("count", this.data.count + 1);
+  }
+}
+
+
+ +
+
+
+ + diff --git a/web/soldfile.js b/web/soldfile.js new file mode 100644 index 00000000..3e05f587 --- /dev/null +++ b/web/soldfile.js @@ -0,0 +1,64 @@ +const Sold = require("sold"); +const Handlebars = require("handlebars"); + +const STR_RE = /((?:")|'|`)((?:.|\n)*?)\1/g; +const SPECIAL_RE = /\b(new|var|let|if|do|function|while|switch|for|foreach|in|continue|break|return)\b/g; +const GLOBAL_VARIABLE_RE = /\b(document|window|Array|String|undefined|true|false|Object|this|Boolean|Function|Number|\d+(?:\.\d+)?)\b/g; +const CONST_RE = /\b(const )([\w\d]+)/g; +const METHODS_RE = /\b([\w\d]+)\(/g; +const MULTILINE_COMMENT_RE = /(\/\*.*\*\/)/g; +const COMMENT_RE = /(\/\/.*)/g; +const HTML_COMMENT_RE = /(\<\!\-\-(?:(?:.|\n)*)\-\-\>)/g; +const HTML_ATTRIBUTE_RE = /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']?/g; +const HTML_TAG_RE = /(<\/?[\w\d-]*?)(\s(?:.|\n)*?)?(\/?>)/g; +const escapeRE = /&(?:amp|gt|lt);/g; +const escapeMap = { + "&": '&', + ">": '>', + "<": '<' +}; + +const highlight = function(compiled) { + compiled = compiled.replace(STR_RE, "$1$2$1"); + + compiled = compiled.replace(HTML_COMMENT_RE, "$1"); + compiled = compiled.replace(HTML_TAG_RE, function(match, start, content, end) { + if (content === undefined) { + content = ''; + } else { + content = content.replace(HTML_ATTRIBUTE_RE, function(match, name, value) { + if (value !== "string") { + if (value === undefined) { + value = ''; + } else { + value = '=' + value; + } + return "" + name + "" + value; + } + }); + } + + return "" + start + "" + content + "" + end + ""; + }); + + compiled = compiled.replace(COMMENT_RE, "$1"); + compiled = compiled.replace(MULTILINE_COMMENT_RE, "$1"); + + compiled = compiled.replace(SPECIAL_RE, "$1"); + compiled = compiled.replace(GLOBAL_VARIABLE_RE, "$1"); + + compiled = compiled.replace(CONST_RE, "$1$2"); + compiled = compiled.replace(METHODS_RE, function(match, name) { + return "" + name + "("; + }); + + return compiled; +} + +Sold({ + root: __dirname, + template: "template", + source: "src", + destination: '', + engine: "handlebars" +}); diff --git a/web/template/index.html b/web/template/index.html new file mode 100644 index 00000000..995047c5 --- /dev/null +++ b/web/template/index.html @@ -0,0 +1,59 @@ + + + + + + + + + + Moon + + + + + + + + + + + + + +
+

Minimal

+

Moon instances have two parts — a view and data. The view is responsible for displaying the data which can contain actions to update the view. The view is defined using the Moon View Language — an intuitive template language allowing for powerful interpolation and simple logic. The data is a JavaScript object that can contain properties of any type along with actions — functions that can change the data to update the view.

+
+
+ 
<p>Count: { count }</p>
+<button @click={ increment() }>
+  Increment
+</button>
+ 
{
+  count: 0,
+  increment() {
+    this.update("count", this.data.count + 1);
+  }
+}
+
+
+ +
+
+
+ + diff --git a/web/template/post.html b/web/template/post.html new file mode 100644 index 00000000..e69de29b