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

Merge branch 'main' into v2

Browse Source 
# Conflicts:
#	.eleventy.js
#	package.json
#	tags-list.njk
This commit is contained in:
Zach Leatherman 2022-07-13 12:46:03 -05:00
commit 70530889e4
10 changed files with 98 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eleventy.js
View File

@ -61,8 +61,8 @@ module.exports = function(eleventyConfig) {
placement: "after",
class: "direct-link",
symbol: "#",
level: [1,2,3,4],
}),
level: [1,2,3,4],
slugify: eleventyConfig.getFilter("slug")
});
});

0
.nojekyll Normal file
View File

47
README.md
View File

@ -6,16 +6,16 @@ A starter repository showing how to build a blog with the [Eleventy](https://git
## Demos
* [Netlify](https://eleventy-base-blog.netlify.com/)
* [GitHub Pages](https://11ty.github.io/eleventy-base-blog/)
* [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog)
- [Netlify](https://eleventy-base-blog.netlify.com/)
- [GitHub Pages](https://11ty.github.io/eleventy-base-blog/)
- [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog)
## Deploy this to your own site
Deploy this Eleventy site in just a few clicks on these services:
* [Get your own Eleventy web site on Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog)
* [Get your own Eleventy web site on Vercel](https://vercel.com/import/project?template=11ty%2Feleventy-base-blog)
- [Get your own Eleventy web site on Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog)
- [Get your own Eleventy web site on Vercel](https://vercel.com/import/project?template=11ty%2Feleventy-base-blog)
Or, read more about [Deploying an Eleventy project](https://www.11ty.dev/docs/deployment/).
@ -27,7 +27,6 @@ Or, read more about [Deploying an Eleventy project](https://www.11ty.dev/docs/de
git clone https://github.com/11ty/eleventy-base-blog.git my-blog-name
```
### 2. Navigate to the directory
```
@ -42,39 +41,43 @@ Specifically have a look at `.eleventy.js` to see if you want to configure any E
npm install
```
### 4. Edit _data/metadata.json
### 4. Edit \_data/metadata.json
### 5. Run Eleventy
```
npx eleventy
npx @11ty/eleventy
```
Or build and host locally for local development
```
npx eleventy --serve
npx @11ty/eleventy --serve
```
Or build automatically when a template changes:
```
npx eleventy --watch
npx @11ty/eleventy --watch
```
Or in debug mode:
```
DEBUG=* npx eleventy
DEBUG=* npx @11ty/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.
- `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.
- Use the `eleventyNavigation` key in your front matter 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`.
- The `css` and `img` directories in the input directory will be copied to the output folder (via `addPassthroughCopy()` in the `.eleventy.js` file).
- 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.

8
_includes/layouts/base.njk
View File

@ -1,11 +1,13 @@
<!doctype html>
<html lang="en">
<html lang="{{ metadata.language }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title or metadata.title }}</title>
<meta name="description" content="{{ description or metadata.description }}">
<meta name="generator" content="{{ eleventy.generator }}">
{#- Uncomment this if you’d like folks to know that you used Eleventy to build your site! #}
{#- <meta name="generator" content="{{ eleventy.generator }}"> #}
<link rel="stylesheet" href="{{ '/css/index.css' | url }}">
<link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}">
@ -28,7 +30,7 @@
<main{% if templateClass %} class="{{ templateClass }}"{% endif %}>
<!-- Delete this message -->
<div class="warning">
<div class="infobox">
<ol>
<li>Edit the <code>_data/metadata.json</code> with your blog’s information.</li>
<li>(Optional) Edit <code>.eleventy.js</code> with your <a href="https://www.11ty.dev/docs/config/">configuration preferences</a>.</li>

4
_includes/layouts/post.njk
View File

@ -5,8 +5,8 @@ templateClass: tmpl-post
<h1>{{ title }}</h1>
<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
{%- for tag in tags | filterTagList -%}
{%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%}
{%- for tag in tags | filterTagList %}
{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
{%- endfor %}

2
_includes/postslist.njk
View File

@ -4,7 +4,7 @@
<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 | filterTagList %}
{% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
{% endfor %}
</li>

83
css/index.css
View File

@ -1,13 +1,37 @@
/* Colors */
/* Defaults */
:root {
--lightgray: #e0e0e0;
--gray: #C0C0C0;
--darkgray: #333;
--navy: #17050F;
--blue: #082840;
--white: #fff;
--font-family: -apple-system, system-ui, sans-serif;
--font-family-monospace: 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;
}
/* Theme colors */
:root {
--color-gray-20: #e0e0e0;
--color-gray-50: #C0C0C0;
--color-gray-90: #333;
--background-color: #fff;
--text-color: var(--color-gray-90);
--text-color-link: #082840;
--text-color-link-visited: #17050F;
}
@media (prefers-color-scheme: dark) {
:root {
--color-gray-20: #e0e0e0;
--color-gray-50: #C0C0C0;
--color-gray-90: #dad8d8;
/* --text-color is assigned to --color-gray-_ above */
--text-color-link: #1493fb;
--text-color-link-visited: #a6a6f8;
--background-color: #15202b;
}
}
/* Global stylesheet */
* {
box-sizing: border-box;
@ -17,10 +41,11 @@ html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, system-ui, sans-serif;
color: var(--darkgray);
background-color: var(--white);
font-family: var(--font-family);
color: var(--text-color);
background-color: var(--background-color);
}
p:last-child {
margin-bottom: 0;
}
@ -33,12 +58,14 @@ p,
.tmpl-post li {
line-height: 1.45;
}
a[href] {
color: var(--blue);
color: var(--text-color-link);
}
a[href]:visited {
color: var(--navy);
color: var(--text-color-link-visited);
}
main {
padding: 1rem;
}
@ -46,13 +73,14 @@ main :first-child {
margin-top: 0;
}
header {
border-bottom: 1px dashed var(--lightgray);
border-bottom: 1px dashed var(--color-gray-20);
}
header:after {
content: "";
display: table;
clear: both;
}
table {
margin: 1em 0;
}
@ -63,7 +91,7 @@ table th {
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;
font-family: var(--font-family-monospace);
line-height: 1.5;
}
pre {
@ -78,7 +106,6 @@ pre {
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
padding: 1em;
@ -141,7 +168,7 @@ code {
.postlist-date,
.postlist-item:before {
font-size: 0.8125em; /* 13px /16 */
color: var(--darkgray);
color: var(--color-gray-90);
}
.postlist-date {
word-spacing: -0.5px;
@ -173,8 +200,8 @@ code {
margin-left: 0.6666666666667em; /* 8px /12 */
margin-top: 0.5em; /* 6px /12 */
margin-bottom: 0.5em; /* 6px /12 */
color: var(--darkgray);
border: 1px solid var(--gray);
color: var(--color-gray-90);
border: 1px solid var(--color-gray-50);
border-radius: 0.25em; /* 3px /12 */
text-decoration: none;
line-height: 1.8;
@ -185,18 +212,28 @@ a[href].post-tag:visited {
}
a[href].post-tag:hover,
a[href].post-tag:focus {
background-color: var(--lightgray);
background-color: var(--color-gray-20);
}
.postlist-item > .post-tag {
align-self: center;
}
/* Warning */
.warning {
background-color: #ffc;
/* Infobox */
:root {
--color-infobox: #ffc;
}
@media (prefers-color-scheme: dark) {
:root {
--color-infobox: #082840;
}
}
.infobox {
background-color: var(--color-infobox);
color: var(--color-gray-90);
padding: 1em 0.625em; /* 16px 10px /16 */
}
.warning ol:only-child {
.infobox ol:only-child {
margin: 0;
}

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "eleventy-base-blog",
"version": "6.0.0",
"version": "7.0.0",
"description": "A starter repository for a blog web site using the Eleventy static site generator.",
"scripts": {
"build": "npx @11ty/eleventy",
@ -28,7 +28,7 @@
"@11ty/eleventy": "^2.0.0-canary.12",
"@11ty/eleventy-navigation": "^0.3.3",
"@11ty/eleventy-plugin-rss": "^1.2.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
"luxon": "^2.4.0",
"markdown-it-anchor": "^8.6.4"
}

2
tags-list.njk
View File

@ -5,6 +5,6 @@ layout: layouts/home.njk
<h1>Tags</h1>
{% for tag in collections.all | getAllTags | filterTagList %}
{% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
{% endfor %}

3
tags.njk
View File

@ -5,7 +5,6 @@ pagination:
alias: tag
filter:
- all
- nav
- post
- posts
- tagList
@ -13,7 +12,7 @@ pagination:
layout: layouts/home.njk
eleventyComputed:
title: Tagged “{{ tag }}”
permalink: /tags/{{ tag | slug }}/
permalink: /tags/{{ tag | slugify }}/
---
<h1>Tagged “{{ tag }}”</h1>