Merge pull request #5 from claudia-rndrs/upgrade/eleventy-3
Upgraded project to newest Eleventy and refactored project from commo…
This commit is contained in:
Claudia R
GitHub
commit
58defb32d7
87
.eleventy.js
87
.eleventy.js
|
|
@ -1,81 +1,80 @@
|
|||
const eleventyNavigationPlugin = require('@11ty/eleventy-navigation')
|
||||
const pluginRss = require('@11ty/eleventy-plugin-rss')
|
||||
import eleventyNavigationPlugin from "@11ty/eleventy-navigation"
|
||||
import pluginRss from "@11ty/eleventy-plugin-rss"
|
||||
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img"
|
||||
import pluginIcons from "eleventy-plugin-icons"
|
||||
|
||||
const {
|
||||
getAllPosts,
|
||||
import {
|
||||
getAllPosts,
|
||||
getCategoryList,
|
||||
getCategorisedPosts
|
||||
} = require('./config/collections')
|
||||
getCategorisedPosts,
|
||||
} from "./config/collections.js"
|
||||
|
||||
const {
|
||||
readableDate
|
||||
} = require('./config/filters')
|
||||
import { readableDate } from "./config/filters.js"
|
||||
|
||||
const {
|
||||
imageShortcode
|
||||
} = require('./config/shortcodes')
|
||||
const imageConfig = {
|
||||
extensions: "html",
|
||||
formats: ["webp"],
|
||||
widths: [300, 600, 900, "auto"],
|
||||
defaultAttributes: {
|
||||
loading: "lazy",
|
||||
decoding: "async",
|
||||
sizes: "100vw",
|
||||
},
|
||||
urlPath: "/images/",
|
||||
}
|
||||
|
||||
|
||||
module.exports = function(eleventyConfig) {
|
||||
|
||||
export default function (eleventyConfig) {
|
||||
/*================================*/
|
||||
/* plugins and configurations */
|
||||
/*================================*/
|
||||
eleventyConfig.addPlugin(eleventyNavigationPlugin)
|
||||
eleventyConfig.addPlugin(pluginRss)
|
||||
eleventyConfig.addPlugin(eleventyImageTransformPlugin, imageConfig)
|
||||
|
||||
eleventyConfig.setFrontMatterParsingOptions({
|
||||
excerpt: true,
|
||||
excerpt_separator: "<!-- excerpt -->",
|
||||
excerpt_alias: 'excerpt'
|
||||
excerpt_alias: "excerpt",
|
||||
})
|
||||
|
||||
eleventyConfig.addPlugin(pluginIcons, {
|
||||
sources: [{ name: "custom", path: "./src/assets/icons" }],
|
||||
})
|
||||
|
||||
/*===================================================*/
|
||||
/* files that need to be copied to the build folder */
|
||||
/*===================================================*/
|
||||
eleventyConfig.addPassthroughCopy('./src/assets/social-image.jpg')
|
||||
eleventyConfig.addPassthroughCopy('./src/assets/icons')
|
||||
eleventyConfig.addPassthroughCopy('./src/assets/sprite.svg')
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
'node_modules/svg-icon-sprite/dist/svg-icon-sprite.js': 'assets/svg-icon-sprite.js'
|
||||
})
|
||||
|
||||
eleventyConfig.addPassthroughCopy("./src/assets/social-image.jpg")
|
||||
eleventyConfig.addPassthroughCopy("./src/assets/icons")
|
||||
eleventyConfig.addPassthroughCopy("./src/assets/sprite.svg")
|
||||
|
||||
/*=================*/
|
||||
/* Layouts */
|
||||
/*=================*/
|
||||
eleventyConfig.addLayoutAlias('page', 'layouts/page')
|
||||
eleventyConfig.addLayoutAlias('article', 'layouts/article')
|
||||
|
||||
eleventyConfig.addLayoutAlias("page", "layouts/page")
|
||||
eleventyConfig.addLayoutAlias("article", "layouts/article")
|
||||
|
||||
/*=================*/
|
||||
/* Collections */
|
||||
/*=================*/
|
||||
eleventyConfig.addCollection('blog', getAllPosts)
|
||||
eleventyConfig.addCollection('categoryList', getCategoryList)
|
||||
eleventyConfig.addCollection('categorisedPosts', getCategorisedPosts)
|
||||
eleventyConfig.addCollection("blog", getAllPosts)
|
||||
eleventyConfig.addCollection("categoryList", getCategoryList)
|
||||
eleventyConfig.addCollection("categorisedPosts", getCategorisedPosts)
|
||||
|
||||
|
||||
/*=================*/
|
||||
/* Filters */
|
||||
/*=================*/
|
||||
eleventyConfig.addFilter('readableDate', readableDate)
|
||||
|
||||
|
||||
/*=================*/
|
||||
/* shortcodes */
|
||||
/*=================*/
|
||||
eleventyConfig.addNunjucksAsyncShortcode('image', imageShortcode)
|
||||
|
||||
eleventyConfig.addFilter("readableDate", readableDate)
|
||||
|
||||
|
||||
return {
|
||||
dir: {
|
||||
input: 'src',
|
||||
output: '_site',
|
||||
includes: '_includes',
|
||||
data: '_data'
|
||||
input: "src",
|
||||
output: "_site",
|
||||
includes: "_includes",
|
||||
data: "_data",
|
||||
},
|
||||
markdownTemplateEngine: 'njk'
|
||||
}
|
||||
}
|
||||
markdownTemplateEngine: "njk",
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
const slugify = require('slugify')
|
||||
import slugify from 'slugify'
|
||||
|
||||
/* Creating a collection containing all blogposts by filtering based on folder and filetype */
|
||||
const getAllPosts = (collectionApi) => {
|
||||
|
|
@ -20,13 +20,12 @@ const getCategoryList = (collectionApi) => {
|
|||
|
||||
temp.forEach((category) => {
|
||||
const slug = strToSlug(category);
|
||||
|
||||
if(slug !== 'in-the-spotlight') {
|
||||
catPages.push({
|
||||
'key': slug,
|
||||
'name': category
|
||||
})
|
||||
}
|
||||
|
||||
catPages.push({
|
||||
'key': slug,
|
||||
'name': category
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
return catPages
|
||||
|
|
@ -54,7 +53,7 @@ const getCategorisedPosts = (collectionApi) => {
|
|||
return categorisedPosts
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
export {
|
||||
getAllPosts,
|
||||
getCategoryList,
|
||||
getCategorisedPosts
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
const { DateTime } = require('luxon')
|
||||
import { DateTime } from 'luxon'
|
||||
|
||||
const readableDate = (dateObj) => {
|
||||
return DateTime.fromJSDate(dateObj, {
|
||||
|
|
@ -6,6 +6,6 @@ const readableDate = (dateObj) => {
|
|||
}).setLocale('en').toLocaleString(DateTime.DATE_FULL)
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
export {
|
||||
readableDate
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
const Image = require('@11ty/eleventy-img')
|
||||
|
||||
const imageShortcode = async (imageObj = {}) => {
|
||||
const widths = imageObj.widths || [300, 600, 900, 1200]
|
||||
const className = imageObj.className || "image"
|
||||
|
||||
const sizes = "(min-width: 100px) 50vw, 100vw"
|
||||
const metadata = await Image(imageObj.src, {
|
||||
formats: ["webp"],
|
||||
outputDir: "./_site/assets/images/generated/",
|
||||
urlPath: "/assets/images/generated/",
|
||||
widths: widths
|
||||
})
|
||||
const alt = imageObj.alt;
|
||||
|
||||
const imageAttributes = {
|
||||
class: className,
|
||||
alt,
|
||||
sizes,
|
||||
loading: "lazy",
|
||||
decoding: "async",
|
||||
}
|
||||
|
||||
return Image.generateHTML(metadata, imageAttributes)
|
||||
}
|
||||
|
||||
|
||||
module.exports = {
|
||||
imageShortcode
|
||||
}
|
||||
13
package.json
13
package.json
|
|
@ -3,13 +3,13 @@
|
|||
"version": "1.0.0",
|
||||
"description": "A not so minimal starter for building a website + blog using the Eleventy static site generator.",
|
||||
"main": "index.md",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"generate:sprite": "svg-icon-generate --folder=src/assets/icons --output=src/assets/sprite.svg",
|
||||
"watch:eleventy": "eleventy --serve",
|
||||
"watch:sass": "sass --watch src/assets/theming:_site/assets",
|
||||
"build:eleventy": "eleventy",
|
||||
"build:sass": "sass --no-source-map --style=compressed src/assets/theming:_site/assets",
|
||||
"start": "npm-run-all build:sass generate:sprite --parallel watch:*",
|
||||
"start": "npm-run-all build:sass --parallel watch:*",
|
||||
"build": "npm-run-all build:*",
|
||||
"debug": "DEBUG=* npx eleventy"
|
||||
},
|
||||
|
|
@ -19,13 +19,14 @@
|
|||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@11ty/eleventy": "^2.0.0",
|
||||
"@11ty/eleventy-img": "^3.0.0",
|
||||
"@11ty/eleventy": "^3.0.0",
|
||||
"@11ty/eleventy-img": "^5.0.0",
|
||||
"@11ty/eleventy-navigation": "^0.3.5",
|
||||
"@11ty/eleventy-plugin-rss": "^1.2.0",
|
||||
"@11ty/eleventy-plugin-rss": "^2.0.2",
|
||||
"@11ty/eleventy-upgrade-help": "^3.0.1",
|
||||
"luxon": "^3.2.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"sass": "^1.58.3",
|
||||
"svg-icon-sprite": "^1.1.1"
|
||||
"eleventy-plugin-icons": "^4.5.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,7 @@
|
|||
<a class="social-media__link"
|
||||
href="https://twitter.com/claudia_rndrs"
|
||||
target="_blank">
|
||||
<svg-icon
|
||||
src="/assets/sprite.svg#twitter"
|
||||
width="16px"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
></svg-icon>
|
||||
{% icon "custom:twitter", class="icon" %}
|
||||
|
||||
<span class="sr-only">Twitter</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
<meta name="description" content="{{ metadata.description }}">
|
||||
<meta name="author" content="{{ metadata.author.name }}">
|
||||
<meta name="generator" content="{{ eleventy.generator }}">
|
||||
|
||||
<meta property="og:title" content="{{ title }}">
|
||||
<meta property="og:type" content="website">
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
|
||||
<symbol id="twitter"
|
||||
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32">
|
||||
<title>twitter</title>
|
||||
<path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path>
|
||||
</symbol>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1009 B |
|
|
@ -8,5 +8,5 @@ category: "cat1"
|
|||
Having landed on this Eleventy starter, you probably are no stranger to Eleventy. But if you are, you should definitely check out its benefits. Getting started with Eleventy is quick and easy.
|
||||
<!-- excerpt -->
|
||||
|
||||
{% image {src: "https://images.unsplash.com/photo-1555066931-4365d14bab8c", alt: "A laptop with some lines of code on the screen", className: "image", widths: [300, 600] } %}
|
||||
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c" alt="A laptop with some lines of code on the screen" />
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ This eleventy starter already includes:
|
|||
- Basic site navigation with eleventy-navigation
|
||||
- Blog categories & category based navigation
|
||||
- Image optimisation with Eleventy-img
|
||||
- SVG icons with svg-icon-sprite
|
||||
- SVG icons with Eleventy-plugin-icon
|
||||
- SEO (sitemap, metadata, robots.txt)
|
||||
- RSS feed
|
||||
- Luxon for handling dates & times
|
||||
|
|
|
|||
Loading…
Reference in New Issue