Skip to content

Commit 179e9ce

Browse files
siddharthmohitesiddharthmohite
committed
Added first blog content and removed guardians of galaxy font
1 parent 826d532 commit 179e9ce

File tree

9 files changed

+157
-23
lines changed

9 files changed

+157
-23
lines changed

‎app/routes/blogs.tsx

Lines changed: 77 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,17 @@ import React, { useEffect, useState } from "react"
22
import "./styles/Blogs.scss"
33
import { useSearchParams } from "@remix-run/react";
44

5-
export default function blogs() {
5+
6+
export default function Blogs() {
67
const [searchParams] = useSearchParams();
78
const blogid = searchParams.get("blogid");
89
const [selectedBlogId, setSelectedBlogId] = useState<number | null>(null);
10+
const BlogContent = [
11+
12+
{id: 1,title:"Python Instance-Level Initialization", content: "There was a time when all of our code was relying on a static date from the backend. Or rather, I should say, it was a bug that crept into our system. This caused significant issues for the frontend since some of the logic depended on that date for displaying information to users, while other parts of our application were performing date-related operations.",
13+
content1: "A debugger is an essential tool for any programmer. If there's one skill every developer should master, it's how to set up and use a debugger effectively. While stepping through the debugging process, we discovered that one of our class definitions had a datetime value being assigned at the time an instance was created. Here’s an example of what that looked like:",
14+
img:"/ragvec.png"},
15+
]
916

1017
useEffect(() => {
1118
if (blogid) {
@@ -17,17 +24,78 @@ export default function blogs() {
1724
}
1825
}
1926
}, [blogid]);
20-
21-
const BlogContent = [
22-
{id: 1, title:"Blog 1", content: "This is the content of blog 1", img:"/ragvec.png"},
23-
24-
]
27+
2528
return(
2629
<div className="blogs">
27-
<h1>this is a blogs page</h1>
28-
</div>
30+
{BlogContent.map((blog) => (
31+
<div className="blogs-container">
32+
<div className="blogs-image-container">
33+
<img src={blog.img} className="blogs-image" alt="blog image"/>
34+
</div>
35+
<h1 className="title">{blog.title}</h1>
36+
<div className="blogs-content-container">
37+
<h2 className="heading">Introduction</h2>
38+
<span className="content">{blog.content}</span>
39+
<h2 className="heading">Identifying the Problem</h2>
40+
<span className="content">{blog.content1}</span>
41+
<pre>
42+
<code>
43+
{`
44+
from datetime import datetime
45+
class Foo:
46+
def __init__(self, name: str, age: int):
47+
self.name = name
48+
self.age = age
49+
self.created = datetime.now()
50+
`}
51+
</code>
52+
</pre>
53+
<span className="content">
54+
The issue was that the created attribute was assigned at the moment the class instance was created, not dynamically at request time. Since we were deploying our backend on Azure, every time a long-lived instance of this class persisted, it retained an outdated timestamp instead of generating a new one per request. This led to inconsistencies in our application.
55+
</span>
56+
<h2 className="heading">Solution</h2>
57+
<span className="content">
58+
To fix this, we ensured that the datetime value was assigned at request time rather than when the class instance was initialized. One approach was moving the datetime assignment logic outside of the class and into the API routing level.
59+
Here's the corrected approach:
60+
</span>
61+
<pre>
62+
<code>
63+
{`
64+
from datetime import datetime
65+
def create_foo(name: str, age: int):
66+
return {
67+
"name": name,
68+
"age": age,
69+
"created": datetime.now()
70+
}`}
71+
</code>
72+
</pre>
73+
<span className="content">
74+
Now, every time a request is made, a fresh timestamp is generated instead of relying on a timestamp set at the time of class instantiation.
75+
Alternatively, if we wanted to stick with the class-based approach but ensure a fresh timestamp, we could do this:
76+
</span>
77+
<pre>
78+
<code>
79+
{`
80+
class Foo:
81+
def __init__(self, name: str, age: int):
82+
self.name = name
83+
self.age = age
84+
self.created = datetime.now()
2985
30-
)
86+
@classmethod
87+
def create(cls, name: str, age: int):
88+
return cls(name, age)`}
89+
</code>
90+
</pre>
91+
<span className="content">
92+
This ensures that the timestamp is correctly assigned each time a new instance is explicitly created.
93+
</span>
94+
</div>
95+
</div>
96+
))}
97+
</div>
98+
);
3199

32100

33101
};

‎app/routes/components/Blog.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ export default function Blog({onClose}) {
1010

1111
const blogs =[
1212

13-
{blogid: 1, title: "Python class Functions", date: "January 15, 2024", sneakpeek: "This is a blog post about python class functions. It is a very interesting topic and I hope you enjoy it.", img: "/ragvec.png"},
14-
{blogid: 2, title: "Python class Functions", date: "January 15, 2024", sneakpeek: "This is a blog post about python class functions. It is a very interesting topic and I hope you enjoy it.", img: "/ragvec.png"},
15-
{blogid: 3, title: "Python class Functions", date: "January 15, 2024", sneakpeek: "This is a blog post about python class functions. It is a very interesting topic and I hope you enjoy it.", img: "/ragvec.png"},
16-
{blogid: 4, title: "Python class Functions", date: "January 15, 2024", sneakpeek: "This is a blog post about python class functions. It is a very interesting topic and I hope you enjoy it.", img: "/ragvec.png"},
13+
{blogid: 1, title: "Instance-Level Initialization", date: "January 15, 2024", sneakpeek: "🚨 Discover how a simple instance-level mistake caused chaos in our backend!", img: "/ragvec.png"},
14+
{blogid: 2, title: "Blog 2 Placeholder", date: "January 15, 2024", sneakpeek: "This is a blog post placeholder for blog 2. It is a very interesting topic and I hope you enjoy it.", img: "/ragvec.png"},
15+
{blogid: 3, title: "Blog 3 Placeholder", date: "January 11, 2024", sneakpeek: "This is a blog post placeholder for blog 3. It is a very interesting topic and I hope you enjoy it.", img: "/ragvec.png"},
16+
{blogid: 4, title: "Blog 4 Placeholder", date: "January 10, 2024", sneakpeek: "This is a blog post placeholder for blog 4. It is a very interesting topic and I hope you enjoy it.", img: "/ragvec.png"},
1717

1818
]
1919
const handleButtonClose = () =>
@@ -43,7 +43,7 @@ export default function Blog({onClose}) {
4343
</button>
4444
</div>
4545
</div>
46-
<div className="main-container">
46+
<div className="blog-main-container">
4747
<div className="top-bar">
4848
<span className="title">Blogs</span>
4949
</div>

‎app/routes/styles/AboutMe.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
width: 100%;
6363
height:100%;
6464
object-fit: cover;
65+
border-radius: 20%;
6566
}
6667

6768
.introduction{
@@ -79,7 +80,7 @@
7980
}
8081

8182
.introduction-ending{
82-
font-family: 'GuardiansGalaxyFlood';
83+
font-family: "SF-Pro Medium";
8384
font-size: 1.5rem;
8485
margin-left:1rem;
8586
border-radius: 40px;

‎app/routes/styles/Blog.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,10 @@
7777
}
7878
}
7979

80-
.main-container{
80+
.blog-main-container{
8181
flex: 1;
8282
overflow-y: auto;
83+
overflow-x: hidden;
8384
background-color: #ffffff;
8485
z-index:30;
8586
}

‎app/routes/styles/Blogs.scss

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,59 @@
33
flex-direction:column;
44
align-items:center;
55
justify-content:center;
6-
width: 70vw;
7-
height: 90vh;
6+
align-content: center;
7+
width: 100vw;
8+
height: 100vh;
9+
}
10+
11+
.blogs-image-container{
12+
display: flex;
13+
width: 10rem;
14+
height: 10rem;
15+
margin: 1rem;
16+
align-self: center;
17+
}
18+
.blogs-container{
19+
display: flex;
20+
flex-direction:column;
21+
width: 55vw;
22+
height: fit-content;
23+
border-radius: 1rem;
24+
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
25+
overflow-y: auto;
26+
padding: 2rem;
27+
}
28+
.blogs-image{
29+
width: 100%;
30+
height: 100%;
31+
}
32+
33+
.title{
34+
font-size: 1.5rem;
35+
font-weight: bold;
36+
margin: 1rem;
37+
}
38+
.content{
39+
font-size: 1rem;
40+
margin: 1rem;
41+
}
42+
.blogs-content-container{
43+
display:flex;
44+
flex-direction: column;
45+
}
46+
.heading{
47+
font-size: 1.2rem;
48+
font-weight: bold;
49+
margin: 1rem;
50+
}
51+
pre{
52+
width: fit-content;
53+
background-color: rgb(233, 228, 228);
54+
padding: 10px;
55+
margin: 1rem;
56+
}
57+
code{
58+
width: fit-content;
59+
height: fit-content;
60+
background-color: rgb(234, 228, 228);
861
}

‎app/routes/styles/Terminal.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,4 +96,8 @@
9696
.terminal-input{
9797
margin-left: 0.2rem;
9898
font-family: "SF-Pro Medium",-apple-system, BlinkMacSystemFont;
99+
border: none;
100+
border-color: none;
101+
outline: none;
102+
background-color: transparent;
99103
}

‎app/routes/styles/fonts.css

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,6 @@
55
font-style: normal;
66
}
77

8-
@font-face {
9-
font-family: "SF-Pro Medium";
10-
src: url("./fonts/SFArabic.ttf") format("truetype");
11-
font-style: normal;
12-
}
138

149
@font-face {
1510
font-family: 'GuardiansGalaxy';

‎package-lock.json

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@remix-run/dev": "^2.15.2",
2727
"@types/react": "^18.2.20",
2828
"@types/react-dom": "^18.2.7",
29+
"@types/react-syntax-highlighter": "^15.5.13",
2930
"@typescript-eslint/eslint-plugin": "^6.7.4",
3031
"@typescript-eslint/parser": "^6.7.4",
3132
"autoprefixer": "^10.4.19",

0 commit comments

Comments
 (0)