Merge remote-tracking branch 'hub/dev' into dev

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,6 @@ export const FullArticle = (props: ArticleProps) => {
               title={props.article.title}
               description={getDescription(props.article.body)}
               imageUrl={props.article.cover}
-              shareUrl={location.href}
               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/Feed/Sidebar.module.scss

@@ -1,3 +1,11 @@
+.sidebar {
+  max-height: calc(100vh - 120px);
+  overflow: auto;
+  padding-right: 1rem;
+  position: sticky;
+  top: 120px;
+}
+
 .counter {
   align-items: center;
   align-self: flex-start;
@@ -29,6 +37,7 @@
 .settings {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 2em;
 }
 
 a {

src/components/Feed/Sidebar.tsx

@@ -29,7 +29,7 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
   }
 
   return (
-    <>
+    <div class={styles.sidebar}>
       <ul>
         <li>
           <a href="#">
@@ -78,6 +78,7 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
             <Icon name="feed-notifications" class={styles.icon} />
             уведомления
           </a>
+          <span class={styles.counter}>283</span>
         </li>
       </ul>
 
@@ -119,6 +120,6 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
           {t('Feed settings')}
         </a>
       </div>
-    </>
+    </div>
   )
 }

src/components/Nav/Header.module.scss

@@ -117,6 +117,10 @@
 
     &:hover {
       background: none;
+
+      img {
+        filter: none;
+      }
     }
   }
 }

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/components/Views/Feed.module.scss

@@ -14,16 +14,21 @@
   }
 
   ul {
-    margin-bottom: 3rem;
+    margin: 0 0 3rem;
   }
 
   li {
     display: flex;
     justify-content: space-between;
     margin: 0 0 1rem;
+    white-space: nowrap;
+    width: 100%;
 
     a {
       margin-right: 0.5em;
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 

src/components/Views/Feed.tsx

@@ -78,115 +78,118 @@ export const FeedView = () => {
   return (
     <>
       <div class="wide-container feed">
-        <div class="row">
+        <div class="shift-content">
-          <div class={clsx('col-md-3', styles.feedNavigation)}>
+          <div class={clsx('left-col', styles.feedNavigation)}>
             <FeedSidebar authors={sortedAuthors()} />
           </div>
 
-          <div class="col-md-6">
+          <div class="row">
-            <ul class="feed-filter">
+            <div class="col-md-8">
-              <Show when={!!session()?.user?.slug}>
+              <ul class="feed-filter">
-                <li class="selected">
+                <Show when={!!session()?.user?.slug}>
-                  <a href="/feed/my">{t('My feed')}</a>
+                  <li class="selected">
+                    <a href="/feed/my">{t('My feed')}</a>
+                  </li>
+                </Show>
+                <li>
+                  <a href="/feed/?by=views">{t('Most read')}</a>
+                </li>
+                <li>
+                  <a href="/feed/?by=rating">{t('Top rated')}</a>
+                </li>
+                <li>
+                  <a href="/feed/?by=comments">{t('Most commented')}</a>
                 </li>
-              </Show>
-              <li>
-                <a href="/feed/?by=views">{t('Most read')}</a>
-              </li>
-              <li>
-                <a href="/feed/?by=rating">{t('Top rated')}</a>
-              </li>
-              <li>
-                <a href="/feed/?by=comments">{t('Most commented')}</a>
-              </li>
-            </ul>
-
-            <Show when={sortedArticles().length > 0}>
-              <For each={sortedArticles().slice(0, 4)}>
-                {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
-              </For>
-
-              <div class={stylesBeside.besideColumnTitle}>
-                <h4>{t('Popular authors')}</h4>
-                <a href="/authors">
-                  {t('All authors')}
-                  <Icon name="arrow-right" class={stylesBeside.icon} />
-                </a>
-              </div>
-
-              <ul class={stylesBeside.besideColumn}>
-                <For each={topAuthors().slice(0, 5)}>
-                  {(author) => (
-                    <li>
-                      <AuthorCard author={author} compact={true} hasLink={true} />
-                    </li>
-                  )}
-                </For>
               </ul>
 
-              <For each={sortedArticles().slice(4)}>
+              <Show when={sortedArticles().length > 0}>
-                {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
+                <For each={sortedArticles().slice(0, 4)}>
-              </For>
+                  {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
-            </Show>
+                </For>
-          </div>
 
-          <aside class={clsx('col-md-3', styles.feedAside)}>
+                <div class={stylesBeside.besideColumnTitle}>
-            <section class={styles.asideSection}>
+                  <h4>{t('Popular authors')}</h4>
-              <h4>{t('Comments')}</h4>
+                  <a href="/authors">
-              <ul class={stylesArticle.comments}>
+                    {t('All authors')}
-                <For each={topComments().filter((item) => item.body)}>
+                    <Icon name="arrow-right" class={stylesBeside.icon} />
-                  {(comment) => {
+                  </a>
-                    return (
+                </div>
-                      <li class={styles.comment}>
+
-                        <div class={clsx('text-truncate', styles.commentBody)} innerHTML={comment.body} />
+                <ul class={stylesBeside.besideColumn}>
-                        <AuthorCard
+                  <For each={topAuthors().slice(0, 5)}>
-                          author={comment.createdBy as Author}
+                    {(author) => (
-                          isFeedMode={true}
+                      <li>
-                          compact={true}
+                        <AuthorCard author={author} compact={true} hasLink={true} />
-                          hideFollow={true}
-                        />
-                        <div class={clsx('text-truncate', styles.commentArticleTitle)}>
-                          <a href={`/${comment.shout.slug}`}>{comment.shout.title}</a>
-                        </div>
                       </li>
-                    )
+                    )}
-                  }}
+                  </For>
-                </For>
+                </ul>
-              </ul>
-            </section>
 
-            <Show when={topTopics().length > 0}>
+                <For each={sortedArticles().slice(4)}>
+                  {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
+                </For>
+              </Show>
+            </div>
+
+            <aside class={clsx('col-md-4', styles.feedAside)}>
               <section class={styles.asideSection}>
-                <h4>{t('Topics')}</h4>
+                <h4>{t('Comments')}</h4>
-                <For each={topTopics().slice(0, 5)}>
+                <ul class={stylesArticle.comments}>
-                  {(topic) => (
+                  <For each={topComments().filter((item) => item.body)}>
-                    <span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
+                    {(comment) => {
-                      <a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
+                      return (
-                    </span>
+                        <li class={styles.comment}>
-                  )}
+                          <div class={clsx('text-truncate', styles.commentBody)} innerHTML={comment.body} />
-                </For>
+                          <AuthorCard
+                            author={comment.createdBy as Author}
+                            isFeedMode={true}
+                            compact={true}
+                            hideFollow={true}
+                          />
+                          <div class={clsx('text-truncate', styles.commentArticleTitle)}>
+                            <a href={`/${comment.shout.slug}`}>{comment.shout.title}</a>
+                          </div>
+                        </li>
+                      )
+                    }}
+                  </For>
+                </ul>
               </section>
-            </Show>
 
-            <section class={clsx(styles.asideSection, styles.pinnedLinks)}>
+              <Show when={topTopics().length > 0}>
-              <Icon name="pin" class={styles.icon} />
+                <section class={styles.asideSection}>
-              <ul class="nodash">
+                  <h4>{t('Topics')}</h4>
-                <li>
+                  <For each={topTopics().slice(0, 5)}>
-                  <a href="/about/guide">Как устроен Дискурс</a>
+                    {(topic) => (
-                </li>
+                      <span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
-                <li>
+                        <a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
-                  <a href="/how-to-write-a-good-article">Как создать хороший текст</a>
+                      </span>
-                </li>
+                    )}
-                <li>
+                  </For>
-                  <a href="#">Правила конструктивных дискуссий</a>
+                </section>
-                </li>
+              </Show>
-                <li>
+
-                  <a href="/about/principles">Принципы сообщества</a>
+              <section class={clsx(styles.asideSection, styles.pinnedLinks)}>
-                </li>
+                <Icon name="pin" class={styles.icon} />
-              </ul>
+                <ul class="nodash">
-            </section>
+                  <li>
-          </aside>
+                    <a href="/about/guide">Как устроен Дискурс</a>
+                  </li>
+                  <li>
+                    <a href="/how-to-write-a-good-article">Как создать хороший текст</a>
+                  </li>
+                  <li>
+                    <a href="#">Правила конструктивных дискуссий</a>
+                  </li>
+                  <li>
+                    <a href="/about/principles">Принципы сообщества</a>
+                  </li>
+                </ul>
+              </section>
+            </aside>
+          </div>
         </div>
+
         <Show when={isLoadMoreButtonVisible()}>
           <p class="load-more-container">
             <button class="button" onClick={loadMore}>

src/components/_shared/CommentEditor/CommentEditor.tsx

@@ -2,7 +2,7 @@ import styles from './styles/CommentEditor.module.scss'
 import './styles/ProseMirrorOverrides.scss'
 import { clsx } from 'clsx'
 import Button from '../Button'
-import { createEffect, createMemo, onMount } from 'solid-js'
+import { createEffect, onMount, Show } from 'solid-js'
 import { t } from '../../../utils/intl'
 //ProseMirror deps
 import { schema } from './schema'
@@ -16,6 +16,8 @@ import { baseKeymap } from 'prosemirror-commands'
 import { customKeymap } from '../../EditorNew/prosemirror/plugins/customKeymap'
 import { placeholder } from '../../EditorNew/prosemirror/plugins/placeholder'
 import { undo, redo, history } from 'prosemirror-history'
+import { useSession } from '../../../context/session'
+import { showModal } from '../../../stores/ui'
 
 type Props = {
   initialValue: string
@@ -31,6 +33,7 @@ const getHtml = (state: EditorState) => {
 }
 
 const CommentEditor = (props: Props) => {
+  const { session } = useSession()
   const editorElRef: { current: HTMLDivElement } = { current: null }
   const menuElRef: { current: HTMLDivElement } = { current: null }
   const editorViewRef: { current: EditorView } = { current: null }
@@ -65,7 +68,9 @@ const CommentEditor = (props: Props) => {
   }
 
   createEffect(() => {
-    if (props.clear) clearEditor()
+    if (props.clear) {
+      clearEditor()
+    }
   })
 
   return (
@@ -78,12 +83,28 @@ const CommentEditor = (props: Props) => {
         <div class={styles.actions}>
           <div class={styles.menu} ref={(el) => (menuElRef.current = el)} />
           <div class={styles.buttons}>
-            <Button value={t('Send')} variant="primary" onClick={handleSubmitButtonClick} />
+            <Show when={session()?.user?.slug}>
-            <Button value="Cancel" variant="secondary" onClick={clearEditor} />
+              <Button value={t('Send')} variant="primary" onClick={handleSubmitButtonClick} />
+            </Show>
+            <Button value={t('cancel')} variant="secondary" onClick={clearEditor} />
           </div>
         </div>
       </div>
       <div class={styles.helpText}>{'"Cmd-Z": Undo, "Cmd-Y": Redo'}</div>
+      <Show when={!session()?.user?.slug}>
+        <div class={styles.signInMessage} id="comments">
+          {t('To write a comment, you must')}&nbsp;
+          <span
+            class={styles.link}
+            onClick={(evt) => {
+              evt.preventDefault()
+              showModal('auth')
+            }}
+          >
+            {t('sign up or sign in')}
+          </span>
+        </div>
+      </Show>
     </>
   )
 }

src/components/_shared/CommentEditor/styles/CommentEditor.module.scss

@@ -30,3 +30,21 @@
   margin: 12px 0;
   font-style: italic;
 }
+
+.signInMessage {
+  background: #f1f2f3;
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+  font-size: 20px;
+
+  .link {
+    color: #2638d9;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+
+    &:hover {
+      text-decoration: unset;
+    }
+  }
+}

src/styles/Feed.scss

@@ -57,8 +57,8 @@
 
 .feed-filter {
   display: flex;
+  flex-wrap: wrap;
   @include font-size(1.7rem);
-
   font-weight: 500;
   list-style: none;
   margin: 0 0 1.6rem;
@@ -66,7 +66,7 @@
 
   li {
     border-bottom: 4px solid transparent;
-    margin: 0 1.4em 1em 0;
+    margin: 0 1.4em 0.5em 0;
 
     &:last-child {
       margin-right: 0;

src/styles/app.scss

@@ -691,11 +691,11 @@ astro-island {
   .left-col {
     height: 100%;
     padding-right: 2rem;
-    position: absolute;
     right: 100%;
     top: 0;
 
     @include media-breakpoint-up(md) {
+      position: absolute;
       width: 161px;
     }
 

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(' ') + '...'