# [Made Mistakes](https://mademistakes.com) Source Code This is the source code of Made Mistakes, a personal blog and portfolio built with [Jekyll](http://jekyllrb.com) [Gulp](http://gulpjs.com/), and [Netlify](https://www.netlify.com/). *Please note: Made Mistakes hasn't been "themed" like some of my other [Jekyll repos](https://mademistakes.com/work/jekyll-themes/) and isn't compatible with the "default" GitHub Pages workflow without substantial alterations.* ### Plugins used - [Jekyll Sitemap](https://github.com/jekyll/jekyll-sitemap) (GitHub Pages supported) - [Jemoji](https://github.com/jekyll/jemoji) - [Jekyll Paginate v2](https://github.com/sverrirs/jekyll-paginate-v2) - [Jekyll TOC](https://github.com/toshimaru/jekyll-toc) ### Images [Made Mistakes](https://mademistakes.com) has a lot of image assets. `src/assets/images/` has been split into its [own repo](https://github.com/mmistakes/made-mistakes-images) and included as a Git submodule. `page.image.feature` should be placed in `src/assets/images/feature`. These `feature` images will be converted into various sizes to be responsively served by browsers that support the [`srcset` attribute](https://responsiveimages.org/). ### Content helpers #### Notices Call-out text. Accepts the following types: `info`, `danger`, `warning`, and `success`. See [style guide](https://mademistakes.com/style-guide/) for visual examples. **Default notice example:** ```liquid {% notice %} Call out some text. **Markdown** is acceptable. {% endnotice %} ``` **Danger notice example:** ```liquid {% notice danger %} **Danger! Danger!** Use caution. {% endnotice %} ``` #### Figure Easily generate `figure` elements with optional `caption` and `class` parameters. **Examples:** In simplest usage: ```liquid {% figure %} ![Image](/path/to/image.jpg) {% endfigure %} ``` ```html ``` If a figure contains an image (or multiple images), the surrounding `
` will be stripped: ```liquid {% figure %} ![Image](/path/to/image.jpg) {% endfigure %} ``` ```html ``` You can provide a caption. Any markdown will be rendered: ```liquid {% figure caption:"*Markdown* caption" %} ![Image](/path/to/image.jpg) {% endfigure %} ``` ```html ``` You can also provide a class name(es) for CSS styling: ```liquid {% figure caption:"A caption" class:"classname" %} ![Image](/path/to/image.jpg) {% endfigure %} ``` ```html ``` Finally, the caption parameter will accept liquid output markup: ```liquid {% figure caption:"{{ page.title }}" %} ![Image](/path/to/image.jpg) {% endfigure %} ``` ```html ``` #### Lazyload Lazyload images using [**lazysizes**](https://github.com/aFarkas/lazysizes) until they're actually needed for improved page performance. | Attribute | Required | Description | |------------|--------------|---------------------------------------------------------------------------------------------------------------------------------------------------------| | `data-src` | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. | | `src` | Optional | Full path to low-quality image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. Defaults to inline transparent `.gif`. | | `alt` | Optional | Image alternate text. | **Example:** ```liquid {% lazyload data-src="/assets/images/my-image.jpg" src="/assets/images/my-image-low-quality.jpg" alt="my lazyloaded image" %} ``` #### Responsive video embed Embed a video from YouTube or Vimeo that responsively sizes to fit the width of its parent using [`/_plugins/video_embed.rb`](src/_plugins.video_embed.rb). ##### YouTube To embed the following YouTube video at url `https://www.youtube.com/watch?v=XsxDH4HcOWA` (long version) or `https://youtu.be/XsxDH4HcOWA` (short version) into a post or page's main content you'd use: ```liquid {% youtube XsxDH4HcOWA %} ``` ##### Vimeo To embed the following Vimeo video at url `https://vimeo.com/97649261` into a post or page's main content you'd use: ```liquid {% vimeo 97649261 %} ``` ### Local development Let Jekyll do what it does best and transform your content into HTML. Asset management is handled by Gulp: - build `style.css` (preprocess SCSS, add vendor prefixes, concatenate, minify, hash, and gzip) - build critical path CSS - build `index.js` (concatenate, minify, hash, and gzip) - optimize images - optimize and resize `feature` images - optimize and combine SVG icon set - serve site locally for testing with Browser Sync - deploy site to production server via Rsync - submit XML sitemap to Google & Bing Default structure (paths can be modified in `gulpfile.js` and `_config.yml`): ```bash ├── gulp # => gulp tasks ├── src # => source Jekyll files and assets | ├── _includes | ├── _layouts | ├── _plugins | ├── ... | ├── _posts | ├── assets | | ├── icons | | ├── images | | | └── feature | | ├── javascript | | | ├── plugins | | | ├── vendor | | | └── main.js | | ├── stylesheets | | | ├── vendor | | | ├── ... | | | └── style.scss ├── .editorconfig ├── .gitignore ├── _config.dev.yml ├── _config.yml ├── Gemfile ├── gulpfile.js ├── package.json ├── rsync-credentials.json ├── ... ``` ## Getting started ### Dependencies: - **Ruby**: >2.1 with Bundler >1.10 - **Node**: >4.2 and Yo >1.7.0 - **Yarn** - **Gulp**: Since the release candidate is running Gulp 4.0 you need to install `gulp-cli`: `npm install gulp-cli -g` **Step 1:** Install [Bundler](http://bundler.io/), then run `bundle install`. **Step 2.** Install [Node.js](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/en/docs/install), then run `yarn install`. **Step 3:** Install [node-gyp](https://github.com/nodejs/node-gyp#installation). **Step 4.** To start run `gulp`. A development version of the site should be generated and opened in a browser with Browser Sync at `http://localhost:4000`. ## Usage ### `gulp [--prod]` This is the default command, and probably the one you'll use the most. This command will build your assets and site with development settings. You'll get sourcemaps, your drafts will be generated. As you are changing your posts, pages and assets they will automatically update and inject into your browser via [BrowserSync][browsersync]. > `--prod` Once you are done and want to verify that everything works with production settings you add the flag `--prod` and your assets will be optimized. Your CSS, JS and HTML will be minified and gzipped, plus the CSS and JS will be cache busted. The images will be compressed and Jekyll will generate a site with all your posts and no drafts. ### `gulp build [--prod]` This command is identical to the normal `gulp [--prod]` however it will not create a BrowserSync session in your browser. ### `gulp (build) [--prod]` main subtasks > `gulp jekyll [--prod]` Without production settings Jekyll will only create both future posts and drafts. With `--prod` none of that is true and it will generate all your posts. > `gulp styles|scripts [--prod]` Both your CSS and JS will have sourcemaps generated for them under development settings. Once you generate them with production settings sourcemap generation is disabled. Both will be minified, gzipped and cache busted with production settings. > `gulp images:optimize` Optimizes standard images and copies to `/dist` folder. > `gulp images:feature` Similar to the previous task but for images in `src/assets/images/feature`. Resizes each image into various sizes to be served responsively with `` `srcset` or `