Feature/og image text (#356)

* WIP

* lint

src/components/Article/FullArticle.tsx

@@ -13,7 +13,7 @@ import { useSession } from '../../context/session'
 import { MediaItem } from '../../pages/types'
 import { DEFAULT_HEADER_OFFSET, router, useRouter } from '../../stores/router'
 import { showModal } from '../../stores/ui'
-import { getImageUrl } from '../../utils/getImageUrl'
+import { getImageUrl, getOpenGraphImageUrl } from '../../utils/getImageUrl'
 import { getDescription, getKeywords } from '../../utils/meta'
 import { Icon } from '../_shared/Icon'
 import { Image } from '../_shared/Image'
@@ -286,9 +286,15 @@ export const FullArticle = (props: Props) => {
     }
   }
 
-  const ogImage = props.article.cover
-    ? getImageUrl(props.article.cover, { width: 1200 })
-    : getImageUrl('production/image/logo_image.png')
+  const cover = props.article.cover ?? 'production/image/logo_image.png'
+
+  const ogImage = getOpenGraphImageUrl(cover, {
+    title: props.article.title,
+    topic: mainTopic().title,
+    author: props.article.authors[0].name,
+    width: 1200,
+  })
+
   const description = getDescription(props.article.description || body())
   const ogTitle = props.article.title
   const keywords = getKeywords(props.article)

src/components/Feed/ArticleCard/ArticleCard.module.scss

@@ -107,7 +107,7 @@
   height: 0;
   margin-bottom: 1.6rem;
   overflow: hidden;
-  padding-bottom: 56.2%; //16:9
+  padding-bottom: 56.2%; // 16:9
   position: relative;
   transform-origin: 50% 50%;
   transition: transform 1s ease-in-out;

src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss

@@ -46,6 +46,7 @@
     li:first-child .action {
       padding-top: 16px;
     }
+
     li:last-child .action {
       padding-bottom: 16px;
     }

src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx

@@ -4,10 +4,7 @@ import { clsx } from 'clsx'
 import { Show } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
-import { showModal } from '../../../stores/ui'
-import { InviteCoAuthorsModal } from '../../_shared/InviteCoAuthorsModal'
 import { Popup } from '../../_shared/Popup'
-import { ShareModal } from '../../_shared/ShareModal'
 import { SoonChip } from '../../_shared/SoonChip'
 
 import styles from './FeedArticlePopup.module.scss'

src/components/Nav/AuthModal/PasswordField/PasswordField.tsx

@@ -1,8 +1,7 @@
 import { clsx } from 'clsx'
-import { createEffect, createSignal, JSX, on, Show } from 'solid-js'
+import { createEffect, createSignal, on, Show } from 'solid-js'
 
 import { useLocalize } from '../../../../context/localize'
-import { resetSortedArticles } from '../../../../stores/zine/articles'
 import { Icon } from '../../../_shared/Icon'
 
 import styles from './PasswordField.module.scss'

src/components/Nav/Modal/Modal.module.scss

@@ -1,7 +1,7 @@
 .backdrop {
   align-items: center;
   display: flex;
-  background: rgba(20, 20, 20, 0.07);
+  background: rgb(20 20 20 / 7%);
   justify-content: center;
   height: 100%;
   left: 0;
@@ -125,11 +125,13 @@
   .maxHeight {
     height: 100%;
   }
+
   .container {
     padding: 0;
     height: 100%;
     min-height: 100%;
   }
+
   .modalInner {
     padding: 1rem 1rem 0;
     height: 100%;

src/components/Nav/Modal/Modal.tsx

@@ -4,7 +4,6 @@ import { redirectPage } from '@nanostores/router'
 import { clsx } from 'clsx'
 import { createEffect, createMemo, createSignal, Show } from 'solid-js'
 
-import { useLocalize } from '../../../context/localize'
 import { useMediaQuery } from '../../../context/mediaQuery'
 import { router } from '../../../stores/router'
 import { hideModal, useModalStore } from '../../../stores/ui'
@@ -25,7 +24,6 @@ interface Props {
 }
 
 export const Modal = (props: Props) => {
-  const { t } = useLocalize()
   const { modal } = useModalStore()
   const [visible, setVisible] = createSignal(false)
   const allowClose = createMemo(() => props.allowClose !== false)

src/components/Topic/TopicBadge/TopicBadge.module.scss

@@ -7,9 +7,8 @@
 
   .basicInfo {
     display: flex;
-    flex-direction: row;
+    flex-flow: row nowrap;
     align-items: flex-start;
-    flex-wrap: nowrap;
     flex: 1;
     gap: 1rem;
   }

src/components/Views/Expo/Expo.tsx

@@ -147,7 +147,7 @@ export const Expo = (props: Props) => {
     <div class={styles.Expo}>
       <Show when={sortedArticles().length > 0} fallback={<Loading />}>
         <div class="wide-container">
-          <ul class={clsx('view-switcher', styles.navigation)}>
+          <ul class={clsx('view-switcher')}>
             <li class={clsx({ 'view-switcher__item--selected': !props.layout })}>
               <ConditionalWrapper
                 condition={Boolean(props.layout)}

src/components/Views/Feed/Feed.module.scss

@@ -195,6 +195,7 @@
   justify-content: space-between;
   align-items: center;
   margin-bottom: 4rem;
+
   @include media-breakpoint-down(sm) {
     flex-direction: column-reverse;
     align-items: flex-start;
@@ -214,8 +215,7 @@
 
   .dropdowns {
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
+    flex-flow: row nowrap;
     gap: 1rem;
     justify-content: center;
   }

src/components/Views/Feed/Feed.tsx

@@ -203,10 +203,6 @@ export const Feed = (props: Props) => {
   )
   const ogTitle = t('Feed')
 
-  const myPopupProps = {
-    horizontalAnchor: 'right',
-  }
-
   return (
     <div class="wide-container feed">
       <Meta name="descprition" content={description} />

src/components/_shared/DropDown/DropDown.module.scss

@@ -1,6 +1,7 @@
 .trigger {
   white-space: nowrap;
 }
+
 .chevron {
   vertical-align: top;
 

src/components/_shared/Lightbox/Lightbox.module.scss

@@ -9,7 +9,6 @@
   align-items: center;
   justify-content: center;
   z-index: 10000;
-
   animation: 300ms fadeIn;
   animation-fill-mode: forwards;
 

src/components/_shared/ShareLinks/ShareLinks.tsx

@@ -1,12 +1,9 @@
-import { getPagePath } from '@nanostores/router'
 import { createSocialShare, FACEBOOK, TELEGRAM, TWITTER, VK } from '@solid-primitives/share'
-import { Input } from '@thisbeyond/solid-select'
 import { clsx } from 'clsx'
 import { createSignal, Show } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
 import { useSnackbar } from '../../../context/snackbar'
-import { router } from '../../../stores/router'
 import { Icon } from '../Icon'
 import { Popover } from '../Popover'
 

src/components/_shared/ShareModal/ShareModal.tsx

@@ -1,10 +1,7 @@
 import { useLocalize } from '../../../context/localize'
 import { Modal } from '../../Nav/Modal'
-import { Button } from '../Button'
 import { ShareLinks } from '../ShareLinks'
 
-import styles from '../ShareLinks/ShareLinks.module.scss'
-
 type Props = {
   modalTitle?: string
   shareUrl?: string

src/components/_shared/UserSearch/UserSearch.module.scss

@@ -1,8 +1,7 @@
 .UserSearch {
   .searchHeader {
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
+    flex-flow: row nowrap;
     width: 100%;
     gap: 1rem;
   }
@@ -10,8 +9,7 @@
   .field {
     border-bottom: 2px solid var(--background-color-invert);
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
+    flex-flow: row nowrap;
     padding: 4px 0;
     align-items: center;
     width: 100%;
@@ -28,6 +26,7 @@
     &::placeholder {
       color: #404040;
     }
+
     &:focus {
       outline: none;
     }

src/utils/getImageUrl.ts

@@ -1,5 +1,7 @@
 import { thumborUrl } from './config'
 
+const thumborPrefix = `${thumborUrl}/unsafe/`
+
 const getSizeUrlPart = (options: { width?: number; height?: number } = {}) => {
   const widthString = options.width ? options.width.toString() : ''
   const heightString = options.height ? options.height.toString() : ''
@@ -14,8 +16,6 @@ const getSizeUrlPart = (options: { width?: number; height?: number } = {}) => {
 export const getImageUrl = (src: string, options: { width?: number; height?: number } = {}) => {
   const sizeUrlPart = getSizeUrlPart(options)
 
-  const thumborPrefix = `${thumborUrl}/unsafe/`
-
   if (src.startsWith(thumborPrefix)) {
     const thumborKey = src.replace(thumborPrefix, '')
     return `${thumborUrl}/unsafe/${sizeUrlPart}${thumborKey}`
@@ -23,3 +23,27 @@ export const getImageUrl = (src: string, options: { width?: number; height?: num
 
   return `${thumborUrl}/unsafe/${sizeUrlPart}${src}`
 }
+
+export const getOpenGraphImageUrl = (
+  src: string,
+  options: {
+    topic: string
+    title: string
+    author: string
+    width?: number
+    height?: number
+  },
+) => {
+  const sizeUrlPart = getSizeUrlPart(options)
+
+  const filtersPart = `filters:discourstext('${encodeURIComponent(options.topic)}','${encodeURIComponent(
+    options.author,
+  )}','${encodeURIComponent(options.title)}')/`
+
+  if (src.startsWith(thumborPrefix)) {
+    const thumborKey = src.replace(thumborPrefix, '')
+    return `${thumborUrl}/unsafe/${sizeUrlPart}${filtersPart}${thumborKey}`
+  }
+
+  return `${thumborUrl}/unsafe/${sizeUrlPart}${filtersPart}${src}`
+}