search

bjuppa / laravel-blog

Flexible blog functionality for your Laravel project
MIT License
48 stars 8 forks source link

Hide "latest entries" section header from safari's reader mode #46

Closed bjuppa closed 4 years ago

bjuppa commented 4 years ago

The "latest entries" section is currently an <aside>, but perhaps it should be a <nav>?

Currently Safari's reader mode displays the <header> within that section, but not the rest of the contents. Making it a nav will probably hide it all.

bjuppa commented 4 years ago

Unfortunately making it a <nav> doesn't change anything.

bjuppa commented 4 years ago

I find it really interesting that the social-sharing aside's header (and its other contents) are completely hidden from reader mode, while the latest-entries aside's header is shown, but not the rest of the contents. Their basic html structure is the same, an aside with a header and then an unordered list... 🤷‍♀

Update: Haha, I added class-name blog-social-sharing to the latest entries section, and voila, it's gone from reader mode! Does Safari use wording in classnames to decide what should be hidden? 🙀

bjuppa commented 4 years ago

Yeah... following above experiment ☝️ I tried adding classname socia to the aside, and then it shows in reader mode. But when I add that last l completing the word social it is hidden...

Does anyone have a list of words in classnames that hides content from Safari Reader Mode, that'd be really useful? 😀

Update: I immediately tried the classname links and link and they both also hides the content from reader mode (not just lin though)!

bjuppa commented 4 years ago

I've also tried the instapaper_hide classname (suggested by https://www.ctrl.blog/entry/browser-reading-mode-content.html) but that doesn't hide the element in our case 😞