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.
Files changed (30) hide show
  1. {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/PKG-INFO +61 -8
  2. {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/README.md +60 -7
  3. {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/pyproject.toml +1 -1
  4. {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/__init__.py +18 -2
  5. wagtail_tw_blocks-0.2.0/wagtail_blocks/blocks.py +563 -0
  6. wagtail_tw_blocks-0.2.0/wagtail_blocks/static/wagtail_blocks/css/styles.css +2 -0
  7. wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/accordion.html +24 -0
  8. {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/templates/wagtail_blocks/blocks/alert.html +3 -3
  9. {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/templates/wagtail_blocks/blocks/carousel.html +12 -6
  10. wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/code.html +64 -0
  11. {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/templates/wagtail_blocks/blocks/diff.html +4 -4
  12. wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/fab.html +43 -0
  13. wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/hover_gallery.html +18 -0
  14. wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/list.html +55 -0
  15. wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/steps.html +12 -0
  16. wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/tabs.html +24 -0
  17. wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/timeline.html +30 -0
  18. wagtail_tw_blocks-0.2.0/wagtail_blocks/templates/wagtail_blocks/blocks/toast.html +9 -0
  19. wagtail_tw_blocks-0.1.1/wagtail_blocks/blocks.py +0 -251
  20. wagtail_tw_blocks-0.1.1/wagtail_blocks/static/wagtail_blocks/css/styles.css +0 -2
  21. wagtail_tw_blocks-0.1.1/wagtail_blocks/templates/wagtail_blocks/blocks/accordion.html +0 -19
  22. wagtail_tw_blocks-0.1.1/wagtail_blocks/templates/wagtail_blocks/blocks/code.html +0 -51
  23. wagtail_tw_blocks-0.1.1/wagtail_blocks/templates/wagtail_blocks/styles.html +0 -20
  24. {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/LICENSE +0 -0
  25. {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/apps.py +0 -0
  26. {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/static/wagtail_blocks/.prettierrc +0 -0
  27. {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/static/wagtail_blocks/README.md +0 -0
  28. {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/static/wagtail_blocks/css/app.css +0 -0
  29. {wagtail_tw_blocks-0.1.1 → wagtail_tw_blocks-0.2.0}/wagtail_blocks/static/wagtail_blocks/package-lock.json +0 -0
  30. {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.1.1
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
- <!-- You also may want to include TailwindCSS and daisyUI -->
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
- <main>
154
- {{ article.content }}
155
- </main>
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
- <!-- You also may want to include TailwindCSS and daisyUI -->
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
- <main>
134
- {{ article.content }}
135
- </main>
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.1.1"
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
- ACCORDION_STYLE_VARIANTS = [
6
+ ACCORDION_STYLES = [
7
7
  ("plus", _("Plus")),
8
8
  ("arrow", _("Arrow")),
9
9
  ]
10
10
 
11
- ALERT_STYLE_VARIANTS = [
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")),