Add generic /page.mako template

helps with getting a proper Vue.js app going for arbitrary extra pages

tailbone/templates/page.mako

@@ -0,0 +1,79 @@
+## -*- coding: utf-8; -*-
+<%inherit file="/base.mako" />
+
+<%def name="context_menu_items()"></%def>
+
+<%def name="page_content()"></%def>
+
+<%def name="render_this_page()">
+  % if use_buefy:
+
+      <script type="text/x-template" id="this-page-template">
+        <div style="display: flex; justify-content: space-between;">
+
+          <div class="this-page-content">
+            ${self.page_content()}
+          </div>
+
+          <ul id="context-menu">
+            ${self.context_menu_items()}
+          </ul>
+
+        </div>
+      </script>
+
+      <div id="this-page-app">
+        <this-page></this-page>
+      </div>
+
+  % else:
+      ## legacy / not buefy
+
+      <div style="display: flex; justify-content: space-between;">
+
+        <div class="this-page-content">
+          ${self.page_content()}
+        </div>
+
+        <ul id="context-menu">
+          ${self.context_menu_items()}
+        </ul>
+
+      </div>
+
+  % endif
+</%def>
+
+<%def name="modify_this_page()">
+  ## NOTE: if you override this, must use <script> tags
+</%def>
+
+<%def name="make_this_page_app()">
+  <script type="text/javascript">
+
+    let ThisPage = {
+        template: '#this-page-template',
+        methods: {}
+    }
+
+  </script>
+
+  ${self.modify_this_page()}
+
+  <script type="text/javascript">
+
+    Vue.component('this-page', ThisPage)
+
+    new Vue({
+        el: '#this-page-app'
+    })
+
+  </script>
+</%def>
+
+
+${self.render_this_page()}
+
+% if use_buefy:
+    ${self.make_this_page_app()}
+% endif