diff --git a/.gitignore b/.gitignore index 0e25bd2..34b8b1e 100644 --- a/.gitignore +++ b/.gitignore @@ -6,5 +6,5 @@ node_modules .env app/tailwind.css - -prisma/dev.db \ No newline at end of file +prisma/dev.db +posts \ No newline at end of file diff --git a/app/root.tsx b/app/root.tsx index 83750c8..8790a42 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -54,9 +54,9 @@ export function CatchBoundary() {
Where do you think you are going?
- - Home - +
+ Home +
@@ -75,13 +75,13 @@ export function ErrorBoundary() {
-
+
Something bad happened
- - Home - +
+ Home +
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index 9cf9159..a41d99c 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -48,7 +48,7 @@ export default function Index() {
- + Blog
diff --git a/app/routes/blog/EmptyState.tsx b/app/routes/blog/EmptyState.tsx index 971850b..5256a8c 100644 --- a/app/routes/blog/EmptyState.tsx +++ b/app/routes/blog/EmptyState.tsx @@ -1,7 +1,7 @@ export function EmptyState() { return (
-
+
I haven't post anything yet! So here's a pic of my cat
diff --git a/app/routes/blog/Post.tsx b/app/routes/blog/Post.tsx index 20cbce2..7fec1d7 100644 --- a/app/routes/blog/Post.tsx +++ b/app/routes/blog/Post.tsx @@ -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 ( -
-
- -
- - {title} - - {`(${new Date( - createdAt - ).toLocaleDateString()})`} -
- {description && ( -
- {description} +
+
+
+ +
+ + {title} + + {`(${new Date( + createdAt + ).toLocaleDateString()})`}
- )} - + {description && ( +
+ {description} +
+ )} + +
); diff --git a/app/routes/blog/route.tsx b/app/routes/blog/route.tsx index 61955ed..51c8302 100644 --- a/app/routes/blog/route.tsx +++ b/app/routes/blog/route.tsx @@ -10,18 +10,28 @@ export const loader = async () => { export default function () { const posts = useLoaderData(); return ( -
-
- Home +
+
+
+
+ Home +
+
-
- Here I blog about whatever get my attention +
+
+
+ Here I blog about whatever get my attention +
+
{posts.length > 0 ? ( -
- {posts.map((post, i) => ( - - ))} +
+
+ {posts.map((post, i) => ( + + ))} +
) : ( diff --git a/app/routes/blog_.$id.tsx b/app/routes/blog_.$id.tsx index 7e1c3b0..4f622c4 100644 --- a/app/routes/blog_.$id.tsx +++ b/app/routes/blog_.$id.tsx @@ -24,14 +24,17 @@ export default function () { const { post, code } = useLoaderData(); const Component = React.useMemo(() => getMDXComponent(code), [code]); return ( -
-
+
+
Go back
{post.title}
-
+
+
+ Go back +
); } diff --git a/docker-compose.yaml b/docker-compose.yaml new file mode 100644 index 0000000..230e300 --- /dev/null +++ b/docker-compose.yaml @@ -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: diff --git a/package-lock.json b/package-lock.json index f097be0..27b3d7f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 2be8074..734a0e3 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/tailwind.config.js b/tailwind.config.js index 4123702..2cafca3 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,5 +15,5 @@ module.exports = { }, }, }, - plugins: [], + plugins: [require("@tailwindcss/typography")], };