add support for analytics

app.js

@@ -1,43 +1,106 @@
 const express = require('express');
 const path = require('path');
+const mysql = require('mysql2');
+const fs = require('fs');
+require('dotenv').config();
 
 const app = express();
-
 app.set('view engine', 'ejs');
-
 app.set('views', path.join(__dirname, 'views'));
-
 app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.json());
 
-app.get('/', (req, res) => {
+const db = mysql.createConnection({
-    res.render('index', { req: req });
+    host: process.env.DB_HOST,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASSWORD,
+    database: process.env.DB_NAME,
 });
 
-app.get('/about', (req, res) => {
+const dbInit = () => {
-    res.render('about', { req: req });
+    if (!fs.existsSync('.db_init')) {
+        console.log('.db_init not found, initializing db...');
+
+        const createVT = `
+            CREATE TABLE page_views (
+                page VARCHAR(255) PRIMARY KEY,
+                views INT DEFAULT 0
+            )`;
+
+        db.query(createVT, (error) => {
+            if (error) throw error;
+            console.log('Views table created successfully.');
+            insertPages();
+            fs.writeFileSync('.db_init', 'complete');
         });
 
-app.get('/contact', (req, res) => {
+        db.query(`SHOW TABLES LIKE 'page_views'`, (err, results) => {
-    res.render('contact', { req: req });
+            if (err) throw err;
+
+            if (results.length === 0) {
+                const createVT = `
+                    CREATE TABLE page_views (
+                        page VARCHAR(255) PRIMARY KEY,
+                        views INT DEFAULT 0
+                    )`;
+
+                db.query(createVT, (error) => {
+                    if (error) throw error;
+                    console.log('Views table created successfully.');
+                    insertPages();
+                    fs.writeFileSync('.db_init', 'complete');
+                });
+            } else {
+                console.log('Views table already exists, skipping.');
+                insertPages();
+            }
+        });
+    } else {
+        console.log('.db_init file found, skipping database initialization.');
+    }
+};
+
+const insertPages = () => {
+    const pages = ['/', '/about', '/contact', '/verify', '/status', '/design', '/projects'];
+    pages.forEach(page => {
+        const sql = `INSERT IGNORE INTO page_views (page, views) VALUES (?, 0)`;
+        db.query(sql, [page], (error) => {
+            if (error) throw error;
+        });
+    });
+};
+
+db.connect((err) => {
+    if (err) throw err;
+    console.log('Connected to database.');
+    dbInit();
 });
 
-app.get('/verify', (req, res) => {
+app.post('/api/log-view', (req, res) => {
-    res.render('verify', { req: req });
+    const { page } = req.body;
+    const sql = `UPDATE page_views SET views = views + 1 WHERE page = ?`;
+    db.query(sql, [page], (error) => {
+        if (error) return res.status(500).json({ error });
+
+        const selectSql = `SELECT views FROM page_views WHERE page = ?`;
+        db.query(selectSql, [page], (error, results) => {
+            if (error) return res.status(500).json({ error });
+            res.json({ views: results[0].views });
+        });
+    });
 });
 
-app.get('/status', (req, res) => {
+const routes = ['/', '/about', '/contact', '/verify', '/status', '/design', '/projects'];
-    res.render('status', { req: req });
+routes.forEach(route => {
+    app.get(route, (req, res) => {
+        res.render(route === '/' ? 'index' : route.slice(1), { req });
     });
-
-app.get('/design', (req, res) => {
-    res.render('design', { req: req });
-});
-
-app.get('/projects', (req, res) => {
-    res.render('projects', { req: req });
 });
 
 const PORT = process.env.PORT || 3000;
 app.listen(PORT, () => {
+    const now = new Date();
+    const fT = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
+    console.log(`Running at: ${fT}`);
     console.log(`Server running on http://localhost:${PORT}`);
 });

views/about.ejs

@@ -69,5 +69,8 @@
 
     <p class="text-slate-300 mt-4">You can learn more about my opinions on cloud platforms <a class="underline" href="/cloud">on this page</a>.</p>
 </div>
+<div class="mt-3">
+    <%- include('shards/views.ejs') %>
+</div>
 <script src="js/main.js"></script>
 <%- include('shards/footer.ejs') %>

views/contact.ejs

@@ -44,6 +44,8 @@
         </li>
     </ul>
 </div>
-
+<div class="mt-3">
+    <%- include('shards/views.ejs') %>
+</div>
 <script src="js/main.js"></script>
 <%- include('shards/footer.ejs') %>

views/index.ejs

@@ -47,7 +47,7 @@
         <p class="text-slate-300 mt-3">Some of my favorite artists include tobi lou, Skizzy Mars, and Kali Uchis. Some of my classics are Mike Stud (before his name change to "mike."), Skizzy Mars, tobi lou, The Neighbourhood, and Ryan Caraveo.</p>
     </div>
 </div>
-
+<%- include('shards/views.ejs') %>
 <script src="js/main.js"></script>
 <script src="js/music.js"></script>
 <%- include('shards/footer.ejs') %>

views/projects.ejs

@@ -29,5 +29,8 @@
     <h3 class="text-2xl font-bold mb-4 mt-4 text-white">Finished projects</h3>
     <p class="text-slate-300 mb-4">I currently have only one public project which is in finished state. It's my old website, which is now being hosted at <a class="underline" href="https://old.aidxn.fun/">old.aidxn.fun</a>. It features a 2000s design and flashy graphics!</p>
 </div>
+<div class="mt-3">
+    <%- include('shards/views.ejs') %>
+</div>
 <script src="js/main.js"></script>
 <%- include('shards/footer.ejs') %>

views/status.ejs

@@ -28,7 +28,9 @@
     <p class="text-slate-300 mb-4"><span class="text-gray-500 font-bold" id="status1">[UNKNOWN - LOADING ms]</span> kantor.aidxn.fun (Oracle Cloud - Germany - backend server)</p>
     <p class="text-slate-300"><span class="text-gray-500 font-bold" id="api">[UNKNOWN - LOADING ms]</span> api.aidxn.fun (Oracle Cloud - Germany - backend server)</p>
 </div>
-
+<div class="mt-3">
+    <%- include('shards/views.ejs') %>
+</div>
 <script src="js/main.js"></script>
 <script src="js/status.js"></script>
 <%- include('shards/footer.ejs') %>

views/verify.ejs

@@ -26,6 +26,8 @@
     <h3 class="text-2xl font-bold mb-4 text-white">Check Message</h3>
     <p class="text-slate-300 font-bold">THIS FORM IS NOT CURRENTLY AVAILABLE</p>
 </div>
-
+<div class="mt-3">
+    <%- include('shards/views.ejs') %>
+</div>
 <script src="js/main.js"></script>
 <%- include('shards/footer.ejs') %>