Comments Plugin onComment/onLoad Example
perchance.org

https://perchance.org/comments-plugin-oncomment-example Simple: Allow users to add a URL at the end of their nickname, which is hidden from their displayed nickname, but used as an avatar pic.

According to the tutorial, it is suggested to be simple. But because I am a newbie, I won’t even able to do it after explained like I was five.

  • VioneTMEnglish
    2•4 days ago

    Here is the modification of the example: https://perchance.org/gqp3r7gugk

    On that one, you can see on Line 56 is where you can access the username of the person that sent the comment. My implementation is as follows:

    • We can specify a pattern that the users can follow so the code can parse the URL that is provided.
    • Since the nickname is only 50 characters long only, we can have them only specify the File ID of their avatar that is uploaded on the Perchance upload.
    • The file id is the random string before the file extension e.g. https://user-uploads.perchance.org/file/<file id>.<file extension> which is about 32 characters + 4-5 characters due to file extension and the dot (.webp, .png, .jpeg etc) so only 13 characters are left for the nickname (at the minimum).
    • The pattern is as follows: nickname|fileId.fileExtension so on the code we can split them to the file ID and the nickname.
    • On Line 61 is where we create an Image element and pass the file id to the URL formatting for accessing files in the upload.
    • On LIne 66, I just revamped the bubble format, so it is a little bit like the ai-character-chat message bubble.
    • We also prioritize the blue username, if available, over the provided nickname. So, if the person has a blue nickname, they can just pass through |fileID.fileExtension on the nickname.
    • @ccufccOPEnglish
      2•4 days ago

      Thank you VioneT it looks decent!