Status commit

_includes/components/infobox.webc

@@ -0,0 +1,24 @@
+<div class="infobox">
+  <slot></slot>
+</div>
+
+<style>
+/* Infobox */
+:root {
+  --color-infobox: #ffc;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-infobox: #082840;
+  }
+}
+
+.infobox {
+  background-color: var(--color-infobox);
+  color: var(--color-gray-90);
+  padding: 1em 0.625em; /* 16px 10px /16 */
+}
+.infobox ol:only-child {
+  margin: 0;
+}
+</style>

_includes/components/syntax-highlight/prism-diff.css

@@ -0,0 +1,45 @@
+/*
+ * New diff- syntax
+ */
+
+pre[class*="language-diff-"] {
+	--eleventy-code-padding: 1.25em;
+	padding-left: var(--eleventy-code-padding);
+	padding-right: var(--eleventy-code-padding);
+}
+.token.deleted {
+	background-color: hsl(0, 51%, 37%);
+	color: inherit;
+}
+.token.inserted {
+	background-color: hsl(126, 31%, 39%);
+	color: inherit;
+}
+
+/* Make the + and - characters unselectable for copy/paste */
+.token.prefix.unchanged,
+.token.prefix.inserted,
+.token.prefix.deleted {
+	-webkit-user-select: none;
+	user-select: none;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+.token.prefix.inserted,
+.token.prefix.deleted {
+	width: var(--eleventy-code-padding);
+	background-color: rgba(0,0,0,.2);
+}
+
+/* Optional: full-width background color */
+.token.inserted:not(.prefix),
+.token.deleted:not(.prefix) {
+	display: block;
+	margin-left: calc(-1 * var(--eleventy-code-padding));
+	margin-right: calc(-1 * var(--eleventy-code-padding));
+	text-decoration: none; /* override del, ins, mark defaults */
+	color: inherit; /* override del, ins, mark defaults */
+}

_includes/components/syntax-highlight/syntax-highlight.webc

@@ -0,0 +1,5 @@
+<link rel="stylesheet" href="../../../node_modules/prismjs/themes/prism-okaidia.css">
+<link rel="stylesheet" href="./prism-diff.css">
+```<template @html="this.syntax || ''" webc:nokeep></template>
+<slot></slot>
+```

_includes/layouts/base.njk

@@ -9,9 +9,11 @@
     {#- Uncomment this if you’d like folks to know that you used Eleventy to build your site!  #}
     {#- <meta name="generator" content="{{ eleventy.generator }}"> #}
 
-    <link rel="stylesheet" href="/css/prism-theme.css">
-    <link rel="stylesheet" href="/css/prism-diff.css">
     <link rel="stylesheet" href="/css/index.css">
+    <style>
+    {{ page.url | webcGetCss | safe }}
+    </style>
+
     <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
     <link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
 
@@ -36,18 +38,6 @@
     </header>
 
     <main{% if templateClass %} class="{{ templateClass }}"{% endif %}>
-
-      <!-- Delete this message -->
-      <div class="infobox">
-        <ol>
-          <li>Edit the <code>_data/metadata.json</code> with your blog’s information.</li>
-          <li>(Optional) Edit <code>.eleventy.js</code> with your <a href="https://www.11ty.dev/docs/config/">configuration preferences</a>.</li>
-          <li>Delete this message from <code>_includes/layouts/base.njk</code>.</li>
-        </ol>
-        <p><em>This is an <a href="https://www.11ty.dev/">Eleventy project</a> created from the <a href="https://github.com/11ty/eleventy-base-blog"><code>eleventy-base-blog</code> repo</a>.</em></p>
-      </div>
-      <!-- Stop deleting -->
-
       {{ content | safe }}
     </main>
 

_includes/layouts/home.njk

@@ -1,5 +0,0 @@
----
-layout: layouts/base.njk
-templateClass: tmpl-home
----
-{{ content | safe }}

_includes/layouts/home.webc

@@ -0,0 +1,16 @@
+---
+layout: layouts/base.njk
+templateClass: tmpl-home
+---
+<!-- Delete this message -->
+<infobox>
+  <ol>
+    <li>Edit the <code>_data/metadata.json</code> with your blog’s information.</li>
+    <li>(Optional) Edit <code>.eleventy.js</code> with your <a href="https://www.11ty.dev/docs/config/">configuration preferences</a>.</li>
+    <li>Delete this message from <code>_includes/layouts/home.webc</code>.</li>
+  </ol>
+  <p><em>This is an <a href="https://www.11ty.dev/">Eleventy project</a> created from the <a href="https://github.com/11ty/eleventy-base-blog"><code>eleventy-base-blog</code> repo</a>.</em></p>
+</infobox>
+<!-- Stop deleting -->
+
+<template @raw="content" webc:nokeep></template>