add basic landing page

kbrsh · May 28, 2018 · c8b174b · c8b174b
1 parent 83b1823
commit c8b174b
Show file tree

Hide file tree

Showing 7 changed files with 273 additions and 0 deletions.
diff --git a/web/css/index.css 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
diff --git a/web/css/styles.css 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
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="A minimal & fast UI library.">
+    <meta name="author" content="Kabir Shah">
+
+    <title>Moon</title>
+
+    <link rel="shortcut icon" href="./img/favicon.png"/>
+
+    <link rel="stylesheet" type="text/css" href="./css/lib/wing.min.css" />
+    <link rel="stylesheet" type="text/css" href="./css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="./css/index.css" />
+
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      ga('create', 'UA-70792533-14', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </head>
+
+  <body>
+    <section id="head" class="flex size-full align-center">
+      <div class="container-small">
+        <h1>A minimal & fast user interface library.</h1>
+        <a href="./guide/getting-started.html"><button>GET STARTED</button></a>
+        <a href="./guide/about.html"><button>ABOUT</button></a>
+      </div>
+    </section>
+
+    <section id="feature-minimal" class="container feature">
+      <h1>Minimal</h1>
+      <p>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 <b>Moon View Language</b> — 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>
+      <div class="row">
+        <div class="col">
+          <pre><code lang="mvl"><span class="red">&lt;p</span><span class="red">&gt;</span>Count: { count }<span class="red">&lt;/p</span><span class="red">&gt;</span>
+<span class="red">&lt;button</span> <span class="orange">@click</span>={ <span class="blue">increment</span>() }<span class="red">&gt;</span>
+  Increment
+<span class="red">&lt;/button</span><span class="red">&gt;</span></code></pre>
+          <pre><code lang="js">{
+  count: <span class="orange">0</span>,
+  <span class="blue">increment</span>() {
+    <span class="orange">this</span>.<span class="blue">update</span>(<span class="green">&quot;count&quot;</span>, <span class="orange">this</span>.data.count + <span class="orange">1</span>);
+  }
+}</code></pre>
+        </div>
+        <div class="col">
+
+        </div>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/web/soldfile.js b/web/soldfile.js
@@ -0,0 +1,64 @@
+const Sold = require("sold");
+const Handlebars = require("handlebars");
+
+const STR_RE = /((?:&quot;)|'|`)((?:.|\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 = /(\&lt;\!\-\-(?:(?:.|\n)*)\-\-\&gt;)/g;
+const HTML_ATTRIBUTE_RE = /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']?/g;
+const HTML_TAG_RE = /(&lt;\/?[\w\d-]*?)(\s(?:.|\n)*?)?(\/?&gt;)/g;
+const escapeRE = /&(?:amp|gt|lt);/g;
+const escapeMap = {
+  "&amp;": '&',
+  "&gt;": '>',
+  "&lt;": '<'
+};
+
+const highlight = function(compiled) {
+  compiled = compiled.replace(STR_RE, "<span class=\"green\">$1$2$1</span>");
+
+  compiled = compiled.replace(HTML_COMMENT_RE, "<span class=\"gray\">$1</span>");
+  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 "<span class=\"orange\">" + name + "</span>" + value;
+        }
+      });
+    }
+
+    return "<span class=\"red\">" + start + "</span>" + content + "<span class=\"red\">" + end + "</span>";
+  });
+
+  compiled = compiled.replace(COMMENT_RE, "<span class=\"gray\">$1</span>");
+  compiled = compiled.replace(MULTILINE_COMMENT_RE, "<span class=\"gray\">$1</span>");
+
+  compiled = compiled.replace(SPECIAL_RE, "<span class=\"purple\">$1</span>");
+  compiled = compiled.replace(GLOBAL_VARIABLE_RE, "<span class=\"orange\">$1</span>");
+
+  compiled = compiled.replace(CONST_RE, "<span class=\"purple\">$1</span><span class=\"orange\">$2</span>");
+  compiled = compiled.replace(METHODS_RE, function(match, name) {
+    return "<span class=\"blue\">" + name + "</span>(";
+  });
+
+  return compiled;
+}
+
+Sold({
+  root: __dirname,
+  template: "template",
+  source: "src",
+  destination: '',
+  engine: "handlebars"
+});
diff --git a/web/template/index.html b/web/template/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="A minimal & fast UI library.">
+    <meta name="author" content="Kabir Shah">
+
+    <title>Moon</title>
+
+    <link rel="shortcut icon" href="./img/favicon.png"/>
+
+    <link rel="stylesheet" type="text/css" href="./css/lib/wing.min.css" />
+    <link rel="stylesheet" type="text/css" href="./css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="./css/index.css" />
+
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      ga('create', 'UA-70792533-14', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </head>
+
+  <body>
+    <section id="head" class="flex size-full align-center">
+      <div class="container-small">
+        <h1>A minimal & fast user interface library.</h1>
+        <a href="./guide/getting-started.html"><button>GET STARTED</button></a>
+        <a href="./guide/about.html"><button>ABOUT</button></a>
+      </div>
+    </section>
+
+    <section id="feature-minimal" class="container feature">
+      <h1>Minimal</h1>
+      <p>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 <b>Moon View Language</b> — 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>
+      <div class="row">
+        <div class="col">
+          <pre><code lang="mvl"><span class="red">&lt;p</span><span class="red">&gt;</span>Count: { count }<span class="red">&lt;/p</span><span class="red">&gt;</span>
+<span class="red">&lt;button</span> <span class="orange">@click</span>={ <span class="blue">increment</span>() }<span class="red">&gt;</span>
+  Increment
+<span class="red">&lt;/button</span><span class="red">&gt;</span></code></pre>
+          <pre><code lang="js">{
+  count: <span class="orange">0</span>,
+  <span class="blue">increment</span>() {
+    <span class="orange">this</span>.<span class="blue">update</span>(<span class="green">&quot;count&quot;</span>, <span class="orange">this</span>.data.count + <span class="orange">1</span>);
+  }
+}</code></pre>
+        </div>
+        <div class="col">
+
+        </div>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/web/template/post.html b/web/template/post.html