hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
David Lapshin
2024-04-29 17:05:11 +03:00
parent 0259e03305
commit 34ebf5a6dc
11 changed files with 81 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
content/blog/drafted-post/index.md Normal file
View File

@ -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.

2
content/blog/ipsum/index.md
View File

@ -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.

2
content/blog/lorem/index.md
View File

@ -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.

3
content/blog/the-quill-of-duck/index.md
View File

@ -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)

41
sass/_blog-list.scss Normal file
View File

@ -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;
}
}

4
sass/_main.scss
View File

@ -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);

1
sass/style.scss
View File

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

2
templates/blog.html
View File

@ -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 }}

14
templates/blog_list.html
View File

@ -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 %}

5
templates/page.html
View File

@ -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 %}

2
templates/partials/comments.html
View File

@ -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">