feat: add posts
This commit is contained in:
Andrea
parent
18e1c1e2e6
commit
806ef1ec90
2
.gitignore
vendored
2
.gitignore
vendored
@ -6,3 +6,5 @@ node_modules
|
||||
.env
|
||||
|
||||
app/tailwind.css
|
||||
|
||||
prisma/dev.db
|
||||
9
Dockerfile
Normal file
9
Dockerfile
Normal file
@ -0,0 +1,9 @@
|
||||
FROM node:alpine
|
||||
|
||||
COPY . /src
|
||||
|
||||
WORKDIR /src
|
||||
|
||||
RUN npm install && npm run build
|
||||
|
||||
CMD ["npm", "run", "start"]
|
||||
23
app/models/posts.server.ts
Normal file
23
app/models/posts.server.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { db } from "~/utils/db.server";
|
||||
|
||||
export const findPosts = async () => {
|
||||
return db.post.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
description: true,
|
||||
createdAt: true,
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: "desc",
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const findPost = async (id: string) => {
|
||||
return db.post.findUnique({
|
||||
where: {
|
||||
id,
|
||||
},
|
||||
});
|
||||
};
|
||||
@ -1,3 +1,4 @@
|
||||
import codeHikeStyle from "@code-hike/mdx/dist/index.css";
|
||||
import type { LinksFunction, MetaFunction } from "@remix-run/node";
|
||||
import {
|
||||
Link,
|
||||
@ -12,6 +13,7 @@ import stylesheet from "~/tailwind.css";
|
||||
|
||||
export const links: LinksFunction = () => [
|
||||
{ rel: "stylesheet", href: stylesheet },
|
||||
{ rel: "stylesheet", href: codeHikeStyle },
|
||||
];
|
||||
|
||||
export const meta: MetaFunction = () => ({
|
||||
|
||||
@ -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
10
app/routes/blog/EmptyState.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
21
app/utils/db.server.ts
Normal file
21
app/utils/db.server.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { PrismaClient } from "@prisma/client";
|
||||
|
||||
export let db: PrismaClient;
|
||||
|
||||
declare global {
|
||||
var __db: PrismaClient | undefined;
|
||||
}
|
||||
|
||||
// this is needed because in development we don't want to restart
|
||||
// the server with every change, but we want to make sure we don't
|
||||
// create a new connection to the DB with every change either.
|
||||
if (process.env.NODE_ENV === "production") {
|
||||
db = new PrismaClient();
|
||||
db.$connect();
|
||||
} else {
|
||||
if (!global.__db) {
|
||||
global.__db = new PrismaClient();
|
||||
global.__db.$connect();
|
||||
}
|
||||
db = global.__db;
|
||||
}
|
||||
26
app/utils/posts.server.ts
Normal file
26
app/utils/posts.server.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { remarkCodeHike } from "@code-hike/mdx";
|
||||
import { readFile } from "fs/promises";
|
||||
import { bundleMDX } from "mdx-bundler";
|
||||
import codeHikeTheme from "shiki/themes/one-dark-pro.json";
|
||||
|
||||
export const getMdxFile = async (path: string) => {
|
||||
const source = await readFile(path);
|
||||
return bundleMDX({
|
||||
source: source.toString(),
|
||||
mdxOptions() {
|
||||
return {
|
||||
remarkPlugins: [
|
||||
[
|
||||
remarkCodeHike,
|
||||
{
|
||||
theme: codeHikeTheme,
|
||||
lineNumbers: true,
|
||||
showCopyButton: true,
|
||||
autoImport: true,
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
},
|
||||
});
|
||||
};
|
||||
4358
package-lock.json
generated
4358
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
@ -8,13 +8,23 @@
|
||||
"typecheck": "tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@code-hike/mdx": "^0.8.0",
|
||||
"@code-hike/mdx": "^0.8.1-next.0",
|
||||
"@prisma/client": "^4.11.0",
|
||||
"@remix-run/node": "^1.13.0",
|
||||
"@remix-run/react": "^1.13.0",
|
||||
"@remix-run/serve": "^1.13.0",
|
||||
"esbuild": "0.17.10",
|
||||
"front-matter": "4.0.2",
|
||||
"isbot": "^3.6.5",
|
||||
"mdx-bundler": "9.2.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
"react-dom": "^18.2.0",
|
||||
"rehype-autolink-headings": "6.1.1",
|
||||
"rehype-highlight": "6.0.0",
|
||||
"rehype-slug": "5.1.0",
|
||||
"rehype-toc": "3.0.2",
|
||||
"remark-gfm": "3.0.1",
|
||||
"shiki": "^0.14.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@remix-run/dev": "^1.13.0",
|
||||
@ -22,6 +32,7 @@
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react-dom": "^18.0.8",
|
||||
"eslint": "^8.27.0",
|
||||
"prisma": "^4.11.0",
|
||||
"react-icons": "^4.7.1",
|
||||
"tailwindcss": "^3.2.7",
|
||||
"typescript": "^4.8.4"
|
||||
|
||||
8
post/test.mdx
Normal file
8
post/test.mdx
Normal file
@ -0,0 +1,8 @@
|
||||
|
||||
# Hello world!
|
||||
|
||||
```c
|
||||
int main(int argc, char** argv) {
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
20
prisma/schema.prisma
Normal file
20
prisma/schema.prisma
Normal file
@ -0,0 +1,20 @@
|
||||
// This is your Prisma schema file,
|
||||
// learn more about it in the docs: https://pris.ly/d/prisma-schema
|
||||
|
||||
generator client {
|
||||
provider = "prisma-client-js"
|
||||
}
|
||||
|
||||
datasource db {
|
||||
provider = "sqlite"
|
||||
url = env("DATABASE_URL")
|
||||
}
|
||||
|
||||
model Post {
|
||||
id String @id @default(cuid())
|
||||
title String
|
||||
description String?
|
||||
path String
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
/** @type {import('@remix-run/dev').AppConfig} */
|
||||
module.exports = {
|
||||
ignoredRouteFiles: ["**/.*"],
|
||||
serverDependenciesToBundle: ["mdx-bundler"],
|
||||
future: {
|
||||
unstable_tailwind: true,
|
||||
v2_routeConvention: true,
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
{
|
||||
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "app/routes/blog_.$id.tsx"],
|
||||
"include": [
|
||||
"remix.env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
"app/routes/blog_.$id.tsx"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2019"],
|
||||
"isolatedModules": true,
|
||||
@ -15,6 +20,7 @@
|
||||
"paths": {
|
||||
"~/*": ["./app/*"]
|
||||
},
|
||||
"module": "ES2022",
|
||||
|
||||
// Remix takes care of building everything in `remix build`.
|
||||
"noEmit": true
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user