Merge pull request #40 from welpo/feature/dimmable-image-shortcode

✨ feat: add dimmable-image shortcode for dark theme

README.md

@@ -25,7 +25,7 @@ A simple blog theme powered by [Zola](https://getzola.org). See a live preview [
 - [x] Social Links.
 - [x] Tags.
 - [X] Syntax highlighting.
-- [X] Invertable images ([shortcode](https://www.getzola.org/documentation/content/shortcodes/)).
+- [X] Invertable and dimmable images shortcodes.
 
 See the project's roadmap [here](https://github.com/users/welpo/projects/1).
 

content/markdown.md

@@ -5,6 +5,32 @@ date = "2023-01-31"
 tags = ["markdown", "test"]
 +++
 
+## Image shortcodes
+
+### Invertable image
+
+You can use this shortcode for graphs, line drawings, diagrams…
+
+{{ invertable_image(src="$BASE_URL/img/graph.webp", alt="Invertable graph") }}
+
+Usage:
+
+```
+{{/* invertable_image(src="img/graph.webp", alt="Invertable graph") */}}
+```
+
+### Dimmable image
+
+Images with too much brightness or contrast can be jarring against a dark background. Here's an example of a photograph that dims when the dark theme is active.
+
+{{ dimmable_image(src="$BASE_URL/img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") }}
+
+Usage:
+
+```
+{{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") */}}
+```
+
 ## Table
 
 Here's an example of a table. Its colours change depending on the current theme.
@@ -16,11 +42,6 @@ Here's an example of a table. Its colours change depending on the current theme.
 | Fe      | Iron    | 26            |
 | Au      | Gold    | 79            |
 
-## Invertable image
-
-This image inverts when switching to dark mode. This isn't very useful for photographs, but works great for diagrams, line drawings, graphs…
-
-{{ invertable_image(src="$BASE_URL/img/graph.webp", alt="Invertable graph") }}
 
 ## Code Block
 
@@ -29,13 +50,14 @@ fn main() {
     println!("Hello, world!") -> ();
 }
 ```
-## Quote
-
-> We're all hurtling towards death. Yet here we are, for the moment, alive. Each of us knowing we're going to die. Each of us secretly believing we won't.
->
-> — Charlie Kaufman, Synecdoche, New York
 
 ## Code tags
 
 Lorem ipsum `dolor` sit amet, `consectetur adipiscing` elit.
 `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`
+
+## Quote
+
+> We're all hurtling towards death. Yet here we are, for the moment, alive. Each of us knowing we're going to die. Each of us secretly believing we won't.
+>
+> — Charlie Kaufman, Synecdoche, New York

sass/main.scss

@@ -78,6 +78,10 @@
   .invertable-image {
     filter: invert(.88);
   }
+
+  .dimmable-image {
+    filter: brightness(.8) contrast(1.2);
+  }
 }
 
 html {

templates/shortcodes/dimmable_image.html

@@ -0,0 +1 @@
+<img class="dimmable-image" {% if src %}src={{ src | safe | replace(from="$BASE_URL", to=config.base_url) }} {% endif %} {% if alt %}alt="{{ alt }}"{% endif %}/>