Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: implemented the dev card OG image #3903

Merged
merged 13 commits into from
Aug 9, 2024
Merged

Conversation

nickytonline
Copy link
Member

@nickytonline nickytonline commented Aug 8, 2024

Description

Implements the dev card OG image including the new OSCR score. This is the OG image for the dev card and user profile pages now.

@isabensusan, I was unable to use linear gradient for the border on the top % section as well as on the icons. We can revisit that when you're back.

Stating the obvious, but this generates an image, so accessibility in the JSX used to generate the image is irrelevant as it's no longer markup that's generated.

Related Tickets & Documents

Closes #3760

Mobile & Desktop Screenshots/Recordings

CleanShot 2024-08-09 at 16 14 15

image

image

CleanShot 2024-08-09 at 16 52 32

CleanShot 2024-08-09 at 16 53 13

Steps to QA

  1. Navigate to a dev card OG image, e.g. https://deploy-preview-3903--oss-insights.netlify.app/og-images/dev-card/?username=nickytonline
  2. Navigate to a dev card OG image, e.g. https://deploy-preview-3903--oss-insights.netlify.app/u/nickytonline/card
  3. The dev card page loads.
  4. Open the dev tools and inspect the markup for the OG image. Notice it's present.

CleanShot 2024-08-09 at 16 17 26

  1. Navigate to e.g. https://deploy-preview-3903--oss-insights.netlify.app/u/nickytonline
  2. The user profile page loads.
  3. Open the dev tools and inspect the markup for the OG image. Notice it's present.

CleanShot 2024-08-09 at 16 30 16

Tier (staff will fill in)

  • Tier 1
  • Tier 2
  • Tier 3
  • Tier 4

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

@nickytonline nickytonline marked this pull request as draft August 8, 2024 22:32
Copy link

netlify bot commented Aug 8, 2024

Deploy Preview for design-insights ready!

Name Link
🔨 Latest commit b1e1e20
🔍 Latest deploy log https://app.netlify.com/sites/design-insights/deploys/66b68844e7e34c0008010489
😎 Deploy Preview https://deploy-preview-3903--design-insights.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented Aug 8, 2024

Deploy Preview for oss-insights ready!

Name Link
🔨 Latest commit b1e1e20
🔍 Latest deploy log https://app.netlify.com/sites/oss-insights/deploys/66b68844ac040800089d3c89
😎 Deploy Preview https://deploy-preview-3903--oss-insights.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@nickytonline nickytonline force-pushed the nickytonline/og-image-dev-card branch 6 times, most recently from 0fd30c9 to ccdd4fb Compare August 9, 2024 16:21
@nickytonline nickytonline marked this pull request as ready for review August 9, 2024 20:11
@nickytonline nickytonline requested review from BekahHW and a team August 9, 2024 20:14
@nickytonline nickytonline force-pushed the nickytonline/og-image-dev-card branch from 17817e2 to bc2a180 Compare August 9, 2024 20:26
netlify/edge-functions/dev-card.tsx Show resolved Hide resolved
netlify/edge-functions/dev-card.tsx Show resolved Hide resolved
netlify/edge-functions/dev-card.tsx Show resolved Hide resolved
netlify/edge-functions/workspaces-card.tsx Show resolved Hide resolved
pages/u/[username]/index.tsx Show resolved Hide resolved
@nickytonline nickytonline force-pushed the nickytonline/og-image-dev-card branch from bc2a180 to 8475050 Compare August 9, 2024 20:36
Copy link
Contributor

@brandonroberts brandonroberts left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nickytonline nickytonline force-pushed the nickytonline/og-image-dev-card branch from 8806d51 to b1e1e20 Compare August 9, 2024 21:21
Copy link
Member

@jpmcb jpmcb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gave it a test spin, looks awesome!!

Screenshot 2024-08-09 at 3 20 01 PM

@jpmcb jpmcb enabled auto-merge August 9, 2024 21:26
@jpmcb jpmcb added this pull request to the merge queue Aug 9, 2024
Merged via the queue into beta with commit 5047e1f Aug 9, 2024
13 checks passed
@jpmcb jpmcb deleted the nickytonline/og-image-dev-card branch August 9, 2024 21:32
open-sauced bot pushed a commit that referenced this pull request Aug 9, 2024
## [2.53.0-beta.2](v2.53.0-beta.1...v2.53.0-beta.2) (2024-08-09)

### 🍕 Features

* implemented the dev card OG image ([#3903](#3903)) ([5047e1f](5047e1f))
open-sauced bot pushed a commit that referenced this pull request Aug 12, 2024
## [2.53.0](v2.52.0...v2.53.0) (2024-08-12)

### 🍕 Features

* add display query param for toggling repo contributors list view ([#3907](#3907)) ([d97c8f5](d97c8f5))
* implemented the dev card OG image ([#3903](#3903)) ([5047e1f](5047e1f))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature: Create an OG Image for dev cards
3 participants