More tweaks and CSS instructions

This commit is contained in:
Zach Leatherman 2023-01-23 14:39:36 -06:00
parent 87f15a24bd
commit 89afffd565
5 changed files with 52 additions and 15 deletions

View File

@ -6,15 +6,36 @@
<title>{{ title or metadata.title }}</title>
<meta name="description" content="{{ description or metadata.description }}">
{#- Atom and JSON feeds included by default #}
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
{#- Uncomment this if youd like folks to know that you used Eleventy to build your site! #}
{#- <meta name="generator" content="{{ eleventy.generator }}"> #}
{#-
Choices for CSS:
1. External files (best with local dev server live reload)
#}
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/prism-okaidia.css">
<link rel="stylesheet" href="/css/prism-okaidia.css">{# addPassthroughCopy file #}
<link rel="stylesheet" href="/css/prism-diff.css">
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
{#-
2. Inlined (speediest in production)
<style>
{% include "public/css/index.css" %}
{% include "node_modules/prismjs/themes/prism-okaidia.css" %}
{% include "public/css/prism-diff.css" %}
</style>
3. Concatenate CSS to one file (slower than 2 but faster than 1):
https://www.11ty.dev/docs/quicktips/concatenate/
4. Use a bundler
e.g. Vite https://www.11ty.dev/docs/server-vite/
Or search for additional community plugins for esbuild, rollup, webpack, etc.
#}
</head>
<body>
<a href="#skip" class="visually-hidden">Skip to main content</a>

View File

@ -8,7 +8,7 @@ Leverage agile frameworks to provide a robust synopsis for high level overviews.
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
{% imageOptimized "./possum.png", "A possum parent and two possum kids hanging from the iconic red balloon" %}
{% image "./possum.png", "A possum parent and two possum kids hanging from the iconic red balloon" %}
## Section Header

View File

@ -15,6 +15,8 @@ function relativeToInputPath(inputPath, relativeFilePath) {
}
module.exports = function(eleventyConfig) {
// Dont process these files
// https://www.11ty.dev/docs/ignores/#configuration-api
eleventyConfig.ignores.add("README.md");
// Copy the contents of the `public` folder to the output folder
@ -24,21 +26,28 @@ module.exports = function(eleventyConfig) {
"./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-okaidia.css"
});
// Run Eleventy when these files change:
// https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets
// Process content images to the image pipeline.
eleventyConfig.addWatchTarget("**/*.(png|jpeg)");
// Plugins
eleventyConfig.addPlugin(pluginRss);
eleventyConfig.addPlugin(pluginSyntaxHighlight);
eleventyConfig.addPlugin(pluginNavigation);
eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
// Shortcodes
// Eleventy Image shortcode
// https://www.11ty.dev/docs/plugins/image/
eleventyConfig.addPlugin(eleventyConfig => {
eleventyConfig.addAsyncShortcode("imageOptimized", async function imageShortcode(src, alt, sizes) {
eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, sizes) {
let file = relativeToInputPath(this.page.inputPath, src);
let metadata = await eleventyImage(file, {
widths: ["auto"],
// Can add "avif" or "jpeg" here if youd like!
// You can add "avif" or "jpeg" here if youd like!
formats: ["webp", "png"],
outputDir: path.join(eleventyConfig.dir.output, "img"),
outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because were using addPlugin.
});
let imageAttributes = {
alt,
@ -48,7 +57,7 @@ module.exports = function(eleventyConfig) {
};
return eleventyImage.generateHTML(metadata, imageAttributes);
});
})
});
// Filters
eleventyConfig.addFilter("readableDate", (dateObj, format = "dd LLLL yyyy") => {
@ -103,7 +112,7 @@ module.exports = function(eleventyConfig) {
});
});
// Features to make your build faster (as you need them)
// Features to make your build faster (when you need them)
// If your passthrough copy gets heavy and cumbersome, add this line
// to emulate the file copy on the dev server. Learn more:

View File

@ -1,7 +1,7 @@
{
"name": "eleventy-base-blog",
"version": "7.0.0",
"description": "A starter repository for a blog web site using the Eleventy static site generator.",
"version": "8.0.0",
"description": "A starter repository for a blog web site using the Eleventy site generator.",
"scripts": {
"build": "npx @11ty/eleventy",
"build-ghpages": "npx @11ty/eleventy --pathprefix=/eleventy-base-blog/",
@ -20,11 +20,18 @@
"url": "https://zachleat.com/"
},
"license": "MIT",
"engines": {
"node": ">=14"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/11ty"
},
"bugs": {
"url": "https://github.com/11ty/eleventy-base-blog/issues"
},
"homepage": "https://github.com/11ty/eleventy-base-blog#readme",
"dependencies": {
"devDependencies": {
"@11ty/eleventy": "2.0.0-beta.1",
"@11ty/eleventy-img": "^2.0.1",
"@11ty/eleventy-navigation": "^0.3.5",

View File

@ -7,8 +7,8 @@
color: var(--color-gray-90);
padding: 1em 0.625em; /* 16px 10px /16 */
}
.message-box ol:only-child {
margin: 0;
.message-box ol {
margin-top: 0;
}
@media (prefers-color-scheme: dark) {