add figure element for accessible (and beautiful) captioned images

.eleventy.js

@@ -7,6 +7,8 @@ const related = require("eleventy-plugin-related");
 const markdownIt = require("markdown-it");
 const markdownItAnchor = require("markdown-it-anchor");
 
+const figure = require('./src/_includes/components/figure.js');
+
 module.exports = function (eleventyConfig) {
   const parseDate = (str) => {
     if (str instanceof Date) {
@@ -23,7 +25,8 @@ module.exports = function (eleventyConfig) {
     trimBlocks: true
   });
 
-  eleventyConfig.setLibrary("md", markdownIt({ "html": true }).use(markdownItAnchor, { "level": 2 }));
+  const md = markdownIt({ "html": true }).use(markdownItAnchor, { "level": 2 });
+  eleventyConfig.setLibrary("md", md);
 
   eleventyConfig.addPlugin(pluginRss);
   eleventyConfig.addPlugin(syntaxHighlight);
@@ -31,6 +34,8 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(safeLinks);
   eleventyConfig.addPlugin(eleventySass);
 
+  eleventyConfig.addShortcode('figure', figure(md));
+
   eleventyConfig.addPassthroughCopy({ "src/static": "/" });
 
   eleventyConfig.addFilter("date_to_datetime", (obj) => {

src/_includes/components/figure.js

@@ -0,0 +1,8 @@
+module.exports = (md) => ({ src, alt, caption = '' }) => `
+  <figure>
+    <div>
+      <img src="${src}" alt="${alt}" />
+    </div>
+    ${caption ? `<figcaption>${md.renderInline(caption)}</figcaption>` : ''}
+  </figure>
+`

src/css/style.scss

@@ -172,6 +172,16 @@ video {
   max-width: 100%;
 }
 
+figure {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+figcaption {
+  text-align: center;
+  font-style: italic;
+}
+
 .tag {
   font-weight: bold;
 }

src/posts/rosgosstrakh-hack.md

@@ -18,8 +18,7 @@ after taking a two month long hiatus (for mental health reasons, nothing to get
 
 [rosgosstrakh (RGSL/росгосстрах)](https://en.wikipedia.org/wiki/Rosgosstrakh) is the second biggest russian insurance company, behind [SOGAZ](https://en.wikipedia.org/wiki/Sogaz) with an annual revenue of around 90 billion rubles ([2022](https://www.reuters.com/markets/companies/rgss.mm/financials/income-annual)). RGSL has been [subject to US sanctions](https://www.hstoday.us/subject-matter-areas/intelligence/new-sanctions-top-ten-russian-financial-institutions-now-under-u-s-restrictions/) since the start of the russian invasion of ukraine in february 2022. my source gained full access to their investment and life insurance department with data going back to 2010, giving them full access to ~3 million bank statements, data on 730k people/holders (around 80k of which with SNILS (russian ssn) and another 45k with full bank routing info), and all life insurance policies/contracts. they are also able to access all attachments to the former data, such as passports and scanned documents (i was only provided with a small selection of this data, but all of it is included in the purchasable dataset). the source further claims that they most likely have the ability to authorize and create bank transfers if they wanted to do so.
 
-![two screenshots of the adinsure software used by RGS](/img/posts/rosgosstrakh-hack/adinsure.jpg)
-two screenshots of the [adinsure](https://www.adacta-fintech.com/platform) software used by RGS captured by the hackers during the attack
+{% figure { src: '/img/posts/rosgosstrakh-hack/adinsure.jpg', alt: 'two screenshots of the adinsure software used by RGS', caption: 'two screenshots of the [adinsure](https://www.adacta-fintech.com/platform) software used by RGS, captured by the hackers during the attack' } %}
 
 ## analysis