नोट: प्रगति में कार्य

मैं मार्कडाउन का प्रयोग करते हुए मेरी ब्लॉग के लिए एक साधारण टिप्पणी प्रणाली की खोज कर रहा हूँ।

एक उत्पादन प्रणाली के लिए फिर से यह सामान्यतः एक डेटाबेस का उपयोग करेगा, लेकिन इस उदाहरण के लिए मैं सिर्फ मार्क डाउन का उपयोग करने जा रहा हूँ

टिप्पणी प्रणाली

टिप्पणी प्रणाली अविश्वसनीय रूप से सरल है।

टिप्पणी प्रविष्ट करने के लिए मैं एक Javascript आधारित मार्कडाउन संपादक का उपयोग करता हूँ यह मेरे में शामिल है _सजावट.cshtml निम्नलिखित के रूप में

<!-- Include the SimpleMDE CSS, here I use a dark theme -->
  <link rel="stylesheet" href="https://cdn.rawgit.com/xcatliu/simplemde-theme-dark/master/dist/simplemde-theme-dark.min.css">

<!--Later in the page include the JS for SimpleMDE -->
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

तब मैं दोनों पृष्ठ लोड और HTMX लोड पर SimpleMDE संपादक आरंभ करता हूँ

    var simplemde;
    document.addEventListener('DOMContentLoaded', function () {
    
        if (document.getElementById("comment") != null)
        {
        
       simplemde = new SimpleMDE({ element: document.getElementById("comment") });
       }
        
    });
    document.body.addEventListener('htmx:afterSwap', function(evt) {
        if (document.getElementById("comment") != null)
        {
        simplemde = new SimpleMDE({ element: document.getElementById("comment") });
        
        }
    });

यहाँ मैं निर्दिष्ट करता हूँ कि मेरे टिप्पणी पाठ क्षेत्र को 'comment' कहा जाता है और केवल एक बार इसे आरंभ करने के लिए यह पता चला है।

@if (Model.Authenticated)
    {
        
  
        <div class=" max-w-none border-b border-grey-lighter py-8 dark:prose-dark sm:py-12">
            <p class="font-body text-lg font-medium text-primary dark:text-white">Welcome @Model.Name please comment below.</p>
            <textarea id="comment"></textarea>
       <button class="btn btn-primary" hx-action="Comment" hx-controller="Blog" hx-post hx-vals="js:{comment: simplemde.value()}" hx-route-slug="@Model.Slug" hx-swap="outerHTML" hx-target="#comment" onclick="prepareForSubmission()">Comment</button>
        </div>
    }
    else
    {
       ...
    }

आप भी ध्यान देंगे कि मैं यहाँ टिप्पणी पोस्ट करने के लिए HTMX का उपयोग करता हूँ।

    [HttpPost]
    [Route("comment")]
    [Authorize]
    public async Task<IActionResult> Comment(string slug, string comment)
    {
        var principal = HttpContext.User;
        principal.Claims.ToList().ForEach(c => logger.LogInformation($"{c.Type} : {c.Value}"));
        var nameIdentifier = principal.FindFirst("sub");
        var userInformation = GetUserInfo();
       await commentService.AddComment(slug, userInformation, comment, nameIdentifier.Value);
        return RedirectToAction(nameof(Show), new { slug });
    }