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

feat: add blog

Browse Source
This commit is contained in:
Andrea
2023-02-28 14:07:59 +01:00
parent 3a68df6fd0
commit 92a08aca83
26 changed files with 1469 additions and 5205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/entry.client.tsx
View File

@@ -1,4 +1,22 @@
import { RemixBrowser } from "@remix-run/react";
import { hydrate } from "react-dom";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
hydrate(<RemixBrowser />, document);
function hydrate() {
startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<RemixBrowser />
</StrictMode>
);
});
}
if (typeof requestIdleCallback === "function") {
requestIdleCallback(hydrate);
} else {
// Safari doesn't support requestIdleCallback
// https://caniuse.com/requestidlecallback
setTimeout(hydrate, 1);
}

106
app/entry.server.tsx
View File

@@ -1,6 +1,11 @@
import { PassThrough } from "stream";
import type { EntryContext } from "@remix-run/node";
import { Response } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import { renderToString } from "react-dom/server";
import isbot from "isbot";
import { renderToPipeableStream } from "react-dom/server";
const ABORT_DELAY = 5000;
export default function handleRequest(
request: Request,
@@ -8,14 +13,99 @@ export default function handleRequest(
responseHeaders: Headers,
remixContext: EntryContext
) {
let markup = renderToString(
<RemixServer context={remixContext} url={request.url} />
);
return isbot(request.headers.get("user-agent"))
? handleBotRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
)
: handleBrowserRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
);
}
responseHeaders.set("Content-Type", "text/html");
function handleBotRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
return new Promise((resolve, reject) => {
let didError = false;
return new Response("<!DOCTYPE html>" + markup, {
status: responseStatusCode,
headers: responseHeaders,
const { pipe, abort } = renderToPipeableStream(
<RemixServer context={remixContext} url={request.url} />,
{
onAllReady() {
const body = new PassThrough();
responseHeaders.set("Content-Type", "text/html");
resolve(
new Response(body, {
headers: responseHeaders,
status: didError ? 500 : responseStatusCode,
})
);
pipe(body);
},
onShellError(error: unknown) {
reject(error);
},
onError(error: unknown) {
didError = true;
console.error(error);
},
}
);
setTimeout(abort, ABORT_DELAY);
});
}
function handleBrowserRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
return new Promise((resolve, reject) => {
let didError = false;
const { pipe, abort } = renderToPipeableStream(
<RemixServer context={remixContext} url={request.url} />,
{
onShellReady() {
const body = new PassThrough();
responseHeaders.set("Content-Type", "text/html");
resolve(
new Response(body, {
headers: responseHeaders,
status: didError ? 500 : responseStatusCode,
})
);
pipe(body);
},
onShellError(err: unknown) {
reject(err);
},
onError(error: unknown) {
didError = true;
console.error(error);
},
}
);
setTimeout(abort, ABORT_DELAY);
});
}

61
app/root.tsx
View File

@@ -1,5 +1,6 @@
import type { MetaFunction } from "@remix-run/node";
import type { LinksFunction, MetaFunction } from "@remix-run/node";
import {
Link,
Links,
LiveReload,
Meta,
@@ -7,44 +8,56 @@ import {
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import styles from "./styles.css";
import stylesheet from "~/tailwind.css";
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: stylesheet },
];
export const meta: MetaFunction = () => ({
charset: "utf-8",
title: "Nullndr",
title: "nullndr",
viewport: "width=device-width,initial-scale=1",
});
export function links() {
return [
{
rel: "stylesheet",
href: styles,
},
{
rel: "icon",
href: "/assets/favicon.png",
type: "image/png",
},
];
}
export default function App() {
return (
<html lang="en" className={"h-full bg-white"}>
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body
className={
"flex bg-[#202020] flex-col items-center justify-around justify-items-center w-[100vw] h-[100vh]"
}
>
<body className="bg-[#202020] text-[#d6d6d6] font-['monospace']">
<Outlet />
<ScrollRestoration />
<Scripts />
{process.env.NODE_ENV === "development" && <LiveReload />}
<LiveReload />
</body>
</html>
);
}
export function CatchBoundary() {
return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body className="bg-[#202020] text-[#d6d6d6] font-['monospace']">
<div className="flex flex-col items-center justify-around h-[100vh]">
<div>
<div className="text-center text-[#ffff00] text-[10vw] font-bold">
404
</div>
<div className="font-bold">Where do you think you are going?</div>
<div className="text-center">
<Link to="/" className="hover:text-[#e6c2bf]">
Home
</Link>
</div>
</div>
</div>
</body>
</html>
);

59
app/routes/_index.tsx Normal file
View File

@@ -0,0 +1,59 @@
import { Link } from "@remix-run/react";
import {
FaGithub,
FaGitlab,
FaKey,
FaLinkedin,
FaMastodon,
FaTelegramPlane,
FaTwitter,
} from "react-icons/fa";
import { MdEmail } from "react-icons/md";
export default function Index() {
return (
<div className="flex flex-col items-center justify-around h-[100vh]">
<div>
<div className="text-center text-[6vw]">
<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="/assets/pgpkey.pub" className="p-2">
<FaKey color="yellow" size="3em" />
</a>
</nav>
<div className="pt-10 flex flex-col items-center text-xl">
<Link to="/blog" className="hover:text-[#e6c2bf]">
Blog
</Link>
</div>
</div>
</div>
);
}

18
app/routes/blog/Post.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { Link } from "@remix-run/react";
type PostProps = {
title: string;
description?: string;
href: string;
};
export function Post({ title, description, href }: 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>
);
}

3
app/routes/blog/PostsWrapper.tsx Normal file
View File

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

47
app/routes/blog/route.tsx Normal file
View File

@@ -0,0 +1,47 @@
import { Link, useLoaderData } from "@remix-run/react";
import { Post } from "./Post";
import { PostsWrapper } from "./PostsWrapper";
export const loader = async () => {
const posts: {
title: string;
description: string;
href: string;
}[] = [];
return posts;
};
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>
{posts.length > 0 ? (
<PostsWrapper>
{posts.map((post) => (
<Post {...post} />
))}
</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" />
</div>
)}
</div>
);
}

20
app/routes/blog_.$id.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { Link } from "@remix-run/react";
export const loader = () => {
throw new Response(null, {
status: 404,
});
};
export default function () {
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">
<Link to="/blog">Go back</Link>
</div>
</div>
);
}

59
app/routes/index.tsx
View File

@@ -1,59 +0,0 @@
import { IconContext } from "react-icons";
import {
FaGithub,
FaGitlab,
FaKey,
FaLinkedin,
FaMastodon,
FaTelegramPlane,
FaTwitter,
} from "react-icons/fa";
import { MdEmail } from "react-icons/md";
export default function Index() {
return (
<div className={"w-auto"}>
<div
className={"text-center text-[6vw] text-[#d6d6d6] font-['monospace']"}
>
<span>$ echo "Hello, world!" </span>
<span className={"animate-blink"}>|</span>
</div>
<div>
<nav className={"flex justify-center flex-wrap"}>
<IconContext.Provider
value={{
color: "yellow",
size: "3em",
}}
>
<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="/assets/pgpkey.pub" className="p-2">
<FaKey />
</a>
</IconContext.Provider>
</nav>
</div>
</div>
);
}