✨ feat: Add social shield

src/ShieldsBilibili/index.tsx

@@ -16,11 +16,7 @@ const controls = {
   label: 'followers',
   ['⚒️']: folder(
     {
-      ...pick(shieldBaseControls, ['style']),
-      labelColor: {
-        ...shieldBaseControls.labelColor,
-        value: 'black',
-      },
+      ...pick(shieldBaseControls, ['style', 'labelColor']),
       color: {
         ...shieldBaseControls.labelColor,
         value: 'fb7299',

src/ShieldsDiscord/index.tsx

@@ -17,11 +17,7 @@ const controls = {
   link: 'https://discord.gg/AYFPHvv2jT',
   ['⚒️']: folder(
     {
-      ...pick(shieldBaseControls, ['style']),
-      labelColor: {
-        ...shieldBaseControls.labelColor,
-        value: 'black',
-      },
+      ...pick(shieldBaseControls, ['style', 'labelColor']),
       color: {
         ...shieldBaseControls.labelColor,
         value: '5865f2',

src/ShieldsSocial/index.md

@@ -0,0 +1,8 @@
+---
+nav: components
+group: shields
+title: Social
+order: 8
+---
+
+<code src="./index.tsx" inline></code>

src/ShieldsSocial/index.tsx

@@ -0,0 +1,54 @@
+import { useControls, useCreateStore } from '@lobehub/ui';
+import { folder } from 'leva';
+import { pick } from 'lodash-es';
+import { memo, useMemo } from 'react';
+
+import MarkdownStorybook from '@/components/MarkdownStorybook';
+import { shieldBaseControls } from '@/const/shieldBaseControls';
+import { socialShieldControlsPickList } from '@/const/socialShieldControls';
+import { genSocialShields } from '@/services/genSocialShield';
+
+const idControls = {
+  /* eslint-disable sort-keys-fix/sort-keys-fix */
+  qq: '40073838',
+  wechat: '40073838',
+  x: 'canisminor1990',
+  weibo: 'Canis_Minor',
+  discord: 'canisminor1990',
+  steam: 'canisminor',
+  /* eslint-enable */
+};
+
+const controls = {
+  prefix: true,
+  ['⚒️']: folder(
+    {
+      ...pick(shieldBaseControls, ['style', 'labelColor', 'color']),
+      logoColor: {
+        ...shieldBaseControls.logoColor,
+        value: 'white',
+      },
+    },
+    {
+      collapsed: true,
+    },
+  ),
+};
+const pickControls = { ['✅']: folder(socialShieldControlsPickList, { collapsed: true }) };
+
+const Social = memo(() => {
+  const store = useCreateStore();
+
+  const idOptions = useControls(idControls, { store });
+  const options = useControls(controls, { store });
+  const pickOptions = useControls(pickControls, { store });
+
+  const md = useMemo(
+    () => genSocialShields(options, idOptions, pickOptions),
+    [options, idOptions, pickOptions],
+  );
+
+  return <MarkdownStorybook levaStore={store}>{md.join('\n\n')}</MarkdownStorybook>;
+});
+
+export default Social;

src/const/shareShieldControls.ts

@@ -1,7 +1,6 @@
 import { identity, pickBy } from 'lodash-es';
 import qs from 'query-string';
 
-import { colorOptions } from '@/const/shieldBaseControls';
 import { ShieldsBaseOptions } from '@/types/shields';
 import { genPickList } from '@/utils/genPickList';
 
@@ -27,10 +26,9 @@ export const shareShieldControls: {
   [key: string]: shareShieldControlsItem;
 } = {
   /* eslint-disable sort-keys-fix/sort-keys-fix */
-  twitter: {
-    logo: 'twitter',
+  x: {
+    logo: 'x',
     logoColor: 'white',
-    color: colorOptions.geekblue,
     genLink: ({ url, title, desc, hashtags }) => {
       const query = pickBy(
         {
@@ -41,15 +39,14 @@ export const shareShieldControls: {
         identity,
       ) as any;
       return qs.stringifyUrl({
-        url: 'https://twitter.com/intent/tweet',
+        url: 'https://x.com/intent/tweet',
         query,
       });
     },
   },
   telegram: {
     logo: 'telegram',
     logoColor: 'white',
-    color: colorOptions.geekblue,
     genLink: ({ url, title, desc, hashtags }) => {
       const query = pickBy(
         {
@@ -72,7 +69,6 @@ export const shareShieldControls: {
   whatsapp: {
     logo: 'whatsapp',
     logoColor: 'white',
-    color: colorOptions.geekblue,
     genLink: ({ url, title, desc, hashtags }) => {
       const query = pickBy(
         {
@@ -95,7 +91,6 @@ export const shareShieldControls: {
   weibo: {
     logo: 'sinaweibo',
     logoColor: 'white',
-    color: colorOptions.geekblue,
     genLink: ({ url, title, desc, hashtags }) => {
       const query = pickBy(
         {
@@ -119,7 +114,6 @@ export const shareShieldControls: {
   qq: {
     logo: 'tencentqq',
     logoColor: 'white',
-    color: colorOptions.geekblue,
     genLink: ({ url, title, desc, hashtags }) => {
       const query = pickBy(
         {

src/const/socialShieldControls.ts

@@ -0,0 +1,51 @@
+import urlJoin from 'url-join';
+
+import { colorOptions } from '@/const/shieldBaseControls';
+import { ShieldsBaseOptions } from '@/types/shields';
+import { genPickList } from '@/utils/genPickList';
+
+export interface socialShieldControlsItem extends Partial<ShieldsBaseOptions> {
+  genLink?: (id: string) => string | undefined;
+}
+
+export const socialShieldControls: {
+  [key: string]: socialShieldControlsItem;
+} = {
+  /* eslint-disable sort-keys-fix/sort-keys-fix */
+  qq: {
+    logo: 'tencentqq',
+    logoColor: 'white',
+    color: colorOptions.blue,
+  },
+  wechat: {
+    logo: 'wechat',
+    logoColor: 'white',
+    color: colorOptions.lime,
+  },
+  discord: {
+    logo: 'discord',
+    logoColor: 'white',
+    color: colorOptions.purple,
+  },
+  weibo: {
+    logo: 'sinaweibo',
+    logoColor: 'white',
+    color: 'FF9F9F',
+    genLink: (id) => urlJoin('https://weibo.com/n', id),
+  },
+  steam: {
+    logo: 'steam',
+    logoColor: 'white',
+    color: 'ABCAFF',
+    genLink: (id) => urlJoin('https://steamcommunity.com/id', id),
+  },
+  x: {
+    logo: 'x',
+    logoColor: 'white',
+    color: colorOptions.white,
+    genLink: (id) => urlJoin('https://x.com', id),
+  },
+  /* eslint-enable */
+};
+
+export const socialShieldControlsPickList = genPickList(socialShieldControls);

src/services/genShareShield.ts

@@ -17,9 +17,7 @@ type ShareShieldOptions = ShieldsBaseOptions &
     url?: string;
   };
 
-export const genSharehield = (options: ShareShieldOptions) => {
-  console.log(options);
-
+export const genShareShield = (options: ShareShieldOptions) => {
   const { name, genLink, title, desc, hashtags, url, color, label, ...config } = options;
 
   const defShield = qs.stringifyUrl({
@@ -46,7 +44,13 @@ export const genShareShields = (
 
   for (const [name, config] of Object.entries(shareShieldControls)) {
     if (!pickOptions[name]) continue;
-    const data = genSharehield({ name, ...config, ...options, label: name });
+    const data = genShareShield({
+      name,
+      ...config,
+      ...options,
+      color: options.color || config.color,
+      label: name,
+    });
     defShields.push(data[0]);
     defLinks.push(data[1]);
   }

src/services/genSocialShield.ts

@@ -0,0 +1,67 @@
+import { identity, pickBy } from 'lodash-es';
+import qs from 'query-string';
+import urlJoin from 'url-join';
+
+import { socialShieldControls, socialShieldControlsItem } from '@/const/socialShieldControls';
+import { SHIELD_BADGE_URL } from '@/const/url';
+import { ShieldsBaseOptions } from '@/types/shields';
+import { formatCustomLabel } from '@/utils/formatCustomLabel';
+import { genShield } from '@/utils/genShield';
+
+interface SpcialIdOptions {
+  discord?: string;
+  qq?: string;
+  steam?: string;
+  wechat?: string;
+  weibo?: string;
+  x?: string;
+}
+
+type SocialShieldOptions = ShieldsBaseOptions &
+  socialShieldControlsItem & {
+    id: string;
+    name: string;
+    prefix: boolean;
+  };
+
+export const genSocialShield = (options: SocialShieldOptions) => {
+  const { name, genLink, id, color, prefix, ...config } = options;
+
+  const defShield = qs.stringifyUrl({
+    query: pickBy(config, identity) as any,
+    url: urlJoin(
+      SHIELD_BADGE_URL,
+      formatCustomLabel({
+        color: (color as string) || 'black',
+        label: `${prefix ? '@' : ''}${id}`,
+      }),
+    ),
+  });
+  const defLink = genLink?.(id);
+
+  return genShield(`social-${name}`, defShield, defLink);
+};
+
+export const genSocialShields = (
+  options: Partial<SocialShieldOptions> | any,
+  idOptions: SpcialIdOptions,
+  pickOptions: { [key: string]: boolean },
+) => {
+  const defShields: string[] = [];
+  const defLinks: string[] = [];
+
+  for (const [name, config] of Object.entries(socialShieldControls)) {
+    if (!pickOptions[name]) continue;
+    const data = genSocialShield({
+      name,
+      ...config,
+      ...options,
+      color: options.color || config.color,
+      // @ts-ignore
+      id: idOptions?.[name],
+    });
+    defShields.push(data[0]);
+    defLinks.push(data[1]);
+  }
+  return [defShields.join('\n'), defLinks.join('\n')];
+};