resolve conversation

src/components/Article/FullArticle.tsx

@@ -6,7 +6,7 @@ import { createMemo, For, Match, onMount, Show, Switch } from 'solid-js'
 import type { Author, Shout } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
 import MD from './MD'
-import { SharePopup } from './SharePopup'
+import { getShareUrl, SharePopup } from './SharePopup'
 import { getDescription } from '../../utils/meta'
 import stylesHeader from '../Nav/Header.module.scss'
 import styles from '../../styles/Article.module.scss'
@@ -174,7 +174,7 @@ export const FullArticle = (props: ArticleProps) => {
               title={props.article.title}
               description={getDescription(props.article.body)}
               imageUrl={props.article.cover}
-              shareUrl={location.href}
+              shareUrl={getShareUrl()}
               containerCssClass={stylesHeader.control}
               trigger={<Icon name="share-outline" class={styles.icon} />}
             />

src/components/Article/SharePopup.tsx

@@ -1,7 +1,6 @@
 import { Icon } from '../_shared/Icon'
 import { t } from '../../utils/intl'
 import { createSocialShare, TWITTER, VK, FACEBOOK, TELEGRAM } from '@solid-primitives/share'
-
 import styles from '../_shared/Popup/Popup.module.scss'
 import type { PopupProps } from '../_shared/Popup'
 import { Popup } from '../_shared/Popup'
@@ -13,6 +12,12 @@ type SharePopupProps = {
   description: string
 } & Omit<PopupProps, 'children'>
 
+export const getShareUrl = (params: { pathname?: string } = {}) => {
+  if (typeof location === 'undefined') return ''
+  const pathname = params.pathname ?? location.pathname
+  return location.origin + pathname
+}
+
 export const SharePopup = (props: SharePopupProps) => {
   const [share] = createSocialShare(() => ({
     title: props.title,
@@ -20,7 +25,7 @@ export const SharePopup = (props: SharePopupProps) => {
     description: props.description
   }))
   const copyLink = async () => {
-    await navigator.clipboard.writeText(window.location.href)
+    await navigator.clipboard.writeText(props.shareUrl)
   }
   return (
     <Popup {...props} variant="bordered">

src/components/Feed/Card.tsx

@@ -9,7 +9,7 @@ import { locale } from '../../stores/ui'
 import { clsx } from 'clsx'
 import { CardTopic } from './CardTopic'
 import { RatingControl } from '../Article/RatingControl'
-import { SharePopup } from '../Article/SharePopup'
+import { getShareUrl, SharePopup } from '../Article/SharePopup'
 import stylesHeader from '../Nav/Header.module.scss'
 import { getDescription } from '../../utils/meta'
 
@@ -73,12 +73,6 @@ export const ArticleCard = (props: ArticleCardProps) => {
 
   const { cover, layout, slug, authors, stat } = props.article
 
-  const [url, setUrl] = createSignal<string>(null)
-  onMount(() => {
-    const composeUrl = new URL(location.href)
-    setUrl(composeUrl.origin)
-  })
-
   return (
     <section
       class={clsx(styles.shoutCard, `${props.settings?.additionalClass || ''}`)}
@@ -203,7 +197,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
                   title={props.article['title']}
                   description={getDescription(props.article['body'])}
                   imageUrl={props.article['cover']}
-                  shareUrl={`${url()}/${slug}`}
+                  shareUrl={getShareUrl({ pathname: `/${slug}` })}
                   trigger={
                     <button>
                       <Icon name="share-outline" class={clsx(styles.icon, styles.feedControlIcon)} />

src/components/Nav/Header.tsx

@@ -9,7 +9,7 @@ import styles from './Header.module.scss'
 import { getPagePath } from '@nanostores/router'
 import { clsx } from 'clsx'
 import { HeaderAuth } from './HeaderAuth'
-import { SharePopup } from '../Article/SharePopup'
+import { getShareUrl, SharePopup } from '../Article/SharePopup'
 import { getDescription } from '../../utils/meta'
 
 const resources: { name: string; route: keyof Routes }[] = [
@@ -128,7 +128,7 @@ export const Header = (props: Props) => {
               <SharePopup
                 title={props.title}
                 imageUrl={props.cover}
-                shareUrl={location.href}
+                shareUrl={getShareUrl()}
                 description={getDescription(props.articleBody)}
                 onVisibilityChange={(isVisible) => {
                   setIsSharePopupVisible(isVisible)

src/utils/meta.ts

@@ -1,7 +1,9 @@
-export const getDescription = (body: string) => {
+export const getDescription = (body: string): string => {
-  if (!body) return null
+  if (!body) {
+    return ''
+  }
   const descriptionWordsArray = body
-    .slice(0, 150)
+    .slice(0, 150) // meta description is roughly 155 characters long
     .replaceAll(/<[^>]*>/g, '')
     .split(' ')
   return descriptionWordsArray.splice(0, descriptionWordsArray.length - 1).join(' ') + '...'