Browse Source

Environments, production build (fixes #3)

* Use 'static' env for prod builds
* Add build script
* Ignore development build dir, remove it from Git
pull/6/head
raucao 7 years ago
parent
commit
153e5a8fbe
  1. 1
      .gitignore
  2. 3
      build
  3. 0
      dist/img/lagoon-close-02.jpg
  4. 39
      dist/index.html
  5. 21
      dist/styles/style.css
  6. 6
      docpad.coffee
  7. 72
      out/index.html
  8. 18
      src/render/index.html.eco
  9. 23
      src/render/styles/style.css.scss

1
.gitignore

@ -1 +1,2 @@
node_modules
out

3
build

@ -0,0 +1,3 @@
#!/bin/sh
docpad generate --env static

0
out/img/lagoon-close-02.jpg → dist/img/lagoon-close-02.jpg

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

39
dist/index.html

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kosmos</title>
<!--[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="generator" content="DocPad v6.78.1" />
<link rel="stylesheet" href="/styles/style.css" />
<link href='https://fonts.googleapis.com/css?family=Raleway:300|Abel' rel='stylesheet' type='text/css'>
</head>
<body>
<section id="teaser">
<h1>Kosmos</h1>
<h2>Open-source group communication for the 21st century</h2>
<!--
<p>
Kosmos is a new kind of team communication service. All of it is based on
open standards, data formats and software&ndash;combining decades-old,
tried-and-true technologies with bleeding-edge, innovative ones.
</p>
<p>
The first version of Kosmos will be a modern, beautiful, easy-to-use,
offline-capable, always-on IRC client with added audio/video capabilities,
significantly lowering the barrier of entry for participating in open-source
project communication.
</p>
<p>
At the moment, Kosmos is pre-alpha work in progress.
</p>
-->
</section>
<footer>
<p>Image: NASA / ESA</p>
</footer>
</body>
</html>

21
out/styles/style.css → dist/styles/style.css

@ -16,11 +16,15 @@ body {
background-repeat: no-repeat;
color: #fff;
font-family: Abel;
font-size: 18px;
text-rendering: optimizeLegibility; }
font-size: 24px;
text-rendering: optimizeLegibility;
text-align: center; }
section#teaser {
height: 100%;
width: 768px;
max-width: 95%;
margin: 0 auto;
text-align: center;
display: -webkit-box;
display: -moz-box;
@ -73,11 +77,18 @@ section#teaser {
flex-grow: 0;
-ms-flex-positive: 0; }
section#teaser h1 {
text-transform: uppercase;
font-size: 72px;
display: inline-block;
margin-bottom: 1rem;
font-size: 96px;
font-family: Raleway;
font-weight: 300;
margin-bottom: 1rem; }
text-transform: uppercase; }
section#teaser h2 {
margin-bottom: 4rem;
font-weight: 300;
font-size: 32px; }
section#teaser p {
margin-bottom: 2rem; }
footer {
position: absolute;

6
docpad.coffee

@ -1,13 +1,15 @@
# DocPad Configuration File
# http://docpad.org/docs/config
# Define the DocPad Configuration
docpadConfig = {
plugins:
nodesass:
outputStyle: 'nested'
bourbon: true
environments:
static:
outPath: 'dist'
}
# Export the DocPad Configuration
module.exports = docpadConfig

72
out/index.html

@ -1,72 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kosmos</title>
<!--[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="generator" content="DocPad v6.78.1" />
<style >html.wait {
cursor: wait !important;
opacity: 0;
transition: opacity 0.5s ease;
}</style><link rel="stylesheet" href="/styles/style.css" />
<link href='https://fonts.googleapis.com/css?family=Raleway:300|Abel' rel='stylesheet' type='text/css'>
</head>
<body>
<section id="teaser">
<h1>Kosmos</h1>
<p>Open-source group communication for the 21st century</p>
</section>
<script >(function(){
/* Did we just livereload? */
var log = !!(localStorage && console && console.log && true);
if ( log && localStorage.getItem('/docpad-livereload/reloaded') === 'yes' ) {
localStorage.removeItem('/docpad-livereload/reloaded');
console.log('LiveReload completed at', new Date())
}
/* Listen for the regenerated event and perform a reload of the page when the event occurs */
var listen = function(){
var primus = new Primus('/docpad-livereload');
primus.on('data', function(data){
if ( data && data.message ) {
if ( data.message === 'generateBefore' ) {
if ( log ) {
console.log('LiveReload started at', new Date());
}
if ( typeof document.getElementsByTagName !== 'undefined' ) {
document.getElementsByTagName('html')[0].className += ' wait';
}
}
else if ( data.message === 'generateAfter' ) {
if ( log ) {
localStorage.setItem('/docpad-livereload/reloaded', 'yes');
}
document.location.reload();
}
}
});
};
/* Inject socket into our page */
var inject = function(){
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = 'async';
t.src = '/primus/primus.js';
t.onload = listen;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
};
if ( typeof Primus !== 'undefined' ) {
listen();
} else {
inject();
}
})();</script>
<footer>
<p>Image: NASA / ESA</p>
</footer>
</body>
</html>

18
src/render/index.html.eco

@ -6,5 +6,21 @@ isPage: true
<section id="teaser">
<h1><%= @document.title %></h1>
<p>Open-source group communication for the 21st century</p>
<h2>Open-source group communication for the 21st century</h2>
<!--
<p>
Kosmos is a new kind of team communication service. All of it is based on
open standards, data formats and software&ndash;combining decades-old,
tried-and-true technologies with bleeding-edge, innovative ones.
</p>
<p>
The first version of Kosmos will be a modern, beautiful, easy-to-use,
offline-capable, always-on IRC client with added audio/video capabilities,
significantly lowering the barrier of entry for participating in open-source
project communication.
</p>
<p>
At the moment, Kosmos is pre-alpha work in progress.
</p>
-->
</section>

23
src/render/styles/style.css.scss

@ -19,12 +19,16 @@ body {
background-repeat: no-repeat;
color: #fff;
font-family: Abel;
font-size: 18px;
font-size: 24px;
text-rendering: optimizeLegibility;
text-align: center;
}
section#teaser {
height: 100%;
width: 768px;
max-width: 95%;
margin: 0 auto;
text-align: center;
@include display(flex);
@ -36,11 +40,22 @@ section#teaser {
@include flex-grow(0);
h1 {
text-transform: uppercase;
font-size: 72px;
display: inline-block;
margin-bottom: 1rem;
font-size: 96px;
font-family: Raleway;
font-weight: 300;
margin-bottom: 1rem;
text-transform: uppercase;
}
h2 {
margin-bottom: 4rem;
font-weight: 300;
font-size: 32px;
}
p {
margin-bottom: 2rem;
}
}

Loading…
Cancel
Save