Merge pull request #24 from alex-page/collections

Collections for projects, talks and blogs

.eleventy.js

@@ -1,41 +1,13 @@
-const MarkdownIt = require("markdown-it")();
-const MinifyCss  = require( 'clean-css' );
-const MinifyJS   = require( 'uglify-js' );
-const Fs         = require( 'fs' );
+// Dependencies
+const PrettyNumber     = require( 'number-abbreviate' );
+const MinifyCss        = require( 'clean-css' );
+const MinifyJS         = require( 'uglify-js' );
+const inclusiveLang    = require( '@11ty/eleventy-plugin-inclusive-language' );
 
-
-// Copy the default image renderer
-const defaultImageRenderer = MarkdownIt.renderer.rules.image;
-
-// Change the renderer for images that are links to youtube videos
-// https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
-MarkdownIt.renderer.rules.image = function (tokens, idx, options, env, self) {
-	const token    = tokens[idx];
-	const srcIndex = token.attrIndex( 'src' );
-	const src      = token.attrs[srcIndex][1];
-
-	// If the src is to a youtube video
-	if ( src.includes( 'youtube.com/watch?' ) ) {
-
-		// Get the alt text
-		const alt = token.content;
-
-		// Get the video ID from the src
-		let videoId = src.split( 'v=' )[1];
-		if( videoId.indexOf( '&' ) != -1 ) {
-			videoId = videoId.substring(0, ampersandPosition);
-		}
-
-		// Return an embedded video
-		return `<div class="embed-responsive"><iframe title="${ alt }" src="https://www.youtube.com/embed/${ videoId }" frameborder="0" allowfullscreen></iframe></div>`;
-	}
-
-	// Return the default
-	return defaultImageRenderer(tokens, idx, options, env, self);
-};
+// Local dependencies
+const Fs               = require( 'fs' );
 
 module.exports = ( eleventyConfig ) => {
-
 	/**
 	 * cssmin - Minify CSS filter
 	 */
@@ -61,24 +33,51 @@ module.exports = ( eleventyConfig ) => {
 		return minified.code;
 	});
 
+	/**
+	 * Get the parent page section
+	 */
+	eleventyConfig.addFilter( "tagSection", ( tags ) => {
+		let title = tags.filter( tag => tag !== 'featured' )
+			.map( tag => tag[ tag.length - 1 ] === 's' ? tag.slice(0, -1) : tag )
+			.join( ' ' );
+		return title;
+	});
+
+	/**
+	 * Get the current listing group
+	 */
+	eleventyConfig.addFilter( "tagTitle", ( tags ) => {
+		return tags.filter( tag => tag !== 'featured' ).join( ' ' );
+	});
+
+	/**
+	 * Return number as k
+	 */
+	eleventyConfig.addFilter( "prettyNumber", ( number ) => {
+		return PrettyNumber( number );
+	});
+
 	// Adjust default browserSync config
 	eleventyConfig.setBrowserSyncConfig({
 		open: 'local',
 		callbacks: {
-			ready: function(err, bs) {
-				const content_404 = Fs.readFileSync( 'site/404.html' );
+			ready: function( error, browserSync ) {
+				if( error ){
+					throw new Error( error );
+				}
 
-				bs.addMiddleware("*", (req, res) => {
-					// Provides the 404 content without redirect.
-					res.write(content_404);
-					res.end();
+				// Provides the 404 content without redirect.
+				const content_404 = Fs.readFileSync( 'site/404.html' );
+				browserSync.addMiddleware("*", ( request, response ) => {
+					response.write(content_404);
+					response.end();
 				});
 			}
 		}
 	});
 
-	// Apply the custom renderer
-	eleventyConfig.setLibrary( 'md', MarkdownIt );
+	// Add inclusive language plugin
+	eleventyConfig.addPlugin( inclusiveLang );
 
 	// The configuration object ( optional )
 	return {
@@ -88,7 +87,7 @@ module.exports = ( eleventyConfig ) => {
 			output: 'site'
 		},
 		templateFormats : ['njk', 'md'],
-		htmlTemplateEngine : false,
+		htmlTemplateEngine : 'njk',
 		markdownTemplateEngine: 'njk',
 	};
 };

.gitignore

@@ -8,3 +8,6 @@ node_modules
 site/*
 !site/assets/
 !site/CNAME
+
+# generated data file
+src/_data/data.json

README.md

@@ -1,9 +1,34 @@
-# [Alex Page](http://alexpage.com.au)
-
-> I am a Lead User Experience Developer at [Shopify](https://www.shopify.com).
-> 
+# ⚡️ [Alex Page](http://alexpage.com.au)
+
 > I specialise in design systems, JavaScript, open-source and accessibility. I love solving problems at scale with systemisation, automation, modern technology and thoughtful design.
 
-I am working on the [Polaris Design System](https://polaris.shopify.com/) helping solve common problems at scale.
+I am a Lead User Experience Developer at [Shopify](https://www.shopify.com) working on the [Polaris Design System](https://polaris.shopify.com/), helping solve common problems at scale.
 
 Previously I was the Lead User Experience Engineer on the [Australian Government Design System](https://designsystem.gov.au). I worked in a team to align 1000+ websites over 200+ organisations.
+
+---
+
+# Get started
+
+To install locally run make sure you have `nodejs` and `npm` installed. Then run:
+```
+npm install
+```
+
+
+# Watch for changes
+
+You can build the site locally and watch for changes by running:
+```
+npm run watch
+```
+
+
+# Deployment
+
+Deployment is through GitHub actions and automatically builds and deploys the site to GitHub pages.
+
+
+# Contributing
+
+Please feel free to contribute or explore the source code!