✨ feat: Add bilibili shield

lobehub · Sep 28, 2023 · ab1b9da · ab1b9da
1 parent add0de8
commit ab1b9da
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 25 deletions.
diff --git a/src/ShieldsBilibili/index.md b/src/ShieldsBilibili/index.md
@@ -0,0 +1,8 @@
+---
+nav: components
+group: shields
+title: Bilibili
+order: 6
+---
+
+<code src="./index.tsx" inline></code>
diff --git a/src/ShieldsBilibili/index.tsx b/src/ShieldsBilibili/index.tsx
@@ -0,0 +1,50 @@
+import { useControls, useCreateStore } from '@lobehub/ui';
+import { LevaInputs, folder } from 'leva';
+import { pick } from 'lodash-es';
+import { memo, useMemo } from 'react';
+
+import MarkdownStorybook from '@/components/MarkdownStorybook';
+import { shieldBaseControls } from '@/const/shieldBaseControls';
+import { genBilibiliShield } from '@/services/genCustomShield';
+
+const controls = {
+  /* eslint-disable sort-keys-fix/sort-keys-fix */
+  uid: {
+    value: '410372',
+    type: LevaInputs.STRING,
+  },
+  label: 'followers',
+  ['⚒️']: folder(
+    {
+      ...pick(shieldBaseControls, ['style']),
+      labelColor: {
+        ...shieldBaseControls.labelColor,
+        value: 'black',
+      },
+      color: {
+        ...shieldBaseControls.labelColor,
+        value: 'fb7299',
+      },
+      logoColor: {
+        ...shieldBaseControls.logoColor,
+        value: 'white',
+      },
+    },
+    {
+      collapsed: true,
+    },
+  ),
+  /* eslint-enable */
+};
+
+const Bilibili = memo(() => {
+  const store = useCreateStore();
+
+  const options = useControls(controls, { store });
+
+  const md = useMemo(() => genBilibiliShield(options as any), [options]);
+
+  return <MarkdownStorybook levaStore={store}>{md.join('\n\n')}</MarkdownStorybook>;
+});
+
+export default Bilibili;
diff --git a/src/ShieldsCustom/Website.tsx b/src/ShieldsCustom/Website.tsx
@@ -3,7 +3,7 @@ import { memo, useMemo } from 'react';
 
 import MarkdownStorybook from '@/components/MarkdownStorybook';
 import { shieldBaseControls } from '@/const/shieldBaseControls';
-import { genCustomWebsiteShield } from '@/services/genCustomShield';
+import { genWebsiteShield } from '@/services/genCustomShield';
 
 import { defaultControls } from './share';
 
@@ -21,14 +21,14 @@ const controls = {
   /* eslint-enable */
 };
 
-const CustomWebsite = memo(() => {
+const Website = memo(() => {
   const store = useCreateStore();
 
   const options = useControls(controls, { store });
 
-  const md = useMemo(() => genCustomWebsiteShield(options), [options]);
+  const md = useMemo(() => genWebsiteShield(options), [options]);
 
   return <MarkdownStorybook levaStore={store}>{md.join('\n\n')}</MarkdownStorybook>;
 });
 
-export default CustomWebsite;
+export default Website;
diff --git a/src/ShieldsDiscord/index.tsx b/src/ShieldsDiscord/index.tsx
@@ -1,11 +1,11 @@
 import { useControls, useCreateStore } from '@lobehub/ui';
-import { LevaInputs } from 'leva';
+import { LevaInputs, folder } from 'leva';
+import { pick } from 'lodash-es';
 import { memo, useMemo } from 'react';
 
-import { defaultControls } from '@/ShieldsCustom/share';
 import MarkdownStorybook from '@/components/MarkdownStorybook';
 import { shieldBaseControls } from '@/const/shieldBaseControls';
-import { genCustomDiscordShield } from '@/services/genCustomShield';
+import { genDiscordShield } from '@/services/genCustomShield';
 
 const controls = {
   /* eslint-disable sort-keys-fix/sort-keys-fix */
@@ -14,23 +14,38 @@ const controls = {
     type: LevaInputs.STRING,
   },
   label: 'discord',
-  labelColor: {
-    ...shieldBaseControls.labelColor,
-    value: 'black',
-  },
   link: 'https://discord.gg/AYFPHvv2jT',
-  ...defaultControls,
+  ['⚒️']: folder(
+    {
+      ...pick(shieldBaseControls, ['style']),
+      labelColor: {
+        ...shieldBaseControls.labelColor,
+        value: 'black',
+      },
+      color: {
+        ...shieldBaseControls.labelColor,
+        value: '5865f2',
+      },
+      logoColor: {
+        ...shieldBaseControls.logoColor,
+        value: 'white',
+      },
+    },
+    {
+      collapsed: true,
+    },
+  ),
   /* eslint-enable */
 };
 
-const CustomDiscord = memo(() => {
+const Discord = memo(() => {
   const store = useCreateStore();
 
   const options = useControls(controls, { store });
 
-  const md = useMemo(() => genCustomDiscordShield(options), [options]);
+  const md = useMemo(() => genDiscordShield(options), [options]);
 
   return <MarkdownStorybook levaStore={store}>{md.join('\n\n')}</MarkdownStorybook>;
 });
 
-export default CustomDiscord;
+export default Discord;
diff --git a/src/ShieldsWebsite/index.tsx b/src/ShieldsWebsite/index.tsx
@@ -4,7 +4,7 @@ import { memo, useMemo } from 'react';
 import { defaultControls } from '@/ShieldsCustom/share';
 import MarkdownStorybook from '@/components/MarkdownStorybook';
 import { shieldBaseControls } from '@/const/shieldBaseControls';
-import { genCustomWebsiteShield } from '@/services/genCustomShield';
+import { genWebsiteShield } from '@/services/genCustomShield';
 
 const controls = {
   /* eslint-disable sort-keys-fix/sort-keys-fix */
@@ -20,14 +20,14 @@ const controls = {
   /* eslint-enable */
 };
 
-const CustomWebsite = memo(() => {
+const Website = memo(() => {
   const store = useCreateStore();
 
   const options = useControls(controls, { store });
 
-  const md = useMemo(() => genCustomWebsiteShield(options), [options]);
+  const md = useMemo(() => genWebsiteShield(options), [options]);
 
   return <MarkdownStorybook levaStore={store}>{md.join('\n\n')}</MarkdownStorybook>;
 });
 
-export default CustomWebsite;
+export default Website;
diff --git a/src/components/MarkdownStorybook/style.ts b/src/components/MarkdownStorybook/style.ts
@@ -16,8 +16,11 @@ export const useStyles = createStyles(({ css, token }) => {
     markdown: css`
       overflow-x: hidden;
       overflow-y: auto;
+
       width: 100%;
       height: 100%;
+
+      background: ${token.colorBgContainer};
     `,
     preview: css`
       border-top: 1px solid ${token.colorBorder};

diff --git a/src/services/genCustomShield.ts b/src/services/genCustomShield.ts
@@ -49,14 +49,14 @@ export const genCustomDoubleShield = (options: CustomDoubleShieldOptions) => {
   return genShield(content || label, url, link);
 };
 
-interface CustomWebsiteShieldOptions extends ShieldsBaseOptions {
+interface WebsiteShieldOptions extends ShieldsBaseOptions {
   down_message: string;
   label: string;
   up_message: string;
   url: string;
 }
 
-export const genCustomWebsiteShield = (options: CustomWebsiteShieldOptions) => {
+export const genWebsiteShield = (options: WebsiteShieldOptions) => {
   const url = qs.stringifyUrl({
     query: pickBy(options, identity) as any,
     url: urlJoin(SHIELD_URL, 'website'),
@@ -65,18 +65,40 @@ export const genCustomWebsiteShield = (options: CustomWebsiteShieldOptions) => {
   return genShield(options.label, url, options.url);
 };
 
-interface CustomDiscordShieldOptions extends ShieldsBaseOptions {
+interface DiscordShieldOptions extends ShieldsBaseOptions {
   label: string;
   serverId: string;
 }
 
-export const genCustomDiscordShield = (options: CustomDiscordShieldOptions) => {
+export const genDiscordShield = (options: DiscordShieldOptions) => {
   const { serverId, link, ...config } = options;
   const query = pickBy(config, identity) as any;
   const url = qs.stringifyUrl({
-    query: { color: '5865F2', logo: 'discord', logoColor: 'white', ...query },
+    query: { logo: 'discord', ...query },
     url: urlJoin(SHIELD_URL, 'discord', String(serverId)),
   });
 
-  return genShield(options.label, url, link);
+  return genShield('discord', url, link);
+};
+
+interface BilibiliShieldOptions extends ShieldsBaseOptions {
+  label: string;
+  uid: string;
+}
+
+export const genBilibiliShield = (options: BilibiliShieldOptions) => {
+  const { uid, labelColor, logoColor, ...config } = options;
+  const query = pickBy(config, identity) as any;
+  const url = qs.stringifyUrl({
+    query: {
+      label_color: labelColor,
+      logo_color: logoColor,
+      uid,
+      ...query,
+    },
+    url: 'https://bilistats.lonelyion.com/followers',
+  });
+  const link = urlJoin('https://space.bilibili.com', uid);
+
+  return genShield('bilibili', url, link);
 };