Skip to content

Commit fa6d37d

Browse files
timmywiltimmywil
committed
First commit
1 parent 1fea07a commit fa6d37d

37 files changed

Lines changed: 1194 additions & 129 deletions

‎.editorconfig‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
indent_style = tab
5+
indent_size = 2
6+
end_of_line = lf
7+
insert_final_newline = true
8+
trim_trailing_whitespace = true
9+
charset = utf-8

‎.gitignore‎

Lines changed: 2 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,3 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
yarn-debug.log*
6-
yarn-error.log*
7-
lerna-debug.log*
8-
.pnpm-debug.log*
9-
10-
# Diagnostic reports (https://nodejs.org/api/report.html)
11-
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12-
13-
# Runtime data
14-
pids
15-
*.pid
16-
*.seed
17-
*.pid.lock
18-
19-
# Directory for instrumented libs generated by jscoverage/JSCover
20-
lib-cov
21-
22-
# Coverage directory used by tools like istanbul
23-
coverage
24-
*.lcov
25-
26-
# nyc test coverage
27-
.nyc_output
28-
29-
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30-
.grunt
31-
32-
# Bower dependency directory (https://bower.io/)
33-
bower_components
34-
35-
# node-waf configuration
36-
.lock-wscript
37-
38-
# Compiled binary addons (https://nodejs.org/api/addons.html)
39-
build/Release
40-
41-
# Dependency directories
1+
_site/
422
node_modules/
43-
jspm_packages/
44-
45-
# Snowpack dependency directory (https://snowpack.dev/)
46-
web_modules/
47-
48-
# TypeScript cache
49-
*.tsbuildinfo
50-
51-
# Optional npm cache directory
52-
.npm
53-
54-
# Optional eslint cache
55-
.eslintcache
56-
57-
# Optional stylelint cache
58-
.stylelintcache
59-
60-
# Microbundle cache
61-
.rpt2_cache/
62-
.rts2_cache_cjs/
63-
.rts2_cache_es/
64-
.rts2_cache_umd/
65-
66-
# Optional REPL history
67-
.node_repl_history
68-
69-
# Output of 'npm pack'
70-
*.tgz
71-
72-
# Yarn Integrity file
73-
.yarn-integrity
74-
75-
# dotenv environment variable files
76-
.env
77-
.env.development.local
78-
.env.test.local
79-
.env.production.local
80-
.env.local
81-
82-
# parcel-bundler cache (https://parceljs.org/)
83-
.cache
84-
.parcel-cache
85-
86-
# Next.js build output
87-
.next
88-
out
89-
90-
# Nuxt.js build / generate output
91-
.nuxt
92-
dist
93-
94-
# Gatsby files
95-
.cache/
96-
# Comment in the public line in if your project uses Gatsby and not Next.js
97-
# https://nextjs.org/blog/next-9-1#public-directory-support
98-
# public
99-
100-
# vuepress build output
101-
.vuepress/dist
102-
103-
# vuepress v2.x temp and cache directory
104-
.temp
105-
.cache
106-
107-
# Docusaurus cache and generated files
108-
.docusaurus
109-
110-
# Serverless directories
111-
.serverless/
112-
113-
# FuseBox cache
114-
.fusebox/
115-
116-
# DynamoDB Local files
117-
.dynamodb/
118-
119-
# TernJS port file
120-
.tern-port
121-
122-
# Stores VSCode versions used for testing VSCode extensions
123-
.vscode-test
124-
125-
# yarn v2
126-
.yarn/cache
127-
.yarn/unplugged
128-
.yarn/build-state.yml
129-
.yarn/install-state.gz
130-
.pnp.*
3+
package-lock.json

‎.nojekyll‎

Whitespace-only changes.

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
16

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2017–2023 Zach Leatherman @zachleat
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
# eleventy-base-blog v8
2+
3+
A starter repository showing how to build a blog with the [Eleventy](https://www.11ty.dev/) site generator (using the [v2.0 release](https://www.11ty.dev/blog/eleventy-v2/)).
4+
5+
[![Netlify Status](https://api.netlify.com/api/v1/badges/802669dd-d5f8-4d49-963d-6d57b257c2a2/deploy-status)](https://app.netlify.com/sites/eleventy-base-blog/deploys)
6+
7+
## Getting Started
8+
9+
* [Want a more generic/detailed getting started guide?](https://www.11ty.dev/docs/getting-started/)
10+
11+
1. Make a directory and navigate to it:
12+
13+
```
14+
mkdir my-blog-name
15+
cd my-blog-name
16+
```
17+
18+
2. Clone this Repository
19+
20+
```
21+
git clone https://github.com/11ty/eleventy-base-blog.git .
22+
```
23+
24+
_Optional:_ Review `eleventy.config.js` and `_data/metadata.js` to configure the site’s options and data.
25+
26+
3. Install dependencies
27+
28+
```
29+
npm install
30+
```
31+
32+
4. Run Eleventy
33+
34+
Generate a production-ready build to the `_site` folder:
35+
36+
```
37+
npx @11ty/eleventy
38+
```
39+
40+
Or build and host on a local development server:
41+
42+
```
43+
npx @11ty/eleventy --serve
44+
```
45+
46+
Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the internals.
47+
48+
## Features
49+
50+
- Using [Eleventy v2.0](https://www.11ty.dev/blog/eleventy-v2/) with zero-JavaScript output.
51+
- Content is exclusively pre-rendered (this is a static site).
52+
- Can easily [deploy to a subfolder without changing any content](https://www.11ty.dev/docs/plugins/html-base/)
53+
- All URLs are decoupled from the content’s location on the file system.
54+
- Configure templates via the [Eleventy Data Cascade](https://www.11ty.dev/docs/data-cascade/)
55+
- **Performance focused**: four-hundos Lighthouse score out of the box!
56+
- [View the Lighthouse report for the latest build](https://eleventy-base-blog.netlify.app/reports/lighthouse/) courtesy of the [Netlify Lighthouse plugin](https://github.com/netlify/netlify-plugin-lighthouse).
57+
- _0 Cumulative Layout Shift_
58+
- _0ms Total Blocking Time_
59+
- Local development live reload provided by [Eleventy Dev Server](https://www.11ty.dev/docs/dev-server/).
60+
- Content-driven [navigation menu](https://www.11ty.dev/docs/plugins/navigation/)
61+
- [Image optimization](https://www.11ty.dev/docs/plugins/image/) via the `{% image %}` shortcode.
62+
- Zero-JavaScript output.
63+
- Support for modern image formats automatically (e.g. AVIF and WebP)
64+
- Prefers `<img>` markup if possible (single image format) but switches automatically to `<picture>` for multiple image formats.
65+
- Automated `<picture>` syntax markup with `srcset` and optional `sizes`
66+
- Includes `width`/`height` attributes to avoid [content layout shift](https://web.dev/cls/).
67+
- Includes `loading="lazy"` for native lazy loading without JavaScript.
68+
- Includes [`decoding="async"`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding)
69+
- Images can be co-located with blog post files.
70+
- View the [Image plugin source code](https://github.com/11ty/eleventy-base-blog/blob/main/eleventy.config.images.js)
71+
- Per page CSS bundles [via `eleventy-plugin-bundle`](https://github.com/11ty/eleventy-plugin-bundle).
72+
- Built-in [syntax highlighter](https://www.11ty.dev/docs/plugins/syntaxhighlight/) (zero-JavaScript output).
73+
- Blog Posts
74+
- Draft posts: use `draft: true` to mark a blog post as a draft. Drafts are **only** included during `--serve`/`--watch` and are excluded from full builds. View the [Drafts plugin source code](https://github.com/11ty/eleventy-base-blog/blob/main/eleventy.config.drafts.js).
75+
- Automated next/previous links
76+
- Accessible deep links to headings
77+
- Generated Pages
78+
- Home, Archive, and About pages.
79+
- [Feeds for Atom and JSON](https://www.11ty.dev/docs/plugins/rss/)
80+
- `sitemap.xml`
81+
- Zero-maintenance tag pages ([View on the Demo](https://eleventy-base-blog.netlify.app/tags/))
82+
- Content not found (404) page
83+
84+
## Demos
85+
86+
- [Netlify](https://eleventy-base-blog.netlify.com/)
87+
- [GitHub Pages](https://11ty.github.io/eleventy-base-blog/)
88+
- [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog)
89+
90+
## Deploy this to your own site
91+
92+
Deploy this Eleventy site in just a few clicks on these services:
93+
94+
- [Get your own Eleventy web site on Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog)
95+
- If you run Eleventy locally you can drag your `_site` folder to [`drop.netlify.com`](https://drop.netlify.com/) to upload it without using `git`.
96+
- [Get your own Eleventy web site on Vercel](https://vercel.com/import/project?template=11ty%2Feleventy-base-blog)
97+
- Read more about [Deploying an Eleventy project](https://www.11ty.dev/docs/deployment/) to the web.
98+
99+
### Implementation Notes
100+
101+
- `content/about/index.md` is an example of a content page.
102+
- `content/blog/` has the blog posts but really they can live in any directory. They need only the `posts` tag to be included in the blog posts [collection](https://www.11ty.dev/docs/collections/).
103+
- Use the `eleventyNavigation` key (via the [Eleventy Navigation plugin](https://www.11ty.dev/docs/plugins/navigation/)) in your front matter to add a template to the top level site navigation. This is in use on `content/index.njk` and `content/about/index.md`.
104+
- Content can be in _any template format_ (blog posts needn’t exclusively be markdown, for example). Configure your project’s supported templates in `eleventy.config.js` -> `templateFormats`.
105+
- The `public` folder in your input directory will be copied to the output folder (via `addPassthroughCopy` in the `eleventy.config.js` file). This means `./public/css/*` will live at `./_site/css/*` after your build completes.
106+
- Provides two content feeds:
107+
- `content/feed/feed.njk`
108+
- `content/feed/json.njk`
109+
- This project uses three [Eleventy Layouts](https://www.11ty.dev/docs/layouts/):
110+
- `_includes/layouts/base.njk`: the top level HTML structure
111+
- `_includes/layouts/home.njk`: the home page template (wrapped into `base.njk`)
112+
- `_includes/layouts/post.njk`: the blog post template (wrapped into `base.njk`)
113+
- `_includes/postslist.njk` is a Nunjucks include and is a reusable component used to display a list of all the posts. `content/index.njk` has an example of how to use it.
114+
115+
If your site enforces a Content Security Policy (as public-facing sites should), either, in `base.njk`, disable
116+
```html
117+
<style>{% getBundle "css" %}</style>
118+
```
119+
and enable
120+
```html
121+
<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
122+
```
123+
or configure the server with the CSP directive `style-src: 'unsafe-inline'` (which is less secure).

‎_data/metadata.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
title: "jQuery - Bug Tracker",
3+
url: "https://bugs.jquery.com/",
4+
language: "en",
5+
description: "Static archive of the old bugs.jquery.com trac site.",
6+
author: {
7+
name: "Timmy Willison",
8+
email: "timmywil@users.noreply.github.com",
9+
url: "https://timmywil.com/",
10+
},
11+
};

‎_includes/layouts/base.njk‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!doctype html>
2+
<html lang="{{ metadata.language }}">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>{{ title or metadata.title }}</title>
7+
<meta name="description" content="{{ description or metadata.description }}">
8+
9+
{#- Atom and JSON feeds included by default #}
10+
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
11+
<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
12+
13+
{#- Uncomment this if you’d like folks to know that you used Eleventy to build your site! #}
14+
{#- <meta name="generator" content="{{ eleventy.generator }}"> #}
15+
16+
{#-
17+
CSS bundles are provided via the `eleventy-plugin-bundle` plugin:
18+
1. You can add to them using `{% css %}`
19+
2. You can get from them using `{% getBundle "css" %}` or `{% getBundleFileUrl "css" %}`
20+
3. You can do the same for JS: {% js %}{% endjs %} and <script>{% getBundle "js" %}</script>
21+
4. Learn more: https://github.com/11ty/eleventy-plugin-bundle
22+
#}
23+
24+
{#- Add an arbitrary string to the bundle #}
25+
{%- css %}* { box-sizing: border-box; }{% endcss %}
26+
{#- Add the contents of a file to the bundle #}
27+
{%- css %}{% include "public/css/index.css" %}{% endcss %}
28+
{#- Or add from node_modules #}
29+
{# {%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %} #}
30+
31+
{#- Render the CSS bundle using Inlined CSS (for the fastest site performance in production) #}
32+
<style>{% getBundle "css" %}</style>
33+
{#- Renders the CSS bundle using a separate file, if you can't set CSP directive style-src: 'unsafe-inline' #}
34+
{#- <link rel="stylesheet" href="{% getBundleFileUrl "css" %}"> #}
35+
</head>
36+
<body>
37+
<a href="#skip" class="visually-hidden">Skip to main content</a>
38+
39+
<header>
40+
<a href="/" class="home-link">{{ metadata.title }}</a>
41+
42+
{#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
43+
<nav>
44+
<h2 class="visually-hidden">Top level navigation menu</h2>
45+
<ul class="nav">
46+
{%- for entry in collections.all | eleventyNavigation %}
47+
<li class="nav-item"><a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a></li>
48+
{%- endfor %}
49+
</ul>
50+
</nav>
51+
</header>
52+
53+
<main id="skip">
54+
{{ content | safe }}
55+
</main>
56+
57+
<footer></footer>
58+
59+
<!-- Current page: {{ page.url | htmlBaseUrl }} -->
60+
</body>
61+
</html>

‎_includes/layouts/home.njk‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
layout: layouts/base.njk
3+
---
4+
<!-- Delete this message, it will also remove the component CSS from the bundle -->
5+
{%- css %}{% include "public/css/message-box.css" %}{% endcss %}
6+
<div class="message-box">
7+
<ol>
8+
<li>Edit the <code>_data/metadata.js</code> with your blog’s information.</li>
9+
<li>(Optional) Edit <code>eleventy.config.js</code> with your <a href="https://www.11ty.dev/docs/config/">configuration preferences</a>.</li>
10+
<li>Delete this message from <code>_includes/layouts/home.njk</code>.</li>
11+
</ol>
12+
<p><em>This is an <a href="https://www.11ty.dev/">Eleventy project</a> created from the <a href="https://github.com/11ty/eleventy-base-blog"><code>eleventy-base-blog</code> repo</a>.</em></p>
13+
</div>
14+
<!-- Stop deleting -->
15+
16+
{{ content | safe }}

0 commit comments

Comments
 (0)