Feature request: Allow for adding class in mkdocs.yml

[martinbira]

Hi!

I'd like to make a feature request about the ability to add a CSS-class to the ToC-entries of locked files. This would enable users to add things as SVG-icons, see example, or highlight locked files rathern than a forced prefix-text. The CSS-class could either be fixed, or as with the prefixed text, variable.

The following example is made with just CSS and addition of a class using the inspector. The icon used is bundled with Material for MkDocs.

The CSS:

--icon-lock: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17a2 2 0 002-2 2 2 0 00-2-2 2 2 0 00-2 2 2 2 0 002 2m6-9a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V10a2 2 0 012-2h1V6a5 5 0 015-5 5 5 0 015 5v2h1m-6-5a3 3 0 00-3 3v2h6V6a3 3 0 00-3-3z"/></svg>');
.locked svg {fill: var(--md-primary-fg-color);}
.locked::after{display: inline-block;padding-left: 0.4rem;padding-bottom: 0rem;width: 0.8rem;height: 0.8rem;background-color: var(--md-primary-fg-color);-webkit-mask-image: var(--icon-lock);mask-image: var(--icon-lock);content: "";}
.locked:hover::after{display: inline-block;padding-left: 0.4rem;padding-bottom: 0rem;width: 0.8rem;height: 0.8rem;background-color: var(--md-primary-fg-color);-webkit-mask-image: var(--icon-lock);mask-image: var(--icon-lock);content: "";}

The HTML-injection:

<li class="md-nav__item"> <a href="icon-test/" title="Icon test" class="md-nav__link locked"> Icon test </a> </li>

The result:

Configuration suggestion:

  - encryptcontent:
      class: 'locked'

[CoinK0in]

Hey,

Indeed it's a good idea, but in the current way the plugin works, I don't really inject any html apart from the template.

Since I don't want to have to parse HTML, I've found a workaround that seems to meet your expectations.

By adding additional HTLM tags around the text in the case of an encrypted article/page, it becomes possible to customize its style.

I added the following changes here: issue #7

Tell me if this is enough or if you have a cleaner method to improve the process.

Thanks.

[martinbira]

That is good enough for me indeed! Thanks!

[CoinK0in]

Thanks for your feedback.
Feel free to open new feature request to improve this plugin.

[martinbira]

Hey @CoinK0in, just noticed that the plugin now forces the prefix (and css class) on all items in the ToC, even if no password is set on any file. Should I open a new issue for this?

[CoinK0in]

It looks like a mistake, my bad sorry.
I made a fix here : b1c698a

There is still a problem with the method of adding HTML tags directly in the title.
Some theme uses this content for name display in browser tab ...
I'll have to parse the HTML to make things clean if I want to avoid issues like this.

[CoinK0in]

I changed the behavior of this feature.
By default the class is now added in all the parent HTLM elements of the title.

Modification are done in this commit : d2635a3

Tell me if it's still OK for you.

[CoinK0in]

Ok so after spending a lot of time trying to parse the HTML generated by the pages properly, I gave up. 😕
Adding a CSS class on the fly is very dependent of the format of the page and the theme used.

I found a much simpler method to answers this demand and many more i guess.
By adding a custom attribute on mkdocs.nav.page object, we can use this tags inside Jinja template to do something.
Take a look at : Feature: tag encrypted page

No more HTML parsing 🥰

[martinbira]

Ah! Well that's a pretty smart method, I'll give it a look later today. Thanks for all the effort put in to my quite personal requests 😄

[martinbira]

@CoinK0in Don't know if I'm missing something but when I try to upgrade using pip it says that 0.0.9 is the latest version.

[CoinK0in]

Sorry my bad, forget to push new version on PyPi.org.
It's done now: https://pypi.org/project/mkdocs-encryptcontent-plugin/0.0.10/#history

[martinbira]

Nice! Works as intended on my end!

[CoinK0in]

Great, thanks for your feedback.
Still thinking about your other request to encrypt Toc.

I close this one.