Merge branch 'master' of https://github.com/The-Mu-Foundation/Mutorials

.github/workflows/new-ui_test-instance-0(branch-1).yml

@@ -0,0 +1,62 @@
+# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
+# More GitHub Actions for Azure: https://github.com/Azure/actions
+
+name: Build and deploy Node.js app to Azure Web App - test-instance-0
+
+on:
+  push:
+    branches:
+      - new-ui
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js version
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: Zip artifact for deployment
+        run: zip release.zip ./* -r
+
+      - name: Upload artifact for deployment job
+        uses: actions/upload-artifact@v3
+        with:
+          name: node-app
+          path: release.zip
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: 'branch-1'
+      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
+
+    steps:
+      - name: Download artifact from build job
+        uses: actions/download-artifact@v3
+        with:
+          name: node-app
+
+      - name: Unzip artifact for deployment
+        run: unzip release.zip
+
+      - name: npm install, build, and test
+        run: |
+          npm install
+          npm run build --if-present
+          npm run test --if-present
+
+      - name: 'Deploy to Azure Web App'
+        id: deploy-to-webapp
+        uses: azure/webapps-deploy@v2
+        with:
+          app-name: 'test-instance-0'
+          slot-name: 'branch-1'
+          package: .
+          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_89F4CDC549834A0ABF1A966BA30C2DBC }}

.gitignore

@@ -6,6 +6,7 @@
 CODEOWNERS
 **/node_modules
 .vimspector.json
+.env
 
 /.vs
 

index.js

@@ -11,6 +11,14 @@ const { initializeAnalytics } = require('./analytics');
 
 console.log('Setting up Express server...');
 
+try {
+  require('dotenv').config();
+} catch {
+  console.log(
+    'Not in development environment. Skipping loading from .env file.'
+  );
+}
+
 // START EXPRESS SERVER
 const app = express();
 const PORT = process.env.PORT || 3000;

package.json

@@ -4,9 +4,9 @@
   "scripts": {
     "start": "node index.js",
     "dev": "run-p dev:*",
-    "dev:sync": "browser-sync start --no-notify --no-open --proxy=localhost:3000 --port=3001 --files \"**/*\"",
+    "dev:sync": "browser-sync start --no-notify --no-open --proxy=localhost:3000 --port=3001 --files=\"**/*\" --reload-delay=100",
     "dev:express": "nodemon index.js",
-    "dev:css": "postcss public/css/tailwind.css -o public/css/style.css --watch",
+    "dev:css": "tailwindcss -i public/css/tailwind.css -o public/css/style.css --watch",
     "build": "postcss public/css/tailwind.css -o public/css/style.css",
     "lint": "eslint . --ext .js"
   },
@@ -58,6 +58,7 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.4",
+    "dotenv": "^16.3.1",
     "eslint": "^7.28.0",
     "npm-run-all": "^4.1.5",
     "postcss-import": "^15.1.0"

public/css/base.css

@@ -12,7 +12,7 @@
     line-height: 1;
   }
   h3 {
-    font-size: 1.5em;
+    font-size: 1em;
     line-height: 1.2;
   }
 
@@ -22,4 +22,8 @@
       opacity-100 hover:underline
       transition-opacity;
   }
+
+  nav li {
+    @apply list-none;
+  }
 }

public/css/components/button.css

@@ -1,8 +1,9 @@
 .btn {
-  @apply px-4 py-2
+  @apply flex items-center justify-center
+    px-4 py-2
     rounded
     font-medium
-    shadow-none hover:shadow-md
+    shadow-none hover:shadow
     transition
     whitespace-nowrap
     cursor-pointer;
@@ -15,6 +16,7 @@
 
 .btn-outline {
   @apply bg-white
+    box-border
     border-2 border-neutral-200
     hover:bg-neutral-50;
 }

public/css/components/dropdown-menu.css

@@ -0,0 +1,22 @@
+.dropdown-toggle {
+  @apply flex items-center
+    w-full
+    font-medium
+    hover:opacity-50 transition-opacity
+    rounded-lg cursor-pointer;
+}
+
+.dropdown-menu {
+  @apply hidden z-20;
+  @apply relative bg-white divide-y
+    text-base text-black border shadow-lg rounded;
+}
+.dropdown-menu ul {
+  @apply py-1;
+}
+.dropdown-menu ul li {
+  @apply hover:bg-gray-100 transition-colors;
+}
+.dropdown-menu ul li a {
+  @apply block w-full px-4 py-[0.4rem];
+}

public/css/components/input.css

@@ -18,6 +18,7 @@ input[type='number'] {
     border-2 border-neutral-200
     -outline-offset-2
     focus:outline
+    transition
     rounded
     outline-blue-500 !important;
 }

public/css/components/table.css

@@ -0,0 +1,14 @@
+/* Let's make tables look nice */
+
+table td,
+table th {
+  @apply px-6 py-4;
+}
+
+table thead {
+  @apply uppercase font-bold border-b text-left;
+}
+
+table tbody {
+  @apply divide-y;
+}

public/css/tailwind.css

@@ -3,6 +3,8 @@
 
 @import 'components/button.css';
 @import 'components/input.css';
+@import 'components/dropdown-menu.css';
+@import 'components/table.css';
 @import 'tailwindcss/components';
 
-@import 'tailwindcss/utilities';
+@import 'tailwindcss/utilities';

public/js/utils.js

@@ -0,0 +1 @@
+// const $ = document.querySelector.bind(document);

routes/public.js

@@ -21,23 +21,74 @@ const VIEWS = '../views/';
 
 module.exports = (app, mongo) => {
   // PUBLIC GET
-  // `username` is email
-  // `ign` is username
   app.get('/', expressLayouts, async (req, res) => {
+    // Site data
     const { questionCount, tagCount, usaboQuestionCount, totalSolves } =
       await getSiteData(User, Ques, SiteData);
 
+    // Daily question
+    const question = await getDailyQuestion(mongo.Daily, mongo.Ques);
+
+    // Leaderboard
+    let leaderboard = (
+      await mongo.User.find({
+        'stats.experience': { $gte: 10000 },
+      })
+        .sort({ 'stats.experience': -1 })
+        .limit(10)
+        .exec()
+    ).map((user) => {
+      return {
+        level: calculateLevel(user.stats.experience),
+        experience: user.stats.experience,
+        ign: user.ign,
+      };
+    });
+
     res.render(VIEWS + 'public/indexV2.ejs', {
+      user: req.user,
       layout: 'layouts/base.ejs',
       questionCount: questionCount + usaboQuestionCount,
       tagCount,
       totalSolves: Array.from(Object.values(totalSolves)).reduce(
-        (a, b) => (a + b ? b : 0), // Catch if b is NaN
+        (a, b) => a + (b || 0), // Catch if b is NaN
         0
       ),
+      question,
+      leaderboard,
     });
   });
 
+  app.get('/index2', async (req, res) => {
+    if (!req.isAuthenticated()) {
+      let siteData = await getSiteData(mongo.User, mongo.Ques, mongo.SiteData);
+      const question = await getDailyQuestion(mongo.Daily, mongo.Ques);
+
+      let experience = await mongo.User.find({
+        'stats.experience': { $gte: 10000 },
+      })
+        .sort({ 'stats.experience': -1 })
+        .limit(10)
+        .exec();
+
+      experience = experience.map((user) => {
+        return {
+          level: calculateLevel(user.stats.experience),
+          experience: user.stats.experience,
+          ign: user.ign,
+        };
+      });
+
+      res.render(VIEWS + 'public/index.ejs', {
+        siteStats: siteData,
+        question,
+        experience,
+      });
+    } else {
+      res.redirect('/homepage');
+    }
+  });
+
   app.get('/signin', expressLayouts, (req, res) => {
     if (!req.isAuthenticated()) {
       res.render(VIEWS + 'public/signinV2.ejs', {
@@ -62,28 +113,22 @@ module.exports = (app, mongo) => {
 
   app.get('/latexCompiler', (req, res) => {
     res.render(VIEWS + 'public/latexcompiler.ejs', {
+      user: req.user,
       pageName: 'LaTeX Compiler',
     });
   });
 
   app.get('/whoWeAre', expressLayouts, (req, res) => {
-    if (req.isAuthenticated()) {
-      res.render(VIEWS + 'public/teamV2', {
-        pageName: 'About Mutorials',
-        authenticated: true,
-        layout: 'layouts/base.ejs',
-      });
-    } else {
-      res.render(VIEWS + 'public/teamV2', {
-        pageName: 'About Mutorials',
-        authenticated: false,
-        layout: 'layouts/base.ejs',
-      });
-    }
+    res.render(VIEWS + 'public/teamV2', {
+      user: req.user,
+      pageName: 'About Mutorials',
+      layout: 'layouts/base.ejs',
+    });
   });
 
   app.get('/termsOfService', (req, res) => {
     res.render(VIEWS + 'public/termsOfService.ejs', {
+      user: req.user,
       pageName: 'Mutorials TOS',
     });
   });
@@ -146,13 +191,6 @@ module.exports = (app, mongo) => {
       );
       registerInputProblems1 = true;
     }
-    if (!req.body.agreeAge) {
-      req.flash(
-        'errorFlash',
-        'You must be at least 13 years old, or have permission from your parent, guardian, teacher, or school to use Mutorials.'
-      );
-      registerInputProblems1 = true;
-    }
 
     if (
       !/^(19|20)\d{2}$/.test(req.body.yob) ||