lesson 9

nodeJS/Learning/07/app/.dockerignore

@@ -0,0 +1 @@
+node_modules

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"]

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"

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 */

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"}
+{"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"}

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);

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

nodeJS/Learning/07/app/src/styles/pages/index.scss

@@ -18,42 +18,46 @@
 	}
 }
 
-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;
+	.container {
+		display: flex;
+		height: 100vh;
 
 		.div1 {
-		grid-area: 1 / 1 / 3 / 3;
-		padding-top: 160px;
+			width: 50%;
 			display: flex;
-		flex-direction: column;
 			align-items: center;
-		padding: 200px 0px 0px 00px;
+			justify-content: center;
+			flex-direction: column;
 
 			h1 {
 				font-size: 60px;
 				color: variable.$white;
 				font-family: variable.$font-header;
 				font-weight: 300;
-			padding-bottom: 20px;
+				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 {
@@ -70,6 +74,7 @@ body {
 				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 */
@@ -108,18 +113,17 @@ body {
 
 				button {
 					padding: 3.5px 23px;
-				margin: 80px;
 					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;
-					margin: 0px 0px 0px 70px;
 
 						&:hover {
 							background-color: darken(variable.$pink, 10%);
@@ -130,7 +134,6 @@ body {
 					&.imp-button {
 						background-color: variable.$green;
 						color: white;
-					margin: 0px 0px 0px 70px;
 
 						&:hover {
 							background-color: darken(variable.$green, 10%);
@@ -138,23 +141,22 @@ body {
 						}
 					}
 
-				&.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;
 						color: variable.$blue;
-					margin: 0px 0px 0px 70px;
 
 						&:hover {
-						background-color: rgb(209, 206, 206);
+							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);
 						}
 					}
@@ -162,24 +164,26 @@ body {
 			}
 		}
 		.div2 {
-		padding-top: 30px;
-		height: 200px; /* Set desired height */
-		width: 300px;
+			width: 50%;
+			padding-left: 30px;
+			display: flex;
+			flex-wrap: wrap;
+
+			a {
+				text-decoration: none; // Removes the underline
+			}
+
 			.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;
+				margin: 32px 0px 0px 35px;
 				transition: transform 0.3s ease;
 				animation: buttonEntry 1s ease-in-out;
 
@@ -196,7 +200,15 @@ 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;
+				}
+
+				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 */
 				}
 
 				p {
@@ -217,217 +229,23 @@ body {
 					transform: translate(60px, 0px);
 					transform: translateY(-5px);
 				}
+			}
+		}
+	}
+}
+// .entryb {
+// 	grid-area: 1 / 3 / 2 / 4;
+// 	background-color: variable.$green;
+// 	color: black;
+// }
 
-			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 */
-			}
-		}
-	}
+// .entryc {
+// 	border-radius: 10px;
+// 	background-color: variable.$orange;
+// 	color: black; }
 
-	.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 */
-			}
-		}
-	}
-}
+// .entryd {
+// 	background-color: variable.$white;
+// 	color: black;
+// 	border-radius: 10px;
+// }

nodeJS/Learning/07/app/src/views/index.ejs

@@ -12,51 +12,48 @@
 
 	<!-- https://cssgrid-generator.netlify.app/ -->
 	<body>
-		<section class="blog">
+		<div class="container">
 			<div class="div1">
 				<h1>This is my blog page.</h1>
 				<button class="read-more-btn">read more.<span class="icon">&rarr;</span></button>
 				<div class="buttons">
 					<button class="psyc-button">Psychology</button>
 					<button class="imp-button">Implementation Science</button>
-					<button class="code-button">Coding</button>
 					<button class="spirit-button">Spirituality</button>
+					<button class="code-button">Coding</button>
 					</button>
 				</div>
 			</div>
 			<div class="div2">
-				<button class="entrya">
-						<h2>Test header 1</h2>
+				<% posts.data.forEach((post) => { %>
+					<a href="/<%= post.slug %>">
+				<div class="entrya">
+						<h2><%= post.title %></h2>
 						<img src="images/test.png">
-						<p>Amidst the quiet hum of a bustling city, a small coffee shop stood tucked between towering buildings, its warm amber glow spilling onto the cobblestone street. Inside, the aroma of freshly ground beans mingled with the faint scent of vanilla candles, creating an inviting haven for dreamers and wanderers alike. Patrons sipped their steaming cups, some lost in the pages of weathered books, others immersed in conversations that seemed to carry the weight of untold stories. At a corner table, an artist sketched furiously, capturing the essence of the world beyond the shop’s rain-streaked window. The scene felt timeless, a perfect blend of tranquility and vibrant energy, as if the space itself whispered promises of inspiration to all who entered.</p>
-				</button>
+						<p><%= post.description %></p>
 				</div>
-			<div class="div3" >
+				</a>
+				<% }); %>
+			</div>
+		</div>
+<!-- 		
 				<button class="entryb">
-					<h2>Test header 2</h2>
-					<img src="images/test.png"/>
-					<p>Amidst the quiet hum of a bustling city, a small coffee shop stood tucked between towering buildings, its warm amber glow spilling onto the cobblestone street. Inside, the aroma of freshly ground beans mingled with the faint scent of vanilla candles, creating an inviting haven for dreamers and wanderers alike. Patrons sipped their steaming cups, some lost in the pages of weathered books, others immersed in conversations that seemed to carry the weight of untold stories. At a corner table, an artist sketched furiously, capturing the essence of the world beyond the shop’s rain-streaked window. The scene felt timeless, a perfect blend of tranquility and vibrant energy, as if the space itself whispered promises of inspiration to all who entered.</p>
+					<h2></h2>
+					<img />
+					<p></p>
 				</button>
-			</div>
-			<div class="div4" >
+			
 				<button class="entryc">
-					<h2>try this now</h2>
-					<img src="images/test.png"/>
-					<p>Certainly! Here's a randomly generated paragraph:
-
-						Amidst the quiet hum of a bustling city, a small coffee shop stood tucked between towering buildings, its warm amber glow spilling onto the cobblestone street. Inside, the aroma of freshly ground beans mingled with the faint scent of vanilla candles, creating an inviting haven for dreamers and wanderers alike. Patrons sipped their steaming cups, some lost in the pages of weathered books, others immersed in conversations that seemed to carry the weight of untold stories. At a corner table, an artist sketched furiously, capturing the essence of the world beyond the shop’s rain-streaked window. The scene felt timeless, a perfect blend of tranquility and vibrant energy, as if the space itself whispered promises of inspiration to all who entered.</p>
+					<h2></h2>
+					<img />
+					<p></p>
 				</button>
-			</div>
-			<div class="div5" >
+			
 				<button class="entryd">
-					<h2>this is a very long title for me to test things out</h2>
-					<img src="images/test.png">
-					<p>Certainly! Here's a randomly generated paragraph:
+					<h2></h2>
+					<img />
+					<p></p>
+				</button> -->
 
-						Amidst the quiet hum of a bustling city, a small coffee shop stood tucked between towering buildings, its warm amber glow spilling onto the cobblestone street. Inside, the aroma of freshly ground beans mingled with the faint scent of vanilla candles, creating an inviting haven for dreamers and wanderers alike. Patrons sipped their steaming cups, some lost in the pages of weathered books, others immersed in conversations that seemed to carry the weight of untold stories. At a corner table, an artist sketched furiously, capturing the essence of the world beyond the shop’s rain-streaked window. The scene felt timeless, a perfect blend of tranquility and vibrant energy, as if the space itself whispered promises of inspiration to all who entered.</p>
-				</button>
-			</div>
-		</section>
-		<script src="js/index.js"></script>
 	</body>
 </html>

nodeJS/Learning/07/db/PG_VERSION

@@ -0,0 +1 @@
+14