Add drfated and archived badges in blog list, use archive icon for archived statement, remove ellipsis form load comments button

content/blog/drafted-post/index.md

@@ -0,0 +1,17 @@
++++
+authors = ["John Draft"]
+title = "Drafty draft"
+description = "Drafted post, very drafty."
+date = 2024-04-29
+draft = true
+[taxonomies]
+tags = ["Draft"]
+[extra]
+toc = false
++++
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.
+
+Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est.
+
+Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea.

content/blog/ipsum/index.md

@@ -13,4 +13,4 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est.
 
-Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea.
+Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea.

content/blog/lorem/index.md

@@ -13,4 +13,4 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est.
 
-Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea.
+Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea.

content/blog/the-quill-of-duck/index.md

@@ -6,12 +6,11 @@ date = 2023-08-31
 [taxonomies]
 tags = ["Demo", "Test"]
 [extra]
+archive = "This page is, in fact, not archived."
 toc = true
 disclaimer = """
 See [demo](@/demo/index.md) for showcase of all Duckquill possibilities, this page is a demo of a post with title, publication date, tags, disclaimer, table of contents and comments.
 """
-[extra.comments]
-id = ""
 +++
 
 ![Quill](quill.png)

sass/_blog-list.scss

@@ -0,0 +1,41 @@
+.blog-list {
+	article {
+		position: relative;
+
+		&.draft {
+			outline: 2px dashed var(--fg-muted-2);
+			outline-offset: 0.5rem;
+			border-radius: 1rem;
+		}
+
+		.draft-badge,
+		.archive-badge {
+			position: absolute;
+			top: 0;
+			right: 0;
+			transition: var(--transition);
+			box-shadow: var(--edge-highlight);
+			border-radius: 999px;
+			padding: 0.25rem 0.75rem;
+			font-weight: bold;
+
+			svg {
+				vertical-align: -0.125em;
+			}
+		}
+
+		.draft-badge {
+			background-color: var(--fg-muted-1);
+			color: var(--fg-muted-4);
+		}
+
+		.archive-badge {
+			background-color: var(--purple-bg);
+			color: var(--purple-fg);
+		}
+	}
+
+	hr:last-of-type {
+		display: none;
+	}
+}

sass/_main.scss

@@ -140,10 +140,6 @@ hr {
 	width: 100%;
 }
 
-.blog-list hr:last-of-type {
-	display: none;
-}
-
 blockquote {
 	margin: 0;
 	border-left: 0.25rem solid var(--primary-color);

sass/style.scss

@@ -9,6 +9,7 @@
 @use "variables";
 @use "main";
 
+@use "blog-list";
 @use "buttons";
 @use "comments";
 @use "crt";

templates/blog.html

@@ -30,7 +30,7 @@
 {% if page.extra.archive %}
 	<div class="statement-container archive">
 		<strong class="big">
-			<svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7.906.094C7.38.066 6.867.375 6.47 1.063L.219 12.656C-.316 13.621.266 15 1.313 15h13.156c.98 0 1.902-1.16 1.219-2.344L9.375 1.125C8.977.48 8.434.121 7.906.094M9 4v5c.008.527-.473 1-1 1s-1.008-.473-1-1V4zm-1 7c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m0 0"/></svg>
+			<svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0"/></svg>
 			Archived
 		</strong>
 		{{ page.extra.archive | markdown | safe }}

templates/blog_list.html

@@ -13,8 +13,20 @@
 
 <div class="blog-list">
 	{% for page in section.pages %}
-		<article>
+		<article {% if page.draft %}class="draft"{% endif %}>
 			<h3><a class="link-page" href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
+			{%- if page.draft %}
+				<span class="draft-badge">
+					<svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M12.277.832c-.578.008-1.168.23-1.691.754l-9 9A2 2 0 0 0 1 12v3h3c.531 0 1.04-.21 1.414-.586l9-9c1.79-1.789.082-4.39-1.89-4.57-.083-.012-.165-.012-.247-.012M10.5 4.437 11.563 5.5 4.5 12.563 3.438 11.5zm0 0"/></svg>
+					Drafted
+				</span>
+			{%- endif %}
+			{%- if page.extra.archive %}
+				<span class="archive-badge">
+					<svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0"/></svg>
+					Archived
+				</span>
+			{%- endif %}
 			{%- if page.description %}
 				<p>{{ page.description }}</p>
 			{%- endif %}

templates/page.html

@@ -3,7 +3,10 @@
 {% block content %}
 {% if page.extra.archive %}
 	<div class="statement-container archive">
-		<strong class="big"><svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M8 1.371c-.77 0-1.535.375-1.941 1.125l-4.88 9.063C.364 13.074 1.513 15 3.235 15h9.532c1.722 0 2.87-1.926 2.054-3.441L9.938 2.496C9.535 1.746 8.77 1.371 8 1.371m0 1.926c.064 0 .129.049.18.144l4.879 9.067c.144.262.004.492-.293.492H3.234c-.296 0-.437-.23-.296-.492L7.82 3.44c.051-.095.116-.144.18-.144m-.031 2.672A1 1 0 0 0 7.812 6c-.457.086-.82.535-.812 1v1c-.008.527.473 1 1 1s1.008-.473 1-1V7c.016-.543-.488-1.047-1.031-1.031M8 10c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1"></path></svg> Archived</strong>
+		<strong class="big">
+			<svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0"/></svg>
+			Archived
+		</strong>
 		{{ page.extra.archive | markdown | safe }}
 	</div>
 {% endif %}

templates/partials/comments.html

@@ -25,7 +25,7 @@
 	</p>
 
 	<p>
-		<a id="load-comments" class="inline-button" onclick="loadComments()">Load Comments…</a>
+		<a id="load-comments" class="inline-button" onclick="loadComments()">Load Comments</a>
 	</p>
 
 	<div id="comments-wrapper">