LeafPig/Web-Dev-Old
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lesson 9

Browse Source
This commit is contained in:
tuffahni
2025-01-03 17:45:23 +00:00
parent a477fc711d
commit a95a0e5ad0
1564 changed files with 1315 additions and 747 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
nodeJS/Learning/07/app/src/index.ts
View File

@@ -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

588
nodeJS/Learning/07/app/src/styles/pages/index.scss
View File

@@ -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;
// }

51
nodeJS/Learning/07/app/src/views/index.ejs
View File

@@ -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>
</a>
<% }); %>
</div>
<div class="div3" >
</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>