From e83d6ec974c8187edacbb2cbf8b466032844d3fe Mon Sep 17 00:00:00 2001 From: Stefan Imhoff Date: Wed, 14 Jun 2023 18:59:32 +0200 Subject: [PATCH] fix(a11y): accessibility issues --- .gitignore | 5 +- astro.config.mjs | 2 +- netlify.toml | 2 +- src/components/JournalList.astro | 4 +- src/components/RSSLink.astro | 6 +- src/components/Tag.tsx | 2 +- src/content/journal/2007/gtd.mdx | 2 +- src/content/journal/2007/japanese-colors.mdx | 4 +- src/content/journal/2007/koi-design.mdx | 7 ++- src/content/journal/2010/rework.mdx | 7 ++- src/content/journal/2011/decodeunicode.mdx | 2 +- .../journal/2014/john-seymour-books.mdx | 19 +++++- .../journal/2014/website-typography.mdx | 2 +- src/content/journal/2017/minimalism.mdx | 6 +- src/content/journal/2018/morning-routine.mdx | 5 +- .../how-to-prepare-for-the-worst-case.mdx | 60 ++++++++++++++----- src/content/journal/2021/learning-poems.mdx | 2 +- .../processing-information-into-notes.mdx | 5 +- src/content/journal/2023/shokunin.mdx | 7 ++- src/pages/[...slug].astro | 1 + 20 files changed, 108 insertions(+), 42 deletions(-) diff --git a/.gitignore b/.gitignore index 791318a..ca44c02 100644 --- a/.gitignore +++ b/.gitignore @@ -7,7 +7,7 @@ dist/ # dependencies node_modules/ -# Vale +# Vale .vale/write-good/ # logs @@ -22,3 +22,6 @@ pnpm-debug.log* # macOS-specific files .DS_Store + +# Unlighthouse reports +.unlighthouse diff --git a/astro.config.mjs b/astro.config.mjs index 3453fb0..6f8654b 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -62,7 +62,7 @@ export default defineConfig({ workbox: { globDirectory: 'dist/', globPatterns: ['**/*.woff2'], - swDest: 'dist/sw.js', + swDest: 'dist/service-worker.js', sourcemap: false, cleanupOutdatedCaches: true, clientsClaim: true, diff --git a/netlify.toml b/netlify.toml index c1f0df8..5b4dfec 100644 --- a/netlify.toml +++ b/netlify.toml @@ -19,7 +19,7 @@ Permissions-Policy = "interest-cohort=()" [[headers]] - for = "/sw.js" + for = "/service-worker.js" [headers.values] cache-control = "max-age=0,no-cache,no-store,must-revalidate" diff --git a/src/components/JournalList.astro b/src/components/JournalList.astro index 64fd19a..86f2b8b 100644 --- a/src/components/JournalList.astro +++ b/src/components/JournalList.astro @@ -51,7 +51,9 @@ const { entries } = Astro.props; )}
- {data.title} + + {data.title} +
diff --git a/src/components/RSSLink.astro b/src/components/RSSLink.astro index b99c7e4..cfc2787 100644 --- a/src/components/RSSLink.astro +++ b/src/components/RSSLink.astro @@ -4,8 +4,8 @@ import { Sprite } from 'astro-icon'; import { Link, Subsubheadline } from '.'; --- -
- Stay up to date. +
+ diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx index 05f585e..632ed1c 100644 --- a/src/components/Tag.tsx +++ b/src/components/Tag.tsx @@ -21,7 +21,7 @@ export const Tag: FunctionalComponent = ({ const classes = cx( 'capitalize border-3 relative inline-flex items-center justify-center rounded-25 border-2 border-shibui-350 bg-shibui-200 px-3 py-1 text-1 font-normal leading-none text-black mie-1 pbs-3 dark:border-shibui-750 dark:bg-shibui-950 dark:text-white min-w-[50px] print:hidden', { - '!bg-shibui-500 !text-white hover:!bg-shibui-700 focus:!bg-shibui-700 dark:!border-shibui-500 dark:!bg-shibui-700 hover:dark:!bg-shibui-400 focus:dark:!bg-shibui-400': + '!bg-shibui-550 !text-white hover:!bg-shibui-650 focus:!bg-shibui-650 dark:!border-shibui-500 dark:!bg-shibui-700 dark:hover:!bg-shibui-600 dark:focus:!bg-shibui-600': href, 'active [&.active]:!border-black/25 !text-white [&.active]:!bg-accent': active, }, diff --git a/src/content/journal/2007/gtd.mdx b/src/content/journal/2007/gtd.mdx index 13e5646..a45888b 100644 --- a/src/content/journal/2007/gtd.mdx +++ b/src/content/journal/2007/gtd.mdx @@ -14,7 +14,7 @@ For one and a half years I use now the principles of _GTD_ (Getting Things D In his book __, David Allen introduces an interesting system that allows you to do your tasks efficiently. - + In any case, I think that one _gets_ the everyday madness governed by Allen’s system. diff --git a/src/content/journal/2007/japanese-colors.mdx b/src/content/journal/2007/japanese-colors.mdx index 7090a32..767ccef 100644 --- a/src/content/journal/2007/japanese-colors.mdx +++ b/src/content/journal/2007/japanese-colors.mdx @@ -12,8 +12,8 @@ During a visit to the art exhibition _Japan and the West_ in the [Art Museum Wol In the museum shop, I bought the book __ which is in Japanese. In addition to a full-color palette of 250 colors, it contains an exact indication of RGB, CMYK, and other information. - - + + Each page of the book shows three colors that are always juxtaposed with one or more stunning photos. The photos show the traditional use of colors in kimonos, samurai armor, monk clothing, or nature. diff --git a/src/content/journal/2007/koi-design.mdx b/src/content/journal/2007/koi-design.mdx index 96d7350..896605d 100644 --- a/src/content/journal/2007/koi-design.mdx +++ b/src/content/journal/2007/koi-design.mdx @@ -21,8 +21,11 @@ These works of art are painful (dozens of bamboo needles are [stung several time One of the best living artists of the Irezumi is Horiyoshi III, whose works can be seen in many illustrated books: and . - - + + Irezumi does not at random tattoo things on the body, the images have a profound meaning to the wearer and require expertise in religion, history, and myths from China and Japan. That is the reason bad copies and pseudo-Japanese tattoos are offered in Western tattoo studios. These tattooists lack this background knowledge. diff --git a/src/content/journal/2010/rework.mdx b/src/content/journal/2010/rework.mdx index cca9b66..4cb8c05 100644 --- a/src/content/journal/2010/rework.mdx +++ b/src/content/journal/2010/rework.mdx @@ -15,8 +15,11 @@ Today, I recommend a book that I finished recently and read a second time: _Rewo I have long been a great believer in the philosophy of simplicity which is cultivated by 37signals successfully. Their first (free) book [Getting Real](https://basecamp.com/books/getting-real) (as ) I read with great interest. - - + + But with _Rework_ they have achieved a true masterpiece. Not without reason, it is a bestseller in the US and the UK. Critics and CEOs praise the book in the highest terms (Seth Godin, John Maeda, Chris Anderson, and others). diff --git a/src/content/journal/2011/decodeunicode.mdx b/src/content/journal/2011/decodeunicode.mdx index 6e9f807..919914a 100644 --- a/src/content/journal/2011/decodeunicode.mdx +++ b/src/content/journal/2011/decodeunicode.mdx @@ -33,5 +33,5 @@ On the [official website](http://www.decodeunicode.org/) you can find a digital - **Price**: €68.00 - + diff --git a/src/content/journal/2014/john-seymour-books.mdx b/src/content/journal/2014/john-seymour-books.mdx index 9c20b7e..3274d2b 100644 --- a/src/content/journal/2014/john-seymour-books.mdx +++ b/src/content/journal/2014/john-seymour-books.mdx @@ -14,9 +14,24 @@ My earliest memories of books are that I lie on my parents’ soft carpet on my Born in England in 1914, he went to boarding school in Switzerland and later began studying agricultural sciences. He went to Africa at the age of 20 to work as a farmer. After serving in World War II in North Africa and Asia, he returned to England and moved to an old remote farm with his family in 1957 and started living solely on home-grown produce. After moving to a farm in Wales in the 1970s, he wrote his world-famous books The Complete Book of Self-Sufficiency () and The Self-Sufficient Gardener (). +### English + - - + + + + +### German + + + + ## The Books diff --git a/src/content/journal/2014/website-typography.mdx b/src/content/journal/2014/website-typography.mdx index 0f222a8..fa3edda 100644 --- a/src/content/journal/2014/website-typography.mdx +++ b/src/content/journal/2014/website-typography.mdx @@ -18,7 +18,7 @@ The right choice of font, font size, weight, layout, sentence width, lead, lette I’ve always found typography fascinating, but after reading the book by _Robert Bringhurst_ I studied the matter more deeply. There is a Web-adapted version of his book on the website [The Elements _of_ Typographic Style Applied _to the_ Web](http://webtypography.net/). - + ## Typography diff --git a/src/content/journal/2017/minimalism.mdx b/src/content/journal/2017/minimalism.mdx index c8b8680..38e5f7e 100644 --- a/src/content/journal/2017/minimalism.mdx +++ b/src/content/journal/2017/minimalism.mdx @@ -45,7 +45,7 @@ Minimalism is sometimes defined as _Simple Living_. Simplicity will inevitably b As Kenya Hara writes in , the origin of Simplicity can be found in the European _modernism_ as a result of the society getting free of sole rulers (who were defined by objects of decoration and excess of material objects). Rationality was the basis of this concept, resulting in _Bauhaus_ in 1909 and the founding of _Domus_ in 1928. - + The Japanese Simplicity is described as _Emptiness_ by Kenya Hara and has a complex background: Japan was positioned at the end of many routes of cultural influence. From Rome along the Silk Road to Central Asia, China, Korea, and south from Turkey over India, South Asia, and north along with Russia. But after a civil war from 1467-1477 (_ōnin no ran_), which destroyed countless objects of art (temples, statues, paintings, and kimonos), may be out of necessity, a new form of simple and quiet design emerged. @@ -63,7 +63,7 @@ That’s why I think extreme forms of Minimalism can result in less freedom. If I was always a Minimalist, even when the term didn’t exist. My first contact with the idea was in high school, where we had to read by Erich Fromm. - + The next thing which influenced me was the book and movie [Fight Club](http://www.imdb.com/title/tt0137523/). It’s filled with quotes against consumerism, capitalism, and property. It has countless Anarchist ideas, which is the main reason it was rated PG18. @@ -77,7 +77,7 @@ The next thing which influenced me was the book and movie [Fight Club](http://ww The next step was reading David Allen's book , which is a productivity system, but at the beginning of the process is the inventory of your things. - + This way I got rid of many things for the first time. diff --git a/src/content/journal/2018/morning-routine.mdx b/src/content/journal/2018/morning-routine.mdx index 8c3ab4b..5a334c2 100644 --- a/src/content/journal/2018/morning-routine.mdx +++ b/src/content/journal/2018/morning-routine.mdx @@ -56,7 +56,10 @@ I have a [Traveler’s Notebook Passport Size](https://www.travelers-company.com I start by reading the daily chapter of the fantastic book . The Stoic practice is the best start to a day you can have. Thereafter, I read 1-2 books, not novels, but harder topics (philosophy, science, or psychology). If I want to remember a quote or part of a book, I mark it and extract it later into my Commonplace book or write it down in my pocket-size notebook. - + ### Get Up diff --git a/src/content/journal/2021/how-to-prepare-for-the-worst-case.mdx b/src/content/journal/2021/how-to-prepare-for-the-worst-case.mdx index 87efef6..f375752 100644 --- a/src/content/journal/2021/how-to-prepare-for-the-worst-case.mdx +++ b/src/content/journal/2021/how-to-prepare-for-the-worst-case.mdx @@ -199,17 +199,23 @@ My favorite books on the topic of self-sufficiency are the books of John Seymour ### English - - - + + + ### German - - - + + + Another fantastic book is [The Book](https://www.indiegogo.com/projects/the-book--28/x/26186498/), a project I supported on Indiegogo. It’s a 400-page illustrated guide on how to rebuild civilization. @@ -221,20 +227,44 @@ The Bushcraft series is a series of useful books about survival: - - - - - + + + + + ### German - - - - + + + + ## Conclusion diff --git a/src/content/journal/2021/learning-poems.mdx b/src/content/journal/2021/learning-poems.mdx index d4c0468..c4669d7 100644 --- a/src/content/journal/2021/learning-poems.mdx +++ b/src/content/journal/2021/learning-poems.mdx @@ -14,7 +14,7 @@ The poem is an echo from 100 years ago. Full of wisdom and a mirror held up to o And then I started learning the poem. First for fun, and I wasn’t sure I would be able to remember it because it’s long (10 stanzas with four lines). I was surprised and impressed when I was able to remember it after two weeks in its entirety. - + I used a simple spaced-repetition method to remember it. There are countless apps like [Anki](https://apps.ankiweb.net/) that use this method. I used an app called [NeuraCache](https://neuracache.com/) which can import the cards from Markdown. And recently, I found a [Flashcard-Based and Note-Based Spaced Repetition Plugin](https://github.com/st3v3nmw/obsidian-spaced-repetition) for [Obsidian](https://obsidian.md/), the note-taking app of my choice. diff --git a/src/content/journal/2021/processing-information-into-notes.mdx b/src/content/journal/2021/processing-information-into-notes.mdx index ecd20cf..9610d7b 100644 --- a/src/content/journal/2021/processing-information-into-notes.mdx +++ b/src/content/journal/2021/processing-information-into-notes.mdx @@ -102,7 +102,10 @@ One browser extension I use to write notes on exciting videos is [YiNote](https: The most important part of note-taking is connecting ideas. Sönke Ahrens, the author of , explains the science of why this method works. I recommend reading this fantastic book; it is useful for anybody who wants to write notes. - + There is an [interesting interview with him on YouTube](https://youtu.be/kXnR7qX3BDc) if you wish to avoid investing the time and money for the book. diff --git a/src/content/journal/2023/shokunin.mdx b/src/content/journal/2023/shokunin.mdx index 8bb8132..f3f3fce 100644 --- a/src/content/journal/2023/shokunin.mdx +++ b/src/content/journal/2023/shokunin.mdx @@ -150,8 +150,11 @@ Since I first saw Japanese tattoos in a Yakuza movie, I've been obsessed with th One of the most renowned tattoo artists is Horiyoshi III, Japans undisputed tattoo master. The tattoo motives are not random, but symbolize religious or mythic stories and have a long history. The art form was submitted over many generations of tattoo masters. - - + + ### The Reluctant Master diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro index 12de982..1276aca 100644 --- a/src/pages/[...slug].astro +++ b/src/pages/[...slug].astro @@ -96,6 +96,7 @@ const schema = JSON.stringify({ breakpoints={[500, 1000, 1500]} class="col-span-full aspect-video h-auto !mbe-0 print:hidden xl:col-start-1 xl:col-end-14 3xl:col-end-13 [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none" format={['avif']} + loading="eager" src={entry.data.cover} /> )