aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorBen Beltran <ben@nsovocal.com>2017-07-02 21:31:10 -0500
committerBen Beltran <ben@nsovocal.com>2017-07-02 21:31:10 -0500
commit7a5a585ead8c4e967980adc2ab9c7502e47694fd (patch)
tree8f2fd840fc5620e5f4b44c607dd474db5e08d371
parent4ae55e0673a61c50f1f7f378f6461d0388f66bd5 (diff)
💄📝 Add basic static layout + readme/contributing
Squashed commit of the following: commit f32ca088e9b4d9c6b6edad5271757d886f7177e8 Author: Ben Beltran <ben@nsovocal.com> Date: Sun Jul 2 21:30:20 2017 -0500 Add CHANGELOG commit f5691219950c7546343d42791034cdbba748609b Author: Ben Beltran <ben@nsovocal.com> Date: Sun Jul 2 21:30:00 2017 -0500 Add mac files, and generated files to ignore commit 88ba8c1bed6a6336e1c0ebb5e5d42210a20422a7 Author: Ben Beltran <ben@nsovocal.com> Date: Sun Jul 2 21:28:34 2017 -0500 Add contributing guide commit 160eae6998e2559b6b9e3b21473c930b10278739 Author: Ben Beltran <ben@nsovocal.com> Date: Sun Jul 2 21:24:21 2017 -0500 Add readme commit 36760ff85dbd335afe2c5d9ea9596f81a0ca88a3 Author: Ben Beltran <ben@nsovocal.com> Date: Sun Jul 2 21:11:47 2017 -0500 💄 Add static layout
-rw-r--r--.gitignore9
-rw-r--r--CHANGELOG.md14
-rw-r--r--CONTRIBUTING.md24
-rw-r--r--README.md40
-rw-r--r--css/style.css52
-rw-r--r--images/example_image.pngbin0 -> 51624 bytes
-rw-r--r--images/header_background.pngbin0 -> 5247 bytes
-rw-r--r--images/header_foreground.pngbin0 -> 5273 bytes
-rw-r--r--index.html197
9 files changed, 335 insertions, 1 deletions
diff --git a/.gitignore b/.gitignore
index 00cbbdf..719089d 100644
--- 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
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
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 2634854..7f7903a 100644
--- 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
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
index 0000000..672e3a1
--- /dev/null
+++ b/images/example_image.png
Binary files differ
diff --git a/images/header_background.png b/images/header_background.png
new file mode 100644
index 0000000..8352b5e
--- /dev/null
+++ b/images/header_background.png
Binary files differ
diff --git a/images/header_foreground.png b/images/header_foreground.png
new file mode 100644
index 0000000..eb9b34d
--- /dev/null
+++ b/images/header_foreground.png
Binary files differ
diff --git a/index.html b/index.html
new file mode 100644
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>
+