💄 style: Add auto height to sponsor

lobehub · Dec 6, 2023 · e1cbb69 · e1cbb69
1 parent 0d78bfd
commit e1cbb69
Show file tree

Hide file tree

Showing 5 changed files with 238 additions and 160 deletions.
diff --git a/api/sponsor.tsx b/api/sponsor.tsx
@@ -2,50 +2,25 @@ import { ImageResponse } from '@vercel/og';
 
 import cors from '../lib/cors';
 import Sponsor from '../src/Sponsor';
+import { caleHeight, fechOpenCollectiveData, fetchFonts, getNumber } from '../src/Sponsor/utils';
 
-const fetchFonts = async () => {
-  // Regular Font
-  const fontFileRegular = await fetch(
-    'https://gw.alipayobjects.com/os/kitchen/BUfo9kyDYs/HarmonyOS_Sans_Regular.ttf',
-  );
-  const fontRegular: ArrayBuffer = await fontFileRegular.arrayBuffer();
-
-  // Bold Font
-  const fontFileBold = await fetch(
-    'https://gw.alipayobjects.com/os/kitchen/ywwdIaXDZa/HarmonyOS_Sans_Bold.ttf',
-  );
-  const fontBold: ArrayBuffer = await fontFileBold.arrayBuffer();
-
-  return { fontBold, fontRegular };
-};
+const MULTIPLE = 2;
 
 export const config = {
   runtime: 'edge',
 };
 
-const getNumber = (value: string | null, defaultValue?: number) => {
-  if (!value || value === null) return defaultValue;
-  const parsed = Number.parseInt(value, 10);
-  if (Number.isNaN(parsed)) return defaultValue;
-  return parsed;
-};
-
-const getData = async (id: string) => {
-  const res = await fetch(`https://opencollective.com/${id}/members/all.json`);
-  const json = await res.json();
-  return json;
-};
 export default async function handler(request: Request): Promise<any> {
   try {
     const { searchParams } = new URL(request.url);
 
-    const avatarSize = getNumber(searchParams.get('avatarSize'), 64 * 2);
-    const width = getNumber(searchParams.get('width'), 800 * 2);
-    const height = getNumber(searchParams.get('height'), 88 * 2);
+    const avatarSize = getNumber(searchParams.get('avatarSize'), 64 * MULTIPLE);
+    const width = getNumber(searchParams.get('width'), 800 * MULTIPLE);
     const themeMode = searchParams.get('themeMode') === 'dark' ? 'dark' : 'light';
     const id = searchParams.get('id') || 'lobehub';
-    const data = (await getData(id)) as any;
+    const data = await fechOpenCollectiveData(id);
     const { fontBold, fontRegular } = await fetchFonts();
+    const height = caleHeight(data, { avatarSize, width });
 
     const res = new ImageResponse(
       (

diff --git a/src/Sponsor/const.ts b/src/Sponsor/const.ts
@@ -0,0 +1,89 @@
+import { CSSProperties } from 'react';
+
+export const DEFAULT_WIDTH = 800;
+export const DEFAULT_AVATAR_SIZE = 64;
+
+export interface MemberProfile {
+  MemberId: number;
+  company?: string;
+  createdAt: string;
+  currency?: string;
+  description?: string;
+  email?: string;
+  github?: string;
+  image?: string;
+  isActive: boolean;
+  lastTransactionAmount: number;
+  lastTransactionAt: string;
+  name: string;
+  profile: string;
+  role: 'ADMIN' | 'HOST' | 'BACKER';
+  tier?: string;
+  totalAmountDonated: number;
+  twitter?: string;
+  type: 'USER' | 'ORGANIZATION';
+  website?: string;
+}
+
+export interface TierItem {
+  amount: number;
+  emoji: string;
+  preset: 'backer' | 'sponsor';
+  sort: number;
+  style?: CSSProperties;
+  title: string;
+}
+
+export const DEFAULT_GROUP: TierItem[] = [
+  {
+    amount: 250,
+    emoji: '🥇',
+    preset: 'sponsor',
+    sort: 22,
+    style: {
+      backgroundImage: `linear-gradient(45deg, #F5E729 0%, #DC9A01 33%, #DC9A01 66%, #F5E729 100%)`,
+    },
+    title: '🥇 Gold Sponsor',
+  },
+  {
+    amount: 100,
+    emoji: '🥈',
+    preset: 'sponsor',
+    sort: 21,
+    style: {
+      backgroundImage: `linear-gradient(45deg, #D8D8D8 0%, #888888 33%, #888888 66%, #D8D8D8 100%)`,
+    },
+    title: '🥈 Silver Sponsor',
+  },
+  {
+    amount: 50,
+    emoji: '🥉',
+    preset: 'sponsor',
+    sort: 20,
+    style: {
+      backgroundImage: `linear-gradient(45deg, #D8974D 0%, #833204 33%, #833204 66%, #D8974D 100%)`,
+    },
+    title: '🥉 Bronze Sponsor',
+  },
+  {
+    amount: 18,
+    emoji: '💖',
+    preset: 'backer',
+    sort: 11,
+    title: '💖 Generous Backer',
+  },
+  {
+    amount: 6,
+    emoji: '☕',
+    preset: 'backer',
+    sort: 10,
+    title: '☕ Backer',
+  },
+  {
+    amount: 1,
+    emoji: '🌟',
+    preset: 'backer',
+    sort: 1,
+    title: '🌟 One Time',
+  },
+];
diff --git a/src/Sponsor/demos/index.tsx b/src/Sponsor/demos/index.tsx
@@ -3,32 +3,42 @@ import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import { useThemeMode } from 'antd-style';
 import useSWR from 'swr';
 
+import { DEFAULT_AVATAR_SIZE, DEFAULT_WIDTH } from '../const';
+import { caleHeight, fechOpenCollectiveData } from '../utils';
+
 export default () => {
   const { isDarkMode } = useThemeMode();
   const store = useCreateStore();
-  const { id, ...config } = useControls(
+  const { id, width, avatarSize } = useControls(
     {
-      avatarSize: 64,
+      avatarSize: {
+        step: 1,
+        value: DEFAULT_AVATAR_SIZE,
+      },
       id: 'lobehub',
+      width: {
+        step: 1,
+        value: DEFAULT_WIDTH,
+      },
     },
     { store },
   );
-  const { data, isLoading } = useSWR(
-    id,
-    async () => {
-      const res = await fetch(`https://opencollective.com/${id}/members/all.json`);
-      const json = await res.json();
-      return json;
-    },
-    { revalidateOnFocus: false },
-  );
+  const { data, isLoading } = useSWR(id, fechOpenCollectiveData, { revalidateOnFocus: false });
 
   return (
     <StoryBook levaStore={store}>
       {isLoading || !data ? (
         <div>loading...</div>
       ) : (
-        <Sponsor data={data} themeMode={isDarkMode ? 'dark' : 'light'} {...config} />
+        <div
+          style={{
+            height: caleHeight(data, { avatarSize, width }),
+            overflow: 'hidden',
+            width,
+          }}
+        >
+          <Sponsor avatarSize={avatarSize} data={data} themeMode={isDarkMode ? 'dark' : 'light'} />
+        </div>
       )}
     </StoryBook>
   );