backend refactor

Move some stuff around

progress-lists.json

@@ -1,67 +0,0 @@
-[
-	{
-		"title": "Juxtaposition",
-		"features": [
-			{
-				"name": "Fix fonts", 
-				"status": "done"
-			},
-			{
-				"name": "Guest Mode", 
-				"status": "done"
-			},
-			{
-				"name": "Communities Page", 
-				"status": "done"
-			},
-			{
-				"name": "Set-Up Page", 
-				"status": "done"
-			},
-			{
-				"name": "Posts", 
-				"status": "ongoing"
-			},
-			{
-				"name": "User Page", 
-				"status": "ongoing"
-			},
-			{
-				"name": "Community Page", 
-				"status": "ongoing"
-			},
-			{
-				"name": "Notifications", 
-				"status": "ongoing"
-			},
-			{
-				"name": "Miiverse Patch (applet)", 
-				"status": "ongoing"
-			},
-			{
-				"name": "Replies", 
-				"status": "ongoing"
-			},
-			{
-				"name": "Activity Feed", 
-				"status": "todo"
-			},
-			{
-				"name": "Fix browser History", 
-				"status": "todo"
-			},
-			{
-				"name": "Google Analytics(?)", 
-				"status": "todo"
-			},
-			{
-				"name": "Sub Communities", 
-				"status": "todo"
-			},
-			{
-				"name": "Miiverse Patch (games)", 
-				"status": "todo"
-			}
-		]
-	}
-]

public/assets/css/progress.css

@@ -0,0 +1,3 @@
+/*
+MOVE PROGRESS CSS HERE
+*/

public/assets/js/progress-charts.js

@@ -0,0 +1,45 @@
+/* eslint-disable no-undef */
+document.querySelectorAll('.feature-list-wrapper').forEach(progressListElement => {
+
+	// Find and generate all relevant data
+	const allFeatureNodes = progressListElement.querySelectorAll('.feature');
+	const allDoneFeatureNodes = progressListElement.querySelectorAll('.feature .done');
+
+	const progressPercentage = Math.round(Math.min((allDoneFeatureNodes.length / allFeatureNodes.length) * 100, 100));
+	const remainingPercentage = 100 - progressPercentage;
+
+	// Set inner paragraph
+	progressListElement.querySelectorAll('.percentage-label').forEach(p => {
+		p.innerText = progressPercentage.toString().padStart(2, '0') + '%';
+	});
+
+	// Create chart
+	const data = [progressPercentage, remainingPercentage];
+	Chart.defaults.plugins.legend = {
+		display: false
+	};
+	Chart.defaults.plugins.tooltip = {
+		enabled: false
+	};
+
+	new Chart(progressListElement.querySelector('canvas'), {
+		type: 'doughnut',
+		data: {
+			labels: ['Done', 'Todo'],
+			datasets: [
+				{
+					data,
+					backgroundColor: ['#9D6FF3', '#4C5174']
+				}
+			]
+		},
+		options: {
+			elements: {
+				arc: {
+					borderWidth: 0
+				}
+			},
+			cutout: '70%'
+		}
+	});
+});

public/charts.js

@@ -1,49 +0,0 @@
-/* eslint-disable no-undef */
-function loadAllCharts() {
-	document.querySelectorAll('.feature-list-wrapper').forEach(wrapper => {
-		// Find and generate all relevant data
-		const allFeatureNodes = wrapper.querySelectorAll('.feature');
-		const allDoneFeatureNodes = wrapper.querySelectorAll('.feature .done');
-		
-		const progressPercentage = Math.round(Math.min((allDoneFeatureNodes.length / allFeatureNodes.length) * 100, 100));
-		const remainingPercentage = 100 - progressPercentage;
-
-		// Set inner paragraph
-		wrapper.querySelectorAll('.percentage-label').forEach(p => {
-			p.innerText = progressPercentage.toString().padStart(2, '0') + '%';
-		});
-
-		// Create chart
-		const data = [progressPercentage, remainingPercentage];
-		Chart.defaults.plugins.legend = {
-			display: false
-		};
-		Chart.defaults.plugins.tooltip = {
-			enabled: false
-		};
-
-		const isInBrightCard = !!wrapper.closest('.right.sect');
-
-		new Chart(wrapper.querySelector('canvas'), {
-			type: 'doughnut',
-			data: {
-				labels: ['Done', 'Todo'],
-				datasets: [
-					{
-						data,
-						backgroundColor: isInBrightCard ? ['white', 'rgba(195, 178, 227, 0.5)'] : ['#9D6FF3', '#4C5174']
-					}
-				]
-			},
-			options: {
-				elements: {
-					arc: {
-						borderWidth: 0
-					}
-				},
-				cutout: '70%'
-			}
-		});
-	});
-}
-loadAllCharts();

public/site.webmanifest

@@ -3,12 +3,12 @@
     "short_name": "Pretendo",
     "icons": [
         {
-            "src": "/assets/images/android-chrome-192x192.png",
+            "src": "/assets/icons/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/assets/images/android-chrome-384x384.png",
+            "src": "/assets/icons/android-chrome-384x384.png",
             "sizes": "384x384",
             "type": "image/png"
         }

src/logger.js

@@ -1,7 +1,7 @@
 const fs = require('fs-extra');
 require('colors');
 
-const root = __dirname;
+const root = __dirname + '/../';
 fs.ensureDirSync(`${root}/logs`);
 
 const streams = {

src/progress-lists.js

@@ -1,13 +0,0 @@
-
-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,14 +2,16 @@ const getLocale = require('../../util/getLocale');
 const { Router } = require('express');
 const router = new Router();
 
-const pgoressLists = require('../progress-lists');
+const { getTrelloCache } = require('../../util/trello');
 
-router.get('/', (req, res) => {
+router.get('/', async (request, response) => {
 	const tmpLocale = getLocale('US', 'en');
-	res.render('home', {
+	const cache = await getTrelloCache();
+
+	response.render('home', {
 		layout: 'main',
 		locale: tmpLocale,
-		featuredFeatureList: pgoressLists[0]
+		featuredFeatureList: cache.sections[0]
 	});
 });
 

util/trello.js

@@ -31,6 +31,7 @@ async function updateTrelloCache() {
 	for (const board of boards) {
 		const meta = {
 			title: '',
+			percentage_complete: 0,
 			progress: {
 				not_started: [],
 				started: [],

views/home.handlebars

@@ -30,7 +30,7 @@
 		</div>
 		<div class="hero-image">
 			<div class="light-purple-circle">
-				<img class="n2ds" src="n2ds.png">
+				<img class="n2ds" src="/assets/images/n2ds.png">
 				<div class="deco">
 					
 					<svg xmlns="http://www.w3.org/2000/svg" width="839.371" height="893.406" viewBox="0 0 839.371 893.406">

views/layouts/main.handlebars

@@ -8,10 +8,10 @@
 		<meta http-equiv="X-UA-Compatible" content="ie=edge">
 		<meta name="application-name" content="Pretendo">
 		<meta name="msapplication-TileColor" content="#673AB7">
-		<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
-		<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
-		<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
-		<link rel="manifest" href="/assets/images/site.webmanifest">
+		<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
+		<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
+		<link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png">
+		<link rel="manifest" href="/site.webmanifest">
 		<meta name="theme-color" content="#673db6">
 		<!-- open graph/embeds -->
 		<meta property="og:title" content="Pretendo Network">
@@ -25,20 +25,16 @@
 		<meta name="description" content="Pretendo is an open source Nintendo Network replacement that aims to build custom servers for the WiiU and 3DS family of consoles. Our goal is to preserve the online functionality of these consoles, to allow players to continue to play their favorite WiiU and 3DS games to their fullest capacity.">
 		<meta name="robots" content="index, follow">
 		<!-- favicon -->
-		<link rel="shortcut icon" href="/assets/images/favicon.ico"><title>Pretendo</title>
+		<link rel="shortcut icon" href="/assets/icons/favicon.ico"><title>Pretendo</title>
 		<!-- css files -->
-		<link rel="stylesheet" href="/main.css">
+		<link rel="stylesheet" href="/assets/css/main.css">
 		<!-- favicon -->
-		<link rel="shortcut icon" href="/assets/images/favicon.ico">
+		<link rel="shortcut icon" href="/assets/icons/favicon.ico">
 
 		<link rel="preconnect" href="https://fonts.gstatic.com">
 		<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
 	</head>
 	<body>
-		<div class="main-body">
-			{{{ body }}}
-		</div>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js"></script>
-		<script src="/charts.js"></script>
+		{{{ body }}}
 	</body>
 </html>

views/partials/progress-list.handlebars

@@ -2,7 +2,7 @@
 	<div class="feature-list-top">
 		<div>
 			<div class="feature-progress-chart">
-				<p class="percentage-label"></p>
+				<p class="percentage-label">{{ data.percent }}</p>
 				<canvas></canvas>
 			</div>
 		</div>

views/progress.handlebars

@@ -20,4 +20,7 @@
 
 	{{> footer }}
 
-</div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js"></script>
+<script src="/assets/js/progress-charts.js"></script>