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
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 className="font-bold">Where do you think you are going?</div>
<div className="text-center">
<Link to="/" className="hover:text-[#e6c2bf]">
Home
</Link>
<div className="mt-5 hover:text-[#e6c2bf] lg:text-xl font-bold">
<Link to="/">Home</Link>
</div>
</div>
</div>
</div>
@@ -75,13 +75,13 @@ export function ErrorBoundary() {
<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">
<div className="text-center text-[#ffff00] text-[6vw] font-bold">
Something bad happened
</div>
<div className="text-center">
<Link to="/" className="hover:text-[#e6c2bf]">
Home
</Link>
<div className="mt-5 hover:text-[#e6c2bf] lg:text-xl font-bold">
<Link to="/">Home</Link>
</div>
</div>
</div>
</div>

2
app/routes/_index.tsx
View File

@@ -48,7 +48,7 @@ export default function Index() {
</IconContext.Provider>
</nav>
<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
</Link>
</div>

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

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

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

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

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

@@ -24,14 +24,17 @@ export default function () {
const { post, code } = useLoaderData<typeof loader>();
const Component = React.useMemo(() => getMDXComponent(code), [code]);
return (
<div className="m-5 h-max flex flex-col items-center">
<div className="hover:text-[#e6c2bf] text-xl">
<div className="h-fit w-full flex flex-col items-center">
<div className="mt-5 hover:text-[#e6c2bf] text-xl font-bold">
<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">
<div className="m-3 lg:w-1/3 prose dark:prose-invert prose-a:no-underline prose-a:font-bold">
<Component />
</div>
<div className="mt-5 mb-5 hover:text-[#e6c2bf] text-xl font-bold">
<Link to="/blog">Go back</Link>
</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": {
"@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",
"@remix-run/node": "^1.14.0",
"@remix-run/react": "^1.14.0",
"@remix-run/serve": "^1.14.0",
"isbot": "^3.6.5",
"mdx-bundler": "9.2.1",
"react": "^18.2.0",
@@ -17,8 +17,9 @@
"shiki": "^0.14.1"
},
"devDependencies": {
"@remix-run/dev": "^1.13.0",
"@remix-run/eslint-config": "^1.13.0",
"@remix-run/dev": "^1.14.0",
"@remix-run/eslint-config": "^1.14.0",
"@tailwindcss/typography": "^0.5.9",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.8",
"eslint": "^8.27.0",
@@ -3415,6 +3416,34 @@
"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": {
"version": "8.20.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz",
@@ -8804,12 +8833,24 @@
"integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
"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": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
"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": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -15641,6 +15682,30 @@
"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": {
"version": "8.20.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz",
@@ -19513,12 +19578,24 @@
"integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
"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": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
"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": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",

11
package.json
View File

@@ -10,9 +10,9 @@
"dependencies": {
"@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",
"@remix-run/node": "^1.14.0",
"@remix-run/react": "^1.14.0",
"@remix-run/serve": "^1.14.0",
"isbot": "^3.6.5",
"mdx-bundler": "9.2.1",
"react": "^18.2.0",
@@ -20,8 +20,9 @@
"shiki": "^0.14.1"
},
"devDependencies": {
"@remix-run/dev": "^1.13.0",
"@remix-run/eslint-config": "^1.13.0",
"@remix-run/dev": "^1.14.0",
"@remix-run/eslint-config": "^1.14.0",
"@tailwindcss/typography": "^0.5.9",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.8",
"eslint": "^8.27.0",

2
tailwind.config.js
View File

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