diff --git a/nodeJS/Learning/07/app/.dockerignore b/nodeJS/Learning/07/app/.dockerignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/nodeJS/Learning/07/app/.dockerignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/nodeJS/Learning/07/app/Dockerfile b/nodeJS/Learning/07/app/Dockerfile new file mode 100644 index 0000000..b0e7b55 --- /dev/null +++ b/nodeJS/Learning/07/app/Dockerfile @@ -0,0 +1,23 @@ +# Use Base Image: What we are using to make Docker File, eg ubuntu container/ image, node etc +FROM node:lts-alpine + +# Make Dir (make sure directory exists) +RUN mkdir -p /usr/src/app + +# Set the working directory: using the correct folder +WORKDIR /usr/src/app + +# Copy files into folder (no need to reinstall every single time) +COPY package.json . + +# Install the dependencies +RUN yarn install + +# Copy the rest of the files +COPY . . + +# Expose the port +EXPOSE 3000 + +# Execute Command +CMD ["yarn", "dev"] \ No newline at end of file diff --git a/nodeJS/Learning/07/app/docker-compose.yaml b/nodeJS/Learning/07/app/docker-compose.yaml new file mode 100644 index 0000000..2ffab99 --- /dev/null +++ b/nodeJS/Learning/07/app/docker-compose.yaml @@ -0,0 +1,16 @@ +services: + web: + build: . + ports: + - "3000:3000" + # files are put in here + volumes: + - .:/usr/src/app + - ./node_modules:/usr/src/app/node_modules + command: ["yarn", "dev"] + + cms: + build: + context: ../cms + ports: + - "1337:1337" diff --git a/nodeJS/Learning/07/app/public/css/pages/index.css b/nodeJS/Learning/07/app/public/css/pages/index.css index 13e1f16..34ebdf0 100644 --- a/nodeJS/Learning/07/app/public/css/pages/index.css +++ b/nodeJS/Learning/07/app/public/css/pages/index.css @@ -63,41 +63,49 @@ h6 { transform: translateY(0); /* End at its normal position */ } } -body { - margin: 0px; +body, +html { + margin: 0; + padding: 0; + box-sizing: border-box; background: linear-gradient(to top right, #3b3561, rgb(191.3, 187.1, 217.9)); height: 100vh; overflow: hidden; } - -.blog { - text-align: center; +body .container, +html .container { display: flex; - justify-content: center; - margin-bottom: 50px; - margin: 0px 50px; - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-template-rows: repeat(2, 1fr); - gap: 20px; + height: 100vh; } -.blog .div1 { - grid-area: 1/1/3/3; - padding-top: 160px; +body .container .div1, +html .container .div1 { + width: 50%; display: flex; - flex-direction: column; align-items: center; - padding: 200px 0px 0px 0px; + justify-content: center; + flex-direction: column; /* General button styling */ } -.blog .div1 h1 { +body .container .div1 h1, +html .container .div1 h1 { font-size: 60px; color: #f7ebec; font-family: "Lexend", serif; font-weight: 300; - padding-bottom: 20px; + padding: 80px 0px 0px 45px; } -.blog .div1 .read-more-btn { +body .container .div1 p, +html .container .div1 p { + font-family: "Space Grotesk", monospace; + color: #3b3561; + font-size: 13px; + text-align: center; + max-width: 560px; + margin-top: 20px; + padding: 0px 0px 0px 50px; +} +body .container .div1 .read-more-btn, +html .container .div1 .read-more-btn { display: inline-flex; /* Flex container for text and icon */ align-items: center; /* Center text and icon vertically */ justify-content: center; /* Center content horizontally */ @@ -111,12 +119,15 @@ body { background-color: #f7ebec; /* Transparent background */ cursor: pointer; /* Pointer cursor on hover */ transition: all 0.3s ease; /* Smooth transition on hover */ + margin-top: 25px; /* Space between text and next element */ } -.blog .div1 .read-more-btn:hover { +body .container .div1 .read-more-btn:hover, +html .container .div1 .read-more-btn:hover { background-color: #3b3561; /* Change background color on hover */ color: #f7ebec; /* Change text color on hover */ } -.blog .div1 .read-more-btn .icon { +body .container .div1 .read-more-btn .icon, +html .container .div1 .read-more-btn .icon { display: flex; /* Flex for the icon */ align-items: center; justify-content: center; @@ -128,11 +139,13 @@ body { border-radius: 50%; /* Make the icon circular */ transition: all 0.3s ease; /* Smooth transition on hover */ } -.blog .div1 .read-more-btn:hover .icon { +body .container .div1 .read-more-btn:hover .icon, +html .container .div1 .read-more-btn:hover .icon { background-color: #f7ebec; /* Change circle background on hover */ color: #3b3561; /* Change arrow color on hover */ } -.blog .div1 .buttons { +body .container .div1 .buttons, +html .container .div1 .buttons { display: flex; flex-direction: column; align-items: left; @@ -142,76 +155,85 @@ body { padding-right: 85px; margin-top: 20px; } -.blog .div1 .buttons button { +body .container .div1 .buttons button, +html .container .div1 .buttons button { padding: 3.5px 23px; - margin: 80px; font-size: 16px; font-family: "Space Grotesk", monospace; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; -} -.blog .div1 .buttons button.psyc-button { - background-color: #ddbdd5; - color: #3b3561; margin: 0px 0px 0px 70px; } -.blog .div1 .buttons button.psyc-button:hover { +body .container .div1 .buttons button.psyc-button, +html .container .div1 .buttons button.psyc-button { + background-color: #ddbdd5; + color: #3b3561; +} +body .container .div1 .buttons button.psyc-button:hover, +html .container .div1 .buttons button.psyc-button:hover { background-color: rgb(203.66, 155.34, 191.58); transform: scale(1.05); } -.blog .div1 .buttons button.imp-button { +body .container .div1 .buttons button.imp-button, +html .container .div1 .buttons button.imp-button { background-color: #4b8f8c; color: white; - margin: 0px 0px 0px 70px; } -.blog .div1 .buttons button.imp-button:hover { +body .container .div1 .buttons button.imp-button:hover, +html .container .div1 .buttons button.imp-button:hover { background-color: rgb(57.4541284404, 109.5458715596, 107.247706422); transform: scale(1.05); } -.blog .div1 .buttons button.code-button { +body .container .div1 .buttons button.spirit-button, +html .container .div1 .buttons button.spirit-button { + background-color: #f7ebec; + color: #3b3561; +} +body .container .div1 .buttons button.spirit-button:hover, +html .container .div1 .buttons button.spirit-button:hover { + background-color: rgb(222.24, 220.08, 235.92); + transform: scale(1.05); +} +body .container .div1 .buttons button.code-button, +html .container .div1 .buttons button.code-button { background-color: #dd614a; color: white; - margin: 0px 0px 0px 70px; } -.blog .div1 .buttons button.code-button:hover { +body .container .div1 .buttons button.code-button:hover, +html .container .div1 .buttons button.code-button:hover { background-color: rgb(205.4139534884, 64.688372093, 38.5860465116); transform: scale(1.05); } -.blog .div1 .buttons button.spirit-button { - background-color: #f7ebec; - color: #3b3561; - margin: 0px 0px 0px 70px; +body .container .div2, +html .container .div2 { + width: 50%; + padding-left: 30px; + display: flex; + flex-wrap: wrap; } -.blog .div1 .buttons button.spirit-button:hover { - background-color: rgb(209, 206, 206); - transform: scale(1.05); +body .container .div2 a, +html .container .div2 a { + text-decoration: none; } -.blog .div2 { - padding-top: 30px; - height: 200px; /* Set desired height */ - width: 300px; -} -.blog .div2 .entrya { - grid-area: 1/3/2/4; +body .container .div2 .entrya, +html .container .div2 .entrya { background-color: #ddbdd5; - color: black; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 20px; border: none; text-align: center; cursor: pointer; - position: fixed; - right: 410px; - top: 40px; height: 300px; width: 300px; + margin: 32px 0px 0px 35px; transition: transform 0.3s ease; animation: buttonEntry 1s ease-in-out; } -.blog .div2 .entrya h2 { +body .container .div2 .entrya h2, +html .container .div2 .entrya h2 { font-size: 20px; color: #3b3561; margin-bottom: 10px; @@ -224,9 +246,18 @@ body { -webkit-line-clamp: 1; /* Limit to 2 lines */ -webkit-box-orient: vertical; /* Vertical text orientation */ white-space: normal; /* Allow wrapping within the box */ - align-content: center; } -.blog .div2 .entrya p { +body .container .div2 .entrya img, +html .container .div2 .entrya img { + max-width: 100%; + height: auto; + width: 200px; /* Set desired width */ + border-radius: 10px; /* Optional: Rounded corners */ + display: block; /* Ensures it's treated as a block element */ + margin: 0 auto; /* Centers the image horizontally */ +} +body .container .div2 .entrya p, +html .container .div2 .entrya p { padding-top: 20px; color: #3b3561; font-size: 0.9rem; @@ -239,203 +270,10 @@ body { white-space: normal; /* Allow wrapping within the box */ font-family: "Space Grotesk", monospace; } -.blog .div2 .entrya:hover { +body .container .div2 .entrya:hover, +html .container .div2 .entrya:hover { transform: translate(60px, 0px); transform: translateY(-5px); } -.blog .div2 .entrya img { - max-width: 100%; - height: auto; - width: 200px; /* Set desired width */ - border-radius: 10px; /* Optional: Rounded corners */ - display: block; /* Ensures it's treated as a block element */ - margin: 0 auto; /* Centers the image horizontally */ -} -.blog .div2 .entrya { - animation: buttonEntry 1s ease-in-out; -} -.blog .div3 { - grid-area: 1/4/2/5; - padding-top: 30px; - width: 300px; -} -.blog .div3 .entryb { - grid-area: 1/3/2/4; - background-color: #4b8f8c; - color: black; - border-radius: 10px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - padding: 20px; - border: none; - text-align: center; - cursor: pointer; - position: fixed; - right: 90px; - top: 40px; - height: 300px; - width: 300px; - transition: transform 0.3s ease; - animation: buttonEntry 1s ease-in-out; -} -.blog .div3 .entryb h2 { - font-size: 20px; - color: #3b3561; - margin-bottom: 10px; - font-family: "Lexend", serif; - font-weight: 500; - overflow: hidden; /* Hide overflowing text */ - text-overflow: ellipsis; /* Add "..." at the end of truncated text */ - max-width: 250px; /* Restrict container width */ - display: -webkit-box; /* Enables multi-line truncation */ - -webkit-line-clamp: 1; /* Limit to 2 lines */ - -webkit-box-orient: vertical; /* Vertical text orientation */ - white-space: normal; /* Allow wrapping within the box */ - align-content: center; -} -.blog .div3 .entryb p { - padding-top: 20px; - color: #f7ebec; - font-size: 0.9rem; - overflow: hidden; /* Hide overflowing text */ - text-overflow: ellipsis; /* Add "..." at the end of truncated text */ - max-width: 300px; /* Restrict container width */ - display: -webkit-box; /* Enables multi-line truncation */ - -webkit-line-clamp: 2; /* Limit to 2 lines */ - -webkit-box-orient: vertical; /* Vertical text orientation */ - white-space: normal; /* Allow wrapping within the box */ - font-family: "Space Grotesk", monospace; -} -.blog .div3 .entryb:hover { - transform: translateY(-5px); -} -.blog .div3 .entryb img { - max-width: 100%; - height: auto; - width: 200px; /* Set desired width */ - border-radius: 10px; /* Optional: Rounded corners */ - display: block; /* Ensures it's treated as a block element */ - margin: 0 auto; /* Centers the image horizontally */ -} -.blog .div4 { - grid-area: 2/3/3/4; - width: 300px; -} -.blog .div4 .entryc { - border-radius: 10px; - background-color: #dd614a; - color: black; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - padding: 20px; - border: none; - text-align: center; - cursor: pointer; - transition: transform 0.3s ease; - animation: buttonEntry 1s ease-in-out; - position: fixed; - right: 410px; - bottom: 35px; - height: 300px; - width: 300px; -} -.blog .div4 .entryc h2 { - font-size: 20px; - color: #3b3561; - margin-bottom: 10px; - font-family: "Lexend", serif; - font-weight: 500; - overflow: hidden; /* Hide overflowing text */ - text-overflow: ellipsis; /* Add "..." at the end of truncated text */ - max-width: 250px; /* Restrict container width */ - display: -webkit-box; /* Enables multi-line truncation */ - -webkit-line-clamp: 1; /* Limit to 2 lines */ - -webkit-box-orient: vertical; /* Vertical text orientation */ - white-space: normal; /* Allow wrapping within the box */ - align-content: center; -} -.blog .div4 .entryc p { - padding-top: 20px; - color: #f7ebec; - font-size: 0.9rem; - overflow: hidden; /* Hide overflowing text */ - text-overflow: ellipsis; /* Add "..." at the end of truncated text */ - max-width: 300px; /* Restrict container width */ - display: -webkit-box; /* Enables multi-line truncation */ - -webkit-line-clamp: 2; /* Limit to 2 lines */ - -webkit-box-orient: vertical; /* Vertical text orientation */ - white-space: normal; /* Allow wrapping within the box */ - font-family: "Space Grotesk", monospace; -} -.blog .div4 .entryc:hover { - transform: translateY(-5px); -} -.blog .div4 .entryc img { - max-width: 100%; - height: auto; - width: 200px; /* Set desired width */ - border-radius: 10px; /* Optional: Rounded corners */ - display: block; /* Ensures it's treated as a block element */ - margin: 0 auto; /* Centers the image horizontally */ -} -.blog .div5 { - grid-area: 2/4/3/5; - width: 300px; -} -.blog .div5 .entryd { - grid-area: 1/3/2/4; - background-color: #f7ebec; - color: black; - border-radius: 10px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - padding: 20px; - border: none; - text-align: center; - cursor: pointer; - transition: transform 0.3s ease; - animation: buttonEntry 1s ease-in-out; - position: fixed; - right: 90px; - bottom: 35px; - height: 300px; - width: 300px; -} -.blog .div5 .entryd h2 { - font-size: 20px; - color: #3b3561; - margin-bottom: 10px; - font-family: "Lexend", serif; - font-weight: 500; - overflow: hidden; /* Hide overflowing text */ - text-overflow: ellipsis; /* Add "..." at the end of truncated text */ - max-width: 250px; /* Restrict container width */ - display: -webkit-box; /* Enables multi-line truncation */ - -webkit-line-clamp: 1; /* Limit to 2 lines */ - -webkit-box-orient: vertical; /* Vertical text orientation */ - white-space: normal; /* Allow wrapping within the box */ - align-content: center; -} -.blog .div5 .entryd p { - padding-top: 20px; - color: #3b3561; - font-size: 14px; - overflow: hidden; /* Hide overflowing text */ - text-overflow: ellipsis; /* Add "..." at the end of truncated text */ - max-width: 300px; /* Restrict container width */ - display: -webkit-box; /* Enables multi-line truncation */ - -webkit-line-clamp: 2; /* Limit to 2 lines */ - -webkit-box-orient: vertical; /* Vertical text orientation */ - white-space: normal; /* Allow wrapping within the box */ - font-family: "Space Grotesk", monospace; -} -.blog .div5 .entryd:hover { - transform: translateY(-5px); -} -.blog .div5 .entryd img { - max-width: 100%; - height: auto; - width: 200px; /* Set desired width */ - border-radius: 10px; /* Optional: Rounded corners */ - display: block; /* Ensures it's treated as a block element */ - margin: 0 auto; /* Centers the image horizontally */ -} /*# sourceMappingURL=index.css.map */ diff --git a/nodeJS/Learning/07/app/public/css/pages/index.css.map b/nodeJS/Learning/07/app/public/css/pages/index.css.map index bc0ed92..904fab1 100644 --- a/nodeJS/Learning/07/app/public/css/pages/index.css.map +++ b/nodeJS/Learning/07/app/public/css/pages/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../../src/styles/_variable.scss","../../../src/styles/_reset.scss","../../../src/styles/pages/index.scss"],"names":[],"mappings":"AAAQ;ACCR;AAAA;AAAA;EAGC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;;;AAGD;AAAA;EAEC;;;AC7CD;AACA;AAEA;AAEA;EACC;IACC;IACA;;EAED;IACC;IACA;;;AAIF;EACC;EACA;EAKA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;AAiDA;;AA/CA;EACC;EACA,OFhDK;EEiDL,aF9CW;EE+CX;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,aFvDS,4BEuDyB;EAClC;EACA;EACA,OFhEI,SEgEmB;EACvB;EACA;EACA,kBFjEK,SEiE8B;EACnC;EACA;;AAEA;EACC,kBFxEG,SEwE+B;EAClC,OFvEI,SEuEoB;;AAGzB;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBFnFG,SEmF+B;EAClC,OFlFI,SEkFoB;EACxB;EACA;;AAGD;EACC,kBFxFI,SEwF+B;EACnC,OF3FG,SE2FoB;;AAKzB;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,aFxGQ;EEyGR;EACA;EACA;EACA;;AAEA;EACC,kBFpHE;EEqHF,OFtHE;EEuHF;;AAEA;EACC;EACA;;AAIF;EACC,kBF7HG;EE8HH;EACA;;AAEA;EACC;EACA;;AAIF;EACC,kBFvII;EEwIJ;EACA;;AAEA;EACC;EACA;;AAGF;EACC,kBFnJG;EEoJH,OFtJE;EEuJF;;AAEA;EACC;EACA;;AAML;EACC;EACA;EACA;;AACA;EACC;EACA,kBFtKI;EEuKJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,OFzLG;EE0LH;EACA,aFtLU;EEuLV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA,OFzMG;EE0MH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aF5MQ;;AE+MT;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAMF;EACC;;AAIF;EACC;EACA;EACA;;AACA;EACC;EACA,kBF9OK;EE+OL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,OFnQG;EEoQH;EACA,aFhQU;EEiQV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA,OFjRI;EEkRJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFtRQ;;AEyRT;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAIH;EACC;EACA;;AACA;EACC;EACA,kBF9SM;EE+SN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,OFnUG;EEoUH;EACA,aFhUU;EEiUV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA,OFjVI;EEkVJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFtVQ;;AEyVT;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAIH;EACC;EACA;;AACA;EACC;EACA,kBFhXK;EEiXL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,OFpYG;EEqYH;EACA,aFjYU;EEkYV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA,OFpZG;EEqZH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFvZQ;;AE0ZT;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../../src/styles/_variable.scss","../../../src/styles/_reset.scss","../../../src/styles/pages/index.scss"],"names":[],"mappings":"AAAQ;ACCR;AAAA;AAAA;EAGC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;;;AAGD;AAAA;EAEC;;;AC7CD;AACA;AAEA;AAEA;EACC;IACC;IACA;;EAED;IACC;IACA;;;AAIF;AAAA;EAEC;EACA;EACA;EACA;EAKA;EACA;;AAEA;AAAA;EACC;EACA;;AAEA;AAAA;EACC;EACA;EACA;EACA;EACA;AA4DA;;AA1DA;AAAA;EACC;EACA,OF1CI;EE2CJ,aFxCU;EEyCV;EACA;;AAGD;AAAA;EACC,aF7CQ;EE8CR,OFpDG;EEqDH;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA,aF3DQ,4BE2D0B;EAClC;EACA;EACA,OFpEG,SEoEoB;EACvB;EACA;EACA,kBFrEI,SEqE+B;EACnC;EACA;EACA;;AAEA;AAAA;EACC,kBF7EE,SE6EgC;EAClC,OF5EG,SE4EqB;;AAGzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBFxFE,SEwFgC;EAClC,OFvFG,SEuFqB;EACxB;EACA;;AAGD;AAAA;EACC,kBF7FG,SE6FgC;EACnC,OFhGE,SEgGqB;;AAKzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA;EACA,aF5GO;EE6GP;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC,kBFzHC;EE0HD,OF3HC;;AE6HD;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFjIE;EEkIF;;AAEA;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBF5IE;EE6IF,OF/IC;;AEiJD;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFpJG;EEqJH;;AAEA;AAAA;EACC;EACA;;AAML;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC,kBF7KG;EE8KH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA,OF7LE;EE8LF;EACA,aF1LS;EE2LT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA,OFrNE;EEsNF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFxNO;;AE2NR;AAAA;EACC;EACA","file":"index.css"} \ No newline at end of file diff --git a/nodeJS/Learning/07/app/public/images/favicon.ico b/nodeJS/Learning/07/app/public/images/favicon.ico new file mode 100644 index 0000000..aea8215 Binary files /dev/null and b/nodeJS/Learning/07/app/public/images/favicon.ico differ diff --git a/nodeJS/Learning/07/app/public/images/peeking.png b/nodeJS/Learning/07/app/public/images/peeking.png deleted file mode 100644 index a411394..0000000 Binary files a/nodeJS/Learning/07/app/public/images/peeking.png and /dev/null differ diff --git a/nodeJS/Learning/07/app/public/js/index.js b/nodeJS/Learning/07/app/public/js/index.js index 5b06615..e69de29 100644 --- a/nodeJS/Learning/07/app/public/js/index.js +++ b/nodeJS/Learning/07/app/public/js/index.js @@ -1,28 +0,0 @@ -// Function to fetch and display posts -async function fetchAndDisplayPosts() { - try { - const response = await fetch("http://localhost:1337/api/posts"); // Adjust URL to your Strapi server - const result = await response.json(); - - const postsContainer = document.getElementById("posts-container"); - postsContainer.innerHTML = ""; // Clear any existing content - - // Loop through the posts and create links - result.data.forEach((post) => { - const postElement = document.createElement("div"); - const postLink = document.createElement("a"); - - // Link to the post (using slug or id for dynamic routes) - postLink.href = `/posts/${post.attributes.slug}`; // Adjust this to match your route - postLink.textContent = post.attributes.title; - - postElement.appendChild(postLink); - postsContainer.appendChild(postElement); - }); - } catch (error) { - console.error("Error fetching posts:", error); - } -} - -// Fetch posts when the page loads -document.addEventListener("DOMContentLoaded", fetchAndDisplayPosts); diff --git a/nodeJS/Learning/07/app/src/index.ts b/nodeJS/Learning/07/app/src/index.ts index 760e5e5..97fad16 100644 --- a/nodeJS/Learning/07/app/src/index.ts +++ b/nodeJS/Learning/07/app/src/index.ts @@ -15,20 +15,15 @@ app.set("views", `./src/views`); app.set("view engine", "ejs"); //Get strapi data -app.get("/api/articles", async (_req: Request, res: Response) => { - try { - const response = await fetch("http://localhost:1337/api/articles"); +app.get("/", async (_req: Request, res: Response) => { + const postsData = await fetch("http://cms:1337/api/blog-posts", { + method: "GET", + headers: { + Authorization: `Bearer ${process.env.STRAPI_BEARER_TOKEN}`, + }, + }).then((response) => response.json()); - if (!response.ok) { - throw new Error(`Strapi API responded with status ${response.status}`); - } - - const data = await response.json(); - res.json(data); // Pass through Strapi data - } catch (error) { - console.error("Error fetching articles from Strapi:", error); - res.status(500).json({ error: "Failed to fetch data from Strapi" }); - } + res.render("index", { posts: postsData }); }); //Static route diff --git a/nodeJS/Learning/07/app/src/styles/pages/index.scss b/nodeJS/Learning/07/app/src/styles/pages/index.scss index df66df4..6430de3 100644 --- a/nodeJS/Learning/07/app/src/styles/pages/index.scss +++ b/nodeJS/Learning/07/app/src/styles/pages/index.scss @@ -18,416 +18,234 @@ } } -body { - margin: 0px; +body, +html { + margin: 0; + padding: 0; + box-sizing: border-box; background: linear-gradient( to top right, variable.$blue, lighten(variable.$blue, 50%) ); - height: 100vh; // Ensure the gradient covers the entire viewport height + height: 100vh; overflow: hidden; -} -.blog { - text-align: center; - display: flex; // Use flexbox for alignment - justify-content: center; // Center horizontally - margin-bottom: 50px; - margin: 0px 50px; - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-template-rows: repeat(2, 1fr); - gap: 20px; - - .div1 { - grid-area: 1 / 1 / 3 / 3; - padding-top: 160px; + .container { display: flex; - flex-direction: column; - align-items: center; - padding: 200px 0px 0px 00px; + height: 100vh; - h1 { - font-size: 60px; - color: variable.$white; - font-family: variable.$font-header; - font-weight: 300; - padding-bottom: 20px; - } - - .read-more-btn { - display: inline-flex; /* Flex container for text and icon */ - align-items: center; /* Center text and icon vertically */ - justify-content: center; /* Center content horizontally */ - padding: 10px 20px; /* Button padding */ - font-family: variable.$font-body; /* Font style */ - font-size: 16px; /* Font size */ - font-weight: bold; /* Bold text */ - color: variable.$blue; /* Text color */ - border: 2px solid variable.$blue; /* Button border */ - border-radius: 30px; /* Rounded edges for the button */ - background-color: variable.$white; /* Transparent background */ - cursor: pointer; /* Pointer cursor on hover */ - transition: all 0.3s ease; /* Smooth transition on hover */ - - &:hover { - background-color: variable.$blue; /* Change background color on hover */ - color: variable.$white; /* Change text color on hover */ - } - - .icon { - display: flex; /* Flex for the icon */ - align-items: center; - justify-content: center; - margin-left: 10px; /* Space between text and icon */ - width: 20px; /* Icon circle width */ - height: 20px; /* Icon circle height */ - background-color: variable.$blue; /* Circle background color */ - color: variable.$white; /* Arrow color */ - border-radius: 50%; /* Make the icon circular */ - transition: all 0.3s ease; /* Smooth transition on hover */ - } - - &:hover .icon { - background-color: variable.$white; /* Change circle background on hover */ - color: variable.$blue; /* Change arrow color on hover */ - } - } - - /* General button styling */ - .buttons { + .div1 { + width: 50%; display: flex; - flex-direction: column; - align-items: left; + align-items: center; justify-content: center; - gap: 10px; - padding: 20px; - padding-right: 85px; - margin-top: 20px; + flex-direction: column; - button { - padding: 3.5px 23px; - margin: 80px; - font-size: 16px; + h1 { + font-size: 60px; + color: variable.$white; + font-family: variable.$font-header; + font-weight: 300; + padding: 80px 0px 0px 45px; + } + + p { font-family: variable.$font-body; + color: variable.$blue; + font-size: 13px; + text-align: center; + max-width: 560px; + margin-top: 20px; + padding: 0px 0px 0px 50px; + } + + .read-more-btn { + display: inline-flex; /* Flex container for text and icon */ + align-items: center; /* Center text and icon vertically */ + justify-content: center; /* Center content horizontally */ + padding: 10px 20px; /* Button padding */ + font-family: variable.$font-body; /* Font style */ + font-size: 16px; /* Font size */ + font-weight: bold; /* Bold text */ + color: variable.$blue; /* Text color */ + border: 2px solid variable.$blue; /* Button border */ + border-radius: 30px; /* Rounded edges for the button */ + background-color: variable.$white; /* Transparent background */ + cursor: pointer; /* Pointer cursor on hover */ + transition: all 0.3s ease; /* Smooth transition on hover */ + margin-top: 25px; /* Space between text and next element */ + + &:hover { + background-color: variable.$blue; /* Change background color on hover */ + color: variable.$white; /* Change text color on hover */ + } + + .icon { + display: flex; /* Flex for the icon */ + align-items: center; + justify-content: center; + margin-left: 10px; /* Space between text and icon */ + width: 20px; /* Icon circle width */ + height: 20px; /* Icon circle height */ + background-color: variable.$blue; /* Circle background color */ + color: variable.$white; /* Arrow color */ + border-radius: 50%; /* Make the icon circular */ + transition: all 0.3s ease; /* Smooth transition on hover */ + } + + &:hover .icon { + background-color: variable.$white; /* Change circle background on hover */ + color: variable.$blue; /* Change arrow color on hover */ + } + } + + /* General button styling */ + .buttons { + display: flex; + flex-direction: column; + align-items: left; + justify-content: center; + gap: 10px; + padding: 20px; + padding-right: 85px; + margin-top: 20px; + + button { + padding: 3.5px 23px; + font-size: 16px; + font-family: variable.$font-body; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.2s ease; + margin: 0px 0px 0px 70px; + + &.psyc-button { + background-color: variable.$pink; + color: variable.$blue; + + &:hover { + background-color: darken(variable.$pink, 10%); + transform: scale(1.05); + } + } + + &.imp-button { + background-color: variable.$green; + color: white; + + &:hover { + background-color: darken(variable.$green, 10%); + transform: scale(1.05); + } + } + + &.spirit-button { + background-color: variable.$white; + color: variable.$blue; + + &:hover { + background-color: lighten(variable.$blue, 60%); + transform: scale(1.05); + } + } + + &.code-button { + background-color: variable.$orange; + color: white; + + &:hover { + background-color: darken(variable.$orange, 10%); + transform: scale(1.05); + } + } + } + } + } + .div2 { + width: 50%; + padding-left: 30px; + display: flex; + flex-wrap: wrap; + + a { + text-decoration: none; // Removes the underline + } + + .entrya { + background-color: variable.$pink; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 20px; border: none; - border-radius: 5px; + text-align: center; cursor: pointer; - transition: background-color 0.3s ease, transform 0.2s ease; + height: 300px; + width: 300px; + margin: 32px 0px 0px 35px; + transition: transform 0.3s ease; + animation: buttonEntry 1s ease-in-out; - &.psyc-button { - background-color: variable.$pink; + h2 { + font-size: 20px; color: variable.$blue; - margin: 0px 0px 0px 70px; - - &:hover { - background-color: darken(variable.$pink, 10%); - transform: scale(1.05); - } + margin-bottom: 10px; + font-family: variable.$font-header; + font-weight: 500; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 250px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 1; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ } - &.imp-button { - background-color: variable.$green; - color: white; - margin: 0px 0px 0px 70px; - - &:hover { - background-color: darken(variable.$green, 10%); - transform: scale(1.05); - } + img { + max-width: 100%; + height: auto; + width: 200px; /* Set desired width */ + border-radius: 10px; /* Optional: Rounded corners */ + display: block; /* Ensures it's treated as a block element */ + margin: 0 auto; /* Centers the image horizontally */ } - &.code-button { - background-color: variable.$orange; - color: white; - margin: 0px 0px 0px 70px; - - &:hover { - background-color: darken(variable.$orange, 10%); - transform: scale(1.05); - } - } - &.spirit-button { - background-color: variable.$white; + p { + padding-top: 20px; color: variable.$blue; - margin: 0px 0px 0px 70px; - - &:hover { - background-color: rgb(209, 206, 206); - transform: scale(1.05); - } + font-size: 0.9rem; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 300px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 2; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + font-family: variable.$font-body; } - } - } - } - .div2 { - padding-top: 30px; - height: 200px; /* Set desired height */ - width: 300px; - .entrya { - grid-area: 1 / 3 / 2 / 4; - background-color: variable.$pink; - color: black; - border-radius: 10px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - padding: 20px; - border: none; - text-align: center; - cursor: pointer; - position: fixed; - right: 410px; - top: 40px; - height: 300px; - width: 300px; - transition: transform 0.3s ease; - animation: buttonEntry 1s ease-in-out; - h2 { - font-size: 20px; - color: variable.$blue; - margin-bottom: 10px; - font-family: variable.$font-header; - font-weight: 500; - overflow: hidden; /* Hide overflowing text */ - text-overflow: ellipsis; /* Add "..." at the end of truncated text */ - max-width: 250px; /* Restrict container width */ - display: -webkit-box; /* Enables multi-line truncation */ - -webkit-line-clamp: 1; /* Limit to 2 lines */ - -webkit-box-orient: vertical; /* Vertical text orientation */ - white-space: normal; /* Allow wrapping within the box */ - align-content: center; - } - - p { - padding-top: 20px; - color: variable.$blue; - font-size: 0.9rem; - overflow: hidden; /* Hide overflowing text */ - text-overflow: ellipsis; /* Add "..." at the end of truncated text */ - max-width: 300px; /* Restrict container width */ - display: -webkit-box; /* Enables multi-line truncation */ - -webkit-line-clamp: 2; /* Limit to 2 lines */ - -webkit-box-orient: vertical; /* Vertical text orientation */ - white-space: normal; /* Allow wrapping within the box */ - font-family: variable.$font-body; - } - - &:hover { - transform: translate(60px, 0px); - transform: translateY(-5px); - } - - img { - max-width: 100%; - height: auto; - width: 200px; /* Set desired width */ - border-radius: 10px; /* Optional: Rounded corners */ - display: block; /* Ensures it's treated as a block element */ - margin: 0 auto; /* Centers the image horizontally */ - } - } - } - - .div2 { - .entrya { - animation: buttonEntry 1s ease-in-out; - } - } - - .div3 { - grid-area: 1 / 4 / 2 / 5; - padding-top: 30px; - width: 300px; - .entryb { - grid-area: 1 / 3 / 2 / 4; - background-color: variable.$green; - color: black; - border-radius: 10px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - padding: 20px; - border: none; - text-align: center; - cursor: pointer; - position: fixed; - right: 90px; - top: 40px; - height: 300px; - width: 300px; - transition: transform 0.3s ease; - animation: buttonEntry 1s ease-in-out; - - h2 { - font-size: 20px; - color: variable.$blue; - margin-bottom: 10px; - font-family: variable.$font-header; - font-weight: 500; - overflow: hidden; /* Hide overflowing text */ - text-overflow: ellipsis; /* Add "..." at the end of truncated text */ - max-width: 250px; /* Restrict container width */ - display: -webkit-box; /* Enables multi-line truncation */ - -webkit-line-clamp: 1; /* Limit to 2 lines */ - -webkit-box-orient: vertical; /* Vertical text orientation */ - white-space: normal; /* Allow wrapping within the box */ - align-content: center; - } - - p { - padding-top: 20px; - color: variable.$white; - font-size: 0.9rem; - overflow: hidden; /* Hide overflowing text */ - text-overflow: ellipsis; /* Add "..." at the end of truncated text */ - max-width: 300px; /* Restrict container width */ - display: -webkit-box; /* Enables multi-line truncation */ - -webkit-line-clamp: 2; /* Limit to 2 lines */ - -webkit-box-orient: vertical; /* Vertical text orientation */ - white-space: normal; /* Allow wrapping within the box */ - font-family: variable.$font-body; - } - - &:hover { - transform: translateY(-5px); - } - - img { - max-width: 100%; - height: auto; - width: 200px; /* Set desired width */ - border-radius: 10px; /* Optional: Rounded corners */ - display: block; /* Ensures it's treated as a block element */ - margin: 0 auto; /* Centers the image horizontally */ - } - } - } - .div4 { - grid-area: 2 / 3 / 3 / 4; - width: 300px; - .entryc { - border-radius: 10px; - background-color: variable.$orange; - color: black; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - padding: 20px; - border: none; - text-align: center; - cursor: pointer; - transition: transform 0.3s ease; - animation: buttonEntry 1s ease-in-out; - position: fixed; - right: 410px; - bottom: 35px; - height: 300px; - width: 300px; - - h2 { - font-size: 20px; - color: variable.$blue; - margin-bottom: 10px; - font-family: variable.$font-header; - font-weight: 500; - overflow: hidden; /* Hide overflowing text */ - text-overflow: ellipsis; /* Add "..." at the end of truncated text */ - max-width: 250px; /* Restrict container width */ - display: -webkit-box; /* Enables multi-line truncation */ - -webkit-line-clamp: 1; /* Limit to 2 lines */ - -webkit-box-orient: vertical; /* Vertical text orientation */ - white-space: normal; /* Allow wrapping within the box */ - align-content: center; - } - - p { - padding-top: 20px; - color: variable.$white; - font-size: 0.9rem; - overflow: hidden; /* Hide overflowing text */ - text-overflow: ellipsis; /* Add "..." at the end of truncated text */ - max-width: 300px; /* Restrict container width */ - display: -webkit-box; /* Enables multi-line truncation */ - -webkit-line-clamp: 2; /* Limit to 2 lines */ - -webkit-box-orient: vertical; /* Vertical text orientation */ - white-space: normal; /* Allow wrapping within the box */ - font-family: variable.$font-body; - } - - &:hover { - transform: translateY(-5px); - } - - img { - max-width: 100%; - height: auto; - width: 200px; /* Set desired width */ - border-radius: 10px; /* Optional: Rounded corners */ - display: block; /* Ensures it's treated as a block element */ - margin: 0 auto; /* Centers the image horizontally */ - } - } - } - .div5 { - grid-area: 2 / 4 / 3 / 5; - width: 300px; - .entryd { - grid-area: 1 / 3 / 2 / 4; - background-color: variable.$white; - color: black; - border-radius: 10px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - padding: 20px; - border: none; - text-align: center; - cursor: pointer; - transition: transform 0.3s ease; - animation: buttonEntry 1s ease-in-out; - position: fixed; - right: 90px; - bottom: 35px; - height: 300px; - width: 300px; - - h2 { - font-size: 20px; - color: variable.$blue; - margin-bottom: 10px; - font-family: variable.$font-header; - font-weight: 500; - overflow: hidden; /* Hide overflowing text */ - text-overflow: ellipsis; /* Add "..." at the end of truncated text */ - max-width: 250px; /* Restrict container width */ - display: -webkit-box; /* Enables multi-line truncation */ - -webkit-line-clamp: 1; /* Limit to 2 lines */ - -webkit-box-orient: vertical; /* Vertical text orientation */ - white-space: normal; /* Allow wrapping within the box */ - align-content: center; - } - - p { - padding-top: 20px; - color: variable.$blue; - font-size: 14px; - overflow: hidden; /* Hide overflowing text */ - text-overflow: ellipsis; /* Add "..." at the end of truncated text */ - max-width: 300px; /* Restrict container width */ - display: -webkit-box; /* Enables multi-line truncation */ - -webkit-line-clamp: 2; /* Limit to 2 lines */ - -webkit-box-orient: vertical; /* Vertical text orientation */ - white-space: normal; /* Allow wrapping within the box */ - font-family: variable.$font-body; - } - - &:hover { - transform: translateY(-5px); - } - - img { - max-width: 100%; - height: auto; - width: 200px; /* Set desired width */ - border-radius: 10px; /* Optional: Rounded corners */ - display: block; /* Ensures it's treated as a block element */ - margin: 0 auto; /* Centers the image horizontally */ + &:hover { + transform: translate(60px, 0px); + transform: translateY(-5px); + } } } } } +// .entryb { +// grid-area: 1 / 3 / 2 / 4; +// background-color: variable.$green; +// color: black; +// } + +// .entryc { +// border-radius: 10px; +// background-color: variable.$orange; +// color: black; } + +// .entryd { +// background-color: variable.$white; +// color: black; +// border-radius: 10px; +// } diff --git a/nodeJS/Learning/07/app/src/views/index.ejs b/nodeJS/Learning/07/app/src/views/index.ejs index f0c14b1..564fb56 100644 --- a/nodeJS/Learning/07/app/src/views/index.ejs +++ b/nodeJS/Learning/07/app/src/views/index.ejs @@ -12,51 +12,48 @@
-