💄📝 Add basic static layout + readme/contributing

Squashed commit of the following:

commit f32ca088e9b4d9c6b6edad5271757d886f7177e8
Author: Ben Beltran <redacted>
Date:   Sun Jul 2 21:30:20 2017 -0500

    Add CHANGELOG

commit f5691219950c7546343d42791034cdbba748609b
Author: Ben Beltran <redacted>
Date:   Sun Jul 2 21:30:00 2017 -0500

    Add mac files, and generated files to ignore

commit 88ba8c1bed6a6336e1c0ebb5e5d42210a20422a7
Author: Ben Beltran <redacted>
Date:   Sun Jul 2 21:28:34 2017 -0500

    Add contributing guide

commit 160eae6998e2559b6b9e3b21473c930b10278739
Author: Ben Beltran <redacted>
Date:   Sun Jul 2 21:24:21 2017 -0500

    Add readme

commit 36760ff85dbd335afe2c5d9ea9596f81a0ca88a3
Author: Ben Beltran <redacted>
Date:   Sun Jul 2 21:11:47 2017 -0500

    💄 Add static layout

diff --git a/.gitignore b/.gitignore
index 00cbbdf53f6c487c8392d936ce7225824c11446e..719089dc13e988a27dedd95ba9a5cd939eff7258 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -57,3 +57,12 @@ typings/
 # dotenv environment variables file
 .env
 
+# Apple files
+.DS_Store
+
+# Data store
+_posts
+
+# Generated files
+static/assets
+static/index.html

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644 (file)
index 0000000..a695952
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,14 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/)
+and this project adheres to [Semantic Versioning](http://semver.org/).
+
+## [Unreleased]
+### Added
+- Static HTML / CSS
+- Simple contributing guidelines
+- This CHANGELOG
+- A Readme
+
+[Unreleased]: https://github.com/rbdr/blog/compare/master...develop

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644 (file)
index 0000000..fe0c941
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,24 @@
+# Contributing to Blog
+
+This blog is a personal project, as such it may not be in the best
+condition for anyone to jump in or roll their own. However, if you find
+this useful and would like to send some improvements, please feel free
+to do so. I really appreciate any contribution!
+
+## The objective of blog
+
+The goal of blog is to have an ephemeral static blog that is generated from
+markdown files and their linked assets. It has a max number of posts at
+a time (the default is 3), and every time you publish it removes
+another.
+
+## How to contribute
+
+Above All: Be nice, always.
+
+* Ensure the linter shows no warnings or errors
+* Don't break the CI
+* Make the PRs according to [Git Flow][gitflow]: (features go to
+  develop, hotfixes go to master)
+
+[gitflow]: https://github.com/nvie/gitflow

diff --git a/README.md b/README.md
index 2634854dd4ec037996a2c2b1ccf78d2b40e52431..7f7903ab8c57a2a02288312db37cfe9db0334a44 100644 (file)
--- a/README.md
+++ b/README.md
@@ -1,2 +1,40 @@
 # blog
-A temporary blog
+
+Blog at unlimited.pizza -> Only 
+
+## How to install
+
+`npm install -g .` will expose the `blog` binary to your CLI.
+
+## How to add a new entry
+
+Create a directory with a `.md` markdown file, and an `/assets`
+directory with anything you want in there. This can be in any directory.
+
+```
+.
+└── this-is-an-example-post
+    ├── assets
+    │   └── example.png
+    └── this-is-an-example-post.md
+```
+
+You can add this to the blog using the following command, it will shift
+all entries and remove the oldest one if limit of posts is reached
+(defualts to 3):
+
+`blog --add path/to/blog_post`
+
+These commands will regenerate the static files. At that point you can
+preview your blog by serving the files on the `static` directory. 
+
+If you need to make corrections use:
+
+`blog --update path/to/blog_post`
+
+This will replace the latest with the contents of the `path` without
+shifting the existing entries.
+
+`blog --publish`
+
+Will publish the blog.

diff --git a/css/style.css b/css/style.css
new file mode 100644 (file)
index 0000000..aeda780
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,52 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-image: url('/images/header_background.png');
+  background-size: auto 300px;
+  background-attachment: fixed;
+  line-height: 1.45;
+}
+
+header {
+  background-image: url('/images/header_foreground.png');
+  background-repeat: no-repeat;
+  background-size: auto 300px;
+  height: 300px;
+}
+
+header a {
+  color: transparent;
+  display: block;
+  max-height: 500px;
+}
+
+main {
+  background-color: #fff;
+  padding: 1.414em;
+}
+
+h1, h2, h3, h4 {
+  margin: 1.414em 0 0.5em;
+  font-weight: 400;
+}
+
+p, ul, ol, img {
+  width: 100%;
+  margin: 1.414em 0;
+  max-width: 30em;
+}
+
+ul, ol { margin-left: 1.414em; }
+
+h1 { font-size: 3.998em; }
+h2 { font-size: 2.827em; }
+h3 { font-size: 1.999em; }
+h4 { font-size: 1.414em; }
+
+footer {
+  background-color: pink;
+  padding: 1.414em;
+}

diff --git a/images/example_image.png b/images/example_image.png
new file mode 100644 (file)
index 0000000..672e3a1
Binary files /dev/null and b/images/example_image.png differ

diff --git a/images/header_background.png b/images/header_background.png
new file mode 100644 (file)
index 0000000..8352b5e
Binary files /dev/null and b/images/header_background.png differ

diff --git a/images/header_foreground.png b/images/header_foreground.png
new file mode 100644 (file)
index 0000000..eb9b34d
Binary files /dev/null and b/images/header_foreground.png differ

diff --git a/index.html b/index.html
new file mode 100644 (file)
index 0000000..10d4919
--- /dev/null
+++ b/index.html
@@ -0,0 +1,197 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="description" content="This is the blog at unlimited.pizza">
+
+    <title>blog 🍕</title>
+
+    <link href="css/style.css" rel="stylesheet">
+
+  </head>
+  <body>
+    <header class="main-header">
+      <a href="/">Blog</a>
+    </header>
+    <main>
+      <article id="1">
+        <h1>This is the title of an entry</h1>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <h2>Subheading 1 (h2)</h2>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <ul>
+          <li>There will be <strong>lists</strong></li>
+          <li>Lists will have <em>tags</em></li>
+          <li>And everything else <a href="/">in the world</a></li>
+        </ul>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <h3>Other types of subheadings, other types of lists (h3)</h3>
+        <ol>
+          <li>There will be <strong>lists</strong></li>
+          <li>Lists will have <em>tags</em></li>
+          <li>And everything else <a href="/">in the world</a></li>
+        </ol>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+      </article>
+      <hr>
+      <article id="2">
+        <h1>This is the title of another entry</h1>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <h2>Subheading 1 (h2)</h2>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <ul>
+          <li>There will be <strong>lists</strong></li>
+          <li>Lists will have <em>tags</em></li>
+          <li>And everything else <a href="/">in the world</a></li>
+        </ul>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <img src="/images/example_image.png" alt="Picture: two persons in a ceremony">
+        <h3>Other types of subheadings, other types of lists (h3)</h3>
+        <ol>
+          <li>There will be <strong>lists</strong></li>
+          <li>Lists will have <em>tags</em></li>
+          <li>And everything else <a href="/">in the world</a></li>
+        </ol>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+      </article>
+      <hr>
+      <article id="3">
+        <h1>This is the title of the last entry</h1>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <h2>Subheading 1 (h2)</h2>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <ul>
+          <li>There will be <strong>lists</strong></li>
+          <li>Lists will have <em>tags</em></li>
+          <li>And everything else <a href="/">in the world</a></li>
+        </ul>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+        <h3>Other types of subheadings, other types of lists (h3)</h3>
+        <ol>
+          <li>There will be <strong>lists</strong></li>
+          <li>Lists will have <em>tags</em></li>
+          <li>And everything else <a href="/">in the world</a></li>
+        </ol>
+        <p>
+          An entry will have paragraphs, these paragraphs will contain text. The
+          text should be formatted correctly: visitors will want to read whatever
+          is in the blog, so it should be readable. It should account for several
+          types of tags, like <strong>strong</strong>, or <em>emphasised</em>. It
+          should even support <a href="/">links</a>
+        </p>
+      </article>
+    </main>
+    <footer>
+      <p>Only 3 entries kept at any time. Press 1, 2, and 3 to switch. <a href="https://unlimited.pizza">unlimited.pizza</a></p>
+    </footer>
+  </body>
+</html>
+