From 118d48fb3b9902f8f7b5f65f48e312d40f62da85 Mon Sep 17 00:00:00 2001 From: Stefano Bartoletti Date: Fri, 5 Jul 2024 17:40:03 +0200 Subject: [PATCH] fix!: add required `baseUrl` module option It is now required to set a `baseUrl` option, to fix cases where `useRequesUrl` would return `localhost` as the site URL. --- README.md | 50 +++++++++++++++-------------------- playground/nuxt.config.ts | 2 ++ src/module.ts | 2 ++ src/runtime/SocialShare.vue | 8 +++--- src/runtime/useSocialShare.ts | 19 ++++++++++--- 5 files changed, 46 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index a7e2564..4801f3b 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ Simple Social Sharing for Nuxt 3 - A `useSocialShare` composable is exposed, to provide even more flexibility if needed - Many major social networks supported -## 🛠️ Quick Setup +## 🛠️ Setup & Configuraton 1. Add `@stefanobartoletti/nuxt-social-share` dependency to your project @@ -42,14 +42,32 @@ export default defineNuxtConfig({ modules: [ '@stefanobartoletti/nuxt-social-share' ], - // optional configuration, should be added manually +}) +``` + +3. Configure the module options to your needs: + +```ts +export default defineNuxtConfig({ + // configuration options socialShare: { - // module options + baseUrl: 'https://www.yoursite.com' // required! + // other optional module options } }) ``` -That's it! You can now use Nuxt Social Share in your Nuxt app ✨ +Available options: + +| Name | Required | Type | Default | Notes | +| ---- | -------- | ---- | ------- | ----- | +| `baseUrl` | `Yes` | `String` | `''` | This is the base URL of your website, likely the address of the homepage. **It is required**, all URLs to be shared will be built as relative paths to this. | +| `styled` | `No` | `Boolean` | `false` | Whether the `` components should be styled or not. It is `false` by default to allow for easier custom styling (*). | +| `label` | `No` | `Boolean` | `true` | Whether the text label in the `` components should be rendered or not (*). | +| `icon` | `No` | `Boolean` | `true` | Whether the icon in the `` components should be rendered or not (*). | + +> [!TIP] +> (*) It can be set also on a single component level via props, but it is usually better to set this from the module options to create your defaults, and override it with props only if needed. ## 🎨 Using the `` component @@ -227,30 +245,6 @@ It will return the following object: You can then use some or all the returned properties, according to your project setup and requirements. -## 🎛️ Configuration - -Module options can be set from the `socialShare` key in `nuxt.config.ts`: - -```ts -export default defineNuxtConfig({ - // optional configuration - socialShare: { - // module options - } -}) -``` - -Available options: - -| Name | Type | Default | Notes | -| ---- | ---- | ------- | ----- | -| `styled` | `Boolean` | `false` | Whether the `` components should be styled or not. It is `false` by default to allow for easier custom styling (*). | -| `label` | `Boolean` | `true` | Whether the text label in the `` components should be rendered or not (*). | -| `icon` | `Boolean` | `true` | Whether the icon in the `` components should be rendered or not (*). | - -> [!TIP] -> (*) It can be set also on a single component level via props, but it is usually better to set this from the module options to create your defaults, and override it with props only if needed. - ## ↗️ Supported networks A list of the currently supported networks and of their URL parameters diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index 5b9d3a1..959bf2e 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -7,6 +7,8 @@ export default defineNuxtConfig({ socialShare: { // styled: true, // label: false, + // icon: false, + baseUrl: 'https://stefanobartoletti.github.io/nuxt-social-share/', }, devtools: { enabled: true }, diff --git a/src/module.ts b/src/module.ts index 02a5c4f..d74c7b4 100644 --- a/src/module.ts +++ b/src/module.ts @@ -3,6 +3,7 @@ import { defu } from 'defu' // Module options TypeScript interface definition export interface ModuleOptions { + baseUrl?: string styled?: boolean label?: boolean icon?: boolean @@ -15,6 +16,7 @@ export default defineNuxtModule({ }, // Default configuration options of the Nuxt module defaults: { + baseUrl: '', styled: false, label: true, icon: true, diff --git a/src/runtime/SocialShare.vue b/src/runtime/SocialShare.vue index a1e8a74..1e0c412 100644 --- a/src/runtime/SocialShare.vue +++ b/src/runtime/SocialShare.vue @@ -36,11 +36,11 @@ const props = defineProps({ image: { type: String, default: undefined }, }) -const options = useRuntimeConfig().public.socialShare +const moduleOptions = useRuntimeConfig().public.socialShare -const isStyled = props.styled !== undefined ? props.styled : options.styled -const isLabeled = props.label !== undefined ? props.label : options.label -const hasIcon = props.icon !== undefined ? props.icon : options.icon +const isStyled = props.styled !== undefined ? props.styled : moduleOptions.styled +const isLabeled = props.label !== undefined ? props.label : moduleOptions.label +const hasIcon = props.icon !== undefined ? props.icon : moduleOptions.icon const selectedNetwork = useSocialShare({ network: props.network, diff --git a/src/runtime/useSocialShare.ts b/src/runtime/useSocialShare.ts index ac6213a..0ae197d 100644 --- a/src/runtime/useSocialShare.ts +++ b/src/runtime/useSocialShare.ts @@ -1,7 +1,7 @@ import type { Options } from './types/' import { networksIndex } from './networksIndex' -import { ref, useRequestURL } from '#imports' +import { computed, ref, useRoute, useRuntimeConfig } from '#imports' const defaultOptions = { network: '', @@ -14,12 +14,25 @@ const defaultOptions = { export function useSocialShare(options: Options = defaultOptions) { const { network, url, title, user, hashtags, image } = options + const moduleOptions = useRuntimeConfig().public.socialShare // Get network. Using a shallow copy to avoid mutating the original object const selectedNetwork = ref({ ...networksIndex[network] }) // Set default value for url if not provided from options - const pageUrl = url !== undefined ? url : useRequestURL().href + + const pageUrl = computed(() => { + if (url !== undefined) { + return url + } + + if (moduleOptions.baseUrl !== '') { + const baseUrl = moduleOptions.baseUrl.replace(/\/$/, '') + return `${baseUrl}${useRoute().fullPath}` + } + + return '' + }) // Build full share raw url const shareUrl = selectedNetwork.value.shareUrl @@ -32,7 +45,7 @@ export function useSocialShare(options: Options = defaultOptions) { // Replace placeholders with actual values fullUrl = fullUrl - .replace(/\[u\]/i, pageUrl) + .replace(/\[u\]/i, pageUrl.value) .replace(/\[t\]/i, title || '') .replace(/\[uid\]/i, user || '') .replace(/\[h\]/i, hashtags || '')