Webpack

.gitignore

@@ -1,2 +1,4 @@
 *.egg-info
 .pytest_cache
+yird/static/*.css
+yird/static/*.js

Pipfile

@@ -12,6 +12,7 @@ gitpython = "*"
 markdown = "*"
 pytest = "*"
 pytest-cov = "*"
+flask-webpack = "*"
 
 [requires]
 python_version = "3.7"

Pipfile.lock

@@ -1,7 +1,7 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "c37bdd943d5c3cbb47764bbad66de712f10e5eddea7273ca31240f906d380677"
+            "sha256": "4389fadf9b02e4cf8b8de26830e9ffa003e4414fe29778e11d1a07862e19c8da"
         },
         "pipfile-spec": 6,
         "requires": {
@@ -81,6 +81,13 @@
             "index": "pypi",
             "version": "==1.0.2"
         },
+        "flask-webpack": {
+            "hashes": [
+                "sha256:aa56bf97253a07e09514e2ff6ff67497d8654a66a17c208394687a64528ddc74"
+            ],
+            "index": "pypi",
+            "version": "==0.1.0"
+        },
         "gitdb2": {
             "hashes": [
                 "sha256:83361131a1836661a155172932a13c08bda2db3674e4caa32368aa6eb02f38c2",

assets/js/index.js

@@ -0,0 +1,8 @@
+document.querySelector('[data-generate-button]').addEventListener('click',
+  function (e) {
+    var r = confirm('Are you sure? This will overwrite any existing content.');
+    if (!r) {
+      e.preventDefault();
+    }
+  }
+);

assets/scss/style.scss

@@ -0,0 +1,122 @@
+/* global */
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+.heading {
+  border-bottom: 1px solid #000000;
+  font-size: 24px;
+  margin-bottom: 15px;
+}
+
+/* layout */
+
+.container {
+  display: flex;
+}
+
+.main {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  padding: 20px;
+}
+
+.main__container {
+  width: 768px;
+}
+
+/* sidebar */
+.sidebar {
+  background: #496893;
+  color: #ffffff;
+  min-height: 100vh;
+  padding: 20px 0;
+  width: 150px;
+}
+
+.sidebar__title {
+  color: #ffffff;
+  font-size: 24px;
+}
+
+.sidebar__title,
+.nav__item {
+  padding: 5px 10px;
+}
+
+.nav__item:hover {
+  background: #ffffff;
+}
+
+.nav__item:hover a {
+  color: #496893;
+}
+
+.nav__link {
+  color: white;
+}
+
+.nav__link:hover {
+  text-decoration: underline;
+}
+
+/* forms */
+
+.form__field {
+  display: flex;
+  flex-direction: column;
+  margin: 5px 0;
+  width: 100%;
+}
+
+.form__field,
+.form__label {
+  margin-bottom: 5px;
+}
+
+.form__date-field,
+.form__textarea,
+.form__text-field {
+  border: 1px solid #e8e8e8;
+  font-family: serif;
+  font-size: 16px;
+  padding: 5px;
+}
+
+.form__textarea {
+  resize: vertical;
+}
+
+.form__submit {
+  border: 1px solid #e8e8e8;
+  padding: 5px 10px;
+}
+
+/* post listing */
+.post-listing__item {
+  position: relative;
+}
+
+.post-listing__item--changed:before {
+  background-color: red;
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 10px;
+  left: -15px;
+  position: absolute;
+  top: 3px;
+  width: 10px;
+}

manifest.json

@@ -0,0 +1 @@
+{"assets":{"app_css.css":"app_css-a8e857a2075c5754ba39.css","app_css.js":"app_css.e509ac2debe5d5805fa0.js","app_js.js":"app_js.9dc1daad314671a279cc.js"},"publicPath":""}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "yird",
+  "version": "0.1.0",
+  "description": "Yird is for building websites.",
+  "main": "index.js",
+  "scripts": {
+    "build": "node_modules/.bin/webpack",
+    "watch": "node_modules/.bin/webpack --watch"
+  },
+  "author": "Dylan Baker <dylanbaker.ct@gmail.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "babel-loader": "^8.0.4",
+    "css-loader": "^2.1.0",
+    "manifest-revision-webpack-plugin": "^0.4.1",
+    "mini-css-extract-plugin": "^0.5.0",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.28.3",
+    "webpack-cli": "^3.1.2"
+  }
+}

webpack.config.js

@@ -0,0 +1,52 @@
+const ManifestRevisionPlugin = require('manifest-revision-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+const path = require('path')
+
+module.exports = {
+  mode: 'production',
+  entry: {
+    app_js: ['./assets/js/index.js'],
+    app_css: ['./assets/scss/style.scss'],
+  },
+  output: {
+    path: '/Users/dylan/src/yird/yird/static',
+    filename: '[name].[chunkhash].js',
+    chunkFilename: '[id].[chunkhash].js',
+  },
+  resolve: {
+    extensions: ['.js', '.css', '.scss'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      },
+      {
+        test: /\.s?css/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: 'css-loader' },
+          { loader: 'sass-loader' },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new ManifestRevisionPlugin('manifest.json', {
+      rootAssetPath: './assets',
+      ignorePaths: ['/styles', '/scripts'],
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name]-[contenthash].css'
+    }),
+
+  ],
+}

yird/app.py

@@ -1,10 +1,22 @@
 from flask import Flask, redirect, render_template, request, url_for
 
+from flask_webpack import Webpack
+
 from yird.services.posts import PostsService
 
 from yird.settings import Settings
 
 app = Flask(__name__)
+
+params = {
+    'DEBUG': True,
+    'WEBPACK_MANIFEST_PATH': '../manifest.json'
+}
+app.config.update(params)
+
+webpack = Webpack()
+webpack.init_app(app)
+
 yird_settings = Settings()
 
 
@@ -45,4 +57,4 @@ def generate():
     return redirect(url_for('index'))
 
 if __name__ == "__main__":
-    app.run(debug=True)
+    app.run()

yird/static/css/style.css

@@ -1,122 +0,0 @@
-/* global */
-
-* {
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-}
-
-ul {
-	list-style: none;
-}
-
-a {
-	text-decoration: none;
-}
-
-.heading {
-	border-bottom: 1px solid #000000;
-	font-size: 24px;
-	margin-bottom: 15px;
-}
-
-/* layout */
-
-.container {
-  display: flex;
-}
-
-.main {
-	display: flex;
-	flex: 1;
-	justify-content: center;
-	padding: 20px;
-}
-
-.main__container {
-	width: 768px;
-}
-
-/* sidebar */
-.sidebar {
-  background: #496893;
-	color: #ffffff;
-	min-height: 100vh;
-	padding: 20px 0;
-	width: 150px;
-}
-
-.sidebar__title {
-	color: #ffffff;
-	font-size: 24px;
-}
-
-.sidebar__title,
-.nav__item {
-	padding: 5px 10px;
-}
-
-.nav__item:hover {
-	background: #ffffff;
-}
-
-.nav__item:hover a {
-	color: #496893;
-}
-
-.nav__link {
-	color: white;
-}
-
-.nav__link:hover {
-	text-decoration: underline;
-}
-
-/* forms */
-
-.form__field {
-	display: flex;
-	flex-direction: column;
-	margin: 5px 0;
-	width: 100%;
-}
-
-.form__field,
-.form__label {
-	margin-bottom: 5px;
-}
-
-.form__date-field,
-.form__textarea,
-.form__text-field {
-	border: 1px solid #e8e8e8;
-	font-family: serif;
-	font-size: 16px;
-	padding: 5px;
-}
-
-.form__textarea {
-	resize: vertical;
-}
-
-.form__submit {
-	border: 1px solid #e8e8e8;
-	padding: 5px 10px;
-}
-
-/* post listing */
-.post-listing__item {
-	position: relative;
-}
-
-.post-listing__item--changed:before {
-	background-color: red;
-	border-radius: 50%;
-	content: '';
-	display: block;
-	height: 10px;
-	left: -15px;
-	position: absolute;
-	top: 3px;
-	width: 10px;
-}

yird/static/js/index.js

@@ -1,8 +0,0 @@
-// document.querySelector('[data-generate-button]').addEventListener('click',
-//   function (e) {
-//     var r = confirm('Are you sure? This will overwrite any existing content.');
-//     if (!r) {
-//       e.preventDefault();
-//     }
-//   }
-// );

yird/templates/layout.html.j2

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width">
-  <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static', filename='css/style.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename=asset_url_for('app_css.css')) }}">
   <title>My Website</title>
 </head>
 <body>
@@ -34,6 +34,6 @@
       </div>
     </main>
   </div>
-  <script src="{{ url_for('static', filename='js/index.js') }}"></script>
+  <script src="{{ url_for('static', filename=asset_url_for('app_js.js')) }}"></script>
 </body>
 </html>