nullndr/website
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

feat: add posts

Browse Source
This commit is contained in:
Andrea
2023-03-01 20:39:41 +01:00
parent 18e1c1e2e6
commit 806ef1ec90
18 changed files with 3810 additions and 858 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/routes/_index.tsx
View File

@@ -8,6 +8,7 @@ import {
FaTelegramPlane,
FaTwitter,
} from "react-icons/fa";
import { IconContext } from "react-icons/lib";
import { MdEmail } from "react-icons/md";
export default function Index() {
@@ -18,37 +19,35 @@ export default function Index() {
<span>$ echo "Hello, world!"</span>
<span className="animate-blink">|</span>
</div>
<nav className="flex justify-center flex-wrap">
{/*
* The component `IconProvider.Provider` doesn't work very well.
* I dunno way but I'm too lazy to search for the cause.
*/}
<a rel="me" href="https://mastodon.uno/@nullndr" className="p-2">
<FaMastodon color="yellow" size="3em" />
</a>
<a href="https://t.me/nullndr" className="p-2">
<FaTelegramPlane color="yellow" size="3em" />
</a>
<a href="https://gitlab.com/nullndr" className="p-2">
<FaGitlab color="yellow" size="3em" />
</a>
<a href="https://github.com/nullndr" className="p-2">
<FaGithub color="yellow" size="3em" />
</a>
<a href="https://twitter.com/nullndr" className="p-2">
<FaTwitter color="yellow" size="3em" />
</a>
<a href="mailto: nullndr@duck.com" className="p-2">
<MdEmail color="yellow" size="3em" />
</a>
<a href="https://linkedin.com/in/nullndr" className="p-2">
<FaLinkedin color="yellow" size="3em" />
</a>
<a href="/key.pub" download={true} className="p-2">
<FaKey color="yellow" size="3em" />
</a>
<nav className="pt-5 flex justify-center flex-wrap">
<IconContext.Provider value={{ color: "yellow", size: "2em" }}>
<a rel="me" href="https://mastodon.uno/@nullndr" className="p-2">
<FaMastodon />
</a>
<a href="https://t.me/nullndr" className="p-2">
<FaTelegramPlane />
</a>
<a href="https://gitlab.com/nullndr" className="p-2">
<FaGitlab />
</a>
<a href="https://github.com/nullndr" className="p-2">
<FaGithub />
</a>
<a href="https://twitter.com/nullndr" className="p-2">
<FaTwitter />
</a>
<a href="mailto: nullndr@duck.com" className="p-2">
<MdEmail />
</a>
<a href="https://linkedin.com/in/nullndr" className="p-2">
<FaLinkedin />
</a>
<a href="/key.pub" download={true} className="p-2">
<FaKey />
</a>
</IconContext.Provider>
</nav>
<div className="pt-10 flex flex-col items-center text-xl">
<div className="pt-5 flex flex-col items-center text-xl">
<Link to="/blog" className="hover:text-[#e6c2bf]">
Blog
</Link>

10
app/routes/blog/EmptyState.tsx Normal file
View File

@@ -0,0 +1,10 @@
export function EmptyState() {
return (
<div className="mt-5 flex flex-col items-center">
<div className="text-[#ffff00] font-bold">
I haven't post anything yet! So here's a pic of my cat
</div>
<img src="/cat.jpg" className="rounded-md" />
</div>
);
}

30
app/routes/blog/Post.tsx
View File

@@ -2,17 +2,31 @@ import { Link } from "@remix-run/react";
type PostProps = {
title: string;
description?: string;
href: string;
description: string | null;
id: string;
createdAt: string;
};
export function Post({ title, description, href }: PostProps) {
export function Post({ title, description, id, createdAt }: PostProps) {
return (
<div className="mt-10">
<Link to={href}>
<div className="text-[#ffff00] font-bold text-2xl">{title}</div>
<div className="italic text-xl">{description}</div>
</Link>
<div className="mt-5">
<div className="p-5 border-gray-600 border-2 rounded-lg">
<Link to={id}>
<div className="text-center">
<span className="text-[#ffff00] hover:text-[#e6c2bf] font-bold text-2xl">
{title}
</span>
<span className="ml-2 font-bold">{`(${new Date(
createdAt
).toLocaleDateString()})`}</span>
</div>
{description && (
<div className="mt-5 italic text-xl max-w-3xl text-center">
{description}
</div>
)}
</Link>
</div>
</div>
);
}

2
app/routes/blog/PostsWrapper.tsx
View File

@@ -1,3 +1,3 @@
export function PostsWrapper({ children }: React.PropsWithChildren) {
return <div className="px-10">{children}</div>;
return <div className="mt-5 px-10 w-max">{children}</div>;
}

35
app/routes/blog/route.tsx
View File

@@ -1,32 +1,22 @@
import { Link, useLoaderData } from "@remix-run/react";
import { findPosts } from "~/models/posts.server";
import { EmptyState } from "./EmptyState";
import { Post } from "./Post";
import { PostsWrapper } from "./PostsWrapper";
export const loader = async () => {
const posts: {
title: string;
description: string;
href: string;
}[] = [];
return posts;
return findPosts();
};
export default function () {
const posts = useLoaderData<typeof loader>();
return (
<div className="h-max">
<div className="mx-10 mt-10">
<div className="flex flex-col items-center">
<div className="text-3xl">
<span>Here I blog about whatever get my attention</span>
</div>
</div>
<div className="mt-5 flex flex-col items-end">
<Link to="/" className="hover:text-[#e6c2bf] text-xl">
Home
</Link>
</div>
<div className="m-5 h-max flex flex-col items-center">
<div className="hover:text-[#e6c2bf] text-xl">
<Link to="/">Home</Link>
</div>
<div className="mt-5 lg:text-3xl">
<span>Here I blog about whatever get my attention</span>
</div>
{posts.length > 0 ? (
<PostsWrapper>
@@ -35,12 +25,7 @@ export default function () {
))}
</PostsWrapper>
) : (
<div className="flex flex-col items-center">
<div className="text-[#ffff00] font-bold">
I haven't post anything yet! So here's a pic of my cat
</div>
<img src="/cat.jpg" className="rounded" />
</div>
<EmptyState />
)}
</div>
);

37
app/routes/blog_.$id.tsx
View File

@@ -1,20 +1,37 @@
import { Link } from "@remix-run/react";
import type { LoaderArgs } from "@remix-run/node";
import { Link, useLoaderData } from "@remix-run/react";
import { getMDXComponent } from "mdx-bundler/client";
import React from "react";
import { findPost } from "~/models/posts.server";
import { getMdxFile } from "~/utils/posts.server";
export const loader = () => {
throw new Response(null, {
status: 404,
});
export const loader = async ({ params }: LoaderArgs) => {
const id = params.id;
if (id == null) {
throw new Response(null, { status: 400 });
}
const post = await findPost(id);
if (post == null) {
throw new Response(null, { status: 404 });
}
const { code } = await getMdxFile(post.path);
return { post, code };
};
export default function () {
const { post, code } = useLoaderData<typeof loader>();
const Component = React.useMemo(() => getMDXComponent(code), [code]);
return (
<div className="m-5 h-max">
<div className="flex flex-col items-center text-[#ffff00] text-3xl font-bold">
foo
</div>
<div className="mt-10 flex flex-col items-end hover:text-[#e6c2bf] text-xl">
<div className="m-5 h-max flex flex-col items-center">
<div className="hover:text-[#e6c2bf] text-xl">
<Link to="/blog">Go back</Link>
</div>
<div className="mt-5 text-[#ffff00] text-3xl font-bold">{post.title}</div>
<div className="mt-10 lg:w-1/3">
<Component />
</div>
</div>
);
}