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

chore: code update

Browse Source
This commit is contained in:
Andrea
2023-03-05 10:13:32 +01:00
parent 1b4ec1ef6d
commit 991136825d
11 changed files with 157 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -6,5 +6,5 @@ node_modules
.env .env
app/tailwind.css app/tailwind.css
prisma/dev.db
prisma/dev.db posts

14
app/root.tsx
View File

@@ -54,9 +54,9 @@ export function CatchBoundary() {
</div> </div>
<div className="font-bold">Where do you think you are going?</div> <div className="font-bold">Where do you think you are going?</div>
<div className="text-center"> <div className="text-center">
<Link to="/" className="hover:text-[#e6c2bf]"> <div className="mt-5 hover:text-[#e6c2bf] lg:text-xl font-bold">
Home <Link to="/">Home</Link>
</Link> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -75,13 +75,13 @@ export function ErrorBoundary() {
<body className="bg-[#202020] text-[#d6d6d6] font-['monospace']"> <body className="bg-[#202020] text-[#d6d6d6] font-['monospace']">
<div className="flex flex-col items-center justify-around h-[100vh]"> <div className="flex flex-col items-center justify-around h-[100vh]">
<div> <div>
<div className="text-center text-[#ffff00] text-[10vw] font-bold"> <div className="text-center text-[#ffff00] text-[6vw] font-bold">
Something bad happened Something bad happened
</div> </div>
<div className="text-center"> <div className="text-center">
<Link to="/" className="hover:text-[#e6c2bf]"> <div className="mt-5 hover:text-[#e6c2bf] lg:text-xl font-bold">
Home <Link to="/">Home</Link>
</Link> </div>
</div> </div>
</div> </div>
</div> </div>

2
app/routes/_index.tsx
View File

@@ -48,7 +48,7 @@ export default function Index() {
</IconContext.Provider> </IconContext.Provider>
</nav> </nav>
<div className="pt-5 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]"> <Link to="/blog" className="hover:text-[#e6c2bf] font-bold">
Blog Blog
</Link> </Link>
</div> </div>

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

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

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

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

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

@@ -10,18 +10,28 @@ export const loader = async () => {
export default function () { export default function () {
const posts = useLoaderData<typeof loader>(); const posts = useLoaderData<typeof loader>();
return ( return (
<div className="m-5 h-max flex flex-col items-center"> <div className="h-fit flex flex-col items-center">
<div className="hover:text-[#e6c2bf] text-xl"> <div className="w-full">
<Link to="/">Home</Link> <div className="flex flex-col items-center">
<div className="mt-5 hover:text-[#e6c2bf] lg:text-xl font-bold">
<Link to="/">Home</Link>
</div>
</div>
</div> </div>
<div className="mt-5 lg:text-3xl"> <div className="w-full">
<span>Here I blog about whatever get my attention</span> <div className="flex flex-col items-center">
<div className="mt-5 mx-5 sm:mx-0 lg:text-3xl text-[#ffff00] font-bold">
<span>Here I blog about whatever get my attention</span>
</div>
</div>
</div> </div>
{posts.length > 0 ? ( {posts.length > 0 ? (
<div className="mt-5 px-10 w-max"> <div className="w-full">
{posts.map((post, i) => ( <div className="mt-10 flex flex-col items-center space-y-5">
<Post {...post} key={i} /> {posts.map((post, i) => (
))} <Post {...post} key={i} />
))}
</div>
</div> </div>
) : ( ) : (
<EmptyState /> <EmptyState />

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

@@ -24,14 +24,17 @@ export default function () {
const { post, code } = useLoaderData<typeof loader>(); const { post, code } = useLoaderData<typeof loader>();
const Component = React.useMemo(() => getMDXComponent(code), [code]); const Component = React.useMemo(() => getMDXComponent(code), [code]);
return ( return (
<div className="m-5 h-max flex flex-col items-center"> <div className="h-fit w-full flex flex-col items-center">
<div className="hover:text-[#e6c2bf] text-xl"> <div className="mt-5 hover:text-[#e6c2bf] text-xl font-bold">
<Link to="/blog">Go back</Link> <Link to="/blog">Go back</Link>
</div> </div>
<div className="mt-5 text-[#ffff00] text-3xl font-bold">{post.title}</div> <div className="mt-5 text-[#ffff00] text-3xl font-bold">{post.title}</div>
<div className="mt-10 lg:w-1/3"> <div className="m-3 lg:w-1/3 prose dark:prose-invert prose-a:no-underline prose-a:font-bold">
<Component /> <Component />
</div> </div>
<div className="mt-5 mb-5 hover:text-[#e6c2bf] text-xl font-bold">
<Link to="/blog">Go back</Link>
</div>
</div> </div>
); );
} }

12
docker-compose.yaml Normal file
View File

@@ -0,0 +1,12 @@
version: "3.8"
services:
database:
image: postgres:alpine
ports:
- 5432:5432
volumes:
- posts:/var/lib/postgresql/data
env_file:
- .env
volumes:
posts:

87
package-lock.json generated
View File

@@ -7,9 +7,9 @@
"dependencies": { "dependencies": {
"@code-hike/mdx": "^0.8.1-next.0", "@code-hike/mdx": "^0.8.1-next.0",
"@prisma/client": "^4.11.0", "@prisma/client": "^4.11.0",
"@remix-run/node": "^1.13.0", "@remix-run/node": "^1.14.0",
"@remix-run/react": "^1.13.0", "@remix-run/react": "^1.14.0",
"@remix-run/serve": "^1.13.0", "@remix-run/serve": "^1.14.0",
"isbot": "^3.6.5", "isbot": "^3.6.5",
"mdx-bundler": "9.2.1", "mdx-bundler": "9.2.1",
"react": "^18.2.0", "react": "^18.2.0",
@@ -17,8 +17,9 @@
"shiki": "^0.14.1" "shiki": "^0.14.1"
}, },
"devDependencies": { "devDependencies": {
"@remix-run/dev": "^1.13.0", "@remix-run/dev": "^1.14.0",
"@remix-run/eslint-config": "^1.13.0", "@remix-run/eslint-config": "^1.14.0",
"@tailwindcss/typography": "^0.5.9",
"@types/react": "^18.0.25", "@types/react": "^18.0.25",
"@types/react-dom": "^18.0.8", "@types/react-dom": "^18.0.8",
"eslint": "^8.27.0", "eslint": "^8.27.0",
@@ -3415,6 +3416,34 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/@tailwindcss/typography": {
"version": "0.5.9",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
"integrity": "sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==",
"dev": true,
"dependencies": {
"lodash.castarray": "^4.4.0",
"lodash.isplainobject": "^4.0.6",
"lodash.merge": "^4.6.2",
"postcss-selector-parser": "6.0.10"
},
"peerDependencies": {
"tailwindcss": ">=3.0.0 || insiders"
}
},
"node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
"version": "6.0.10",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
"dev": true,
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
},
"engines": {
"node": ">=4"
}
},
"node_modules/@testing-library/dom": { "node_modules/@testing-library/dom": {
"version": "8.20.0", "version": "8.20.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz",
@@ -8804,12 +8833,24 @@
"integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==", "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
"dev": true "dev": true
}, },
"node_modules/lodash.castarray": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
"dev": true
},
"node_modules/lodash.debounce": { "node_modules/lodash.debounce": {
"version": "4.0.8", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
"dev": true "dev": true
}, },
"node_modules/lodash.isplainobject": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
"dev": true
},
"node_modules/lodash.merge": { "node_modules/lodash.merge": {
"version": "4.6.2", "version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -15641,6 +15682,30 @@
"defer-to-connect": "^2.0.0" "defer-to-connect": "^2.0.0"
} }
}, },
"@tailwindcss/typography": {
"version": "0.5.9",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
"integrity": "sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==",
"dev": true,
"requires": {
"lodash.castarray": "^4.4.0",
"lodash.isplainobject": "^4.0.6",
"lodash.merge": "^4.6.2",
"postcss-selector-parser": "6.0.10"
},
"dependencies": {
"postcss-selector-parser": {
"version": "6.0.10",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
"dev": true,
"requires": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
}
}
}
},
"@testing-library/dom": { "@testing-library/dom": {
"version": "8.20.0", "version": "8.20.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz",
@@ -19513,12 +19578,24 @@
"integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==", "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
"dev": true "dev": true
}, },
"lodash.castarray": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
"dev": true
},
"lodash.debounce": { "lodash.debounce": {
"version": "4.0.8", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
"dev": true "dev": true
}, },
"lodash.isplainobject": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
"dev": true
},
"lodash.merge": { "lodash.merge": {
"version": "4.6.2", "version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",

11
package.json
View File

@@ -10,9 +10,9 @@
"dependencies": { "dependencies": {
"@code-hike/mdx": "^0.8.1-next.0", "@code-hike/mdx": "^0.8.1-next.0",
"@prisma/client": "^4.11.0", "@prisma/client": "^4.11.0",
"@remix-run/node": "^1.13.0", "@remix-run/node": "^1.14.0",
"@remix-run/react": "^1.13.0", "@remix-run/react": "^1.14.0",
"@remix-run/serve": "^1.13.0", "@remix-run/serve": "^1.14.0",
"isbot": "^3.6.5", "isbot": "^3.6.5",
"mdx-bundler": "9.2.1", "mdx-bundler": "9.2.1",
"react": "^18.2.0", "react": "^18.2.0",
@@ -20,8 +20,9 @@
"shiki": "^0.14.1" "shiki": "^0.14.1"
}, },
"devDependencies": { "devDependencies": {
"@remix-run/dev": "^1.13.0", "@remix-run/dev": "^1.14.0",
"@remix-run/eslint-config": "^1.13.0", "@remix-run/eslint-config": "^1.14.0",
"@tailwindcss/typography": "^0.5.9",
"@types/react": "^18.0.25", "@types/react": "^18.0.25",
"@types/react-dom": "^18.0.8", "@types/react-dom": "^18.0.8",
"eslint": "^8.27.0", "eslint": "^8.27.0",

2
tailwind.config.js
View File

@@ -15,5 +15,5 @@ module.exports = {
}, },
}, },
}, },
plugins: [], plugins: [require("@tailwindcss/typography")],
}; };