Merge branch 'main' into v2

# 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

View File

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

0
.nojekyll Normal file
View File

View File

@ -6,16 +6,16 @@ A starter repository showing how to build a blog with the [Eleventy](https://git
## Demos ## Demos
* [Netlify](https://eleventy-base-blog.netlify.com/) - [Netlify](https://eleventy-base-blog.netlify.com/)
* [GitHub Pages](https://11ty.github.io/eleventy-base-blog/) - [GitHub Pages](https://11ty.github.io/eleventy-base-blog/)
* [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog) - [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog)
## Deploy this to your own site ## Deploy this to your own site
Deploy this Eleventy site in just a few clicks on these services: 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 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 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/). 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 git clone https://github.com/11ty/eleventy-base-blog.git my-blog-name
``` ```
### 2. Navigate to the directory ### 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 npm install
``` ```
### 4. Edit _data/metadata.json ### 4. Edit \_data/metadata.json
### 5. Run Eleventy ### 5. Run Eleventy
``` ```
npx eleventy npx @11ty/eleventy
``` ```
Or build and host locally for local development Or build and host locally for local development
``` ```
npx eleventy --serve npx @11ty/eleventy --serve
``` ```
Or build automatically when a template changes: Or build automatically when a template changes:
``` ```
npx eleventy --watch npx @11ty/eleventy --watch
``` ```
Or in debug mode: Or in debug mode:
``` ```
DEBUG=* npx eleventy DEBUG=* npx @11ty/eleventy
``` ```
### Implementation Notes ### Implementation Notes
* `about/index.md` shows how to add a content page. - `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. - `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`. - 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 neednt be markdown, for example). Configure your supported templates in `.eleventy.js` -> `templateFormats`. - Content can be any template format (blog posts neednt 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 `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`. - 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: - This example uses three layouts:
* `_includes/layouts/base.njk`: the top level HTML structure - `_includes/layouts/base.njk`: the top level HTML structure
* `_includes/layouts/home.njk`: the home page template (wrapped into `base.njk`) - `_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/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. - `_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.

View File

@ -1,11 +1,13 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="{{ metadata.language }}">
<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 or metadata.title }}</title> <title>{{ title or metadata.title }}</title>
<meta name="description" content="{{ description or metadata.description }}"> <meta name="description" content="{{ description or metadata.description }}">
<meta name="generator" content="{{ eleventy.generator }}">
{#- Uncomment this if youd 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/index.css' | url }}">
<link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}"> <link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}">
@ -28,7 +30,7 @@
<main{% if templateClass %} class="{{ templateClass }}"{% endif %}> <main{% if templateClass %} class="{{ templateClass }}"{% endif %}>
<!-- Delete this message --> <!-- Delete this message -->
<div class="warning"> <div class="infobox">
<ol> <ol>
<li>Edit the <code>_data/metadata.json</code> with your blogs information.</li> <li>Edit the <code>_data/metadata.json</code> with your blogs information.</li>
<li>(Optional) Edit <code>.eleventy.js</code> with your <a href="https://www.11ty.dev/docs/config/">configuration preferences</a>.</li> <li>(Optional) Edit <code>.eleventy.js</code> with your <a href="https://www.11ty.dev/docs/config/">configuration preferences</a>.</li>

View File

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

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> <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> <time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
{% for tag in post.data.tags | filterTagList %} {% 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> <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
{% endfor %} {% endfor %}
</li> </li>

View File

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

View File

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

View File

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

View File

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