diff --git a/.eleventy.js b/.eleventy.js index e36af01..952f7f2 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -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") }); }); diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md index af51ba3..c4a8960 100644 --- a/README.md +++ b/README.md @@ -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. + diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index c122533..a1787c9 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -1,11 +1,13 @@ - + {{ title or metadata.title }} - + + {#- Uncomment this if you’d like folks to know that you used Eleventy to build your site! #} + {#- #} @@ -28,7 +30,7 @@ -
+
  1. Edit the _data/metadata.json with your blog’s information.
  2. (Optional) Edit .eleventy.js with your configuration preferences.
    3. diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk index 4d7327c..bf2d93f 100644 --- a/_includes/layouts/post.njk +++ b/_includes/layouts/post.njk @@ -5,8 +5,8 @@ templateClass: tmpl-post

    {{ title }}

    -{%- for tag in tags | filterTagList -%} -{%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%} +{%- for tag in tags | filterTagList %} +{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %} {{ tag }} {%- endfor %} diff --git a/_includes/postslist.njk b/_includes/postslist.njk index d220513..ab8327a 100644 --- a/_includes/postslist.njk +++ b/_includes/postslist.njk @@ -4,7 +4,7 @@ {% if post.data.title %}{{ post.data.title }}{% else %}{{ post.url }}{% endif %} {% for tag in post.data.tags | filterTagList %} - {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %} + {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %} {{ tag }} {% endfor %} diff --git a/css/index.css b/css/index.css index 25c9c82..f83cadf 100644 --- a/css/index.css +++ b/css/index.css @@ -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; } diff --git a/package.json b/package.json index 73f19a0..77019a0 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/tags-list.njk b/tags-list.njk index 340da11..eff5a8e 100644 --- a/tags-list.njk +++ b/tags-list.njk @@ -5,6 +5,6 @@ layout: layouts/home.njk

    Tags

    {% for tag in collections.all | getAllTags | filterTagList %} - {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %} + {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %} {{ tag }} {% endfor %} diff --git a/tags.njk b/tags.njk index 0fbd53b..852d923 100644 --- a/tags.njk +++ b/tags.njk @@ -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 }}/ ---

    Tagged “{{ tag }}”