main page and responsive styling

7 files changed, 111 insertions, 21 deletions

diff --git a/Dockerfile b/Dockerfile
index 6374991..5f92039 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,8 +3,7 @@ FROM nickblah/lua:5.3-luarocks-stretch AS build-env
 WORKDIR /build
 RUN apt-get update && \
     apt-get install -y --allow-unauthenticated \
-      build-essential m4 libmarkdown2-dev
-
+      build-essential m4 libmarkdown2-dev git
 RUN luarocks install discount DISCOUNT_INCDIR=/usr/include/x86_64-linux-gnu && \
     luarocks install moonscript
 
diff --git a/Makefile b/Makefile
index 3a91ad9..f574ea8 100644
--- a/Makefile
+++ b/Makefile
@@ -1,20 +1,25 @@
 MODULES=$(wildcard lib/*.moon) lib/midi/launchctl.moon
 MODREFS=$(MODULES:lib/%.moon=docs/reference/%.html)
+DEPS=core/version.moon extra/docs.moon extra/layout.moon extra/dom.moon
 
-.PHONY: docs clean
+.PHONY: docs release clean
 
 docs: docs/index.html docs/guide.html $(MODREFS) docs/reference/index.html
 
-docs/%.html: docs/%.md extra/docs.moon extra/layout.moon
+release:
+	rm -f core/version.moon
+	extra/git-version.sh >core/version.moon
+
+docs/%.html: docs/%.md $(DEPS)
 	@echo "building page $<"
 	moon extra/docs.moon $@ markdown $<
 
-docs/reference/%.html: lib/%.moon extra/docs.moon extra/layout.moon
+docs/reference/%.html: lib/%.moon $(DEPS) 
 	@echo "building docs for $<"
 	@mkdir -p `dirname $@`
 	moon extra/docs.moon $@ module lib.$(*:/=.) $*
 
-docs/reference/index.html: $(MODREFS) extra/docs.moon extra/layout.moon
+docs/reference/index.html: $(MODREFS) $(DEPS)
 	moon extra/docs.moon $@ reference $(MODULES)
 
 clean:
diff --git a/core/version.moon b/core/version.moon
new file mode 100644
index 0000000..029dd54
--- /dev/null
+++ b/core/version.moon
@@ -0,0 +1,5 @@
+{
+  tag: "v0.0"
+  rev_short: "4742960"
+  rev_long: "4742960c455251f306bf271d50f69724b8beba04"
+}
diff --git a/docs/index.md b/docs/index.md
index f8a5cdd..46d5b86 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,6 +1,25 @@
 # `alive` - livecoding with persistent expressions
 
-<iframe allowfullscreen="true" frameborder="0" height="315" width="560"
-  src="https://www.youtube.com/embed/z0XZYnY3Evc"></iframe>
+`alivecoding` is a new type of programming environment and language
+specifically designed for (live) performances where code is edited while it is
+running, such as *livecoding* or *algorave* music performances.
 
-*(this site is currently under construction)*
+<iframe class="embed" allowfullscreen="true" frameborder="0"
+  height="315" width="560" src="https://www.youtube.com/embed/z0XZYnY3Evc"
+></iframe>
+
+Unlike other livecoding languages, programming with `alivecoding` does not
+mean evaluating separate pieces of code and sending individual commands to the
+programming environment. Instead, you can keep editing the program as a whole,
+and whenever you save the file `alive` will apply your changes to the running
+system seamlessly, without resetting any part of your program (unless you want
+it to).
+
+If you want to learn more or try out `alivecoding` yourself, the
+[getting started][guide] page is a good place to start. On the other hand, if
+you are a curious about the motivations and concepts behind `alivecoding`,
+you can find more in-depth information on these topics in the
+['persistent expressions' introductory article][rationale].
+
+[rationale]: https://s-ol.nu/alivecoding
+[guide]: guide.html
diff --git a/docs/style.css b/docs/style.css
index 809ee05..1d326a9 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -13,12 +13,18 @@ body {
   font-family: 'Source Sans Pro', sans-serif;
   color: #222222;
 }
+@media (max-width: 699px) {
+  body {
+    width: 100vw;
+  }
+}
 
 article {
   padding: 3rem 2em 1em;
 }
 
 code {
+  font-size: 0.9em;
   font-family: 'Source Code Pro', monospace;
 }
 
@@ -36,32 +42,58 @@ ul {
   padding-left: 0.6em;
 }
 
-nav {
+header {
   position: fixed;
   width: inherit;
   height: 4rem;
   top: 0;
-  padding: 1em 2em 4px;
+  padding: 1rem 2rem 4px;
   background: #eeeeee;
   box-sizing: border-box;
 }
 
-nav div {
+nav {
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
 
   border-bottom: 1px solid #222222;
   padding-bottom: 1em;
 }
 
-nav i {
-  flex: 1;
+nav span,
+nav a {
+  flex: 0 0 auto;
 }
 
-nav a {
+nav > a {
   margin-left: 1rem;
 }
 
+nav span a {
+  font-weight: bold;
+  text-decoration: none;
+}
+
+nav .grow {
+  flex: 1;
+}
+
+footer {
+  font-size: 0.8em;
+  padding: 0 2rem;
+}
+
+footer > div {
+  border-top: 1px solid #222222;
+  text-align: right;
+  padding: 0.5rem 0;
+}
+
+.embed {
+  box-sizing: border-box;
+  width: 100%;
+}
+
 .def {
   margin-top: 0.5rem;
 }
diff --git a/extra/git-version.sh b/extra/git-version.sh
new file mode 100755
index 0000000..e53ddbc
--- /dev/null
+++ b/extra/git-version.sh
@@ -0,0 +1,13 @@
+#!/bin/sh
+
+TAG=`git describe --abbrev=0 HEAD`
+REV_SHORT=`git rev-parse --short HEAD`
+REV_LONG=`git rev-parse HEAD`
+
+cat <<EOF
+{
+  tag: "${TAG}"
+  rev_short: "${REV_SHORT}"
+  rev_long: "${REV_LONG}"
+}
+EOF
diff --git a/extra/layout.moon b/extra/layout.moon
index 71bbfb2..4dc67c2 100644
--- a/extra/layout.moon
+++ b/extra/layout.moon
@@ -1,3 +1,5 @@
+v = require 'core.version'
+
 -- render an ALV Value to a HTML string
 render = (name, value, prefix=nil) ->
   import div, label, code, ul, li, i, a, p from require 'extra.dom'
@@ -38,11 +40,16 @@ r = (name, page='') ->
 --  - title
 --  - body
 layout = (opts) ->
-  import nav, div, span, b, code, i, a, article from require 'extra.dom'
+  import header, footer, nav, div, span, b, code, a, article from require 'extra.dom'
 
-  navigation = nav div {
-    span (b 'alive'), ' ', (code 'v0.0'), ' documentation'
-    i!
+  head = header nav {
+    span {
+      a 'alive', href: abs 'index.html'
+      ' '
+      code v.tag
+      ' documentation'
+    }
+    div class: 'grow'
     a 'home', href: abs 'index.html'
     a 'getting started', href: abs 'guide.html'
     a 'reference', href: abs 'reference/index.html'
@@ -52,17 +59,27 @@ layout = (opts) ->
     "#{opts.title} - alive"
   else
     "alive documentation"
+  foot = footer div {
+    'alive '
+    a (code v.tag), href: "https://git.s-ol.nu/alivecoding/#{v.tag}"
+    ', generated '
+    os.date '!%Y-%m-%d %T'
+  }
 
   "<!DOCTYPE html>
 <html>
   <head>
+    <meta charset=\"UTF-8\">
+    <meta name=\"viewport\" content=\"width=640\">
+
     <title>#{title}</title>
     <link rel=\"stylesheet\" href=\"#{abs 'style.css'}\">
     #{opts.css or ''}
   </head>
   <body>
-    #{navigation}
+    #{head}
     #{body}
+    #{foot}
   </body>
 </html>"