log101/log101-dot-dev
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement commenting

Browse Source
This commit is contained in:
log101 2024-06-20 19:40:55 +03:00
parent 6c0b81c883
commit 8faa7f472d
4 changed files with 34 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/CommentForm.astro
View File

@ -1,5 +1,6 @@
--- ---
const { entryId } = Astro.props;
const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
--- ---
<style> <style>
@ -20,18 +21,33 @@
} }
</style> </style>
<form> <form
id="comment-form"
hx-post=`${backendHost}/api/blog/comments`
hx-target="#comments-container"
hx-swap="afterbegin"
hx-on::after-request="document.getElementById('no-comments-text')?.remove();this.reset()"
>
<div class="p-1 flex flex-col flex-end items-end gap-3"> <div class="p-1 flex flex-col flex-end items-end gap-3">
<textarea <textarea
class="textarea py-2 px-3 w-full box-border" class="textarea py-2 px-3 w-full box-border"
rows="5" rows="5"
placeholder="Yazı hakkındaki düşünceleriniz nelerdir?"></textarea> placeholder="Yazı hakkındaki düşünceleriniz nelerdir?"
name="commentBody"></textarea>
<input <input
type="text" type="text"
class="w-full py-2 px-3 box-border" class="w-full py-2 px-3 box-border"
placeholder="İsminiz (Yazmak zorunda değilsiniz)" placeholder="İsminiz (Yazmazsanız yorumunuz anonim kalacaktır)"
name="username"
/> />
<button type="submit" class="px-3 py-1 w-fit">Yorum Yap</button> <input type="hidden" name="postId" value=`${entryId}` />
<button type="submit" class="px-3 py-1 w-fit" id="comment-form-button"
>Yorum Yap</button
>
</div> </div>
</form> </form>
<script>
function clearNoCommentText() {}
</script>

2
src/components/EmojiReactionForm.astro
View File

@ -15,7 +15,7 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
</style> </style>
<form <form
hx-post=`${backendHost}/blog/api/forms/emoji/post` hx-post=`${backendHost}/api/blog/forms/emoji`
hx-target="#reaction-buttons" hx-target="#reaction-buttons"
> >
<input type="hidden" name="postId" value=`${entryId}` /> <input type="hidden" name="postId" value=`${entryId}` />

1
src/layouts/Layout.astro
View File

@ -16,6 +16,7 @@ import "../styles/main.css";
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<script src="../scripts/htmx.min.js"></script> <script src="../scripts/htmx.min.js"></script>
<meta name="htmx-config" content='{code:"204", swap: false}' />
<title>{title}</title> <title>{title}</title>
</head> </head>
<body class="flex justify-center font-sans"> <body class="flex justify-center font-sans">

14
src/pages/category/[category]/[slug]/index.astro
View File

@ -12,6 +12,8 @@ import Comment from "@/components/Comment.astro";
const { entry } = Astro.props; const { entry } = Astro.props;
const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
export async function getStaticPaths() { export async function getStaticPaths() {
const blogEntries = await getCollection("blog"); const blogEntries = await getCollection("blog");
return blogEntries.map((entry) => ({ return blogEntries.map((entry) => ({
@ -29,10 +31,16 @@ export async function getStaticPaths() {
<section class="comments"> <section class="comments">
<h6 class="text-xl mb-3">Yorumlar</h6> <h6 class="text-xl mb-3">Yorumlar</h6>
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<Comment /> <div
<Comment /> hx-get=`${backendHost}/api/blog/comments?postId=${entry.id}`
hx-trigger="load"
hx-swap="innerHTML"
id="comments-container"
>
<p id="no-comments-text">Henüz yorum yok!</p>
</div>
<HorizontalLine /> <HorizontalLine />
<CommentForm /> <CommentForm entryId={entry.id} />
</div> </div>
</section> </section>
<Footer /> <Footer />