discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Merge branch 'feedback' of gitlab.com:discoursio/discoursio-webapp into feedback

Browse Source
This commit is contained in:
tonyrewin 2023-01-31 20:40:12 +03:00
commit b70e80dacd
14 changed files with 11592 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -34,7 +34,12 @@
"vercel-build": "astro build"
},
"dependencies": {
"@aws-sdk/client-s3": "^3.216.0",
"@aws-sdk/lib-storage": "^3.223.0",
"@connorskees/grass": "^0.12.0",
"@solid-primitives/share": "^2.0.1",
"astro-seo-meta": "^2.0.0",
"formidable": "^2.1.1",
"mailgun.js": "^8.0.6"
},
"devDependencies": {

4
src/components/Article/FullArticle.tsx
View File

@ -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} />}
/>

9
src/components/Article/SharePopup.tsx
View File

@ -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">

10
src/components/Feed/Card.tsx
View File

@ -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)} />

9
src/components/Feed/Sidebar.module.scss
View File

@ -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 {

5
src/components/Feed/Sidebar.tsx
View File

@ -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>
)
}

4
src/components/Nav/Header.module.scss
View File

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

4
src/components/Nav/Header.tsx
View File

@ -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)

7
src/components/Views/Feed.module.scss
View File

@ -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;
}
}

163
src/components/Views/Feed.tsx
View File

@ -78,99 +78,102 @@ 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>
<For each={topComments()}>
{/*FIXME: different components/better comment props*/}
{(comment) => <CommentCard comment={comment} reactions={[]} compact={true} />}
</For>
</section>
<div class={stylesBeside.besideColumnTitle}>
<h4>{t('Popular authors')}</h4>
<a href="/authors">
{t('All authors')}
<Icon name="arrow-right" class={stylesBeside.icon} />
</a>
</div>
<Show when={topTopics().length > 0}>
<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>
<aside class={clsx('col-md-3', 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>
)}
<h4>{t('Comments')}</h4>
<For each={topComments()}>
{/*FIXME: different components/better comment props*/}
{(comment) => <CommentCard comment={comment} reactions={[]} compact={true} />}
</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>
<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}>

4
src/styles/Feed.scss
View File

@ -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;

2
src/styles/app.scss
View File

@ -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;
}

8
src/utils/meta.ts
View File

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

11461
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff