added views using pug

index.js

@@ -1,13 +1,21 @@
 require('dotenv').config();
 const express = require('express');
+const path = require('path');
 const authConfig = require('./middleware/auth0');
 const routes = require('./routes');
 const app = express();
 
+// pug setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'pug');
+
+//setting up static files
+app.use(express.static(path.join(__dirname, 'public')));
+
 app.use(authConfig);
 app.use('/', routes);
 
 const PORT = process.env.PORT || 4000;
 app.listen(PORT, () => {
-  console.log('server is listing on port 400');
+  console.log('server is listing on port 4000');
 });

package.json

@@ -13,6 +13,7 @@
     "dotenv": "^9.0.2",
     "express": "^4.17.1",
     "express-openid-connect": "^2.4.0",
+    "newsapi": "^2.4.1",
     "pug": "^3.0.2"
   }
 }

public/styles.css

@@ -0,0 +1,198 @@
+@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap');
+
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Rubik', sans-serif;
+}
+
+html {
+  font-size: 10px;
+  color: #212223;
+}
+
+.navbar {
+  height: 10vh;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10rem;
+}
+
+.navbar .logo {
+  font-size: 2.4rem;
+  font-weight: 700;
+}
+.navbar .nav-links {
+  display: flex;
+  font-size: 1.7rem;
+  font-weight: normal;
+  align-items: center;
+}
+
+.navbar .nav-links .user {
+  margin-right: 4rem;
+  padding: 1rem 2rem;
+  border: 2px solid #222333;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.navbar .nav-links a {
+  text-decoration: none;
+}
+
+.navbar .nav-links .home {
+  color: #212223;
+  font-weight: 500;
+}
+
+.navbar .nav-links .login {
+  margin-left: 4rem;
+  padding: 1rem 4rem;
+  color: white;
+  background-image: linear-gradient(to right, #da626c 10%, #a84d9c);
+  border-radius: 2rem;
+  box-shadow: 0 1px 2px #4447;
+  border: none;
+}
+
+.home .hero {
+  padding: 2rem 20rem;
+  text-align: center;
+  background-color: #eaf3ff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 90vh;
+  position: relative;
+  overflow: hidden;
+}
+.home .hero > * {
+  z-index: 10;
+}
+
+.home .hero .heading {
+  font-size: 10rem;
+  font-weight: 700;
+}
+
+.home .hero .heading span {
+  font-size: 12rem;
+  color: transparent;
+  background-size: text;
+  background-clip: text;
+  -webkit-background-clip: text;
+}
+
+.home .hero .heading span:first-child {
+  background-color: #4d5eff;
+}
+
+.home .hero .heading span:last-child {
+  background-color: #7ca349;
+}
+
+.home .hero .cta {
+  margin-top: 5rem;
+}
+
+.home .hero .cta .explore {
+  padding: 2rem 10rem;
+  color: white;
+  font-size: 2rem;
+  border: none;
+  border-radius: 2rem;
+  font-weight: 500;
+  background-color: #0d4dad;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+}
+.home .hero .cta .explore:hover {
+  box-shadow: 0 2px 4px #5558;
+  transform: translateY(-3px);
+}
+
+.home .hero .cta .explore:focus {
+  transform: translateY(0);
+}
+
+.home .hero .bgImage {
+  width: 100%;
+  position: absolute;
+  bottom: -70%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 0;
+  opacity: 0.1;
+}
+
+/* news page */
+.news {
+  height: 90vh;
+  background-color: #f1f7fd;
+  padding: 4rem 10rem;
+}
+
+.news .heading {
+  text-transform: capitalize;
+  font-size: 3rem;
+  font-weight: 500;
+  padding: 0.7rem 1rem;
+  border-bottom: 3px solid #2b6bcad0;
+}
+
+.news .categories {
+  padding: 4rem 0;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 1rem;
+}
+
+.news .article {
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.news .article .article-img {
+  margin-bottom: 2rem;
+}
+
+.news .article .article-img img {
+  border-radius: 50%;
+  width: 200px;
+  height: 200px;
+}
+
+.news .article .article-title {
+  position: relative;
+  z-index: 0;
+  padding: 2px 1rem;
+}
+.news .article .article-title h4 {
+  font-size: 2.4rem;
+  font-weight: 400;
+  z-index: 20;
+  position: relative;
+}
+.news .article .article-title::before {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: #a3d9fd;
+  z-index: 0;
+  transform: skewY(-5deg);
+}

routes/index.js

@@ -1,15 +1,49 @@
 const express = require('express');
 const Router = express.Router();
 const { requiresAuth } = require('express-openid-connect');
+const NewsApi = require('newsapi');
+
+const newsapi = new NewsApi(process.env.NEWS_API_KEY);
 
 Router.get('/', (req, res) => {
-  res.send(req.oidc.isAuthenticated() ? 'Logged in' : 'Logged out');
+  const isAuthenticated = req.oidc.isAuthenticated();
+  if (isAuthenticated) {
+    res.render('home', {
+      user: req.oidc.user,
+      isAuthenticated: true,
+    });
+    return;
+  }
+  res.render('home', { isAuthenticated: false });
 });
 
 Router.get('/profile', requiresAuth(), (req, res) => {
   const data = req.oidc.user;
-  console.log(data);
   res.send(JSON.stringify(data));
 });
 
+Router.get('/news', requiresAuth(), async (req, res) => {
+  res.status(200).render('categories', {
+    isAuthenticated: req.oidc.isAuthenticated(),
+    user: req.oidc.user,
+  });
+});
+
+Router.get('/news/:category', requiresAuth(), async (req, res) => {
+  try {
+    const id = req.params.category;
+    const response = await newsapi.v2.sources({
+      category: id,
+      language: 'en',
+      country: 'us',
+    });
+    res.status(200).send(JSON.stringify(response));
+  } catch (error) {
+    if (error) {
+      console.log(error);
+      res.status(400).send('News api request failed');
+    }
+  }
+});
+
 module.exports = Router;

views/categories.pug

@@ -0,0 +1,19 @@
+extends layout 
+
+mixin article(title, img, href)
+  .article
+    a.article-img(href= href) 
+        img(src= img, alt="article preview")
+    .article-title
+        h4= title
+
+block content
+        include components/navbar.pug
+        .news  
+            span.heading All News Categories
+            .categories 
+                +article("Sports", "https://images.unsplash.com/photo-1461897104016-0b3b00cc81ee?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mzd8fHNwb3J0fGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", "/news/sports")
+                +article("Technology", "https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8dGVjaG5vbG9neXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", "/news/technology")
+                +article("Business", "https://images.unsplash.com/photo-1444653614773-995cb1ef9efa?ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8YnVzaW5lc3N8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", "/news/business")
+                +article("Politics", "https://images.unsplash.com/photo-1529107386315-e1a2ed48a620?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cG9saXRpY3N8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", "/news/politics")
+                +article("Entertainment", "https://images.unsplash.com/photo-1616469829941-c7200edec809?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjN8fGVudGVydGFpbm1lbnR8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", "/news/entertainment")

views/components/navbar.pug

@@ -0,0 +1,7 @@
+.navbar 
+    .logo Node0Auth 
+    .nav-links
+        p(class=isAuthenticated ? "user" : "") #{user && user.nickname}
+        a.home(href="/") Home 
+        a.login(href=isAuthenticated ? "/logout" : '/login') #{isAuthenticated ? 'Logout' : 'Login' }
+

views/home.pug

@@ -0,0 +1,13 @@
+extends layout
+
+
+block content
+    .home 
+        include components/navbar
+        .hero 
+            h1.heading!= 'The <span>Node</span> Application for the best <span>News</span>'
+            .cta 
+                a.explore(href="/news") Explore News
+            img.bgImage(src="/newspaper.svg", alt="newspaper")
+
+

views/layout.pug

@@ -0,0 +1,10 @@
+doctype html
+html(lang="en")
+    head
+        meta(charset="UTF-8")
+        meta(http-equiv="X-UA-Compatible", content="IE=edge")
+        meta(name="viewport", content="width=device-width, initial-scale=1.0")
+        title Node Auth0 App
+        link(rel="stylesheet", href="/styles.css")
+    body 
+    block content