First Commit

nodeJS/Learning/07/app/docker-compose.yaml

@@ -1,16 +0,0 @@
-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/package.json

@@ -19,6 +19,7 @@
 	"dependencies": {
 		"dotenv": "^16.4.7",
 		"ejs": "^3.1.10",
-		"express": "^4.21.2"
+		"express": "^4.21.2",
+		"marked": "^15.0.5"
 	}
 }

nodeJS/Learning/07/app/pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       express:
         specifier: ^4.21.2
         version: 4.21.2
+      marked:
+        specifier: ^15.0.5
+        version: 15.0.5
     devDependencies:
       '@types/express':
         specifier: ^5.0.0
@@ -495,6 +498,11 @@ packages:
   make-error@1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
 
+  marked@15.0.5:
+    resolution: {integrity: sha512-xN+kSuqHjxWg+Q47yhhZMUP+kO1qHobvXkkm6FX+7N6lDvanLDd8H7AQ0jWDDyq+fDt/cSrJaBGyWYHXy0KQWA==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -1226,6 +1234,8 @@ snapshots:
 
   make-error@1.3.6: {}
 
+  marked@15.0.5: {}
+
   math-intrinsics@1.1.0: {}
 
   media-typer@0.3.0: {}

nodeJS/Learning/07/app/public/css/pages/blogpage.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/styles/_variable.scss","../../../src/styles/_reset.scss","../../../src/styles/pages/blogpage.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;AAmDA;;AAjDA;AAAA;EACC;EACA,OF1CI;EE2CJ,aFxCU;EEyCV;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA,aFlDQ,4BEkD0B;EAClC;EACA;EACA,OF3DG,SE2DoB;EACvB;EACA;EACA,kBF5DI,SE4D+B;EACnC;EACA;EACA;;AAEA;AAAA;EACC,kBFpEE,SEoEgC;EAClC,OFnEG,SEmEqB;;AAGzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBF/EE,SE+EgC;EAClC,OF9EG,SE8EqB;EACxB;EACA;;AAGD;AAAA;EACC,kBFpFG,SEoFgC;EACnC,OFvFE,SEuFqB;;AAKzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA;EACA,aFpGO;EEqGP;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC,kBFjHC;EEkHD,OFnHC;;AEqHD;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFzHE;EE0HF;;AAEA;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFpIE;EEqIF,OFvIC;;AEyID;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBF5IG;EE6IH;;AAEA;AAAA;EACC;EACA;;AAML;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC,kBFrKG;EEsKH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA,OFrLE;EEsLF;EACA,aFlLS;EEmLT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA,OF7ME;EE8MF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFhNO;;AEmNR;AAAA;EACC;EACA","file":"blogpage.css"}

nodeJS/Learning/07/app/public/css/pages/index copy.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/styles/_variable.scss","../../../src/styles/_reset.scss","../../../src/styles/pages/index%20copy.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;AAmDA;;AAjDA;AAAA;EACC;EACA,OF1CI;EE2CJ,aFxCU;EEyCV;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA,aFlDQ,4BEkD0B;EAClC;EACA;EACA,OF3DG,SE2DoB;EACvB;EACA;EACA,kBF5DI,SE4D+B;EACnC;EACA;EACA;;AAEA;AAAA;EACC,kBFpEE,SEoEgC;EAClC,OFnEG,SEmEqB;;AAGzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBF/EE,SE+EgC;EAClC,OF9EG,SE8EqB;EACxB;EACA;;AAGD;AAAA;EACC,kBFpFG,SEoFgC;EACnC,OFvFE,SEuFqB;;AAKzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA;EACA,aFpGO;EEqGP;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC,kBFjHC;EEkHD,OFnHC;;AEqHD;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFzHE;EE0HF;;AAEA;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFpIE;EEqIF,OFvIC;;AEyID;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBF5IG;EE6IH;;AAEA;AAAA;EACC;EACA;;AAML;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC,kBFrKG;EEsKH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA,OFrLE;EEsLF;EACA,aFlLS;EEmLT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA,OF7ME;EE8MF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFhNO;;AEmNR;AAAA;EACC;EACA","file":"index%20copy.css"}

nodeJS/Learning/07/app/public/css/pages/index.css

@@ -92,17 +92,8 @@ html .container .div1 h1 {
   color: #f7ebec;
   font-family: "Lexend", serif;
   font-weight: 300;
-  padding: 80px 0px 0px 45px;
+  margin-top: 10vh;
-}
+  padding: 0px 0px 0px 4vh;
-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 {
@@ -119,7 +110,7 @@ html .container .div1 .read-more-btn {
   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 */
+  margin-top: 2vh; /* Space between text and next element */
 }
 body .container .div1 .read-more-btn:hover,
 html .container .div1 .read-more-btn:hover {
@@ -153,7 +144,8 @@ html .container .div1 .buttons {
   gap: 10px;
   padding: 20px;
   padding-right: 85px;
-  margin-top: 20px;
+  margin-top: 2.5vh;
+  margin-bottom: 5vh;
 }
 body .container .div1 .buttons button,
 html .container .div1 .buttons button {
@@ -249,23 +241,23 @@ html .container .div2 .entrya h2 {
 }
 body .container .div2 .entrya img,
 html .container .div2 .entrya img {
-  max-width: 100%;
+  height: 130px;
-  height: auto;
   width: 200px; /* Set desired width */
+  overflow: hidden;
   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;
+  padding: 20px 10px 0 10px;
   color: #3b3561;
   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-line-clamp: 3; /* Limit to 2 lines */
   -webkit-box-orient: vertical; /* Vertical text orientation */
   white-space: normal; /* Allow wrapping within the box */
   font-family: "Space Grotesk", monospace;

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;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"}
+{"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;AAmDA;;AAjDA;AAAA;EACC;EACA,OF1CI;EE2CJ,aFxCU;EEyCV;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA,aFlDQ,4BEkD0B;EAClC;EACA;EACA,OF3DG,SE2DoB;EACvB;EACA;EACA,kBF5DI,SE4D+B;EACnC;EACA;EACA;;AAEA;AAAA;EACC,kBFpEE,SEoEgC;EAClC,OFnEG,SEmEqB;;AAGzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBF/EE,SE+EgC;EAClC,OF9EG,SE8EqB;EACxB;EACA;;AAGD;AAAA;EACC,kBFpFG,SEoFgC;EACnC,OFvFE,SEuFqB;;AAKzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA;EACA,aFpGO;EEqGP;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC,kBFjHC;EEkHD,OFnHC;;AEqHD;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFzHE;EE0HF;;AAEA;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFpIE;EEqIF,OFvIC;;AEyID;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBF5IG;EE6IH;;AAEA;AAAA;EACC;EACA;;AAML;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC,kBFrKG;EEsKH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA,OFrLE;EEsLF;EACA,aFlLS;EEmLT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA,OF7ME;EE8MF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFhNO;;AEmNR;AAAA;EACC;EACA","file":"index.css"}

nodeJS/Learning/07/app/public/css/pages/post.css

@@ -0,0 +1,79 @@
+@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap");
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+#root,
+#__next {
+  isolation: isolate;
+}
+
+/* Style each tag in an html */
+/* describe to chatgpt what you want, good at css, or css reference */
+/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
+body {
+  background: linear-gradient(to top right, #3b3561, rgb(191.3, 187.1, 217.9));
+  height: 100vh;
+}
+body .content {
+  margin: 10vh;
+  padding: 5vh;
+  align-items: center;
+}
+body .content .h1 {
+  font-family: "Lexend", serif;
+}
+body .content .img {
+  height: auto;
+  width: 35vh;
+}
+body .content .post-description {
+  font-family: "Space Grotesk", monospace;
+}
+body .content .post-content {
+  font-family: "Space Grotesk", monospace;
+}
+
+/*# sourceMappingURL=post.css.map */

nodeJS/Learning/07/app/public/css/pages/post.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/styles/_variable.scss","../../../src/styles/_reset.scss","../../../src/styles/pages/post.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;EAKA;;AAEA;EACC;EACA;EACA;;AAEA;EACC,aFhBW;;AEmBZ;EACC;EACA;;AAGD;EACC,aFxBS;;AE2BV;EACC,aF5BS","file":"post.css"}

nodeJS/Learning/07/app/src/index.ts

@@ -2,6 +2,7 @@ import dotenv from "dotenv";
 dotenv.config({ path: ".env" });
 
 import express, { Application, Request, Response } from "express";
+import { marked } from "marked";
 
 const app: Application = express();
 const port: number = parseInt(process.env.PORT as string) || 3000;
@@ -16,24 +17,42 @@ app.set("view engine", "ejs");
 
 //Get strapi data
 app.get("/", async (_req: Request, res: Response) => {
-	const postsData = await fetch("http://cms:1337/api/blog-posts", {
+	const postsData = await fetch(
+		"http://cms:1337/api/blog-posts?populate=cover_image",
+		{
+			method: "GET",
+			headers: {
+				Authorization: `Bearer ${process.env.STRAPI_BEARER_TOKEN}`,
+				"Content-Type": "application/json",
+			},
+		}
+	).then((res) => {
+		return res.json();
+	});
+
+	res.render("index", { posts: postsData });
+});
+
+app.get("/post/:slug", async (req: Request, res: Response) => {
+	//anything after the colon is a variable. if you go to any website that is
+	const postsData = await fetch(
+		`http://cms:1337/api/blog-posts?filters[slug]=${req.params.slug}&populate=cover_image`,
+		{
 			method: "GET",
 			headers: {
 				Authorization: `Bearer ${process.env.STRAPI_BEARER_TOKEN}`,
 			},
-	}).then((response) => response.json());
+		}
+	).then((response) => response.json());
 
-	res.render("index", { posts: postsData });
+	const markedcontent = marked(postsData.data[0].content);
+
+	res.render("post", { post: postsData.data[0], markedcontent });
 });
 
 //Static route
 app.use(express.static(`${__dirname}/../public`));
 
-//check and send index ejs
-app.get("/", (_req, res) => {
-	res.render("index");
-});
-
 app.listen(port, (): void => {
 	console.log(`Server is running on port ${port}`);
 });

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

@@ -47,17 +47,8 @@ html {
 				color: variable.$white;
 				font-family: variable.$font-header;
 				font-weight: 300;
-				padding: 80px 0px 0px 45px;
+				margin-top: 10vh;
-			}
+				padding: 0px 0px 0px 4vh;
-
-			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 {
@@ -74,7 +65,7 @@ html {
 				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 */
+				margin-top: 2vh; /* Space between text and next element */
 
 				&:hover {
 					background-color: variable.$blue; /* Change background color on hover */
@@ -109,7 +100,8 @@ html {
 				gap: 10px;
 				padding: 20px;
 				padding-right: 85px;
-				margin-top: 20px;
+				margin-top: 2.5vh;
+				margin-bottom: 5vh;
 
 				button {
 					padding: 3.5px 23px;
@@ -203,23 +195,23 @@ html {
 				}
 
 				img {
-					max-width: 100%;
+					height: 130px;
-					height: auto;
 					width: 200px; /* Set desired width */
+					overflow: hidden;
 					border-radius: 10px; /* Optional: Rounded corners */
 					display: block; /* Ensures it's treated as a block element */
 					margin: 0 auto; /* Centers the image horizontally */
 				}
 
 				p {
-					padding-top: 20px;
+					padding: 20px 10px 0 10px;
 					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-line-clamp: 3; /* Limit to 2 lines */
 					-webkit-box-orient: vertical; /* Vertical text orientation */
 					white-space: normal; /* Allow wrapping within the box */
 					font-family: variable.$font-body;

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

@@ -0,0 +1,41 @@
+@use "../reset";
+@use "../variable";
+@use "../components/navbar";
+
+/* Style each tag in an html */
+/* describe to chatgpt what you want, good at css, or css reference */
+
+/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
+
+body {
+	background: linear-gradient(
+		to top right,
+		variable.$blue,
+		lighten(variable.$blue, 50%)
+	);
+	height: 100vh;
+
+	.content {
+		margin: 10vh;
+		padding: 5vh;
+		align-items: center;
+		color: variable.$blue;
+
+		.h1 {
+			font-family: variable.$font-header;
+		}
+
+		.img {
+			height: auto;
+			width: 35vh;
+		}
+
+		.post-description {
+			font-family: variable.$font-body;
+		}
+
+		.post-content {
+			font-family: variable.$font-body;
+		}
+	}
+}

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

@@ -26,10 +26,10 @@
 			</div>
 			<div class="div2">
 				<% posts.data.forEach((post) => { %>
-					<a href="/<%= post.slug %>">
+					<a href="/post/<%= post.slug %>">
 				<div class="entrya">
 					<h2><%= post.title %></h2>
-						<img src="images/test.png">
+					<img src="http://localhost:1337<%=post.cover_image.url%>" alt="<%= post.title %>" />
 					<p><%= post.description %></p>
 				</div>
 				</a>

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

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>My Blog Post</title>
+
+		<link rel="icon" href="images/favicon.ico" />
+
+		<link rel="stylesheet" href="css/pages/post.css" />
+	</head>
+	<body>
+		<div class="content">
+			<h1><%=post.title%></h1>
+			<div class="post-description"><%=post.description%></div>
+			<img src="http://localhost:1337<%=post.cover_image.url%>" />
+			<div class="post-content"><%-markedcontent%></div>
+		</div>
+	</body>
+</html>

nodeJS/Learning/07/cms/src/api/blog-post/content-types/blog-post/schema.json

@@ -34,7 +34,7 @@
       "required": true
     },
     "content": {
-      "type": "blocks"
+      "type": "richtext"
     }
   }
 }

nodeJS/Learning/07/docker-compose.yaml

@@ -0,0 +1,48 @@
+services:
+  web:
+    build: ./app
+    ports:
+      - "3000:3000"
+    # files are put in here
+    env_file: ./app/.env
+    volumes:
+      - ./app:/usr/src/app
+      - ./app/node_modules:/usr/src/app/node_modules
+    command: ["yarn", "dev"]
+  cms:
+    container_name: strapi
+    build:
+      context: ./cms
+      dockerfile: Dockerfile
+    restart: unless-stopped
+    env_file: ./cms/.env
+    environment:
+      DATABASE_CLIENT: ${DATABASE_CLIENT}
+      DATABASE_HOST: ${DATABASE_HOST}
+      DATABASE_PORT: ${DATABASE_PORT}
+      DATABASE_NAME: ${DATABASE_NAME}
+      DATABASE_USERNAME: ${DATABASE_USERNAME}
+      DATABASE_PASSWORD: ${DATABASE_PASSWORD}
+      ADMIN_JWT_SECRET: ${ADMIN_JWT_SECRET}
+      APP_KEYS: ${APP_KEYS}
+    volumes:
+      - ./cms/config:/opt/app/config
+      - ./cms/src:/opt/app/src
+      - ./cms/package.json:/opt/package.json
+      - ./cms/yarn.lock:/opt/yarn.lock
+      - ./cms/.env:/opt/app/.env
+      - ./cms/public/uploads:/opt/app/public/uploads
+    ports:
+      - "1337:1337"
+  db:
+    container_name: db
+    image: postgres:14
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: ${DATABASE_USERNAME}
+      POSTGRES_PASSWORD: ${DATABASE_PASSWORD}
+      POSTGRES_DB: ${DATABASE_NAME}
+    ports:
+      - "5432:5432"
+    volumes: #mirror where postgres put their data
+      - ./db:/var/lib/postgresql/data