feat: add support for blogpost from other (generic) platforms

[babblebey]

Description

This Pull Request adds support for blogpost from other platforms in highlights. Leverages the open-graph node library, fetches the open graph data from the given blogpost url provided as highlightLink and uses the image property on the data as the blogspot highlight type social image when posting new highlights.

Implementation Caveat 🤔

• No Support for Auto-Summarize

This is specifically because in order to consume the auto-summarize function, the generateDevToBlogHighlightSummary (which is an auto-summary function for the DevTo blogpost) takes two(2) arguments namely the blogTitle and blogMarkdown (which is the blog post content). This implementation uses the open-graph to fetch meta data which satisfies only the blogTitle. There isn't a straight-forward or consistent or lightweight implementation (aside scrapping 🤫) to access the body content of this generic blog post.

In the absence of the body content of this blog post, I hence settled for implementing a notice of no-support for auto-summarize for the auto-summarize feature on the generic blog post for now.

Changes Made

• Refactored all DevTo related components and functions, to reflect DevTo*** in its naming to make them more specific to dev.to blog post type
• Added a fetchOGData endpoint in the /api route which fetches open-graph data for specified url

const og = require("open-graph");

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const url = req.query.url;
  if (req.method === "GET") {
    og(url, (error: any, meta: {}) => {
      if (!error) {
        res.status(200).json({ response: meta });
      } else {
        res.status(200).json({ response: {} });
      }
    });
  }
}

• Added GenericBlogOpenGraphImage component which consumes the fetchOGData endpoint, builds and sends response image as returned component node.
• Added a isValidURL helper function to validate url input in the highlightLink field on highlight input form.
• Integrated the the GenericBlogOpenGraphImage component and isValidURL function in appropriate base components.
• Fixed edge case where repository are automatically tagged to blogposts without intentionally tagged repos, resulting in repositories url that do not exist.
• Implemented a toast in attempt to add notification for auto-summarize not being supported for blogpost from these generic platform because we do not currently have any means of accessing the exact blog post body content which is one of the required parameter/content for auto-summarize.

const handleGenerateHighlightSummary = async () => {
  ....

  // 🍕🍕🍕 NOTICE HERE 🍕🍕🍕 
  if (highlightLink && (!highlightLink.includes("github.com") || !highlightLink.includes("dev.to"))) {
    toast({
      description: "Auto-Summarize not supported for current link!",
      title: "Oops!",
      variant: "warning",
    });
    return;
  }

  ....
};

🍕

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• 🧑‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert

Related Tickets & Documents

Fixes #1656

Mobile & Desktop Screenshots/Recordings

Writing a (Generic) Blogpost highlight type

screencast-localhost_3000-2023.10.15-04_00_37.webm

Blogpost (without tagged repos)

Blogpost (with tagged repos)

Demo: Toast for Not Supported Message for Auto-Summarize

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed
• 🙋 no, because I need help

Added to documentation?

• 📜 README.md
• 📓 docs.opensauced.pizza
• 🍕 dev.to/opensauced
• 📕 storybook
• 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

This PR adds a new package open-graph

[optional] What gif best describes this PR or how it makes you feel?

[netlify]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	3158b1f
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/65b84f8c1d0622000821cffe
😎 Deploy Preview	https://deploy-preview-1774--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for oss-insights ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	551a6f4
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/652b4a753ee167000813ee5f
😎 Deploy Preview	https://deploy-preview-1774--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

PR Compliance Checks

Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.

Watched Files

This pull request modifies specific files that require careful review by the maintainers.

Files Matched

• npm-shrinkwrap.json
• package.json

[OgDev-01]

Hey @babblebey, would you mind fixing up the merge conflict before we proceed to reviewing this pr?

[jpmcb]

We've gotten some feedback that people want this feature: any updates here? Or if it's more or less ready to go we could merge beta onto @babblebey's branch

[babblebey]

Hey @jpmcb, it's pretty much ready, I just gotta fix the conflicts 😁

Will do shortly 🤞🏾

[netlify]

❌ Deploy Preview for oss-insights failed.

Name	Link
🔨 Latest commit	3158b1f
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/65b84f8cb516b0000832e021

[babblebey]

All set @jpmcb

Cc @OgDev-01

🍕

[BekahHW]

Hey @babblebey I'm going to move this to draft mode until you have time to work on it.

[babblebey]

Hey apologies @BekahHW, this proved super weird of a conflict to resolve, after many attempts at resolving, It kept coming back asking that I resolve over and over again.

I ended up moving for rebasing and that brought in all the 390 changes 😞

PR still works as it should for sure. I don't know exactly what impact the 390 changes would make on merge whenever it gets there, but I do recognize how uneasy it's become to review this PR now.... So kindly guide me here, will you say I keep this PR as is or would you prefer that I repatch this feature in another new PR that can remove the burden of the out-of-context 300+ file changes!?

Cc @OgDev-01 @jpmcb

[bdougie]

At this point this is not reviewable and the PR is getting stale.

My recommendation is create a new PR from a new branch from beta and cherry picking the commits you actually need.

Going to close this PR since this will require git surgery or some serious fixing to get back to unity.

[babblebey]

git surgery 😂🤣

I should patch this in less than 24h now, and I just mistakenly clicked "Delete Branch" 🤦🏾