Site refactor #52

daviddias · 2017-06-13T00:42:50Z

Only the main should be in body. Anything that is template/design should go into a partials/template folder.

I will be pulling much more into partials.

When building pages I find it most useful to be able to compose the page out of templates, rather than override things from a layout. A layout either ends up encoding some assumptions, that some pages may not want, or is so thin that it's hardly worth making the dev fit 2 files in there head to guess what the resulting page will be.

-Original file line number
+Diff line change
@@ -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

-Original file line number
+Diff line change
@@ -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

-Original file line number
+Diff line change
@@ -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

-Original file line number
+Diff line change
@@ -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.

-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,4 @@ copyright = "libp2p - All rights reserved." @@
     canonifyurls = true
     relativeURLs = true
     baseURL = ""
+    googleAnalytics = "UA-96910779-2"

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Site refactor #52

Uh oh!

Diff view

Diff view

There are no files selected for viewing

daviddias Jun 13, 2017

Uh oh!

olizilla Jun 13, 2017

Uh oh!

Uh oh!

Uh oh!

-Original file line number
+Diff line change
@@ -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>

Site refactor #52

Uh oh!

Site refactor #52

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

daviddias Jun 13, 2017

Choose a reason for hiding this comment

Uh oh!

olizilla Jun 13, 2017

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!