webpack update

@@ -118,5 +118,5 @@ dist
 
 package-lock.json
 /uploads
-static
+/assets
 build
\ No newline at end of file

+{
+    "ignore": ["webpack.config.js", "src/client/*", "assets/*"],
+    "exec": "babel-node src/init.js"
+}
\ No newline at end of file

@@ -3,7 +3,8 @@
   "version": "1.0.0",
   "description": "2021 OSS Project Using node!",
   "scripts": {
-    "dev:server": "nodemon --exec babel-node src/init"
+    "dev:server": "nodemon",
+    "dev:assets": "webpack"
   },
   "repository": {
     "type": "git",
@@ -29,8 +30,16 @@
     "pug": "^3.0.2"
   },
   "devDependencies": {
+    "babel-loader": "^8.2.2",
+    "css-loader": "^5.2.6",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "prettier": "^2.2.1"
+    "mini-css-extract-plugin": "^1.6.0",
+    "prettier": "^2.2.1",
+    "sass": "^1.34.0",
+    "sass-loader": "^11.1.1",
+    "style-loader": "^2.0.0",
+    "webpack": "^5.37.1",
+    "webpack-cli": "^4.7.0"
   }
 }

+import "../scss/styles.scss";
+
+console.log("it works");
\ No newline at end of file

+.footer {
+  margin: 50px 0;
+  padding-top: 50px;
+  border-top: 2px solid rgba(0, 0, 0, 0.2);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .footer__icon {
+    color: rgba(0, 0, 0, 0.3);
+    font-size: 40px;
+    margin-bottom: 20px;
+    margin-right: 10px;
+  }
+  .footer__text {
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 20px;
+    text-transform: uppercase;
+  }
+}

+header {
+  padding: 10px;
+  margin-bottom: 10px;
+  .header__wrapper {
+    padding: 5px 0px;
+    width: 100%;
+    margin: 0 auto;
+    max-width: 1200px;
+    display: flex;
+    justify-content: flex-end;
+
+    .header__column {
+      ul {
+        display: flex;
+        color: $blue;
+        font-weight: 700;
+        font-size: 20px;
+        text-transform: uppercase;
+        li:not(:last-child) {
+          margin-right: 15px;
+        }
+      }
+    }
+  }
+}

+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

+$blue: #0063b2;
+$skyblue: #9cc3d5;
+$space: 40px;

+.home {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .home-title {
+    margin: 40px 0px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    h2 {
+      font-size: 30px;
+      font-weight: 600;
+      text-transform: uppercase;
+      margin-bottom: 30px;
+    }
+    h1 {
+      font-size: 50px;
+      font-weight: 800;
+      text-transform: uppercase;
+    }
+  }
+  .home-quote {
+    width: 100%;
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
+      0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
+    h2 {
+      font-size: 30px;
+      font-family: "Pattaya", sans-serif;
+      margin: 10px 0px;
+    }
+    h3 {
+      font-size: 25px;
+      opacity: 0.5;
+      font-family: "Pattaya", sans-serif;
+    }
+  }
+  .home-link {
+    margin-top: 50px;
+    font-size: 30px;
+    font-weight: 700;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    a {
+      color: $blue;
+      &:not(:last-child) {
+        margin-right: 50px;
+      }
+    }
+  }
+  .gotoTrend {
+    margin-top: 50px;
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
+      0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
+    h2 {
+      color: #fb8500;
+      font-size: 25px;
+      font-weight: 700;
+      margin-bottom: 20px;
+    }
+    .gotoTrend-repos {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      a {
+        font-size: 18px;
+        margin: 10px 0px;
+      }
+    }
+  }
+}

+// Config
+@import url("https://fonts.googleapis.com/css2?family=Pattaya&display=swap");
+@import "./config/_variables.scss";
+@import "./config/_reset.scss";
+
+// Components
+@import "./components/header.scss";
+@import "./components/footer.scss";
+// Screens
+@import "./screens/home.scss";
+
+// Defaults
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  main {
+    padding: 0px $space;
+    max-width: 1200px;
+    width: 100%;
+    margin: 0 auto;
+  }
+}

@@ -70,19 +70,23 @@ export const handleHome = async (req, res) => {
 };
 
 export const getUserDetail = async (req, res) => {
-  const quote = await getQuote();
-  const id = req.params.id;
-  const user = await User.findById(id);
-  console.log(user.tech);
-
-  res.render("userDetail", {
-    pagetTitle: "User Detail",
-    quote: quote.quote,
-    author: quote.author,
-    user,
-  });
+  try{
+    const id = req.params.id;
+    const quote = await getQuote();
+    const user = await User.findById(id);
+    res.render("userDetail", {
+      pagetTitle: "User Detail",
+      quote: quote.quote,
+      author: quote.author,
+      user,
+    });
+  } catch(error){
+    console.log(error);
+    res.redirect("/");
+  }
 };
 
+
 export const getEditProfile = async (req, res) => {
   const {
     user: { _id: id },
@@ -153,6 +157,7 @@ export const githubLoginCallback = async (_, __, profile, done) => {
       id: githubId,
       login: githubName,
       avatar_url: avatarUrl,
+      html_url: githubUrl,
       name,
       email,
     },
@@ -169,6 +174,7 @@ export const githubLoginCallback = async (_, __, profile, done) => {
         githubId,
         githubName,
         avatarUrl,
+        githubUrl,
         name,
         email,
       });

@@ -33,6 +33,7 @@ app.use(passport.session());
 
 app.use(localsMiddleware);
 app.use("/uploads", express.static("uploads"));
+app.use("/static", express.static("assets"));
 app.use("/", globalRouter);
 app.use("/users", userRouter);
 

@@ -3,7 +3,7 @@ extends layouts/main
 block content
     .form-container
         form(action="/users/edit-profile", method="POST", enctype="multipart/form-data")
-            img(src=`/${loggedUser.avatarUrl}`, width="100", height="120") 
+            img(src=`/${loggedUser.avatarUrl}`)
             .fileUpload 
                 label(for="photo") Photo 
                 input(type="file", id="photo", name="photo", accept="image/*")

@@ -4,25 +4,24 @@ block content
     .home
         .home-title 
             h2 Develop your value 
-            h1 -Developer Profile-
+            h1 Developer Profile
+        .home-quote
             h2=quote 
             h3=author
-        
-        if !loggedUser
-            .home-link
+        .home-link
+            if !loggedUser
                 a(href="/join") Join
-                |#{' '}
                 a(href="/login") Login
-        else 
-            a(href=`/users/${loggedUser._id}`) My profile
+            else 
+                a(href=`/users/${loggedUser._id}`) My profile
             
-        .gotoTrend(style="border: 1px solid blue;") 
-            p(style='color: orange;') Trending Repositories: 
-            br
-            a(href=Url0, style={color:'grey'}) 
-                p=name0+": "+description0+" - "+stars0+" stars"
-            a(href=Url1, style={color:'grey'}) 
-                p=name1+": "+description1+" - "+stars1+" stars"
-            a(href=Url2, style={color:'grey'}) 
-                p=name2+": "+description2+" - "+stars2+" stars"
+        .gotoTrend
+            h2 Today's Trending Repositories
+            .gotoTrend-repos
+                a(href=Url0) 
+                    p=name0+": "+description0+" - "+stars0+" stars"
+                a(href=Url1) 
+                    p=name1+": "+description1+" - "+stars1+" stars"
+                a(href=Url2) 
+                    p=name2+": "+description2+" - "+stars2+" stars"
 

@@ -4,11 +4,11 @@ html
         link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.15.2/css/all.css", integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu", crossorigin="anonymous")
         meta(charset="UTF-8")   
         title #{pageTitle} | #{siteName}
-        link(rel="stylesheet", href="https://unpkg.com/mvp.css")
+        link(rel="stylesheet", href="/static/css/styles.css")
     body
         include ../partials/header 
         main 
             block content
         include ../partials/footer
-        //- script(src="/static/main.js")
+        script(src="/static/js/main.js")
 

 footer.footer
-    hr
     .footer__icon 
         i.fas.fa-code-branch
     span.footer__text © dev-profile #{new Date().getFullYear()} 
\ No newline at end of file

@@ -2,18 +2,16 @@ header.header
     .header__wrapper 
         .header__column 
             ul
+                li 
+                    a(href="/") Home 
                 if !loggedUser
                     li 
-                        a(href="/") Home 
-                    li 
                         a(href="/join") Join 
                     li 
                         a(href="/login") Log In
 
                 else
                     li 
-                        a(href="/") Home
-                    li 
                         a(href=`/users/${loggedUser._id}`) My Profile 
                     li 
                         a(href="/users/edit-profile") Edit Profile

 extends layouts/main
 
 block content
-    h1 User Detail
     .user-quote
         h2=quote 
         h3=author
     hr
     .user-profile 
         .user-profile__column 
-            img(src="#")
+            img(src=`/${user.avatarUrl}`)
             .user-profile__link 
-                a(href="#") Github
-                |#{'  '}
-                a(href="#") Blog
+                a(href=user.githubUrl target="_blank") Github
+                a(href=`//${user.blogUrl}` target="_blank") Blog
         .user-profile__column
             .user-profile__info
                 h3(style="display: inline;") NAME:  

+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path");
+
+module.exports = {
+  entry: "./src/client/js/main.js",
+  mode: "development",
+  watch: true,
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "css/styles.css",
+    }),
+  ],
+  output: {
+    filename: "js/main.js",
+    path: path.resolve(__dirname, "assets"),
+    clean: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: [["@babel/preset-env", { targets: "defaults" }]],
+          },
+        },
+      },
+      {
+        test: /\.scss$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+      },
+    ],
+  },
+};
\ No newline at end of file