eleboog-astro/src/components/Comments.astro

---
import HR from "../components/HR.astro";
---
<style>
    @import url('/src/styles/globals.css');

    @tailwind components;

    @layer components {
        h2 {
            @apply text-2xl font-serif text-title font-bold;
        }
        a {
            @apply font-serif text-subtitle hover:underline;
        }
        .commentheader > a {
            @apply font-mono text-lg text-subtitle hover:underline;
        }
        .commentfooter > a {
            @apply font-mono hover:underline;
        }
        blockquote {
            @apply p-2 pl-4 mb-2 border-l-4 border-l-crusta-300 dark:border-l-night-600 rounded-l-md bg-crusta-100 dark:bg-night-950 dark:bg-opacity-80 text-current;
        }
        textarea {
            @apply p-2 w-full bg-crusta-100 dark:bg-night-950 dark:bg-opacity-80;
        }
        .textboxfooter {
            @apply font-mono;
        }
        .textboxfooter > a {
            @apply font-mono;
        }
        input {
            @apply font-mono cursor-pointer text-subtitle hover:underline;
        }
    }   
</style>
<div class="comments">
    <HR/>
    <h2 class="">Comments</h2>
    <!-- <p>To leave your own comment, please <a href="/">login or register</a> your eleboog.com account.</p> -->
    <form method="POST">
        <label for="commentbox">Leave a comment as <a class="font-mono text-lg">kebokyo</a>&ensp;&mdash;&ensp;Markdown enabled ( <a class="font-mono text-lg">huh?</a> )</label>
        <textarea id="commentbox" name="commentbox" rows="4"/>
       
        <div class="textboxfooter">// <input type="submit" value="submit!"/> or press ctrl (cmd) + enter</div>
    </form>
    <p>By leaving a comment, you agree to the eleboog.com <a class="text-sm">code of conduct</a>. Dishonorable behavior may lead to account limits or termination.</p>
    <HR class="border-crusta-400 dark:border-night-600 border-dashed"/>
    <div class="commentheader mb-0">&starf; <a class="font-mono text-lg">kebokyo</a> (it/its) &mdash; May 4, 2025</div>
    <div class="commentblock pl-2 pt-1 mb-1 border-l-4  border-crusta-500 dark:border-night-400">
        <p class="mb-1">This is a markup of what I want the comments to look like.</p>
        <p>Like the rest of the site, minimal visual elements & unique text formatting are used to give a text-focused approach that
        can easily be scaled back for "lite" or gemini versions of the site.</p>
        <div class="commentsig font-mono mb-0">
            &starf; site owner of eleboog.com
        </div>
        <div class="commentfooter font-mono mb-2">
            2 <span class="font-sans text-sm">&hearts;</span>&emsp;//&emsp;<a>reply</a> - <a>quote</a>&emsp;//&emsp;<a>edit</a> - <a class="text-red-500 dark:text-red-400">delete x</a>
        </div>
    </div>
    <div class="commentindent pl-2 mb-2 border-l-2 border-b-2 border-gray-300 dark:border-gray-600">
        <div class="commentheader mb-0">&bullet; <a style="">user</a> (they/them) &mdash; May 4, 2025</div>
        <div class="commentblock pl-2 pt-1 mb-1 border-l-4 border-crusta-500 dark:border-night-400">
            <p>This would be a reply to the above comment.</p>
            <div class="commentsig font-mono mb-0">
                &CenterDot; insert signature here
            </div>
            <div class="commentfooter font-mono mb-2">
                3 <span class="font-sans text-sm text-crusta-500 dark:text-night-500">&hearts;</span>&check; (<a>unlike</a>)&emsp;//&emsp;<a>reply</a> - <a>quote</a>
            </div>
        </div>
        <div class="commentindent pl-2 mb-2 border-l-2 border-b-2 border-gray-300 dark:border-gray-600">
            <div class="commentheader mb-0">&bullet; <a style="">user2</a> (they/them) &mdash; May 4, 2025</div>
            <div class="commentblock pl-2 pt-1 mb-1 border-l-4  border-crusta-500 dark:border-night-400">
                <blockquote>
                    <p><i><a class="font-mono">user</a> said on May 4, 2025...</i>&emsp;(<a class="font-mono">jump to &uparrow;</a>)</p>
                    <p>This would be a reply to the above comment.</p>
                </blockquote>
                This would be an example of a "quoted" reply.
                <div class="commentsig font-mono mb-0">
                    &CenterDot; babobee babodah
                </div>
                <div class="commentfooter font-mono mb-2">
                    2 <span class="font-sans text-sm">&hearts;</span> (<a>like?</a>)&emsp;//&emsp;<a>reply</a> - <a>quote</a>
                </div>
            </div>
            <div class="commentindent pl-2 mb-2 border-l-2 border-b-2 border-gray-300 dark:border-gray-600">
                <i>3 more replies in thread...</i>&emsp;<a class="font-mono text-lg">explore &rightarrow;</a>
            </div>
            <div class="commentheader mb-0">&bullet; <a style="">user3</a> (they/them) &mdash; May 4, 2025</div>
            <div class="commentblock pl-2 pt-1 mb-2 border-l-4 border-b-2 border-crusta-500 dark:border-night-400">
                <p>One more reply for good measure...</p>
                <div class="commentsig font-mono mb-0">
                    &CenterDot; fdhsfklasdfijsdlfnkasfnsaf
                </div>
                <div class="commentfooter font-mono mb-2">
                    2 <span class="font-sans text-sm">&hearts;</span> (<a>like?</a>)&emsp;//&emsp;<a>reply</a> - <a>quote</a>
                </div>
            </div>
            <i>3 more replies in thread...</i>&emsp;<a class="font-mono text-lg">explore &rightarrow;</a>
        </div>
        <i>7 more replies in thread...</i>&emsp;<a class="font-mono text-lg">explore &rightarrow;</a>
    </div>
</div>