Add files via upload

danurbanowicz · Jul 24, 2018 · 4b0dbdc · 4b0dbdc
1 parent 128502b
commit 4b0dbdc
Show file tree

Hide file tree

Showing 18 changed files with 604 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,66 @@
+# eleventy-base-blog
+
+A starter repository showing how to build a blog with the [Eleventy](https://github.com/11ty/eleventy) static site generator.
+
+[![Build Status](https://travis-ci.org/11ty/eleventy-base-blog.svg?branch=master)](https://travis-ci.org/11ty/eleventy-base-blog)
+
+## Demos
+
+* [Netlify](https://eleventy-base-blog.netlify.com/)
+* [Get your own Eleventy web site on Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog)—seriously, just click OK a few times and it’s live—Netlify is amazing.
+* [GitHub Pages](https://11ty.github.io/eleventy-base-blog/)
+
+## Getting Started
+
+### 1. Clone this repository:
+
+```
+git clone https://github.com/11ty/eleventy-base-blog.git my-blog-name
+```
+
+
+### 2. Navigate to the directory
+
+```
+cd my-blog-name
+```
+
+Specifically have a look at `.eleventy.js` to see if you want to configure any Eleventy options differently.
+
+### 3. Install dependencies
+
+```
+npm install
+```
+
+### 4. Edit _data/metadata.json
+
+### 5. Run Eleventy
+
+```
+npx eleventy
+```
+
+Or build automatically when a template changes:
+```
+npx eleventy --watch
+```
+
+Or in debug mode:
+```
+DEBUG=* npx eleventy
+```
+
+### Implementation Notes
+
+* `about/index.md` shows how to add a content page.
+* `posts/` has the blog posts but really they can live in any directory. They need only the `post` tag to be added to this collection.
+* Add the `nav` tag to add a template to the top level site navigation. For example, this is in use on `index.njk` and `about/index.md`.
+* Content can be any template format (blog posts needn’t be markdown, for example). Configure your supported templates in `.eleventy.js` -> `templateFormats`.
+	* Because `css` and `png` are listed in `templateFormats` but are not supported template types, any files with these extensions will be copied without modification to the output (while keeping the same directory structure).
+* The blog post feed template is in `feed/feed.njk`. This is also a good example of using a global data files in that it uses `_data/metadata.json`.
+* This example uses three layouts:
+  * `_includes/layouts/base.njk`: the top level HTML structure
+  * `_includes/layouts/home.njk`: the home page template (wrapped into `base.njk`)
+  * `_includes/layouts/post.njk`: the blog post template (wrapped into `base.njk`)
+* `_includes/postlist.njk` is a Nunjucks include and is a reusable component used to display a list of all the posts. `index.njk` has an example of how to use it.
diff --git a/_data/metadata.json b/_data/metadata.json
@@ -0,0 +1,15 @@
+{
+  "title": "Your Blog Name",
+  "url": "https://myurl.com/",
+  "feed": {
+    "subtitle": "I am writing about my experiences as a naval navel-gazer.",
+    "filename": "feed.xml",
+    "path": "/feed/feed.xml",
+    "url": "https://myurl.com/feed/feed.xml",
+    "id": "https://myurl.com/"
+  },
+  "author": {
+    "name": "Your Name Here",
+    "email": "youremailaddress@example.com"
+  }
+}
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>{{ title or metadata.title }}</title>
+		<link rel="stylesheet" href="{{ '/css/index.css' | url }}">
+		<link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}">
+		<link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
+	</head>
+	<body>
+		<header>
+			<h1 class="home"><a href="{{ '/' | url }}">{{ metadata.title }}</a></h1>
+			<ul class="nav">
+				{%- for nav in collections.nav | reverse -%}
+				<li class="nav-item{% if nav.url == page.url %} nav-item-active{% endif %}"><a href="{{ nav.url | url }}">{{ nav.data.navtitle }}</a></li>
+				{%- endfor -%}
+			</ul>
+		</header>
+
+		<main{% if templateClass %} class="{{ templateClass }}"{% endif %}>
+			<div class="warning">
+				<ol>
+					<li>Edit the <code>_data/metadata.json</code> with your blog’s information.</li>
+					<li>(Optional) Edit <code>.eleventy.js</code> with your configuration preferences.</li>
+					<li>Delete this message from <code>_includes/layouts/base.njk</code>.</li>
+				</ol>
+				<p><em>This is an <a href="https://www.11ty.io/">Eleventy project</a> created from the <a href="https://github.com/11ty/eleventy-base-blog"><code>eleventy-base-blog</code> repo</a>.</em></p>
+			</div>
+
+			{{ layoutContent | safe }}
+		</main>
+
+		<footer></footer>
+
+		<!-- Current page: {{ page.url | url }} -->
+	</body>
+</html>
diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk
@@ -0,0 +1,5 @@
+---
+layout: layouts/base.njk
+templateClass: tmpl-home
+---
+{{ layoutContent | safe }}
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
@@ -0,0 +1,9 @@
+---
+layout: layouts/base.njk
+templateClass: tmpl-post
+---
+<h1>{{ title }}</h1>
+
+{{ layoutContent | safe }}
+
+<p><a href="{{ '/' | url }}">← Home</a></p>
diff --git a/_includes/postslist.njk b/_includes/postslist.njk
@@ -0,0 +1,14 @@
+<ol class="postlist" style="counter-reset: start-from {{ postslist.length + 1 }}">
+{% for post in postslist | reverse %}
+	<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
+		<a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
+		<span class="postlist-date">{{ post.date | readableDate }}</span>
+		{% for tag in post.data.tags %}
+      {%- if tag != "post" -%}
+      {% set tagUrl %}/tags/{{ tag }}/{% endset %}
+      <a href="{{ tagUrl | url }}" class="tag">{{ tag }}</a>
+      {%- endif -%}
+    {% endfor %}
+	</li>
+{% endfor %}
+</ol>
diff --git a/about/index.md b/about/index.md
@@ -0,0 +1,10 @@
+---
+layout: layouts/post.njk
+title: About Me
+tags:
+  - nav
+navtitle: About
+templateClass: tmpl-post
+---
+
+I am a person that writes stuff.
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,203 @@
+:root {
+	--red: #C5004A;
+	--darkred: #7F0036;
+	--lightgray: #e0e0e0;
+	--gray: #C0C0C0;
+	--darkgray: #666;
+	--navy: #17050F;
+	--blue: #082840;
+	--white: #fff;
+}
+* {
+	box-sizing: border-box;
+}
+html,
+body {
+	padding: 0;
+	margin: 0;
+	font-family: sans-serif;
+}
+p:last-child {
+	margin-bottom: 0;
+}
+p,
+.tmpl-post li,
+img {
+	max-width: 37.5em; /* 600px /16 */
+}
+p,
+.tmpl-post li {
+	line-height: 1.45;
+}
+a[href] {
+	color: var(--blue);
+}
+a[href]:visited {
+	color: var(--navy);
+}
+main {
+	padding: 1rem;
+}
+main :first-child {
+	margin-top: 0;
+}
+header {
+	border-bottom: 1px dashed var(--lightgray);
+}
+header:after {
+	content: "";
+	display: table;
+	clear: both;
+}
+pre,
+code {
+	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+	line-height: 1.5;
+}
+pre {
+	font-size: 14px;
+	line-height: 1.375;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	-moz-tab-size: 2;
+	-o-tab-size: 2;
+	tab-size: 2;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	padding: 1em;
+	margin: .5em 0;
+	background-color: #f6f6f6;
+}
+.highlight-line {
+	padding: 0.125em 1em; /* 2px 16px /16 */
+}
+.highlight-line-isdir {
+	color: #b0b0b0;
+	background-color: #222;
+}
+.highlight-line-active {
+	background-color: #444;
+	background-color: hsla(0, 0%, 27%, .8);
+}
+.highlight-line-add {
+	background-color: #45844b;
+}
+.highlight-line-remove {
+	background-color: #902f2f;
+}
+
+/* Header */
+.home {
+	padding: 0 1rem;
+	float: left;
+	margin: 1rem 0; /* 16px /16 */
+	font-size: 1em; /* 16px /16 */
+}
+.home :link:not(:hover) {
+	text-decoration: none;
+}
+
+/* Nav */
+.nav {
+	padding: 0;
+	list-style: none;
+	float: left;
+	margin-left: 1em;
+}
+.nav-item {
+	display: inline-block;
+	margin-right: 1em;
+}
+.nav-item a[href]:not(:hover) {
+	text-decoration: none;
+}
+.nav-item-active {
+	font-weight: 700;
+	text-decoration: underline;
+}
+
+/* Posts list */
+.postlist {
+	list-style: none;
+	padding: 0;
+}
+.postlist-item {
+	counter-increment: start-from -1;
+}
+.postlist-item:before {
+	display: inline-block;
+	pointer-events: none;
+	content: "" counter(start-from, decimal-leading-zero) ". ";
+	line-height: 100%;
+	text-align: right;
+}
+.postlist-date,
+.postlist-item:before {
+	font-size: 0.8125em; /* 13px /16 */
+	color: var(--darkgray);
+}
+.postlist-date {
+	word-spacing: -0.5px;
+}
+.postlist-link {
+	display: inline-block;
+	padding: 0.25em 0.1875em; /* 4px 3px /16 */
+}
+.postlist-item-active .postlist-link {
+	font-weight: bold;
+}
+.tmpl-home .postlist-link {
+	font-size: 1.1875em; /* 19px /16 */
+	font-weight: 700;
+}
+
+
+/* Tags */
+.tag {
+	display: inline-block;
+	vertical-align: text-top;
+	text-transform: uppercase;
+	font-size: 0.625em; /* 10px /16 */
+	padding: 2px 4px;
+	margin-left: 0.8em; /* 8px /10 */
+	background-color: var(--red);
+	color: var(--white);
+	border-radius: 0.25em; /* 3px /12 */
+  text-decoration: none;
+}
+a[href].tag,
+a[href].tag:visited {
+  color: #fff;
+}
+
+/* Warning */
+.warning {
+	background-color: #ffc;
+	padding: 1em 0.625em; /* 16px 10px /16 */
+}
+.warning ol:only-child {
+	margin: 0;
+}
+
+/* Direct Links / Markdown Headers */
+.direct-link {
+	font-family: sans-serif;
+	text-decoration: none;
+	font-style: normal;
+	margin-left: .1em;
+}
+a[href].direct-link,
+a[href].direct-link:visited {
+	color: transparent;
+}
+a[href].direct-link:focus,
+a[href].direct-link:focus:visited,
+:hover > a[href].direct-link,
+:hover > a[href].direct-link:visited {
+	color: #aaa;
+}