PhrozenByte
commented
1 year ago I'm afraid we can't provide any support in languages other than English, sorry.
Closed OSCAR2766 closed 1 year ago
PhrozenByte
commented
1 year ago I'm afraid we can't provide any support in languages other than English, sorry.
mayamcdougall
commented
1 year ago Pico's Default Theme doesn't support Mermaid Flowcharts, nor does any other theme that I know of.
If you want these to be correctly rendered on the page, you'd have to code something into the Theme (or as a Plugin) yourself to parse them.
I don't see any reason why you couldn't make this work in Pico, but I've never used Mermaid before, so I can't really help with it either. Sorry. 😔
From briefly looking at the documentation, it looks like it might be as simple as including a <script> (<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>) in your theme's index.twig, and then putting the Mermaid code inside some <div class="mermaid"></div> tags (you can use HTML right in your Markdown files).
But I'm afraid that's as deep as I can go on this subject. As stated above, unfortunately we can only really offer help in English. 😅
Good luck with your project.
mayamcdougall
commented
1 year ago Actually, it really was that simple.
In your theme's index.twig (eg themes/default/index.twig), add:
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
to the <head> section (or technically I think it'll work anywhere).
In your markdown (eg index.md):
---
Title: Welcome
Description: Pico is a stupidly simple, blazing fast, flat file CMS.
---
<div class="mermaid">
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
</div>(Using an example from Mermaid's Docs, because I can't copy-and-paste from your image)
That's all it should take.
OSCAR2766
commented
1 year ago
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>到该
<head>部分（或者从技术上讲，我认为它可以在任何地方工作）。
Thank you for your reply. This question has been bothering me. I added the PicoCMS plug-in to Nextcloud, and I couldn't find the configuration file on Nextcloud. I was on Nextcloud directly edit Markdown file insert Mermaid, but Picocms can not render. I went to where the NextCloud installation was stored and looked for all the index.twig.Then according to the above mentioned file modification and restart the service, but still can not render.
OSCAR2766
commented
1 year ago root@debian:/new/nextcloud-data# find ./ -name "index.twig"
./custom_apps/cms_pico/appdata/themes/default/index.twig
./custom_apps/cms_pico/appdata_public/themes/uXFF6i7L0b/default/index.twig
root@debian:/new/nextcloud-data# head -n20 ./custom_apps/cms_pico/appdata/themes/default/index.twig
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<!DOCTYPE html>
<html class="no-js">
<head>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
{% if meta.description %}
<meta name="description" content="{{ meta.description|striptags }}" />
{% endif %}
{% if meta.robots %}
<meta name="robots" content="{{ meta.robots }}" />
{% endif %}
{% if current_page %}
<link rel="canonical" href="{{ current_page.url }}" />
{% endif %}
root@debian:/new/nextcloud-data# head -n20 ./custom_apps/cms_pico/appdata_public/themes/uXFF6i7L0b/default/index.twig
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<!DOCTYPE html>
<html class="no-js">
<head>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
{% if meta.description %}
<meta name="description" content="{{ meta.description|striptags }}" />
{% endif %}
{% if meta.robots %}
<meta name="robots" content="{{ meta.robots }}" />
{% endif %}
{% if current_page %}
<link rel="canonical" href="{{ current_page.url }}" />
{% endif %}
Write MD documents on NextCloud, preview can see can show the Mermaid, but through the web access or can not be displayed normally
OSCAR2766
commented
1 year ago <!DOCTYPE html>
<html class="no-js">
<head>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
{% if meta.description %}
<meta name="description" content="{{ meta.description|striptags }}" />
{% endif %}
{% if meta.robots %}
<meta name="robots" content="{{ meta.robots }}" />
{% endif %}
{% if current_page %}
<link rel="canonical" href="{{ current_page.url }}" />
{% endif %}
<link rel="stylesheet" href="{{ theme_url }}/css/style.css" type="text/css" />
<link rel="stylesheet" href="{{ theme_url }}/css/droidsans.css" type="text/css" />
<link rel="stylesheet" href="{{ theme_url }}/css/fontello.css" type="text/css" />
</head>
<body{% if config.theme_config.widescreen %} class="widescreen"{% endif %}>
<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>
{% if pages["_meta"].meta.logo %}
<div id="logo" aria-hidden="true">
<a href="{{ "index"|link }}">
<img src="{{ pages["_meta"].meta.logo|url }}" alt="" />
</a>
</div>
{% endif %}
<div id="title"{{ pages["_meta"].meta.tagline ? ' class="tagline"' }}>
<a href="{{ "index"|link }}">
<h1>{{ site_title }}</h1>
{{ pages["_meta"].meta.tagline|markdown }}
</a>
</div>
<div id="nav" role="navigation" tabindex="-1">
<ul>
{% for page in pages(depthOffset=-1) if page.title and not page.hidden %}
<li{% if page.id == current_page.id %} class="active"{% endif %}>
<a href="{{ page.url }}">{{ page.title }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div id="main" role="main">
<div class="container">
{{ content }}
</div>
</div>
<div id="footer">
<div class="container">
<div class="social">
{% for social in pages["_meta"].meta.social %}
<a href="{{ social.url }}" title="{{ social.title }}" role="button">
<span class="icon-{{ social.icon }}" aria-hidden="true"></span>
<span class="sr-only">{{ social.title }}</span>
</a>
{% endfor %}
</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="{{ theme_url }}/js/modernizr-3.3.1-custom.min.js" type="text/javascript"></script>
<script src="{{ theme_url }}/js/utils.js" type="text/javascript"></script>
<script src="{{ theme_url }}/js/pico.js" type="text/javascript"></script>
</body>
</html>
Refused to load the script 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
PhrozenByte
commented
1 year ago This won't work in Pico CMS for Nextcloud for security reasons. You must add Mermaid's JavaScript sources to your theme, i.e. create a custom theme using the admin interface, download Mermaid's sources and add them to data/appdata_*/cms_pico/themes/my_custom_theme (load it using <script src="{{ theme_url }}/js/mermaid.min.js"> or similar) and then reload the theme sources using the admin interface again.
OSCAR2766
commented
1 year ago 
There was no ability to create a theme on Nextcloud. I copied a new folder from the address where the theme was stored and restarted the service, but there was still no new theme option. This may not work, I now need to study how to add a new theme to make Nextcloud can be selected, and can load the Mermaid
OSCAR2766
commented
1 year ago 
Here copied a new theme, and found on the server, now try to use the new theme to join the Mermaid source for adaptation
OSCAR2766
commented
1 year ago root@debian:/new/nextcloud-data/custom_apps/cms_pico/appdata_public/themes/uXFF6i7L0b# pwd
/new/nextcloud-data/custom_apps/cms_pico/appdata_public/themes/uXFF6i7L0b
root@debian:/new/nextcloud-data/custom_apps/cms_pico/appdata_public/themes/uXFF6i7L0b# ls
custom default new
root@debian:/new/nextcloud-data/custom_apps/cms_pico/appdata_public/themes/uXFF6i7L0b# cd new/
root@debian:/new/nextcloud-data/custom_apps/cms_pico/appdata_public/themes/VqdX4lgs6v/new# ls
CHANGELOG.md composer.json css font icon img index.twig js LICENSE pico-theme.yml README.md出于安全原因，这在 Nextcloud 的 Pico CMS 中不起作用。您必须将 Mermaid 的 JavaScript 源添加到您的主题中，即使用管理界面创建自定义主题，下载 Mermaid 的源并将它们添加到
data/appdata_*/cms_pico/themes/my_custom_theme（使用<script src="{{ theme_url }}/js/mermaid.min.js">或类似方式加载），然后再次使用管理界面重新加载主题源。
Thank you for your reply. I'll try, but I don't know exactly how to do it.
PhrozenByte
commented
1 year ago Please follow the instructions in the Pico CMS for Nextcloud admin interface; don't edit files in custom_apps/cms_pico/appdata_public.
OSCAR2766
commented
1 year ago 
I downloaded the mermaid source to the local, through the following way to call the error still
<script src="{{ theme_url }}/js/mermaid.min.js">Refused to load the script 'http://xxx/apps/dashboard/' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.@PhrozenByte I'm afraid I don't really have any more to add here. 😕
The fact that it's trying to load a url ending in /apps/dashboard/ seems like something is definitely pointing to the wrong place.
I could probably do the source merging for them and upload a .zip of the theme if it'd be as simple as drag-and-dropping it into Nextcloud on their end.
Other than that though, I'm not sure how to help debug this further (at least, not productively. 😒)
github-actions[bot]
commented
1 year ago This issue has been automatically marked as stale because it has not had recent activity. It will be closed in two days if no further activity occurs. Thank you for your contributions! :+1:
Pico CMS shows the web page, although can normally display Markdown syntax, but can not normally render Mermaid and flow syntax. Unable to show flow chart