repos/website
1
Fork 0
Code Issues 1 Pull requests 27 Activity

Add mermaid embed

Browse source
This commit is contained in:
Jake Howard 2022-07-15 09:56:22 +01:00
parent 1acaca3ce6
commit feba307de7
Signed by: jake
GPG key ID: 57AFB45680EDD477
9 changed files with 3162 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
static/src/scss/_blocks.scss
View file

@ -41,3 +41,11 @@ div.block-tangent {
padding-left: 1.5rem;
}
}
div.block-mermaid {
text-align: center;
img {
width: unset;
}
}

1533
website/blog/migrations/0012_alter_bloglistpage_body_alter_blogpostpage_body.py Normal file
View file

File diff suppressed because it is too large Load diff

1533
website/common/migrations/0014_alter_contentpage_body_alter_listingpage_body.py Normal file
View file

File diff suppressed because it is too large Load diff

37
website/common/rich_text.py Normal file
View file

@ -0,0 +1,37 @@
RICH_TEXT_FEATURES = [
"h2",
"h3",
"h4",
"h5",
"h6",
"bold",
"italic",
"ol",
"ul",
"link",
"document-link",
"code",
"strikethrough",
"snippet-link",
"snippet-embed",
]
RICH_TEXT_FEATURES_PLAIN = [
"bold",
"italic",
"link",
"document-link",
"code",
"strikethrough",
]
RICH_TEXT_FEATURES_SIMPLE = [
"bold",
"italic",
"ol",
"ul",
"link",
"document-link",
"code",
"strikethrough",
]

44
website/common/streamfield.py
View file

@ -10,44 +10,13 @@ from wagtail.images.blocks import ImageChooserBlock
from website.common.utils import HEADER_TAGS
from website.contrib.code_block.blocks import CodeBlock
from website.contrib.mermaid_block.blocks import MermaidBlock
RICH_TEXT_FEATURES = [
"h2",
"h3",
"h4",
"h5",
"h6",
"bold",
"italic",
"ol",
"ul",
"link",
"document-link",
"code",
"strikethrough",
"snippet-link",
"snippet-embed",
]
RICH_TEXT_FEATURES_PLAIN = [
"bold",
"italic",
"link",
"document-link",
"code",
"strikethrough",
]
RICH_TEXT_FEATURES_SIMPLE = [
"bold",
"italic",
"ol",
"ul",
"link",
"document-link",
"code",
"strikethrough",
]
from .rich_text import (
RICH_TEXT_FEATURES,
RICH_TEXT_FEATURES_PLAIN,
RICH_TEXT_FEATURES_SIMPLE,
)
class LoremBlock(blocks.StructBlock):
@ -98,6 +67,7 @@ def get_blocks() -> list[tuple[str, blocks.BaseBlock]]:
("image", ImageCaptionBlock()),
("code", CodeBlock()),
("tangent", TangentBlock()),
("mermaid", MermaidBlock()),
]

0
website/contrib/mermaid_block/__init__.py Normal file
View file

33
website/contrib/mermaid_block/blocks.py Normal file
View file

@ -0,0 +1,33 @@
import base64
import json
import zlib
from wagtail.blocks import RichTextBlock, StructBlock, StructValue, TextBlock
from website.common.rich_text import RICH_TEXT_FEATURES_PLAIN
class MermaidStructValue(StructValue):
def config(self) -> dict:
return {"code": self.get("source"), "mermaid": {"theme": "default"}}
def pako(self) -> str:
"""
Reverse engineer the URL payload needed by mermaid.ink
"""
return (
"pako:"
+ base64.urlsafe_b64encode(
zlib.compress(json.dumps(self.config()).encode())
).decode()
)
class MermaidBlock(StructBlock):
source = TextBlock()
caption = RichTextBlock(features=RICH_TEXT_FEATURES_PLAIN)
class Meta:
icon = "edit"
value_class = MermaidStructValue
template = "contrib/blocks/mermaid.html"

10
website/contrib/mermaid_block/templates/contrib/blocks/mermaid.html Normal file
View file

@ -0,0 +1,10 @@
{% load wagtailcore_tags %}
<figure>
<div class="image">
<img src="https://mermaid.ink/img/{{ value.pako }}" referrerpolicy="no-referrer"/>
</div>
<figcaption>
{{ value.caption|richtext }}
</figcaption>
</figure>

1
website/settings.py
View file

@ -29,6 +29,7 @@ INSTALLED_APPS = [
"website.blog",
"website.images",
"website.contrib.code_block",
"website.contrib.mermaid_block",
"website.contrib.unsplash",
"wagtail.contrib.forms",
"wagtail.contrib.redirects",