eleventy.config.js

@@ -7,7 +7,6 @@ const mdDefList = require("markdown-it-deflist");
 const mdToc = require("markdown-it-table-of-contents");
 const mdAnchor = require("markdown-it-anchor");
 const nunjucksDate = require("nunjucks-date");
-const markdownIt = require("markdown-it");
 
 function addEleventyPlugins(eleventyConfig) {
 	eleventyConfig.addPlugin(eleventyNavigationPlugin);
@@ -31,9 +30,6 @@ function configureMarkdown(eleventyConfig) {
 }
 
 function addFilters(eleventyConfig) {
-	let md = new markdownIt();
-
-	eleventyConfig.addFilter("renderMarkdown", (mdString) => md.render(mdString));
 	eleventyConfig.addFilter("log", (value) => console.log(value));
 	eleventyConfig.addFilter("date", nunjucksDate);
 	eleventyConfig.addFilter("IsNotPage", (collection, url) =>
@@ -62,7 +58,6 @@ module.exports = function (eleventyConfig) {
 		files: "./_site/css/**/*.css",
 	});
 
-	eleventyConfig.addPassthroughCopy("src/img");
 	eleventyConfig.addPassthroughCopy({
 		"node_modules/prism-themes/themes/prism-material-light.min.css":
 			"css/prism-material-light.min.css",

src/_includes/posts-list.njk

@@ -29,7 +29,7 @@
 					{% endfor %}
 				</div>
 			</dl>
-			<p>{{ post.data.description | renderMarkdown | safe }}</p>
+			<p>{{ post.data.description }}</p>
 		</section>
 	{% endfor %}
 {% else %}

src/posts/DescriptionListStyling.md

@@ -1,191 +0,0 @@
----
-title: Description List Styling
-description: Some styling for `<dl>` elements beyond the basics I usually see
-tags: [ Programming, CSS ]
----
-
-The `<dl>` element is useful for displaying metadata or a read only version of a form. The basic way of styling these is to make `<dt>` elements bold and make `<dt>` and `<dd>` block elements. These styles allow some more complex ways of displaying a description list.
-
-## Default Basic Styles
-
-These are some basic styles to use by default:
-
-<img src="/img/BasicDescriptionList.png" alt="Basic Description List Styles"
-	style="max-width: 200px" />
-
-```html
-<dl>
-	<dt>Term 1</dt>
-	<dd>Term 1 description</dd>
-
-	<dt>Term 2</dt>
-	<dd>Term 2 description 1</dd>
-	<dd>Term 2 description 2</dd>
-</dl>
-```
-
-```scss
-dl {
-	margin-block-start: 0;
-	margin-block-end: 0;
-	margin-bottom: 1em;
-}
-
-dt {
-	font-weight: bold;
-	line-height: 1.75;
-}
-
-dd {
-	margin-inline-start: 0;
-	margin-left: 1em;
-	line-height: 1.75;
-}
-
-// Add spacing between dd elements
-dd + dd {
-	margin-top: 0.5em;
-}
-```
-
-## Side-By-Side Columns
-
-This styling will put the `<dt>` elements in one column and the `<dd>` elements into another. This can cause issues on small screens, so it supports breakpoints where it will fall back to the default style.
-
-<img src="/img/ColumnsDescriptionList.png" alt="Side-By-Side Columns Description List Styles"
-	style="max-width: 250px" />
-
-```html
-<dl class="dl-columns-tablet">
-	<dt>Term 1</dt>
-	<dd>Term 1 description</dd>
-
-	<dt>Term 2</dt>
-	<dd>Term 2 description 1</dd>
-	<dd>Term 2 description 2</dd>
-
-	<dt>Term 3</dt>
-	<dd>Term 3 description 1</dd>
-	<dd>Term 3 description 2</dd>
-</dl>
-```
-
-```scss
-$columns-base-name: dl-columns;
-$wsu-breakpoint-map: (
-	"phone-small": 450px,
-	"phone": 576px,
-	"tablet": 768px,
-	"tablet-medium": 860px,
-	"tablet-large": 992px,
-	"desktop": 1260px,
-	"ultrawide": 1600px,
-	"xultrawide": 1900px,
-	"xxultrawide": 2400px
-);
-
-@each $name, $value in $wsu-breakpoint-map {
-	@media (min-width: #{$value}) {
-		dl.#{$columns-base-name}-#{$name} {
-			display: grid;
-			grid-template-columns: auto 1fr;
-			gap: 0 1rem;
-
-			& > dt {
-				grid-column: 1;
-			}
-
-			& > dd {
-				grid-column: 2;
-				margin-left: 0;
-				margin-top: 0;
-			}
-
-			// Allow going back to the default stacked style
-			div.escape-columns {
-				grid-column: span 2;
-
-				dt {
-					margin-top: 0.5em;
-				}
-
-				dd {
-					margin-left: 1em;
-				}
-
-				dt,
-				dd {
-					display: block;
-				}
-			}
-		}
-	}
-}
-```
-
-You can also mix this with the default stacked style:
-
-<img src="/img/MixedDescriptionList.png" alt="Mixed Description List Styles"
-	style="max-width: 250px" />
-
-```html
-<dl class="dl-columns-phone">
-	<dt>Term 1</dt>
-	<dd>Term 1 description</dd>
-
-	<dt>Term 2</dt>
-	<dd>Term 2 description 1</dd>
-	<dd>Term 2 description 2</dd>
-
-	<div class="escape-columns">
-		<dt>Term 3</dt>
-		<dd>
-			<pre><code>Here's a block of code</code></pre>
-		</dd>
-	</div>
-</dl>
-```
-
-## Index List
-
-This styling is for a list of links with a description. This is particularly useful for index pages that have an actual list of pages.
-
-<img src="/img/IndexDescriptionList.png" alt="Mixed Description List Styles"
-	style="max-width: 250px" />
-
-```html
-<dl class="index-list">
-	<dt><a href="#">Page 1</a></dt>
-	<dd>A description of page 1</dd>
-
-	<dt><a href="#">Page 2</a></dt>
-	<dd>A description of page 2</dd>
-
-	<dt><a href="#">Page 3</a></dt>
-	<dd>A description of page 3</dd>
-</dl>
-```
-
-```scss
-dl.index-list {
-	dt {
-		display: inline;
-
-		&:after {
-			content: " - ";
-		}
-	}
-
-	dd {
-		display: inline;
-		margin-left: 0;
-
-		&:not(:last-child):after {
-			// Display each dt/dd pair on separate lines
-			content: "";
-			display: block;
-			margin-bottom: 1em;
-		}
-	}
-}
-```