Skip to content
Permalink
Browse files

add eleventy example (#498)

  • Loading branch information...
msweeneydev committed Sep 26, 2019
1 parent 7619cd8 commit 3d8f895666b1bebc5388931c3b8775206d627415
@@ -0,0 +1,9 @@
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
charset = utf-8
@@ -0,0 +1,93 @@
const { DateTime } = require("luxon");
const fs = require("fs");
const pluginRss = require("@11ty/eleventy-plugin-rss");
const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");

module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(pluginRss);
eleventyConfig.addPlugin(pluginSyntaxHighlight);
eleventyConfig.setDataDeepMerge(true);

eleventyConfig.addLayoutAlias("post", "layouts/post.njk");

eleventyConfig.addFilter("readableDate", dateObj => {
return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat("dd LLL yyyy");
});

// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
eleventyConfig.addFilter('htmlDateString', (dateObj) => {
return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
});

// Get the first `n` elements of a collection.
eleventyConfig.addFilter("head", (array, n) => {
if( n < 0 ) {
return array.slice(n);
}

return array.slice(0, n);
});

eleventyConfig.addCollection("tagList", require("./_11ty/getTagList"));

eleventyConfig.addPassthroughCopy("img");
eleventyConfig.addPassthroughCopy("css");

/* Markdown Plugins */
let markdownIt = require("markdown-it");
let markdownItAnchor = require("markdown-it-anchor");
let options = {
html: true,
breaks: true,
linkify: true
};
let opts = {
permalink: true,
permalinkClass: "direct-link",
permalinkSymbol: "#"
};

eleventyConfig.setLibrary("md", markdownIt(options)
.use(markdownItAnchor, opts)
);

eleventyConfig.setBrowserSyncConfig({
callbacks: {
ready: function(err, browserSync) {
const content_404 = fs.readFileSync('_site/404.html');

browserSync.addMiddleware("*", (req, res) => {
// Provides the 404 content without redirect.
res.write(content_404);
res.end();
});
}
}
});

return {
templateFormats: [
"md",
"njk",
"html",
"liquid"
],

// If your site lives in a different subdirectory, change this.
// Leading or trailing slashes are all normalized away, so don’t worry about it.
// If you don’t have a subdirectory, use "" or "/" (they do the same thing)
// This is only used for URLs (it does not affect your file structure)
pathPrefix: "/",

markdownTemplateEngine: "liquid",
htmlTemplateEngine: "njk",
dataTemplateEngine: "njk",
passthroughFileCopy: true,
dir: {
input: ".",
includes: "_includes",
data: "_data",
output: "_site"
}
};
};
@@ -0,0 +1,2 @@
README.md
_11ty/
@@ -0,0 +1,4 @@
node_modules
.env
.env.build
_site/
@@ -0,0 +1,2 @@
README.md
yarn.lock
@@ -0,0 +1 @@
8
@@ -0,0 +1,14 @@
---
layout: layouts/home.njk
permalink: 404.html
eleventyExcludeFromCollections: true
---

# Content not found.

Go <a href="{{ '/' | url }}">home</a>.

{% comment %}
Read more: https://www.11ty.io/docs/quicktips/not-found/

{% endcomment %}
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2018 Zach Leatherman @zachleat

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@@ -0,0 +1,27 @@
# Eleventy Example

This directory is a brief example of a [Eleventy](https://www.11ty.io/) site that can be deployed with ZEIT Now and zero configuration.

## Deploy Your Own

Deploy your own Eleventy project with ZEIT Now.

[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/eleventy)

_Live Example: https://eleventy.now-examples.now.sh_

### How We Created This Example

To get started with Eleventy for deployment with ZEIT Now, you can use [npx](https://www.npmjs.com/package/npx) to initialize the project:

```shell
$ npx degit 11ty/eleventy-base-blog my-11ty-project
```

### Deploying From Your Terminal

You can deploy your new Eleventy project with a single command from your terminal using [Now CLI](/download):

```shell
$ now
```
@@ -0,0 +1,28 @@
module.exports = function(collection) {
let tagSet = new Set();
collection.getAll().forEach(function(item) {
if( "tags" in item.data ) {
let tags = item.data.tags;

tags = tags.filter(function(item) {
switch(item) {
// this list should match the `filter` list in tags.njk
case "all":
case "nav":
case "post":
case "posts":
return false;
}

return true;
});

for (const tag of tags) {
tagSet.add(tag);
}
}
});

// returning an array in addCollection works in Eleventy 0.5.3
return [...tagSet];
};
@@ -0,0 +1,16 @@
{
"title": "Your Blog Name",
"url": "https://myurl.com/",
"description": "I am writing about my experiences as a naval navel-gazer.",
"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"
}
}
@@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ renderData.title or title or metadata.title }}</title>
<meta name="Description" content="{{ renderData.description or description or metadata.description }}">
<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>

{{ content | safe }}
</main>

<footer></footer>

<!-- Current page: {{ page.url | url }} -->
</body>
</html>
@@ -0,0 +1,5 @@
---
layout: layouts/base.njk
templateClass: tmpl-home
---
{{ content | safe }}
@@ -0,0 +1,9 @@
---
layout: layouts/base.njk
templateClass: tmpl-post
---
<h1>{{ title }}</h1>

{{ content | safe }}

<p><a href="{{ '/' | url }}">← Home</a></p>
@@ -0,0 +1,14 @@
<ol reversed 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>
<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
{% for tag in post.data.tags %}
{%- if tag != "posts" -%}
{% set tagUrl %}/tags/{{ tag }}/{% endset %}
<a href="{{ tagUrl | url }}" class="tag">{{ tag }}</a>
{%- endif -%}
{% endfor %}
</li>
{% endfor %}
</ol>
@@ -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.
@@ -0,0 +1,12 @@
---
layout: layouts/home.njk
tags:
- nav
navtitle: Archive
permalink: /posts/
---

<h1>Archive</h1>

{% set postslist = collections.posts %}
{% include "postslist.njk" %}

0 comments on commit 3d8f895

Please sign in to comment.
You can’t perform that action at this time.