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

feat: update mobile layout, fixes

Browse Source
This commit is contained in:
Andrea 2024-09-24 21:21:59 +02:00
parent 6d72ac0a56
commit bf0a411639
No known key found for this signature in database
GPG Key ID: 4594610B9C8F91C5
13 changed files with 76 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/components/BlogWrapper.tsx
View File

@ -1,7 +0,0 @@
export function BlogWrapper({ children }: React.PropsWithChildren) {
return (
<div className="flex flex-col items-center">
<div className="w-5/6 xl:w-1/2 2xl:w-1/3">{children}</div>
</div>
);
}

2
app/components/Notbyai.tsx
View File

@ -1,6 +1,6 @@
export function Notbyai() {
return (
<div className="fixed m-3 bottom-0 right-0">
<div className="flex flex-col items-center">
<a href="https://notbyai.fyi/" target="_blank">
<img src="https://user-images.githubusercontent.com/62137266/225653923-a69103f5-b318-4e52-9ea1-95b61d388366.svg" />
</a>

1
app/hooks/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./useFormattedDate";

4
app/hooks/useFormattedDate.ts Normal file
View File

@ -0,0 +1,4 @@
export function useFormattedDate(_date: string) {
const date = new Date(_date)
return `${date.getUTCFullYear()}/${date.getUTCMonth()}/${date.getUTCDate()}`
}

4
app/root.tsx
View File

@ -13,7 +13,6 @@ import {
import stylesheet from "~/tailwind.css?url";
import { Body } from "./components/Body";
import { LinkWrapper } from "./components/LinkWrapper";
import { Notbyai } from "./components/Notbyai";
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: stylesheet },
@ -29,7 +28,7 @@ export const meta: MetaFunction = () => [
},
{
property: "viewport",
content: "width=device-width,initial-scale=1",
content: "width=device-width,initial-scale=1.0",
},
];
@ -42,7 +41,6 @@ export default function App() {
</head>
<Body>
<Outlet />
<Notbyai />
<ScrollRestoration />
<Scripts />
</Body>

2
app/routes/_index.tsx
View File

@ -11,6 +11,7 @@ import {
import { IconContext } from "react-icons/lib";
import { MdEmail } from "react-icons/md";
import { LinkWrapper } from "~/components/LinkWrapper";
import { Notbyai } from "~/components/Notbyai";
export default function Index() {
return (
@ -22,6 +23,7 @@ export default function Index() {
<span className="animate-blink">|</span>
</div>
<nav className="pt-5 flex justify-center flex-wrap">
<Notbyai />
<IconContext.Provider
value={{ color: "yellow", className: "p-2", size: "3em" }}
>

12
app/routes/blog.$file.tsx
View File

@ -3,7 +3,7 @@ import { Link, useLoaderData } from "@remix-run/react";
import { getMDXComponent } from "mdx-bundler/client/index.js";
import React from "react";
import { FaEdit } from "react-icons/fa";
import { BlogWrapper } from "~/components/BlogWrapper";
import { Notbyai } from "~/components/Notbyai";
import { Title } from "~/components/Title";
import { getMdxFile } from "~/utils/posts.server";
@ -54,12 +54,14 @@ export default function () {
const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]);
return (
<div className="space-y-5">
<div className="space-y-6">
<Title>{title}</Title>
<BlogWrapper>
<div className="flex flex-col items-center">
<div className="space-y-5 sm:w-full sm:px-5 lg:w-5/6 xl:w-1/3">
<div className="dark:prose-invert prose-a:no-underline prose-a:font-bold prose-a:text-[#ffff00] prose-p:text-[#d6d6d6]">
<MdxComponent />
</div>
<div>
<Link
to={`https://github.com/nullndr/website/edit/main/posts/${file}.mdx`}
className="hover:text-[#ffff00]"
@ -69,7 +71,9 @@ export default function () {
<div className="font-bold">Typo?</div>
</div>
</Link>
</BlogWrapper>
</div>
</div>
</div>
</div>
);
}

27
app/routes/blog._index/Post.tsx
View File

@ -1,27 +0,0 @@
import { Link } from "@remix-run/react";
import { BlogWrapper } from "~/components/BlogWrapper";
type PostProps = {
filename: string;
title: string;
published: string;
description: string | null;
};
export function Post({ title, description, filename, published }: PostProps) {
return (
<BlogWrapper>
<Link to={filename}>
<div className="p-5 text-center font-bold border-gray-600 border-2 rounded-lg">
<span className="text-[#ffff00] hover:text-[#e6c2bf] text-2xl">
{title}
</span>
<span className="ml-2">{`(${new Date(
published,
).toLocaleDateString()})`}</span>
{description && <div className="mt-5 text-xl">{description}</div>}
</div>
</Link>
</BlogWrapper>
);
}

26
app/routes/blog._index/PostPreview.tsx Normal file
View File

@ -0,0 +1,26 @@
import { SerializeFrom } from "@remix-run/node";
import { Link } from "@remix-run/react";
import { useFormattedDate } from "~/hooks";
import type { Post } from "~/utils/posts.server";
export function PostPreview({
title,
description,
filename,
published,
}: SerializeFrom<Post>) {
const formattedDate = useFormattedDate(published);
return (
<div className="sm:w-full sm:px-5 lg:w-5/6 xl:w-1/3">
<Link to={filename}>
<div className="space-y-4 py-3 text-center font-bold border-gray-600 border-2 rounded-lg">
<div className="text-[#ffff00] text-2xl">{title}</div>
<div className="text-xl">{description}</div>
<div>
<time>{formattedDate}</time>
</div>
</div>
</Link>
</div>
);
}

11
app/routes/blog._index/route.tsx
View File

@ -2,7 +2,7 @@ import { useLoaderData } from "@remix-run/react";
import { Title } from "~/components/Title";
import { findPosts } from "~/utils/posts.server";
import { EmptyState } from "./EmptyState";
import { Post } from "./Post";
import { PostPreview } from "./PostPreview";
export const handle = {
to: "/",
@ -15,11 +15,16 @@ export const loader = () => {
export default function () {
const posts = useLoaderData<typeof loader>();
return (
<div className="space-y-5">
<div className="space-y-6">
<Title>Here I blog about whatever get my attention</Title>
{posts.length > 0 ? (
posts.map((post, i) => <Post {...post} key={i} />)
<div className="flex flex-col items-center space-y-5">
{posts.map((post, i) => (
<PostPreview {...post} key={i} />
))}
</div>
) : (
<EmptyState />
)}

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

@ -4,9 +4,8 @@ import { LinkWrapper } from "~/components/LinkWrapper";
import { useMatch } from "./useMatch";
export default function () {
const { handle } = useMatch() as unknown as {
handle: { to: string; text: string };
};
const { handle } = useMatch();
return (
<div>
<LinkWrapper>

4
app/routes/blog/useMatch.ts
View File

@ -8,5 +8,7 @@ export function useMatch() {
throw new Error("Bruh");
}
return { handle, ...rest};
return { handle, ...rest } as unknown as {
handle: { to: string; text: string };
};
}

14
app/utils/posts.server.ts
View File

@ -6,7 +6,7 @@ import path from "path";
type FrontMatter = {
title: string;
description: string;
published: string;
published: Date;
isFeatured: boolean;
};
@ -34,11 +34,14 @@ export const getMdxFile = async (file: string) => {
});
};
export type Post = Omit<FrontMatter, "published"> & {
filename: string;
published: string;
};
export const findPosts = async () => {
const files = await readdir(`posts`);
const posts: (FrontMatter & {
filename: string;
})[] = [];
const posts: Post[] = [];
for (const file of files.filter((file) => file.endsWith(".mdx"))) {
const filePath = path.join(process.cwd(), `posts/${file}`);
const { frontmatter } = await bundleMDX<FrontMatter>({
@ -61,8 +64,9 @@ export const findPosts = async () => {
});
posts.push({
filename: file.replace(".mdx", ""),
...frontmatter,
filename: file.replace(".mdx", ""),
published: frontmatter.published.toISOString(),
});
}