Merge branch 'release/1.0.4'

nystudio107 · Dec 6, 2017 · 3ff7ec9 · 3ff7ec9
2 parents 27360ee + 6f679eb
commit 3ff7ec9
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # nystudio107/craft Change Log
 
+## 1.0.4 - 2017.12.06
+### Changed
+* Fixed asset versioning in `sw.js`
+* Run all inline JavaScript through `js-babel` for ES6 goodness
+
+### Added
+* Added base VueJS and Axios support
+
 ## 1.0.3 - 2017.12.05
 ### Changed
 * Updated for Craft CMS 3 RC1 release

diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
   "name": "nystudio107/craft",
   "description": "nystudio107 Craft 3 CMS scaffolding project",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "keywords": [
     "craft",
     "cms",

diff --git a/gulpfile.js b/gulpfile.js
@@ -146,7 +146,7 @@ gulp.task("components", () => {
 });
 
 // inline js task - minimize the inline Javascript into _inlinejs in the templates path
-gulp.task("js-inline", () => {
+gulp.task("js-inline", ["js-babel"], () => {
     $.fancyLog("-> Copying inline js");
     return gulp.src(pkg.globs.inlineJs)
         .pipe($.plumber({errorHandler: onError}))
@@ -167,7 +167,7 @@ gulp.task("js-inline", () => {
 });
 
 // js task - minimize any distribution Javascript into the public js folder, and add our banner to it
-gulp.task("js", ["js-inline", "js-babel"], () => {
+gulp.task("js", ["js-inline"], () => {
     $.fancyLog("-> Building js");
     return gulp.src(pkg.globs.distJs)
         .pipe($.plumber({errorHandler: onError}))

diff --git a/package.json b/package.json
@@ -100,9 +100,11 @@
         ],
         "distJs": [
             "./build/js/*.js",
+            "./node_modules/axios/dist/axios.min.js",
             "./node_modules/lazysizes/lazysizes.min.js",
             "./node_modules/lazysizes/plugins/bgset/ls.bgset.min.js",
-            "./node_modules/picturefill/dist/picturefill.min.js"
+            "./node_modules/picturefill/dist/picturefill.min.js",
+            "./node_modules/vue/dist/vue.min.js"
         ],
         "babelJs": [
             "./src/js/*.js"
@@ -120,13 +122,15 @@
         "siteIcon": "./web/img/site/favicon.*"
     },
     "dependencies": {
+        "axios": "^0.17.1",
         "fg-loadcss": "^1.2.0",
         "fontfaceobserver": "^2.0.5",
         "lazysizes": "^2.0.6",
         "loadjs": "^3.3.1",
         "normalize.css": "^5.0.0",
         "picturefill": "^3.0.2",
-        "tiny-cookie": "^1.0.1"
+        "tiny-cookie": "^1.0.1",
+        "vue": "^2.5.9"
     },
     "devDependencies": {
         "babel-plugin-transform-runtime": "^6.15.0",

diff --git a/templates/_layouts/_layout.twig b/templates/_layouts/_layout.twig
@@ -15,6 +15,7 @@
         <link rel="dns-prefetch" href="{{ baseUrl }}">
         <link rel="preconnect" href="{{ baseUrl }}" crossorigin>
 
+        {# -- Any <link> tags that should be included in the header #}
         {% block _head_links %}
         {% endblock %}
 
@@ -38,6 +39,7 @@
         <script>
             Cookie.set("critical-css", {{ staticAssetsVersion }}, { expires: "7D", secure: true });
         </script>
+            {# -- Inline CSS block used by templates for Critical CSS #}
             {% block _inline_css %}
             {% endblock %}
         <link rel="preload" href="{{ baseUrl }}css/site.combined.min.{{staticAssetsVersion}}.css" as="style" onload="this.rel='stylesheet'">
@@ -100,13 +102,18 @@
     <body>
         <div id="page-container">
 
+            {# -- Info header, including _navbar.twig -- #}
             {% include "_partials/_info_header.twig" %}
-
-            <main>
-                {% block content %}
-                {% endblock %}
-            </main>
-
+
+            <div id="content-container" class="container mx-auto">
+                <main>
+                    {# -- Primary content block -- #}
+                    {% block content %}
+                    {% endblock %}
+                </main>
+            </div>
+
+            {# -- Content that appears below the primary content block -- #}
             {% block subcontent %}
             {% endblock %}
 
@@ -115,15 +122,67 @@
 
             {# -- HTML Footer -- #}
             {% include "_partials/_global_footer.twig" %}
-
-            {# -- Inline JS -- #}
-            {% block _inline_js %}
-            {% endblock %}
-
+
         </div>
 
-            {% block analytics %}
-            {% endblock %}
+        {# -- VueJS & Axios, along with our main app component instantiation -- #}
+        <script>
+            // define a dependency bundle
+            loadjs(
+                [
+                    '{{ baseUrl }}js/vue.min.{{staticAssetsVersion}}.js',
+                ],
+                'vue'
+            );
+            loadjs(
+                [
+                    '{{ baseUrl }}js/axios.min.{{staticAssetsVersion}}.js',
+                ],
+                'axios'
+            );
+            loadjs.ready(['vue', 'axios'], {
+                success: function() {
+                    // Use Axios as our http client
+                    Vue.prototype.$http = axios;
+                    // Create our Vue component
+                    var vm = new Vue({
+                        el: '#page-container',
+                        components: {
+                        },
+                        delimiters: ['${', '}'],
+                        data: {
+                        },
+                        methods: {
+                            // Pre-render pages when the user mouses over a link
+                            // Usage: <a href="" @mouseover="prerenderLink">
+                            prerenderLink: function(e) {
+                                var head = document.getElementsByTagName("head")[0];
+                                var refs = head.childNodes;
+                                ref = refs[ refs.length - 1];
+
+                                var elements = head.getElementsByTagName("link");
+                                Array.prototype.forEach.call(elements, function(el, i) {
+                                    if (("rel" in el) && (el.rel === "prerender"))
+                                        el.parentNode.removeChild(el);
+                                });
+
+                                var prerenderTag = document.createElement("link");
+                                prerenderTag.rel = "prerender";
+                                prerenderTag.href = e.currentTarget.href;
+                                ref.parentNode.insertBefore(prerenderTag,  ref);
+                            },
+                        },
+                        mounted: function() {
+                        }
+                    });
+                }
+            });
+        </script>
+
+        {# -- Inline JS -- #}
+        {% block _inline_js %}
+        {% endblock %}
+
         {% endminify %}
-        </body>
+    </body>
 </html>
diff --git a/templates/sw.js b/templates/sw.js
@@ -29,9 +29,9 @@
     ];
 
     const staticAssets = [
-        '{{ baseUrl }}js/lazysizes.min{{staticAssetsVersion}}.js',
+        '{{ baseUrl }}js/lazysizes.min.{{staticAssetsVersion}}.js',
 
-        '{{ baseUrl }}css/site.combined.min{{staticAssetsVersion}}.css'
+        '{{ baseUrl }}css/site.combined.min.{{staticAssetsVersion}}.css'
 
     ];