Setup webpack entry point for vue components

A new template file needed to be created to allow custom javascript in
a grav page. The JS file will mount the transpiled Vue app.

.gitignore

@@ -8,3 +8,4 @@ config.go
 *~
 grav-admin/*
 !grav-admin/user
+grav-admin/user/themes/quark/assets

grav-admin/user/config/versions.yaml

@@ -1,4 +1,6 @@
 core:
   grav:
-    version: 1.7.43
+    version: 1.7.44
     schema: 1.7.0_2020-11-20_1
+    history:
+      - { version: 1.7.44, date: '2024-01-11 21:21:36' }

grav-admin/user/data/feed/21232f297a57a5a743894a0e4a801fc3.yaml

@@ -1,25 +1,25 @@
-last_checked: 1703718438
+last_checked: 1705009681
 data:
   -
     title: 'macOS 14.0 Sonoma Apache Setup: Upgrading Homebrew'
     url: 'https://getgrav.org/blog/macos-ventura-apache-upgrade-homebrew'
     date: 1697803200
-    nicetime: '2 months ago'
+    nicetime: '3 months ago'
   -
     title: 'macOS 14.0 Sonoma Apache Setup: LetsEncrypt SSL'
     url: 'https://getgrav.org/blog/macos-sonoma-apache-ssl'
     date: 1697799780
-    nicetime: '2 months ago'
+    nicetime: '3 months ago'
   -
     title: 'macOS 14.0 Sonoma Apache Setup: MySQL, Xdebug & More...'
     url: 'https://getgrav.org/blog/macos-sonoma-apache-mysql-vhost-apc'
     date: 1697799600
-    nicetime: '2 months ago'
+    nicetime: '3 months ago'
   -
     title: 'macOS 14.0 Sonoma Apache Setup: Multiple PHP Versions'
     url: 'https://getgrav.org/blog/macos-sonoma-apache-multiple-php-versions'
     date: 1697796000
-    nicetime: '2 months ago'
+    nicetime: '3 months ago'
   -
     title: 'Big changes for Email plugin'
     url: 'https://getgrav.org/blog/new-email-plugin'

grav-admin/user/data/flex/indexes/pages.json

@@ -1 +1 @@
-{"version":"1.5","timestamp":1703720151,"count":12,"index":{"":{"key":"","storage_key":"","template":null,"storage_timestamp":1703700355,"children":{"01.home":1703631506,"02.about":1703638471,"03.typography":1703638467,"04.pricing":1703638467,"05.blog":1703638467,"06.register":1703638467},"checksum":"06c91767d68d9064ce9ac55f5a3bd06a"},"01.home":{"key":"home","storage_key":"01.home","template":"modular","storage_timestamp":1703716397,"markdown":{"":{"modular":1703631506}},"children":{"01._hero":1703716188,"02._features":1703716188,"03._example":1703716188,"04._comparison-pdf":1703716397,"04._info":1703716188},"checksum":"210fead636f08d70792607fbdb12a8f1"},"01.home\/01._hero":{"key":"home\/_hero","storage_key":"01.home\/01._hero","template":"hero","storage_timestamp":1703718436,"markdown":{"":{"hero":1703718436}},"checksum":"45dc2f4a454b5f0609cbe09cfda09790"},"01.home\/02._features":{"key":"home\/_features","storage_key":"01.home\/02._features","template":"features","storage_timestamp":1703720151,"markdown":{"":{"features":1703720151}},"checksum":"ed7be750188fc4ed50ebcdc060f6fb53"},"01.home\/03._example":{"key":"home\/_example","storage_key":"01.home\/03._example","template":"text","storage_timestamp":1703716188,"markdown":{"":{"text":1703713545}},"checksum":"48b2ea373eba19040584a991b21c083c"},"01.home\/04._comparison-pdf":{"key":"home\/_comparison-pdf","storage_key":"01.home\/04._comparison-pdf","template":"text","storage_timestamp":1703719134,"markdown":{"":{"text":1703719134}},"checksum":"f323d6050403b0102c73c174d74b2f0a"},"01.home\/05._info":{"key":"home\/_info","storage_key":"01.home\/05._info","template":"features","storage_timestamp":1703720014,"markdown":{"":{"features":1703720014}},"checksum":"35c9bee0f74fe81449a491e31bf81bcb"},"02.about":{"key":"about","storage_key":"02.about","template":"default","storage_timestamp":1703638471,"markdown":{"":{"default":1703638471}},"checksum":"5e859a0aa19b89aad1f917b6c071aa79"},"03.typography":{"key":"typography","storage_key":"03.typography","template":"default","storage_timestamp":1703638467,"markdown":{"":{"default":1696264967}},"checksum":"e18e25aa1028384a58d66d7b5c74b799"},"04.pricing":{"key":"pricing","storage_key":"04.pricing","template":"flex-objects","storage_timestamp":1703638467,"markdown":{"":{"flex-objects":1703635650}},"checksum":"a24998d28c01b388939d89c05b6afca5"},"05.blog":{"key":"blog","storage_key":"05.blog","template":"blog","storage_timestamp":1703638467,"markdown":{"":{"blog":1703636303}},"checksum":"88a8e8a7109dc2957e9dc3e1fd81fa85"},"06.register":{"key":"register","storage_key":"06.register","template":"default","storage_timestamp":1703638467,"markdown":{"":{"default":1703635993}},"checksum":"d34a58c9eddf0d0cac39eacb2832d13b"}}}
+{"version":"1.5","timestamp":1705010891,"count":14,"index":{"":{"key":"","storage_key":"","template":null,"storage_timestamp":1705010337,"children":{"01.home":1704396086,"02.about":1704398516,"03.typography":1703638467,"04.pricing":1704400398,"05.blog":1703638467,"06.register":1705010214,"07.login":1704398231},"checksum":"eea3a7871f80727e2de9702b8f540707"},"01.home":{"key":"home","storage_key":"01.home","template":"modular","storage_timestamp":1704396086,"markdown":{"":{"modular":1703631506}},"children":{"01._hero":1703718436,"02._features":1703720151,"03._example":1703716188,"04._comparison-pdf":1703719134,"05._info":1703720014,"06._any_device":1704396086},"checksum":"dbbcfea030db5994b105e013be94b15c"},"01.home\/01._hero":{"key":"home\/_hero","storage_key":"01.home\/01._hero","template":"hero","storage_timestamp":1703718436,"markdown":{"":{"hero":1703718436}},"checksum":"45dc2f4a454b5f0609cbe09cfda09790"},"01.home\/02._features":{"key":"home\/_features","storage_key":"01.home\/02._features","template":"features","storage_timestamp":1703720151,"markdown":{"":{"features":1703720151}},"checksum":"ed7be750188fc4ed50ebcdc060f6fb53"},"01.home\/03._example":{"key":"home\/_example","storage_key":"01.home\/03._example","template":"text","storage_timestamp":1703716188,"markdown":{"":{"text":1703713545}},"checksum":"48b2ea373eba19040584a991b21c083c"},"01.home\/04._comparison-pdf":{"key":"home\/_comparison-pdf","storage_key":"01.home\/04._comparison-pdf","template":"text","storage_timestamp":1703719134,"markdown":{"":{"text":1703719134}},"checksum":"f323d6050403b0102c73c174d74b2f0a"},"01.home\/05._info":{"key":"home\/_info","storage_key":"01.home\/05._info","template":"features","storage_timestamp":1703720014,"markdown":{"":{"features":1703720014}},"checksum":"35c9bee0f74fe81449a491e31bf81bcb"},"01.home\/06._any_device":{"key":"home\/_any_device","storage_key":"01.home\/06._any_device","template":"text","storage_timestamp":1704397975,"markdown":{"":{"text":1704397975}},"checksum":"aabfe01503028954e8557c5bff37048d"},"02.about":{"key":"about","storage_key":"02.about","template":"default","storage_timestamp":1704398516,"markdown":{"":{"default":1704398516}},"checksum":"3d12d8cc95786aef7316b6c379752aa0"},"03.typography":{"key":"typography","storage_key":"03.typography","template":"default","storage_timestamp":1703638467,"markdown":{"":{"default":1696264967}},"checksum":"e18e25aa1028384a58d66d7b5c74b799"},"04.pricing":{"key":"pricing","storage_key":"04.pricing","template":"default","storage_timestamp":1704400398,"markdown":{"":{"default":1704400398}},"checksum":"76ddfc1dafa27268dca3f24db2ffa05a"},"05.blog":{"key":"blog","storage_key":"05.blog","template":"blog","storage_timestamp":1703638467,"markdown":{"":{"blog":1703636303}},"checksum":"88a8e8a7109dc2957e9dc3e1fd81fa85"},"06.register":{"key":"register","storage_key":"06.register","template":"registration","storage_timestamp":1705010891,"markdown":{"":{"registration":1705010891}},"checksum":"20586ed4c6c3abbf43ef96c978a99d94"},"07.login":{"key":"login","storage_key":"07.login","template":"form","storage_timestamp":1704398231,"markdown":{"":{"form":1704398231}},"checksum":"77a4de225317558af65b6079dcc902fb"}}}

grav-admin/user/data/notifications/21232f297a57a5a743894a0e4a801fc3.yaml

@@ -1,4 +1,4 @@
-last_checked: 1703719932
+last_checked: 1705009679
 data:
   feed:
     -

grav-admin/user/js/registration/registration.js

@@ -0,0 +1,5 @@
+import {createApp} from "vue"
+import App from "./registration.vue"
+// import "./assets/main.css"
+
+const app = createApp(App).mount("#registration")

grav-admin/user/js/registration/registration.vue

@@ -0,0 +1,6 @@
+<template>
+<form>
+	<label>Given name</label><input type="text" name="gname"/>
+	<label>Surname</label><input type="text" name="sname"/>
+</form>
+</template>

grav-admin/user/pages/01.home/06._any_device/text.md

@@ -0,0 +1,11 @@
+---
+title: any_device
+body_classes: modular
+image_align: left
+media_order: devs.png
+---
+
+### Easy to use on any device
+
+Qui doloribus ratione sed illo exercitationem est repellendus illum. Aut alias sequi vel nihil omnis qui cupiditate aliquid non commodi tempora. Sit ratione quaerat et animi molestiae non earum similique sed repudiandae ipsum. Hic repudiandae aperiam in autem porro ut officiis sint ut numquam dolorem et sunt minima.
+

grav-admin/user/pages/02.about/default.md

@@ -2,4 +2,14 @@
 title: About
 ---
 
-## About us
+## About us
+
+Lorem ipsum dolor sit amet. Ut molestiae recusandae ab sapiente suscipit ea placeat facilis eos minima sapiente nam nulla dignissimos ut voluptas voluptatem aut enim laboriosam! Nam excepturi natus et sint autem qui aperiam quia qui placeat nostrum eos rerum culpa et dolore velit id iusto officia. Ut accusamus saepe nam quaerat quis non provident aliquid ut delectus sapiente est soluta fugiat et sapiente eaque. Ut doloremque facere quo aliquam vero ut reiciendis odio?
+
+Aut labore eligendi ad dolorem omnis qui nisi iste eos perferendis possimus aut nihil nulla. At sint ipsum id voluptatibus commodi sit ipsam repellendus. Et odio vero qui porro voluptas eum omnis numquam quo provident maiores non veniam cupiditate ut autem architecto sed galisum alias. Qui consectetur consectetur ut atque distinctio At repellendus quia a quis nobis et dolorem dolor.
+
+Et eveniet sunt ut inventore internos qui blanditiis delectus et magni rerum aut sequi recusandae At natus recusandae. Non ipsam asperiores At similique illo vel modi molestiae aut reprehenderit fugiat aut porro quia eum consequatur ratione ea accusamus perferendis. Et sequi autem ut impedit ratione aut magnam sapiente. Qui rerum possimus sit dolor placeat ab corporis esse.
+
+
+### Contact us
+hello@skouter.net

grav-admin/user/pages/04.pricing/default.md

@@ -0,0 +1,23 @@
+---
+title: Pricing
+---
+
+## Plans and pricing
+We offer flexible subscription options for branchs and loyal subscribers. Contact us to learn more.
+
+### $49.99/month
+[Get started](/register?classes=button,big)
+* Custom templates
+* Customizable PDFs
+* Unlimited comparison reports
+* Unlimited estimates
+* Excellent UI
+
+
+
+### Branch plan
+[Contact us](mailto:hello@skouter.net?classes=button,big)
+* Branch-wide logo and fee rules
+* Rollback branch rules
+* Manager panel
+* Notifications and alerts

grav-admin/user/pages/04.pricing/flex-objects.md

@@ -1,7 +0,0 @@
----
-title: Pricing
----
-
-hello world
-
-## hello world

grav-admin/user/pages/06.register/default.md → grav-admin/user/pages/06.register/registration.md

@@ -2,4 +2,3 @@
 title: Register
 ---
 
-## Registration

grav-admin/user/pages/07.login/form.md

@@ -0,0 +1,5 @@
+---
+title: Login
+---
+
+## Welcome

grav-admin/user/themes/quark/css/custom.css

@@ -0,0 +1,10 @@
+section.section.modular-text > section.container {
+  padding-bottom: 100px;
+  margin: 80px auto;
+}
+
+.shadowbox {
+    padding: 1rem 1rem;
+    background: #fff;
+    box-shadow: 0 0 75px 0 rgba(69,77,93,.1);
+}

grav-admin/user/themes/quark/templates/modular/text.html.twig

@@ -8,7 +8,7 @@
             <div class="column col-6 col-md-12">
                 {{ content|raw }}
             </div>
-            <div class="column col-6 col-md-12">
+            <div class="column col-6 col-md-12 shadowbox">
                 {{ image.html|raw }}
             </div>
             {% else %}

grav-admin/user/themes/quark/templates/registration.html.twig

@@ -0,0 +1,12 @@
+{% extends 'partials/base.html.twig' %}
+
+{% block javascripts %}
+    {{ parent() }}
+    {% do assets.add('theme://js/bricklayer.min.js') %}
+    {% do assets.add('theme://assets/register.js', {group:'bottom'}) %}
+{% endblock %}
+
+{% block content %}
+    {{ page.content|raw }}
+    <div id="registration"></div>
+{% endblock %}

grav-webpack.config.js

@@ -0,0 +1,33 @@
+const { VueLoaderPlugin } = require('vue-loader')
+const path = require('path')
+const Dotenv = require('dotenv-webpack')
+
+module.exports = {
+	entry: './main.js',
+	entry: {
+	    register: {
+	        import: './grav-admin/user/js/registration/registration.js',
+	        filename: 'register.js',
+	    }
+	},
+	output: {
+		path: path.resolve(__dirname, 'grav-admin/user/themes/quark/assets'),
+	},
+	module: { 
+		rules: [
+			{test: /\.vue$/, use: 'vue-loader'},
+			{test: /\.css$/, use: ['style-loader', 'css-loader']}
+		]
+	},
+	devServer: {
+		static: './assets',
+		proxy: {
+			'*': {target: 'http://localhost:8001',
+				secure: false,
+				changeOrigin: true
+			}
+		}
+	},
+	// Required for also applying rules to sections of SFC
+	plugins: [new VueLoaderPlugin(), new Dotenv({systemVars: true})],
+};

package.json

@@ -1,6 +1,7 @@
 {
   "scripts": {
-    "watch": "webpack --mode development --watch"
+    "watch": "webpack --mode development --watch",
+	"grav": "webpack --mode development -c ./grav-webpack.config.js --watch"
   },
   "dependencies": {
     "html2pdf.js": "^0.10.1",

webpack.config.js

@@ -4,9 +4,14 @@ const Dotenv = require('dotenv-webpack')
 
 module.exports = {
 	entry: './main.js',
+	entry: {
+	    main: {
+	        import: './main.js',
+	        filename: 'app.js',
+	    },
+	},
 	output: {
 		path: path.resolve(__dirname, 'assets'),
-		filename: 'app.js'
 	},
 	module: { 
 		rules: [