frontend: update github campaign page entry

web/package.json

@@ -20,7 +20,7 @@
     "build:plugins": "tsc -p plugins/tsconfig.json",
     "prefetch": "node prefetch.mjs",
     "prebuild": "npm run build:plugins && npm run prefetch && npm run regen-api-docs",
-    "postinstall": "npm run build:plugins",
+    "postinstall": "patch-package && npm run build:plugins",
     "prestart": "npm run build:plugins && npm run prefetch && npm run regen-api-docs",
     "lint": "eslint --cache .",
     "lint:ci": "eslint --quiet .",
@@ -54,6 +54,7 @@
     "is-hotkey": "^0.2.0",
     "luxon": "^2.3.0",
     "octokit": "^1.7.1",
+    "patch-package": "^8.0.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-ace": "^10.1.0",
@@ -105,7 +106,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-d3-cloud": "^1.0.5",
     "react-intersection-observer": "^8.33.1",
-    "react-share": "^4.4.0",
+    "react-share": "^5.1.0",
     "react-sizeme": "^3.0.2",
     "react-transition-group": "^4.4.2",
     "sql-highlight": "^4.2.1",

web/patches/react-share+5.1.0.patch

@@ -0,0 +1,26 @@
+diff --git a/node_modules/react-share/dist/index.cjs b/node_modules/react-share/dist/index.cjs
+index cc8c6c0..9cfa531 100644
+--- a/node_modules/react-share/dist/index.cjs
++++ b/node_modules/react-share/dist/index.cjs
+@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
+   return target;
+ };
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+-const jsxRuntime = require("react/jsx-runtime");
++const jsxRuntime = require("react/jsx-runtime.js");
+ const react = require("react");
+ const cx = require("classnames");
+ const jsonp = require("jsonp");
+diff --git a/node_modules/react-share/dist/index.js b/node_modules/react-share/dist/index.js
+index c9f8647..5066af7 100644
+--- a/node_modules/react-share/dist/index.js
++++ b/node_modules/react-share/dist/index.js
+@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
+     }
+   return target;
+ };
+-import { jsxs, jsx } from "react/jsx-runtime";
++import { jsxs, jsx } from "react/jsx-runtime.js";
+ import { forwardRef, useRef, useEffect, useCallback, useState } from "react";
+ import cx from "classnames";
+ import jsonp from "jsonp";

web/src/context/user.tsx

@@ -37,6 +37,8 @@ export function AuthProvider ({ children }: PropsWithChildren): JSX.Element {
     }
   };
 
+  console.log(customFields?.auth0_domain as string);
+
   return (
     <Auth0Provider
       domain={customFields?.auth0_domain as string}

web/src/pages/open-source-heroes/_components/ClaimForm.tsx

@@ -3,7 +3,9 @@ import { giftClientWithoutCache } from '@site/src/api/client';
 import { TiDBCloudButton } from '@site/src/pages/open-source-heroes/_components/TiDBCloudButton';
 import { useResponsiveAuth0 } from '@site/src/theme/NavbarItem/useResponsiveAuth0';
 import { getErrorMessage } from '@site/src/utils/error';
+import { twitterLink } from '@site/src/utils/share';
 import React, { type ReactNode, useEffect, useState } from 'react';
+import { XIcon } from 'react-share';
 import useSWR from 'swr';
 
 type Check = {
@@ -28,6 +30,10 @@ export function ClaimForm () {
     headers: {
       Authorization: `Bearer ${await getAccessTokenSilently({ connection: 'github' })}`,
     },
+  }).then(res => {
+    res = { ...res };
+    res.credits = formatCredits(res.credits);
+    return res;
   }));
 
   const { data: tenants } = useSWR('/api/v1/serverless-credits-campaign/tenants', async url => await giftClientWithoutCache.get<any, Tenant[]>(url, {
@@ -127,13 +133,16 @@ function ClaimedThisSession ({ check }: { check: Check }) {
       <ClaimContent>
         Hi <em>{user?.nickname ?? user?.name}</em>
         <br />
-        Successfully claimed {check.credits} credits, you can go to
+        Successfully claimed <strong>{check.credits} credits</strong>, you can go to
         <br />
         TiDB Cloud to check it out and use it.
       </ClaimContent>
-      <TiDBCloudButton variant="contained">
-        Start Building with TiDB Cloud!
-      </TiDBCloudButton>
+      <Box sx={{ position: 'relative', width: 'max-content', maxWidth: '100%', mt: 8, display: 'flex', gap: 2, px: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+        <TiDBCloudButton variant="contained" mt={0}>
+          Start Building with TiDB Cloud!
+        </TiDBCloudButton>
+        <ShareButton />
+      </Box>
     </>
   );
 }
@@ -153,9 +162,12 @@ function Claimed () {
         <br />
         Ready to build something amazing?
       </ClaimContent>
-      <TiDBCloudButton variant="contained">
-        Start Building with TiDB Cloud!
-      </TiDBCloudButton>
+      <Box sx={{ position: 'relative', width: 'max-content', maxWidth: '100%', mt: 8, display: 'flex', gap: 2, px: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+        <TiDBCloudButton variant="contained" mt={0}>
+          Start Building with TiDB Cloud!
+        </TiDBCloudButton>
+        <ShareButton />
+      </Box>
     </>
   );
 }
@@ -175,9 +187,12 @@ function NotEligible ({ tenants }: { tenants: Tenant[] }) {
         <br />
         <b>Start building your next project today.</b>
       </ClaimContent>
-      <TiDBCloudButton variant="contained">
-        Login to TiDB Cloud
-      </TiDBCloudButton>
+      <Box sx={{ position: 'relative', width: 'max-content', maxWidth: '100%', mt: 8, display: 'flex', gap: 2, px: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+        <TiDBCloudButton mt={0} variant="contained">
+          Login to TiDB Cloud
+        </TiDBCloudButton>
+        <ShareButton />
+      </Box>
     </>
   );
 }
@@ -195,9 +210,12 @@ function NotEligibleNoTenant () {
         <br />
         Create a new TiDB Cloud account and enjoy 25GB of free storage to start building your applications.
       </ClaimContent>
-      <TiDBCloudButton variant="contained">
-        Create TiDB Cloud Account
-      </TiDBCloudButton>
+      <Box sx={{ position: 'relative', width: 'max-content', maxWidth: '100%', mt: 8, display: 'flex', gap: 2, px: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+        <TiDBCloudButton mt={0} variant="contained">
+          Create TiDB Cloud Account
+        </TiDBCloudButton>
+        <ShareButton />
+      </Box>
     </>
   );
 }
@@ -217,11 +235,11 @@ function EligibleNoTenants ({ check }: { check: Check }) {
       </ClaimContent>
       <TiDBCloudButton
         variant="contained"
-        sx={{ background: 'white', '&:hover': { background: 'rgba(255,255,255,0.8)', color: 'black' } }}
+        sx={{ background: 'white', mt: 8, '&:hover': { background: 'rgba(255,255,255,0.8)', color: 'black' } }}
       >
         Sign up to TiDB Cloud
       </TiDBCloudButton>
-      <Button sx={{ mt: 8, px: 8 }} color="primary" variant="contained" disabled>
+      <Button sx={{ mt: 4, px: 8 }} color="primary" variant="contained" disabled>
         Claim Credits
       </Button>
     </>
@@ -304,6 +322,18 @@ function Eligible ({ tenants, check, onClaim }: { tenants: Tenant[], check: Chec
   </>;
 }
 
+function ShareButton () {
+  return (
+    <Button component="a" sx={{ position: [undefined, undefined, 'absolute'], left: [undefined, undefined, '100%'], whiteSpace: 'nowrap', color: 'white !important' }} target="_blank" href={twitterLink(location.href, {
+      title: 'Open Source Heroes, we ❤️ you! To show our appreciation, claim up to $1000 in FREE TiDB Serverless Credits to fuel your next big idea. Build with a powerful, scalable serverless database. \nStart today!',
+      hashtags: ['opensource', 'database', 'cloud', 'developer', 'tidbserverless'],
+    })}>
+      {'Share via '}
+      <XIcon round size={24} bgStyle={{ fill: 'transparent' }} iconFillColor="white" />
+    </Button>
+  );
+}
+
 const ClaimFormContainer = styled('div')`
   background: #212122;
   min-height: calc(100vh - 60px);
@@ -351,10 +381,18 @@ const starIcon = <svg style={{ display: 'block', margin: '0 auto' }} width="117"
 
 const badIcon = <svg width="117" height="117" viewBox="0 0 117 117" fill="none" xmlns="http://www.w3.org/2000/svg">
   <circle cx="58.5" cy="58.5" r="58.5" fill="#04CB83" />
-  <path d="M84.0378 48.4149C82.2492 46.0834 79.5263 44.7208 76.576 44.677L68.5364 44.552C69.1388 41.7267 69.3601 39.1889 69.1941 36.9761C68.9974 34.3321 68.2537 32.1193 66.9814 30.4129C66.1147 29.244 65.033 28.3439 63.7729 27.7501C62.4637 27.1313 61.3205 27 60.5891 27C56.1821 27 52.5987 30.3691 52.5987 34.5071C52.5987 41.2329 48.3453 46.7022 43.1085 46.7022H35.6713C33.0959 46.7022 31 48.8337 31 51.4528V77.2495C31 79.8685 33.0959 82 35.6713 82H72.0584C74.2588 82 76.4162 81.2499 78.1372 79.8935C79.8767 78.5246 81.106 76.5869 81.5977 74.4429L85.7588 56.2908C86.3919 53.5343 85.765 50.6652 84.0378 48.4149ZM40.902 77.4932H35.6713C35.5361 77.4932 35.4255 77.3807 35.4255 77.2432V51.4528C35.4255 51.3153 35.5361 51.2028 35.6713 51.2028H40.902V77.4932ZM81.4502 55.2657L77.289 73.4178C77.0247 74.5617 76.367 75.593 75.4328 76.3306C74.4801 77.0807 73.2877 77.4932 72.0645 77.4932H45.3274V50.9902C46.4829 50.7714 47.6016 50.3777 48.6834 49.8151C50.3491 48.9462 51.8304 47.7149 53.1027 46.1459C55.635 43.0143 57.0303 38.8826 57.0303 34.4946C57.0303 32.8382 58.6283 31.488 60.5952 31.488C60.7673 31.488 62.2793 31.5318 63.4533 33.1132C65.2297 35.5072 65.2788 40.1327 63.5885 46.1334C63.398 46.8085 63.5271 47.5336 63.9389 48.0961C64.3507 48.6587 64.9961 48.9962 65.6845 49.0025L76.5207 49.1713C78.1249 49.1963 79.6001 49.9276 80.5651 51.184C81.4625 52.3716 81.7821 53.8218 81.4502 55.2657Z" fill="white" />
+  <path
+    d="M84.0378 48.4149C82.2492 46.0834 79.5263 44.7208 76.576 44.677L68.5364 44.552C69.1388 41.7267 69.3601 39.1889 69.1941 36.9761C68.9974 34.3321 68.2537 32.1193 66.9814 30.4129C66.1147 29.244 65.033 28.3439 63.7729 27.7501C62.4637 27.1313 61.3205 27 60.5891 27C56.1821 27 52.5987 30.3691 52.5987 34.5071C52.5987 41.2329 48.3453 46.7022 43.1085 46.7022H35.6713C33.0959 46.7022 31 48.8337 31 51.4528V77.2495C31 79.8685 33.0959 82 35.6713 82H72.0584C74.2588 82 76.4162 81.2499 78.1372 79.8935C79.8767 78.5246 81.106 76.5869 81.5977 74.4429L85.7588 56.2908C86.3919 53.5343 85.765 50.6652 84.0378 48.4149ZM40.902 77.4932H35.6713C35.5361 77.4932 35.4255 77.3807 35.4255 77.2432V51.4528C35.4255 51.3153 35.5361 51.2028 35.6713 51.2028H40.902V77.4932ZM81.4502 55.2657L77.289 73.4178C77.0247 74.5617 76.367 75.593 75.4328 76.3306C74.4801 77.0807 73.2877 77.4932 72.0645 77.4932H45.3274V50.9902C46.4829 50.7714 47.6016 50.3777 48.6834 49.8151C50.3491 48.9462 51.8304 47.7149 53.1027 46.1459C55.635 43.0143 57.0303 38.8826 57.0303 34.4946C57.0303 32.8382 58.6283 31.488 60.5952 31.488C60.7673 31.488 62.2793 31.5318 63.4533 33.1132C65.2297 35.5072 65.2788 40.1327 63.5885 46.1334C63.398 46.8085 63.5271 47.5336 63.9389 48.0961C64.3507 48.6587 64.9961 48.9962 65.6845 49.0025L76.5207 49.1713C78.1249 49.1963 79.6001 49.9276 80.5651 51.184C81.4625 52.3716 81.7821 53.8218 81.4502 55.2657Z"
+    fill="white" />
 </svg>;
 
 const successIcon = <svg width="117" height="117" viewBox="0 0 117 117" fill="none" xmlns="http://www.w3.org/2000/svg">
   <circle cx="58.5" cy="58.5" r="58.5" fill="#E6A1B5" />
   <path d="M51.7701 82C50.4492 82 49.1335 81.489 48.1258 80.4721L27.5076 59.5827C25.4975 57.5438 25.4975 54.2352 27.5076 52.1963C29.5229 50.1574 32.7861 50.1574 34.7963 52.1963L51.7701 69.3926L84.2037 36.5331C86.2138 34.489 89.477 34.489 91.4924 36.5331C93.5025 38.572 93.5025 41.8754 91.4924 43.9142L55.4145 80.4721C54.4068 81.489 53.0859 82 51.7701 82Z" fill="white" />
 </svg>;
+
+const nf = new Intl.NumberFormat('en');
+
+const formatCredits = (value: string) => {
+  return `$${nf.format(parseInt(value))} USD`;
+};

web/src/pages/open-source-heroes/_sections/1-how-it-works.tsx

@@ -1,16 +1,15 @@
 import { css, styled } from '@mui/material';
 import { Section, SectionContent, SectionTitle } from '@site/src/pages/open-source-heroes/_components/Section';
-import { motion } from 'framer-motion';
 import React, { Fragment } from 'react';
 
 export function HowItWorks () {
   return (
-    <ThisSection initial="initial" whileInView="hover" viewport={{ amount: 0.6, once: true }}>
+    <ThisSection>
       <ThisSectionContent>
         <SectionTitle>
           How it Works
         </SectionTitle>
-        <Features layout="size">
+        <Features>
           {items.map((item, index) => (
             <Fragment key={index}>
               {index > 0 && <FeatureSplitter />}
@@ -19,11 +18,6 @@ export function HowItWorks () {
                 <FeatureIndicatorBar>
                   <FeatureIndicatorInnerCircle />
                 </FeatureIndicatorBar>
-                <FeatureDescription transition={{ delay: index * 0.1, bounce: 0 }} variants={animations}>
-                  <FeatureDescriptionLine />
-                  <FeatureDescriptionCircle />
-                  {item.description}
-                </FeatureDescription>
               </Feature>
             </Fragment>
           ))}
@@ -33,25 +27,21 @@ export function HowItWorks () {
   );
 }
 
-const animations = {
-  initial: { opacity: 0, y: -26 },
-  hover: { opacity: 1, y: 0 },
-};
-
-const ThisSection = motion(styled(Section)`
+const ThisSection = styled(Section)`
   ${({ theme }) => ({
     [theme.breakpoints.up('lg')]: css`
       padding-top: 0;
     `,
   })}
-`);
+`;
 
 const ThisSectionContent = styled(SectionContent)`
   display: block;
   ${({ theme }) => ({
     [theme.breakpoints.up('lg')]: css`
       display: flex;
       gap: 48px;
+      align-items: center;
 
       h2 {
         font-size: 24px;
@@ -61,7 +51,8 @@ const ThisSectionContent = styled(SectionContent)`
   })}
 `;
 
-const Features = motion(styled('div')`
+const Features = styled('div')`
+  flex: 1;
   display: flex;
   gap: 24px;
   align-items: center;
@@ -77,7 +68,7 @@ const Features = motion(styled('div')`
       align-items: flex-start;
     `,
   })}
-`);
+`;
 
 const FeatureSplitter = styled('li')`
   flex: 0.6;
@@ -101,13 +92,8 @@ const Feature = styled('div')`
 const FeatureTitle = styled('h3')`
   font-size: 24px;
   line-height: 36px;
+  white-space: nowrap;
 `;
-const FeatureDescription = motion(styled('div')`
-  max-width: 100%;
-  overflow: hidden;
-  font-size: 18px;
-  line-height: 28px;
-`);
 
 const FeatureIndicatorBar = styled('div')`
   background-color: var(--color1);
@@ -124,22 +110,6 @@ const FeatureIndicatorInnerCircle = styled('div')`
   background-color: white;
 `;
 
-const FeatureDescriptionLine = styled('div')`
-  margin-left: 13px;
-  height: 32px;
-  width: 1px;
-  background-color: var(--color1);
-`;
-
-const FeatureDescriptionCircle = styled('div')`
-  margin-left: 4px;
-  width: 18px;
-  height: 18px;
-  border-radius: 9px;
-  border: 4px solid var(--color1);
-  background-color: white;
-`;
-
 type Item = {
   title: string;
   description: string;