feat: simplify base/page/form template structure; add docs

i'm sure there is more to document yet but this gets us started

src/wuttaweb/templates/appinfo/configure.mako

@@ -140,8 +140,8 @@
   </div>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
   <script>
 
     ThisPageData.weblibs = ${json.dumps(weblibs or [])|n}

src/wuttaweb/templates/appinfo/index.mako

@@ -48,8 +48,8 @@
 
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
   <script>
     ThisPageData.configFiles = ${json.dumps([dict(path=p, priority=i) for i, p in enumerate(config.get_prioritized_files(), 1)])|n}
   </script>

src/wuttaweb/templates/auth/login.mako

@@ -19,7 +19,8 @@
   </div>
 </%def>
 
-<%def name="modify_this_page_vars()">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
   <script>
 
     ${form.vue_component}Data.usernameInput = null

src/wuttaweb/templates/base.mako

@@ -19,8 +19,10 @@
     ${self.body()}
 
     ## Vue app
-    ${self.make_whole_page_component()}
-    ${self.make_whole_page_app()}
+    ${self.render_vue_templates()}
+    ${self.modify_vue_vars()}
+    ${self.make_vue_components()}
+    ${self.make_vue_app()}
   </body>
 </html>
 
@@ -140,7 +142,7 @@
 
 <%def name="head_tags()"></%def>
 
-<%def name="render_whole_page_template()">
+<%def name="render_vue_template_whole_page()">
   <script type="text/x-template" id="whole-page-template">
     <div id="whole-page"
          style="height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
@@ -320,6 +322,63 @@
   </script>
 </%def>
 
+<%def name="render_vue_script_whole_page()">
+  <script>
+
+    let WholePage = {
+        template: '#whole-page-template',
+        computed: {},
+
+        mounted() {
+            for (let hook of this.mountedHooks) {
+                hook(this)
+            }
+        },
+
+        methods: {
+
+            changeContentTitle(newTitle) {
+                this.contentTitleHTML = newTitle
+            },
+
+            toggleNestedMenu(hash) {
+                const key = 'menu_' + hash + '_shown'
+                this[key] = !this[key]
+            },
+
+            % if request.is_admin:
+
+                startBeingRoot() {
+                    this.$refs.startBeingRootForm.submit()
+                },
+
+                stopBeingRoot() {
+                    this.$refs.stopBeingRootForm.submit()
+                },
+
+            % endif
+        },
+    }
+
+    let WholePageData = {
+        contentTitleHTML: ${json.dumps(capture(self.content_title))|n},
+        mountedHooks: [],
+    }
+
+    ## declare nested menu visibility toggle flags
+    % for topitem in menus:
+        % if topitem['is_menu']:
+            % for item in topitem['items']:
+                % if item['is_menu']:
+                    WholePageData.menu_${id(item)}_shown = false
+                % endif
+            % endfor
+        % endif
+    % endfor
+
+  </script>
+</%def>
+
 <%def name="render_this_page_component()">
   <this-page @change-content-title="changeContentTitle" />
 </%def>
@@ -409,88 +468,25 @@
 
 <%def name="render_prevnext_header_buttons()"></%def>
 
-<%def name="declare_whole_page_vars()">
-  <script>
-
-    let WholePage = {
-        template: '#whole-page-template',
-        computed: {},
-
-        mounted() {
-            for (let hook of this.mountedHooks) {
-                hook(this)
-            }
-        },
-
-        methods: {
-
-            changeContentTitle(newTitle) {
-                this.contentTitleHTML = newTitle
-            },
-
-            toggleNestedMenu(hash) {
-                const key = 'menu_' + hash + '_shown'
-                this[key] = !this[key]
-            },
-
-            % if request.is_admin:
-
-                startBeingRoot() {
-                    this.$refs.startBeingRootForm.submit()
-                },
-
-                stopBeingRoot() {
-                    this.$refs.stopBeingRootForm.submit()
-                },
-
-            % endif
-        },
-    }
-
-    let WholePageData = {
-        contentTitleHTML: ${json.dumps(capture(self.content_title))|n},
-        mountedHooks: [],
-    }
-
-    ## declare nested menu visibility toggle flags
-    % for topitem in menus:
-        % if topitem['is_menu']:
-            % for item in topitem['items']:
-                % if item['is_menu']:
-                    WholePageData.menu_${id(item)}_shown = false
-                % endif
-            % endfor
-        % endif
-    % endfor
-
-  </script>
+<%def name="render_vue_templates()">
+  ${self.render_vue_template_whole_page()}
+  ${self.render_vue_script_whole_page()}
 </%def>
 
-<%def name="modify_whole_page_vars()"></%def>
+<%def name="modify_vue_vars()"></%def>
 
-<%def name="finalize_whole_page_vars()"></%def>
-
-<%def name="make_whole_page_component()">
+<%def name="make_vue_components()">
   ${make_wutta_components()}
-  ${self.render_whole_page_template()}
-  ${self.declare_whole_page_vars()}
-  ${self.modify_whole_page_vars()}
-  ${self.finalize_whole_page_vars()}
-
   <script>
-
     WholePage.data = function() { return WholePageData }
     Vue.component('whole-page', WholePage)
-
   </script>
 </%def>
 
-<%def name="make_whole_page_app()">
+<%def name="make_vue_app()">
   <script>
-
     new Vue({
         el: '#app'
     })
-
   </script>
 </%def>

src/wuttaweb/templates/base_meta.mako

@@ -1,8 +1,6 @@
 ## -*- coding: utf-8; -*-
 
-<%def name="app_title()">${app.get_title()}</%def>
-
-<%def name="global_title()">${self.app_title()}</%def>
+<%def name="global_title()">${app.get_title()}</%def>
 
 <%def name="extra_styles()"></%def>
 

src/wuttaweb/templates/configure.mako

@@ -134,8 +134,8 @@
   </b-notification>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
   <script>
 
     % if simple_settings is not Undefined:

src/wuttaweb/templates/form.mako

@@ -9,19 +9,16 @@
   </div>
 </%def>
 
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
   % if form is not Undefined:
       ${form.render_vue_template()}
   % endif
 </%def>
 
-<%def name="finalize_this_page_vars()">
-  ${parent.finalize_this_page_vars()}
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
   % if form is not Undefined:
       ${form.render_vue_finalize()}
   % endif
 </%def>
-
-
-${parent.body()}

src/wuttaweb/templates/master/index.mako

@@ -12,18 +12,16 @@
   % endif
 </%def>
 
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
   % if grid is not Undefined:
       ${grid.render_vue_template()}
   % endif
 </%def>
 
-<%def name="finalize_this_page_vars()">
-  ${parent.finalize_this_page_vars()}
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
   % if grid is not Undefined:
       ${grid.render_vue_finalize()}
   % endif
 </%def>
-
-${parent.body()}

src/wuttaweb/templates/page.mako

@@ -1,45 +1,25 @@
 ## -*- coding: utf-8; -*-
 <%inherit file="/base.mako" />
 
-<%def name="context_menu_items()">
-  % if context_menu_list_items is not Undefined:
-      % for item in context_menu_list_items:
-          <li>${item}</li>
-      % endfor
-  % endif
-</%def>
-
 <%def name="page_content()"></%def>
 
-<%def name="render_this_page()">
-  <div style="display: flex;">
-
-    <div class="this-page-content" style="flex-grow: 1;">
-      ${self.page_content()}
-    </div>
-
-    <ul id="context-menu">
-      ${self.context_menu_items()}
-    </ul>
-
-  </div>
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
+  ${self.render_vue_template_this_page()}
 </%def>
 
-<%def name="render_this_page_template()">
+<%def name="render_vue_template_this_page()">
   <script type="text/x-template" id="this-page-template">
     <div style="height: 100%;">
-      ${self.render_this_page()}
+      ${self.page_content()}
     </div>
   </script>
-</%def>
+  <script>
 
-<%def name="declare_this_page_vars()">
-  <script type="text/javascript">
-
-    let ThisPage = {
+    const ThisPage = {
         template: '#this-page-template',
         props: {
-            configureFieldsHelp: Boolean,
+            ## configureFieldsHelp: Boolean,
         },
         computed: {},
         watch: {},
@@ -51,31 +31,16 @@
         },
     }
 
-    let ThisPageData = {
-    }
+    const ThisPageData = {}
 
   </script>
 </%def>
 
-<%def name="modify_this_page_vars()"></%def>
-
-<%def name="finalize_this_page_vars()"></%def>
-
-<%def name="make_this_page_component()">
-  ${self.declare_this_page_vars()}
-  ${self.modify_this_page_vars()}
-  ${self.finalize_this_page_vars()}
-
-  <script type="text/javascript">
-
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
+  <script>
     ThisPage.data = function() { return ThisPageData }
-
     Vue.component('this-page', ThisPage)
     ## <% request.register_component('this-page', 'ThisPage') %>
-
   </script>
 </%def>
-
-
-${self.render_this_page_template()}
-${self.make_this_page_component()}