ΔΗΜΟΣΙΟΓΡΑΦΙΚΗ ΕΡΓΑΣΙΑ ΣΤΗΝ ΑΝΑΠΤΥΞΗ

I'βήκαμε ψάχνει για ένα απλό σύστημα σχολίων για το blog μου που χρησιμοποιεί MarkdownΜSK1βούκαμε ΜSK2βου βρήκαμε ένα που μου άρεσε,βόκαμε έτσι αποφάσισα να γράψω το δικό μουM SK4Αυτό είναι ένα απλοποιημένο σύστημα σχολίου που χρησιμοποιείται Markdown για τη μορφοποίησηMK5Το δεύτερο μέρος αυτού θα προσθέσει ειδοποιήσεις ηλεκτρονικού ταχυδρομείου στο σύστημα που θα με στείλει ένα email με έναν σύνδεσμο προς το σχόλιο,βέκαμε ότι μπορώ να MST7βομαιMSS8βείτε πριν εμφανίζεται στον ιστότοπο

Και πάλι για ένα σύστημα παραγωγής αυτό θα χρησιμοποιούσε συνήθως μια βάση δεδομένων, επιχειρήσεις, αλλά για το παράδειγμα αυτό θέλω'm απλά πρόκειται να χρησιμοποιήσει markdown.

Το σύστημα σχολίων

Το σύστημα σχολίων είναι απίστευτα απλό.Έχω μόνο ένα αρχείο αποθήκευσης που αποθηκεύεται για κάθε σχόλιο με τον χρήστηΜSK1 όνομα ΜSK2 μήνυμα ηλεκτρονικού ταχυδρομείου και σχόλια . Τα σχόλια εμφανίζονται στη συνέχεια στην σελίδα με την σειρά που λαμβάνονται

Για να εισαγάγετε το σχόλιο χρησιμοποιώ SimpleMDE, έναν επεξεργαστή Markdown με βάση 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>

Στη συνέχεια, ξεκινάω τον επεξεργαστή SimpleMDE τόσο στο φορτίο σελίδας όσο και στο φορτία HTMX:

    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' και μόνο ξεκινήστε όταν ανακαλύπτεταιM SK2Εδώ βάζω τη φόρμα σε μια ΜSK4ΑυτιστοποιημένοMK5Η οποία μεταφέρομαι στο ViewModelMST7Αυτό σημαίνει ότι μπορώ να διασφαλίσω ότι μόνο εκείνοι που έχουν συνδεθεί με (αντίθεται με την GoogleΜST9 μπορούν να προσθέσουν σχόλια

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

You' will also notice I use HTMX here for the comment post. Πού χρησιμοποιώ το hxM SK2vals attribute και μια JS κλήση για να πάρετε την αξία για το σχόλιοΜSK3 Αυτό δημοσιεύεται στη συνέχεια στον διαχειριστή του Blog με το MSKA4CommentMska5 δράσηMKA6Αυτό μεταβιβάζεται μετά με το νέο σχόλιόMCA7

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