wagtail-tw-blocks 0.1.1__tar.gz → 0.2.0__tar.gz
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/PKG-INFO +61 -8
- {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/README.md +60 -7
- {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/pyproject.toml +1 -1
- {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/__init__.py +18 -2
- wagtail_tw_blocks-0.2.0/wagtail_blocks/blocks.py +563 -0
- wagtail_tw_blocks-0.2.0/wagtail_blocks/static/wagtail_blocks/css/styles.css +2 -0
- wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/accordion.html +24 -0
- {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/templates/wagtail_blocks/blocks/alert.html +3 -3
- {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/templates/wagtail_blocks/blocks/carousel.html +12 -6
- wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/code.html +64 -0
- {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/templates/wagtail_blocks/blocks/diff.html +4 -4
- wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/fab.html +43 -0
- wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/hover_gallery.html +18 -0
- wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/list.html +55 -0
- wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/steps.html +12 -0
- wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/tabs.html +24 -0
- wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/timeline.html +30 -0
- wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/toast.html +9 -0
- wagtail_tw_blocks-0.1.1/wagtail_blocks/blocks.py +0 -251
- wagtail_tw_blocks-0.1.1/wagtail_blocks/static/wagtail_blocks/css/styles.css +0 -2
- wagtail_tw_blocks-0.1.1/wagtail_blocks/templates/wagtail_blocks/blocks/accordion.html +0 -19
- wagtail_tw_blocks-0.1.1/wagtail_blocks/templates/wagtail_blocks/blocks/code.html +0 -51
- wagtail_tw_blocks-0.1.1/wagtail_blocks/templates/wagtail_blocks/styles.html +0 -20
- {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/LICENSE +0 -0
- {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/apps.py +0 -0
- {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/static/wagtail_blocks/.prettierrc +0 -0
- {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/static/wagtail_blocks/README.md +0 -0
- {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/static/wagtail_blocks/css/app.css +0 -0
- {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/static/wagtail_blocks/package-lock.json +0 -0
- {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/static/wagtail_blocks/package.json +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
Metadata-Version: 2.4
|
|
2
2
|
Name: wagtail-tw-blocks
|
|
3
|
-
Version: 0.
|
|
3
|
+
Version: 0.2.0
|
|
4
4
|
Summary: A collection of reusable, production-ready content blocks for Wagtail CMS, styled with Tailwind CSS and daisyUI.
|
|
5
5
|
License: MIT
|
|
6
6
|
License-File: LICENSE
|
|
@@ -44,6 +44,13 @@ Description-Content-Type: text/markdown
|
|
|
44
44
|
- **Carousel:** Image or content slider with responsive design.
|
|
45
45
|
- **Code:** Syntax-highlighted code snippets for technical content (Requires `highlight.js` and `clipboard.js` to be included in your page).
|
|
46
46
|
- **Diff:** Side-by-side or inline difference highlighting for image comparisons.
|
|
47
|
+
- **FAB:** Floating Action Button with multiple action items.
|
|
48
|
+
- **Hover Gallery:** Image gallery with hover effects.
|
|
49
|
+
- **List:** Ordered lists with custom styling.
|
|
50
|
+
- **Steps:** Step-by-step process indicators.
|
|
51
|
+
- **Tabs:** Tabbed content sections.
|
|
52
|
+
- **Timeline:** Chronological event listings.
|
|
53
|
+
- **Toast:** Temporary notification messages.
|
|
47
54
|
|
|
48
55
|
---
|
|
49
56
|
|
|
@@ -122,6 +129,7 @@ class Article(Page):
|
|
|
122
129
|
("carousel", blocks.CarouselBlock()),
|
|
123
130
|
("code", blocks.CodeBlock()),
|
|
124
131
|
("diff", blocks.DiffBlock()),
|
|
132
|
+
# ...
|
|
125
133
|
],
|
|
126
134
|
help_text=_("Article content"),
|
|
127
135
|
)
|
|
@@ -135,8 +143,6 @@ class Article(Page):
|
|
|
135
143
|
```html
|
|
136
144
|
<!-- blog/base.html -->
|
|
137
145
|
|
|
138
|
-
{% load static %}
|
|
139
|
-
|
|
140
146
|
<!doctype html>
|
|
141
147
|
|
|
142
148
|
<html data-theme="luxury">
|
|
@@ -144,15 +150,45 @@ class Article(Page):
|
|
|
144
150
|
<meta charset="UTF-8" />
|
|
145
151
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
146
152
|
<title>Wagtail Blocks Usage Example</title>
|
|
147
|
-
|
|
153
|
+
|
|
154
|
+
<!--
|
|
155
|
+
Do not use in production.
|
|
156
|
+
See:
|
|
157
|
+
- https://tailwindcss.com/docs/installation
|
|
158
|
+
-->
|
|
159
|
+
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
|
|
160
|
+
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
|
|
161
|
+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
162
|
+
|
|
163
|
+
<!-- Code highlighting for CodeBlock -->
|
|
164
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
|
|
165
|
+
<link
|
|
166
|
+
rel="stylesheet"
|
|
167
|
+
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css"
|
|
168
|
+
/>
|
|
169
|
+
<script>hljs.highlightAll();</script>
|
|
170
|
+
|
|
171
|
+
<!-- If you already using TailwindCSS and daisyUI you can include -->
|
|
172
|
+
{% load static %}
|
|
148
173
|
<link href="{% static 'wagtail_blocks/css/styles.css' %}" rel="stylesheet" type="text/css" />
|
|
149
174
|
</head>
|
|
150
175
|
|
|
151
176
|
<body>
|
|
152
|
-
<!--
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
177
|
+
<!--
|
|
178
|
+
Requires TailwindCSS Typography plugin.
|
|
179
|
+
"@tailwindcss/typography": https://github.com/tailwindlabs/tailwindcss-typography
|
|
180
|
+
-->
|
|
181
|
+
<main class="prose mx-auto prose-sm prose-video:rounded-box xl:prose-lg 2xl:prose-xl prose-headings:text-primary prose-img:rounded-box prose-img:w-full">
|
|
182
|
+
{{ article.content }}
|
|
183
|
+
</main>
|
|
184
|
+
|
|
185
|
+
<!-- Lucide icons -->
|
|
186
|
+
<script src="https://unpkg.com/lucide@latest"></script>
|
|
187
|
+
<script>lucide.createIcons();</script>
|
|
188
|
+
|
|
189
|
+
<!-- For copy buttons in CodeBlock -->
|
|
190
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
|
|
191
|
+
<script>const btns = new ClipboardJS(".btn-copy");</script>
|
|
156
192
|
</body>
|
|
157
193
|
</html>
|
|
158
194
|
```
|
|
@@ -172,6 +208,23 @@ class Article(Page):
|
|
|
172
208
|
|
|
173
209
|
---
|
|
174
210
|
|
|
211
|
+
## Extending
|
|
212
|
+
|
|
213
|
+
You can easily extend or customize the provided blocks by subclassing them. For example, to create a custom alert block with additional styles:
|
|
214
|
+
|
|
215
|
+
```python
|
|
216
|
+
from wagtail_blocks import blocks
|
|
217
|
+
|
|
218
|
+
class CustomAlertBlock(blocks.AlertBlock):
|
|
219
|
+
|
|
220
|
+
class Meta:
|
|
221
|
+
template = "path/to/your/custom_alert_template.html"
|
|
222
|
+
icon = "warning"
|
|
223
|
+
label = "Custom Alert"
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
---
|
|
227
|
+
|
|
175
228
|
## Contributing
|
|
176
229
|
|
|
177
230
|
We welcome community contributions. See the [CONTRIBUTING](CONTRIBUTING.md) guide for setup instructions, coding standards, and workflow. Opening an issue before major changes helps align on scope and direction.
|
|
@@ -24,6 +24,13 @@
|
|
|
24
24
|
- **Carousel:** Image or content slider with responsive design.
|
|
25
25
|
- **Code:** Syntax-highlighted code snippets for technical content (Requires `highlight.js` and `clipboard.js` to be included in your page).
|
|
26
26
|
- **Diff:** Side-by-side or inline difference highlighting for image comparisons.
|
|
27
|
+
- **FAB:** Floating Action Button with multiple action items.
|
|
28
|
+
- **Hover Gallery:** Image gallery with hover effects.
|
|
29
|
+
- **List:** Ordered lists with custom styling.
|
|
30
|
+
- **Steps:** Step-by-step process indicators.
|
|
31
|
+
- **Tabs:** Tabbed content sections.
|
|
32
|
+
- **Timeline:** Chronological event listings.
|
|
33
|
+
- **Toast:** Temporary notification messages.
|
|
27
34
|
|
|
28
35
|
---
|
|
29
36
|
|
|
@@ -102,6 +109,7 @@ class Article(Page):
|
|
|
102
109
|
("carousel", blocks.CarouselBlock()),
|
|
103
110
|
("code", blocks.CodeBlock()),
|
|
104
111
|
("diff", blocks.DiffBlock()),
|
|
112
|
+
# ...
|
|
105
113
|
],
|
|
106
114
|
help_text=_("Article content"),
|
|
107
115
|
)
|
|
@@ -115,8 +123,6 @@ class Article(Page):
|
|
|
115
123
|
```html
|
|
116
124
|
<!-- blog/base.html -->
|
|
117
125
|
|
|
118
|
-
{% load static %}
|
|
119
|
-
|
|
120
126
|
<!doctype html>
|
|
121
127
|
|
|
122
128
|
<html data-theme="luxury">
|
|
@@ -124,15 +130,45 @@ class Article(Page):
|
|
|
124
130
|
<meta charset="UTF-8" />
|
|
125
131
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
126
132
|
<title>Wagtail Blocks Usage Example</title>
|
|
127
|
-
|
|
133
|
+
|
|
134
|
+
<!--
|
|
135
|
+
Do not use in production.
|
|
136
|
+
See:
|
|
137
|
+
- https://tailwindcss.com/docs/installation
|
|
138
|
+
-->
|
|
139
|
+
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
|
|
140
|
+
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
|
|
141
|
+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
142
|
+
|
|
143
|
+
<!-- Code highlighting for CodeBlock -->
|
|
144
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
|
|
145
|
+
<link
|
|
146
|
+
rel="stylesheet"
|
|
147
|
+
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css"
|
|
148
|
+
/>
|
|
149
|
+
<script>hljs.highlightAll();</script>
|
|
150
|
+
|
|
151
|
+
<!-- If you already using TailwindCSS and daisyUI you can include -->
|
|
152
|
+
{% load static %}
|
|
128
153
|
<link href="{% static 'wagtail_blocks/css/styles.css' %}" rel="stylesheet" type="text/css" />
|
|
129
154
|
</head>
|
|
130
155
|
|
|
131
156
|
<body>
|
|
132
|
-
<!--
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
157
|
+
<!--
|
|
158
|
+
Requires TailwindCSS Typography plugin.
|
|
159
|
+
"@tailwindcss/typography": https://github.com/tailwindlabs/tailwindcss-typography
|
|
160
|
+
-->
|
|
161
|
+
<main class="prose mx-auto prose-sm prose-video:rounded-box xl:prose-lg 2xl:prose-xl prose-headings:text-primary prose-img:rounded-box prose-img:w-full">
|
|
162
|
+
{{ article.content }}
|
|
163
|
+
</main>
|
|
164
|
+
|
|
165
|
+
<!-- Lucide icons -->
|
|
166
|
+
<script src="https://unpkg.com/lucide@latest"></script>
|
|
167
|
+
<script>lucide.createIcons();</script>
|
|
168
|
+
|
|
169
|
+
<!-- For copy buttons in CodeBlock -->
|
|
170
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
|
|
171
|
+
<script>const btns = new ClipboardJS(".btn-copy");</script>
|
|
136
172
|
</body>
|
|
137
173
|
</html>
|
|
138
174
|
```
|
|
@@ -152,6 +188,23 @@ class Article(Page):
|
|
|
152
188
|
|
|
153
189
|
---
|
|
154
190
|
|
|
191
|
+
## Extending
|
|
192
|
+
|
|
193
|
+
You can easily extend or customize the provided blocks by subclassing them. For example, to create a custom alert block with additional styles:
|
|
194
|
+
|
|
195
|
+
```python
|
|
196
|
+
from wagtail_blocks import blocks
|
|
197
|
+
|
|
198
|
+
class CustomAlertBlock(blocks.AlertBlock):
|
|
199
|
+
|
|
200
|
+
class Meta:
|
|
201
|
+
template = "path/to/your/custom_alert_template.html"
|
|
202
|
+
icon = "warning"
|
|
203
|
+
label = "Custom Alert"
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
---
|
|
207
|
+
|
|
155
208
|
## Contributing
|
|
156
209
|
|
|
157
210
|
We welcome community contributions. See the [CONTRIBUTING](CONTRIBUTING.md) guide for setup instructions, coding standards, and workflow. Opening an issue before major changes helps align on scope and direction.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
[tool.poetry]
|
|
2
2
|
name = "wagtail-tw-blocks"
|
|
3
|
-
version = "0.
|
|
3
|
+
version = "0.2.0"
|
|
4
4
|
description = "A collection of reusable, production-ready content blocks for Wagtail CMS, styled with Tailwind CSS and daisyUI."
|
|
5
5
|
authors = ["Yousef Abu Shanab <josephyousef249@gmail.com>"]
|
|
6
6
|
license = "MIT"
|
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
from django.utils.translation import gettext_lazy as _
|
|
4
4
|
|
|
5
5
|
# Constants
|
|
6
|
-
|
|
6
|
+
ACCORDION_STYLES = [
|
|
7
7
|
("plus", _("Plus")),
|
|
8
8
|
("arrow", _("Arrow")),
|
|
9
9
|
]
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
ALERT_STYLES = [
|
|
12
12
|
("soft", _("Soft")),
|
|
13
13
|
("outline", _("Outline")),
|
|
14
14
|
]
|
|
@@ -20,6 +20,22 @@ ALERT_LEVELS = [
|
|
|
20
20
|
("error", _("Error")),
|
|
21
21
|
]
|
|
22
22
|
|
|
23
|
+
COLOR_CHOICES = [
|
|
24
|
+
("primary", _("Primary")),
|
|
25
|
+
("secondary", _("Secondary")),
|
|
26
|
+
("accent", _("Accent")),
|
|
27
|
+
("success", _("Success")),
|
|
28
|
+
("info", _("Info")),
|
|
29
|
+
("warning", _("Warning")),
|
|
30
|
+
("error", _("Error")),
|
|
31
|
+
]
|
|
32
|
+
|
|
33
|
+
TAB_STYLES = [
|
|
34
|
+
("border", _("Border")),
|
|
35
|
+
("box", _("Box")),
|
|
36
|
+
("lift", _("Lift")),
|
|
37
|
+
]
|
|
38
|
+
|
|
23
39
|
# The popular programming languages
|
|
24
40
|
PROGRAMMING_LANGUAGES = [
|
|
25
41
|
("auto", _("Auto")),
|