summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--assets/css/scopes/_alerts.scss14
-rw-r--r--assets/css/style.scss2
-rw-r--r--content/notebook/fediverse/in-depth-image-descriptions.md31
-rw-r--r--content/notebook/fediverse/index.md8
-rw-r--r--content/notebook/scrap/design-test.md2
-rw-r--r--content/notebook/scrap/index.md2
-rw-r--r--filters/macros.lua10
-rw-r--r--templates/layouts/page.html15
-rw-r--r--yarn.lock2
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 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('alerts') {
5 @include iro.bem-scope(iro.props-namespace()) {
6 @include iro.bem-elem('alert') {
7 margin-top: fn.global-dim(--paragraph --margin-top);
8
9 > :first-child {
10 margin-top: 0;
11 }
12 }
13 }
14}
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 @@
15@use 'iro-design/src/objects/badge' as iro-badge; 15@use 'iro-design/src/objects/badge' as iro-badge;
16@use 'iro-design/src/objects/heading' as iro-heading; 16@use 'iro-design/src/objects/heading' as iro-heading;
17@use 'iro-design/src/objects/icon' as iro-icon; 17@use 'iro-design/src/objects/icon' as iro-icon;
18@use 'iro-design/src/objects/alert' as iro-alert;
18@use 'iro-design/src/objects/lightbox' as iro-lightbox; 19@use 'iro-design/src/objects/lightbox' as iro-lightbox;
19 20
20@use 'components/footer'; 21@use 'components/footer';
@@ -31,6 +32,7 @@
31@use 'iro-design/src/scopes/lists' as iro-lists; 32@use 'iro-design/src/scopes/lists' as iro-lists;
32@use 'iro-design/src/scopes/tables' as iro-tables; 33@use 'iro-design/src/scopes/tables' as iro-tables;
33@use 'scopes/small'; 34@use 'scopes/small';
35@use 'scopes/alerts';
34 36
35@use 'iro-design/src/utils'; 37@use 'iro-design/src/utils';
36 38
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 @@
1---
2schema_type: DigitalDocument
3title: Detailed image descriptions aren't always helpful
4date: 2022-05-05
5
6references:
7 - label: Original Post
8 url: https://mk.vulpes.one/notes/8zwxp9lywc
9---
10
11::: alert
12I noticed that quite a few people write very extensive image descriptions.
13Mastodon 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).
14However, there are common situations where these image descriptions are in fact not helpful.
15:::
16
17Imagine you're using an online shop.
18What 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.\
19Now imagine that the shop displays a long textual description for each product instead.
20This is what the timeline appears like to screen reader users if long image descriptions are used.
21And 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.
22
23Detailed descriptions are only helpful when the user has decided the content is interesting to them.
24Currently, 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.
25But on the timeline, it's much more important to have quick summaries instead.\
26In terms of the example above, it's the same when viewing a single product vs. the product list.
27You're only interested in the details if a product is interesting to you.
28
29Image description on fedi are a step up from having none at all, but they're still inadequate.
30Ideally, 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.\
31Since 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 @@
1---
2title: Fediverse
3position: 2
4list_read_indicators: true
5feed: true
6---
7
8Longer 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 @@
1--- 1---
2schema_type: DigitalDocument 2schema_type: DigitalDocument
3title: Markdown Test Page 3title: Markdown Test Page
4last_update: 2022-06-16 4last_update: 2021-12-16
5--- 5---
6 6
7- [Headings](#headings) 7- [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
4list_read_indicators: true 4list_read_indicators: true
5feed: true 5feed: true
6--- 6---
7
8Test 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 @@
1function note(el) 1function alert(el)
2 el.classes = pandoc.List() 2 el.classes = pandoc.List()
3 el.classes:insert("c-note") 3 el.classes:insert("o-alert")
4 el.classes:insert("o-alert--primary")
5 el.classes:insert("s-alerts__alert")
4 return el 6 return el
5end 7end
6 8
@@ -18,8 +20,8 @@ function figure(el)
18end 20end
19 21
20function Div(el) 22function Div(el)
21 if el.classes:includes("note") then 23 if el.classes:includes("alert") then
22 el = note(el) 24 el = alert(el)
23 elseif el.classes:includes("figure") then 25 elseif el.classes:includes("figure") then
24 el = figure(el) 26 el = figure(el)
25 end 27 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 @@
10 <span class="s-headings__primary">$title$</span> 10 <span class="s-headings__primary">$title$</span>
11 </h1> 11 </h1>
12 12
13 <div class="s-body s-colored-links s-headings s-blockquotes s-code s-lists s-tables e-content" itemprop="articleBody"> 13 <div class="s-body s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
14$body$ 14$body$
15 </div> 15 </div>
16
17 $if(references)$
18 <footer class="s-body s-colored-links s-lists">
19 <hr />
20
21 <h1>References</h1>
22 <ul>
23 $for(references)$
24 <li><a href="$it.url$">$it.label$</a></li>
25 $endfor$
26 </ul>
27 </footer>
28 $endif$
16 </article> 29 </article>
17</main> 30</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:
1280 1280
1281"iro-design@git+https://git.vulpes.one/git/iro-design.git": 1281"iro-design@git+https://git.vulpes.one/git/iro-design.git":
1282 version "1.0.0" 1282 version "1.0.0"
1283 resolved "git+https://git.vulpes.one/git/iro-design.git#3d0e5fa8fb7d9755b23b93fa8b6a82cc87cbf69e" 1283 resolved "git+https://git.vulpes.one/git/iro-design.git#6005187bd70dac199dd0e48d01b6bb1d1ca4f5f8"
1284 dependencies: 1284 dependencies:
1285 "@oddbird/blend" "^0.2.3" 1285 "@oddbird/blend" "^0.2.3"
1286 include-media "^1.4.9" 1286 include-media "^1.4.9"