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

2023-02-01 11:10:57 +03:00 · 2023-02-01 11:10:57 +03:00 · eac6ad7d4c
commit eac6ad7d4c
parent a330684621 a38d87961e
14 changed files with 184 additions and 123 deletions
--- a/src/components/Article/FullArticle.tsx
+++ b/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} />}
            />
--- a/src/components/Article/SharePopup.tsx
+++ b/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">
--- a/src/components/Feed/Card.tsx
+++ b/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)} />
--- a/src/components/Feed/Sidebar.module.scss
+++ b/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 {
--- a/src/components/Feed/Sidebar.tsx
+++ b/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>
  )
 }
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@ -117,6 +117,10 @@

    &:hover {
      background: none;
+
+      img {
+        filter: none;
+      }
    }
  }
 }
--- a/src/components/Nav/Header.tsx
+++ b/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)
--- a/src/components/Views/Feed.module.scss
+++ b/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;
    }
  }

--- a/src/components/Views/Feed.tsx
+++ b/src/components/Views/Feed.tsx
@ -78,115 +78,118 @@ export const FeedView = () => {
  return (
    <>
      <div class="wide-container feed">
-        <div class="row">
-          <div class={clsx('col-md-3', styles.feedNavigation)}>
+        <div class="shift-content">
+          <div class={clsx('left-col', styles.feedNavigation)}>
            <FeedSidebar authors={sortedAuthors()} />
          </div>

-          <div class="col-md-6">
-            <ul class="feed-filter">
-              <Show when={!!session()?.user?.slug}>
-                <li class="selected">
-                  <a href="/feed/my">{t('My feed')}</a>
+          <div class="row">
+            <div class="col-md-8">
+              <ul class="feed-filter">
+                <Show when={!!session()?.user?.slug}>
+                  <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)}>
-                {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
-              </For>
-            </Show>
-          </div>
+              <Show when={sortedArticles().length > 0}>
+                <For each={sortedArticles().slice(0, 4)}>
+                  {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
+                </For>

-          <aside class={clsx('col-md-3', styles.feedAside)}>
-            <section class={styles.asideSection}>
-              <h4>{t('Comments')}</h4>
-              <ul class={stylesArticle.comments}>
-                <For each={topComments().filter((item) => item.body)}>
-                  {(comment) => {
-                    return (
-                      <li class={styles.comment}>
-                        <div class={clsx('text-truncate', styles.commentBody)} innerHTML={comment.body} />
-                        <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>
+                <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>
-            </section>
+                    )}
+                  </For>
+                </ul>

-            <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>
-                <For each={topTopics().slice(0, 5)}>
-                  {(topic) => (
-                    <span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
-                      <a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
-                    </span>
-                  )}
-                </For>
+                <h4>{t('Comments')}</h4>
+                <ul class={stylesArticle.comments}>
+                  <For each={topComments().filter((item) => item.body)}>
+                    {(comment) => {
+                      return (
+                        <li class={styles.comment}>
+                          <div class={clsx('text-truncate', styles.commentBody)} innerHTML={comment.body} />
+                          <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)}>
-              <Icon name="pin" class={styles.icon} />
-              <ul class="nodash">
-                <li>
-                  <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>
+              <Show when={topTopics().length > 0}>
+                <section class={styles.asideSection}>
+                  <h4>{t('Topics')}</h4>
+                  <For each={topTopics().slice(0, 5)}>
+                    {(topic) => (
+                      <span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
+                        <a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
+                      </span>
+                    )}
+                  </For>
+                </section>
+              </Show>
+
+              <section class={clsx(styles.asideSection, styles.pinnedLinks)}>
+                <Icon name="pin" class={styles.icon} />
+                <ul class="nodash">
+                  <li>
+                    <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}>
--- a/src/components/_shared/CommentEditor/CommentEditor.tsx
+++ b/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} />
-            <Button value="Cancel" variant="secondary" onClick={clearEditor} />
+            <Show when={session()?.user?.slug}>
+              <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>
    </>
  )
 }
--- a/src/components/_shared/CommentEditor/styles/CommentEditor.module.scss
+++ b/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;
+    }
+  }
+}
--- a/src/styles/Feed.scss
+++ b/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;
--- a/src/styles/app.scss
+++ b/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;
    }

--- a/src/utils/meta.ts
+++ b/src/utils/meta.ts
@ -1,7 +1,9 @@
-export const getDescription = (body: string) => {
-  if (!body) return null
+export const getDescription = (body: string): string => {
+  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(' ') + '...'