Merge pull request #11 from etchteam/release/v2

Release v2

.github/workflows/ci.yml

@@ -21,5 +21,7 @@ jobs:
                 node-version-file: .nvmrc
             - name: Install dependencies
               run: npm ci
+            - name: Lint
+              run: npm run lint
             - name: Build
               run: npm run build

.husky/pre-commit

@@ -0,0 +1 @@
+npx --no-install -- lint-staged

.nvmrc

@@ -1 +1 @@
-20.11.1
+20.12.2

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.stylelint": "explicit"
+  }
+}

eleventy.config.js

@@ -0,0 +1,72 @@
+import browserslist from 'browserslist';
+import { transform, browserslistToTargets } from 'lightningcss';
+import markdownIt from 'markdown-it';
+import { eleventyImagePlugin } from '@11ty/eleventy-img';
+import webc from '@11ty/eleventy-plugin-webc';
+import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight';
+import renderSvg from './lib/renderSvg.js';
+import findCollectionItem from './lib/findCollectionItem.js';
+
+async function transformCSS(content) {
+  if (this.type !== 'css') {
+    return content;
+  }
+
+  const targets = browserslistToTargets(browserslist('> 0.25% and not dead'));
+  const { code } = transform({
+    code: Buffer.from(content),
+    minify: true,
+    sourceMap: false,
+    targets,
+  });
+
+  return code;
+}
+
+export default function(eleventyConfig) {
+  // copy the assets folder to the output directory
+  eleventyConfig.addPassthroughCopy('src/assets');
+  // Reloading on css changes
+  eleventyConfig.addWatchTarget('src/styles/*.css');
+  // make functions available globally in templates
+  eleventyConfig.addJavaScriptFunction('renderSvg', renderSvg);
+  eleventyConfig.addJavaScriptFunction('findCollectionItem', findCollectionItem);
+  // support eleventy-image https://www.11ty.dev/docs/plugins/image
+  eleventyConfig.addPlugin(eleventyImagePlugin, {
+    formats: ['webp'],
+    widths: [800, 1600],
+    urlPath: '/assets/images/',
+    defaultAttributes: {
+      sizes: '100vw',
+      loading: 'lazy',
+    },
+  });
+  // load all components added to the src/components directory
+  eleventyConfig.addPlugin(webc, {
+    components: [
+      'src/components/**/*.webc',
+      'npm:@11ty/eleventy-img/*.webc',
+    ],
+    bundlePluginOptions: {
+      transforms: [transformCSS],
+    },
+  });
+  // Support markdown templates in webc using <template webc:type="11ty" 11ty:type="md">
+	eleventyConfig.setLibrary('md', markdownIt({
+		html: true,
+		breaks: true,
+		linkify: true,
+	}));
+  // add syntax highlighting to code blocks
+	eleventyConfig.addPlugin(syntaxHighlight);
+
+  return {
+    dir: {
+      layouts: 'layouts',
+      includes: 'components',
+      data: 'data',
+      input: 'src',
+      output: 'dist'
+    }
+  }
+};

lib/findCollectionItem.js

@@ -0,0 +1,9 @@
+/**
+ * Find an item within a collection by it’s url
+ * @param {Array} collection the collection to search
+ * @param {String} url the url of the item to search for
+ * @returns A collection item or undefined
+ */
+export default function findCollectionItem(collection = [], url = '') {
+  return collection.find(post => post.url === url);
+}

lib/renderSvg.js

@@ -0,0 +1,40 @@
+import Image from '@11ty/eleventy-img';
+import { optimize } from 'svgo';
+
+function addAttributes(svgString, attributes) {
+	const attributesString = attributes
+		.map(({ name, value }) => `${name}="${value}"`)
+		.join(' ');
+
+	return svgString.replace('<svg', `<svg ${attributesString}`);
+}
+
+/**
+ * Get an SVG string from a file using @11ty/eleventy-img and compress it with svgo
+ *
+ * @param {String} path svg file to load, relative to the root directory
+ * @param {Array<{ name, value }>} attributes additional attributes to add to the SVG tag
+ */
+export default async function renderSvg(path, attributes = []) {
+	const metadata = await Image(path, {
+		formats: ['svg'],
+		dryRun: true, // Don’t write to the file system
+	});
+
+	const svgString = addAttributes(metadata.svg[0].buffer.toString(), attributes);
+
+	const result = optimize(svgString, {
+		plugins: [
+			{
+				name: 'preset-default',
+				params: {
+					overrides: {
+						removeViewBox: false,
+					},
+				},
+			},
+		],
+	});
+
+	return result.data;
+}

lint-staged.config.cjs

@@ -0,0 +1 @@
+module.exports = { '*.css': 'stylelint --fix' };