Online dynamic list generated using memos

memos is an open-source self-hosted memo center with knowledge management and social features.

Github address: https://github.com/usememos/memos

You can use its provided API and combine it with a static blog to create an online dynamic list similar to the moments feature.

The interface URL has a fixed format, and the openId is generated for each user.

Next, I wrote two methods, one for converting timestamps to normal time format, and another for removing unnecessary tags from the content using regular expressions.

Copy the following code to the page where you want to display it, just modify the openId. It provides a basic style, and if you have any other optimization suggestions, please feel free to point them out.

Since the interface contains user keys, it is recommended to encrypt the JavaScript code after completing it before importing it, otherwise there may be certain security risks.

Recommended website: https://tool.lu/js/

<!-- Structure and CSS -->
<div class="sslist"></div>

<style>
.sslist-item {
  padding: 10px 10px 20px;
  margin-bottom: 20px;
  border-radius: 2px;
  background: #f3f3f3;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
  transition: all 0.2s linear;
  animation: up 1s forwards;
  transform: translateY(20px);
  opacity: 0;
}

@keyframes up {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.sslist-item:hover {
  background: #eee;
}

.sslist-item .sslist-date {
  opacity: 0.6;
  margin: 0;
  font-size: 15px;
  margin-bottom: 5px;
}
</style>

// JavaScript method for calling the API
function memosShow() {
  var memosStr = "";
  var openId = "xxx";
  $.ajax({
    url: "https://memos.zburu.com/api/memo?openId=" + openId + "&tag=moments",
    type: "get",
    dataType: "json",
    success: function (data) {
      // Generate an array
      const sslist = data.data;

      for (let i = 0; i < sslist.length; i++) {
        const element = sslist[i];

        // Convert timestamp to normal time format 2023-01-9 13:17:12
        var date = new Date(element.createdTs * 1000);
        Y = date.getFullYear() + "-";
        M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
        h = date.getHours() + ":";
        m = date.getMinutes() + ":";
        s = date.getSeconds();
        const createdTsNew = Y + M + D + h + m + s;
        sslist[i].createdTs = createdTsNew;

        // Remove the preceding tag characters from the content using JavaScript regular expressions
        const contentNew = element.content.slice(4);
        sslist[i].content = contentNew;
      }

      $.each(data.data, function (i, item) {
        list =
          "<div class='sslist-item'>" +
          "<p class='sslist-date'>" +
          item.createdTs +
          "</p>" +
          item.content +
          "</div>";
        memosStr += list;
      }),
        $(".sslist").html(memosStr);
    },
    error: function () {
      console.log("error");
    }
  });
}
memosShow();