start of eleventy-base-blog that pairs with 0.2.8
This commit is contained in:
Zach Leatherman
parent
283df5ef4c
commit
b9c0d87306
67
.eleventy.js
67
.eleventy.js
@ -1,19 +1,53 @@
|
||||
const { DateTime } = require("luxon");
|
||||
const liquidjsSyntaxHighlighter = require("./_src/eleventy-liquidjs-tag-highlight-prismjs");
|
||||
|
||||
function dateToISO(str) {
|
||||
return DateTime.fromJSDate(str).toISO({ includeOffset: true, suppressMilliseconds: true });
|
||||
function dateToISO(dateObj) {
|
||||
return DateTime.fromJSDate(dateObj).toISO({ includeOffset: true, suppressMilliseconds: true });
|
||||
}
|
||||
|
||||
module.exports = function(config) {
|
||||
return {
|
||||
templateFormats: [
|
||||
module.exports = function(eleventyConfig) {
|
||||
eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
|
||||
|
||||
eleventyConfig.addFilter("rssLastUpdatedDate", collection => {
|
||||
if( !collection.length ) {
|
||||
throw new Error( "Collection is empty in lastUpdatedDate filter." );
|
||||
}
|
||||
// Newest date in the collection
|
||||
return dateToISO(collection[ collection.length - 1 ].date);
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("rssDate", dateObj => {
|
||||
return dateToISO(dateObj);
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("readableDate", dateObj => {
|
||||
return DateTime.fromJSDate(dateObj).toFormat("dd LLL yyyy");
|
||||
});
|
||||
|
||||
// compatibility with existing {% highlight js %} and others
|
||||
eleventyConfig.addLiquidTag("highlight", liquidjsSyntaxHighlighter);
|
||||
|
||||
// only content in the `posts/` directory
|
||||
eleventyConfig.addCollection("posts", function(collection) {
|
||||
return collection.getAllSorted().filter(function(item) {
|
||||
return item.inputPath.match(/^\.\/posts\//) !== null;
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
templateFormats: [
|
||||
"md",
|
||||
"njk",
|
||||
"html",
|
||||
"png",
|
||||
"jpg",
|
||||
"css"
|
||||
],
|
||||
markdownTemplateEngine: "njk",
|
||||
|
||||
// if your site lives in a subdirectory, change this
|
||||
urlPrefix: "/",
|
||||
|
||||
markdownTemplateEngine: "liquid",
|
||||
htmlTemplateEngine: "njk",
|
||||
dataTemplateEngine: "njk",
|
||||
passthroughFileCopy: true,
|
||||
@ -22,23 +56,6 @@ module.exports = function(config) {
|
||||
includes: "_includes",
|
||||
data: "_data",
|
||||
output: "_site"
|
||||
},
|
||||
nunjucksFilters: {
|
||||
lastUpdatedDate: collection => {
|
||||
// Newest date in the collection
|
||||
return dateToISO(collection[ collection.length - 1 ].date);
|
||||
},
|
||||
rssDate: dateObj => {
|
||||
return dateToISO(dateObj);
|
||||
},
|
||||
url: url => {
|
||||
// If your blog lives in a subdirectory, change this:
|
||||
let rootDir = "/";
|
||||
if( !url || url === "/" ) {
|
||||
return rootDir;
|
||||
}
|
||||
return rootDir + url;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
};
|
||||
@ -1,11 +1,13 @@
|
||||
{
|
||||
"title": "Eleventy, the Blog",
|
||||
"subtitle": "This is a sample project to showcase the Eleventy Static Site Generator.",
|
||||
"feedurl": "https://11ty.io/feed/",
|
||||
"url": "https://11ty.io/",
|
||||
"id": "https://11ty.io/",
|
||||
"title": "Your Blog Name",
|
||||
"url": "https://myurl.com/",
|
||||
"feed": {
|
||||
"subtitle": "I am writing about my experiences as a naval navel-gazer.",
|
||||
"url": "https://myurl.com/feed/",
|
||||
"id": "https://myurl.com/"
|
||||
},
|
||||
"author": {
|
||||
"name": "Zach Leatherman",
|
||||
"email": "zachleat@zachleat.com"
|
||||
"name": "Your Name Here",
|
||||
"email": "youremailaddress@example.com"
|
||||
}
|
||||
}
|
||||
@ -3,24 +3,28 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }}</title>
|
||||
<title>{{ title or metadata.title }}</title>
|
||||
<link rel="stylesheet" href="/css/index.css">
|
||||
<link rel="stylesheet" href="/posts/posts.css">
|
||||
<link rel="alternate" href="/feed/" type="application/atom+xml" title="{{ title }}">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/"><img src="/img/logo.png" class="logo"></a>
|
||||
<h1 class="home"><a href="/">{{ metadata.title }}</a></h1>
|
||||
<ul class="nav">
|
||||
{%- for nav in collections.nav | reverse -%}
|
||||
<li class="nav-item"><a href="{{ nav.url | url }}">{{ nav.data.navtitle }}</a></li>
|
||||
<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>
|
||||
|
||||
{{ layoutContent | safe }}
|
||||
<main>
|
||||
{{ layoutContent | safe }}
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p><em>Current page: <code>{{ page.url | url }}</code></em></p>
|
||||
</footer>
|
||||
|
||||
<!-- Current page: {{ page.url | url }} -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,6 +2,4 @@
|
||||
layout: layouts/base.njk
|
||||
templateClass: tmpl-home
|
||||
---
|
||||
<h1>My Blog</h1>
|
||||
|
||||
{{ layoutContent | safe }}
|
||||
|
||||
@ -5,8 +5,3 @@ templateClass: tmpl-post
|
||||
<h1>{{ title }}</h1>
|
||||
|
||||
{{ layoutContent | safe }}
|
||||
|
||||
<h2>Posts: </h2>
|
||||
|
||||
{% import "postlist.njk" as postsm %}
|
||||
{{ postsm.list(collections.post, page.url) }}
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
{% macro list(posts, url) %}
|
||||
<ul>
|
||||
{%- for post in posts -%}
|
||||
<li{% if post.url == url %} class="post-active"{% endif %}>
|
||||
<a href="{{ post.url | url }}">{{ post.data.title }}</a>
|
||||
Tags: {{ post.data.tags | join(", ") }}
|
||||
{%- if post.url == url %}
|
||||
(You are here)
|
||||
{% endif -%}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{% endmacro %}
|
||||
9
_includes/postslist.njk
Normal file
9
_includes/postslist.njk
Normal file
@ -0,0 +1,9 @@
|
||||
<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">{{ post.data.title }}</a>
|
||||
<span class="postlist-date">{{ post.date | readableDate }}</span>
|
||||
{% for tag in post.data.tags %}{% if tag != "post" %}<span class="tag">{{ tag }}</span>{% endif %}{% endfor %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
layout: layouts/home.njk
|
||||
layout: layouts/post.njk
|
||||
title: About Me
|
||||
tags: nav
|
||||
navtitle: About
|
||||
templateClass: tmpl-page
|
||||
templateClass: tmpl-post
|
||||
---
|
||||
## About Me
|
||||
|
||||
I am a person that writes stuff.
|
||||
128
css/index.css
128
css/index.css
@ -1,37 +1,127 @@
|
||||
: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 {
|
||||
max-width: 37.5em; /* 600px /16 */
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
.logo {
|
||||
max-width: 12.5em; /* 200px /16 */
|
||||
/* Header */
|
||||
.home {
|
||||
padding: 0 1rem;
|
||||
float: left;
|
||||
margin: 1rem 0; /* 16px /16 */
|
||||
font-size: 1em; /* 16px /16 */
|
||||
}
|
||||
.tmpl-page .logo,
|
||||
.tmpl-post .logo {
|
||||
max-width: 8.75em; /* 140px /16 */
|
||||
}
|
||||
@media (min-width: 31.25em) { /* 500px */
|
||||
.tmpl-page .logo,
|
||||
.tmpl-post .logo {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
}
|
||||
.tmpl-page body,
|
||||
.tmpl-post body {
|
||||
padding-right: 10em; /* 160px /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 */
|
||||
.post-active {
|
||||
.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 */
|
||||
}
|
||||
|
||||
/* Next steps */
|
||||
.next-steps {
|
||||
background-color: #ffc;
|
||||
padding: 0.375em 0.625em; /* 6px 10px /16 */
|
||||
}
|
||||
@ -4,11 +4,11 @@ permalink: feed/atom.xml
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||
<title>{{ metadata.title }}</title>
|
||||
<subtitle>{{ metadata.subtitle }}</subtitle>
|
||||
<link href="{{ metadata.feedurl }}" rel="self"/>
|
||||
<subtitle>{{ metadata.feed.subtitle }}</subtitle>
|
||||
<link href="{{ metadata.feed.url }}" rel="self"/>
|
||||
<link href="{{ metadata.url }}"/>
|
||||
<updated>{{ collections.post | lastUpdatedDate }}</updated>
|
||||
<id>{{ metadata.id }}</id>
|
||||
<id>{{ metadata.feed.id }}</id>
|
||||
<author>
|
||||
<name>{{ metadata.author.name }}</name>
|
||||
<email>{{ metadata.author.email }}</email>
|
||||
|
||||
10
index.njk
10
index.njk
@ -1,9 +1,13 @@
|
||||
---
|
||||
layout: layouts/home.njk
|
||||
title: My Blog
|
||||
tags: nav
|
||||
navtitle: Home
|
||||
---
|
||||
{% import "postlist.njk" as postsm %}
|
||||
{{ postsm.list(collections.post) }}
|
||||
|
||||
<div class="next-steps">
|
||||
Now edit the <code>_data/metadata.json</code> with your blog’s information—and delete this message from <code>index.njk</code>.
|
||||
</div>
|
||||
|
||||
{% set postslist = collections.post %}
|
||||
{% include "postslist.njk" %}
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
},
|
||||
"homepage": "https://github.com/11ty/eleventy-base-blog#readme",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^0.2.7",
|
||||
"@11ty/eleventy": "file:../eleventy",
|
||||
"luxon": "^0.3.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
title: This is my second post.
|
||||
tags:
|
||||
- post
|
||||
- number-2
|
||||
layout: layouts/post.njk
|
||||
---
|
||||
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user