cobweb/xmitter-11ty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

start of eleventy-base-blog that pairs with 0.2.8

Browse Source
This commit is contained in:
Zach Leatherman 2018-01-22 08:17:48 -06:00
parent 283df5ef4c
commit b9c0d87306
13 changed files with 193 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
.eleventy.js
View File

@ -1,19 +1,53 @@
const { DateTime } = require("luxon"); const { DateTime } = require("luxon");
const liquidjsSyntaxHighlighter = require("./_src/eleventy-liquidjs-tag-highlight-prismjs");
function dateToISO(str) { function dateToISO(dateObj) {
return DateTime.fromJSDate(str).toISO({ includeOffset: true, suppressMilliseconds: true }); return DateTime.fromJSDate(dateObj).toISO({ includeOffset: true, suppressMilliseconds: true });
} }
module.exports = function(config) { 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 { return {
templateFormats: [ templateFormats: [
"md", "md",
"njk", "njk",
"html", "html",
"png", "png",
"jpg",
"css" "css"
], ],
markdownTemplateEngine: "njk",
// if your site lives in a subdirectory, change this
urlPrefix: "/",
markdownTemplateEngine: "liquid",
htmlTemplateEngine: "njk", htmlTemplateEngine: "njk",
dataTemplateEngine: "njk", dataTemplateEngine: "njk",
passthroughFileCopy: true, passthroughFileCopy: true,
@ -22,23 +56,6 @@ module.exports = function(config) {
includes: "_includes", includes: "_includes",
data: "_data", data: "_data",
output: "_site" 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;
}
} }
}; };
}; };

16
_data/metadata.json
View File

@ -1,11 +1,13 @@
{ {
"title": "Eleventy, the Blog", "title": "Your Blog Name",
"subtitle": "This is a sample project to showcase the Eleventy Static Site Generator.", "url": "https://myurl.com/",
"feedurl": "https://11ty.io/feed/", "feed": {
"url": "https://11ty.io/", "subtitle": "I am writing about my experiences as a naval navel-gazer.",
"id": "https://11ty.io/", "url": "https://myurl.com/feed/",
"id": "https://myurl.com/"
},
"author": { "author": {
"name": "Zach Leatherman", "name": "Your Name Here",
"email": "zachleat@zachleat.com" "email": "youremailaddress@example.com"
} }
} }

12
_includes/layouts/base.njk
View File

@ -3,24 +3,28 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="/css/index.css">
<link rel="stylesheet" href="/posts/posts.css"> <link rel="stylesheet" href="/posts/posts.css">
<link rel="alternate" href="/feed/" type="application/atom+xml" title="{{ title }}"> <link rel="alternate" href="/feed/" type="application/atom+xml" title="{{ title }}">
</head> </head>
<body> <body>
<header> <header>
<a href="/"><img src="/img/logo.png" class="logo"></a> <h1 class="home"><a href="/">{{ metadata.title }}</a></h1>
<ul class="nav"> <ul class="nav">
{%- for nav in collections.nav | reverse -%} {%- 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 -%} {%- endfor -%}
</ul>
</header> </header>
<main>
{{ layoutContent | safe }} {{ layoutContent | safe }}
</main>
<footer> <footer>
<p><em>Current page: <code>{{ page.url | url }}</code></em></p>
</footer> </footer>
<!-- Current page: {{ page.url | url }} -->
</body> </body>
</html> </html>

2
_includes/layouts/home.njk
View File

@ -2,6 +2,4 @@
layout: layouts/base.njk layout: layouts/base.njk
templateClass: tmpl-home templateClass: tmpl-home
--- ---
<h1>My Blog</h1>
{{ layoutContent | safe }} {{ layoutContent | safe }}

5
_includes/layouts/post.njk
View File

@ -5,8 +5,3 @@ templateClass: tmpl-post
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
{{ layoutContent | safe }} {{ layoutContent | safe }}
<h2>Posts: </h2>
{% import "postlist.njk" as postsm %}
{{ postsm.list(collections.post, page.url) }}

13
_includes/postlist.njk
View File

@ -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
View 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>

5
about/index.md
View File

@ -1,10 +1,9 @@
--- ---
layout: layouts/home.njk layout: layouts/post.njk
title: About Me title: About Me
tags: nav tags: nav
navtitle: About navtitle: About
templateClass: tmpl-page templateClass: tmpl-post
--- ---
## About Me
I am a person that writes stuff. I am a person that writes stuff.

128
css/index.css
View File

@ -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 { p {
max-width: 37.5em; /* 600px /16 */ 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 */ /* Header */
.logo { .home {
max-width: 12.5em; /* 200px /16 */ padding: 0 1rem;
} float: left;
.tmpl-page .logo, margin: 1rem 0; /* 16px /16 */
.tmpl-post .logo { font-size: 1em; /* 16px /16 */
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 */
.nav { .nav {
padding: 0; padding: 0;
list-style: none; list-style: none;
float: left;
margin-left: 1em;
} }
.nav-item { .nav-item {
display: inline-block; display: inline-block;
margin-right: 1em; margin-right: 1em;
} }
.nav-item a[href]:not(:hover) {
text-decoration: none;
}
.nav-item-active {
font-weight: 700;
text-decoration: underline;
}
/* Posts list */ /* 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; 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 */
}

6
feed/feed.njk
View File

@ -4,11 +4,11 @@ permalink: feed/atom.xml
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"> <feed xmlns="http://www.w3.org/2005/Atom">
<title>{{ metadata.title }}</title> <title>{{ metadata.title }}</title>
<subtitle>{{ metadata.subtitle }}</subtitle> <subtitle>{{ metadata.feed.subtitle }}</subtitle>
<link href="{{ metadata.feedurl }}" rel="self"/> <link href="{{ metadata.feed.url }}" rel="self"/>
<link href="{{ metadata.url }}"/> <link href="{{ metadata.url }}"/>
<updated>{{ collections.post | lastUpdatedDate }}</updated> <updated>{{ collections.post | lastUpdatedDate }}</updated>
<id>{{ metadata.id }}</id> <id>{{ metadata.feed.id }}</id>
<author> <author>
<name>{{ metadata.author.name }}</name> <name>{{ metadata.author.name }}</name>
<email>{{ metadata.author.email }}</email> <email>{{ metadata.author.email }}</email>

10
index.njk
View File

@ -1,9 +1,13 @@
--- ---
layout: layouts/home.njk layout: layouts/home.njk
title: My Blog
tags: nav tags: nav
navtitle: Home 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" %}

2
package.json
View File

@ -22,7 +22,7 @@
}, },
"homepage": "https://github.com/11ty/eleventy-base-blog#readme", "homepage": "https://github.com/11ty/eleventy-base-blog#readme",
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "^0.2.7", "@11ty/eleventy": "file:../eleventy",
"luxon": "^0.3.1" "luxon": "^0.3.1"
} }
} }

1
posts/secondpost.md
View File

@ -2,6 +2,7 @@
title: This is my second post. title: This is my second post.
tags: tags:
- post - post
- number-2
layout: layouts/post.njk 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. 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.