feat: copy repo page ForksChart as image (#4036)

open-sauced · Aug 26, 2024 · d30beff · d30beff
1 parent 4d4b274
commit d30beff
Showing 1 changed file with 34 additions and 14 deletions.
diff --git a/pages/s/[org]/[repo]/index.tsx b/pages/s/[org]/[repo]/index.tsx
@@ -657,24 +657,44 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                             category,
                           })
                         }
+                        className="lg:col-span-6 h-fit"
                       />
                     </CopyContainer>
                   </div>
 
-                  <ForksChart
-                    stats={forkStats}
-                    total={repoData.forks}
-                    range={range}
-                    syncId={syncId}
-                    isLoading={isForksDataLoading}
-                    onCategoryClick={(category) =>
-                      posthog.capture("Repo Pages: clicked Forks Chart category", {
-                        repository: repoData.full_name,
-                        category,
-                      })
-                    }
-                    className="lg:col-span-6 h-fit"
-                  />
+                  <div className="lg:col-span-6 h-fit">
+                    <CopyContainer
+                      onCopyClick={() => {
+                        posthog.capture("Repo Pages: copied Forks chart", {
+                          repository: repoData.full_name,
+                        });
+                      }}
+                      options={{
+                        windowWidth: 1700,
+                        allowTaint: true,
+                        onclone: (document, element) => {
+                          element.querySelectorAll("[data-copy-image-branding]").forEach((el) => {
+                            el.classList.remove("hidden");
+                          });
+                        },
+                      }}
+                    >
+                      <CopyImageBranding repository={repoData.full_name} />
+                      <ForksChart
+                        stats={forkStats}
+                        total={repoData.forks}
+                        range={range}
+                        syncId={syncId}
+                        isLoading={isForksDataLoading}
+                        onCategoryClick={(category) =>
+                          posthog.capture("Repo Pages: clicked Forks Chart category", {
+                            repository: repoData.full_name,
+                            category,
+                          })
+                        }
+                      />
+                    </CopyContainer>
+                  </div>
                 </div>
               </section>
             </div>