feat: add frontmatter type

ntnyq · Jan 9, 2023 · f9d499c · f9d499c · vercel · Jan 9, 2023
1 parent aafd9a6
commit f9d499c
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@ $ yarn add vuepress-plugin-social-share@next -D
 ## Usage
 
 ```js
-import { defineUserConfig } from '@vuepress/cli'
+import { defineUserConfig } from 'vuepress'
 import { socialSharePlugin } from 'vuepress-plugin-social-share'
 
 export default defineUserConfig({

diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -1,5 +1,4 @@
-import { defineUserConfig } from '@vuepress/cli'
-import { defaultTheme } from '@vuepress/theme-default'
+import { defaultTheme, defineUserConfig } from 'vuepress'
 import { socialSharePlugin } from 'vuepress-plugin-social-share'
 import type { SocialShareNetworkData } from 'vuepress-plugin-social-share'
 

diff --git a/docs/guide/README.md b/docs/guide/README.md
@@ -19,7 +19,7 @@ $ yarn add vuepress-plugin-social-share@next -D
 > See [Official Docs](https://v2.vuepress.vuejs.org/guide/plugin.html#plugin) about how to use a plugin in VuePress.
 
 ```js
-import { defineUserConfig } from '@vuepress/cli'
+import { defineUserConfig } from 'vuepress'
 import { socialSharePlugin } from 'vuepress-plugin-social-share'
 
 export default defineUserConfig({
@@ -32,7 +32,7 @@ export default defineUserConfig({
 For advanced usage.
 
 ```ts
-import { defineUserConfig } from '@vuepress/cli'
+import { defineUserConfig } from 'vuepress'
 import {
   type SocialShareNetworkData,
   socialSharePlugin,
@@ -141,7 +141,7 @@ A fallback share image if the page has no share image specified.
 You can provide a network image url or an absolute path resolve based on `.vuepress/public`.
 
 ```ts
-import { defineUserConfig } from '@vuepress/cli'
+import { defineUserConfig } from 'vuepress'
 import { socialSharePlugin } from 'vuepress-plugin-social-share'
 
 // Network image
@@ -155,7 +155,7 @@ export default defineUserConfig({
 ```
 
 ```ts
-import { defineUserConfig } from '@vuepress/cli'
+import { defineUserConfig } from 'vuepress'
 import { socialSharePlugin } from 'vuepress-plugin-social-share'
 
 // Public image file
@@ -205,7 +205,7 @@ With this option, you can add your custom sharer or override the [built-in netwo
 i.e:
 
 ```ts
-import { defineUserConfig } from '@vuepress/cli'
+import { defineUserConfig } from 'vuepress'
 import { socialSharePlugin, } from 'vuepress-plugin-social-share'
 import type { SocialShareNetworkData } from 'vuepress-plugin-social-share'
 

diff --git a/src/client/components/GlobalSocialShare.ts b/src/client/components/GlobalSocialShare.ts
@@ -12,7 +12,10 @@ import { usePageFrontmatter } from '@vuepress/client'
 // @ts-expect-error virtual module
 import { socialShareOptions } from '@vuepress/plugin-social-share/temp'
 import { SVG_ICON_CLOSE, SVG_ICON_SHARE } from '../utils.js'
-import type { SocialSharePluginOptionsWithDefaults } from '../../shared/index.js'
+import type {
+  SocialShareFrontmatter,
+  SocialSharePluginOptionsWithDefaults,
+} from '../../shared/index.js'
 import { SocialShare } from './SocialShare.js'
 
 export const GlobalSocialShare = defineComponent({
@@ -24,7 +27,7 @@ export const GlobalSocialShare = defineComponent({
     const options = socialShareOptions as SocialSharePluginOptionsWithDefaults
     const isActive = ref(false)
     const vm = getCurrentInstance() as any
-    const frontmatter = usePageFrontmatter()
+    const frontmatter = usePageFrontmatter<SocialShareFrontmatter>()
     const visible = computed(() => !(
       options.noGlobalSocialShare
           || frontmatter.value.noGlobalSocialShare

diff --git a/src/client/components/SocialShare.ts b/src/client/components/SocialShare.ts
@@ -12,6 +12,7 @@ import type {
   MayBe,
   SocialShareNetwork as Network,
   QRCodeOptions,
+  SocialShareFrontmatter,
   SocialShareNetworkData,
   SocialShareNetworkItem,
 } from '../../shared/index.js'
@@ -35,7 +36,7 @@ export const SocialShare = defineComponent({
     },
 
     tags: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => [],
     },
 
@@ -70,7 +71,7 @@ export const SocialShare = defineComponent({
       .map(name => ({ name, ...props.networksData[name] }))
       .filter(network => networks.includes(network.name))
       .sort((prev, next) => networks.indexOf(prev.name) - networks.indexOf(next.name))
-    const frontmatter = usePageFrontmatter()
+    const frontmatter = usePageFrontmatter<SocialShareFrontmatter>()
     const timer = ref<MayBe<number>>(null)
     const popup = reactive({
       status: false,
@@ -113,49 +114,40 @@ export const SocialShare = defineComponent({
 
     // Computed
     const visible = computed(
-      () => networks.length && !frontmatter.value.noSocialShare,
+      () => Boolean(networks.length) && !frontmatter.value.noSocialShare,
     )
-    const url = computed(
-      () =>
-        (frontmatter.value.$shareUrl
-          ?? frontmatter.value.shareUrl
-          ?? frontmatter.value.permalink
-          ?? (inBrowser ? location.href : ``)) as string,
+    const url = computed(() => frontmatter.value.$shareUrl
+      ?? frontmatter.value.shareUrl
+      ?? frontmatter.value.permalink
+      ?? (inBrowser ? location.href : ``),
     )
-    const title = computed(
-      () =>
-        (frontmatter.value.$shareTitle
-          ?? frontmatter.value.shareTitle
-          ?? frontmatter.value.title
-          ?? (inBrowser ? document.title : ``)) as string,
+    const title = computed(() => frontmatter.value.$shareTitle
+      ?? frontmatter.value.shareTitle
+      ?? frontmatter.value.title
+      ?? (inBrowser ? document.title : ``),
     )
-    const description = computed(
-      () =>
-        (frontmatter.value.$shareDescription
-          ?? frontmatter.value.shareDescription
-          ?? frontmatter.value.description
-          ?? getMetaContentByName(`description`)) as string,
+    const description = computed(() => frontmatter.value.$shareDescription
+      ?? frontmatter.value.shareDescription
+      ?? frontmatter.value.description
+      ?? getMetaContentByName(`description`),
     )
     const media = computed(() => {
-      const mediaURL = (frontmatter.value.$shareImage
+      const mediaURL = frontmatter.value.$shareImage
         ?? frontmatter.value.shareImage
         ?? frontmatter.value.image
-        ?? props.fallbackImage) as string
+        ?? props.fallbackImage
 
       if (!mediaURL) return ``
       if (isExternalUrl(mediaURL)) return mediaURL
       const realURL = inBrowser ? `${location.origin}${withBase(mediaURL)}` : ``
       return realURL
     })
-    const quote = computed(
-      () =>
-        (frontmatter.value.$shareQuote
-          ?? frontmatter.value.shareQuote
-          ?? (props.autoQuote ? description.value : ``)) as string,
+    const quote = computed(() => frontmatter.value.$shareQuote
+      ?? frontmatter.value.shareQuote
+      ?? (props.autoQuote ? description.value : ``),
     )
     const hashtags = computed(() => {
-      const tags
-        = frontmatter.value.$shareTags
+      const tags = frontmatter.value.$shareTags
         ?? frontmatter.value.shareTags
         ?? frontmatter.value.tags
         ?? frontmatter.value.tag

diff --git a/src/shared/types.ts b/src/shared/types.ts
@@ -18,6 +18,35 @@ export type SocialShareNetworkData = Record<string, SocialShareNetwork>
 
 export type QRCodeOptions = QRCodeToDataURLOptions
 
+export interface SocialShareFrontmatter {
+  noSocialShare?: boolean
+  noGlobalSocialShare?: boolean
+  // share meta
+  shareUrl?: string
+  $shareUrl?: string
+  permalink?: string
+
+  title?: string
+  shareTitle?: string
+  $shareTitle?: string
+
+  description?: string
+  shareDescription?: string
+  $shareDescription?: string
+
+  image?: string
+  shareImage?: string
+  $shareImage?: string
+
+  shareQuote?: string
+  $shareQuote?: string
+
+  tag?: string
+  tags?: string
+  shareTags?: string
+  $shareTags?: string
+}
+
 export interface SocialSharePluginOptions {
   networks?: string[]
   email?: string