New blog post about integrating WPE

.eleventy.js

@@ -1,6 +1,7 @@
 const MarkdownIt = require("markdown-it");
 const MarkdownItAnchor = require("markdown-it-anchor");
 const MarkdownItTOC = require("markdown-it-toc-done-right");
+const MarkdownItPrism = require("markdown-it-prism");
 const { DateTime } = require("luxon");
 
 class DefaultDict {
@@ -155,7 +156,7 @@ module.exports = function(eleventyConfig) {
     level: 2,
   }).use(MarkdownItTOC, {
     level: [2, 3],
-  })
+  }).use(MarkdownItPrism)
   );
 
   return {

_authors/aperez.html

@@ -0,0 +1,20 @@
+<section class="content-section bg-light small-section">
+	<div class="container">
+		<div class="row">
+			<div class="col-lg-10 mx-auto text-muted text-left align-text-top">
+				<hr class="author-line">
+				<div class="card">
+					<img class="circle-mask" width="128" height="128"
+						loading="lazy" alt="Head shot of Adrián Pérez"
+						src="{{ '/assets/[email protected]' | url }}"
+						srcset="{{ '/assets/[email protected]' | url }} 2x">
+					This article was written by <a href="https://igalia.com/team/aperez">Adrián Pérez</a>.
+					<br>
+					I have been working on WebKit since 2012, with a focus on
+					environment integration, embedding, and distribution. Igalia
+					has been a life-long project since even earlier.
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

_includes/head.html

@@ -80,6 +80,9 @@
   <link rel="stylesheet" href="{{ '/vendor/font-awesome/css/font-awesome.min.css' | url }}">
   <link rel="stylesheet" href="{{ '/css/fonts.css' | url }}">
 
+  <!-- Code syntax highlighting -->
+  <link rel="stylesheet" href="{{ '/css/prism.css' | url }}">
+
   <!-- Custom CSS -->
   <link rel="stylesheet" href="{{ '/css/stylish-portfolio.css' | url }}">
   <script type="text/javascript">

css/stylish-portfolio.css

@@ -477,10 +477,19 @@ blockquote {
     width: 100%;
 }
 
+hr.author-line + div {
+    margin-top: 1.5rem;
+    color: #666;
+}
+hr.author-line + div > img.circle-mask {
+	margin-top: -1rem;
+}
+
 .circle-mask {
     width: 8rem;
     height: auto;
     float: left;
     margin-right: 2rem;
+    margin-bottom: 2rem;
     border-radius: 50%;
 }

css/v2.css

@@ -19,6 +19,41 @@ html {
 	max-width: 100vw;
 }
 
+@supports not (-ms-ime-align: auto) {
+	/*
+	 * Resets for <details>/<summary>, see:
+	 * https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/
+	 */
+	details > summary {
+		cursor: pointer;
+	}
+	details > summary > * {
+		display: inline;
+	}
+}
+
+details {
+	border: 2px solid #f1f1f1;
+	background: #f1f1f1;
+	border-radius: 0.5em;
+}
+details > summary {
+	color: #555;
+}
+details > summary, details > div {
+	padding: 0.5rem 1rem;
+}
+details > div {
+	background: #fff;
+	border-top: 1px solid #eeeeff;
+}
+details > div > pre {
+	margin: 0;
+	padding: 0;
+	background: none;
+	white-space: pre-wrap;
+}
+
 body {
 	min-height: 100%;
 	margin: 0;
@@ -67,6 +102,21 @@ a.igalia.logo.home img {
 	padding: 0.75em 0 0.25em;
 }
 
+figure > img.picture {
+	display: block;
+	margin: 0 auto;
+	border-radius: 5px;
+	box-shadow: 0 4px 8px #aaa;
+}
+
+figure > figcaption {
+	margin-top: 0.5rem;
+	text-align: center;
+	font-size: 80%;
+	font-style: italic;
+	color: #555;
+}
+
 h1 {font-size: 3em; line-height: 1.2;}
 h2 {font-size: 2.5em; line-height: 1.1;}
 h3 {font-size: 1.6em; line-height: 1.2;}