Added alert component, added image description post from fedi

9 files changed, 79 insertions, 7 deletions

diff --git a/assets/css/scopes/_alerts.scss b/assets/css/scopes/_alerts.scss
new file mode 100644
index 0000000..a5b0987
--- /dev/null
+++ b/assets/css/scopes/_alerts.scss
@@ -0,0 +1,14 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-namespace('alerts') {
+    @include iro.bem-scope(iro.props-namespace()) {
+        @include iro.bem-elem('alert') {
+            margin-top: fn.global-dim(--paragraph --margin-top);
+
+            > :first-child {
+                margin-top: 0;
+            }
+        }
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 3ae810d..3fce2f4 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -15,6 +15,7 @@
 @use 'iro-design/src/objects/badge' as iro-badge;
 @use 'iro-design/src/objects/heading' as iro-heading;
 @use 'iro-design/src/objects/icon' as iro-icon;
+@use 'iro-design/src/objects/alert' as iro-alert;
 @use 'iro-design/src/objects/lightbox' as iro-lightbox;
 
 @use 'components/footer';
@@ -31,6 +32,7 @@
 @use 'iro-design/src/scopes/lists' as iro-lists;
 @use 'iro-design/src/scopes/tables' as iro-tables;
 @use 'scopes/small';
+@use 'scopes/alerts';
 
 @use 'iro-design/src/utils';
 
diff --git a/content/notebook/fediverse/in-depth-image-descriptions.md b/content/notebook/fediverse/in-depth-image-descriptions.md
new file mode 100644
index 0000000..9fe7e48
--- /dev/null
+++ b/content/notebook/fediverse/in-depth-image-descriptions.md
@@ -0,0 +1,31 @@
+---
+schema_type: DigitalDocument
+title:       Detailed image descriptions aren't always helpful
+date:        2022-05-05
+
+references: 
+  - label: Original Post
+    url:   https://mk.vulpes.one/notes/8zwxp9lywc
+---
+
+::: alert
+I noticed that quite a few people write very extensive image descriptions.
+Mastodon in particular implies that this is the correct way since the character limit for them is [three times as high as the limit for the actual post content](https://github.com/mastodon/mastodon/pull/11819).
+However, there are common situations where these image descriptions are in fact not helpful.
+:::
+
+Imagine you're using an online shop.
+What you'll typically see is a list of products where each list item has a small preview image, a product name and some other metadata.\
+Now imagine that the shop displays a long textual description for each product instead.
+This is what the timeline appears like to screen reader users if long image descriptions are used.
+And unlike people seeing the text, they don't have the luxury of skimming to grasp vital information quickly -- they can only skip the rest of the description at any point, or wait for the screen reader to read all of it.
+
+Detailed descriptions are only helpful when the user has decided the content is interesting to them.
+Currently, most fedi frontends put them in the attachment's `alt` attribute, which is fine if the user is currently viewing a single post instead of the timeline.
+But on the timeline, it's much more important to have quick summaries instead.\
+In terms of the example above, it's the same when viewing a single product vs. the product list.
+You're only interested in the details if a product is interesting to you.
+
+Image description on fedi are a step up from having none at all, but they're still inadequate.
+Ideally, you could provide both a quick summary and an in-depth description, and the UI presents both in a way that's the most helpful.\
+Since this possibility doesn't exist, please consider keeping image descriptions short and putting the long description in the post body.
diff --git a/content/notebook/fediverse/index.md b/content/notebook/fediverse/index.md
new file mode 100644
index 0000000..c628a37
--- /dev/null
+++ b/content/notebook/fediverse/index.md
@@ -0,0 +1,8 @@
+---
+title:                Fediverse
+position:             2
+list_read_indicators: true
+feed:                 true
+---
+
+Longer texts I posted on the fediverse that I wanted to preserve.
diff --git a/content/notebook/scrap/design-test.md b/content/notebook/scrap/design-test.md
index 844bdd1..c7c05ca 100644
--- a/content/notebook/scrap/design-test.md
+++ b/content/notebook/scrap/design-test.md
@@ -1,7 +1,7 @@
 ---
 schema_type: DigitalDocument
 title:       Markdown Test Page
-last_update: 2022-06-16
+last_update: 2021-12-16
 ---
 
 - [Headings](#headings)
diff --git a/content/notebook/scrap/index.md b/content/notebook/scrap/index.md
index 4cc3c2e..26e3298 100644
--- a/content/notebook/scrap/index.md
+++ b/content/notebook/scrap/index.md
@@ -4,3 +4,5 @@ position:             100
 list_read_indicators: true
 feed:                 true
 ---
+
+Test pages and other stuff.
diff --git a/filters/macros.lua b/filters/macros.lua
index 36cc459..ca0b487 100644
--- a/filters/macros.lua
+++ b/filters/macros.lua
@@ -1,6 +1,8 @@
-function note(el)
+function alert(el)
     el.classes = pandoc.List()
-    el.classes:insert("c-note")
+    el.classes:insert("o-alert")
+    el.classes:insert("o-alert--primary")
+    el.classes:insert("s-alerts__alert")
     return el
 end
 
@@ -18,8 +20,8 @@ function figure(el)
 end
 
 function Div(el)
-    if el.classes:includes("note") then
-        el = note(el)
+    if el.classes:includes("alert") then
+        el = alert(el)
     elseif el.classes:includes("figure") then
         el = figure(el)
     end
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 5856a91..554ba45 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -10,8 +10,21 @@
             <span class="s-headings__primary">$title$</span>
         </h1>
 
-        <div class="s-body s-colored-links s-headings s-blockquotes s-code s-lists s-tables e-content" itemprop="articleBody">
+        <div class="s-body s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
 $body$
         </div>
+
+        $if(references)$
+            <footer class="s-body s-colored-links s-lists">
+                <hr />
+                
+                <h1>References</h1>
+                <ul>
+                    $for(references)$
+                        <li><a href="$it.url$">$it.label$</a></li>
+                    $endfor$
+                </ul>
+            </footer>
+        $endif$
     </article>
 </main>
diff --git a/yarn.lock b/yarn.lock
index 9d2a6e3..7b1fc52 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1280,7 +1280,7 @@ internal-slot@^1.0.3:
 
 "iro-design@git+https://git.vulpes.one/git/iro-design.git":
   version "1.0.0"
-  resolved "git+https://git.vulpes.one/git/iro-design.git#3d0e5fa8fb7d9755b23b93fa8b6a82cc87cbf69e"
+  resolved "git+https://git.vulpes.one/git/iro-design.git#6005187bd70dac199dd0e48d01b6bb1d1ca4f5f8"
   dependencies:
     "@oddbird/blend" "^0.2.3"
     include-media "^1.4.9"