dreadwarrior/dreadwarrior.github.io

Personal landing page and book tracker.

dreadwarrior.github.io's Issues

Add new book with ISBN 9783499255564 to wishlist

Add book 9783455008586 to wishlist

Add completed book 9783426226766

Add book 9783551585141 to wishlist

Make booklist clearly visible

When entering a single book page from an RSS feed reader, it is not obvious to the user in which booklist the book is assigned to.

While completed books use a ribbon in their corner, nothing similar exists for wishlist books.

Evaluate "bundled" JS generation with Hugo

In file layouts/_default/baseof.html, two dedicated <script> sections were added.

• Evaluate, if it's possible to bundle multiple JS files.
• If possible, do it! ;)

Add OpenGraph meta data tags for book details

Swapped content from infinite scroll in wrong target

• nested in pagination's nav
• should be after existing cover-list

Fix right side border radius in filter input

Fix topic detail page on missing books from wishlist

Add new book with ISBN 9783257247138 to wishlist

Introduce paging on bookshelf term pages

The more books are added, the more lengthy a bookshelf term page becomes.

Paging should solve that issue.

• Introduce paging by using a paginator and render 12 items per page.
• A solution must be found to keep the topic filter working.
  • This may be accomplished, by generating a JSON file and using (custom) JavaScript for rendering bookshelf items on-demand.

Add books to wishlist

9783596125333

9783492315944

9783492305655

Replace favicons

A nice anchor would be cool. ⚓

Introduce possibility to import book title data for english books

Currently, only german ISBN-13 numbers are working when using the hugo new commands for creating book content.

• It should be possible to also load english language books.

Notes

Maybe openlibrary.org or inventaire.io APIs can be used.

Improve documentation about current available book title retrieval

Documentation in README.md describes how to add a new book and / or review.

What's left untold, is that currently, the book title data retrieval is performed against a german bibliographic catalog.

• It should be noted, that only german ISBN-13 lookups are available.

Introduce "Share this" capability to book detail page

When the website is shared to the Home Screen, eg on iOS, there's no way to share a specific page.

This could be solved eventually by using Web Share API with fallback.

See this blog post for more information: https://css-tricks.com/how-to-use-the-web-share-api/

Consistently use german quotes in review area

Should be lower "99", instead of upper "66" (which marks end of quoted text).

Document make targets for english books

Use semantic markup in book detail page

This also entails reworking the link--force-word-break class.

Improve UX for topic navigation

A user may be confused, when following a topic link of a book detail page.

There are some ideas to mitigate this already:

• Provide a anchor link to the respective section on the topic page (e.g. add #wishlist to the topic link).
• Use tabbed navigation UI on the topic page (would perhaps require an anchored navigation, too).

Ensure Hugo's getresource cache maxAge doesn't change

Due to not have to store remote data within the VCS, this project is using remote resources.

To ensure, that remote systems are not queried too often,
this decision relies on Hugo's default cache eviction setting of "forever"¹
for the getresource cache.

It can be introspected by issuing the following command:

hugo config --format json | jq .caches.getresource.maxage

In order to ensure, this setting is not changed accidentally or intentionally,
it should be added to the CI pipeline as a assumption build step.

Slightly darker select box background in light theme

The select box background should be slightly darker when the light theme is in use.

In dark mode it is slightly lighter, and this pattern, but in "reverse" should be applied to the light mode.

Use DNB SRU API for title data retrieval by ISBN

Obsoletes manual Datenshop export.

Remove i18n directory + folder

Remove all i18n artifacts.

Add book 9783328601838 to wishlist

Introduce responsive images

For more information, please also see section "Decision: Response image generation" at DreadLabs/dreadlabs.github.io.

Optional: See also this article to find out how to use that for images from content.

Notes:

Important: ensure, that images from remote source are only read once to not overload external services.

Prevent "sticky hover" for cover lists

On mobile devices, the hover effect on covers in lists,
revealing the book title and author suffers from "sticky hover" errors.

This is a known issue and can be solved by using a certain CSS 4 media query.

See the following post for more information: https://www.mediaevent.de/css/hover-touch.html

Add completed book 9781250819345

Add "scroll to top" functionality on infinite scroll pages

Possible approach(es):

• https://codepen.io/rolandtoth/pen/eMamVK

Add book 9780571330638 to wishlist

Prevent long links from breaking layout on book detail page

Perhaps, this can be solved by using the technique described in this article:

https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Poor contrast with light theme

Checking the contrast of the light theme, resulted in "poor" classification.

Cf. https://coolors.co/contrast-checker/738290-fffcf7

Solution suggestion:

• Use background color of dark theme as text color of light theme.
• Use background color of light theme as text color of dark theme.
• Use hover color of light theme as hover color of dark theme, too.

Expected result: contrast checker reports "super" classification: https://coolors.co/contrast-checker/1c2541-fffcf7

Add book 9783442493296 to wishlist

Switch default language to german

Notes:

• Introduce config/languages.toml.
  • Disable english language, enable german language.
• Update languageCode in config/config.toml.
• Add defaultContentLanguage to config/config.toml.
• Update title in config/config.toml.
• Introduce content/_index.md and introduce greeting param in front matter, will be eval'd in theme's index template.
• Translate & rephrase introduction.html.

Remove `layouts/partials/dnb/oai_dc/title.html`

It's no longer needed.

Add book 9783442735648 to wishlist

Fix code block in ISBN formatting section

Introduce partial for awesomplete control element

Improve visual representation of the topic list

This could be more visually appealing by using mood images for each topic (perhaps midjourney generated?)

A nice example, token from https://freefrontend.com/css-lists/ is: https://codepen.io/michellebarker/pen/MWQdLoG

Remove script/migrate-books-wishlist.sh

This migration script is no longer needed.

Normalize SMACSS and BEM CSS rules

This is currently chaotic because Pure.css uses SMACSS,
while custom CSS rules should adhere to BEMS rules.

Use:

• SMACSS when dealing with Pure.css elements, e.g. xyz-u / abc-g for grid and grid unit elements.
• BEM when dealing with custom elements.

Update `make` targets in README

They were not updated when changed in Makefile.

Remove section "Update theme" from `README.md`

Because, no theme is actually used.

Topics starting with umlauts missing on list page

Example: "Übersinnliches"

Improve light / dark theme usage for tooltips

According to section "Dark Mode Shadows" of A Complete Guide to Dark Mode on the Web :

• Close elements should still be lighter and
• distant elements should still be darker – even in a dark UI.

(see Tw*tter embed).

This is not properly achieved now and must be fixed.

---

The challenge becomes visible, when using Dark Mode and using the tooltip control elements.

See also section "Technique #5: Applying a large box shadow to a modal" at https://tympanus.net/codrops/2013/11/07/css-overlay-techniques/.

Sort books by date descending on "wishlist" page

The alphabetical sorting is confusing, when entering the page from the books overview page.

The alphabetical sorting doesn't matter (perhaps).

Persist selected theme

See https://alexandersandberg.com/articles/creating-a-website-theme-switcher-with-css-only/

Fix subtitle blank line when generating content from `archetypes/books.md`

Introduce light / dark theme switch function

Based on https://alexandersandberg.com/articles/creating-a-website-theme-switcher-with-css-only/

Notes:

• Introduce colors.light and colors.dark to Hugo configuration.
• Copy scss assets from hallo theme to assets/scss/hallo.
• Replace existing color variables by var() functions.
• Move CSS properties color and background-color of body to #page selector.
• Remove margin from body, html selector.
  • Move to padding of #page selector.
• Apply a min-height to #page selector for short content.
• Remove margin-left "corrections" of h1 and h2 in .column .right selector.
• Introduce select element styling based on https://codepen.io/raubaca/pen/bGWmZje.