XPower UI: /home page

app.ts

@@ -9,13 +9,14 @@ import dotenv from 'dotenv';
 dotenv.config();
 
 // import routes
-import spa from './routes/spa';
 import error from './routes/error';
+import home from './routes/home';
+import ipfs from './routes/ipfs';
 import migrate from './routes/migrate';
 import nfts from './routes/nfts';
 import ppts from './routes/ppts';
-import ipfs from './routes/ipfs';
 import robots from './routes/robots';
+import spa from './routes/spa';
 
 // register view engine for pigs
 import { Pig } from './source/engines';
@@ -40,6 +41,7 @@ app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
 
 // register views
+app.use('/', home);
 app.use('/', spa);
 app.use('/migrate', migrate);
 app.use('/nfts', nfts);

routes/home.test.ts

@@ -0,0 +1,39 @@
+import request from 'supertest';
+import app from '../app';
+
+describe('GET /', () => {
+    let get: request.Test;
+    beforeEach(() => {
+        get = request(app).get('/');
+    });
+    it('should return w/an HTTP code = 302 Found', async () => {
+        await get.expect(302);
+    });
+});
+describe('GET /*/manifest.json', () => {
+    let get: request.Test;
+    beforeEach(() => {
+        get = request(app).get('/home/manifest.json');
+    });
+    it('should return w/an HTTP code = 302 Found', async () => {
+        await get.expect(302);
+    });
+});
+describe('GET /home', () => {
+    let get: request.Test;
+    beforeEach(() => {
+        get = request(app).get('/home');
+    });
+    it('should return w/an HTTP code = 200 OK', async () => {
+        await get.expect(200);
+    });
+    it('should return w/a Content-Type ~ html', async () => {
+        await get.expect('Content-Type', /html/)
+    });
+    it('should return w/a Content-Length > 0', async () => {
+        await get.expect((res) => {
+            const length = BigInt(res.headers['content-length']);
+            expect(length).toBeGreaterThan(0);
+        });
+    });
+});

routes/home.ts

@@ -0,0 +1,20 @@
+import { Router } from 'express';
+import { env_of } from './functions';
+const router = Router();
+
+/** REDIRECT to manifest.json. */
+router.get(/\/[^/]+\/manifest\.json$/, (req, res) => {
+  res.redirect('/manifest.json');
+});
+/** REDIRECT to home page. */
+router.get('/', (req, res) => {
+  res.redirect('/home');
+});
+/** GET home page. */
+router.get('/home', (req, res) => {
+  res.render('home/home.pig', {
+    DESCRIPTION: 'Mine & Mint Proof-of-Work XPower Tokens',
+    TITLE: 'XPower', ...env_of(req),
+  });
+});
+export default router;

routes/spa.test.ts

@@ -1,24 +1,6 @@
 import request from 'supertest';
 import app from '../app';
 
-describe('GET /', () => {
-    let get: request.Test;
-    beforeEach(() => {
-        get = request(app).get('/');
-    });
-    it('should return w/an HTTP code = 302 Found', async () => {
-        await get.expect(302);
-    });
-});
-describe('GET /*/manifest.json', () => {
-    let get: request.Test;
-    beforeEach(() => {
-        get = request(app).get('/mine/manifest.json');
-    });
-    it('should return w/an HTTP code = 302 Found', async () => {
-        await get.expect(302);
-    });
-});
 describe('GET /mine', () => {
     let get: request.Test;
     beforeEach(() => {

routes/spa.ts

@@ -9,19 +9,11 @@ import { join, sep } from 'path';
 function routes(
   spa_env: Record<string, string>
 ) {
-  /** REDIRECT to manifest.json. */
-  router.get(/\/[^/]+\/manifest\.json$/, (req, res) => {
-    res.redirect('/manifest.json');
-  });
-  /** REDIRECT to home page. */
-  router.get('/', (req, res) => {
-    res.redirect('/mine');
-  });
   /** GET mine page. */
   router.get('/mine', (req, res) => {
     res.render('mine/mine.pig', {
       DESCRIPTION: 'Mine & Mint Proof-of-Work XPower Tokens',
-      TITLE: 'XPower', ...env_of_mine(req), ...spa_env,
+      TITLE: 'XPower: Mine', ...env_of_mine(req), ...spa_env,
     });
   });
   /** GET nfts page. */

views/home/home.pug

@@ -0,0 +1,13 @@
+extends ../app.pug
+
+block styles
+  include ../theme/theme.pug
+
+block header
+  include ../header/header.pug
+
+block content
+  content
+
+block footer
+  include ../footer/footer.pug

views/home/home.scss

@@ -0,0 +1 @@
+@import "../app.scss";

views/home/home.tsx

@@ -0,0 +1 @@
+import './home.scss';

webpack.config.js

@@ -18,6 +18,14 @@ const configuration = ({
         react: 'React',
     },
     entry: {
+        home: {
+            import: [
+                './library/index.ts',
+                './views/header/header.tsx',
+                './views/home/home.tsx',
+                './views/footer/footer.tsx',
+            ],
+        },
         spa: {
             import: [
                 './library/index.ts',
@@ -106,6 +114,14 @@ const configuration = ({
             minify: false, inject: 'body',
             chunks: ['migrate']
         }),
+        new HTMLWebpackPlugin({
+            templateContent: pug.renderFile('./views/home/home.pug', {
+                ...env.default, filters, mode
+            }),
+            filename: '../views/home/home.pig',
+            minify: false, inject: 'body',
+            chunks: ['home']
+        }),
         new HTMLWebpackPlugin({
             templateContent: pug.renderFile('./views/mine/mine.pug', {
                 ...env.default, filters, mode