My personal site.
theclashfruit.me
feat: projects page
+223
-11
+6
-7
app/(main)/post/[slug]/page.tsx
+6
-7
app/(main)/post/[slug]/page.tsx
···
10
10
11
11
import Comment, { CommentWithReplies } from '@/components/Comment';
12
12
13
-
import Form from 'next/form';
14
13
import type { Metadata } from 'next';
15
14
import CommentForm from '@/components/CommentForm';
16
15
import { notFound } from 'next/navigation';
···
25
24
const slug = (await params).slug;
26
25
27
26
const { post, user } = await fetchPostData(slug);
27
+
28
+
if (!post || !user) notFound();
28
29
29
30
return {
30
31
title: post.title,
···
56
57
}) {
57
58
const { slug } = await params;
58
59
const { post } = await fetchPostData(slug);
59
-
60
-
if (!post)
61
-
notFound();
62
-
63
-
if (post.draft)
64
-
if (!(await userAuthorized([Permission.Admin]))) notFound();
60
+
61
+
if (!post) notFound();
62
+
63
+
if (post.draft) if (!(await userAuthorized([Permission.Admin]))) notFound();
65
64
66
65
const commentsEnabled = false;
67
66
const comments = commentsEnabled ? await fetchComments(post.id) : [];
+130
-4
app/(main)/projects/page.tsx
+130
-4
app/(main)/projects/page.tsx
···
1
+
import { SiForgejo, SiGithub, SiGitlab } from '@icons-pack/react-simple-icons';
2
+
import SiTangled from '@/public/icons/tangled.svg';
3
+
4
+
import Link from 'next/link';
5
+
6
+
import styles from '@/styles/pages/Projects.module.scss';
7
+
1
8
import type { Metadata } from 'next';
2
9
3
10
export const metadata: Metadata = {
4
11
title: 'Projects'
5
12
};
6
13
14
+
enum GitType {
15
+
GitHub,
16
+
Tangled,
17
+
Forgejo,
18
+
Gitlab
19
+
}
20
+
21
+
enum ProjectStatus {
22
+
Active,
23
+
SemiActive,
24
+
OnHold,
25
+
Abondoned
26
+
}
27
+
28
+
const projects: {
29
+
title: string;
30
+
summary: string;
31
+
status: ProjectStatus;
32
+
repo: {
33
+
type: GitType;
34
+
href: string;
35
+
};
36
+
}[] = [
37
+
{
38
+
title: 'This Website',
39
+
summary: 'An overcomplicated personal site built with Next.js.',
40
+
status: ProjectStatus.Active,
41
+
repo: {
42
+
type: GitType.Tangled,
43
+
href: 'https://tangled.org/theclashfruit.me/website'
44
+
}
45
+
},
46
+
{
47
+
title: "CRSS (Clyde's Real Survival SMP)",
48
+
summary:
49
+
'A Minecraft server that updated to every version from beta 1.0, I build the website and a few other things for it.',
50
+
status: ProjectStatus.Active,
51
+
repo: {
52
+
type: GitType.GitHub,
53
+
href: 'https://github.com/CRSS666'
54
+
}
55
+
},
56
+
{
57
+
title: 'Lattice',
58
+
summary: 'A simple (for now) Discord chat bridge for Hytale.',
59
+
status: ProjectStatus.SemiActive,
60
+
repo: {
61
+
type: GitType.Tangled,
62
+
href: 'https://tangled.org/theclashfruit.me/lattice'
63
+
}
64
+
},
65
+
{
66
+
title: 'Rithle',
67
+
summary: 'Android app for Modrinth written in Kotlin.',
68
+
status: ProjectStatus.OnHold,
69
+
repo: {
70
+
type: GitType.GitHub,
71
+
href: 'https://github.com/TheClashFruit/Rithle'
72
+
}
73
+
},
74
+
{
75
+
title: 'Kotrinth',
76
+
summary: 'A Modrinth API wrapper for Kotlin.',
77
+
status: ProjectStatus.OnHold,
78
+
repo: {
79
+
type: GitType.GitHub,
80
+
href: 'https://github.com/TheClashFruit/Kotrinth'
81
+
}
82
+
},
83
+
{
84
+
title: 'Zleed',
85
+
summary: 'A free and open-source streaming platform.',
86
+
status: ProjectStatus.Abondoned,
87
+
repo: {
88
+
type: GitType.GitHub,
89
+
href: 'https://github.com/ZleedApp'
90
+
}
91
+
}
92
+
];
93
+
7
94
export default function Projects() {
8
95
return (
9
-
<>
10
-
<p>Projects</p>
96
+
<ul className={styles.projectList}>
97
+
{projects.map((p) => (
98
+
<li key={p.title}>
99
+
<div className={styles.projectHead}>
100
+
<h6>{p.title}</h6>
101
+
<label className={styles.projectStatus} data-status={p.status}>
102
+
{p.status === ProjectStatus.Active && 'Active'}
103
+
{p.status === ProjectStatus.SemiActive && 'Semi-Active'}
104
+
{p.status === ProjectStatus.OnHold && 'On Hold'}
105
+
{p.status === ProjectStatus.Abondoned && 'Abondoned'}
106
+
</label>
107
+
</div>
108
+
109
+
<p>{p.summary}</p>
11
110
12
-
<ul></ul>
13
-
</>
111
+
<ul className={styles.projectLinks}>
112
+
<li>
113
+
<Link href={p.repo.href} target="_blank">
114
+
{p.repo.type === GitType.GitHub && (
115
+
<>
116
+
<SiGithub /> Github
117
+
</>
118
+
)}
119
+
{p.repo.type === GitType.Tangled && (
120
+
<>
121
+
<SiTangled /> Tangled
122
+
</>
123
+
)}
124
+
{p.repo.type === GitType.Forgejo && (
125
+
<>
126
+
<SiForgejo /> Forgejo
127
+
</>
128
+
)}
129
+
{p.repo.type === GitType.Gitlab && (
130
+
<>
131
+
<SiGitlab /> Gitlab
132
+
</>
133
+
)}
134
+
</Link>
135
+
</li>
136
+
</ul>
137
+
</li>
138
+
))}
139
+
</ul>
14
140
);
15
141
}
+87
styles/pages/Projects.module.scss
+87
styles/pages/Projects.module.scss
···
1
+
.projectList {
2
+
list-style: none;
3
+
4
+
display: flex;
5
+
6
+
flex-direction: column;
7
+
8
+
gap: 8px;
9
+
10
+
> li {
11
+
display: flex;
12
+
13
+
flex-direction: column;
14
+
15
+
gap: 6px;
16
+
17
+
padding: 12px;
18
+
19
+
background: var(--surfaceContainer);
20
+
21
+
border: 1px solid var(--outlineVariant);
22
+
border-radius: 12px;
23
+
24
+
> .projectHead {
25
+
display: flex;
26
+
27
+
align-items: center;
28
+
29
+
gap: 6px;
30
+
31
+
h6 {
32
+
margin: 0;
33
+
}
34
+
}
35
+
36
+
> .projectLinks {
37
+
list-style: none;
38
+
39
+
display: flex;
40
+
41
+
gap: 6px;
42
+
43
+
a {
44
+
display: flex;
45
+
46
+
align-items: center;
47
+
justify-content: center;
48
+
49
+
gap: 6px;
50
+
51
+
padding: 4px;
52
+
}
53
+
}
54
+
55
+
p {
56
+
margin: 0;
57
+
}
58
+
}
59
+
}
60
+
61
+
.projectStatus {
62
+
padding: 2px 8px;
63
+
64
+
border-radius: 16px;
65
+
66
+
font-size: 80%;
67
+
68
+
&[data-status='0'] {
69
+
background: var(--primary);
70
+
color: var(--onPrimary);
71
+
}
72
+
73
+
&[data-status='1'] {
74
+
background: var(--secondary);
75
+
color: var(--onSecondary);
76
+
}
77
+
78
+
&[data-status='2'] {
79
+
background: var(--tertiary);
80
+
color: var(--onTertiary);
81
+
}
82
+
83
+
&[data-status='3'] {
84
+
background: var(--error);
85
+
color: var(--onError);
86
+
}
87
+
}