feat: Stuff

.gitlab-ci.yml

@@ -1,28 +1,9 @@
 image: jekyll/jekyll
 
-cache:
+pages:
-  paths:
-    - _bundle/
-
-build:
-  stage: build
   script:
     - bundle install
-    - bundle exec jekyll build
+    - bundle exec jekyll build -d public
-    - mv _site public
   artifacts:
     paths:
       - public
-  except:
-    - main
-
-pages:
-  stage: deploy
-  script:
-    - bundle exec jekyll build
-    - mv _site public
-  artifacts:
-    paths:
-      - public
-  only:
-    - main

.woodpecker.yml

@@ -1,23 +1,4 @@
-# Jekyll on Woodpecker to codeberg pages
+# Uses https://codeberg.org/Codeberg-CI/examples/src/branch/main/Jekyll/jekyll.yml
-#
-# This file would typically be .woodpecker.yml in the root of your repository.
-#
-# Takes a repository with jekyll source, generates the static site and
-# pushes the result to codeberg pages
-#
-# Needs a codeberg access token (cbtoken) as secret in woodpecker config
-# Also uses another secret (cbmail) with email address for git config
-#
-# CBIN must be replaced with the source repo
-# CBOUT must be replaced with the target codeberg pages repo
-# CBUSER must be replaced with the user/org
-#
-# See the _config.yml file for the important keep_files: line to preserve
-# git metadata during build
-#
-# We also assume a domains file in the source repo that gets copied to
-# .domains in the target repo so codeberg pages works for custom domains
-#
 
 steps:
   build:

404.md

@@ -3,7 +3,7 @@ layout: default
 permalink: /404.html
 ---
 
-![404]({{site.baseurl}}/assets/404.png){:.full.pixels}{:loading="lazy"}
+![404]({{site.baseurl}}/assets/404.png){:.full.pixels}
 
 # Document Not Found
 

Gemfile

@@ -2,6 +2,7 @@ source 'https://rubygems.org'
 
 group :jekyll_plugins do
   gem 'jekyll-sass-converter', '~> 2.2'
+  gem 'jekyll-loading-lazy'
   gem 'jekyll-sitemap'
   gem 'jekyll-feed'
   gem 'jekyll-toc'

README.md

@@ -1,6 +1,6 @@
 # Duckquill
 
-[![status-badge](https://ci.codeberg.org/api/badges/12428/status.svg)](https://ci.codeberg.org/repos/12428)
+[![status-badge](https://ci.codeberg.org/api/badges/12567/status.svg)](https://ci.codeberg.org/repos/12567)
 
 ## Usage
 
@@ -34,6 +34,6 @@ _Initial script (`local.sh`) were taken from [here](https://kuros.in/docker/dock
 
 ## ❤️ Special thanks
 
-- Jakub Steiner for an awesome [OS Component Website](https://jimmac.github.io/os-component-website) that are used as a base
+- [Jakub Steiner](https://jimmac.eu) for an awesome [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
-- Cassidy James for and awesome [Mastodon-powered comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
+- [Cassidy James](https://cassidyjames.com) for an awesome [Mastodon-powered comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
-- dwb, ejm and jgs for ASCII art
+- dwb, ejm and jgs for awesome ASCII art

_config.yml

@@ -1,6 +1,7 @@
 # Site settings
 title: Duckquill
-baseurl: "/duckquill" # the subpath of your site, e.g. /blog/
+baseurl:
+  "/duckquill" # the subpath of your site, e.g. /blog/
   # usually empty. necessary for building absolute URIs
   # for metadata header
 url: "https://daudix-ufo.codeberg.page" # the base hostname & protocol for your site
@@ -31,7 +32,7 @@ comments:
   # WILL BE ABLE TO READ THE ASSOCIATED ACCOUNT'S PRIVATE STATUSES. It is highly
   # recommended to use a dedicated bot/API account to create an application with
   # scope read:statuses.
-  token:
+  token: jTNX9pAV8XEPBby0cPWF6CmGY60kkIy4vidggfxXmoQ
 
   # Additional verified usernames in username@example.com format. If they are on
   # the host listed above, OMIT the @example.com
@@ -49,6 +50,7 @@ feed:
   tags:
     path: "feed/tags/"
 plugins:
+  - jekyll-loading-lazy
   - jekyll-sitemap
   - jekyll-feed
   - jekyll-toc

_includes/comments.html

@@ -1,6 +1,6 @@
 <!--
 Taken from https://github.com/cassidyjames/cassidyjames.github.io/blob/99782788a7e3ba3cc52d6803010873abd1b02b9e/_includes/comments.html
-Inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/commit/45f9750bb53b9f0f6f28399ce4d21785a3bb7d22/_includes/fediverse_comments.html
+which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/commit/45f9750bb53b9f0f6f28399ce4d21785a3bb7d22/_includes/fediverse_comments.html
 -->
 
 {% if include.host %}

_sass/comments.scss

@@ -33,7 +33,7 @@ section#comments {
         background-color: var(--accent-color);
         border-radius: 50%;
         bottom: -0.25rem;
-        color: var(--dark4);
+        color: var(--light2);
         content: "✓";
         display: block;
         font-size: 1.25rem;
@@ -70,7 +70,7 @@ section#comments {
 
         &.op {
           background-color: var(--accent-color);
-          color: var(--dark4);
+          color: var(--light2);
 
           &::before {
             content: "✓";

_sass/custom.scss

@@ -0,0 +1,18 @@
+/* Custom styles/overrides */
+section#comments {
+  .comment {
+    .avatar-link {
+      &.op::after {
+        color: var(--dark4);
+      }
+    }
+
+    .author {
+      .instance {
+        &.op {
+          color: var(--dark4);
+        }
+      }
+    }
+  }
+}

assets/css/style.scss

@@ -17,3 +17,4 @@
 @import "main";
 @import "rouge-github";
 @import "comments";
+@import "custom";

demo-page.md

@@ -5,7 +5,7 @@ title: "Cake Party!"
 
 # Welcome to the cake party!
 
-![](https://i.imgur.com/ZS4LFj8.png){: width="50%"}{:loading="lazy"}
+![](https://i.imgur.com/ZS4LFj8.png){: width="50%"}
 
 Sadly, the cake is a _lie_
 

demo.md

@@ -106,11 +106,11 @@ end
 
 ### Small image
 
-![Codeberg icon](https://codeberg.org/Codeberg/Design/raw/branch/main/logo/icon/png/codeberg-logo_icon_blue-64x64.png){:loading="lazy"}
+![Codeberg icon](https://codeberg.org/Codeberg/Design/raw/branch/main/logo/icon/png/codeberg-logo_icon_blue-64x64.png)
 
 ### Large image
 
-![Codeberg horizontal](https://codeberg.org/Codeberg/Design/raw/branch/main/logo/horizontal/png/codeberg-logo_horizontal_blue-850x250.png){:loading="lazy"}
+![Codeberg horizontal](https://codeberg.org/Codeberg/Design/raw/branch/main/logo/horizontal/png/codeberg-logo_horizontal_blue-850x250.png)
 
 ### Definition lists can be used with HTML syntax.
 
@@ -135,16 +135,34 @@ The final element.
 
 ### Extra
 
-Display pixel-art in full width without filtering.
+Display pixel-art without filtering.
 
 ```
-![Pixels](https://pixeljoint.com/files/icons/full/animation_rewinded_mostfinal.gif){:.full.pixels}{:loading="lazy"}
+{:.pixels}
 ```
 
-![Pixels](https://pixeljoint.com/files/icons/full/animation_rewinded_mostfinal.gif){:.full.pixels}{:loading="lazy"}
+![Pixels](https://pixeljoint.com/files/icons/full/animation_rewinded_mostfinal.gif){:.full.pixels}
 
 [Source](https://pixeljoint.com/pixelart/15027.htm){:.site-link}
 
+Full-width.
+
+```
+{:.full}
+```
+
+Shadow and round corners.
+
+```
+{:.media}
+```
+
+...With zoom on hover.
+
+```
+{:.media.hover}
+```
+
 ---
 
 Keyboard shortcuts.
@@ -157,16 +175,20 @@ Keyboard shortcuts.
 
 ---
 
-Link with arrow.
+Link to page (rightwards arrow).
 
 ```
-[Link to page](markdown-page.md){:.page-link}
+{:.page-link}
-
-[Link to site](https://example.org){:.site-link}
 ```
 
 [Link to page](../markdown-page){:.page-link}
 
+Link to site (up-rightwards arrow).
+
+```
+{:.site-link}
+```
+
 [Link to site](https://example.org){:.site-link}
 
 ---

index.md

@@ -15,10 +15,15 @@ jgs~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~
 
 Edit a bit of metadata and tweak some of the included graphics and have a blog up in minutes!
 
+- Pretty, yet lightweight. No JavaScript are used.
 - Proper favicon for modern browsers and Apple device icons.
-- Mastodon, Facebook and other social media meta cards for easy sharing. Try [Share Preview](https://apps.gnome.org/app/com.rafaelmardojai.SharePreview) to test.
+- Mastodon, Lemmy and other social media meta cards for easy sharing. Try [Share Preview](https://apps.gnome.org/app/com.rafaelmardojai.SharePreview) to test.
 - Local copy of the amazing [Inter font](https://rsms.me/inter/). No slowdowns pulling from external hosting.
-- Mobile friendly, dark variant included.
+- Mobile friendly, with proper dark variant included.
+- [jekyll-compress-html](https://github.com/penibelst/jekyll-compress-html) and [jekyll-loading-lazy](https://github.com/gildesmarais/jekyll-loading-lazy) are included for better experience on slow networks.
+- [Mastodon-powered comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon). Comment using any ActivityPub service by replying to Mastodon post.
+
+> See [demo](demo) for showcase of all Duckquill possibilities. Oh and [comments demo](comments) for showcase of Mastodon-powered comments.
 
 Make yourself a cup of your <abbr title="Coffee, tea, or water">favorite drink</abbr> and let's start!
 
@@ -47,3 +52,9 @@ The process of setting up the site locally consists of:
 - Test the site locally. Run `local.sh serve`.
 
 - `git commit` your changes and push to your remote repo for automatic deployment.
+
+## Special thanks ♥
+
+- [Jakub Steiner](https://jimmac.eu) for an awesome [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
+- [Cassidy James](https://cassidyjames.com) for an awesome [Mastodon-powered comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
+- dwb, ejm and jgs for awesome ASCII art