<commit_before># [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 
[Travis CI](https://travis-ci.org/).

*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)
- [Jekyll Archives](https://github.com/jekyll/jekyll-archives)
- [Jemoji](https://github.com/jekyll/jemoji)
- [Jekyll Paginate v2](https://github.com/sverrirs/jekyll-paginate-v2)

### 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 %}
Content
{% endfigure %}
```

```html
<figure>
  <p>Content</p>
</figure>
```

If a figure contains an image (or multiple images), the surrounding `<p>` will be stripped:

```liquid
{% figure %}
![Image](/path/to/image.jpg)
{% endfigure %}
```

```html
<figure>
  <img src="/path/to/image.jpg" alt="Image" />
</figure>
```

You can provide a caption. Any markdown will be rendered:

```liquid
{% figure caption:"*Markdown* caption" %}
Content
{% endfigure %}
```

```html
<figure>
  <p>Content</p>
  <figcaption><em>Markdown</em> caption</figcaption>
</figure>
```

You can also provide a class name(es) for CSS styling:

```liquid
{% figure caption:"A caption" class:"classname" %}
Content
{% endfigure %}
```

```html
<figure class="classname">
  <p>Content</p>
  <figcaption>A caption</figcaption>
</figure>
```

Finally, the caption parameter will accept liquid output markup:

```liquid
{% figure caption:"{{ page.title }}" %}
Content
{% endfigure %}
```

```html
<figure>
  <p>Content</p>
  <figcaption>The title of my post</figcaption>
</figure>
```

#### 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" %}
```<commit_msg>Update figure tag examples<commit_after># [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 
[Travis CI](https://travis-ci.org/).

*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)
- [Jekyll Archives](https://github.com/jekyll/jekyll-archives)
- [Jemoji](https://github.com/jekyll/jemoji)
- [Jekyll Paginate v2](https://github.com/sverrirs/jekyll-paginate-v2)

### 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
<figure>
  <img src="/path/to/image.jpg" alt="Image" />
</figure>
```

If a figure contains an image (or multiple images), the surrounding `<p>` will be stripped:

```liquid
{% figure %}
![Image](/path/to/image.jpg)
{% endfigure %}
```

```html
<figure>
  <img src="/path/to/image.jpg" alt="Image" />
</figure>
```

You can provide a caption. Any markdown will be rendered:

```liquid
{% figure caption:"*Markdown* caption" %}
![Image](/path/to/image.jpg)
{% endfigure %}
```

```html
<figure>
  <img src="/path/to/image.jpg" alt="Image" />
  <figcaption><em>Markdown</em> caption</figcaption>
</figure>
```

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
<figure class="classname">
  <img src="/path/to/image.jpg" alt="Image" />
  <figcaption>A caption</figcaption>
</figure>
```

Finally, the caption parameter will accept liquid output markup:

```liquid
{% figure caption:"{{ page.title }}" %}
![Image](/path/to/image.jpg)
{% endfigure %}
```

```html
<figure>
  <img src="/path/to/image.jpg" alt="Image" />
  <figcaption>The title of my post</figcaption>
</figure>
```

#### 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" %}
```
{'fraction_non_alphanumeric': 0.1768996154356186, 'fraction_numerical': 0.0005304336294921098, 'mean_word_length': 4.311267605633803, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 55, 'https://': 24, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '842437', 'n_tokens_mistral': 2610, 'n_tokens_neox': 2403, 'n_words': 691}