noah
/
personal-site
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

start of eleventy-base-blog that pairs with 0.2.8

upstream
Zach Leatherman 5 years ago
parent
283df5ef4c
commit
b9c0d87306
13 changed files with 194 additions and 88 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +43
    -26
      .eleventy.js
  2. +9
    -7
      _data/metadata.json
  3. +9
    -5
      _includes/layouts/base.njk
  4. +0
    -2
      _includes/layouts/home.njk
  5. +0
    -5
      _includes/layouts/post.njk
  6. +0
    -13
      _includes/postlist.njk
  7. +9
    -0
      _includes/postslist.njk
  8. +2
    -3
      about/index.md
  9. +110
    -20
      css/index.css
  10. +3
    -3
      feed/feed.njk
  11. +7
    -3
      index.njk
  12. +1
    -1
      package.json
  13. +1
    -0
      posts/secondpost.md

+ 43
- 26
.eleventy.js View File

@ -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;
}
}
};
};
}
};
};

+ 9
- 7
_data/metadata.json View File

@ -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"
}
}

+ 9
- 5
_includes/layouts/base.njk View File

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

+ 0
- 2
_includes/layouts/home.njk View File

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

+ 0
- 5
_includes/layouts/post.njk View File

@ -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) }}

+ 0
- 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
- 0
_includes/postslist.njk 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>

+ 2
- 3
about/index.md View File

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

+ 110
- 20
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 {
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 */
}
.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 */
}
/* 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 */
.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 */
}

+ 3
- 3
feed/feed.njk View File

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


+ 7
- 3
index.njk View File

@ -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" %}

+ 1
- 1
package.json View File

@ -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"
}
}

+ 1
- 0
posts/secondpost.md View File

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


Write Preview
Loading…
Cancel
Save