Add Seitan article, implement <figure> capability

content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md

@@ -271,7 +271,7 @@ You may notice a couple of things:
 * I've taken advantage of the `getMaxCircles()` function we wrote earlier to calculate ideal values for `myGrid.rowCircleQty`, and  `myGrid.numRows`.
 * `myGrid.fillArray` is using RGB values. Check the [p5.js documentation](https://p5js.org/reference/#/p5/fill) for other color values you can use.
 
-Feel free to customize `myGrid` to make your ideal circle grid, and call `generateCircleGrid()` to see the result:
+Feel free to customize `myGrid` to make your ideal circle grid, and call `generateCircleGrid()`...
 
 ``` javascript
 generateCircleGrid(
@@ -286,7 +286,7 @@ generateCircleGrid(
   myGrid.fillArray
 );
 ```
-
+...to see the result:
 [![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue.](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp)](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp)
 
 ## SVG export

eleventy.config.js

@@ -2,6 +2,7 @@ const { DateTime } = require("luxon");
 const markdownIt = require("markdown-it");
 const markdownItFootnote = require("markdown-it-footnote");
 const markdownItAnchor = require("markdown-it-anchor");
+const mdfigcaption = require('markdown-it-image-figures');
 
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
@@ -12,6 +13,10 @@ const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
 const pluginDrafts = require("./eleventy.config.drafts.js");
 const pluginImages = require("./eleventy.config.images.js");
 
+const figoptions = {
+	figcaption: true
+};
+
 module.exports = function(eleventyConfig) {
 	// Copy the contents of the `public` folder to the output folder
 	// For example, `./public/css/` ends up in `_site/css/`
@@ -91,7 +96,7 @@ module.exports = function(eleventyConfig) {
 			}),
 			level: [1,2,3,4],
 			slugify: eleventyConfig.getFilter("slugify")
-		}).use(markdownItFootnote);
+		}).use(markdownItFootnote).use(mdfigcaption, figoptions);
 	});
 
 	// Features to make your build faster (when you need them)

package.json

@@ -42,6 +42,7 @@
 		"markdown-it-anchor": "^8.6.7"
 	},
 	"dependencies": {
-		"markdown-it-footnote": "^3.0.3"
+		"markdown-it-footnote": "^3.0.3",
+		"markdown-it-image-figures": "^2.1.1"
 	}
 }

public/css/index.css

@@ -124,6 +124,23 @@ main > p > img, main > p > a > img {
 	padding-top: 2rem;
 }
 
+figure {
+	margin: 0;
+	padding: 0 0 2em 0;
+	width: 100%;
+}
+
+figure > a > img {
+	padding: 0;
+	width: 100%;
+	box-shadow: .75em .75em 0 0 var(--contrast-color);
+}
+
+figcaption {
+	text-align: center;
+	padding-top: 1em;
+}
+
 .page-block {
 	margin-top: 3rem;
 	margin-bottom: 3rem;