refactor: replace `PRSocialCard` with githubs Opengraph image #889

OgDev-01 · 2023-02-20T19:57:52Z

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

Description

This PR:

refactors the highlight social image to leverage GitHub open graph image

Related Tickets & Documents

Fixes #883

Mobile & Desktop Screenshots/Recordings

Added tests?

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

Added to documentation?

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

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

netlify · 2023-02-20T19:57:56Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`840d904`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/63f4e5762ce47e000824788e
😎 Deploy Preview	https://deploy-preview-889--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 settings.

netlify · 2023-02-20T19:57:56Z

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	`840d904`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/63f4e57636a1780008b0546b
😎 Deploy Preview	https://deploy-preview-889--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 settings.

github-actions

PR Compliance Checks Passed!

bdougie · 2023-02-20T20:01:33Z

mobile width/height needs to be address.

Browser metadata

Path:      /user/bdougie
Browser:   Chrome 109.0.0.0 on Mac OS 10.15.7
Viewport:  559 x 830 @2x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

0-vortex · 2023-02-20T20:20:58Z

lib/utils/github.ts

@@ -20,7 +20,7 @@ const generateApiPrUrl = (
    const trimmedUrl = url.trim();
    const githubUrl = new URL(trimmedUrl.includes("https://") ? trimmedUrl : `https://${trimmedUrl}`);
    const { pathname } = githubUrl;
-
+    console.log(pathname);


0-vortex · 2023-02-20T20:22:10Z

next.config.js

@@ -7,7 +7,8 @@ module.exports = {
      "images.unsplash.com",
      "www.github.com",
      "github.com",
-      "res.cloudinary.com"
+      "res.cloudinary.com",
+      "opengraph.githubassets.com"


don't optimise github images: https://nextjs.org/docs/basic-features/image-optimization#domains

OgDev-01 · 2023-02-20T20:34:01Z

mobile width/height needs to be address.

Browser metadata
Open Deploy Preview · Mark as Resolved

Fixed

0-vortex · 2023-02-21T07:51:34Z

components/molecules/GhOpenGraphImg/gh-open-graph-img.tsx

+  const { isValid, url } = generateGhOgImage(githubLink);
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element


please stop disabling eslint rules and state your problems

It's a nextjs warning to not use the native img tag in next https://nextjs.org/docs/messages/no-img-element

That seems aggressive for linter, but disabling it seems like a band-aid. Are there other alternatives @OgDev-01?

Another alternative is to disable globally in the .eslintrc rules

Or try this solution from the official next docs

brandonroberts

LGTM. Need to resolve solution on lint rule

## [1.30.0-beta.8](v1.30.0-beta.7...v1.30.0-beta.8) (2023-02-21) ### 🐛 Bug Fixes * replace `PRSocialCard` component with GitHub OpenGraph image ([#889](#889)) ([3bfc5a4](3bfc5a4)), closes [#883](#883)

github-actions · 2023-02-21T15:49:52Z

🎉 This PR is included in version 1.30.0-beta.8 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.30.0](v1.29.0...v1.30.0) (2023-02-21) ### 🍕 Features * add highlights to user profile page ([#859](#859)) ([4b01376](4b01376)), closes [#830](#830) * add dropdown for topics in Explore ([#877](#877)) ([9579902](9579902)), closes [#533](#533) * disable create insight page button if the page name is missing ([#857](#857)) ([95da564](95da564)), closes [#852](#852) ### 🐛 Bug Fixes * disable create page button only if insight page name is empty ([#893](#893)) ([ed52399](ed52399)), closes [#892](#892) * hide non-functional elements in highlights card ([#881](#881)) ([ba1bd5e](ba1bd5e)) * rename 404 image file ([4e5171f](4e5171f)) * replace `PRSocialCard` component with GitHub OpenGraph image ([#889](#889)) ([3bfc5a4](3bfc5a4)), closes [#883](#883) * reset text input fields when clear button is clicked ([#869](#869)) ([783098d](783098d)), closes [#858](#858) * user profile interest pill UI fix ([#890](#890)) ([4cbff36](4cbff36))

github-actions · 2023-02-21T17:20:35Z

🎉 This PR is included in version 1.30.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.30.0-beta.8](open-sauced/app@v1.30.0-beta.7...v1.30.0-beta.8) (2023-02-21) ### 🐛 Bug Fixes * replace `PRSocialCard` component with GitHub OpenGraph image ([#889](open-sauced/app#889)) ([3bfc5a4](open-sauced/app@3bfc5a4)), closes [#883](open-sauced/app#883)

## [1.30.0](open-sauced/app@v1.29.0...v1.30.0) (2023-02-21) ### 🍕 Features * add highlights to user profile page ([#859](open-sauced/app#859)) ([4b01376](open-sauced/app@4b01376)), closes [#830](open-sauced/app#830) * add dropdown for topics in Explore ([#877](open-sauced/app#877)) ([9579902](open-sauced/app@9579902)), closes [#533](open-sauced/app#533) * disable create insight page button if the page name is missing ([#857](open-sauced/app#857)) ([95da564](open-sauced/app@95da564)), closes [#852](open-sauced/app#852) ### 🐛 Bug Fixes * disable create page button only if insight page name is empty ([#893](open-sauced/app#893)) ([ed52399](open-sauced/app@ed52399)), closes [#892](open-sauced/app#892) * hide non-functional elements in highlights card ([#881](open-sauced/app#881)) ([ba1bd5e](open-sauced/app@ba1bd5e)) * rename 404 image file ([4e5171f](open-sauced/app@4e5171f)) * replace `PRSocialCard` component with GitHub OpenGraph image ([#889](open-sauced/app#889)) ([3bfc5a4](open-sauced/app@3bfc5a4)), closes [#883](open-sauced/app#883) * reset text input fields when clear button is clicked ([#869](open-sauced/app#869)) ([783098d](open-sauced/app@783098d)), closes [#858](open-sauced/app#858) * user profile interest pill UI fix ([#890](open-sauced/app#890)) ([4cbff36](open-sauced/app@4cbff36))

OgDev-01 added 3 commits February 20, 2023 19:56

refactor: replace puul highlights with gh Og Image

0b7b7ae

chore: add generate url utils and test

526076f

chore: cleanup

f7e1a49

OgDev-01 requested review from brandonroberts and Deadreyo February 20, 2023 19:58

github-actions bot reviewed Feb 20, 2023

View reviewed changes

OgDev-01 requested review from 0-vortex and bdougie February 20, 2023 19:58

0-vortex reviewed Feb 20, 2023

View reviewed changes

OgDev-01 added 2 commits February 20, 2023 21:30

fix: remove optomization on open graph image

abb5dd3

chore: cleanups

4b1fa9d

bdougie approved these changes Feb 20, 2023

View reviewed changes

0-vortex reviewed Feb 21, 2023

View reviewed changes

brandonroberts approved these changes Feb 21, 2023

View reviewed changes

refactor: fix eslint errors on img tag usage

840d904

brandonroberts merged commit 3bfc5a4 into beta Feb 21, 2023

brandonroberts deleted the opengraph-image branch February 21, 2023 15:44

github-actions bot added the released on @beta label Feb 21, 2023

github-actions bot added the released label Feb 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: replace `PRSocialCard` with githubs Opengraph image #889

refactor: replace `PRSocialCard` with githubs Opengraph image #889

OgDev-01 commented Feb 20, 2023 •

edited

netlify bot commented Feb 20, 2023 •

edited

netlify bot commented Feb 20, 2023 •

edited

github-actions bot left a comment •

edited

bdougie commented Feb 20, 2023

0-vortex Feb 20, 2023

0-vortex Feb 20, 2023

OgDev-01 Feb 20, 2023

OgDev-01 commented Feb 20, 2023

0-vortex Feb 21, 2023

OgDev-01 Feb 21, 2023

bdougie Feb 21, 2023

OgDev-01 Feb 21, 2023 •

edited

brandonroberts left a comment

github-actions bot commented Feb 21, 2023

github-actions bot commented Feb 21, 2023

refactor: replace PRSocialCard with githubs Opengraph image #889

refactor: replace PRSocialCard with githubs Opengraph image #889

Conversation

OgDev-01 commented Feb 20, 2023 • edited

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

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentation?

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

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

netlify bot commented Feb 20, 2023 • edited

✅ Deploy Preview for design-insights ready!

netlify bot commented Feb 20, 2023 • edited

✅ Deploy Preview for oss-insights ready!

github-actions bot left a comment • edited

Choose a reason for hiding this comment

bdougie commented Feb 20, 2023

0-vortex Feb 20, 2023

Choose a reason for hiding this comment

0-vortex Feb 20, 2023

Choose a reason for hiding this comment

OgDev-01 Feb 20, 2023

Choose a reason for hiding this comment

OgDev-01 commented Feb 20, 2023

0-vortex Feb 21, 2023

Choose a reason for hiding this comment

OgDev-01 Feb 21, 2023

Choose a reason for hiding this comment

bdougie Feb 21, 2023

Choose a reason for hiding this comment

OgDev-01 Feb 21, 2023 • edited

Choose a reason for hiding this comment

brandonroberts left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 21, 2023

github-actions bot commented Feb 21, 2023

refactor: replace `PRSocialCard` with githubs Opengraph image #889

refactor: replace `PRSocialCard` with githubs Opengraph image #889

OgDev-01 commented Feb 20, 2023 •

edited

netlify bot commented Feb 20, 2023 •

edited

netlify bot commented Feb 20, 2023 •

edited

github-actions bot left a comment •

edited

OgDev-01 Feb 21, 2023 •

edited