fix: fix icon and type is required when override built-in network

docs/.vuepress/config.ts

@@ -5,25 +5,9 @@ import { defineUserConfig } from 'vuepress'
 import { socialSharePlugin } from 'vuepress-plugin-social-share'
 import { version } from '../../package.json'
 import type { NavbarLinkOptions } from '@vuepress/theme-default'
-import type { SocialShareNetwork } from 'vuepress-plugin-social-share'
 
 const packageName = 'vuepress-plugin-social-share'
 
-const extendsNetworks: Record<string, SocialShareNetwork> = {
-  pinterest: {
-    sharer: 'https://pinterest.com/pin/create/button/?url=@url&media=@media&description=@title',
-    type: 'popup',
-    icon: '/pinterest.png',
-  },
-  linkedin: {
-    sharer:
-      'https://www.linkedin.com/shareArticle?mini=true&url=@url&title=@title&summary=@description',
-    type: 'popup',
-    color: '#1786b1',
-    icon: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M910.336 0H113.664A114.005333 114.005333 0 0 0 0 113.664v796.672A114.005333 114.005333 0 0 0 113.664 1024h796.672A114.005333 114.005333 0 0 0 1024 910.336V113.664A114.005333 114.005333 0 0 0 910.336 0zM352.256 796.330667H207.189333V375.466667h145.066667z m-72.021333-477.866667a77.824 77.824 0 0 1-81.237334-74.069333A77.824 77.824 0 0 1 280.234667 170.666667a77.824 77.824 0 0 1 81.237333 73.728 77.824 77.824 0 0 1-81.237333 73.386666z m582.314666 477.866667H716.8v-227.669334c0-46.762667-18.432-93.525333-73.045333-93.525333a84.992 84.992 0 0 0-81.237334 94.549333v226.304h-140.629333V375.466667h141.653333v60.757333a155.989333 155.989333 0 0 1 136.533334-71.338667c60.416 0 163.498667 30.378667 163.498666 194.901334z" /></svg>',
-  },
-}
-
 const VERSIONS: NavbarLinkOptions[] = [
   { text: `v${version} (current)`, link: '/' },
   { text: `Release Notes`, link: `https://github.com/ntnyq/${packageName}/releases` },
@@ -80,12 +64,34 @@ export default defineUserConfig({
       theme: 'one-dark-pro',
     }),
     socialSharePlugin({
-      networks: ['qq', 'twitter', 'weibo', 'email', 'linkedin', 'pinterest', 'wechat'],
+      networks: [
+        'qq',
+        'twitter',
+        'weibo',
+        'email',
+        'wechat',
+        {
+          name: 'pinterest',
+          type: 'popup',
+          icon: '/pinterest.png',
+          default: true,
+          sharer:
+            'https://pinterest.com/pin/create/button/?url=@url&media=@media&description=@title',
+        },
+        {
+          name: 'linkedin',
+          type: 'popup',
+          color: '#1786b1',
+          default: true,
+          sharer:
+            'https://www.linkedin.com/shareArticle?mini=true&url=@url&title=@title&summary=@description',
+          icon: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M910.336 0H113.664A114.005333 114.005333 0 0 0 0 113.664v796.672A114.005333 114.005333 0 0 0 113.664 1024h796.672A114.005333 114.005333 0 0 0 1024 910.336V113.664A114.005333 114.005333 0 0 0 910.336 0zM352.256 796.330667H207.189333V375.466667h145.066667z m-72.021333-477.866667a77.824 77.824 0 0 1-81.237334-74.069333A77.824 77.824 0 0 1 280.234667 170.666667a77.824 77.824 0 0 1 81.237333 73.728 77.824 77.824 0 0 1-81.237333 73.386666z m582.314666 477.866667H716.8v-227.669334c0-46.762667-18.432-93.525333-73.045333-93.525333a84.992 84.992 0 0 0-81.237334 94.549333v226.304h-140.629333V375.466667h141.653333v60.757333a155.989333 155.989333 0 0 1 136.533334-71.338667c60.416 0 163.498667 30.378667 163.498666 194.901334z" /></svg>',
+        },
+      ],
       twitterUser: 'ntnyq',
       fallbackImage: '/hero.png',
       useCustomStyle: false,
       hideWhenPrint: true,
-      extendsNetworks,
     }),
   ],
 })

docs/guide/README.md

@@ -99,26 +99,24 @@ export default defineUserConfig({
 
 ### networks
 
-- **type:** `(string | SocialShareNetworkWithName)[]`
+- **type:** `(string | SocialShareNetworkWithName | OverrideSocialShareNetworkWithName)[]`
 - **default** `['twitter', 'facebook', 'reddit']`
 
 ```ts
+type ThemeableValue<T = string> = T | { light: T; dark: T }
+type OverrideSocialShareNetworkWithName = Partial<SocialShareNetworkWithName> & {
+  name: BuiltInNetworkNames
+}
 type SocialShareNetworkWithName = {
+  /**
+   * Sharer name
+   */
+  name: string
+
   /**
    * Sharer icon
    */
-  icon:
-    | string
-    | {
-        /**
-         * icon for dark mode
-         */
-        dark: string
-        /**
-         * icon for light mode
-         */
-        light: string
-      }
+  icon: ThemeableValue<string>
 
   /**
    * Sharer type
@@ -128,18 +126,7 @@ type SocialShareNetworkWithName = {
   /**
    * Sharer icon color
    */
-  color?:
-    | string
-    | {
-        /**
-         * color for dark mode
-         */
-        dark: string
-        /**
-         * color for light mode
-         */
-        light: string
-      }
+  color?: ThemeableValue<string>
 
   /**
    * Sharer URL

src/client/components/SocialShare.ts

@@ -187,17 +187,22 @@ export const SocialShare = defineComponent({
       const body = document.body
       const socialShareEl = document.querySelector('#__VUEPRESS_SOCIAL_SHARE__')
       const socialShareOverlay = document.createElement('div')
+
       socialShareOverlay.id = '__VUEPRESS_SOCIAL_SHARE__'
       socialShareOverlay.classList.add('social-share-overlay')
+
       if (socialShareEl && socialShareEl.parentNode) {
         socialShareEl.remove()
       }
+
       try {
         const QRCode = await import('qrcode')
         const dataURL = await QRCode.toDataURL(url.value, qrcodeRenderOptions.value)
+
         socialShareOverlay.innerHTML = `<img class="social-share-qrcode" src="${dataURL}" />`
         body.append(socialShareOverlay)
         socialShareOverlay.classList.add('show')
+
         socialShareOverlay.addEventListener('click', evt => {
           socialShareOverlay.classList.remove('show')
           socialShareOverlay.remove()
@@ -233,18 +238,16 @@ export const SocialShare = defineComponent({
     const onShare = (name: string) => {
       const network = options.networksData.find(item => item.name === name)!
       const shareURL = createShareURL(name, network)
+
       switch (network.type) {
         case 'popup':
-          openSharer(shareURL)
-          break
+          return openSharer(shareURL)
         case 'qrcode':
-          showQRCode()
-          break
+          return showQRCode()
         case 'direct':
-          openWindow(shareURL)
-          break
+          return openWindow(shareURL)
         default:
-          break
+          return openSharer(shareURL)
       }
     }
     const renderNetworkList = (networks: SocialShareNetworkWithName[]) =>

src/client/components/SocialShareNetwork.ts

@@ -20,7 +20,9 @@ export const SocialShareNetwork = defineComponent({
       required: true,
       validator: (network: SocialShareNetworkWithName) => {
         if (!network.icon) return false
-        if (['popup'].includes(network.type)) return Boolean(network.sharer)
+        if (network.type !== 'qrcode') {
+          return Boolean(network.sharer)
+        }
         return true
       },
     },

src/node/helpers.ts

@@ -1,7 +1,6 @@
 import { Logger } from '@vuepress/helper'
 import deepmerge from 'deepmerge'
-import { isString } from '../shared/index.js'
-import { BUILT_IN_NETWORKS, PLUGIN_NAME } from './constants.js'
+import { BUILT_IN_NETWORKS, isString, PLUGIN_NAME } from '../shared/index.js'
 import type { SocialShareNetworkWithName, SocialSharePluginOptions } from '../shared/index.js'
 
 export const logger = new Logger(PLUGIN_NAME)
@@ -31,7 +30,7 @@ export function resolveNetworksData(
       if (mergedNetworkNames.has(network.name)) {
         mergedNetworks[network.name] = deepmerge(mergedNetworks[network.name], network)
       } else {
-        mergedNetworks[network.name] = network
+        mergedNetworks[network.name] = network as SocialShareNetworkWithName
       }
     }
   }

src/node/socialSharePlugin.ts

@@ -1,6 +1,6 @@
 import { addViteSsrNoExternal } from '@vuepress/helper'
 import { getDirname, path } from 'vuepress/utils'
-import { PLUGIN_NAME } from './constants.js'
+import { PLUGIN_NAME } from '../shared/index.js'
 import { logger, resolveNetworksData } from './helpers.js'
 import type { PluginFunction } from 'vuepress/core'
 import type {

src/node/constants.ts → src/shared/constants.ts

@@ -1,4 +1,4 @@
-import type { SocialShareNetwork } from '../shared/index.js'
+import type { SocialShareNetwork } from './network.js'
 
 export const PLUGIN_NAME = 'vuepress-plugin-social-share'
 

src/shared/index.ts

@@ -1,3 +1,4 @@
 export * from './utils.js'
 export * from './plugin.js'
 export * from './network.js'
+export * from './constants.js'

src/shared/network.ts

@@ -1,39 +1,9 @@
-/**
- * network color
- */
-export type SocialShareColor =
-  | string
-  | {
-      /**
-       * color for dark mode
-       */
-      dark: string
-      /**
-       * color for light mode
-       */
-      light: string
-    }
-
-/**
- * network type
- */
-export type SocialShareType = 'direct' | 'popup' | 'qrcode'
+import type { BuiltInNetworkNames } from './constants.js'
 
 /**
- * network icon
+ * Themeable value
  */
-export type SocilaShareIcon =
-  | string
-  | {
-      /**
-       * icon for dark mode
-       */
-      dark: string
-      /**
-       * icon for light mode
-       */
-      light: string
-    }
+export type ThemeableValue<T = string> = T | { light: T; dark: T }
 
 /**
  * Social share network
@@ -42,17 +12,17 @@ export interface SocialShareNetwork {
   /**
    * Sharer icon
    */
-  icon: SocilaShareIcon
+  icon: ThemeableValue
 
   /**
    * Sharer type
    */
-  type: SocialShareType
+  type: 'direct' | 'popup' | 'qrcode'
 
   /**
    * Sharer icon color
    */
-  color?: SocialShareColor
+  color?: ThemeableValue
 
   /**
    * Sharer URL
@@ -79,3 +49,13 @@ export type SocialShareNetworkWithName = SocialShareNetwork & {
    */
   name: string
 }
+
+/**
+ * Override social share network with name
+ */
+export type OverrideSocialShareNetworkWithName = Partial<SocialShareNetwork> & {
+  /**
+   * Built-in share name
+   */
+  name: BuiltInNetworkNames
+}

src/shared/plugin.ts

@@ -1,5 +1,9 @@
 import type { QRCodeToDataURLOptions } from 'qrcode'
-import type { SocialShareNetwork, SocialShareNetworkWithName } from './network'
+import type {
+  OverrideSocialShareNetworkWithName,
+  SocialShareNetwork,
+  SocialShareNetworkWithName,
+} from './network.js'
 
 /**
  * @deprecated use `Record<string, SocialShareNetwork>` instead
@@ -71,7 +75,7 @@ export interface SocialSharePluginOptions {
    *
    * @default ['twitter', 'facebook', 'reddit']
    */
-  networks?: (string | SocialShareNetworkWithName)[]
+  networks?: (string | SocialShareNetworkWithName | OverrideSocialShareNetworkWithName)[]
 
   /**
    * Twitter profile username