My personal site.
theclashfruit.me
feat: blog grid
+152
-10
+32
-7
app/(main)/blog/page.tsx
+32
-7
app/(main)/blog/page.tsx
···
4
4
import Link from 'next/link';
5
5
6
6
import type { Metadata } from 'next';
7
-
import { not } from 'drizzle-orm';
7
+
8
+
import { not, desc } from 'drizzle-orm';
9
+
10
+
import styles from '@/styles/pages/Blog.module.scss';
8
11
9
12
export const dynamic = 'force-dynamic';
10
13
···
17
20
.select()
18
21
.from(postsTable)
19
22
.where(not(postsTable.draft))
20
-
.orderBy(postsTable.publishedAt);
23
+
.orderBy(desc(postsTable.publishedAt));
21
24
22
25
return (
23
26
<>
24
-
<h2>Blog Posts</h2>
25
-
26
-
<ul>
27
+
<ul className={styles.blogGrid}>
27
28
{posts.map((p) => (
28
29
<li key={p.id}>
29
-
<Link href={`/post/${p.slug}`}>{p.title}</Link> (
30
-
{p.publishedAt.toLocaleDateString('en-GB')})
30
+
<div>
31
+
<Link href={`/post/${p.slug}`}></Link>
32
+
33
+
<div
34
+
style={{
35
+
marginBottom: '6px'
36
+
}}
37
+
>
38
+
<h6
39
+
style={{
40
+
margin: 0
41
+
}}
42
+
>
43
+
{p.title}
44
+
</h6>
45
+
<label
46
+
style={{
47
+
color: 'var(--outline)'
48
+
}}
49
+
>
50
+
{p.publishedAt.toLocaleString('en-GB')}
51
+
</label>
52
+
</div>
53
+
54
+
<p>{p.excerpt}</p>
55
+
</div>
31
56
</li>
32
57
))}
33
58
</ul>
+2
-2
app/(main)/page.mdx
+2
-2
app/(main)/page.mdx
···
6
6
I do programming stuff like websites, Android apps, game mods and more.
7
7
I have quite a few projects in the works at the moment, you can check out my projects on the [projects page](/projects).
8
8
9
-
I have very early (I've been running for about 5 years now...) homelab with my old pc being the server, initially it
9
+
I have a very early (I've been running for about 5 years now...) homelab with my old pc being the server, initially it
10
10
was powered by a very old computer with a Pentium 4; it's currently running Proxmox with two vms, one for HomeAssistant
11
-
and a generic Debian 13 one for hosting nginx, Immich and Jellyfin.
11
+
and a generic Debian 13 one for hosting nginx, Immich and Jellyfin.
+117
styles/pages/Blog.module.scss
+117
styles/pages/Blog.module.scss
···
1
+
.blogGrid {
2
+
display: grid;
3
+
4
+
grid-template-columns: 1fr 1fr;
5
+
6
+
gap: 8px;
7
+
8
+
list-style: none;
9
+
10
+
> li {
11
+
padding: 12px;
12
+
13
+
background: var(--surfaceContainer);
14
+
15
+
border: 1px solid var(--outlineVariant);
16
+
border-radius: 12px;
17
+
18
+
transition: 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
19
+
20
+
> div {
21
+
position: relative;
22
+
23
+
height: 100%;
24
+
width: 100%;
25
+
26
+
> a {
27
+
position: absolute;
28
+
29
+
top: 0;
30
+
left: 0;
31
+
32
+
height: 100%;
33
+
width: 100%;
34
+
}
35
+
}
36
+
37
+
&:has(a:hover) {
38
+
scale: 1.025;
39
+
40
+
background: var(--primaryContainer);
41
+
color: var(--onPrimaryContainer);
42
+
43
+
border-color: var(--primary);
44
+
}
45
+
46
+
&:has(a:active) {
47
+
scale: 1.01;
48
+
}
49
+
}
50
+
51
+
@media (max-width: 769px) {
52
+
grid-template-columns: 1fr;
53
+
}
54
+
}
55
+
56
+
/*
57
+
return (
58
+
<>
59
+
<ul
60
+
style={{
61
+
display: 'grid',
62
+
gridTemplateColumns: '1fr 1fr',
63
+
gap: '8px',
64
+
listStyle: 'none'
65
+
}}
66
+
>
67
+
{posts.map((p) => (
68
+
<li
69
+
key={p.id}
70
+
style={{
71
+
padding: '12px',
72
+
background: 'var(--surfaceContainer)',
73
+
border: '1px solid var(--outlineVariant)',
74
+
borderRadius: '12px',
75
+
position: 'relative'
76
+
}}
77
+
>
78
+
<div>
79
+
<Link
80
+
href={`/post/${p.slug}`}
81
+
style={{
82
+
height: '100%',
83
+
width: '100%',
84
+
position: 'absolute',
85
+
top: 0,
86
+
left: 0
87
+
}}
88
+
></Link>
89
+
90
+
<div
91
+
style={{
92
+
marginBottom: '6px'
93
+
}}
94
+
>
95
+
<h6
96
+
style={{
97
+
margin: 0
98
+
}}
99
+
>
100
+
{p.title}
101
+
</h6>
102
+
<label
103
+
style={{
104
+
color: 'var(--outline)'
105
+
}}
106
+
>
107
+
{p.publishedAt.toLocaleString('en-GB')}
108
+
</label>
109
+
</div>
110
+
111
+
<p>{p.excerpt}</p>
112
+
</div>
113
+
</li>
114
+
))}
115
+
</ul>
116
+
</>
117
+
*/