diff --git a/.eleventy.js b/.eleventy.js index 87de522..7da1dce 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -99,7 +99,12 @@ module.exports = eleventyConfig => { 'src/assets/images/favicon/*': '/' }); - // --------------------- Config ----------------------- + // --------------------- Custom Template Languages --------------------- + + eleventyConfig.addPlugin(require('./config/template-languages/css-config.js')); + eleventyConfig.addPlugin(require('./config/template-languages/js-config.js')); + + // --------------------- general config ----------------------- return { dir: { diff --git a/config/template-languages/css-config.js b/config/template-languages/css-config.js new file mode 100644 index 0000000..c0d435c --- /dev/null +++ b/config/template-languages/css-config.js @@ -0,0 +1,35 @@ +// CSS and JavaScript as first-class citizens in Eleventy: https://pepelsbey.dev/articles/eleventy-css-js/ + +const postcss = require('postcss'); +const postcssImport = require('postcss-import'); +const postcssImportExtGlob = require('postcss-import-ext-glob'); +const tailwindcss = require('tailwindcss'); +const autoprefixer = require('autoprefixer'); +const cssnano = require('cssnano'); + +module.exports = eleventyConfig => { + eleventyConfig.addTemplateFormats('css'); + + eleventyConfig.addExtension('css', { + outputFileExtension: 'css', + compile: async (content, path) => { + if (path !== './src/assets/css/global.css') { + return; + } + + return async () => { + let output = await postcss([ + postcssImportExtGlob, + postcssImport, + tailwindcss, + autoprefixer, + cssnano + ]).process(content, { + from: path + }); + + return output.css; + }; + } + }); +}; diff --git a/config/template-languages/js-config.js b/config/template-languages/js-config.js new file mode 100644 index 0000000..5b32323 --- /dev/null +++ b/config/template-languages/js-config.js @@ -0,0 +1,28 @@ +// CSS and JavaScript as first-class citizens in Eleventy: https://pepelsbey.dev/articles/eleventy-css-js/ + +const esbuild = require('esbuild'); + +module.exports = eleventyConfig => { + eleventyConfig.addTemplateFormats('js'); + + eleventyConfig.addExtension('js', { + outputFileExtension: 'js', + compile: async (content, path) => { + if (path !== './src/assets/scripts/app.js') { + return; + } + + return async () => { + let output = await esbuild.build({ + target: 'es2020', + entryPoints: [path], + minify: true, + bundle: true, + write: false + }); + + return output.outputFiles[0].text; + }; + } + }); +}; diff --git a/package-lock.json b/package-lock.json index dfb60dc..a396daa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@11ty/eleventy-plugin-rss": "^1.2.0", "@netlify/plugin-a11y": "^1.0.0-beta.1", "@toycode/markdown-it-class": "^1.2.4", + "autoprefixer": "^10.4.13", "clean-css": "^5.3.1", "concurrently": "^7.4.0", "cross-env": "^7.0.3", @@ -1018,6 +1019,39 @@ "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz", "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==" }, + "node_modules/autoprefixer": { + "version": "10.4.13", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz", + "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + } + ], + "dependencies": { + "browserslist": "^4.21.4", + "caniuse-lite": "^1.0.30001426", + "fraction.js": "^4.2.0", + "normalize-range": "^0.1.2", + "picocolors": "^1.0.0", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/axe-core": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.2.4.tgz", @@ -2558,6 +2592,19 @@ "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz", "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==" }, + "node_modules/fraction.js": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", + "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", + "dev": true, + "engines": { + "node": "*" + }, + "funding": { + "type": "patreon", + "url": "https://www.patreon.com/infusion" + } + }, "node_modules/fs-constants": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz", @@ -4135,6 +4182,15 @@ "node": ">=0.10.0" } }, + "node_modules/normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/normalize-url": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz", @@ -7879,6 +7935,20 @@ "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz", "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==" }, + "autoprefixer": { + "version": "10.4.13", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz", + "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==", + "dev": true, + "requires": { + "browserslist": "^4.21.4", + "caniuse-lite": "^1.0.30001426", + "fraction.js": "^4.2.0", + "normalize-range": "^0.1.2", + "picocolors": "^1.0.0", + "postcss-value-parser": "^4.2.0" + } + }, "axe-core": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.2.4.tgz", @@ -8989,6 +9059,12 @@ "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz", "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==" }, + "fraction.js": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", + "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", + "dev": true + }, "fs-constants": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz", @@ -10139,6 +10215,12 @@ "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" }, + "normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", + "dev": true + }, "normalize-url": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz", diff --git a/package.json b/package.json index 0f25b35..d082000 100644 --- a/package.json +++ b/package.json @@ -8,12 +8,8 @@ "main": ".eleventy.js", "scripts": { "clean": "rimraf dist", - "dev:postcss": "postcss src/assets/css/global.css --o dist/assets/css/global.css --watch --verbose", - "dev:scripts": "esbuild src/assets/scripts/app.js --bundle --watch --outdir=dist/assets", "dev:11ty": "eleventy --serve --watch", - "build:postcss": "NODE_ENV=production postcss src/assets/css/global.css -o dist/assets/css/global.css", "build:11ty": "cross-env ELEVENTY_ENV=production eleventy", - "build:scripts": "esbuild src/assets/scripts/app.js --bundle --minify --outdir=dist/assets --platform=node --tree-shaking=true", "start": "run-p dev:*", "build": "run-s clean build:*" }, @@ -36,6 +32,7 @@ "@11ty/eleventy-plugin-rss": "^1.2.0", "@netlify/plugin-a11y": "^1.0.0-beta.1", "@toycode/markdown-it-class": "^1.2.4", + "autoprefixer": "^10.4.13", "clean-css": "^5.3.1", "concurrently": "^7.4.0", "cross-env": "^7.0.3", diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk index 2f2c84f..b040716 100644 --- a/src/_layouts/base.njk +++ b/src/_layouts/base.njk @@ -51,7 +51,7 @@ {% endif %} - + {% include "partials/meta-info.njk" %}