Skip to content

Feat:add og image component and add feature flag for og image component #1107

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.

Sign up for GitHub

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

Merged
NiallJoeMaher merged 10 commits into from
Oct 16, 2024
Merged

Feat:add og image component and add feature flag for og image component #1107

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f315757
Feat:add og image component and add feature flag for og image component
South-IN Oct 11, 2024
f18fb3e
Merge branch 'develop' into feature/og-image-component
NiallJoeMaher Oct 12, 2024
12d0005
Requested changes done removed posthog-node
South-IN Oct 12, 2024
d391d82
Merge branch 'develop' into feature/og-image-component
South-IN Oct 12, 2024
774050f
Merge branch 'feature/og-image-component' of https://github.com/South…
South-IN Oct 12, 2024
caee206
Merge branch 'develop' into feature/og-image-component
NiallJoeMaher Oct 14, 2024
0882aef
Merge branch 'develop' into feature/og-image-component
NiallJoeMaher Oct 15, 2024
8ec71cd
fixed:run prettier to fix linting issue
South-IN Oct 15, 2024
80c0219
Merge branch 'develop' into feature/og-image-component
NiallJoeMaher Oct 16, 2024
7fe1702
Merge branch 'develop' into feature/og-image-component
NiallJoeMaher Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 143 additions & 5 deletions app/og/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ImageResponse } from "next/og";

import PostHogClient from "@/app/posthog";
export const runtime = "edge";

const height = 630;
Expand All @@ -8,7 +8,13 @@ const width = 1200;
export async function GET(request: Request) {
try {
const { searchParams } = new URL(request.url);

const posthogClient = PostHogClient()
const flags = await getData()
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Oct 11, 2024

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Optimize 'getData' function placement and usage.

The getData function is declared after it's called, which can affect readability. Additionally, creating a new PostHog client inside getData leads to multiple instances. Pass the existing posthogClient to getData and consider moving the function above its usage.

Apply this diff to refactor:

...
...

Also applies to: 216-220

const origin = `${request.headers.get('x-forwarded-proto') || 'http'}://${request.headers.get("host")}`
posthogClient.capture({
distinctId:"south-in",
event:"Og image generated"
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Oct 11, 2024

Choose a reason for hiding this comment

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

⚠️ Potential issue

Avoid hardcoding 'distinctId' to prevent PII leakage.

Using a hardcoded distinctId ("south-in") in posthogClient.capture and postHog.getAllFlags can lead to security and privacy concerns, as it may expose personally identifiable information (PII). Instead, consider dynamically generating the distinctId based on the user's session or anonymized data.

Apply this diff to fix the issue:

...

Also applies to: 218-219

})
// ?title=<title>
const hasTitle = searchParams.has("title");
const title = hasTitle
Expand All @@ -21,8 +27,131 @@ export async function GET(request: Request) {
import.meta.url,
),
).then((res) => res.arrayBuffer());

return new ImageResponse(
if (flags['og-image']){
return new ImageResponse(
(
<div
tw="flex flex-col h-full w-full justify-center"
style={{padding: "0 88px",backgroundColor:"#1d1b36",backgroundRepeat:"repeat",background: `
url('${origin}/images/og/noise.svg'),
radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.1), transparent 40%),
radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 40%)
` }}
>
<div className="line1" style={{
width:"1200px",
height:"30px",
borderTop:"1px solid #39374E",
borderBottom:"1px solid #39374E",
position:"absolute",
top:"50px"
}}></div>
<div className="line2" style={{
width:"1200px",
height:"30px",
borderTop:"1px solid #39374E",
borderBottom:"1px solid #39374E",
position:"absolute",
bottom:"50px"
}}></div>
<div className="line3" style={{
width:"30px",
height:"100%",
borderRight:"1px solid #39374E",
position:"absolute",
left:"50px"
}}></div>
<div className="line4" style={{
width:"30px",
height:"100%",
borderLeft:"1px solid #39374E",
position:"absolute",
right:"50px"
}}></div>
<img src={`${origin}/images/og/waves.svg`} style={{
position:"absolute",
top:"0",
left:"0",
width:"1200",
height:"630"
}}/>
<img src={`${origin}/images/og/stars.svg`} style={{position:"absolute",
top:"0",
left:"0",
width:"1200",
height:"630"
}}/>
<img src={`${origin}/images/og/planet.svg`} style={{
position:"absolute",
height:"188px",
width:"188px",
right:"0",
top:"10px"
}}/>

<img
alt="Codu Logo"
style={{
position: "absolute",
height: "53px",
width: "163px",
top: "88px",
left: "86px",
}}
src="https://www.codu.co/_next/image?url=%2Fimages%2Fcodu.png&w=1920&q=75"
/>
<div tw="flex relative flex-col" style={{marginTop:"200px"}}>
<div
style={{
color: "white",
fontSize: "52px",
lineHeight: 1,
fontWeight: "800",
letterSpacing: "-.025em",
fontFamily:"Lato",
lineClamp: 3,

}}
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Oct 11, 2024

Choose a reason for hiding this comment

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

⚠️ Potential issue

Replace invalid CSS property 'lineClamp' with proper text truncation.

The lineClamp style property is not standard in CSS. To truncate text after a certain number of lines, use the -webkit-line-clamp property along with other necessary styles for cross-browser support.

Apply this diff to fix the issue:



Alternatively, if you're using Tailwind CSS with the @tailwindcss/line-clamp plugin, you can simplify it:




Ensure the plugin is installed and configured correctly.




Committable suggestion was skipped due to low confidence.




    

  
  




    


        

      
  
  

    
  
    
    

  

  

  



          

              

      








    


  





        

    


    


  		



    

    

    

  
                >






    

    

    

  
                  {title}






    

    

    

  
                </div>






    

    

    

  
                <div tw="flex justify-between mt-7 text-white">






    

    

    

  
                  <div style={{display:"flex",flexDirection:"column",gap:"0.5rem"}}>






    

    

    

  
                  <div>Ben Gover</div>






    

    

    

  
                  <span>26th January 2024 . 4 min read</span>






    

    

    

  
                  </div>






    

    

    

  
                  <button style={{






    

    

    

  
                    padding: '10px 20px',






    

    

    

  
                    fontSize: '16px',






    

    

    

  
                    fontWeight: 'bold',






    

    

    

  
                    color: 'transparent', 






    

    

    

  
                    background: 'linear-gradient(to bottom right, #FCE9A7 0%, #FF7379 53%, #F963ED 100%)',






    

    

    

  
                    backgroundClip: 'text', 






    

    

    

  
                    WebkitBackgroundClip: 'text', 






    

    

    

  
                    border: '2px solid #FF7379',






    

    

    

  
    







    

    

    

  
                  }}>






    

    

    

  
                    Article






    

    

    

  
                  </button>






    

    

    

  
                </div>






    

    

    

  
              </div>






    

    

    

  
    







    

    

    

  
            </div>






    

    

    

  
          ),






    

    

    

  
          {






    

    

    

  
            fonts: [






    

    

    

  
              {






    

    

    

  
                name: "Inter Latin",






    

    

    

  
                data: fontData,






    

    

    

  
                style: "normal",






    

    

    

  
              },






    

    

    

  
            ],






    

    

    

  
            height,






    

    

    

  
            width,






    

    

    

  
          },






    

    

    

  
        );






    

    

    

  
        } else {






    

    

    

  
          return new ImageResponse(






    

    

    

  
          (






    

    

    

  
            <div






    

    

    

  
              tw="bg-black flex flex-col h-full w-full justify-center"






      

    
        
          
        
        Expand All
    
    @@ -45,7 +174,7 @@ export async function GET(request: Request) {
  


    

    

    

  
                    color: "white",






    

    

    

  
                    fontSize: "64px",






    

    

    

  
                    lineHeight: 1,






    

    

    

  
                    fontWeight: "800",






    

    

    

  
                    fontWeight:"bold",






    

    

    

  
                    letterSpacing: "-.025em",






    

    

    

  
                    lineClamp: 3,






    

    

    

  
                  }}






      

    
          
            
          
          Expand Down
          
            
          
          Expand Up
    
    @@ -74,9 +203,18 @@ export async function GET(request: Request) {
  


    

    

    

  
            width,






    

    

    

  
          },






    

    

    

  
        );






    

    

    

  
    







    

    

    

  
        }






    

    

    

  
    







    

    

    

  
      } catch {






    

    

    

  
        return new Response(`Failed to generate the image`, {






    

    

    

  
          status: 500,






    

    

    

  
        });






    

    

    

  
      }






    

    

    

  
    }






    

    

    

  
    







    

    

    

  
    async function getData(){






    

    

    

  
      const postHog = PostHogClient()






    

    

    

  
      const flags = await postHog.getAllFlags("south-in")






    

    

    

  
      return flags






    

    

    

  
    }
      
        
    

      
    








                
              


          


    

  



      
  

    

      

        



          



          
            8 changes: 8 additions & 0 deletions
          
          

        

  app/posthog.ts

  
  
      
      
  





        
      


      

        











            


          

          

            
              

                
    

              

            
            
                            

                            


                              
   View file



                                    


                                  


                            


                            

                            

    Open in desktop



                
            
          

        

      

    



    

      

          

            




              
      
    
              

                
                  

                      Original file line number
                      Diff line number
                      Diff line change
                  

                
                
                      
      

    
    
    @@ -0,0 +1,8 @@
  


    

    

    

  
    import {PostHog} from 'posthog-node'






    

    

    

  
    







    

    

    

  
    export default function PostHogClient(){






    

    

    

  
        const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY||"",{






    

    

    

  
            host: process.env.NEXT_PUBLIC_POSTHOG_HOST






    

    

    

  
        })






      


  
        

      
    
      

        

          



  

    

        

        

  

    

      

          
    
    

  


        
            
  
      
              Copy link

  

              
  
      
                Copy Markdown

  

        
      

    


    

        

  
    Contributor


        

    

  


  

    

      
          @coderabbitai
      

      
            coderabbitai
  Bot

      

      

      


        Oct 11, 2024


      
    


  




        

      

  

  
 

  
    

    
Choose a reason for hiding this comment


    

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


    

      
      



  



  
    

      
⚠️ Potential issue


Security concern: Potential exposure of PostHog key to client-side.


The use of environment variables prefixed with NEXT_PUBLIC_ for the PostHog key and host is concerning. In Next.js, variables prefixed with NEXT_PUBLIC_ are exposed to the browser, which could potentially expose your PostHog API key to client-side code.


Consider renaming these environment variables to remove the NEXT_PUBLIC_ prefix:


- const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY||"",{
-     host: process.env.NEXT_PUBLIC_POSTHOG_HOST
+ const posthogClient = new PostHog(process.env.POSTHOG_KEY||"",{
+     host: process.env.POSTHOG_HOST


Also, update any configuration files or deployment scripts to use these new variable names.




📝 Committable suggestion



‼️ IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.



  

    

      

        Suggested change
      

    

    

      

          

            
                const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY||"",{
          

          

            
                    host: process.env.NEXT_PUBLIC_POSTHOG_HOST
          

          

            
                })
          

          

            
                const posthogClient = new PostHog(process.env.POSTHOG_KEY||"",{
          

          

            
                    host: process.env.POSTHOG_HOST
          

          

            
                })
          

      

    

    

  






    

  
  




    


        

      
  
  

    
  
    
    

  

  

  



          

              

      








    


  





        

    


    


  		



    

    

    

  
        return posthogClient






    

    

    

  
    }
      
        
    

      
    








                
              


          


    

  



      
  

    

      

        


          

            
            
          


          



          
            1 change: 1 addition & 0 deletions
          
          

        

  package.json

  
  
      
      
  





        
      


      

        











            


          

          

            
              

                
    

              

            
            
                            

                            


                              
   View file



                                    


                                  


                            


                            

                            

    Open in desktop



                
            
          

        

      

    



    

      

          

            




              
      
    
              

                
                  

                      Original file line number
                      Diff line number
                      Diff line change
                  

                
                
                      
      

    
          
            
          
          Expand Up
    
    @@ -90,6 +90,7 @@
  


    

    

    

  
        "pg": "^8.12.0",






    

    

    

  
        "postgres": "^3.4.4",






    

    

    

  
        "posthog-js": "^1.166.1",






    

    

    

  
        "posthog-node": "^4.2.0",






    

    

    

  
        "prismjs": "^1.29.0",






    

    

    

  
        "react": "^18.3.1",






    

    

    

  
        "react-dom": "^18.3.1",






  

    
          
            
          
          Expand Down
    
    
  



                
              


          


    

  



      
  

    

      

        



          

  
    
      


          
            9 changes: 9 additions & 0 deletions
          
          

        

  public/images/og/noise.svg

  
  
      
      
  





        
      


      

        










            
                
                  

                  
                    

            

            


          

          

            
              

                
    

              

            
            
                            

                            


                              
   View file



                                    


                                  


                            


                            

                            

    Open in desktop



                
            
          

        

      

    



    

                  

    

      
      Loading

      
Sorry, something went wrong. Reload?

      
Sorry, we cannot display this file.

      
Sorry, this file is invalid so it cannot be displayed.

      
    

  

 

    

  






    

  
  
    
      Loading