Initial styling

README.md

@@ -4,4 +4,8 @@ This is still in a very, very early stage. But you can still see the current dep
 
 ## Contribute
 
-Every push to the `master` branch here on GitHub deploys a new version. So we have to make sure that the `master` branch is always clean and ready to deploy. Thus, we will make heavy use of pull requests (so, do always create feature branches `git checkout -b new-feature`) and let [Travis CI](https://travis-ci.org/FloEdelmann/open-fixture-library) check that everything new is passing all tests.
+Every push to the `master` branch here on GitHub deploys a new version. So we have to make sure that the `master` branch is always clean and ready to deploy. Thus, we will make heavy use of pull requests (so, do always create feature branches `git checkout -b new-feature`) and let [Travis CI](https://travis-ci.org/FloEdelmann/open-fixture-library) check that everything new is passing all tests.
+
+Locally, you can test every change by running `node index.js` (or `heroku local`, which lets you use environment variables in the `.env` file) and opening [localhost:5000](http://localhost:5000/).
+
+Every contribution is welcome, even in this early stage!

app.json

@@ -1,8 +1,8 @@
 {
-  "name": "Start on Heroku: Node.js",
-  "description": "A barebones Node.js app using Express 4",
-  "repository": "https://github.com/heroku/node-js-getting-started",
-  "logo": "http://node-js-sample.herokuapp.com/node.svg",
-  "keywords": ["node", "express", "static"],
+  "name": "Open Fixture Library",
+  "description": "An open source library for lighting technology's fixture definition files",
+  "repository": "https://github.com/FloEdelmann/open-fixture-library",
+  "logo": "http://open-fixture-library.herokuapp.com/ofl-logo.svg",
+  "keywords": ["dmx", "dmx512", "ecue", "fixture", "fixtures", "lighting", "qlc"],
   "image": "heroku/nodejs"
 }

index.js

@@ -1,5 +1,5 @@
-var express = require('express');
-var app = express();
+const express = require('express');
+const app = express();
 
 app.set('port', (process.env.PORT || 5000));
 
@@ -9,16 +9,27 @@ app.use(express.static(__dirname + '/public'));
 app.set('views', __dirname + '/views');
 app.set('view engine', 'ejs');
 
-app.get('/', function(request, response) {
-  response.render('pages/index', {
-    title: 'Open Fixture Library'
-  });
-});
-
-app.get('/about', function(request, response) {
-  response.render('pages/about', {
-    title: 'About - Open Fixture Library'
-  });
+const staticPages = {
+  '/index': 'Open Fixture Library',
+  '/about': 'About - Open Fixture Library',
+  '/manufacturers': 'Manufacturers - Open Fixture Library',
+  '/categories': 'Categories - Open Fixture Library'
+};
+
+app.use(function(request, response, next) {
+  let page = request.originalUrl;
+  if (page == '/') {
+    page = '/index';
+  }
+
+  if (page in staticPages) {
+    response.render('pages' + page, {
+      title: staticPages[page]
+    });
+  }
+  else {
+    next();
+  }
 });
 
 app.get('/search', function(request, response) {
@@ -27,18 +38,12 @@ app.get('/search', function(request, response) {
   });
 });
 
-app.get('/manufacturers', function(request, response) {
-  response.render('pages/manufacturers', {
-    title: 'Manufacturers - Open Fixture Library'
-  });
-});
-
-app.get('/categories', function(request, response) {
-  response.render('pages/categories', {
-    title: 'Categories - Open Fixture Library'
-  });
-});
-
 app.listen(app.get('port'), function() {
   console.log('Node app is running on port', app.get('port'));
 });
+
+app.use(function(request, response, next) {
+  response.status(404).render('pages/404', {
+    title: 'Page not found - Open Fixture Library'
+  })
+});

package.json

@@ -1,27 +1,30 @@
 {
-  "name": "node-js-getting-started",
-  "version": "0.2.5",
-  "description": "A sample Node.js app using Express 4",
+  "name": "open-fixture-library",
+  "version": "0.0.1",
+  "description": "An open source library for lighting technology's fixture definition files",
   "engines": {
-    "node": "5.9.1"
+    "node": "6.10.0"
   },
   "main": "index.js",
   "scripts": {
     "start": "node index.js"
   },
   "dependencies": {
-    "cool-ascii-faces": "1.3.4",
-    "ejs": "2.4.1",
-    "express": "4.13.3"
+    "ejs": "2.5.6",
+    "express": "4.14.1"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/heroku/node-js-getting-started"
+    "url": "https://github.com/FloEdelmann/open-fixture-library"
   },
   "keywords": [
-    "node",
-    "heroku",
-    "express"
+    "dmx",
+    "dmx512",
+    "ecue",
+    "fixture",
+    "fixtures",
+    "lighting",
+    "qlc"
   ],
-  "license": "MIT"
-}
+  "license": "GPL-3"
+}

public/style.css

@@ -0,0 +1,112 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  background: #fff;
+  font: 11pt/2 'Droid Sans','Source Sans Pro',Ubuntu,Helvetica,Arial,sans-serif;
+  color: #222;
+}
+
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 70px;
+  background: #fafafa;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
+}
+
+header>nav {
+  max-width: 1000px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+}
+
+header .home-logo {
+  flex-grow: 0;
+  flex-shrink: 0;
+  text-indent: -9999px;
+  display: inline-block;
+  width: 122px;
+  background: url(ofl-logo.svg) center center no-repeat;
+  background-origin: content-box;
+}
+header .home-logo>svg {
+  height: 50px;
+  vertical-align: middle;
+}
+
+header form {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+header .right-nav {
+  flex-grow: 0;
+  white-space: nowrap;
+}
+
+header input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding: 5px;
+  background: #fff;
+  border: 1px solid #cfd6e6;
+  border-radius: 3px;
+  font-size: 0.95rem;
+  line-height: 1.2;
+}
+
+header input:focus {
+  border-color: #5294e2;
+}
+
+header button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  margin-left: 4px;
+  padding: 5px 1ex;
+  background: #fbfbfb;
+  border: 1px solid #cfd6e6;
+  border-radius: 3px;
+  font-size: 0.95rem;
+  line-height: 1.2;
+}
+header button::-moz-focus-inner {
+  border: 0;
+}
+
+header button:hover,
+header button:focus {
+  background: #fff;
+  border-color: #abb1be;
+}
+
+header button:active {
+  background: #5294e2;
+  color: #fff;
+}
+
+header a {
+  display: inline-block;
+  line-height: 70px;
+  padding: 0 1ex;
+  text-decoration: none;
+  color: inherit;
+}
+header a:hover,
+header a:focus {
+  background-color: #e8e8e8;
+  color: #000;
+}
+
+#main {
+  max-width: 1000px;
+  margin: 0 auto;
+  min-height: calc(100vh - 70px - 10px);
+  overflow: hidden;
+  padding: 70px 10px 10px;
+}

views/pages/404.ejs

@@ -0,0 +1,7 @@
+<% include ../partials/header.ejs %>
+
+<h1>404 - Not found</h1>
+
+<p>The requested page was not found. Maybe you've got the wrong URL? If not, consider <a href="https://github.com/FloEdelmann/open-fixture-library/issues">filing a bug</a>.</p>
+
+<% include ../partials/footer.ejs %>

views/pages/index.ejs

@@ -1,6 +1,11 @@
 <% include ../partials/header.ejs %>
 
-<h1>Open fixture library</h1>
-<p>Home page</p>
+<h1>Open Fixture Library</h1>
+
+<p>To use lighting control software like <a href="http://www.qlcplus.org/">QLC+</a> or <a href="http://www.ecue.de/">e:cue</a>, you need fixture definition files for your specific hardware. Those can be difficult to create or find for your software or they may be wrong because nobody peer-reviewed them.</p>
+
+<p><abbr title="Open Fixture Library">OFL</abbr> tries to solve those problems by collecting fixture definitions and making them downloadable in various formats. Everybody can <a href="https://github.com/FloEdelmann/open-fixture-library">contribute</a> and help to improve!</p>
+
+<p>The project is still in a very early status, but you can still check out the progress on <a href="https://github.com/FloEdelmann/open-fixture-library">GitHub</a> and also already report issues or feature requests or even contribute some code. Thanks!</p>
 
 <% include ../partials/footer.ejs %>

views/partials/footer.ejs

@@ -1,2 +1,3 @@
+</div> <!-- #main -->
 </body>
 </html>

views/partials/header.ejs

@@ -7,16 +7,21 @@
 </head>
 <body>
 <header>
-<a href="/" class="home-logo">Open Fixture Library</a>
+<nav>
+
+<a href="/" class="home-logo" title="Open Fixture Library">Open Fixture Library</a>
 
 <form action="/search">
-  <input type="search" name="q" placeholder="Search fixture" />
-  <button type="submit">Search</button>
+<input type="search" name="q" placeholder="Search fixture" />
+<button type="submit">Search</button>
 </form>
 
-<ul>
-  <li><a href="/manufacturers">Manufacturers</a></li>
-  <li><a href="/categories">Categories</a></li>
-  <li><a href="/about">About</a></li>
-</ul>
-</header>
+<div class="right-nav">
+<a href="/manufacturers">Manufacturers</a>
+<a href="/categories">Categories</a>
+<a href="/about">About</a>
+</div>
+
+</nav>
+</header>
+<div id="main">