Markdown-details customization

Dear all,

I tried to google and to search here, but without any success...

I'm preparing the website of a scientific experiment (an Astroparticle detector on the Chinese Space Station).
The idea is that the website will be for "general public" but that will host also, eventually under password or token authorization, some "private" docs for the international collaboration. One (the first I'm implementing) is the Wiki of the experiment software that is hosted on Gitlab.

The current version (for now without any auth) can be seen on:

http://herd.pg.infn.it/vdev

Since the standard aspect of a Gitlab documentation is

with the sidebar being very useful, I'm trying to replicate it also here.

I succeeded to make the sidebar, and make it work thanks to the

https://github.com/bitstarr/grav-plugin-markdown-details

plugin.

Unfortunately the README is not enough to understand how to customize it.

In particular:

• I don't know how to customize the config yaml?
  YAMLCopy

  enabled: true
  built_in_css: true
  a11y: false
  base_class: details
  title_class: details__title
  trigger_class: details__trigger
  content_class: details__content
  

  (in particular the last four fields...)

• how to avoid that "+/-" symbol:
  
  and going back to the "standard" arrow?
• how to remove that line and that extra space between every "item"?
• how to avoid that every time an item is clicked and the page (on the left) is changed, the sidebar is "collapsed"?

Thanks,
Matteo

I'd say that's a very restrictive plugin and not extendable at all. All you can do, is add custom CSS to remove that line and extra space. +- icons are hardcoded as SVGs and not even on a template, which you could extend and overwrite that icon, but rather everything is in main plugin class. Maybe you can add some custom JS too to store the state if item is collapsed or not and then on page load, depending on, that state, expand item yourself.

From extendability perspective, I'd say it's a very poorly written plugin

I'd better extend the template itself and add a custom sidebar. Plenty of tutorials on the web how to make an accordion.

Please don't call it poorly written. It's basic because it serves a narrow purpose. bozzochet contacted me via discord and i suggested something similiar.

Since i'm mostly on the frontend side, i could not cover all the comfort things plugins can have, because i'm not so deep in php/symfony stuff.

Karmalakas, i would be happy if you wrote an issue or a pull request to make the plugin better.

I'm sorry, I didn't mean to offend anyone. But it really is not extendable at all, even if it has HTML parts. Simply moving HTML to templates would make them extendible and layout could be changed easily. I might check later for some example plugins how to do that, but I doubt I'll make a PR myself, sorry - have my hands full with my own stuff now :)

no problem. i'll write an issue to remind me to dig in the template overwriting soon :)

@bitstarr, The following is not intended as a flame, but purely to take into consideration:

-

It’s basic because it serves a narrow purpose.

If a plugin serves a narrow purpose, why publish it to the community?

• Since i’m mostly on the frontend side, i could not cover all the comfort things plugins can have, because i’m not so deep in php/symfony stuff.

  If you doubt your own php skills, why then publish a plugin to the entire community?

• What is the added value of the plugin over the existing plugin 'ShortCode Core' (written by the Grav team), which supports creating accordions?

The reason I'm asking these questions is that I would hate to see Gravs plugin repo going into the direction of Wordpress, which has many many plugins, but their quality is notorious...

Therefor, I recently started reviewing plugins which are submitted to Grav, and some requests have been closed because they were not quite ready for publishing...

@bozzochet, You might consider switching to plugin ShortCode Core, which is build by the Grav team and provides an accordion style similar to your preferred style.

For example:

// in markdown

[details summary="Overview" class="my-class"]
<ul>
  <li><a>Lorum</a></li>
  <li><a>Ipsum</a></li>
</ul>
[/details]

[details summary="Quickstart" class="my-class"]
<ul>
  <li><a>Lorum</a></li>
  <li><a>Ipsum</a></li>
</ul>
[/details]

Result:

Thanks.

Now I "solved" my problem by simply 'hacking' the markdown-details plugin php file.
(I'm sorry that now, at http://herd.pg.infn.it/vdev the original problem is no more visible...).

However I don't like this approach (and it doesn't solve the issue of the "status" of the collapsed/open items) so in the next days I'll try to look at the shortcode-core plugin.

To do my "mirror" of the Gitlab Wiki into grav I also had to create a plugin (private, on my repo only) to de-capitalize and in general "parse" some of the links in the Gitlab Wiki.
If I understood correctly I can use shortcode-core also to move my "plugin" in a more tailored version and avoid to have this plugin around to install by hand.

Thanks,
Matteo

I made this plugin for a project, where boxes were needed. I was considering the shortcodes plugin but i had concerns to implement it because of the overhead the plugin provided for our only use case. Also it was lacking (still is?) ways of fine tuning for accessibility (and markup).

But i totally share your concern about polluting the plugin eco system. on the other hand i made this plugin three months after i started exploring grav and was very happy to contribute to it.

And while this plugin is pretty tailor made to my needs, this discussion is very helpful though, because i can see what people are expecting.

I really want to improve the plugin, because it should not end up as one of those dead and shitty ones. So input and assistance is very welcome.

However I don’t like this approach (and it doesn’t solve the issue of the “status” of the collapsed/open items) so in the next days I’ll try to look at the shortcode-core plugin.

You really should implement a specific navigation component in your theme for this - because it's a navigation. atm your are abusing conten structuring elements (both plugins are for this purpose) to create the optics you want without achieving the functionality and usability you want to mimic.

@bitstarr:
You really should implement a specific navigation component in your theme for this - because it’s a navigation.

Totally agree with this. Two navigation menus should be used here in a template instead of adding same snippet in markdown on every page

Ciao,

or I'm completely confused OR you confused the point: the "navigation" is given by the "sidebar" (I inherited from "blog" template in Quark). I'm using the plugin just to simplify the writing of the links (markdown vs html plain) and having the collapsability. So essentially is "just" how the stuff is organized in that page (i.e. the sidebar).

The only "mixed" (navigation + look) stuff is the "status" of the collapsed items.

Matteo

Not sure I now understand :D

What are each sidebars for (left and right)? If the right (collapsible and added via markdown) sidebar links refresh the page, isn't it a navigation sidebar? If these links supposed only to scroll to the specific part of the page, then the links are not what they supposed to be. But I don't think this is the case, because clicking on.a link opens a completely different page. So it's a normal fully functioning navigation, which should be in a template and not added via markdown.

Ciao,

look here

http://herd.pg.infn.it/vdev

only one sidebar, on the right.

This is used to 'navigate' the "main" content (left part of the page), yes, of course. But I do not want to do this with the plugin under discussion.

This was already done using the Quark theme itself, as in the "Blog" skeleton:

https://demo.getgrav.org/blog-skeleton/

(of course I also added, asking in another topic, the possibility to have the right sidebar "stick" when scrolling the left content).

The problem (where to use this plugin) is only how to show the sidebar content: if I put the same markdown code I was using on GItlab (i.e. <details><summary> etc...) it doesn't work. But is not a sidebar problem, eh. It doesn't work either in the main left content. I think (but I'm not sure) that is a sort of "Markdown Extra" (that if I understood is the one in Github) specific of Gitlab (for example there you can create a Table of Content with [[TOC]]... And indeed the other plugin I used, and realized, has a twig filter to remove this and substitute with the needed part, for the use of https://github.com/trilbymedia/grav-plugin-page-toc).

So definitely is not a navigation problem even if I used inside a piece of my website doing navigation!

The only thing, as I said above, that could be related to navigation is the possibility to "save" the state of the collapsed/de-collapsed items when changing the page (i.e. the left page! The sidebar has always the same content).

Ok?

Matteo

<details> has an attribute open that presents the element opened on load.
see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
but cannot say how you can utilize this in your current setup