banner image url fix

src/components/Discours/Banner.tsx

@@ -23,11 +23,7 @@ export default () => {
             </p>
           </div>
           <div class={clsx(styles.discoursBannerImage, 'col-lg-12 offset-lg-2')}>
-            <Image
+            <Image src="production/image/discours-banner.jpg" alt={t('Discours')} width={600} />
-              src="https://cdn.discours.io/production/image/discours-banner.jpg"
-              alt={t('Discours')}
-              width={600}
-            />
           </div>
         </div>
       </div>

src/components/Feed/ArticleCard/ArticleCard.tsx

@@ -96,7 +96,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
 
   const canEdit = () =>
     props.article.authors?.some((a) => a.slug === author()?.slug) ||
-    props.article.created_by.id === author().id
+    props.article.created_by?.id === author().id
 
   const { changeSearchParam } = useRouter()
   const scrollToComments = (event) => {

src/components/Nav/HeaderAuth.tsx

@@ -221,8 +221,8 @@ export const HeaderAuth = (props: Props) => {
                       <div classList={{ entered: page().path === `/${author()?.slug}` }}>
                         <Userpic
                           size={'M'}
-                          name={author().name}
+                          name={author()?.name}
-                          userpic={author().pic}
+                          userpic={author()?.pic}
                           class={styles.userpic}
                         />
                       </div>

src/components/Topic/Card.tsx

@@ -35,7 +35,7 @@ interface TopicProps {
 }
 
 export const TopicCard = (props: TopicProps) => {
-  const { t } = useLocalize()
+  const { t, lang } = useLocalize()
   const {
     subscriptions,
     isSessionLoaded,
@@ -83,6 +83,10 @@ export const TopicCard = (props: TopicProps) => {
     )
   }
 
+  const title = createMemo(() =>
+    capitalize(lang() == 'en' ? props.topic.slug.replace(/-/, ' ') : props.topic.title || ''),
+  )
+
   return (
     <div class={styles.topicContainer}>
       <div
@@ -101,9 +105,9 @@ export const TopicCard = (props: TopicProps) => {
               !props.subscribeButtonBottom && !props.isNarrow && !props.compact,
           }}
         >
-          <Show when={props.topic.title && !props.isCardMode}>
+          <Show when={title() && !props.isCardMode}>
             <h3 class={styles.topicTitle}>
-              <a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>
+              <a href={`/topic/${props.topic.slug}`}>{title()}</a>
             </h3>
           </Show>
 
@@ -114,7 +118,7 @@ export const TopicCard = (props: TopicProps) => {
           <Show when={props.topic.pic}>
             <div class={styles.topicAvatar}>
               <a href={`/topic/${props.topic.slug}`}>
-                <img src={props.topic.pic} alt={props.topic.title} />
+                <img src={props.topic.pic} alt={title()} />
               </a>
             </div>
           </Show>

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -10,6 +10,7 @@ import { Button } from '../../_shared/Button'
 import { CheckButton } from '../../_shared/CheckButton'
 
 import styles from './TopicBadge.module.scss'
+import { capitalize } from '../../../utils/capitalize'
 
 type Props = {
   topic: Topic
@@ -18,7 +19,7 @@ type Props = {
 
 export const TopicBadge = (props: Props) => {
   const [isSubscribing, setIsSubscribing] = createSignal(false)
-  const { t } = useLocalize()
+  const { t, lang } = useLocalize()
   const {
     isAuthenticated,
     subscriptions,
@@ -52,7 +53,9 @@ export const TopicBadge = (props: Props) => {
         }
       />
       <a href={`/topic/${props.topic.slug}`} class={styles.info}>
-        <span class={styles.title}>{props.topic.title}</span>
+        <span class={styles.title}>
+          {lang() == 'en' ? capitalize(props.topic.slug.replace(/-/, ' ')) : props.topic.title}
+        </span>
         <Show
           when={props.topic.body}
           fallback={

src/components/Views/AllTopics.tsx

@@ -13,6 +13,7 @@ import { SearchField } from '../_shared/SearchField'
 import { TopicCard } from '../Topic/Card'
 
 import styles from './AllTopics.module.scss'
+import { capitalize } from '../../utils/capitalize'
 
 type AllTopicsPageSearchParams = {
   by: 'shouts' | 'authors' | 'title' | ''
@@ -23,12 +24,13 @@ type AllTopicsViewProps = {
 }
 
 const PAGE_SIZE = 20
-const ALPHABET = [...'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ#']
 
 export const AllTopicsView = (props: AllTopicsViewProps) => {
   const { t, lang } = useLocalize()
   const { searchParams, changeSearchParam } = useRouter<AllTopicsPageSearchParams>()
   const [limit, setLimit] = createSignal(PAGE_SIZE)
+  const ALPHABET =
+    lang() === 'ru' ? [...'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ#'] : [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ#']
 
   const { sortedTopics } = useTopicsStore({
     topics: props.topics,
@@ -52,8 +54,9 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
   const byLetter = createMemo<{ [letter: string]: Topic[] }>(() => {
     return sortedTopics().reduce(
       (acc, topic) => {
-        let letter = topic.title[0].toUpperCase()
+        let letter = lang() == 'en' ? topic.slug[0].toUpperCase() : topic.title[0].toUpperCase()
         if (/[^ËА-яё]/.test(letter) && lang() === 'ru') letter = '#'
+        if (/[^A-z]/.test(letter) && lang() === 'en') letter = '#'
         if (!acc[letter]) acc[letter] = []
         acc[letter].push(topic)
         return acc
@@ -143,7 +146,9 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
                           <For each={byLetter()[letter]}>
                             {(topic) => (
                               <div class={clsx(styles.topic, 'topic col-sm-12 col-md-8')}>
-                                <a href={`/topic/${topic.slug}`}>{topic.title}</a>
+                                <a href={`/topic/${topic.slug}`}>
+                                  {lang() == 'en' ? capitalize(topic.slug.replace(/-/, ' ')) : topic.title}
+                                </a>
                                 <span class={styles.articlesCounter}>{topic.stat.shouts}</span>
                               </div>
                             )}

src/components/Views/Feed.tsx

@@ -48,7 +48,7 @@ type Props = {
 }
 
 export const FeedView = (props: Props) => {
-  const { t } = useLocalize()
+  const { t, lang } = useLocalize()
   const { page, searchParams } = useRouter<FeedSearchParams>()
   const [isLoading, setIsLoading] = createSignal(false)
 
@@ -227,7 +227,9 @@ export const FeedView = (props: Props) => {
               <For each={topTopics().slice(0, 7)}>
                 {(topic) => (
                   <span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
-                    <a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
+                    <a href={`/topic/${topic.slug}`}>
+                      {lang() == 'en' ? topic.slug.replace(/-/, ' ') : topic.title}
+                    </a>{' '}
                   </span>
                 )}
               </For>

src/context/connect.tsx

@@ -59,16 +59,16 @@ export const ConnectProvider = (props: { children: JSX.Element }) => {
             setConnected(false)
           },
           onerror(err) {
-            console.error('[context.connect] sse connection closed by error', err)
+            console.error('[context.connect] sse connection error', err)
             setConnected(false)
             throw new Error(err) // NOTE: simple hack to close the connection
           },
         })
       } catch (err) {
-        console.error(err)
+        if (retried() < 4) {
           setRetried((r) => r + 1)
-        if (retried() + 1 > 3) {
+        } else {
-          console.warn('not trying to reconnect anymore, listen() should be called again')
+          console.warn('Not trying to reconnect anymore; listen() should be called again.')
         }
       }
     }

src/graphql/query/core/article-load.ts

@@ -12,6 +12,7 @@ export default gql`
       slug
       layout
       cover
+      cover_caption
       body
       media
       updated_by {