Site refactor (#52)

* feat: all the things

.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig - http://EditorConfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[Makefile]
+indent_style = tab

.gitignore

@@ -1,28 +1,7 @@
-# Logs
-logs
-*.log
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+npm-debug.log
 node_modules
-public/
+public
+static/js/*.js
+static/css/*.css
+dev.pid
+auth.token

Makefile

@@ -0,0 +1,91 @@
+DOMAIN="libp2p.io"
+IPFSLOCAL="http://localhost:8080/ipfs/"
+IPFSGATEWAY="https://ipfs.io/ipfs/"
+NPMBIN=./node_modules/.bin
+NPM=npm
+OUTPUTDIR=public
+PIDFILE=dev.pid
+
+build: clean install lint js css minify
+	@hugo && \
+	echo "" && \
+	echo "Site built out to ./public dir"
+
+help:
+	@echo 'Makefile for a libp2p, a hugo built static site.                                                          '
+	@echo '                                                                                                          '
+	@echo 'Usage:                                                                                                    '
+	@echo '   make                                Build the optimised site to ./$(OUTPUTDIR)                         '
+	@echo '   make serve                          Preview the production ready site at http://localhost:1313         '
+	@echo '   make lint                           Check your JS and CSS are ok                                       '
+	@echo '   make js                             Browserify the *.js to ./static/js                                 '
+	@echo '   make css                            Compile the *.less to ./static/css                                 '
+	@echo '   make minify                         Optimise all the things!                                           '
+	@echo '   make dev                            Start a hot-reloding dev server on http://localhost:1313           '
+	@echo '   make dev-stop                       Stop the dev server                                                '
+	@echo '   make deploy                         Add the website to your local IPFS node                            '
+	@echo '   make publish-to-domain              Update $(DOMAIN) DNS record to the ipfs hash from the last deploy  '
+	@echo '   make clean                          remove the generated files                                         '
+	@echo '                                                                                                          '
+
+serve: install lint js css minify
+	hugo server
+
+node_modules:
+	$(NPM) i
+
+install: node_modules
+
+lint: install
+	$(NPMBIN)/standard && $(NPMBIN)/lessc --lint less/*.less
+
+js: install
+	$(NPMBIN)/browserify --noparse=jquery js/{index,implementations,bundles,media}.js -p [ factor-bundle -o static/js/index.js -o static/js/implementations.js -o static/js/bundles.js -o static/js/media.js ] -o static/js/common.js
+
+css: install
+	for f in less/*.less; do $(NPMBIN)/lessc $$f --autoprefix='> 1%, last 2 versions' --clean-css static/css/$$(basename $$f .less).css; done
+
+minify: install minify-js minify-img
+
+minify-js: install
+	find static/js -name '*.js' -exec $(NPMBIN)/uglifyjs {} --compress --output {} \;
+
+minify-img: install
+	find static/img -type d -exec $(NPMBIN)/imagemin {}/* --out-dir={} \;
+
+dev: install js css
+	[ ! -f $(PIDFILE) ] || rm $(PIDFILE) ; \
+	touch $(PIDFILE) ; \
+	($(NPMBIN)/watchify --noparse=jquery js/{index,implementations,bundles,media}.js -p [ factor-bundle -o static/js/index.js -o static/js/implementations.js -o static/js/bundles.js -o static/js/media.js ] -o static/js/common.js & echo $$! >> $(PIDFILE) ; \
+	$(NPMBIN)/nodemon --quiet --watch less --ext less --exec "make css" & echo $$! >> $(PIDFILE) ; \
+	hugo server & echo $$! >> $(PIDFILE))
+
+dev-stop:
+	touch $(PIDFILE) ; \
+	[ -z "`(cat $(PIDFILE))`" ] || kill `(cat $(PIDFILE))` ; \
+	rm $(PIDFILE)
+
+deploy:
+	ipfs swarm peers >/dev/null || (echo "ipfs daemon must be online to publish" && exit 1)
+	ipfs add -r -q $(OUTPUTDIR) | tail -n1 >versions/current
+	cat versions/current >>versions/history
+	@export hash=`cat versions/current`; \
+		echo ""; \
+		echo "published website:"; \
+		echo "- $(IPFSLOCAL)$$hash"; \
+		echo "- $(IPFSGATEWAY)$$hash"; \
+		echo ""; \
+		echo "next steps:"; \
+		echo "- ipfs pin add -r /ipfs/$$hash"; \
+		echo "- make publish-to-domain"; \
+
+publish-to-domain: auth.token versions/current
+	DNSIMPLE_TOKEN=$(shell cat auth.token) \
+	./dnslink.sh $(DOMAIN) $(shell cat versions/current)
+
+clean:
+	[ ! -d $(OUTPUTDIR) ] || rm -rf $(OUTPUTDIR) && \
+	[ ! -d static/js ] || rm -rf static/js/*.js && \
+	[ ! -d static/css ] || rm -rf static/css/*.css
+
+.PHONY: build help install lint js css minify minify-js minify-img  dev stopdev deploy publish-to-domain clean

README.md

@@ -1,22 +1,93 @@
-# [libp2p-website](libp2p.io)
-
-## Implementations & Bundles
-
-JSON arrays to update implementation & bundle status can be found in `/static/js/data`
-
-## Development
-
-```sh
-> hugo serve
-# ...
-Web Server is available at //localhost:1313/
-```
-
-## Publish
-
-```sh
-> hugo
-# ..
-
-> ipfs add -r public
-```
+# [libp2p-website](libp2p.io)
+
+[![](https://img.shields.io/badge/made%20by-Protocol%20Labs-blue.svg?style=flat-square)](http://ipn.io)
+[![](https://img.shields.io/badge/project-libp2p-blue.svg?style=flat-square)](http://github.com/libp2p/libp2p)
+[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
+
+> Official website for libp2p http://libp2p.io
+
+This repository contains the source code for the libp2p website available at http://libp2p.io
+
+This project builds out a static site to explain libp2p, ready for deployment on ipfs. It uses `hugo` to glue the html together. It provides an informative, public-facing website. The most important things are the words, concepts and links it presents.
+
+Much of the site content is data-driven, take a look at the `data` dir where find the data behind the implementations and bundles information as json.
+
+## Install
+
+```sh
+git clone https://github.com/libp2p/website
+```
+
+## Usage
+
+To deploy the site libp2p.io, run:
+
+```sh
+# Build out the optimised site to ./public, where you can check it locally.
+make
+
+# Add the site to your local ipfs, you can check it via /ipfs/<hash>
+make deploy
+
+# Save your dnsimple api token as auth.token
+cat "<api token here>" > auth.token
+
+# Update the dns record for libp2p to point to the new ipfs hash.
+make publish-to-domain
+```
+
+The following commands are available:
+
+### `make`
+
+Build the optimised site to the `./public` dir
+
+### `make serve`
+
+Preview the production ready site at http://localhost:1313 _(requires `hugo` on your `PATH`)_
+
+### `make dev`
+
+Start a hot-reloading dev server on http://localhost:1313 _(requires `hugo` on your `PATH`)_
+
+### `make dev-stop`
+
+Stop that server (and take a break!)
+
+### `make minfy`
+
+Optimise all the things!
+
+### `make deploy`
+
+Build the site in the `public` dir and add to `ipfs` _(requires `hugo` & `ipfs` on your `PATH`)_
+
+### `make publish-to-domain` :rocket:
+
+Update the DNS record for `libp2p.io`.  _(requires an `auto.token` file to be saved in the project root.)_
+
+If you'd like to update the dnslink TXT record for another domain, pass `DOMAIN=<your domain here>` like so:
+
+```sh
+make publish-to-domain DOMAIN=tableflip.io
+```
+
+---
+
+See the `Makefile` for the full list or run `make help` in the project root.
+
+## Dependencies
+
+* `hugo` to build website
+* `ipfs` to deploy changes
+* `jq`, `curl` and an `auth.token` file in the project root containing your dnsimple api token to update the dns.
+
+All other dependencies are pulled from `npm` and the Makefile will run `npm install` for you because it's nice like that.
+
+## Contribute
+
+Please do! Check out [the issues](https://github.com/libp2p/website/issues), or open a PR!
+
+Check out our [notes on contributing ](https://github.com/libp2p/js-libp2p#contribute) for more information on how we work, and about contributing in general. Please be aware that all interactions related to libp2p are subject to the IPFS [Code of Conduct](https://github.com/ipfs/community/blob/master/code-of-conduct.md).
+
+Small note: If editing the README, please conform to the [standard-readme](https://github.com/RichardLitt/standard-readme) specification.

config.toml

@@ -5,3 +5,4 @@ copyright = "libp2p - All rights reserved."
 canonifyurls = true
 relativeURLs = true
 baseURL = ""
+googleAnalytics = "UA-96910779-2"

content/bundles.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  {{ partial "head.html" . }}
+  <link rel="stylesheet" type="text/css" href="/css/bundles.css">
+  <title>Bundles - libp2p</title>
+</head>
+<body>
+
+{{ partial "topbar.html" . }}
+
+<main>
+    <article class="center bundles">
+        <header>
+            <h2>Bundles.</h2>
+        </header>
+        <div class="wrap">
+            <p> libp2p provides ready-to-use bundles for different use cases and different languages. You can use these
+                to get all the functionality in one package, instead of including and bundling the different modules
+                yourself. See it as a quickstart.</p>
+            <div class="links">
+                <div class="active-link">
+                    <div class="copy-block"></div>
+                    <i class="fa fa-angle-down" aria-hidden="true"></i>
+                </div>
+                <div class="columns">
+                    <div class="column col1"></div>
+                    <div class="column col2"></div>
+                    <div class="column col3"></div>
+                    <div class="column col4"></div>
+                </div>
+            </div>
+        </div>
+        <div class="triangle white"></div>
+    </article>
+
+    <article class="center bundles-info">
+        <div class="wrap">
+
+          {{ range where $.Site.Data.bundles "status" "live" }}
+            {{ partial "bundle.html" . }}
+          {{ end }}
+
+          <section class="coming-soon">
+            {{ range where $.Site.Data.bundles "status" "coming-soon" }}
+              <div class="card">
+                <div class="rectangle coming-soon" title="{{ .name }} bundle coming soon">
+                  <div class="img">
+                    <img src="{{ .image }}" alt="{{ .name }}">
+                  </div>
+                  <div class="text">In progress...</div>
+                </div>
+              </div>
+            {{ end }}
+            <div class="card empty">
+              <div class="rectangle empty">
+                <img src="../img/img4.png" alt="A 3 cube tetris block in a minimal L shape, pointing upwards."/>
+              </div>
+            </div>
+            <div class="card empty">
+              <div class="rectangle empty">
+                <img src="../img/img5.png" alt="A single cube, corner pointing upwards; The isomorphic perspective revealing an hexangonal outline." />
+              </div>
+            </div>
+          </section>
+
+        </div>
+        <div class="triangle grey"></div>
+    </article>
+
+</main>
+
+{{ partial "footer.html" . }}
+
+<script type="text/javascript" src="/js/common.js"></script>
+<script type="text/javascript" src="/js/bundles.js"></script>
+
+</body>
+</html>