이세진 / dev-profile

Go to a project
Toggle navigation Toggle navigation pinning
Lee SeJin
aa0b218f 1 parent d3895d44

webpack update

Inline Side-by-side
Showing 19 changed files with 385 additions and 43 deletions
...@@ -118,5 +118,5 @@ dist ...@@ -118,5 +118,5 @@ dist
118 118
119 package-lock.json 119 package-lock.json
120 /uploads 120 /uploads
121 -static 121 +/assets
122 build 122 build
...\ No newline at end of file ...\ No newline at end of file
......
1 +{
2 + "ignore": ["webpack.config.js", "src/client/*", "assets/*"],
3 + "exec": "babel-node src/init.js"
4 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
3 "version": "1.0.0", 3 "version": "1.0.0",
4 "description": "2021 OSS Project Using node!", 4 "description": "2021 OSS Project Using node!",
5 "scripts": { 5 "scripts": {
6 - "dev:server": "nodemon --exec babel-node src/init" 6 + "dev:server": "nodemon",
7 + "dev:assets": "webpack"
7 }, 8 },
8 "repository": { 9 "repository": {
9 "type": "git", 10 "type": "git",
...@@ -29,8 +30,16 @@ ...@@ -29,8 +30,16 @@
29 "pug": "^3.0.2" 30 "pug": "^3.0.2"
30 }, 31 },
31 "devDependencies": { 32 "devDependencies": {
33 + "babel-loader": "^8.2.2",
34 + "css-loader": "^5.2.6",
32 "eslint-config-prettier": "^8.3.0", 35 "eslint-config-prettier": "^8.3.0",
33 "eslint-plugin-prettier": "^3.4.0", 36 "eslint-plugin-prettier": "^3.4.0",
34 - "prettier": "^2.2.1" 37 + "mini-css-extract-plugin": "^1.6.0",
38 + "prettier": "^2.2.1",
39 + "sass": "^1.34.0",
40 + "sass-loader": "^11.1.1",
41 + "style-loader": "^2.0.0",
42 + "webpack": "^5.37.1",
43 + "webpack-cli": "^4.7.0"
35 } 44 }
36 } 45 }
......
1 +import "../scss/styles.scss";
2 +
3 +console.log("it works");
...\ No newline at end of file ...\ No newline at end of file
1 +.footer {
2 + margin: 50px 0;
3 + padding-top: 50px;
4 + border-top: 2px solid rgba(0, 0, 0, 0.2);
5 + width: 100%;
6 + display: flex;
7 + align-items: center;
8 + justify-content: center;
9 + .footer__icon {
10 + color: rgba(0, 0, 0, 0.3);
11 + font-size: 40px;
12 + margin-bottom: 20px;
13 + margin-right: 10px;
14 + }
15 + .footer__text {
16 + color: rgba(0, 0, 0, 0.4);
17 + font-size: 20px;
18 + text-transform: uppercase;
19 + }
20 +}
1 +header {
2 + padding: 10px;
3 + margin-bottom: 10px;
4 + .header__wrapper {
5 + padding: 5px 0px;
6 + width: 100%;
7 + margin: 0 auto;
8 + max-width: 1200px;
9 + display: flex;
10 + justify-content: flex-end;
11 +
12 + .header__column {
13 + ul {
14 + display: flex;
15 + color: $blue;
16 + font-weight: 700;
17 + font-size: 20px;
18 + text-transform: uppercase;
19 + li:not(:last-child) {
20 + margin-right: 15px;
21 + }
22 + }
23 + }
24 + }
25 +}
1 +html,
2 +body,
3 +div,
4 +span,
5 +applet,
6 +object,
7 +iframe,
8 +h1,
9 +h2,
10 +h3,
11 +h4,
12 +h5,
13 +h6,
14 +p,
15 +blockquote,
16 +pre,
17 +a,
18 +abbr,
19 +acronym,
20 +address,
21 +big,
22 +cite,
23 +code,
24 +del,
25 +dfn,
26 +em,
27 +img,
28 +ins,
29 +kbd,
30 +q,
31 +s,
32 +samp,
33 +small,
34 +strike,
35 +strong,
36 +sub,
37 +sup,
38 +tt,
39 +var,
40 +b,
41 +u,
42 +i,
43 +center,
44 +dl,
45 +dt,
46 +dd,
47 +ol,
48 +ul,
49 +li,
50 +fieldset,
51 +form,
52 +label,
53 +legend,
54 +table,
55 +caption,
56 +tbody,
57 +tfoot,
58 +thead,
59 +tr,
60 +th,
61 +td,
62 +article,
63 +aside,
64 +canvas,
65 +details,
66 +embed,
67 +figure,
68 +figcaption,
69 +footer,
70 +header,
71 +hgroup,
72 +menu,
73 +nav,
74 +output,
75 +ruby,
76 +section,
77 +summary,
78 +time,
79 +mark,
80 +audio,
81 +video {
82 + margin: 0;
83 + padding: 0;
84 + border: 0;
85 + font-size: 100%;
86 + font: inherit;
87 + vertical-align: baseline;
88 +}
89 +/* HTML5 display-role reset for older browsers */
90 +article,
91 +aside,
92 +details,
93 +figcaption,
94 +figure,
95 +footer,
96 +header,
97 +hgroup,
98 +menu,
99 +nav,
100 +section {
101 + display: block;
102 +}
103 +body {
104 + line-height: 1;
105 +}
106 +ol,
107 +ul {
108 + list-style: none;
109 +}
110 +blockquote,
111 +q {
112 + quotes: none;
113 +}
114 +blockquote:before,
115 +blockquote:after,
116 +q:before,
117 +q:after {
118 + content: "";
119 + content: none;
120 +}
121 +table {
122 + border-collapse: collapse;
123 + border-spacing: 0;
124 +}
1 +$blue: #0063b2;
2 +$skyblue: #9cc3d5;
3 +$space: 40px;
1 +.home {
2 + display: flex;
3 + flex-direction: column;
4 + justify-content: center;
5 + align-items: center;
6 + .home-title {
7 + margin: 40px 0px;
8 + display: flex;
9 + flex-direction: column;
10 + justify-content: center;
11 + align-items: center;
12 + h2 {
13 + font-size: 30px;
14 + font-weight: 600;
15 + text-transform: uppercase;
16 + margin-bottom: 30px;
17 + }
18 + h1 {
19 + font-size: 50px;
20 + font-weight: 800;
21 + text-transform: uppercase;
22 + }
23 + }
24 + .home-quote {
25 + width: 100%;
26 + display: flex;
27 + text-align: center;
28 + flex-direction: column;
29 + justify-content: center;
30 + align-items: center;
31 + padding: 20px;
32 + box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
33 + 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
34 + h2 {
35 + font-size: 30px;
36 + font-family: "Pattaya", sans-serif;
37 + margin: 10px 0px;
38 + }
39 + h3 {
40 + font-size: 25px;
41 + opacity: 0.5;
42 + font-family: "Pattaya", sans-serif;
43 + }
44 + }
45 + .home-link {
46 + margin-top: 50px;
47 + font-size: 30px;
48 + font-weight: 700;
49 + display: flex;
50 + justify-content: center;
51 + align-items: center;
52 + a {
53 + color: $blue;
54 + &:not(:last-child) {
55 + margin-right: 50px;
56 + }
57 + }
58 + }
59 + .gotoTrend {
60 + margin-top: 50px;
61 + display: flex;
62 + text-align: center;
63 + flex-direction: column;
64 + justify-content: center;
65 + align-items: center;
66 + padding: 20px;
67 + box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
68 + 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
69 + h2 {
70 + color: #fb8500;
71 + font-size: 25px;
72 + font-weight: 700;
73 + margin-bottom: 20px;
74 + }
75 + .gotoTrend-repos {
76 + display: flex;
77 + flex-direction: column;
78 + justify-content: center;
79 + align-items: center;
80 + a {
81 + font-size: 18px;
82 + margin: 10px 0px;
83 + }
84 + }
85 + }
86 +}
1 +// Config
2 +@import url("https://fonts.googleapis.com/css2?family=Pattaya&display=swap");
3 +@import "./config/_variables.scss";
4 +@import "./config/_reset.scss";
5 +
6 +// Components
7 +@import "./components/header.scss";
8 +@import "./components/footer.scss";
9 +// Screens
10 +@import "./screens/home.scss";
11 +
12 +// Defaults
13 +
14 +a {
15 + color: inherit;
16 + text-decoration: none;
17 +}
18 +
19 +* {
20 + box-sizing: border-box;
21 +}
22 +
23 +body {
24 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
25 + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
26 + main {
27 + padding: 0px $space;
28 + max-width: 1200px;
29 + width: 100%;
30 + margin: 0 auto;
31 + }
32 +}
...@@ -70,19 +70,23 @@ export const handleHome = async (req, res) => { ...@@ -70,19 +70,23 @@ export const handleHome = async (req, res) => {
70 }; 70 };
71 71
72 export const getUserDetail = async (req, res) => { 72 export const getUserDetail = async (req, res) => {
73 - const quote = await getQuote(); 73 + try{
74 - const id = req.params.id; 74 + const id = req.params.id;
75 - const user = await User.findById(id); 75 + const quote = await getQuote();
76 - console.log(user.tech); 76 + const user = await User.findById(id);
77 - 77 + res.render("userDetail", {
78 - res.render("userDetail", { 78 + pagetTitle: "User Detail",
79 - pagetTitle: "User Detail", 79 + quote: quote.quote,
80 - quote: quote.quote, 80 + author: quote.author,
81 - author: quote.author, 81 + user,
82 - user, 82 + });
83 - }); 83 + } catch(error){
84 + console.log(error);
85 + res.redirect("/");
86 + }
84 }; 87 };
85 88
89 +
86 export const getEditProfile = async (req, res) => { 90 export const getEditProfile = async (req, res) => {
87 const { 91 const {
88 user: { _id: id }, 92 user: { _id: id },
...@@ -153,6 +157,7 @@ export const githubLoginCallback = async (_, __, profile, done) => { ...@@ -153,6 +157,7 @@ export const githubLoginCallback = async (_, __, profile, done) => {
153 id: githubId, 157 id: githubId,
154 login: githubName, 158 login: githubName,
155 avatar_url: avatarUrl, 159 avatar_url: avatarUrl,
160 + html_url: githubUrl,
156 name, 161 name,
157 email, 162 email,
158 }, 163 },
...@@ -169,6 +174,7 @@ export const githubLoginCallback = async (_, __, profile, done) => { ...@@ -169,6 +174,7 @@ export const githubLoginCallback = async (_, __, profile, done) => {
169 githubId, 174 githubId,
170 githubName, 175 githubName,
171 avatarUrl, 176 avatarUrl,
177 + githubUrl,
172 name, 178 name,
173 email, 179 email,
174 }); 180 });
......
...@@ -33,6 +33,7 @@ app.use(passport.session()); ...@@ -33,6 +33,7 @@ app.use(passport.session());
33 33
34 app.use(localsMiddleware); 34 app.use(localsMiddleware);
35 app.use("/uploads", express.static("uploads")); 35 app.use("/uploads", express.static("uploads"));
36 +app.use("/static", express.static("assets"));
36 app.use("/", globalRouter); 37 app.use("/", globalRouter);
37 app.use("/users", userRouter); 38 app.use("/users", userRouter);
38 39
......
...@@ -3,7 +3,7 @@ extends layouts/main ...@@ -3,7 +3,7 @@ extends layouts/main
3 block content 3 block content
4 .form-container 4 .form-container
5 form(action="/users/edit-profile", method="POST", enctype="multipart/form-data") 5 form(action="/users/edit-profile", method="POST", enctype="multipart/form-data")
6 - img(src=`/${loggedUser.avatarUrl}`, width="100", height="120") 6 + img(src=`/${loggedUser.avatarUrl}`)
7 .fileUpload 7 .fileUpload
8 label(for="photo") Photo 8 label(for="photo") Photo
9 input(type="file", id="photo", name="photo", accept="image/*") 9 input(type="file", id="photo", name="photo", accept="image/*")
......
...@@ -4,25 +4,24 @@ block content ...@@ -4,25 +4,24 @@ block content
4 .home 4 .home
5 .home-title 5 .home-title
6 h2 Develop your value 6 h2 Develop your value
7 - h1 -Developer Profile- 7 + h1 Developer Profile
8 + .home-quote
8 h2=quote 9 h2=quote
9 h3=author 10 h3=author
10 - 11 + .home-link
11 - if !loggedUser 12 + if !loggedUser
12 - .home-link
13 a(href="/join") Join 13 a(href="/join") Join
14 - |#{' '}
15 a(href="/login") Login 14 a(href="/login") Login
16 - else 15 + else
17 - a(href=`/users/${loggedUser._id}`) My profile 16 + a(href=`/users/${loggedUser._id}`) My profile
18 17
19 - .gotoTrend(style="border: 1px solid blue;") 18 + .gotoTrend
20 - p(style='color: orange;') Trending Repositories: 19 + h2 Today's Trending Repositories
21 - br 20 + .gotoTrend-repos
22 - a(href=Url0, style={color:'grey'}) 21 + a(href=Url0)
23 - p=name0+": "+description0+" - "+stars0+" stars" 22 + p=name0+": "+description0+" - "+stars0+" stars"
24 - a(href=Url1, style={color:'grey'}) 23 + a(href=Url1)
25 - p=name1+": "+description1+" - "+stars1+" stars" 24 + p=name1+": "+description1+" - "+stars1+" stars"
26 - a(href=Url2, style={color:'grey'}) 25 + a(href=Url2)
27 - p=name2+": "+description2+" - "+stars2+" stars" 26 + p=name2+": "+description2+" - "+stars2+" stars"
28 27
......
...@@ -4,11 +4,11 @@ html ...@@ -4,11 +4,11 @@ html
4 link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.15.2/css/all.css", integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu", crossorigin="anonymous") 4 link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.15.2/css/all.css", integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu", crossorigin="anonymous")
5 meta(charset="UTF-8") 5 meta(charset="UTF-8")
6 title #{pageTitle} | #{siteName} 6 title #{pageTitle} | #{siteName}
7 - link(rel="stylesheet", href="https://unpkg.com/mvp.css") 7 + link(rel="stylesheet", href="/static/css/styles.css")
8 body 8 body
9 include ../partials/header 9 include ../partials/header
10 main 10 main
11 block content 11 block content
12 include ../partials/footer 12 include ../partials/footer
13 - //- script(src="/static/main.js") 13 + script(src="/static/js/main.js")
14 14
......
1 footer.footer 1 footer.footer
2 - hr
3 .footer__icon 2 .footer__icon
4 i.fas.fa-code-branch 3 i.fas.fa-code-branch
5 span.footer__text © dev-profile #{new Date().getFullYear()} 4 span.footer__text © dev-profile #{new Date().getFullYear()}
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,18 +2,16 @@ header.header ...@@ -2,18 +2,16 @@ header.header
2 .header__wrapper 2 .header__wrapper
3 .header__column 3 .header__column
4 ul 4 ul
5 + li
6 + a(href="/") Home
5 if !loggedUser 7 if !loggedUser
6 li 8 li
7 - a(href="/") Home
8 - li
9 a(href="/join") Join 9 a(href="/join") Join
10 li 10 li
11 a(href="/login") Log In 11 a(href="/login") Log In
12 12
13 else 13 else
14 li 14 li
15 - a(href="/") Home
16 - li
17 a(href=`/users/${loggedUser._id}`) My Profile 15 a(href=`/users/${loggedUser._id}`) My Profile
18 li 16 li
19 a(href="/users/edit-profile") Edit Profile 17 a(href="/users/edit-profile") Edit Profile
......
1 extends layouts/main 1 extends layouts/main
2 2
3 block content 3 block content
4 - h1 User Detail
5 .user-quote 4 .user-quote
6 h2=quote 5 h2=quote
7 h3=author 6 h3=author
8 hr 7 hr
9 .user-profile 8 .user-profile
10 .user-profile__column 9 .user-profile__column
11 - img(src="#") 10 + img(src=`/${user.avatarUrl}`)
12 .user-profile__link 11 .user-profile__link
13 - a(href="#") Github 12 + a(href=user.githubUrl target="_blank") Github
14 - |#{' '} 13 + a(href=`//${user.blogUrl}` target="_blank") Blog
15 - a(href="#") Blog
16 .user-profile__column 14 .user-profile__column
17 .user-profile__info 15 .user-profile__info
18 h3(style="display: inline;") NAME: 16 h3(style="display: inline;") NAME:
......
1 +const MiniCssExtractPlugin = require("mini-css-extract-plugin");
2 +const path = require("path");
3 +
4 +module.exports = {
5 + entry: "./src/client/js/main.js",
6 + mode: "development",
7 + watch: true,
8 + plugins: [
9 + new MiniCssExtractPlugin({
10 + filename: "css/styles.css",
11 + }),
12 + ],
13 + output: {
14 + filename: "js/main.js",
15 + path: path.resolve(__dirname, "assets"),
16 + clean: true,
17 + },
18 + module: {
19 + rules: [
20 + {
21 + test: /\.js$/,
22 + use: {
23 + loader: "babel-loader",
24 + options: {
25 + presets: [["@babel/preset-env", { targets: "defaults" }]],
26 + },
27 + },
28 + },
29 + {
30 + test: /\.scss$/,
31 + use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
32 + },
33 + ],
34 + },
35 +};
...\ No newline at end of file ...\ No newline at end of file