DEV Community


Posted on

Optimize feed in ChatCraft

Last two week, I created share feed for ChatChaft in CloudFlare, this week, I tried to optimize it:

Refine the Feed Icon
At first, I just copied the URL after user clicking the Feed Icon on the header, but it is not a good way to show it to users. So I change it to open a new tab.

      const currentUrl = window.location.href;
      const parsedUrl = new URL(currentUrl);
      const userFeedUrl = `${parsedUrl.origin}/api/share/${user.username}/feed.atom`;, "_blank");
Enter fullscreen mode Exit fullscreen mode

The Endeavor to Parse HTML with Linkedom
Last week, I used cheerio to parse HTML on cloudflare, but it was published 2 years ago and hasn't seen updates since that.
So I try to find a better one library. I turn to use linkedom to parse HTML on cloudflare:

      const document = new DOMParser().parseFromString(chatContent, "text/html");

      const getTitle = document.querySelector('meta[property="og:title"]');
      const title = getTitle ? getTitle.getAttribute("content") : "No Title";

      const getSummary = document.querySelector('meta[property="og:description"]');
      const summary = getSummary ? getSummary.getAttribute("content") : "No Summary";

      const getUrl = document.querySelector('meta[property="og:url"]');
      const url = getUrl ? getUrl.getAttribute("content") : "No URL";
      const preContentElement = document.querySelector("pre");
      const preContent = preContentElement ? preContentElement.textContent : "";
Enter fullscreen mode Exit fullscreen mode

here I check getTitle first which can solve the some document don't have title sometimes.

I think I've finished the feed feature and we almost finish this semester, next week I'll make a conclusion of what I've done this semester on ChatCraft project.

Top comments (0)