upgrade version 4 (#130)

frontend/.browserslistrc → .browserslistrc

@@ -1,8 +1,9 @@
 [production staging]
 >5%
 last 2 versions
+not ie > 0
+not ie_mob > 0
 Firefox ESR
-not ie < 11
 
 [development]
 last 1 chrome version

.env/.dev-sample

@@ -1,6 +1,6 @@
 SQL_ENGINE=django.db.backends.postgresql
-SQL_DATABASE=wagtail_bootstrap_blog
-SQL_USER=wagtail_bootstrap_blog
-SQL_PASSWORD=wagtail_bootstrap_blog
+SQL_DATABASE=wagtail_blog
+SQL_USER=wagtail_blog
+SQL_PASSWORD=wagtail_blog
 SQL_HOST=db
 SQL_PORT=5432

.env/.prod-sample

@@ -3,8 +3,8 @@ SECRET_KEY=dbaa1_i7%*3r9-=z-+_mz4r-!qeed@(-a_r(g@k8jo8y3r27%m
 DJANGO_ALLOWED_HOSTS=*
 
 SQL_ENGINE=django.db.backends.postgresql
-SQL_DATABASE=wagtail_bootstrap_blog
-SQL_USER=wagtail_bootstrap_blog
-SQL_PASSWORD=wagtail_bootstrap_blog
+SQL_DATABASE=wagtail_blog
+SQL_USER=wagtail_blog
+SQL_PASSWORD=wagtail_blog
 SQL_HOST=db
 SQL_PORT=5432

.eslintrc

@@ -0,0 +1,18 @@
+{
+  "parser": "@babel/eslint-parser",
+  "extends": [
+    "eslint:recommended"
+  ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 8,
+    "sourceType": "module",
+    "requireConfigFile": false
+  },
+  "rules": {
+    "semi": 2
+  }
+}

.nvmrc

@@ -0,0 +1 @@
+lts/gallium

.stylelintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "scss/at-import-partial-extension": null
+  }
+}

README.md

@@ -2,11 +2,11 @@
 
 This project is from my book [Build Blog With Wagtail CMS](https://leanpub.com/buildblogwithwagtailcms/)
 
-Other Wagtail Books Writeen by me
+Other books written by me
 
 * [The Definitive Guide to Next.js and Wagtail](https://leanpub.com/the-definitive-guide-to-nextjs-and-wagtail/)
 * [Build SPA with React and Wagtail](https://leanpub.com/react-wagtail)
-* [Build Blog with React (SSR) and Wagtail](https://leanpub.com/react-wagtail-ssr)
+* [The Definitive Guide to Hotwire and Django](https://leanpub.com/hotwire-django)
 
 ## Objective
 
@@ -15,8 +15,8 @@ This book will teach you how to build a modern blog with `Wagtail CMS`
 By the end of this course, you will be able to:
 
 1. Understand `Docker` and use `Docker Compose` to do development
+1. Use `Tailwind CSS` as style solution, and `Stimulus` as frontend solution.
 1. Create blog models to work with Wagtail.
-1. Import `Bootstrap` themes to the blog.
 1. Use `PDB` and `Django shell` to debug, test code and check data in terminal.
 1. Learn to use `RoutablePage` and add `Date` to the post url.
 1. Build `Pagination` component and correctly handle querystring.
@@ -25,30 +25,40 @@ By the end of this course, you will be able to:
 1. Build menu, meta tags, sitemap, robots.txt for better SEO.
 1. Build comment system based on `django-contrib-comments` which support `Generic Relations`
 1. Create Frontend project from `python-webpack-boilerplate` and load compiled CSS and JS in Django template.
-1. Learn SCSS and use it to customize style in quick way.
 1. Use `Tribute.js`, `Axios` to add `Mention` and `Emoji` support to the comment form.
-1. Learn `Async/Await`, `Promise` and the benefits.
 1. Deploy the production app to DigitalOcean
 
 ## Tech
 
-* Python 3.8
-* Django 3.2
-* Wagtail 2.14
-* Node.js 12
-* Webpack 5
-* Bootstrap 5.1
-* Tribute.js
-* Axios
+* Python 3.10
+* Django 4
+* Wagtail 4
+* Stimulus 3
+* Tailwind CSS 3
 
 ## How to run on local
 
-You need Docker and Docker Compose and you can install it here [Get Docker](https://docs.docker.com/get-docker/)
-
 ```bash
 $ git clone https://github.com/AccordBox/wagtail-bootstrap-blog
 $ cd wagtail-bootstrap-blog
-# build and lanch app
+```
+
+First, let's build frontend assets, please make sure `node` is available.
+
+```bash
+$ node -v
+
+# install dependency packages
+$ npm install
+
+# launch webpack dev server and keep it running
+$ npm run watch
+```
+
+You need Docker and Docker Compose and you can install it here [Get Docker](https://docs.docker.com/get-docker/)
+
+```bash
+# build and launch app
 $ docker-compose up --build
 ```
 
@@ -69,6 +79,6 @@ The demo is also online if you want to check.
 
 * [Wagtail Blog Demo](http://wagtail-blog.accordbox.com)
 
-## ScreenShot
+## Screenshot
 
-![](./misc/comment.gif)
+![](./misc/screenshot.png)