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>
@ -20,18 +21,33 @@
}
</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">
<textarea
class="textarea py-2 px-3 w-full box-border"
rows="5"
placeholder="Yazı hakkındaki düşünceleriniz nelerdir?"></textarea>
placeholder="Yazı hakkındaki düşünceleriniz nelerdir?"
name="commentBody"></textarea>
<input
type="text"
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>
</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>
<form
hx-post=`${backendHost}/blog/api/forms/emoji/post`
hx-post=`${backendHost}/api/blog/forms/emoji`
hx-target="#reaction-buttons"
>
<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" />
<meta name="generator" content={Astro.generator} />
<script src="../scripts/htmx.min.js"></script>
<meta name="htmx-config" content='{code:"204", swap: false}' />
<title>{title}</title>
</head>
<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 backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
export async function getStaticPaths() {
const blogEntries = await getCollection("blog");
return blogEntries.map((entry) => ({
@ -29,10 +31,16 @@ export async function getStaticPaths() {
<section class="comments">
<h6 class="text-xl mb-3">Yorumlar</h6>
<div class="flex flex-col gap-6">
<Comment />
<Comment />
<div
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 />
<CommentForm />
<CommentForm entryId={entry.id} />
</div>
</section>
<Footer />