diff options
| author | Ben Beltran <ben@nsovocal.com> | 2017-07-02 21:31:10 -0500 |
|---|---|---|
| committer | Ben Beltran <ben@nsovocal.com> | 2017-07-02 21:31:10 -0500 |
| commit | 7a5a585ead8c4e967980adc2ab9c7502e47694fd (patch) | |
| tree | 8f2fd840fc5620e5f4b44c607dd474db5e08d371 | |
| parent | 4ae55e0673a61c50f1f7f378f6461d0388f66bd5 (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-- | .gitignore | 9 | ||||
| -rw-r--r-- | CHANGELOG.md | 14 | ||||
| -rw-r--r-- | CONTRIBUTING.md | 24 | ||||
| -rw-r--r-- | README.md | 40 | ||||
| -rw-r--r-- | css/style.css | 52 | ||||
| -rw-r--r-- | images/example_image.png | bin | 0 -> 51624 bytes | |||
| -rw-r--r-- | images/header_background.png | bin | 0 -> 5247 bytes | |||
| -rw-r--r-- | images/header_foreground.png | bin | 0 -> 5273 bytes | |||
| -rw-r--r-- | index.html | 197 |
9 files changed, 335 insertions, 1 deletions
@@ -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 @@ -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 Binary files differnew file mode 100644 index 0000000..672e3a1 --- /dev/null +++ b/images/example_image.png diff --git a/images/header_background.png b/images/header_background.png Binary files differnew file mode 100644 index 0000000..8352b5e --- /dev/null +++ b/images/header_background.png diff --git a/images/header_foreground.png b/images/header_foreground.png Binary files differnew file mode 100644 index 0000000..eb9b34d --- /dev/null +++ b/images/header_foreground.png 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> + |