From 8c0706051eb7529429a7782de54af793ad6f0946 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 16 Jun 2022 22:51:12 +0200 Subject: Added alert component, added image description post from fedi --- assets/css/scopes/_alerts.scss | 14 ++++++++++ assets/css/style.scss | 2 ++ .../fediverse/in-depth-image-descriptions.md | 31 ++++++++++++++++++++++ content/notebook/fediverse/index.md | 8 ++++++ content/notebook/scrap/design-test.md | 2 +- content/notebook/scrap/index.md | 2 ++ filters/macros.lua | 10 ++++--- templates/layouts/page.html | 15 ++++++++++- yarn.lock | 2 +- 9 files changed, 79 insertions(+), 7 deletions(-) create mode 100644 assets/css/scopes/_alerts.scss create mode 100644 content/notebook/fediverse/in-depth-image-descriptions.md create mode 100644 content/notebook/fediverse/index.md 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 @@ $title$ -
+
$body$
+ + $if(references)$ + + $endif$ 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" -- cgit v1.2.3-54-g00ecf