NOTA: WORK IN PROGRESS

Jag har letat efter ett enkelt kommentarersystem för min blogg som använder Markdown, så jag kunde inte hitta ett som jag gillade., så jag bestämde mig för att skriva mitt eget... Det här är ett enkelt تبصرهsystem som använder markerdown för formating.M SK5. Den andra delen av detta kommer att lägga till e-postmeddelanden i systemet som kommer att skicka mig en e-mail med en länk till kommentareret.

Återigen, för ett produktionssystem skulle det vanligtvis använda en databas, men i detta fall skulle jag bara använda markerdown.

Kommenteringssystemet

Kommenteringssystemet är otroligt enkelt.

För att skriva in en kommentar använder jag SimpleMDE, en markerdown-editor med Javascript Detta är inkluderat i min _Layout.cshtml som follows:

<!-- 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>

Jag initialiserar sedan SimpleMDE-editorn på både sidan och HTMX-laad.

    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") });
        
        }
    });

Här specifikerar jag att min kommentarer textyta kallas 'comment' och bara initialiseras när den identifiseras, 's upptäckt, | | . | Här ompackar jag formen i en ♫ ' | IsAuthenticated ♫ | ' | МSK6 | som jag skickar in i ViewModeln, ♪ ). | Det betyder att jag kan försäkra mig om att endast de som nu är inloggade i ♫

@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
    {
       ...
    }

Ni kommer också att märka att jag använder HTMX här för att lägga upp kommentarer.

    [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 });
    }