Voeg adventskalenderartikel en ledenpagina van Kilian toe

.eleventy.js

@@ -5,6 +5,7 @@ const { DateTime } = require("luxon");
 const pluginAddIdToHeadings = require("@orchidjs/eleventy-plugin-ids");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const brokenLinksPlugin = require("eleventy-plugin-broken-links");
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 
 module.exports = function (eleventyConfig) {
   const quick = Boolean(process.env.BUILD_QUICK);
@@ -80,6 +81,8 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addPlugin(pluginRss);
 
+  eleventyConfig.addPlugin(syntaxHighlight);
+
   /**
    * Rebuild when any of the files are changed, but exclude css because that is
    * handled by the asset pipeline.

src/_assets/css/common/code.css

@@ -0,0 +1,202 @@
+pre:has(code) {
+  position: relative;
+  display: block;
+  margin: 1rem -20px;
+  padding: 20px;
+
+  code {
+    background-color: transparent;
+  }
+
+  &::before {
+    position: absolute;
+    right: 20px;
+    top: 0px;
+    padding: 0.5rem 0.5rem 0.75rem;
+    line-height: 1;
+    font-size: 0.875rem;
+    content: "";
+    display: block;
+    text-align: right;
+    background: var(--lilac);
+    color: black;
+    font-weight: bold;
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% calc(100% - 0.5rem),
+      50% 100%,
+      0 calc(100% - 0.5rem)
+    );
+  }
+
+  &:has(code.language-html)::before {
+    content: "HTML";
+  }
+  &:has(code.language-css)::before {
+    content: "CSS";
+  }
+  &:has(code.language-js)::before {
+    content: "JS";
+  }
+}
+
+/**
+ * a11y-dark theme for JavaScript, CSS, and HTML
+ * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
+ * @author ericwbailey
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #f8f8f2;
+  background: none;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #2b2b2b;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #d4d0ab;
+}
+
+.token.punctuation {
+  color: #fefefe;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #ffa07a;
+}
+
+.token.boolean,
+.token.number {
+  color: #00e0e0;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #abe338;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #00e0e0;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function {
+  color: #ffd700;
+}
+
+.token.keyword {
+  color: #00e0e0;
+}
+
+.token.regex,
+.token.important {
+  color: #ffd700;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: windowText;
+    background: window;
+  }
+
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    background: window;
+  }
+
+  .token.important {
+    background: highlight;
+    color: window;
+    font-weight: normal;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.function,
+  .token.keyword,
+  .token.operator,
+  .token.selector {
+    font-weight: bold;
+  }
+
+  .token.attr-value,
+  .token.comment,
+  .token.doctype,
+  .token.function,
+  .token.keyword,
+  .token.operator,
+  .token.property,
+  .token.string {
+    color: highlight;
+  }
+
+  .token.attr-value,
+  .token.url {
+    font-weight: normal;
+  }
+}

src/_assets/css/style.css

@@ -6,6 +6,7 @@
 @import "./common/layout.css";
 @import "./common/skiplink.css";
 @import "./common/forms.css";
+@import "./common/code.css";
 
 @import "./elements/button.css";
 @import "./elements/page-navigation.css";

src/_components/shortcodes/tag/tag.css

@@ -1,4 +1,4 @@
-.tag {
+.tag:not(.token) {
   position: relative;
   display: inline-flex;
   justify-content: space-between;
@@ -22,10 +22,10 @@
 
 /* Rounded tags, like with { and } */
 .tag-curly-braces {
-   -webkit-clip-path: url(#button-curly-braces);
+  -webkit-clip-path: url(#button-curly-braces);
   clip-path: url(#button-curly-braces);
 }
 
-.tag + .tag {
+.tag:not(.token) + .tag:not(.token) {
   margin-inline-start: 2em;
 }