feat: Improve metadata, add blog descriptions

README.md

@@ -34,9 +34,20 @@ theme = "duckquill"
 
 Duckquill offers some configuration options to make it fit you better.
 
-### Custom CSS
+### Custom stylesheets
 
-You can add your own or override existing styles in the `sass/custom.scss` of your site, if for some reason overridden class are not respected, try using `!important`. You can import styles from Duckquill using `@use "../themes/duckquill/sass/NEEDED_FILE.scss";`.
+You can add your own or override existing styles by creating custom stylesheet and adding it in the `config.toml`:
+
+```toml
+[extra]
+stylesheets = [
+  "YOUR_STYLE.css"
+]
+```
+
+It expects the style to be in the `static` directory. If you are using Sass it will be compiled there anyway.
+
+If for some reason overridden class are not respected, try using `!important`. You can import styles from Duckquill using `@use "../themes/duckquill/sass/NEEDED_FILE.scss";`.
 
 ### Primary color
 

config.toml

@@ -1,8 +1,9 @@
 title = "Duckquill"
 base_url = "https://duckquill.exozy.me"
-description = "Modern, pretty, and clean theme"
+description = "Modern, pretty, and clean theme."
 
 compile_sass = true
+minify_html = true
 generate_feed = true
 feed_filename = "atom.xml"
 build_search_index = false

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

@@ -1,5 +1,6 @@
 +++
 title = "The Quill of Duck"
+description = "This is a Duckquill post example, this post has nothing but a bunch of text and random formatting, acting like a demo."
 date = 2023-08-31
 [taxonomies]
 tags = ["Demo", "Test"]

content/demo/index.md

@@ -47,24 +47,6 @@ GitHubPages::Dependencies.gems.each do |gem, version|
 end
 ```
 
-```scss, linenos, linenostart=10, hl_lines=3-4 8-9, hide_lines=2 7
-pre mark {
-
-  display: block;
-
-  color: currentcolor;
-
-}
-
-pre table td:nth-of-type(1) {
-
-  color: #6b6b6b;
-
-  font-style: italic;
-
-}
-```
-
 #### Header 4
 
 - This is an unordered list following a header.

sass/_comments.scss

@@ -59,7 +59,7 @@ section#comments {
         background-color: var(--fg05);
         border-radius: 9999px;
         color: var(--fg-color);
-        font-size: smaller;
+        font-size: 0.8rem;
         font-weight: normal;
         padding: 0.25rem 0.75rem;
 
@@ -85,7 +85,7 @@ section#comments {
     time {
       @extend small;
 
-      font-size: smaller;
+      font-size: 0.8rem;
       grid-area: time;
 
       &.edited::after {
@@ -171,7 +171,7 @@ section#comments {
       .boosts {
         cursor: default;
         font-weight: 600;
-        font-size: 90%;
+        font-size: 0.9rem;
         padding: 0.4rem 1rem;
         border-radius: var(--rounded-corner);
         background-color: var(--orange-bg);
@@ -187,7 +187,7 @@ section#comments {
       .faves {
         cursor: default;
         font-weight: 600;
-        font-size: 90%;
+        font-size: 0.9rem;
         padding: 0.4rem 1rem;
         border-radius: var(--rounded-corner);
         background-color: var(--red-bg);

sass/_main.scss

@@ -86,11 +86,11 @@ h6 {
 }
 
 h1 {
-  font-size: 2em;
+  font-size: 2rem;
 }
 
 h2 {
-  font-size: 1.4em;
+  font-size: 1.4rem;
 }
 
 a {
@@ -165,7 +165,7 @@ kbd {
   border-radius: var(--rounded-corner-small);
   background-color: var(--fg07);
   box-shadow: inset 0 -2px 0 var(--fg09);
-  font-size: medium;
+  font-size: 0.8rem;
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
@@ -175,7 +175,7 @@ kbd {
 kbd:active {
   background-color: var(--fg09);
   box-shadow: inset 0 1px 0 var(--fg09);
-  transform: translate(0, 2px);
+  transform: translateY(2px);
 }
 
 mark {
@@ -191,7 +191,7 @@ figcaption {
   display: block;
   text-align: center;
   color: var(--fg50);
-  font-size: smaller;
+  font-size: 0.9rem;
 }
 
 details {
@@ -232,11 +232,6 @@ th {
   padding: 0;
 }
 
-// make tables vertically aligned to the top
-tbody td {
-  vertical-align: top;
-}
-
 // MEDIA
 img,
 video {

templates/blog_list.html

@@ -16,26 +16,31 @@
   <h2>
     <a class="link-page" href="{{ page.permalink | safe }}">{{ page.title }}</a>
   </h2>
-  <small>
+  {%- if page.description %}
-    <time datetime="{{ page.date | date(format='%+') }}" pubdate>
+    <p>{{ page.description }}</p>
-      {{- page.date | date(format=config.extra.date_format) -}}
+  {%- endif %}
-    </time>
+  {%- if page.date %}
-    {%- if page.taxonomies %}
+    <small>
-      {%- for name, taxon in page.taxonomies %}
+      <time datetime="{{ page.date | date(format='%+') }}" pubdate>
-      •
+        {{- page.date | date(format=config.extra.date_format) -}}
-        {%-for item in taxon %}
+      </time>
-        <a class="link-tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">
+      {%- if page.taxonomies %}
-          <svg class="link-icon" viewBox="0 0 16 16" width="16" height="16">
+        {%- for name, taxon in page.taxonomies %}
-            <path
+        •
-              fill="currentColor"
+          {%-for item in taxon %}
-              d="M4 0C1.785 0 0 1.785 0 4v3.09c0 .847.336 1.66.938 2.262l5.382 5.382c.93.934 2.43.934 3.36 0l4.965-4.964c.98-.98.98-2.56 0-3.54L9.227.812A2.777 2.777 0 0 0 7.266 0H4zm0 2h3.266c.207 0 .402.082.546.227l5.418 5.418a.512.512 0 0 1 0 .71L8.266 13.32a.38.38 0 0 1-.532 0L2.352 7.937A1.198 1.198 0 0 1 2 7.09V4c0-1.098.902-2 2-2zm.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"
+          <a class="link-tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">
-            />
+            <svg class="link-icon" viewBox="0 0 16 16" width="16" height="16">
-          </svg>
+              <path
-          {{ item }}
+                fill="currentColor"
-        </a>&nbsp;
+                d="M4 0C1.785 0 0 1.785 0 4v3.09c0 .847.336 1.66.938 2.262l5.382 5.382c.93.934 2.43.934 3.36 0l4.965-4.964c.98-.98.98-2.56 0-3.54L9.227.812A2.777 2.777 0 0 0 7.266 0H4zm0 2h3.266c.207 0 .402.082.546.227l5.418 5.418a.512.512 0 0 1 0 .71L8.266 13.32a.38.38 0 0 1-.532 0L2.352 7.937A1.198 1.198 0 0 1 2 7.09V4c0-1.098.902-2 2-2zm.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"
+              />
+            </svg>
+            {{ item }}
+          </a>&nbsp;
+          {%- endfor %}
         {%- endfor %}
-      {%- endfor %}
+      {%- endif %}
-    {%- endif %}
+    </small>
-  </small>
+  {%- endif %}
 </article>
 {% endfor %} {% endblock content %}

templates/includes/head.html

@@ -3,23 +3,34 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="{{ config.extra.primary_color }}" />
+  <link rel="canonical" href="{{ current_url | default(value='/') }}" />
 
-  <title>{% block title %}{{ config.title }}{% endblock title %}</title>
+  <title>
+    {% if page.title %} {{ page.title }} - {{ config.title }}
+    {% elif section.title %} {{ section.title }} - {{ config.title }}
+    {% else %} {{ config.title }} {% endif %}
+  </title>
 
   <link href="{{ get_url(path='style.css') }}" rel="stylesheet" />
+  {% if config.extra.stylesheets %}
+    {% for stylesheet in config.extra.stylesheets %}
+      <link href="{{ get_url(path=stylesheet) }}" rel="stylesheet">
+    {% endfor %}
+  {% endif %}
   <link href="{{ get_url(path='custom.css') }}" rel="stylesheet" />
 
   {% if config.extra.animated_favicon %}
-  <link rel="icon" type="image/gif" href="{{ config.base_url }}/favicon.gif" />
+    <link rel="icon" type="image/gif" href="{{ get_url(path='favicon.gif') }}" />
   {% else %}
-  <link rel="icon" type="image/png" href="{{ config.base_url }}/favicon.png" />
+    <link rel="icon" type="image/png" href="{{ get_url(path='favicon.png') }}" />
   {% endif %}
-  <link rel="apple-touch-icon" sizes="180x180" href="{{ config.base_url }}/apple-touch-icon.png" />
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ get_url(path='apple-touch-icon.png') }}" />
   <link rel="me" href="https://{{ config.extra.comments.host }}/@{{ config.extra.comments.user }}" />
 
   <!-- Open Graph -->
-  <meta property="og:title" content="{{ config.title }}" />
+  <meta property="og:site_name" content="{{ config.title }}" />
-  <meta property="og:url" content="{{ config.base_url }}" />
+  <meta property="og:title" content="{{ page.title | default(value=config.title) }}" />
-  <meta property="og:description" content="{{ config.description }}" />
+  <meta property="og:url" content="{{ current_url | default(value='/') }}" />
-  <meta property="og:image" content="{{ config.base_url }}/card.png" />
+  <meta property="og:description" content="{{ page.description | default(value=config.description) }}" />
+  <meta property="og:image" content="{{ get_url(path='card.png') }}" />
 </head>

templates/includes/nav.html

@@ -5,22 +5,22 @@
     </a>
     <ul>
       {% for link in config.extra.nav.links %}
-      <li>
+        <li>
-        <a href="{{link.url}}">{{link.name}}</a>
+          <a href="{{link.url}}">{{link.name}}</a>
-      </li>
+        </li>
       {% endfor %}
       {% if config.extra.nav.show_feed %}
-      <li>
+        <li>
-        <a href="{{ config.base_url }}/atom.xml">
+          <a href="{{ config.base_url }}/atom.xml">
-          <svg class="link-icon" viewBox="0 0 16 16" width="16" height="16">
+            <svg class="link-icon" viewBox="0 0 16 16" width="16" height="16">
-            <path
+              <path
-              fill="currentColor"
+                fill="currentColor"
-              d="M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998zm0 0"
+                d="M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998zm0 0"
-            />
+              />
-          </svg>
+            </svg>
-          Feed
+            Feed
-        </a>
+          </a>
-      </li>
+        </li>
       {% endif %}
     </ul>
   </div>