Add quick start

* Added a quick start include template
smark-1 · May 1, 2024 · 44db90e · 44db90e
1 parent 142a986
commit 44db90e
Show file tree

Hide file tree

Showing 12 changed files with 111 additions and 315 deletions.
diff --git a/MANIFEST.in b/MANIFEST.in
@@ -1,2 +1,3 @@
 recursive-include wagtailterms/migrations *
-recursive-include wagtailterms/static *
+recursive-include wagtailterms/static *
+recursive-include wagtailterms/templates *
diff --git a/README.md b/README.md
@@ -102,8 +102,18 @@ Rendered HTML of the term in the frontend:
 ```html
 <span style="text-decoration-line: underline; text-decoration-color: green;text-decoration-thickness: 3px;color:green;" data-term="1">term 1</span>
 ```
+ℹ️ Above is the default style but this can be modified in the settings.
 
-The most basic implementation: ([See full example](./example/home/templates/home/basic_page.html))
+#### Quick implementation: ([See full example](./example/home/templates/home/quick_start.html))
+
+Include in the template at the bottom of the page template.
+```html
+...
+{% include 'wagtailterms/wagtailterms.html' %}
+```
+ℹ️  This loads the advanced implementation in page template.
+
+#### The most basic implementation: ([See full example](./example/home/templates/home/basic_page.html))
 ```javascript
 function showterm(e){
     const termid = e.target.dataset.term
@@ -129,7 +139,7 @@ On hover
 <img width="50%" src="./example/images/view_basic_2.png">
 </p>
 
-A more advanced way would be to use a library like [tippy.js](https://atomiks.github.io/tippyjs/) to 
+#### A more advanced way would be to use a library like [tippy.js](https://atomiks.github.io/tippyjs/) to 
 create a tooltip that appears when hovering over the term. ([See full example](./example/home/templates/home/advanced_page.html))
 ```javascript
 function add_tooltips(){
@@ -214,6 +224,4 @@ On hover
 
 ### 0.1.3
 - Added setting to change frontend styles
-
-## To Do
-- Include a default javascript implementation for frontend
+- Added quick start template for default frontend implementation
diff --git a/example/example/static/css/example.css b/example/example/static/css/example.css
diff --git a/example/example/static/js/example.js b/example/example/static/js/example.js
diff --git a/example/home/migrations/0002_quickstart.py b/example/home/migrations/0002_quickstart.py
@@ -0,0 +1,27 @@
+# Generated by Django 5.0.3 on 2024-05-01 03:15
+
+import django.db.models.deletion
+import wagtail.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0001_initial'),
+        ('wagtailcore', '0091_remove_revision_submitted_for_moderation'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='QuickStart',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+                ('content', wagtail.fields.RichTextField()),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+    ]
diff --git a/example/home/models.py b/example/home/models.py
@@ -9,6 +9,14 @@ class HomePage(Page):
     pass
 
 
+class QuickStart(Page):
+    content = RichTextField()
+
+    content_panels = Page.content_panels + [
+        FieldPanel("content")
+    ]
+
+
 class BasicPage(Page):
     content = RichTextField()
 
@@ -19,12 +27,12 @@ class BasicPage(Page):
 
 class AdvancedPage(Page):
     content = StreamField(
-        [
-            ("heading", blocks.CharBlock(form_classname="title")),
-            ("paragraph", blocks.RichTextBlock()),
-        ],
-        blank=True,
-        use_json_field=True,
+            [
+                ("heading", blocks.CharBlock(form_classname="title")),
+                ("paragraph", blocks.RichTextBlock()),
+            ],
+            blank=True,
+            use_json_field=True,
     )
 
     content_panels = Page.content_panels + [

diff --git a/example/home/static/css/welcome_page.css b/example/home/static/css/welcome_page.css
diff --git a/example/home/templates/home/home_page.html b/example/home/templates/home/home_page.html
diff --git a/example/home/templates/home/quick_start.html b/example/home/templates/home/quick_start.html
@@ -0,0 +1,15 @@
+{% load wagtailcore_tags wagtailuserbar %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Basic Terms</title>
+</head>
+<body>
+{% wagtailuserbar %}
+<main id="content">
+    {{ page.content|richtext }}
+</main>
+{% include 'wagtailterms/wagtailterms.html' %}
+</body>
+</html>
diff --git a/example/home/templates/home/welcome_page.html b/example/home/templates/home/welcome_page.html