From d7c2f206b94eecf6648d05cec0677a93f7e2b27e Mon Sep 17 00:00:00 2001 From: daudix-UFO Date: Fri, 3 Nov 2023 00:23:42 +0300 Subject: [PATCH] feat: Comments in config.toml --- config.toml | 40 +++++++++++ content/_index.md | 66 ++++-------------- sass/_main.scss | 123 +++++++++++++++++---------------- sass/_variables.scss | 4 -- templates/includes/footer.html | 16 ++--- 5 files changed, 123 insertions(+), 126 deletions(-) diff --git a/config.toml b/config.toml index eb6f0d4..9e710ad 100644 --- a/config.toml +++ b/config.toml @@ -22,16 +22,35 @@ highlight_themes_css = [ smart_punctuation = true [extra] +# Sets browser theme color, +# see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color primary_color = "#ff7800" +# If the favicon is GIF or not animated_favicon = false +# Tera date format (not used in comments!), +# see https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html +# for all available variables. date_format = "%d %B %Y" +# The name of the Git forge the site's source code is hosted on, used on the 404 page hosting = "Forgejo" +# URL to issue tracker issues_url = "https://git.exozy.me/daudix/duckquill/issues" +# URL to website's source code source_url = "https://git.exozy.me/daudix/duckquill" +# Additional stylesheets; expects it to be in the ./static/ directory. +# If you are using Sass it will be compiled there anyway. +# stylesheets = [ +# "YOUR_STYLE.css", +# "ALSO_YOUR_STYLE.css" +# ] [extra.nav] +# Display RSS/Atom feed button in the nav show_feed = true +# Show icons next to links in the nav icons = true +# Links used in the nav; any icon from https://icons.getbootstrap.com +# can be used as the icon. The bi- prefix should not be added. links = [ {url = "https://git.exozy.me/daudix/duckquill", name = "Repo", icon = "git"}, {url = "/demo", name = "Demo", icon = "car-front-fill"}, @@ -39,13 +58,34 @@ links = [ ] [extra.footer] +# URL to the website without the https:// part, used for Johnvertisement leaderboard johnvert_ref = "daudix.exozy.me" +# "© Title, YEAR" in the footer show_copyright = true +# Johnvertisement in the footer show_johnvert = false +# "Powered by Zola and Duckquill" in footer show_powered_by = true +# Link to website source show_source = true +# Based on https://github.com/cassidyjames/cassidyjames.github.io/blob/75cd2a202de7a1026de1ea00a4ef1d5b2675c7ff/_config.yaml#L35-L74 +# +# Mastodon-powered commenting. +# Values can be overridden in front-matter, e.g. +# for multi-author blogs or guest posts. +# +# These variables are also used for Mastodon verification, +# the needed rel="me" link is set in the head based on these. [extra.comments] +# Your Mastodon API host; this should be where you have an account host = "mstdn.social" +# Used to determine who the original/verified poster is; +# role may be expanded in the future (e.g. for moderation). user = "Daudix" +# Optional; required to fetch more than 60 replies to any given blog post. +# Application access token with read:statuses scope; NOTE: IF INCLUDED, ANYONE +# 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 = "jTNX9pAV8XEPBby0cPWF6CmGY60kkIy4vidggfxXmoQ" diff --git a/content/_index.md b/content/_index.md index a7bf360..818ac64 100644 --- a/content/_index.md +++ b/content/_index.md @@ -55,7 +55,7 @@ theme = "duckquill" ## Options -Duckquill offers some configuration options to make it fit you better. +Duckquill offers some configuration options to make it fit you better; most options have pretty descriptive comments, so it should be easy to understand what they do. ### Custom stylesheets @@ -68,7 +68,7 @@ stylesheets = [ ] ``` -It expects the style to be in the `static` directory. If you are using Sass it will be compiled there anyway. +Additional stylesheets; expects it 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";`. @@ -83,6 +83,15 @@ First, change the primary color in `config.toml`: primary_color = "#HEX_COLOR_CODE" ``` +Then, add `custom.css` to additional stylesheets. + +```toml +[extra] +stylesheets = [ + "custom.css" +] +``` + Then, paste the following code inside `sass/custom.scss` (inside your site, not the theme): ```sass @@ -118,58 +127,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%), } ``` -Set any color in `$primary-color` and reload, the primary color should be used now. This is a hack that is needed until Zola will be able to use `config.toml` inside Sass. - -### `[extra]` variables: - -| Variable | Description | Default | -|--------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------| -| `primary_color` | Primary color used in some browsers set in metadata, see [ #primary-color ]( https://git.exozy.me/daudix/duckquill#primary-color ) | `#ff7800` | -| `animated_favicon` | Specify if the favicon are animated GIF | `false` | -| `date_format` | Allows setting custom date format in [ Tera ]( https://keats.github.io/tera ) format, all available variables are listed [ here ]( https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html ). Does not apply to comments | `%d %B %Y` | -| `hosting` | Where the website source are located, used on 404 page | `Forgejo` | -| `issues_url` | Link to site bug tracker, if present | `https://git.exozy.me/daudix/duckquill/issues` | -| `source_url` | Link to site source (not built site) | `https://git.exozy.me/daudix/duckquill` | - -### `[extra.nav]` variables: - -| Variable | Description | Default | -|-------------|--------------------------------------------------------------------------------------------------------------|-----------| -| `show_feed` | Whether to display "Feed" link | `true` | -| `icons` | Whether to display icons in navigation bar, when set to `false`, icons set in `links` won't display as well | `true` | -| `links` | Links used in navigation bar | see below | - -The `links` are set like the following: - -```toml -links = [ - {url = "https://git.exozy.me/daudix/duckquill", name = "Repo", icon = "git"}, - {url = "/demo", name = "Demo", icon = "car-front-fill"}, - {url = "/blog", name = "Blog", icon = "journal-bookmark-fill"}, -] -``` - -You can set any icon from [Bootstrap Icons](https://icons.getbootstrap.com) for the navigation items, simply add the `icon` variable and put icon name there, without `bi-` prefix, since it's added automatically :) - -### `[extra.footer]` variables: - -| Variable | Description | Default | -|-------------------|--------------------------------------------------------------------------------------------------------------------------|-------------------| -| `johnvert_ref` | Site URL without `https://` part or trailing slashes, e.g `example.org`. Works only if `show_johnvert` are set to `true` | `daudix.exozy.me` | -| `show_copyright` | Whether to display `© Duckquill, 2023` | `true` | -| `show_johnvert` | Whether to display [Johnvertisement](https://john.citrons.xyz) | `false` | -| `show_powered_by` | Whether to display `Powered by Zola and Duckquill` | `true` | -| `show_source` | Whether to display `Website source` link | `true` | - -### `[extra.comments]` variables: - -| Variable | Description | Default | -|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------| -| `host` | Mastodon home server, e.g `mstdn.social` | `mstdn.social` | -| `user` | Mastodon username | `Daudix` | -| `token` | Mastodon app token. Can be left empty, but in this case only first 60 comments will be loaded, instructions on how to get one are available [here](https://github.com/cassidyjames/cassidyjames.github.io/blob/47c449a0083113ea5be8d215beb6650ac64929e4/_config.yaml#L48-L52) | `jTNX9pAV8XEPBby0cPWF6CmGY60kkIy4vidggfxXmoQ` | - -These values are also used in the `` for Mastodon verification. +Set any color in `$primary-color` and reload, the primary color should be used now. This is a hack that is needed until Zola will be able to use `config.toml` options inside Sass files. ## Test pages diff --git a/sass/_main.scss b/sass/_main.scss index c97bbf1..8b76e44 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -25,7 +25,7 @@ body { body { font-family: "Inter", sans-serif; font-weight: 400; - line-height: 1.5; + line-height: 1.6; color: var(--fg-color); background-color: var(--bg-color); // put footer at the bottom for short pages, such as the 404 @@ -176,7 +176,7 @@ kbd { font-family: "JetBrains Mono", monospace; padding: 2px 6px; border-radius: var(--rounded-corner-small); - background-color: var(--fg07); + background-color: var(--fg05); box-shadow: inset 0 -2px 0 var(--fg09), 0 -1px 0 var(--fg09); cursor: pointer; } @@ -188,6 +188,66 @@ kbd:active { transform: translateY(2px); } +// CODE +code { + font-family: "JetBrains Mono", monospace; + padding: 2px 6px; + border-radius: var(--rounded-corner-small); + background-color: var(--fg05); + color: var(--red-fg); +} + +pre code { + background-color: unset; + border-radius: unset; + color: unset; + padding: unset; +} + +// apply monospace font to everything inside 
+pre * {
+  font-family: "JetBrains Mono", monospace;
+}
+
+pre {
+  line-height: normal; // unset line height
+  padding: 1rem;
+  margin: 1rem 0 1rem;
+  border-radius: var(--rounded-corner);
+  max-width: 100vw;
+  box-shadow: var(--shadow);
+  overflow: auto;
+}
+
+// the line numbers already provide some kind of left/right padding
+pre[data-linenos] {
+  padding: 1rem 0;
+}
+
+pre table td {
+  padding: 0;
+  border: none;
+}
+
+// the line number cells
+pre table td:nth-of-type(1) {
+  text-align: center;
+  user-select: none;
+}
+
+pre mark {
+  display: block;
+  background-color: var(--fg05);
+  color: var(--fg-color); // unset mark color from primary color to text color
+  border-radius: 0; // unset code block border radius
+  padding: 0; // unset mark padding
+}
+
+pre table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
 mark {
   padding: 2px 6px;
   border-radius: var(--rounded-corner-small);
@@ -234,7 +294,7 @@ table th {
 table th,
 table td {
   padding: 0.5rem 1rem;
-  border: 1px solid var(--fg07);
+  border: 1px solid var(--fg05);
 }
 
 td,
@@ -401,63 +461,6 @@ img:not(.no-hover):hover {
   color: var(--fg-color);
 }
 
-// CODE
-code {
-  font-family: "JetBrains Mono", monospace;
-  color: var(--red-fg);
-}
-
-pre code {
-  background-color: unset;
-  border-radius: unset;
-  color: unset;
-  padding: unset;
-}
-
-// apply monospace font to everything inside 
-pre * {
-  font-family: "JetBrains Mono", monospace;
-}
-
-pre {
-  line-height: normal; // unset line height
-  padding: 1rem;
-  margin: 1rem 0 1rem;
-  border-radius: var(--rounded-corner);
-  max-width: 100vw;
-  box-shadow: var(--shadow);
-  overflow: auto;
-}
-
-// the line numbers already provide some kind of left/right padding
-pre[data-linenos] {
-  padding: 1rem 0;
-}
-
-pre table td {
-  padding: 0;
-  border: none;
-}
-
-// the line number cells
-pre table td:nth-of-type(1) {
-  text-align: center;
-  user-select: none;
-}
-
-pre mark {
-  display: block;
-  background-color: var(--fg07);
-  color: var(--fg-color); // unset mark color from primary color to text color
-  border-radius: 0; // unset code block border radius
-  padding: 0; // unset mark padding
-}
-
-pre table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
 // CRT
 .crt {
   margin: 1rem 0 1rem;
diff --git a/sass/_variables.scss b/sass/_variables.scss
index d87cec2..7671bbb 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -28,9 +28,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   --rounded-corner: 0.75rem;
 
   // CUSTOM COLOR PALETTE
-  --fg03: rgba(0, 0, 0, 0.03);
   --fg05: rgba(0, 0, 0, 0.05);
-  --fg07: rgba(0, 0, 0, 0.07);
   --fg09: rgba(0, 0, 0, 0.09);
   --fg50: rgba(0, 0, 0, 0.5);
 
@@ -66,9 +64,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
     --fg-color: var(--light2);
 
     // CUSTOM COLOR PALETTE
-    --fg03: rgba(255, 255, 255, 0.03);
     --fg05: rgba(255, 255, 255, 0.05);
-    --fg07: rgba(255, 255, 255, 0.07);
     --fg09: rgba(255, 255, 255, 0.09);
     --fg50: rgba(255, 255, 255, 0.5);
 
diff --git a/templates/includes/footer.html b/templates/includes/footer.html
index 0ddf4e7..af82ef1 100644
--- a/templates/includes/footer.html
+++ b/templates/includes/footer.html
@@ -1,21 +1,21 @@