✨ feat: Add docker shield

src/ShieldsDocker/index.md

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

src/ShieldsDocker/index.tsx

@@ -0,0 +1,25 @@
+import { useControls, useCreateStore } from '@lobehub/ui';
+import { folder } from 'leva';
+import { memo, useMemo } from 'react';
+
+import MarkdownStorybook from '@/components/MarkdownStorybook';
+import { dockerShieldControlsPickList } from '@/const/dockerShieldControls';
+import { genDockerShields } from '@/services/genDockerShield';
+
+import { defaultControlsExtra } from './share';
+
+const controls = defaultControlsExtra;
+const pickControls = { ['✅']: folder(dockerShieldControlsPickList, { collapsed: true }) };
+
+const Docker = memo(() => {
+  const store = useCreateStore();
+
+  const options = useControls(controls, { store });
+  const pickOptions = useControls(pickControls, { store });
+
+  const md = useMemo(() => genDockerShields(options, pickOptions), [options, pickOptions]);
+
+  return <MarkdownStorybook levaStore={store}>{md.join('\n\n')}</MarkdownStorybook>;
+});
+
+export default Docker;

src/ShieldsDocker/share.ts

@@ -0,0 +1,17 @@
+import { folder } from 'leva';
+import { cloneDeep, pick } from 'lodash-es';
+
+import { shieldBaseControls } from '@/const/shieldBaseControls';
+
+export const defaultControls = {
+  /* eslint-disable sort-keys-fix/sort-keys-fix */
+  packageName: 'lobehub/lobe-chat',
+  /* eslint-enable */
+};
+
+export const defaultControlsExtra = {
+  ...defaultControls,
+  ['⚒️']: folder(pick(cloneDeep(shieldBaseControls), ['color', 'labelColor', 'style']), {
+    collapsed: true,
+  }),
+};

src/ShieldsGithub/Release.tsx

@@ -3,13 +3,13 @@ import { folder } from 'leva';
 import { memo, useMemo } from 'react';
 
 import MarkdownStorybook from '@/components/MarkdownStorybook';
-import { githubReleaseControlsPickList } from '@/const/githubShieldControls';
+import { githubShieldControlsPickList } from '@/const/githubShieldControls';
 import { genGithubReleaseShields } from '@/services/genGithubShield';
 
 import { defaultControlsExtra } from './share';
 
 const controls = defaultControlsExtra;
-const pickControls = { ['✅']: folder(githubReleaseControlsPickList, { collapsed: true }) };
+const pickControls = { ['✅']: folder(githubShieldControlsPickList, { collapsed: true }) };
 
 const GithubRelease = memo(() => {
   const store = useCreateStore();

src/ShieldsGithub/Social.tsx

@@ -3,7 +3,7 @@ import { folder } from 'leva';
 import { memo, useMemo } from 'react';
 
 import MarkdownStorybook from '@/components/MarkdownStorybook';
-import { githubSoialControlsPickList } from '@/const/githubShieldControls';
+import { githubSocialControlsPickList } from '@/const/githubShieldControls';
 import { genGithubSocialShields } from '@/services/genGithubShield';
 
 import { defaultControlsExtra } from './share';
@@ -12,7 +12,7 @@ const controls = {
   branch: 'main',
   ...defaultControlsExtra,
 };
-const pickControls = { ['✅']: folder(githubSoialControlsPickList, { collapsed: true }) };
+const pickControls = { ['✅']: folder(githubSocialControlsPickList, { collapsed: true }) };
 
 const GithubSocial = memo(() => {
   const store = useCreateStore();

src/ShieldsNpm/index.tsx

@@ -3,23 +3,23 @@ import { folder } from 'leva';
 import { memo, useMemo } from 'react';
 
 import MarkdownStorybook from '@/components/MarkdownStorybook';
-import { npmReleaseControlsPickList } from '@/const/npmShieldControls';
-import { genNpmReleaseShields } from '@/services/genNpmShield';
+import { npmShieldControlsPickList } from '@/const/npmShieldControls';
+import { genNpmShields } from '@/services/genNpmShield';
 
 import { defaultControlsExtra } from './share';
 
 const controls = defaultControlsExtra;
-const pickControls = { ['✅']: folder(npmReleaseControlsPickList, { collapsed: true }) };
+const pickControls = { ['✅']: folder(npmShieldControlsPickList, { collapsed: true }) };
 
-const NpmRelease = memo(() => {
+const Npm = memo(() => {
   const store = useCreateStore();
 
   const options = useControls(controls, { store });
   const pickOptions = useControls(pickControls, { store });
 
-  const md = useMemo(() => genNpmReleaseShields(options, pickOptions), [options, pickOptions]);
+  const md = useMemo(() => genNpmShields(options, pickOptions), [options, pickOptions]);
 
   return <MarkdownStorybook levaStore={store}>{md.join('\n\n')}</MarkdownStorybook>;
 });
 
-export default NpmRelease;
+export default Npm;

src/const/dockerShieldControls.ts

@@ -0,0 +1,41 @@
+import urlJoin from 'url-join';
+
+import { colorOptions } from '@/const/shieldBaseControls';
+import { DOCKER_URL, SHIELD_DOCKER_URL } from '@/const/url';
+import { ShieldsBaseOptions } from '@/types/shields';
+import { genPickList } from '@/utils/genPickList';
+
+export interface DockerShieldControlItem extends Partial<ShieldsBaseOptions> {
+  genLink?: (packageName: string) => string | undefined;
+  suffix?: string;
+  url: string;
+}
+
+const genLink: DockerShieldControlItem['genLink'] = (packageName) =>
+  urlJoin(DOCKER_URL, packageName);
+
+export const dockerShieldControls: {
+  [key: string]: DockerShieldControlItem;
+} = {
+  /* eslint-disable sort-keys-fix/sort-keys-fix */
+  release: {
+    logo: 'docker',
+    logoColor: 'white',
+    color: colorOptions.geekblue,
+    genLink,
+    url: urlJoin(SHIELD_DOCKER_URL, 'v'),
+  },
+  size: {
+    genLink,
+    color: colorOptions.geekblue,
+    url: urlJoin(SHIELD_DOCKER_URL, 'image-size'),
+  },
+  pulls: {
+    genLink,
+    color: colorOptions.green,
+    url: urlJoin(SHIELD_DOCKER_URL, 'pulls'),
+  },
+  /* eslint-enable */
+};
+
+export const dockerShieldControlsPickList = genPickList(dockerShieldControls);

src/const/githubShieldControls.ts

@@ -11,7 +11,7 @@ export interface GithubShieldControlItem extends Partial<ShieldsBaseOptions> {
   url: string;
 }
 
-export const githubSoialControls: {
+export const githubSocialControls: {
   [key: string]: GithubShieldControlItem;
 } = {
   /* eslint-disable sort-keys-fix/sort-keys-fix */
@@ -44,9 +44,9 @@ export const githubSoialControls: {
   /* eslint-enable */
 };
 
-export const githubSoialControlsPickList = genPickList(githubSoialControls);
+export const githubSocialControlsPickList = genPickList(githubSocialControls);
 
-export const githubReleaseControls: {
+export const githubShieldControls: {
   [key: string]: GithubShieldControlItem;
 } = {
   /* eslint-disable sort-keys-fix/sort-keys-fix */
@@ -68,4 +68,4 @@ export const githubReleaseControls: {
   /* eslint-enable */
 };
 
-export const githubReleaseControlsPickList = genPickList(githubReleaseControls);
+export const githubShieldControlsPickList = genPickList(githubShieldControls);

src/const/npmShieldControls.ts

@@ -13,7 +13,7 @@ export interface NpmShieldControlItem extends Partial<ShieldsBaseOptions> {
 
 const genLink: NpmShieldControlItem['genLink'] = (packageName) => urlJoin(NPM_URL, packageName);
 
-export const npmReleaseControls: {
+export const npmShieldControls: {
   [key: string]: NpmShieldControlItem;
 } = {
   /* eslint-disable sort-keys-fix/sort-keys-fix */
@@ -35,4 +35,4 @@ export const npmReleaseControls: {
   /* eslint-enable */
 };
 
-export const npmReleaseControlsPickList = genPickList(npmReleaseControls);
+export const npmShieldControlsPickList = genPickList(npmShieldControls);

src/const/url.ts

@@ -4,7 +4,9 @@ export const GITHUB_URL = 'https://github.com';
 export const GITHUB_STAR_HISTORY_URL = 'https://api.star-history.com/svg';
 export const GITHUBE_CONTRIB_URL = 'https://contrib.rocks/image';
 export const NPM_URL = 'https://www.npmjs.com/package';
+export const DOCKER_URL = 'https://hub.docker.com/r';
 export const SHIELD_URL = 'https://img.shields.io';
 export const SHIELD_BADGE_URL = urlJoin(SHIELD_URL, 'badge');
 export const SHIELD_GITHUB_URL = urlJoin(SHIELD_URL, 'github');
 export const SHIELD_NPM_URL = urlJoin(SHIELD_URL, 'npm');
+export const SHIELD_DOCKER_URL = urlJoin(SHIELD_URL, 'docker');

src/index.ts

@@ -1,14 +1 @@
-export { default as ReadmeContributing } from './ReadmeContributing';
-export { default as ReadmeCredits } from './ReadmeCredits';
-export { default as ReadmeDevelopment } from './ReadmeDevelopment';
-export { default as ReadmeFeatures } from './ReadmeFeatures';
 export { default as ReadmeHero } from './ReadmeHero';
-export { default as ReadmeInstallation } from './ReadmeInstallation';
-export { default as ReadmeLicense } from './ReadmeLicense';
-export { default as ShieldsBilibili } from './ShieldsBilibili';
-export * from './ShieldsCustom';
-export { default as ShieldsDiscord } from './ShieldsDiscord';
-export * from './ShieldsGithub';
-export { default as ShieldsNpm } from './ShieldsNpm';
-export * from './ShieldsVercel';
-export { default as ShieldsWebsite } from './ShieldsWebsite';

src/services/genDockerShield.ts

@@ -0,0 +1,40 @@
+import { identity, pickBy } from 'lodash-es';
+import qs from 'query-string';
+import urlJoin from 'url-join';
+
+import { DockerShieldControlItem, dockerShieldControls } from '@/const/dockerShieldControls';
+import { DockerShieldBaseOptions } from '@/types/shields';
+import { genShield } from '@/utils/genShield';
+
+interface DockerShieldOptions extends DockerShieldBaseOptions, DockerShieldControlItem {
+  name: string;
+}
+
+export const genDockerShield = (options: DockerShieldOptions) => {
+  const { packageName, url, suffix, name, genLink, ...config } = options;
+
+  const formatUrl = [url, packageName, suffix].filter(Boolean) as string[];
+  const defShield = qs.stringifyUrl({
+    query: pickBy(config, identity) as any,
+    url: urlJoin(...formatUrl),
+  });
+  const defLink = genLink?.(packageName);
+
+  return genShield(`docker-${name}`, defShield, defLink);
+};
+
+export const genDockerShields = (
+  options: Partial<DockerShieldOptions> | any,
+  pickOptions: { [key: string]: boolean },
+) => {
+  const defShields: string[] = [];
+  const defLinks: string[] = [];
+
+  for (const [name, config] of Object.entries(dockerShieldControls)) {
+    if (!pickOptions[name]) continue;
+    const data = genDockerShield({ name, ...options, ...config });
+    defShields.push(data[0]);
+    defLinks.push(data[1]);
+  }
+  return [defShields.join('\n'), defLinks.join('\n')];
+};

src/services/genGithubShield.ts

@@ -4,8 +4,8 @@ import urlJoin from 'url-join';
 
 import {
   GithubShieldControlItem,
-  githubReleaseControls,
-  githubSoialControls,
+  githubShieldControls,
+  githubSocialControls,
 } from '@/const/githubShieldControls';
 import {
   GITHUBE_CONTRIB_URL,
@@ -41,7 +41,7 @@ export const genGithubSocialShields = (
   const defShields: string[] = [];
   const defLinks: string[] = [];
 
-  for (const [name, config] of Object.entries(githubSoialControls)) {
+  for (const [name, config] of Object.entries(githubSocialControls)) {
     if (!pickOptions[name]) continue;
     const data = genGithubShield({ name, ...options, ...config });
     defShields.push(data[0]);
@@ -57,7 +57,7 @@ export const genGithubReleaseShields = (
   const defShields: string[] = [];
   const defLinks: string[] = [];
 
-  for (const [name, config] of Object.entries(githubReleaseControls)) {
+  for (const [name, config] of Object.entries(githubShieldControls)) {
     if (!pickOptions[name]) continue;
     const data = genGithubShield({ name, ...options, ...config });
     defShields.push(data[0]);

src/services/genMarkdownHero.ts

@@ -1,10 +1,10 @@
-import { githubSoialControlsPickList } from '@/const/githubShieldControls';
+import { githubSocialControlsPickList } from '@/const/githubShieldControls';
 import {
   genGithubActionsShield,
   genGithubReleaseShields,
   genGithubSocialShields,
 } from '@/services/genGithubShield';
-import { genNpmReleaseShields } from '@/services/genNpmShield';
+import { genNpmShields } from '@/services/genNpmShield';
 
 interface MarkdownHeroOptions {
   backToTop?: boolean;
@@ -44,7 +44,7 @@ export const genMarkdownHero = (options: MarkdownHeroOptions) => {
   );
 
   const [npmShield, npmLinks] = packageName
-    ? genNpmReleaseShields(
+    ? genNpmShields(
         { packageName, ...config },
         {
           release: true,
@@ -58,7 +58,7 @@ export const genMarkdownHero = (options: MarkdownHeroOptions) => {
 
   const [socialShields, socialLinks] = genGithubSocialShields(
     { branch, owner, repo, ...config },
-    githubSoialControlsPickList,
+    githubSocialControlsPickList,
   );
 
   const logoGroup = logo2

src/services/genNpmShield.ts

@@ -2,7 +2,7 @@ import { identity, pickBy } from 'lodash-es';
 import qs from 'query-string';
 import urlJoin from 'url-join';
 
-import { NpmShieldControlItem, npmReleaseControls } from '@/const/npmShieldControls';
+import { NpmShieldControlItem, npmShieldControls } from '@/const/npmShieldControls';
 import { NpmShieldBaseOptions } from '@/types/shields';
 import { genShield } from '@/utils/genShield';
 
@@ -23,14 +23,14 @@ export const genNpmShield = (options: NpmShieldOptions) => {
   return genShield(`npm-${name}`, defShield, defLink);
 };
 
-export const genNpmReleaseShields = (
+export const genNpmShields = (
   options: Partial<NpmShieldOptions> | any,
   pickOptions: { [key: string]: boolean },
 ) => {
   const defShields: string[] = [];
   const defLinks: string[] = [];
 
-  for (const [name, config] of Object.entries(npmReleaseControls)) {
+  for (const [name, config] of Object.entries(npmShieldControls)) {
     if (!pickOptions[name]) continue;
     const data = genNpmShield({ name, ...options, ...config });
     defShields.push(data[0]);

src/types/shields.ts

@@ -17,3 +17,7 @@ export interface GithubShieldBaseOptions {
 export interface NpmShieldBaseOptions {
   packageName: string;
 }
+
+export interface DockerShieldBaseOptions {
+  packageName: string;
+}