new ig story

remotion-dev · Dec 18, 2024 · d0024ad · d0024ad
1 parent 032bf45
commit d0024ad
Show file tree

Hide file tree

Showing 17 changed files with 322 additions and 139 deletions.
diff --git a/icons/PrivateContributionsIcon.tsx b/icons/PrivateContributionsIcon.tsx
@@ -1,9 +1,9 @@
 import type { SVGProps } from "react";
 export const PrivateContributionsIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...props}>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" {...props}>
     <path
       fill="var(--pane-text)"
-      d="M144 144c0-44.2 35.8-80 80-80c31.9 0 59.4 18.6 72.3 45.7c7.6 16 26.7 22.8 42.6 15.2s22.8-26.7 15.2-42.6C331 33.7 281.5 0 224 0C144.5 0 80 64.5 80 144l0 48-16 0c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-240 0 0-48z"
+      d="M352 128c0-44.2 35.8-80 80-80s80 35.8 80 80l0 72c0 13.3 10.7 24 24 24s24-10.7 24-24l0-72C560 57.3 502.7 0 432 0S304 57.3 304 128l0 64L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-64zM64 240l320 0c8.8 0 16 7.2 16 16l0 192c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-192c0-8.8 7.2-16 16-16z"
     />
   </svg>
 );
diff --git a/icons/UserIcon.tsx b/icons/UserIcon.tsx
@@ -1,13 +1,8 @@
 export const UserIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    viewBox="0 0 18 18"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...props}>
     <path
-      d="M5.80469 5.07031C5.80469 6.87937 7.27688 8.35156 9.08594 8.35156C10.895 8.35156 12.3672 6.87937 12.3672 5.07031C12.3672 3.26125 10.895 1.78906 9.08594 1.78906C7.27688 1.78906 5.80469 3.26125 5.80469 5.07031ZM14.9193 15.6432H15.6484V14.9141C15.6484 12.1002 13.3581 9.8099 10.5443 9.8099H7.6276C4.81302 9.8099 2.52344 12.1002 2.52344 14.9141V15.6432H14.9193Z"
       fill="var(--pane-text)"
+      d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464l349.5 0c-8.9-63.3-63.3-112-129-112l-91.4 0c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3z"
     />
   </svg>
 );
diff --git a/public/shining.png b/public/shining.png
diff --git a/remotion/IGStory/BarChart.tsx b/remotion/IGStory/BarChart.tsx
@@ -1,6 +1,10 @@
 import React from "react";
 import { z } from "zod";
-import { PANE_BACKGROUND, PANE_BORDER } from "../TopLanguages/Pane";
+import {
+  PANE_BACKGROUND,
+  PANE_BORDER,
+  PANE_TEXT_COLOR,
+} from "../TopLanguages/Pane";
 
 const Bar: React.FC<{
   readonly progress: number;
@@ -21,7 +25,7 @@ const Bar: React.FC<{
         style={{
           height: 150 * progress,
           width: 30,
-          background: most ? "white" : PANE_BACKGROUND,
+          background: most ? PANE_TEXT_COLOR : PANE_BACKGROUND,
           border: PANE_BORDER,
           borderRadius: 10,
           marginBottom: 10,
@@ -32,7 +36,7 @@ const Bar: React.FC<{
           fontFamily: "Mona Sans",
           fontWeight: "bold",
           marginLeft: 3,
-          color: "white",
+          color: PANE_TEXT_COLOR,
         }}
       >
         {letter}
@@ -51,17 +55,12 @@ export const BarChart: React.FC<{
   return (
     <div
       style={{
-        width: 400,
-        position: "absolute",
-        height: 220,
-        top: 420,
-        left: -75,
         display: "flex",
         flexDirection: "row",
         justifyContent: "center",
-        alignItems: "center",
+        alignItems: "flex-end",
         gap: 20,
-        transform: "scale(0.55)",
+        transform: "scale(0.8)",
       }}
     >
       {graphData.map((_, i) => {

diff --git a/remotion/IGStory/GraphData.tsx b/remotion/IGStory/GraphData.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { interpolateColors } from "remotion";
+import { PANE_TEXT_COLOR } from "../TopLanguages/Pane";
 
 const Dot: React.FC<{
   readonly index: number;
@@ -9,40 +10,86 @@ const Dot: React.FC<{
   const row = index % 7;
   const column = Math.floor(index / 7);
 
+  const opacity = Math.max(
+    0.1,
+    value >= max ? 1 : value > 0 ? Math.max(value / max, 0.25) : 0,
+  );
+
   const activityColor = interpolateColors(
     value,
     [0, Math.max(1, max)],
-    ["#202138", "#2486ff"],
+    ["#202138", "#070842"],
   );
 
   return (
     <div
       style={{
-        height: 4.5,
-        width: 4.5,
+        height: 7,
+        width: 7,
         borderRadius: 1.5,
         backgroundColor: activityColor,
         position: "absolute",
-        left: 125 + column * 6.2,
-        top: 393 + row * 8,
+        left: column * 10 + 22,
+        top: row * 10 + 18,
+        opacity,
       }}
     />
   );
 };
 
+const Stat: React.FC<{
+  readonly data: number;
+  readonly label: string;
+  readonly align: "left" | "right";
+}> = ({ data, label, align }) => {
+  return (
+    <div
+      style={{
+        color: PANE_TEXT_COLOR,
+        fontFamily: "Mona Sans",
+        textAlign: align,
+      }}
+    >
+      <div style={{ fontSize: 20, fontWeight: "bolder" }}>{data}</div>
+      <div style={{ fontSize: 14 }}>{label}</div>
+    </div>
+  );
+};
+
 export const ContributionGraphic: React.FC<{
   readonly graphData: number[];
-}> = ({ graphData }) => {
+  readonly totalContributions: number;
+  readonly longestStreak: number;
+}> = ({ graphData, totalContributions, longestStreak }) => {
   return (
     <div
       style={{
-        position: "absolute",
+        paddingTop: 24,
       }}
     >
-      {graphData.map((g, i) => {
-        // eslint-disable-next-line react/no-array-index-key
-        return <Dot key={i} max={Math.max(...graphData)} value={g} index={i} />;
-      })}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "flex-end",
+          paddingRight: 20,
+          paddingLeft: 20,
+        }}
+      >
+        <Stat align="left" data={2024} label="Longest streak" />
+        <div style={{ flex: 1 }} />
+        <Stat align="right" data={longestStreak} label="Longest streak" />
+        <div style={{ width: 30 }} />
+        <Stat align="right" data={totalContributions} label="Contributions" />
+      </div>
+      <div style={{ position: "relative" }}>
+        {graphData.map((g, i) => {
+          return (
+            // eslint-disable-next-line react/no-array-index-key
+            <Dot key={i} max={Math.max(...graphData)} value={g} index={i} />
+          );
+        })}
+      </div>
     </div>
   );
 };
diff --git a/remotion/IGStory/Issues.tsx b/remotion/IGStory/Issues.tsx
@@ -1,27 +1,26 @@
 import React from "react";
+import { PANE_TEXT_COLOR } from "../TopLanguages/Pane";
 
 export const Issues: React.FC<{
   readonly issues: number;
 }> = ({ issues }) => {
   return (
     <div
       style={{
-        position: "absolute",
-        color: "white",
+        color: PANE_TEXT_COLOR,
         fontFamily: "Mona Sans",
-        left: 20,
-        top: 305,
-        width: 355,
-        height: 60,
-        fontSize: 40,
+        fontSize: 60,
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        fontWeight: "600",
+        fontWeight: "700",
+        borderBottom: `1px solid rgb(183, 171, 239)`,
+        paddingTop: 20,
+        paddingBottom: 20,
       }}
     >
-      <div style={{ marginRight: 10, marginLeft: 10 }}>{issues}</div>
-      <div style={{ fontSize: 20, fontWeight: "500" }}>Issues closed</div>
+      <div style={{ marginRight: 20, marginLeft: 10 }}>{issues}</div>
+      <div style={{ fontSize: 40, fontWeight: "500" }}>Issues closed</div>
     </div>
   );
 };
diff --git a/remotion/IGStory/Overlay.tsx b/remotion/IGStory/Overlay.tsx
@@ -1,11 +1,15 @@
 import React from "react";
 import { AbsoluteFill } from "remotion";
 import type { TopLanguage } from "../../src/config";
+import {
+  BoxHighlight,
+  PinkHighlightBox,
+} from "../../vite/HomeBox/BoxHighlight";
+import { PANE_BACKGROUND } from "../TopLanguages/Pane";
 import { BarChart } from "./BarChart";
 import { ContributionGraphic } from "./GraphData";
 import { Issues } from "./Issues";
 import { Planets } from "./Planets";
-import { PullRequests } from "./PullRequests";
 import { Stars } from "./Stars";
 import { Title } from "./Title";
 
@@ -17,6 +21,8 @@ export const Overlay: React.FC<{
   readonly stars: number;
   readonly login: string;
   readonly topLanguage: TopLanguage | null;
+  readonly longestStreak: number;
+  readonly totalContributions: number;
 }> = ({
   issues,
   contributionData,
@@ -25,16 +31,61 @@ export const Overlay: React.FC<{
   stars,
   login,
   topLanguage,
+  longestStreak,
+  totalContributions,
 }) => {
   return (
-    <AbsoluteFill>
-      <Title login={login} />
-      <Stars stars={stars} />
-      <PullRequests pullRequests={pullRequests} />
-      {topLanguage ? <Planets topLanguage={topLanguage} /> : null}
-      <BarChart graphData={weekdays} />
-      <ContributionGraphic graphData={contributionData} />
-      <Issues issues={issues} />
+    <AbsoluteFill
+      style={{
+        padding: 20,
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        borderRadius: 30,
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+      }}
+    >
+      <BoxHighlight />
+      <PinkHighlightBox />
+      <div
+        style={{
+          background: PANE_BACKGROUND,
+          borderRadius: 10,
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <Title login={login} />
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            borderBottom: `1px solid rgb(183, 171, 239)`,
+          }}
+        >
+          <Stars stars={stars} label="Repos starred" icon="stars" />
+          <div
+            style={{
+              width: 1,
+              height: 160,
+              backgroundColor: "rgb(183, 171, 239)",
+            }}
+          />
+          <Stars stars={pullRequests} label="PRs merged" icon="pulls" />
+        </div>
+        <Issues issues={issues} />
+        {topLanguage ? <Planets topLanguage={topLanguage} /> : null}
+        <div
+          style={{
+            borderBottom: `1px solid rgb(183, 171, 239)`,
+          }}
+        >
+          <BarChart graphData={weekdays} />
+        </div>
+        <ContributionGraphic
+          longestStreak={longestStreak}
+          totalContributions={totalContributions}
+          graphData={contributionData}
+        />
+      </div>
     </AbsoluteFill>
   );
 };