3 |
4 |
12 |
13 |
14 |
26 |
27 |
37 |
--------------------------------------------------------------------------------
/vue/src/components/streamfields/CallToActionBlock.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
11 |
3 |
17 |
18 |
19 |
31 |
--------------------------------------------------------------------------------
/django/website/wagtail_vue/wagtail_vue/api.py:
--------------------------------------------------------------------------------
1 | # -*- coding: utf-8 -*-
2 | """Urls for app."""
3 |
4 | from wagtail.api.v2.endpoints import PagesAPIEndpoint
5 | from wagtail.api.v2.router import WagtailAPIRouter
6 | from wagtail.images.api.v2.endpoints import ImagesAPIEndpoint
7 | from wagtail.documents.api.v2.endpoints import DocumentsAPIEndpoint
8 |
9 | # Create the router. "wagtailapi" is the URL namespace
10 | api_router = WagtailAPIRouter('wagtailapi')
11 |
12 | # Add the three endpoints using the "register_endpoint" method.
13 | # The first parameter is the name of the endpoint (eg. pages, images). This
14 | # is used in the URL of the endpoint
15 | # The second parameter is the endpoint class that handles the requests
16 | api_router.register_endpoint('pages', PagesAPIEndpoint)
17 | api_router.register_endpoint('images', ImagesAPIEndpoint)
18 | api_router.register_endpoint('documents', DocumentsAPIEndpoint)
19 |
--------------------------------------------------------------------------------
/django/website/wagtail_vue/apps/pages/migrations/0001_initial.py:
--------------------------------------------------------------------------------
1 | # Generated by Django 2.1 on 2018-11-06 04:04
2 |
3 | from django.db import migrations, models
4 | import django.db.models.deletion
5 |
6 |
7 | class Migration(migrations.Migration):
8 |
9 | initial = True
10 |
11 | dependencies = [
12 | ('wagtailcore', '0040_page_draft_title'),
13 | ]
14 |
15 | operations = [
16 | migrations.CreateModel(
17 | name='HomePage',
18 | fields=[
19 | ('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')),
20 | ],
21 | options={
22 | 'verbose_name_plural': 'Home Pages',
23 | 'verbose_name': 'Home Page',
24 | },
25 | bases=('wagtailcore.page',),
26 | ),
27 | ]
28 |
--------------------------------------------------------------------------------
/django/website/wagtail_vue/apps/pages/migrations/0003_flexpage.py:
--------------------------------------------------------------------------------
1 | # Generated by Django 2.1 on 2018-11-10 16:51
2 |
3 | from django.db import migrations, models
4 | import django.db.models.deletion
5 |
6 |
7 | class Migration(migrations.Migration):
8 |
9 | dependencies = [
10 | ('wagtailcore', '0040_page_draft_title'),
11 | ('pages', '0002_auto_20181106_0418'),
12 | ]
13 |
14 | operations = [
15 | migrations.CreateModel(
16 | name='FlexPage',
17 | fields=[
18 | ('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')),
19 | ],
20 | options={
21 | 'verbose_name_plural': 'Flex Pages',
22 | 'verbose_name': 'Flex Page',
23 | },
24 | bases=('wagtailcore.page',),
25 | ),
26 | ]
27 |
--------------------------------------------------------------------------------
/django/website/wagtail_vue/apps/pages/migrations/0002_auto_20181106_0418.py:
--------------------------------------------------------------------------------
1 | # Generated by Django 2.1 on 2018-11-06 04:18
2 |
3 | from django.db import migrations, models
4 | import django.db.models.deletion
5 |
6 |
7 | class Migration(migrations.Migration):
8 |
9 | dependencies = [
10 | ('wagtailimages', '0021_image_file_hash'),
11 | ('pages', '0001_initial'),
12 | ]
13 |
14 | operations = [
15 | migrations.AddField(
16 | model_name='homepage',
17 | name='banner_image',
18 | field=models.ForeignKey(help_text='An optional banner image', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.Image'),
19 | ),
20 | migrations.AddField(
21 | model_name='homepage',
22 | name='banner_subtitle',
23 | field=models.CharField(blank=True, help_text='An optional banner subtitle', max_length=50, null=True),
24 | ),
25 | ]
26 |
--------------------------------------------------------------------------------
/vue/NOTES.md:
--------------------------------------------------------------------------------
1 | # Wagtail + Vue.js Notes
2 |
3 | ## Intro
4 | - Goals
5 | - Lay some foundation for using Wagtail as a headless CMS
6 | - Learn more about the inner workings of Wagtail and Vue.js
7 | - Vue is a javascript framework commonly used for building user interfaces and single page applications.
8 |
9 | ## Flavor
10 | - I'm not stopping here
11 | - How can we improve this
12 | - Library agnostic, should be able to reproduce results in any framework (React, etc.)
13 |
14 | ## Scaffolding with `vue-cli`
15 | ```
16 | # Install vue-cli
17 | npm install -g @vue/cli
18 |
19 | # Create new project in folder "vue"
20 | vue create vue
21 |
22 | # Options:
23 | # manually select features: Babel, Router, Linter / Formatter
24 | # user history mode for router (yes)
25 | # eslint + prettier
26 | # disable lint on save, enable lint + fix on commit
27 | # in dedicated config files
28 | # save as a preset (no)
29 |
30 | # Move into project folder
31 | cd vue
32 |
33 | # Start development server
34 | npm run serve
35 | ```
36 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | .PHONY: build
2 |
3 | SHELL := /bin/bash
4 | CONTAINERNAME_BACKEND=wagtail_vue_backend
5 | IMAGENAME_BACKEND=wagtail_vue:backend
6 | CONTAINERNAME_FRONTEND=wagtail_vue_frontend
7 | IMAGENAME_FRONTEND=wagtail_vue:frontend
8 |
9 | build: ## Build the Docker images
10 | docker-compose -p wagtail_vue build
11 |
12 | up: build ## Bring the Docker containers up
13 | docker-compose -p wagtail_vue up -d || echo 'Already up!'
14 |
15 | upwin: ## Bring the Docker container up for bash on ubuntu folk
16 | export WINDIR="$(subst /mnt/c,//c,$(CURDIR))/" && make up
17 |
18 | lint: build ## Lint the python code.
19 | docker run -v $(CURDIR)/django:/app $(IMAGENAME_BACKEND) /bin/bash -c 'flake8 website'
20 |
21 | down: ## Stop the backend Docker container
22 | docker-compose -p wagtail_vue stop
23 |
24 | enter: ## Enter backend container
25 | docker exec -it $(CONTAINERNAME_BACKEND) /bin/bash
26 |
27 | enter_fe: ## Enter frontend container
28 | docker exec -it $(CONTAINERNAME_FRONTEND) /bin/sh
29 |
30 | clean: ## Stop and remove all Docker containers
31 | docker-compose down
32 |
--------------------------------------------------------------------------------
/vue/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "axios": "^0.18.0",
12 | "lodash": "^4.17.11",
13 | "tachyons": "^4.11.1",
14 | "vue": "^2.5.17",
15 | "vue-meta": "^1.5.5",
16 | "vue-router": "^3.0.1"
17 | },
18 | "devDependencies": {
19 | "@vue/cli-plugin-babel": "^3.0.5",
20 | "@vue/cli-plugin-eslint": "^3.0.5",
21 | "@vue/cli-service": "^3.0.5",
22 | "@vue/eslint-config-prettier": "^4.0.0",
23 | "eslint": "^5.8.0",
24 | "eslint-plugin-vue": "^5.0.0-0",
25 | "lint-staged": "^7.2.2",
26 | "vue-lazyload": "^1.2.6",
27 | "vue-template-compiler": "^2.5.17"
28 | },
29 | "gitHooks": {
30 | "pre-commit": "lint-staged"
31 | },
32 | "lint-staged": {
33 | "*.js": [
34 | "vue-cli-service lint",
35 | "git add"
36 | ],
37 | "*.vue": [
38 | "vue-cli-service lint",
39 | "git add"
40 | ]
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/django/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM ubuntu:16.04
2 | MAINTAINER Kalob Taulien
4 |
16 | {{ this.block.value.title }}
5 | 6 |
7 |
15 |
23 |
24 | {% block header %}{% endblock header %}
25 |
26 | {% block content %}
27 |
28 | {% block footer %}{% endblock footer %}
29 |
30 |
31 | {% wagtailuserbar %}
32 |
33 |
34 | {% block extra_js %}{% endblock extra_js %}
35 |
36 |
37 |
--------------------------------------------------------------------------------
/vue/src/views/HomePage.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
26 |
27 |
28 |
40 |
41 |
46 |
--------------------------------------------------------------------------------
/django/website/wagtail_vue/wagtail_vue/urls.py:
--------------------------------------------------------------------------------
1 | # -*- coding: utf-8 -*-
2 | """Urls for app."""
3 | from django.conf import settings
4 | from django.conf.urls import include, static, url
5 | from django.contrib import admin
6 | from django.contrib.staticfiles.urls import staticfiles_urlpatterns
7 |
8 | from wagtail.admin import urls as wagtailadmin_urls
9 | from wagtail.core import urls as wagtail_urls
10 | from wagtail.documents import urls as wagtaildocs_urls
11 |
12 | from .api import api_router
13 |
14 |
15 | urlpatterns = [
16 | url(r'^django-admin/', admin.site.urls),
17 |
18 | url(r'^api/v2/', api_router.urls),
19 | url(r'^admin/', include(wagtailadmin_urls)),
20 | url(r'^documents/', include(wagtaildocs_urls)),
21 |
22 | # For anything not caught by a more specific rule above, hand over to
23 | # Wagtail's page serving mechanism. This should be the last pattern in
24 | # the list:
25 | url(r'', include(wagtail_urls)),
26 | ]
27 |
28 | if settings.DEBUG:
29 | import debug_toolbar
30 | urlpatterns += staticfiles_urlpatterns()
31 | urlpatterns += static.static(
32 | settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
33 | urlpatterns += (
34 | url(r'^__debug__/', include(debug_toolbar.urls)),
35 | )
36 |
--------------------------------------------------------------------------------
/vue/src/components/Streamfield.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
16 |
17 |
18 |
6 |
11 |
7 |
10 | {{ this.page.title }}
8 |{{ this.page.banner_subtitle }}
9 |
19 |
25 |
4 |
23 |
5 |
6 | 
7 |
8 |
9 |
7 |
10 |
11 |
19 | {{ page.title }}
20 |
21 |
22 |