cobweb/xmitter-11ty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More tweaks and CSS instructions

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
_includes/layouts/base.njk
View File

@ -6,15 +6,36 @@
<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 }}">
{#- 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 you’d like folks to know that you used Eleventy to build your site! #} {#- Uncomment this if you’d like folks to know that you used Eleventy to build your site! #}
{#- <meta name="generator" content="{{ eleventy.generator }}"> #} {#- <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/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="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> </head>
<body> <body>
<a href="#skip" class="visually-hidden">Skip to main content</a> <a href="#skip" class="visually-hidden">Skip to main content</a>

2
blog/fourthpost/fourthpost.md
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. 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 ## Section Header

21
eleventy.config.js
View File

@ -15,6 +15,8 @@ function relativeToInputPath(inputPath, relativeFilePath) {
} }
module.exports = function(eleventyConfig) { module.exports = function(eleventyConfig) {
// Don’t process these files
// https://www.11ty.dev/docs/ignores/#configuration-api
eleventyConfig.ignores.add("README.md"); eleventyConfig.ignores.add("README.md");
// Copy the contents of the `public` folder to the output folder // 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" "./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 // Plugins
eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginRss);
eleventyConfig.addPlugin(pluginSyntaxHighlight); eleventyConfig.addPlugin(pluginSyntaxHighlight);
eleventyConfig.addPlugin(pluginNavigation); eleventyConfig.addPlugin(pluginNavigation);
eleventyConfig.addPlugin(EleventyHtmlBasePlugin); eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
// Shortcodes // Eleventy Image shortcode
// https://www.11ty.dev/docs/plugins/image/
eleventyConfig.addPlugin(eleventyConfig => { 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 file = relativeToInputPath(this.page.inputPath, src);
let metadata = await eleventyImage(file, { let metadata = await eleventyImage(file, {
widths: ["auto"], widths: ["auto"],
// Can add "avif" or "jpeg" here if you’d like! // You can add "avif" or "jpeg" here if you’d like!
formats: ["webp", "png"], 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 we’re using addPlugin.
}); });
let imageAttributes = { let imageAttributes = {
alt, alt,
@ -48,7 +57,7 @@ module.exports = function(eleventyConfig) {
}; };
return eleventyImage.generateHTML(metadata, imageAttributes); return eleventyImage.generateHTML(metadata, imageAttributes);
}); });
}) });
// Filters // Filters
eleventyConfig.addFilter("readableDate", (dateObj, format = "dd LLLL yyyy") => { 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 // If your passthrough copy gets heavy and cumbersome, add this line
// to emulate the file copy on the dev server. Learn more: // to emulate the file copy on the dev server. Learn more:

13
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "eleventy-base-blog", "name": "eleventy-base-blog",
"version": "7.0.0", "version": "8.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 site generator.",
"scripts": { "scripts": {
"build": "npx @11ty/eleventy", "build": "npx @11ty/eleventy",
"build-ghpages": "npx @11ty/eleventy --pathprefix=/eleventy-base-blog/", "build-ghpages": "npx @11ty/eleventy --pathprefix=/eleventy-base-blog/",
@ -20,11 +20,18 @@
"url": "https://zachleat.com/" "url": "https://zachleat.com/"
}, },
"license": "MIT", "license": "MIT",
"engines": {
"node": ">=14"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/11ty"
},
"bugs": { "bugs": {
"url": "https://github.com/11ty/eleventy-base-blog/issues" "url": "https://github.com/11ty/eleventy-base-blog/issues"
}, },
"homepage": "https://github.com/11ty/eleventy-base-blog#readme", "homepage": "https://github.com/11ty/eleventy-base-blog#readme",
"dependencies": { "devDependencies": {
"@11ty/eleventy": "2.0.0-beta.1", "@11ty/eleventy": "2.0.0-beta.1",
"@11ty/eleventy-img": "^2.0.1", "@11ty/eleventy-img": "^2.0.1",
"@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-navigation": "^0.3.5",

4
public/css/message-box.css
View File

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