Add some scaffolding for a gallery page

mrmrs · mrmrs · commit 6d8c1c5b7f39 · 2016-11-18T12:33:07.000Z
diff --git a/gallery/index.html b/gallery/index.html
diff --git a/src/gallery-build.js b/src/gallery-build.js
@@ -0,0 +1,35 @@
+var _ = require('lodash')
+var fs = require('fs')
+var filesize = require('filesize')
+var camelize = require('camelize')
+var cssstats = require('cssstats')
+
+module.exports = function () {
+  return renderGallery()
+}
+
+function renderGallery () {
+  var tachyons = require('../package.json')
+
+  var css = fs.readFileSync('./css/tachyons.css', 'utf8')
+  var cssMin = fs.readFileSync('./css/tachyons.min.css', 'utf8')
+
+  var obj = cssstats(cssMin)
+  var size = filesize(obj.gzipSize)
+
+  var template = fs.readFileSync('./src/templates/gallery.html', 'utf8')
+  var head = fs.readFileSync('./src/templates/head.html', 'utf8')
+  var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
+  var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
+
+  var tpl = _.template(template)
+  var html = tpl({
+    size: size,
+    version: tachyons.version,
+    siteFooter: siteFooter,
+    siteHeader: siteHeader,
+    head: head,
+  })
+
+  fs.writeFileSync('./gallery/index.html', html)
+}
diff --git a/src/templates/gallery.html b/src/templates/gallery.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>
+      TACHYONS - Gallery
+    </title>
+    <meta name="description" content="Gallery of sites that use Tachyons">
+    <%= head %>
+  </head>
+  <body class="w-100 sans-serif">
+    <%= siteHeader %>
+    <main class="w-100 bt b--black-10 bg-white">
+      <section class="bg-black-0125 w-100 pb4 pb5-ns">
+          <header class="ph3 ph5-ns w-100 bg-transparent pv3 mb4 mb5-ns bb b--black-10 overflow-auto">
+            <div class="nowrap mw9 center">
+              <a title="Getting Started" href="#getting-started"
+                  class="pb2-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
+                Getting Started
+              </a>
+              <a title="Principles" href="#principles"
+                  class="pb2-ns f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
+                Principles
+              </a>
+              <a title="Features" href="#features"
+                  class="pb2-ns f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
+                Features
+              </a>
+              <a title="Style Guide" href="#style"
+                  class="pb2-ns f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
+                Style Guide 
+              </a>
+              <a title="Testimonials" href="#testimonials"
+                  class="pb2-ns f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
+                Testimonials
+              </a>
+            </div>
+          </header>
+      </section>
+      <section>
+          <h3>Gallery</h3>
+          <article>
+              <h4></h4> 
+          </article>
+      </section>
+  </main>
+  <%= siteFooter %>
+
+  <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','//www.google-analytics.com/analytics.js','ga');
+
+ga('create', 'UA-55773803-1', 'auto');
+ga('send', 'pageview');
+
+  </script>
+</body>
+</html>
