Add support for the base theme (GH-13)

Author: ArtyomVancyan

README.md

@@ -1,6 +1,6 @@
 # Django Mermaid
 
-Django template tag for showing mermaid diagrams.
+Django template tag for rendering mermaid diagrams.
 
 [![PyPI](https://img.shields.io/pypi/v/django-mermaid.svg)](https://pypi.org/project/django-mermaid/)
 [![License](https://img.shields.io/pypi/l/django-mermaid.svg)](https://github.com/ArtyomVancyan/django-mermaid/blob/master/LICENSE)
@@ -15,7 +15,7 @@ python -m pip install django-mermaid
 
 ## Configuration
 
-Add the `django_mermaid.apps.MermaidConfig` to your `INSTALLED_APPS` setting:
+Add the `django_mermaid.apps.MermaidConfig` to your `INSTALLED_APPS` in your Django project's **settings.py** file.
 
 ```python
 INSTALLED_APPS = [
@@ -26,22 +26,58 @@ INSTALLED_APPS = [
 
 ## Usage
 
-Once you have installed the app, you can use the `mermaid` template tag in your templates.
+After you configure the `INSTALLED_APPS`, you will be able to load the `mermaid` in your template and use the template
+tag for rendering mermaid diagrams.
 
 ```jinja2
 {% load mermaid %}
 {% mermaid "graph LR; A-->B;" %}
 ```
 
+### Mermaid version
+
 By default, Django Mermaid uses the **9.4.3** version of mermaid. However, if you want to use a specific version of
-mermaid, you can set the `MERMAID_VERSION` variable in your Django project's settings.py file.
+mermaid, you can set the `MERMAID_VERSION` variable in your Django project's **settings.py** file.
 
 ```python
 MERMAID_VERSION = '10.0.3-alpha.1'
 ```
 
 Make sure the version you specify is available on the [mermaid CDN](https://cdnjs.com/libraries/mermaid), and has
-the `mermaid.min.js` file.
+the **mermaid.min.js** file.
+
+### Mermaid theme
+
+To set a default theme for the whole project, set the `MERMAID_THEME` variable in your Django project's **settings.py**
+file. However, Django Mermaid uses
+the [default](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) theme of
+mermaid by default. Also, check out the mermaid [docs](https://mermaid.js.org/config/theming.html?#theme-variables) for
+the available themes.
+
+```python
+MERMAID_THEME = 'neutral'
+```
+
+Also, you can provide the theme right in the template tag which will dynamically override the value of
+the `MERMAID_THEME` variable.
+
+```jinja2
+{% mermaid "graph LR; A-->B;" "dark" %}
+```
+
+### Mermaid theme variables
+
+You can define your custom theme by overriding the `MERMAID_THEME_VARIABLES` variable. You will need to use
+the [base](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) theme as it is
+the only modifiable theme. Check out the mermaid [docs](https://mermaid.js.org/config/theming.html?#theme-variables) for
+the complete and up-to-date list of available theme variables.
+
+```python
+MERMAID_THEME_VARIABLES = {
+    'primaryColor': '#BB2528',
+    'primaryTextColor': '#FFF',
+}
+```
 
 ## Contribute
 

SECURITY.md

@@ -0,0 +1,15 @@
+# Security Policy
+
+## Downloading Mermaid from Trusted CDN
+
+The Django Mermaid downloads a specified version of Mermaid from a trusted https://cdnjs.cloudflare.com/ Content
+Delivery Network (CDN) repository.
+
+## Reporting Security Issues
+
+If you discover a security issue in the Django Mermaid project, please do not hesitate to report it by emailing us
+at [[email protected]](mailto:[email protected]). We take all security issues seriously and will respond to your
+report as soon as possible.
+
+Please provide as much information as possible when reporting a security issue, including steps to reproduce the issue,
+the expected behavior, and the actual behavior. This will help us to identify and fix the issue quickly.

setup.cfg

@@ -3,7 +3,7 @@ name = django-mermaid
 version = attr: django_mermaid.__version__
 author = Artyom Vancyan
 author_email = [email protected]
-description = Django template tag for showing mermaid diagrams
+description = Django template tag for rendering mermaid diagrams
 long_description = file: README.md
 long_description_content_type = text/markdown
 url = https://github.com/ArtyomVancyan/django-mermaid

src/django_mermaid/__init__.py

@@ -1 +1 @@
-__version__ = "0.0.3"
+__version__ = "0.0.4"

src/django_mermaid/templatetags/mermaid.py

@@ -1,3 +1,5 @@
+import json
+
 from django import template
 from django.conf import settings
 from django.templatetags.static import static
@@ -15,12 +17,14 @@ def mermaid(diagram=None, theme=None):
     """Render a mermaid diagram.
 
     :param diagram: The mermaid diagram definition
-    :param theme: The mermaid theme to use (default, forest, dark, neutral). See https://mermaid.js.org/config/theming.
+    :param theme: The mermaid theme to use (default, forest, dark, neutral, base). See https://mermaid.js.org/config/theming.
     """
 
     version = getattr(settings, "MERMAID_VERSION", DEFAULT_VERSION)
     theme = theme or getattr(settings, "MERMAID_THEME", DEFAULT_THEME)
+    theme_variables = getattr(settings, "MERMAID_THEME_VARIABLES", {}) if theme == "base" else {}
 
     mermaid_uri = static("mermaid/%s/mermaid.js" % version)
     html = "<div class=\"mermaid\">%s</div><script src=\"%s\"></script>" % (diagram or "", mermaid_uri)
-    return html + "<script>mermaid.initialize({\"startOnLoad\": true, theme: \"%s\"});</script>" % theme
+    init_properties = {"startOnLoad": True, "theme": theme, "themeVariables": theme_variables}
+    return html + "<script>mermaid.initialize(%s);</script>" % json.dumps(init_properties)

tests/test_tag.py

@@ -6,7 +6,6 @@
 from django.template import Context
 from django.template import Template
 from django.test import override_settings
-
 from django_mermaid.templatetags import DEFAULT_THEME
 
 
@@ -16,7 +15,8 @@ def test_tag_use_in_template(version):
     template = template.render(Context({"content": "graph LR; A-->B;"}))
     assert template == (
             "<div class=\"mermaid\">graph LR; A-->B;</div><script src=\"mermaid/%s/mermaid.js\"></script>"
-            "<script>mermaid.initialize({\"startOnLoad\": true, theme: \"%s\"});</script>" % (version, theme)
+            "<script>mermaid.initialize({\"startOnLoad\": true, \"theme\": \"%s\", \"themeVariables\": {}"
+            "});</script>" % (version, theme)
     )
 
 
@@ -26,7 +26,8 @@ def test_tag_use_settings_theme(version):
     template = template.render(Context({"content": "graph LR; A-->B;"}))
     assert template == (
             "<div class=\"mermaid\">graph LR; A-->B;</div><script src=\"mermaid/%s/mermaid.js\"></script>"
-            "<script>mermaid.initialize({\"startOnLoad\": true, theme: \"forest\"});</script>" % version
+            "<script>mermaid.initialize({\"startOnLoad\": true, \"theme\": \"forest\", \"themeVariables\""
+            ": {}});</script>" % version
     )
 
 
@@ -35,7 +36,30 @@ def test_tag_use_custom_theme(version):
     template = template.render(Context({"content": "graph LR; A-->B;"}))
     assert template == (
             "<div class=\"mermaid\">graph LR; A-->B;</div><script src=\"mermaid/%s/mermaid.js\"></script>"
-            "<script>mermaid.initialize({\"startOnLoad\": true, theme: \"dark\"});</script>" % version
+            "<script>mermaid.initialize({\"startOnLoad\": true, \"theme\": \"dark\", \"themeVariables\": "
+            "{}});</script>" % version
+    )
+
+
+@override_settings(MERMAID_THEME_VARIABLES={"primaryColor": "red"})
+def test_tag_use_custom_theme_variables(version):
+    template = Template("{% load mermaid %}{% mermaid content \"dark\" %}")
+    template = template.render(Context({"content": "graph LR; A-->B;"}))
+    assert template == (
+            "<div class=\"mermaid\">graph LR; A-->B;</div><script src=\"mermaid/%s/mermaid.js\"></script>"
+            "<script>mermaid.initialize({\"startOnLoad\": true, \"theme\": \"dark\", \"themeVariables\": "
+            "{}});</script>" % version
+    )
+
+
+@override_settings(MERMAID_THEME="base", MERMAID_THEME_VARIABLES={"primaryColor": "#efefef"})
+def test_tag_use_custom_theme_variables_with_base_theme(version):
+    template = Template("{% load mermaid %}{% mermaid content %}")
+    template = template.render(Context({"content": "graph LR; A-->B;"}))
+    assert template == (
+            "<div class=\"mermaid\">graph LR; A-->B;</div><script src=\"mermaid/%s/mermaid.js\"></script>"
+            "<script>mermaid.initialize({\"startOnLoad\": true, \"theme\": \"base\", \"themeVariables\": "
+            "{\"primaryColor\": \"#efefef\"}});</script>" % version
     )