search

iridescent-dev / pico-toc-plugin

Generate a table of contents for the pages of your Pico site.
https://picocms.org/
MIT License
6 stars 4 forks source link

ToC doesn't display: wrong css location? #6

Closed jlgarnier closed 2 years ago

jlgarnier commented 3 years ago

Hi all! I've installed the plugin but may have used a wrong location, as I don't really get what you call the "project". Here's my structure:

When I add in my index.md file, it just doesn't display, so I suppose I've put some files in a wrong location.

Thanks in advance for any help!

iridescent-dev commented 3 years ago

Hi!

The "project" is your Pico CSM folder, cms_pico in your case.

The .md file in which you added the <toc /> element depends on a twig template, if nothing is specified it is index.twig, but if you have, for example, Template: page, you also need to update cms_pico/themes/mytheme/page.twig.

If you are using Chrome, you can use DevTools (right click on page -> inspect) to check that the <toc /> element and the style.css file are present. (The equivalent must exist with other web browsers I guess) image

However, I don't think this is an issue with the style.css file, if it is not imported, the table of contents is still displayed as an html list.

By default, you need at least 2 headers in the content of your .md file for the table of contents to be displayed, you can change this with the toc_min_headers option (cf. https://github.com/iridescent-dev/pico-toc-plugin#configuration-settings).

What is the contents of your index.md file?

jlgarnier commented 3 years ago

Thanks for the quick feedback! Here's the content of my index.md file (it's a test file):

# The Admin News

<toc min-level="2" max-level="2" heading="Table of Contents" />

## What's new with Nextcloud?

This (micro)website is your resources one-stop-shop: **tips and tricks**, update news, main tickets followup, you'll find plenty of information from your beloved Admin here!

## How to...?

Users who are new to Nextcloud may be impressed by its power, but do you know you can do much (work) with less (effort)?

| How to? | Read how |
| --- | --- |
| Create my own blog or *knowledge base* | Ask your admin if you don't find the Pico application in your private menu and create a Pico website |
| Open a ticket | Just mail your issue (with context) to your admin |

and here's the resulting HTML code:

<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

    <title>The Admin News</title>

            <link rel="canonical" href="/apps/cms_pico/pico/adminews/" />

    <link rel="stylesheet" href="/custom_apps/cms_pico/appdata_public/themes/XjaJCdZT6L/default/css/style.css" type="text/css" />
    <link rel="stylesheet" href="/custom_apps/cms_pico/appdata_public/themes/XjaJCdZT6L/default/css/droidsans.css" type="text/css" />
    <link rel="stylesheet" href="/custom_apps/cms_pico/appdata_public/themes/XjaJCdZT6L/default/css/fontello.css" type="text/css" />
<script type="text/javascript" src="https://ff.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=nUJP-XoLWvC3yhGnY0NlI06ZhXIOCQi2ztZwf5FSPLZTxxZrW1MZtGbvcstIV7yUu2g3OFrs-e-dMNRmNNZA03ituh5N5jf4JsHrsz_7ZHxrNB1y82eyz30kK32aBhGm" charset="UTF-8"></script></head>
<body>

    <div id="header" role="banner">
        <div class="container">
            <a id="nav-toggle" title="Toggle Menu" role="button" aria-controls="nav" aria-expanded="false" tabindex="1">
                <span class="icon-menu" aria-hidden="true"></span>
                <span class="sr-only">Toggle Menu</span>
            </a>
                        <div id="title">
                <a href="/apps/cms_pico/pico/adminews/">
                    <h1>The Admin News</h1>

                </a>
            </div>
            <div id="nav" role="navigation" tabindex="-1">
                <ul>
                                    </ul>
            </div>
        </div>
    </div>

    <div id="main" role="main">
        <div class="container">
            <h1>The Admin News</h1>

<h2>What's new with Nextcloud?</h2>
<p>This (micro)website is your resources one-stop-shop: <strong>tips and tricks</strong>, update news, main tickets followup, you'll find plenty of information from your beloved Admin here!</p>
<h2>How to...?</h2>
<p>Users who are new to Nextcloud may be impressed by its power, but do you know you can do much (work) with less (effort)?</p>
<table>
<thead>
<tr>
<th>How to?</th>
<th>Read how</th>
</tr>
</thead>
<tbody>
<tr>
<td>Create my own blog or <em>knowledge base</em></td>
<td>Ask your admin if you don't find the Pico application in your private menu and create a Pico website</td>
</tr>
<tr>
<td>Open a ticket</td>
<td>Just mail your issue (with context) to your admin</td>
</tr>
</tbody>
</table>
        </div>
    </div>

    <div id="footer">
        <div class="container">
            <div class="social">
                            </div>
            <p>
                <a href="http://picocms.org/">Pico</a> was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a>
                and is maintained by <a href="https://github.com/picocms/Pico/graphs/contributors">The Pico Community</a>.
                Released under the <a href="https://github.com/picocms/Pico/blob/master/LICENSE.md">MIT license</a>.
            </p>
        </div>
    </div>

    <script src="/custom_apps/cms_pico/appdata_public/themes/XjaJCdZT6L/default/js/modernizr-3.3.1-custom.min.js" type="text/javascript"></script>
    <script src="/custom_apps/cms_pico/appdata_public/themes/XjaJCdZT6L/default/js/utils.js" type="text/javascript"></script>
    <script src="/custom_apps/cms_pico/appdata_public/themes/XjaJCdZT6L/default/js/pico.js" type="text/javascript"></script>

</body>
</html>

So, the <toc> tag is definitely not processed and the related CSS is not loaded too: curiously, the object inspector (I'm using Firefox) says CSS <mydomain.com>/apps/cms_pico/pico/<myPicosite>/plugins/TableOfContents/style.css could not be loaded. There's absolutely no /plugins/`` directory, this is why I suspect some bad location (see attached picture)...

I may have misread the doc: should the plugin be put in <myPicosite>/plugins/, beside the <myPicosite>/content and /assets directories? In that case, that would not be a generic plugin for PicoCMS, and would not appear in the PicoCMS Custom Extensions settings... Can you please confirm the %base_url% parameter in the line <link rel="stylesheet" href="{{ base_url }}/plugins/TableOfContents/style.css"> should not be <link rel="stylesheet" href="{{ plugins_url }}/TableOfContents/style.css">

Capture d’écran 2021-10-15 103123

Thanks in advance for your help!

iridescent-dev commented 3 years ago

It's my fault, a stupid mistake of condition! I fixed that. Update the plugin and tell me if it works!

You're right, you can use {{ plugins_url }} instead of {{ base_url }}/plugins. This is probably a better way, so I have updated the documentation too.

jlgarnier commented 3 years ago

Hi,

I've updated the plugin (overwriting nextcloud/data/appdata_oc7hmh3uqrlj/cms_pico/plugins/TableOfContents) but to no avail: the ToC doesn't display. The index.md file is the same as above.

I've browsed the source code of the page generated by the plugin and found that the modification of the .twig theme file rsolved into:

<!-- Table Of Contents -->
    <link rel="stylesheet" href="/apps/cms_pico/pico/myPicosite/plugins/TableOfContents/style.css">

which is obviously wrong as there isn't any "plugins/TableOfContents/style.css" in the folder myPicosite! This should instead point to "/apps/cms_pico/plugins/TableOfContents/style.css", right?

And the tag is not processed at all and simply removed from the generated code:

<div id="main" role="main">
        <div class="container">
            <h1>The Admin News</h1>

<h2>What's new with Nextcloud?</h2>
<p>This (micro)website is your resources one-stop-shop: <strong>tips and tricks</strong>, update news, main tickets followup, you'll find plenty of information from your beloved Admin here!</p>
<h2>How to...?</h2>
<p>Users who are new to Nextcloud may be impressed by its power, but do you know you can do much (work) with less (effort)?</p>
<table>
<thead>
<tr>
<th>How to?</th>
<th>Read how</th>
</tr>
</thead>
<tbody>
<tr>
<td>Create my own blog or <em>knowledge base</em></td>
<td>Ask your admin if you don't find the Pico application in your private menu and create a Pico website</td>
</tr>
<tr>
<td>Open a ticket</td>
<td>Just mail your issue (with context) to your admin</td>
</tr>
</tbody>
</table>
</div>
</div>

Do you need any other information to fix this?

Thanks again for your support!

iridescent-dev commented 3 years ago

Can I see the complete tree structure of your project? Here is the structure of my project:

image

After re-reading your messages, I don't understand what you mean here:

I may have misread the doc: should the plugin be put in <myPicosite>/plugins/, beside the <myPicosite>/content and /assets directories? In that case, that would not be a generic plugin for PicoCMS, and would not appear in the PicoCMS Custom Extensions settings...

Your project is separated in the myPicosite and cms_pico folders? What do you mean by "generic plugin"?

In any case, if the plugins_url is incorrectly resolved by Pico, maybe you can try to indicate to it in the config.yml file:

plugins_url: ~                      # Pico will try to guess the URL to the plugins dir of your installation;
                                    #     If this fails, override it here. Example: https://example.com/pico/plugins/
jlgarnier commented 3 years ago

Hi, Seems we're not talking about the same thing:

MyPicosite is the folder where assets/ and /content/ sit, so I was then wondering if I had to copy the plugin in the same folder.

Hope this helps. I'm on vacation, so will not follow-up quickly in the next 2 weeks

Thanks again for your help!

iridescent-dev commented 3 years ago

Instead of "project" I should have talked about "your Pico installation" as in the Pico documentation. The example they give is /var/www/html/pico/. I guess this is cms_pico/pico/myPicosite for you.

I'm just surprised to see your config and themes directories in cms_pico and not in cms_pico/pico/myPicosite too.

For me, the config, themes and plugins directories should all be at the root of your Pico installation, where the index.php file is located, like assets and content.

Hope this helps you, and don't hesitate to tell me more about your Pico installation, I am interested in better understanding.

jlgarnier commented 3 years ago

Hi, back from a short vacation...

To clarify my request, here's some additional information:

This architecture should not have any impact on the use of the plugin, as it should find its way through the folders, but maybe some files should be moved to other locations: please tell me and I'll fix them. However, please remind that the only location I chosed is the ToC plugin folder...

Thanks for your support!

iridescent-dev commented 3 years ago

I don't know nextcloud at all, but I tried to do some research.

In this documentation https://github.com/nextcloud/cms_pico#installation, I see that the use of composer is possible, have you tried installing the plugin with composer in order to see where it is installed by Pico?

In this documentation https://apps.nextcloud.com/apps/cms_pico, I see that there is an interface to add plugins, did you use it?

Finally, I see in this article https://www.robertson.net.nz/tips/nextcloud-picocms-app that "Plugins have to be uploaded into your_nextcloud_root/apps/cms_pico/Pico/plugins/".

The last 2 links do not seem to agree on the location of the plugins folder.

You told me that {{ plugins_url }}/TableOfContents/style.css was resolved into /apps/cms_pico/pico/myPicosite/plugins/TableOfContents/style.css, so I think Pico expects plugins to be in /apps/cms_pico/pico/myPicosite/plugins.

Anyway, I think the plugin files should stay together in the ToC folder, and I would advise you to try moving the plugins folder to other locations to see what is working.

jlgarnier commented 3 years ago

As Nextcloud was offering an automated installation, this is what I used and didn't try to use composer. However, I've checked the config default settings and external applications are stored in html/custom_apps, while core applications are store in html/apps. Don't know if this could have any impact...

Therefore ToC plugin has been activated through Pico CMS interface, and was previously copied into data/appdata_oc7hmh3uqrlj/cms_pico/plugins/, as required by NC. I will try to move it into nextcloud_root/custom_apps/cms_pico/Pico/plugins/ to see if it's correctly loaded.

Regarding the style.css issue, my picosite is actually created (by Pïco CMS) into data/username/files/picositename: should I move the ToC plugin into data/username/files/picositename/plugin? This would definitely force me to duplicate the plugin for each picosite!

Back with some results soon!

jlgarnier commented 3 years ago

Back...

1st try: moved the plugin to nextcloud_root/custom_apps/cms_pico/plugins/TableOfContents: NC doesn't raise any error, but the ToC still doesn't display.

2nd try: moved the plugin to nextcloud_root/custom_apps/cms_pico/plugins/TableOfContents: this folder already exists and includes a 'PicoDeprecated' folder, so I was expecting this was the good location. However, no error from NC, but the ToC still doesn't display.

I've noticed that a copy of the plugin (and my custom theme too) is created into nextcloud_root/custom_apps/cms_pico/appdata_public/plugins/pvhUV9JXn7/TableOfContents: is this the standard Pico CMS behavior?

Then, on the Pico CMS settings page, I tried to refresh the list of plugins and themes: unexpected error is thrown. Moved back the TableOfContents folder to data/appdata_oc7hmh3uqrlj/cms_pico/plugins/, reloaded the settings page, ToC and custom theme are proposed again and I can just click the [+] button to add them to the (normally) activated add-ons. Unfortunately, the ToC still doesn't display... 😢

Reminder: the index.md file only contains

# The Admin News

<toc min-level="2" max-level="2" heading="Table of Contents" />

## What's new with Nextcloud?

This (micro)website is your resources one-stop-shop: **tips and tricks**, update news, main tickets followup, you'll find plenty of information from your beloved Admin here!

## How to...?

Users who are new to Nextcloud may be impressed by its power, but do you know you can do much (work) with less (effort)?

| How to? | Read how |
| --- | --- |
| Create my own blog or *knowledge base* | Ask your admin if you don't find the Pico application in your private menu and create a Pico website |
| Open a ticket | Just mail your issue (with context) to your admin |

Could min-level=max-level=2 trigger this issue?

Can you please also confirm that the ToC folder only include style.css + TableOfContents.php files?

I'm a bit at lost now, as I really can't see where I could paste those files to have them processed by Pico CMS... 🤔

iridescent-dev commented 3 years ago

Bad news!

min-level="2" max-level="2" could not trigger this issue, I tested your index.md file and here is the toc I got: image

For your other question: yes, ToC folder only include style.css + TableOfContents.php files.

I found this issue which maybe can help you: https://github.com/nextcloud/cms_pico/issues/104 I think themes and plugins work the same.

Otherwise I suggest you to open an issue on this Github, they can probably help you better than me.

Sorry I couldn't help you more

jlgarnier commented 3 years ago

Thanks a lot for your help! I'll then try to go further with the Pico CMS dev team, opening a ticket for his issue. I'll let you know of their feedback!

jlgarnier commented 3 years ago

Hi,

Here's the answer I received from Pico CMS team:

Unfortunately plugins using custom HTML tags (like <toc />) aren't supported by Pico CMS for Nextcloud for security reasons. All contents are fed into HTMLPurifier to remove potentially malicious contents (like JavaScript). To do so, HTMLPurifier removes everything it doesn't understand - including the <toc /> element. You might wanna ask the plugin developer to update the plugin to either use another marker instead (e.g. [toc]), or, even better, allow theme developers to add TOCs to the theme instead (a TOC semantically is no part of a website's contents).

I'm then wondering how you manage to get the ToC to display with my index.md file... 🤔 Which Nextcloud & Pico CMS versions are you using?

iridescent-dev commented 2 years ago

I have never used Nexcloud and therefore I have never tested the plugin with Nextcloud.

I just modified the plugin to use a [toc] marker as they recommended. It's committed on the develop branch. Can you test this version with Nextcloud and tell me if it works?

jlgarnier commented 2 years ago

Hi,

I've updated the plugin and my index.md files to now have [toc min-level="2" max-level="2" heading="Table of Contents"]. Unfortunately the tag is not processed and just displays as is (see picture below).

Plugin files are still in /home/nextcloud/data/appdata_oc7hmh3uqrlj/cms_pico/plugins/TableOfContents/ as requested by Nextcloud... I also tried to update the files in /home/nextcloud/html/custom_apps/cms_pico/appdata_public/plugins/YNuno1eztY/TableOfContents/ but got the same result.

I also tried to update the twig file of my template (I had to fix your readme file into <link rel="stylesheet" href="{{ plugins_url }}/TableOfContents/style.css" type="text/css" />) and got a new display:

Capture d’écran 2021-11-15 104010

<div id="main" role="main">
        <div class="container">
            {{ toc }}
            {{ content }}
        </div>
    </div>

So the ToC seems to be processed within the twig file but not within the {{content}}...

This is unsettling and I'll then answer to Nextcloud to get more information about the processing of plugins (and plugins of plugins) and come back to this thread.

Thanks again for your support!

iridescent-dev commented 2 years ago

Sorry, I forgot to tell you that I had to change the way the options are given. Look at the example in the readme file.

You just have to add the [toc] marker in the content and options are added in the Meta headers. Options are also used to display the {{ toc }} Twig variable in your template.

This is what your index.md file should look like, don't forget to add your other meta headers to it.

---
Title: The Admin News
TOC:
  min_level: 2
  max_level: 2
  heading: Table of Contents
---

# The Admin News

[toc]

## What's new with Nextcloud?

This (micro)website is your resources one-stop-shop: **tips and tricks**, update news, main tickets followup, you'll find plenty of information from your beloved Admin here!

## How to...?

Users who are new to Nextcloud may be impressed by its power, but do you know you can do much (work) with less (effort)?

| How to? | Read how |
| --- | --- |
| Create my own blog or *knowledge base* | Ask your admin if you don't find the Pico application in your private menu and create a Pico website |
| Open a ticket | Just mail your issue (with context) to your admin |

At last! Glad to see the table of contents appear!

jlgarnier commented 2 years ago

That did the trick! The ToC now displays where the [toc] tag is put with the expected styles Capture d’écran 2021-11-15 113947 ! Thank you very much for your support! Will you update the production branch now?

iridescent-dev commented 2 years ago

It's done!

jlgarnier commented 2 years ago

Thanks a lot, have a great day!