Redesign progress page with jvs' design

src/index.js

@@ -44,6 +44,24 @@ app.engine('handlebars', handlebars({
 				${htmlRight}
 			</div>
 			`;
+		},
+		customCheckbox(type) {
+			switch(type) {
+				case 'done':
+					return `
+						<div class="custom-checkbox done">
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
+						</div>
+					`;
+				case 'ongoing':
+					return `
+						<div class="custom-checkbox ongoing">
+							<div class="small-dot"></div>
+						</div>
+					`;
+				default:
+					return '<div class="custom-checkbox incomplete"></div>';
+			}
 		}
 	}
 }));

src/progress-lists.js

@@ -0,0 +1,13 @@
+
+const progressLists = require('../progress-lists.json');
+
+const statusPriorityOrder = ['done', 'ongoing', 'todo'];
+
+// Sort by status
+for(const list of progressLists) {
+	list.features = list.features.sort((a, b) => {
+		return statusPriorityOrder.indexOf(a.status) - statusPriorityOrder.indexOf(b.status);
+	});
+}
+
+module.exports = progressLists;

src/routers/home.js

@@ -2,7 +2,7 @@ const getLocale = require('../../util/getLocale');
 const { Router } = require('express');
 const router = new Router();
 
-const pgoressLists = require('../../progress-lists.json');
+const pgoressLists = require('../progress-lists');
 
 router.get('/', (req, res) => {
 	const tmpLocale = getLocale('US', 'en');

src/routers/progress.js

@@ -2,7 +2,7 @@ const getLocale = require('../../util/getLocale');
 const { Router } = require('express');
 const router = new Router();
 
-const progressLists = require('../../progress-lists.json');
+const progressLists = require('../progress-lists');
 
 router.get('/', (req, res) => {
 	const tmpLocale = getLocale('US', 'en');