Add blog component to website (#25)

* Set up 11ty website (#3)

* update readme, move htaccess

* the most basic 11ty setup

* add default layout with global includes

* add home layout, include home and about pages

* add `site.json`, move title and website title

* add global navigation menu

* add basic sidebar with profile info

* add social links, update sidebar

* add global footer, update about and social partials

* set up sass skeleton

* include sass reset and placeholder color vars

* add basic layout

* remove link to About page if on the About page

* display title and sidebar based on layout

* add layout for sidebar

* reorganize global and layout sass, lightly style site title

* adjust specificity of paragraphs

* add colors and color tokens

* add hero section to layouts

* move color stuff around

* new colors (again?!)

* add icons and logo, update header and footer (with icon attribution)

* add route illustration

* update container classes, add copyright to footer

* add some footer styles

* update hero and hero styles

* add layout and color to global header

* update flex for global header

* update background color on header

* add homepage hero layout, move sidebar to utility class

* add border to hero image

* lightly style the page aside

* adjust social links, fix hero images on pages

* add style to global menu links

* update width for about profile image

* move icons to includes, add social link icons

* add sidebar utility to About aside

* fix side passing on main container

* move social links inside About

* add content, update styles on Footer

* update header styles

* add flex utility, simplify header, update title/logo

* update route map

* update sites folder

* update map, refactor container spacing

* fix homepage hero flex

* update homepage hero

* remove About page, add `clean` command for 11ty build

* move social links around in footer

* remove sidebar and About partial

* update container widths

* update homepage hero

* add Public Sans typeface

* adjust container spacing

* update icons, icon classes

* update social list to flex list

* reorganize footer, add Support info

* add button utils

* add new hero illustration

* add copy to stats, and create card styles

* update footer buttons

* add copy, tweak styles

* update text alignment, fix number of states

* adjust flex/responsive for global header

* update typescale

* take home out of site menu, since it's the only page right now

* update homepage description copy

* update copy and style for footer

* fix flexible width on header logo svg

* add stacked display, update hero to use stacked

* small change to test test webhook

* update logo title paths

* update gitignore to remove Guide files

* fix map type, adjust copy

* update where css is built/stored

* update color utils, vars, tokens

* re-add guide to source

* include `on` colors for vars

* change color tokens, names, vars across code

* update variants of main colors, add grid util

* remove guide from gitignore

* add function to check color contrast

* create color maps, color classes

* update color utils to use color map

* add a _lot_ of comments to colors and color functions

* add so many clarifying comments to the color contrast functions

* simplify the equations, clarify comments

* add function to find the most accessible contrasting color

* set contrast color for text on theme color bg

* update caption style for colors, add more comments to contrast file

* set accessible colors for all tokens and palettes

* update background palette, fix link colors

* update button colors

* update homepage hero colors

* make the route map flexible for all screen sizes, but not too narrow

* allow buttons for all palette colors

* initial blog setup: blog, post, tag, category

* update link colors in global header

* updated bg color on stats icons

* update datetime formats

* include a bunch of testing posts

* fix typo, adjust ease timing for link transition

* update blog category list on blog page

* add 11ty image plugin, with shortcode for `picture`

* adjust image outputs in 11ty image plugin

* add feature image to blog posts, fix homepage hero

* reformat category and tag output

* update typefaces, body copy type, font vars

* fix image shortcode in blog post md files

* update post header styles

* fix post header partial, add margin to post header

* test if post list before output anything

* fix tags and category list with teaser and post header

* adjust heading level for post, list

* add feature post to blog list

* Update index.html, index.html, and 39 more files...

* Revert "Update index.html, index.html, and 39 more files..."

This reverts commit 6207c92.

* update post list with only one, without latest, or all

* testing additional images in blog posts

* style post teaser, header, and blog list intro

* adjust post list intro styles

* update pagination and styles

* update pagination and social icons

* add h1 class to feature post teaser title

* move category to date, update tags show

* set up image for flickr link

* fix map width on homepage

* add option for flickr in image shortcode/plugin

* add pagination to blog posts, update styles

* update pagination for posts, tweak styles

* add 3 latest blog posts to homepage

* fix latest posts on homepage

* add some style to post lists

* update blog post Previous and Next posts

* tweaks to post list styles

* tweaks to page/blog header, feature image, pagination

* update pagination, tweak some styles

* add include media, update type, featured image

* make site menu links san-serif

* make post title a link (not on posts)

Author: reedcodes

.eleventy.js

@@ -5,19 +5,37 @@ module.exports = function( eleventyConfig ) {
 
   // Send assets from source to site.
   eleventyConfig.addPassthroughCopy( {
-    "./source/_css/": "dist/css/",
     "./source/_images/": "dist/images/",
     "./source/_webfonts/": "dist/webfonts/"
   } );
 
   // Add the 11ty nav plugin.
   eleventyConfig.addPlugin(eleventyNavigationPlugin);
 
+  // Add blog glob.
+  eleventyConfig.addCollection( "blogPosts", require("./source/_config/collections/blog-posts.js") );
+  eleventyConfig.addCollection( "blogPostsFirst", require("./source/_config/collections/blog-posts-first.js") );
+  eleventyConfig.addCollection( "categories", require("./source/_config/collections/categories.js") );
+  eleventyConfig.addCollection( "categoryList", require("./source/_config/collections/category-list.js") );
+  eleventyConfig.addCollection( "tagList", require("./source/_config/collections/tag-list.js") );
+
+  // Add date filters.
+  eleventyConfig.addFilter( "simpleDate", require("./source/_config/filters/simple-date.js") );
+  eleventyConfig.addFilter( "shortDate", require("./source/_config/filters/short-date.js") );
+  eleventyConfig.addFilter( "longDate", require("./source/_config/filters/long-date.js") );
+
   // Add year shortcode.
   eleventyConfig.addShortcode( "year", require("./source/_config/shortcodes/year.js") );
 
+  // Add the image shortcode, from the 11ty image plugin.
+  eleventyConfig.addNunjucksAsyncShortcode( "image", require("./source/_config/shortcodes/image.js") );
+
+  // Remove the console output of all generated files.
+  eleventyConfig.setQuietMode(true);
+
   // 11ty config options.
   return {
+    htmlTemplateEngine: "njk",
     markdownTemplateEngine: "njk",
     dir: {
       input: "source",

.gitignore

@@ -2,10 +2,6 @@
 .cache/
 .env
 node_modules/
-source/guide/
-
-# Build.
-site/guide/
 
 # Deployment.
 .push-it

gulpfile.js

@@ -7,13 +7,18 @@ const cleanCSS = require( 'gulp-clean-css' ),
 
 // Define CSS source and distribution directories.
 const cssSource = './source/_sass/**/*.scss';
-const cssBuild = './source/_css';
+const cssBuild = './site/dist/css';
+
+// Define CSS source paths from other locations, e.g. node modules.
+const cssIncludePaths = [
+  './node_modules/include-media/dist'
+];
 
 // Task to compile CSS files.
 gulp.task( 'sass', function() {
   return gulp.src( cssSource )
     .pipe( sourcemaps.init() )
-    .pipe( sass() )
+    .pipe( sass({ includePaths: cssIncludePaths }) )
     .pipe( cleanCSS( { level: 2 } ) )
     .pipe( sourcemaps.write() )
     .pipe( gulp.dest( cssBuild ) );