Blog tags

.github/workflows/ci.yml

@@ -7,7 +7,7 @@ on:
   pull_request:
 
 env:
-  PHP_VERSION: 8.3
+  PHP_VERSION: 8.5
 
 jobs:
   lint:

Dockerfile

@@ -1,5 +1,5 @@
 # syntax=docker/dockerfile:1
-FROM php:8.3.19-apache
+FROM php:8.5.10-apache
 
 # Add git
 RUN apt-get -y update
@@ -10,7 +10,7 @@ RUN apt-get install -y libzip-dev zip
 RUN docker-php-ext-install zip && docker-php-ext-enable zip
 
 # Add composer
-COPY --from=composer:latest /usr/bin/composer /usr/local/bin/composer
+COPY --from=composer:2.10.3 /usr/bin/composer /usr/local/bin/composer
 
 # For test coverage
 RUN pecl install pcov

composer.json

@@ -3,7 +3,7 @@
 		"danielescherzer/commonmark-ext-pygments-highlighter": "0.2.0",
 		"danielescherzer/html-builder": "0.0.2",
 		"nikic/fast-route": "1.3.0",
-		"league/commonmark": "2.10.1",
+		"league/commonmark": "2.10.3",
 		"ramsey/pygments": "3.0.0",
 		"symfony/yaml": "7.4.12"
 	},

resources/blog-styles.css

@@ -1,3 +1,15 @@
+.blog-index {
+	h1 {
+		display: inline-block;
+	}
+	.blog-index--clear-filter {
+		display: inline-block;
+		font-size: 20px;
+		margin-block-end: 0.67em;
+		padding-left: 20px;
+	}
+}
+
 .blog-preview-date {
 	font-style: italic;
 }
@@ -14,56 +26,89 @@
 	> *:last-child {
 		margin-bottom: 0px;
 	}
-}
 
-.blog-content h1,
-.blog-preview h2,
-.blog-preview h3 {
-	margin-bottom: 0px;
+	h2, h3 {
+		margin-bottom: 0px;
+	}
 }
 
-.blog-content img {
-	width: 50%;
-	display: block;
-	margin: auto;
-}
+.blog-preview--has-tags {
+	columns: 2;
 
-.blog-page--sidebar-image p:has(img) {
-	width: 40%;
-	float: right;
-}
+	h2, h3 {
+		break-after: avoid-column;
+		width: max-content;
+	}
 
-.blog-page--sidebar-image img {
-	width: fit-content;
-}
+	.blog-tags {
+		justify-self: right;
+		padding-top: 5px;
+		break-before: column;
+	}
 
-.blog-content .pygments-highlighter pre {
-	background-color: #f8f8f8;
-	overflow-x: auto;
-}
+	.blog-tags--pill:last-child {
+		margin-right: 0px;
+	}
 
-.blog-content .pygments-highlighter-failed {
-	/* Accessibility: `red` does not provide enough contrast */
-	color: #ef0000;
+	p {
+		column-span: all;
+	}
 }
 
-.blog-content .footnotes {
-	p {
-		font-size: smaller;
-		display: inline;
+.blog-content {
+	code {
+		white-space: nowrap;
 	}
 
-	ol {
-		padding-inline-start: 0px;
+	h1 {
+		margin-bottom: 0px;
 	}
 
-	li {
-		list-style-position: inside;
+	img {
+		width: 50%;
+		display: block;
+		margin: auto;
+	}
+
+	.blog-tags {
+		padding-top: 20px;
+	}
+
+	.footnotes {
+		li {
+			list-style-position: inside;
+		}
+
+		ol {
+			padding-inline-start: 0px;
+		}
+
+		p {
+			font-size: smaller;
+			display: inline;
+		}
+	}
+
+	.pygments-highlighter pre {
+		background-color: #f8f8f8;
+		overflow-x: auto;
+	}
+
+	.pygments-highlighter-failed {
+		/* Accessibility: `red` does not provide enough contrast */
+		color: #ef0000;
 	}
 }
 
-.blog-content code {
-	white-space: nowrap;
+.blog-page--sidebar-image {
+	img {
+		width: fit-content;
+	}
+
+	p:has(img) {
+		width: 40%;
+		float: right;
+	}
 }
 
 .blog-page--unhighlighted-block pre:not(.pygments-highlighter pre) {
@@ -101,6 +146,56 @@
 	}
 }
 
+.blog-tags {
+	font-size: 18px;
+}
+
+.blog-tags--list {
+	display: inline;
+	padding-inline-start: 0px;
+}
+
+.blog-tags--pill {
+	height: 1.5rem;
+	border-radius: 0.75rem;
+	display: inline;
+	padding: 5px 10px 5px 10px;
+	margin: 5px;
+
+	a {
+		text-decoration: none;
+	}
+
+	&.blog-tags--pill-conferences {
+		background-color: #53fd89;
+		a {
+			color: #000;
+		}
+	}
+
+	&.blog-tags--pill-website {
+		background-color: #ffb900;
+		a {
+			color: #000;
+		}
+	}
+
+	&.blog-tags--pill-php,
+	&[class*=" blog-tags--pill-php-"] {
+		background-color: #474A8A;
+		a {
+			color: #fff;
+		}
+	}
+
+	&.blog-tags--pill-rust {
+		background-color: #D34516;
+		a {
+			color: #fff;
+		}
+	}
+}
+
 @media (max-width: 1200px) {
 	.blog-page--has-toc.content-wrapper {
 		grid-template-columns: 20% 70% 10%;
@@ -117,12 +212,30 @@
 		top: unset;
 		margin-top: 20px;
 	}
-	.blog-page--sidebar-image p:has(img) {
-		float: unset;
-		margin: auto;
-		max-width: 100%;
+	.blog-page--sidebar-image {
+		img {
+			max-width: 100%;
+		}
+		p:has(img) {
+			float: unset;
+			margin: auto;
+			max-width: 100%;
+		}
 	}
-	.blog-page--sidebar-image img {
-		max-width: 100%;
+	.blog-preview--has-tags {
+		columns: unset;
+
+		p {
+			margin-top: 10px;
+		}
+
+		.blog-tags {
+			justify-self: unset;
+		}
+
+		.blog-tags--pill:first-child {
+			margin-left: 0px;
+		}
 	}
+
 }

resources/error-styles.css

@@ -1,6 +1,5 @@
-.error-box {
-    background-color: #fcdad4;
-    border: 3px solid #fc9685;
+.error-box,
+.warning-box {
     padding: 10px;
     margin-top: 20px;
 
@@ -9,6 +8,16 @@
     max-width: 60%;
 }
 
-h1 {
-    margin-top: 0px;
-}
+.error-box {
+    background-color: #fcdad4;
+    border: 3px solid #fc9685;
+
+    h1 {
+        margin-top: 0px;
+    }
+}
+
+.warning-box {
+    background-color: #fae17a;
+    border: 3px solid #c9a202;
+}

sitemap.xml

@@ -111,4 +111,7 @@
  <url>
   <loc>https://scherzer.dev/Blog/20260923-no-php86-rc-1</loc>
  </url>
+ <url>
+  <loc>https://scherzer.dev/Blog/20261005-blog-tags</loc>
+ </url>
 </urlset>

src/Blog/BlogPost.php

@@ -29,6 +29,10 @@ public function getTitle(): string {
 		return $this->config['title'] ?? $this->slug;
 	}
 
+	public function getTags(): array {
+		return $this->config['tags'] ?? [];
+	}
+
 	public function getExtraClasses(): array {
 		if ( $this->config !== null ) {
 			$extraClasses = $this->config['extra-classes'] ?? [];