Skip to content

Commit d4099e0

Browse files
X7mdX7md
committed
fix TS issues, add avatar
1 parent 4fe629a commit d4099e0

7 files changed

Lines changed: 2132 additions & 1427 deletions

File tree

‎package-lock.json‎

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

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111
},
1212
"dependencies": {
1313
"@astrojs/check": "^0.9.4",
14-
"@astrojs/mdx": "^4.2.4",
15-
"@astrojs/rss": "^4.0.11",
16-
"@astrojs/sitemap": "^3.3.0",
14+
"@astrojs/mdx": "^4.3.0",
15+
"@astrojs/rss": "^4.0.12",
16+
"@astrojs/sitemap": "^3.4.1",
1717
"@astrojs/tailwind": "^6.0.2",
1818
"@types/alpinejs": "^3.7.1",
1919
"alpinejs": "^3.12.1",
20-
"astro": "^5.7.4",
20+
"astro": "^5.11.0",
2121
"rehype-autolink-headings": "^6.1.1",
2222
"rehype-pretty-code": "^0.13.0",
2323
"rehype-rewrite": "^3.0.6",

‎public/images/1x1/avatar.jpg‎

201 KB
Loading

‎src/layouts/Layout.astro‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,45 @@ const { title, description } = Astro.props;
105105
--pico-background-color: #000 !important;
106106
--pico-card-background-color: #0A0A0A !important;
107107
}
108+
109+
.author-box {
110+
display: flex;
111+
align-items: center;
112+
gap: 0.5rem;
113+
padding: 0.5rem 0.75rem;
114+
background: var(--pico-card-background-color);
115+
border-radius: 10px;
116+
box-shadow: 0 2px 8px #0002;
117+
}
118+
.author-avatar {
119+
width: 48px;
120+
height: 48px;
121+
object-fit: cover;
122+
border-radius: 50%;
123+
border: 2px solid #fff2;
124+
box-shadow: 0 1px 4px #0003;
125+
}
126+
.author-text {
127+
color: whitesmoke;
128+
display: flex;
129+
flex-direction: column;
130+
gap: 0.05rem;
131+
}
132+
.author-name {
133+
margin-bottom: 0.05rem;
134+
font-weight: bold;
135+
font-size: 1.05rem;
136+
}
137+
.author-desc {
138+
color: #bdbdbd;
139+
font-size: 0.92em;
140+
}
141+
.author-hr {
142+
margin: 0.7rem 0 0.4rem 0;
143+
border: none;
144+
height: 1px;
145+
background: linear-gradient(90deg, #fff1 0%, #fff6 50%, #fff1 100%);
146+
}
108147
.navbar {
109148
position: sticky;
110149
top: 0;

‎src/pages/about.astro‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,17 @@ import { profilePage } from '@/schema.blog';
1313
>
1414
<main>
1515
<section class="container row text-rigth py-3">
16-
<h2>حمد بنقالي</h2>
17-
<p class="instructions">
18-
طالب تصميم جرافيكي 👨🏽‍🎨 في جامعة أم القرى،
19-
تقني شغوف بتطوير البرمجيات
20-
وتقنيات الويب.
21-
</p>
16+
<div class="d-flex align-items-center gap-3 mb-3">
17+
<img src="/images/1x1/avatar.jpg" alt="حمد بنقالي" class="rounded-circle avatar" style="width: 80px; height: 80px; object-fit: cover;">
18+
<div>
19+
<h2 class="mb-1">حمد بنقالي</h2>
20+
<p class="instructions mb-0">
21+
طالب تصميم جرافيكي 👨🏽‍🎨 في جامعة أم القرى،
22+
تقني شغوف بتطوير البرمجيات
23+
وتقنيات الويب.
24+
</p>
25+
</div>
26+
</div>
2227
<div class="d-flex py-3 gap-3 justify-content-start">
2328
<a href="https://github.com/x7md">
2429
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
@@ -95,4 +100,14 @@ import { profilePage } from '@/schema.blog';
95100
padding-top: 1.75rem;
96101
padding-bottom: 1.75rem;
97102
}
103+
104+
.avatar {
105+
border: 2px solid var(--pico-primary-border);
106+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
107+
transition: transform 0.2s ease;
108+
}
109+
110+
.avatar:hover {
111+
transform: scale(1.05);
112+
}
98113
</style>

‎src/pages/posts/[...slug].astro‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,45 @@ import Layout from '@/layouts/Layout.astro';
33
import { type CollectionEntry, getCollection } from 'astro:content';
44
55
export async function getStaticPaths() {
6-
const posts = await getCollection('posts', ({ data }) => {
7-
return data.draft !== true;
6+
const posts = await getCollection('posts', (post: CollectionEntry<'posts'>) => {
7+
return post.data.draft !== true;
88
});
9-
return posts.map((post) => ({
10-
//@ts-expect-error
9+
return posts.map((post: CollectionEntry<'posts'>) => ({
1110
params: { slug: post.slug },
1211
props: post,
1312
}));
1413
}
1514
type Props = CollectionEntry<'posts'>;
1615
1716
const post = Astro.props;
18-
// @ts-expect-error
1917
const { Content } = await post.render();
2018
---
2119

2220
<Layout title={post.data.title} description={post.data.description}>
23-
<main>
24-
<article class="mx-lg-5 m-3">
21+
<main>
22+
<article class="mx-lg-5 m-3">
2523
<div class="p-2">
2624
<h1>{post.data.title}</h1>
2725
<time>{new Date(post.data.pubDate)
28-
.toLocaleString('ar-SA-u-ca-islamic-umalqura', {
29-
weekday: 'long',
30-
year: 'numeric',
31-
month: 'long',
32-
day: 'numeric',
33-
})}</time>
26+
.toLocaleString('ar-SA-u-ca-islamic-umalqura', {
27+
weekday: 'long',
28+
year: 'numeric',
29+
month: 'long',
30+
day: 'numeric',
31+
})}</time>
32+
33+
<!-- Author Section -->
34+
<hr class="author-hr">
35+
<div class="author-box">
36+
<img src="/images/1x1/avatar.jpg" alt="حمد بنقالي" class="author-avatar">
37+
<div class="author-text">
38+
<h6 class="author-name">حمد بنقالي</h6>
39+
<small class="author-desc">تقني شغوف بتطوير البرمجيات وتقنيات الويب</small>
40+
</div>
41+
</div>
3442
</div>
3543
<hr>
36-
<Content />
37-
</article>
38-
</main>
44+
<Content />
45+
</article>
46+
</main>
3947
</Layout>

‎src/pages/posts/index.astro‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
11
---
22
import Layout from '@/layouts/Layout.astro';
3-
import { blog } from '@/schema.blog';
4-
import { getCollection } from 'astro:content';
3+
import { getCollection, type CollectionEntry } from 'astro:content';
54
6-
const posts = await getCollection('posts', ({ data }) => {
7-
return data.draft !== true;
8-
});
5+
type BlogPost = CollectionEntry<'posts'>;
6+
7+
const posts: BlogPost[] = await getCollection('posts', (post: BlogPost) => {
8+
return post.data.draft !== true;
9+
});
10+
11+
function sortPosts(a: BlogPost, b: BlogPost) {
12+
return Date.parse(a.data.pubDate.valueOf()) - Date.parse(b.data.pubDate.valueOf());
13+
}
914
---
1015

1116
<Layout title="مدونة x7md">
1217
<main>
13-
<section class="container">
18+
<section class="container">
1419
<div class="text-center">
1520
<h2>التدوينات</h2>
1621
</div>
1722
<div class="d-flex flex-column justify-content-center">
1823
<ol role="list" class="d-flex flex-column align-items-center justify-content-center">
1924
{
20-
posts.sort(
21-
(a, b) => Date.parse(a.data.pubDate.valueOf()) - Date.parse(b.data.pubDate.valueOf())
22-
).reverse().map((post) => {
23-
return (
25+
posts.sort(sortPosts).reverse().map((post: BlogPost) => {
26+
return (
2427
<li>
2528
<a href={"/posts/" + post.slug}>
2629
<article>
@@ -37,19 +40,19 @@ const posts = await getCollection('posts', ({ data }) => {
3740
</article>
3841
</a>
3942
</li>
40-
);
41-
})
43+
);
44+
})
4245
}
4346
</ol>
4447
</div>
4548
</section>
46-
</main>
49+
</main>
4750
</Layout>
4851
<style>
4952
ol {
5053
list-style-type: none;
5154
margin-block-start: 0;
52-
margin-block-end: 0;
55+
margin-block-end: 0;
5356
padding-inline-start: 0;
5457
}
5558
ol a {

0 commit comments

Comments
 (0)