MeexReay/racinfo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(protocol): wrap articles into array

Browse Source
This commit is contained in:
Konstantin Zhigaylo 2025-07-21 09:17:11 +03:00
parent 0905e11185
commit 70deede914
No known key found for this signature in database
GPG Key ID: DD1C2780F0E05B5C
1 changed files with 45 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/app/protocol/page.tsx
View File

@ -3,7 +3,35 @@ import Text from "@/components/blocks/Text";
import PageTitle from "@/components/blocks/PageTitle"; import PageTitle from "@/components/blocks/PageTitle";
import Title from "@/components/blocks/Title"; import Title from "@/components/blocks/Title";
type Article = {
name: string;
desc: string;
curator: string;
href: string;
};
export default function Protocol() { export default function Protocol() {
const articles: Article[] = [
{
name: "Real Address Chat Protocol",
desc: "This article explains the Real Address Chat protocol and how the client and server interact with each other using it.",
curator: "@kostya-zero",
href: "/protocol/rac",
},
{
name: "WebSocket Real Address Chat Protocol",
desc: "A WebSocket-based implementation of the RAC protocol, made by the community. It works the same as RAC but includes some additions.",
curator: "@kostya-zero",
href: "/protocol/wrac",
},
{
name: "User Agents",
desc: "A community-made solution to identify clients by a unique symbol in front of their username.",
curator: "@kostya-zero",
href: "/protocol/user-agents",
},
];
return ( return (
<main className={"flex flex-col gap-4 w-full"}> <main className={"flex flex-col gap-4 w-full"}>
<PageTitle id={"protocol"}>Protocol</PageTitle> <PageTitle id={"protocol"}>Protocol</PageTitle>
@ -21,52 +49,23 @@ export default function Protocol() {
<Title id={"articles"}>Articles</Title> <Title id={"articles"}>Articles</Title>
<Text>Click on article down below that you want to read.</Text> <Text>Click on article down below that you want to read.</Text>
<div className={"flex flex-col gap-2"}> <div className={"flex flex-col gap-2"}>
<Link {articles.map((article, index) => (
href={"/protocol/rac"} <Link
className={ key={index}
"flex flex-col bg-stone-900 border border-stone-800 p-4 transition-all duration-200 hover:border-neutral-600 hover:bg-stone-800 rounded-lg" href={article.href}
} className={
> "flex flex-col bg-stone-900 border border-stone-800 p-4 transition-all duration-200 hover:border-neutral-600 hover:bg-stone-800 rounded-lg"
<h1 className={"text-stone-300 font-rokkitt text-2xl font-bold"}> }
Real Address Chat Protocol >
</h1> <h1 className={"text-stone-300 font-rokkitt text-2xl font-bold"}>
<p className={"text-stone-500"}> {article.name}
This article explains the Real Address Chat protocol and how the </h1>
client and server interact with each other using it. <p className={"text-stone-500"}>{article.desc}</p>
</p> <small className={"text-stone-600"}>
<small className={"text-stone-600"}>Curated by @kostya-zero</small> Curated by {article.curator}
</Link> </small>
<Link </Link>
href={"/protocol/wrac"} ))}
className={
"flex flex-col bg-stone-900 border border-stone-800 p-4 transition-all duration-200 hover:border-neutral-600 hover:bg-stone-800 rounded-lg"
}
>
<h1 className={"text-stone-300 font-rokkitt text-2xl font-bold"}>
WebSocket Real Address Chat Protocol
</h1>
<p className={"text-stone-500"}>
WRAC is a WebSocket-based implementation of the RAC protocol, made
by the community. It works the same as RAC but includes some
additions.
</p>
<small className={"text-stone-600"}>Curated by @kostya-zero</small>
</Link>
<Link
href={"/protocol/user-agents"}
className={
"flex flex-col bg-stone-900 border border-stone-800 p-4 transition-all duration-200 hover:border-neutral-600 hover:bg-stone-800 rounded-lg"
}
>
<h1 className={"text-stone-300 font-rokkitt text-2xl font-bold"}>
User Agents
</h1>
<p className={"text-stone-500"}>
A community-made solution to identify clients by a unique symbol in
front of their username.
</p>
<small className={"text-stone-600"}>Curated by @kostya-zero</small>
</Link>
</div> </div>
</main> </main>
); );