Make a treeview of bookmarks in Resources menu

[hermanp]

Requested feature

I want to show my bookmarks :bookmark: on a page in the Resources menu. This will force me to keep them tidy and also let others knew what I am interested in. I do not want all my bookmarks to show up, just part of them.

Context

This widget is called treeview, but similar effect can be achieved with the accordion. The look should be something similar to a directory treeview or somehow it should be foldable. It would be good to have a description or "story" of the bookmark, this should be like an HTML tooltip (title attribute) or another level of folding or just display it without any hassle. Would be nice to display the bookmark's favicon also.

Search history

:arrow_forward: Something like Windows Explorer's file tree? It's a tree graph, maybe "graph" should help :next_track_button: "windows explorer file tree graph" :arrow_down_small: Tree view of a directory/folder in Windows? - Stack Overflow :arrow_up_small: :twisted_rightwards_arrows:

• "bookmarks treeview css site:stackoverflow.com":
  • :arrow_down_small: Create a collapsible/expandable CSS 2 tree :next_track_button: Tree-nav based on details/summary :sparkle: :heavy_check_mark:
  • :arrow_down_small: Treeview structure without heavy plugins :next_track_button: Multilevel Accordion Menu with Plain HTML & CSS :heavy_check_mark:
• "drop down tree html css": How To Create a Tree View CSS + JavaScript :x:

:next_track_button: Google search: hugo collapsible markdown

• :arrow_down_small: Details tag for collapsible section not working in 0.64.0 #6865
• :arrow_down_small: How to make a collapsible code block? - Hugo forum :next_track_button: How to keep blog posts with large code blocks readable? - a visually pleasant solution
• Several example links for the HTML5 \<details> tag - as the comments say, there is a plain HTML5 solution, therefore I want to use it. :heavy_check_mark:
• Code folding with blogdown + Academic theme - a sophisticated solution, but I want to make this futureproof as much as possible. So I discarded this. :x:

Suggestion

Preferably without JavaScript, just plain CSS and HTML.

• [x] import from a (manually exported) bookmark file (JSON? HTML?), source for importing and working with JSON in R
• [x] subset the bookmarks

:x: treeview or accordion widget :x: description of each bookmark - this page has to be version controlled because of updates of bookmarks. If the markdown is edited after generated, then it won't be automatic, therefore this feature is discarded. Maybe they can be discussed in separate blog posts. :x: favicon

[hermanp]

For importing and generating content from JSON (search hugo json to md OR markdown):

• Automatically generate pages from JSON data file
• Generate page from json rather than md
• Populating Templates with JSON?

Seems rather complicated. :confused: :expressionless: Rather just generate at need the markdown file by R. So currently I see two possibility:

• make some Hugo-fu, using the tips from above and generate the markdown content from JSON and put in in the relevant content folder. Make this a facultative not automatic process. Uhh... Seems overkill right now. :x:
• import, clear, subset JSON and generate a single markdown document in R. Do not use the /data folder. Just copy the (out of this project) generated file into the relevant (Resource) content folder :heavy_check_mark:

[hermanp]

Oh, man! To make \<details> nested and treeview like, I would have to use Javascript and CSS? Maybe at the next iteration. Trying to just parse the JSON file to a nested unordered HTML markdown list.

[hermanp]

I feel miserable. After so much work the end product is not a big deal... However, better than nothing. The process is somehow documented in the following two Stack Overflow posts:

• Convert Firefox bookmarks JSON file to markdown
• Keep newline character in string during gsub

As for the favicons: I modified the code to make it able to download them, however it is not what I expected.

1. The favicons have a dedicated column in the respective bookmark folder's table. These URLs are sometimes contain the fake-favicon-uri: string and sometimes missing. Most of the times seems good.
2. Generally, the favicons can be accessed in the way as documented by the following Super User post: How to download favicon from website?. This means, if I don't have an URL in the iconuri field, then I can construct it from the host name. I have done this, but many times this leads to redirection (eg. HTTP status code 301) or not found (status code 404) and even when found, its content type are diverse. Data (from 404 favicons in my bookmarks):

Status code	Count
200	356
404	47
503	1

HTTP content type	Count
image/png	182
text/html	57
image/vnd.microsoft.icon	79
image/x-icon	72
text/plain	1
image/svg+xml	6
image/jpeg	4
image/icon	1
application/xhtml+xml	1
image/gif	1

There were only 10 errors during downloading favicons.

3. This means, I have to present a "missing favicon" icon for bookmarks not having favicon. This is getting even more complicated, and I decided to stop here and get away with links in a nested list.
4. Now, the bonus is to make a table of contents about them because it isn't clear on the site. Its possible, even if it is ugly! Yay! Just make each levels of folders into a corresponding header also! Like - # Info and - ## Python

[hermanp]

Next thing to do is: make it transparent or get rid of the list item markers before those list items, which are headings. This seems like a CSS question. Hints:

• Hugo Table of Contents have extra dot in front
• Markdown lists missing numbers/bullets in Hugo
• Google: hugo remove list item marker css
• Google: hugo css for a specific page
  • Using an additional specific css style for a page
  • How to override CSS classes with Hugo
  • Add custom css and js to hugo page
• Google: remove marker nested list certain level item css
  • Remove bullet points in UL in CSS
• Google: style certain level nested list item css
  • Style only the first level of a nested list
  • Styling nested lists with any depth

[hermanp]

OK. Seems this tale ends here. What I wanted above is what should be called parent selector, which is not implemented yet. (But in draft phase, see: :has() - Mozilla Developer Network). Tried to twist the logic for selecting, but can not be done. Relevant questions:

• Is there a CSS parent selector?
• CSS selector for “foo that contains bar”? [duplicate]
• CSS select an element with no certain child element

Decided to remove the list item markers altogether.

[hermanp]

The list item markers removed from all of the Resources pages, but not from the Post pages. Because there is bigger need for them than the excess of them. Visual evidence:

I needed to revert the CSS modification 8d39fc450b98123f3a823524ed79b79ed844cde2.