https://github.com/jakechampion/jdxc

https://github.com/jakechampion/jdxc

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/jakechampion/jdxc
• Owner: JakeChampion
• License: mit
• Created: 2024-11-03T11:25:02.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-12T11:09:36.000Z (about 1 year ago)
• Last Synced: 2025-03-11T15:59:36.098Z (10 months ago)
• Language: XSLT
• Size: 521 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# eleventy-base-blog v9

## Features

- Using [Eleventy v3](https://github.com/11ty/eleventy/releases/tag/v3.0.0) with zero-JavaScript output.

	- Content is exclusively pre-rendered (this is a static site).

	- Can easily [deploy to a subfolder without changing any content](https://www.11ty.dev/docs/plugins/html-base/)

	- All URLs are decoupled from the content’s location on the file system.

	- Configure templates via the [Eleventy Data Cascade](https://www.11ty.dev/docs/data-cascade/)

- **Performance focused**: four-hundos Lighthouse score out of the box!

	- _0 Cumulative Layout Shift_

	- _0ms Total Blocking Time_

- Local development live reload provided by [Eleventy Dev Server](https://www.11ty.dev/docs/dev-server/).

- Content-driven [navigation menu](https://www.11ty.dev/docs/plugins/navigation/)

- Fully automated [Image optimization](https://www.11ty.dev/docs/plugins/image/)

	- Zero-JavaScript output.

	- Support for modern image formats automatically (e.g. AVIF and WebP)

	- Processes images on-request during `--serve` for speedy local builds.

	- Prefers `` markup if possible (single image format) but switches automatically to `` for multiple image formats.

	- Automated `` syntax markup with `srcset` and optional `sizes`

	- Includes `width`/`height` attributes to avoid [content layout shift](https://web.dev/cls/).

	- Includes `loading="lazy"` for native lazy loading without JavaScript.

	- Includes [`decoding="async"`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding)

	- Images can be co-located with blog post files.

- Per page CSS bundles [via `eleventy-plugin-bundle`](https://github.com/11ty/eleventy-plugin-bundle).

- Built-in [syntax highlighter](https://www.11ty.dev/docs/plugins/syntaxhighlight/) (zero-JavaScript output).

- Draft content: use `draft: true` to mark any template as a draft. Drafts are **only** included during `--serve`/`--watch` and are excluded from full builds. This is driven by the `addPreprocessor` configuration API in `eleventy.config.js`. Schema validator will show an error if non-boolean value is set in data cascade.

- Blog Posts

	- Automated next/previous links

	- Accessible deep links to headings

- Generated Pages

	- Home, Archive, and About pages.

	- [Atom feed included (with easy one-line swap to use RSS or JSON](https://www.11ty.dev/docs/plugins/rss/)

	- `sitemap.xml`

	- Zero-maintenance tag pages ([View on the Demo](https://eleventy-base-blog.netlify.app/tags/))

	- Content not found (404) page

### Implementation Notes

- `content/about/index.md` is an example of a content page.

- `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/).

- 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`.

- 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`.

- 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.

- This project uses three [Eleventy Layouts](https://www.11ty.dev/docs/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/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.

#### Content Security Policy

If your site enforces a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (as public-facing sites should), you have a few choices (pick one):

1. In `base.njk`, remove `{% getBundle "css" %}` and uncomment ``

2. Configure the server with the CSP directive `style-src: 'unsafe-inline'` (less secure).