Use assets manifest and udata 1.6 theme changes

.circleci/config.yml

@@ -24,6 +24,7 @@ jobs:
           command: |
             virtualenv venv
             source venv/bin/activate
+            pip install -e . || pip install -e .
             pip install -r requirements/develop.pip || pip install -r requirements/develop.pip
       - save_cache:
           key: py-cache-v3-{{ arch }}-{{ .Branch }}

.gitignore

@@ -99,3 +99,4 @@ ENV/
 # assets
 /node_modules
 /gouvlu/theme/static/
+/gouvlu/theme/manifest.json

CHANGELOG.md

@@ -2,7 +2,8 @@
 
 ## Current (in progress)
 
-- Nothing yet
+- Use an assets manifest for improved caching [#102](https://github.com/opendatalu/gouvlu/pull/102)
+- Expose theme assets for udata 1.6 [#102](https://github.com/opendatalu/gouvlu/pull/102)
 
 ## 1.1.1 (2018-09-11)
 

gouvlu/theme/templates/oembed.html

@@ -1,5 +1,5 @@
 {% extends 'oembed.html' %}
 
 {% block extra_css %}
-<link rel="stylesheet" href="{{ theme_static('oembed.css', external=True) }}" />
+<link href="{{ manifest('theme', 'oembed.css', external=True) }}" rel="stylesheet">
 {% endblock %}

gouvlu/theme/templates/raw.html

@@ -24,6 +24,11 @@
 <meta name="theme-color" content="{{ current_theme.info.color }}">
 {% endblock %}
 
+{% block theme_css %}
+{{ super() }}
+<link href="{{ manifest('theme', 'theme.css') }}" rel="stylesheet">
+{% endblock %}
+
 
 {% block extra_js %}
 {{ super() }}

package.json

@@ -27,7 +27,8 @@
     "style-loader": "^0.21.0",
     "uglifyjs-webpack-plugin": "^1.2.7",
     "webpack": "^4.16.3",
-    "webpack-cli": "^3.1.0"
+    "webpack-cli": "^3.1.0",
+    "webpack-manifest-plugin": "^2.0.4"
   },
   "dependencies": {
     "bootstrap": "^3.3.7",

requirements/install.pip

@@ -1,3 +1,3 @@
-udata>=1.5.3
+udata>=1.6.0
 feedparser
 requests==2.19.1

webpack.config.js

@@ -4,8 +4,11 @@ const path = require('path');
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const ManifestPlugin = require('webpack-manifest-plugin');
 
-const static_path = path.resolve('./gouvlu/theme/static');
+const public_path = '/_themes/gouvlu/';
+const theme_path = path.resolve('./gouvlu/theme');
+const static_path = path.join(theme_path, 'static');
 const source_path = path.resolve('./assets');
 
 module.exports = function(env, argv) {
@@ -18,8 +21,9 @@ module.exports = function(env, argv) {
         },
         output: {
             path: static_path,
-            publicPath: "/_themes/gouvlu/",
-            filename: "[name].js"
+            publicPath: public_path,
+            filename: "[name].[hash].js",
+            chunkFilename: 'chunks/[id].[hash].js'
         },
         resolve: {
             modules: [
@@ -35,15 +39,21 @@ module.exports = function(env, argv) {
                     {loader: 'less-loader', options: {sourceMap: true}},
                 ]},
                 {test: /img\/.*\.(jpg|jpeg|png|gif|svg)$/, loader: 'file-loader', options: {
-                    name: '[path][name].[ext]?[hash]', context: source_path
+                    name: '[path][name].[ext]', context: source_path
                 }},
             ]
         },
         devtool: isProd ? 'source-map' : 'eval',
         plugins: [
+            new ManifestPlugin({
+                fileName: path.join(theme_path, 'manifest.json'),
+                // Filter out chunks and source maps
+                filter: ({name, isInitial, isChunk}) => !name.endsWith('.map') && (isInitial || !isChunk),
+                publicPath: public_path,
+            }),
             new MiniCssExtractPlugin({
-                filename: "[name].css",
-                chunkFilename: "[id].css"
+                filename: '[name].[hash].css',
+                chunkFilename: '[id].[hash].css',
             }),
         ]
     };