- 0}>
-
-
- {(f: Author) => (
-
-
- )}
-
-
-
- 0}>
-
-
- {(f) => {
- if ('name' in f) {
- return (
-
-
+ 0 || props.following?.length > 0}>
+
diff --git a/src/components/Feed/Placeholder/Placeholder.module.scss b/src/components/Feed/Placeholder/Placeholder.module.scss
new file mode 100644
index 00000000..abd61262
--- /dev/null
+++ b/src/components/Feed/Placeholder/Placeholder.module.scss
@@ -0,0 +1,213 @@
+.placeholder {
+ border-radius: 2.2rem;
+ display: flex;
+ @include font-size(1.4rem);
+ font-weight: 500;
+ overflow: hidden;
+ position: relative;
+
+ h3 {
+ @include font-size(2.4rem);
+ }
+
+ button,
+ .button {
+ align-items: center;
+ border-radius: 1.2rem;
+ display: flex;
+ @include font-size(1.5rem);
+ gap: 0.6rem;
+ margin-top: 3rem;
+ padding: 1rem 2rem;
+ width: 100%;
+
+ .icon {
+ height: 2.4rem;
+ width: 2.4rem;
+ }
+ }
+}
+
+.placeholder--feed-mode {
+ aspect-ratio: 1 / 0.8;
+ flex-direction: column;
+ text-align: center;
+
+ &:after {
+ bottom: 0;
+ content: '';
+ height: 20%;
+ left: 0;
+ position: absolute;
+ width: 100%;
+
+ .placeholder--feed & {
+ background: linear-gradient(to top, #171032, rgba(23, 16, 50, 0));
+ }
+
+ .placeholder--feedCollaborations & {
+ background: linear-gradient(to top, #070709, rgba(7, 7, 9, 0));
+ }
+ }
+
+ .placeholderCover {
+ flex: 0 100%;
+ width: 100%;
+
+ img {
+ position: absolute;
+ }
+ }
+}
+
+.placeholder--profile-mode {
+ min-height: 28rem;
+
+ .placeholderCover {
+ flex: 0 45rem;
+ min-width: 45rem;
+ order: 2;
+ padding: 1.6rem;
+
+ img {
+ height: auto;
+ width: 100%;
+ }
+ }
+
+ .placeholderContent {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ @include font-size(2rem);
+ line-height: 1.2;
+ padding: 3rem;
+ }
+
+ h3 {
+ @include font-size(3.8rem);
+ }
+
+ .button {
+ background: var(--background-color-invert);
+ color: var(--default-color-invert);
+ bottom: 2rem;
+ position: absolute;
+ right: 2rem;
+ width: auto;
+
+ .icon {
+ filter: invert(1);
+ }
+ }
+}
+
+.placeholderCover {
+ position: relative;
+
+ img {
+ left: 0;
+ height: 100%;
+ object-fit: cover;
+ width: 100%;
+ }
+}
+
+.placeholderContent {
+ padding: 1.6rem;
+}
+
+.placeholder--feed,
+.placeholder--feedCollaborations {
+ color: var(--default-color-invert);
+
+ button,
+ .button {
+ background: var(--background-color);
+ color: var(--default-color);
+ }
+}
+
+.placeholder--feed {
+ background: #171032;
+
+ .placeholderCover {
+ img {
+ object-position: top;
+ }
+ }
+}
+
+.placeholder--feedCollaborations {
+ background: #070709;
+
+ .placeholderCover {
+ img {
+ object-position: bottom;
+ }
+ }
+}
+
+.placeholder--feedDiscussions {
+ background: #E9E9EE;
+
+ .placeholderCover {
+ padding: 2rem;
+ text-align: center;
+
+ img {
+ height: 90%;
+ mix-blend-mode: multiply;
+ object-fit: contain;
+ top: 10%;
+ }
+ }
+
+ button,
+ .button {
+ background: var(--background-color-invert);
+ color: var(--default-color-invert);
+ }
+}
+
+
+.placeholder--author {
+ background: #E58B72;
+}
+
+.placeholder--authorComments {
+ background: #E9E9EE;
+
+ .placeholderCover {
+ img {
+ mix-blend-mode: multiply;
+ }
+ }
+}
+
+.bottomLinks {
+ display: flex;
+ @include font-size(1.6rem);
+ gap: 4rem;
+
+ a {
+ border: none !important;
+ padding-left: 2.6rem;
+ position: relative;
+
+ &:hover {
+ .icon {
+ filter: invert(0);
+ }
+ }
+ }
+
+ .icon {
+ filter: invert(1);
+ height: 1.8rem;
+ left: 0;
+ position: absolute;
+ transition: filter 0.2s;
+ width: 1.8rem;
+ }
+}
diff --git a/src/components/Feed/Placeholder/Placeholder.tsx b/src/components/Feed/Placeholder/Placeholder.tsx
new file mode 100644
index 00000000..94fa247a
--- /dev/null
+++ b/src/components/Feed/Placeholder/Placeholder.tsx
@@ -0,0 +1,120 @@
+import { clsx } from 'clsx'
+import { For, Show } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
+import { Icon } from '../../_shared/Icon'
+import styles from './Placeholder.module.scss'
+
+export type PlaceholderProps = {
+ type: string
+ mode: 'feed' | 'profile'
+}
+
+export const Placeholder = (props: PlaceholderProps) => {
+ const { t } = useLocalize()
+ const { author } = useSession()
+
+ const data = {
+ feed: {
+ image: 'placeholder-feed.webp',
+ header: t('Feed settings'),
+ text: t('Placeholder feed'),
+ buttonLabel: author() ? t('Popular authors') : t('Create own feed'),
+ href: '/authors?by=followers',
+ },
+ feedCollaborations: {
+ image: 'placeholder-experts.webp',
+ header: t('Find collaborators'),
+ text: t('Placeholder feedCollaborations'),
+ buttonLabel: t('Find co-authors'),
+ href: '/authors?by=name',
+ },
+ feedDiscussions: {
+ image: 'placeholder-discussions.webp',
+ header: t('Participate in discussions'),
+ text: t('Placeholder feedDiscussions'),
+ buttonLabel: author() ? t('Current discussions') : t('Enter'),
+ href: '/feed?by=last_comment',
+ },
+ author: {
+ image: 'placeholder-join.webp',
+ header: t('Join our team of authors'),
+ text: t('Join our team of authors text'),
+ buttonLabel: t('Create post'),
+ href: '/create',
+ profileLinks: [
+ {
+ href: '/how-to-write-a-good-article',
+ label: t('How to write a good article'),
+ },
+ ],
+ },
+ authorComments: {
+ image: 'placeholder-discussions.webp',
+ header: t('Join discussions'),
+ text: t('Placeholder feedDiscussions'),
+ buttonLabel: t('Go to discussions'),
+ href: '/feed?by=last_comment',
+ profileLinks: [
+ {
+ href: '/about/discussion-rules',
+ label: t('Discussion rules'),
+ },
+ {
+ href: '/about/discussion-rules#ban',
+ label: t('Block rules'),
+ },
+ ],
+ },
+ }
+
+ return (
+
- {t('FollowersWithCount', {
- count: props.followers.length ?? 0,
- })}
-
-
-
- {t('FollowsWithCount', {
- count: props?.flatFollows.length ?? 0,
- })}
-
-
-
+
+
+ )
+}
diff --git a/src/components/Feed/Placeholder/index.ts b/src/components/Feed/Placeholder/index.ts
new file mode 100644
index 00000000..20413aa5
--- /dev/null
+++ b/src/components/Feed/Placeholder/index.ts
@@ -0,0 +1 @@
+export { Placeholder } from './Placeholder'
diff --git a/src/components/Feed/Sidebar/Sidebar.tsx b/src/components/Feed/Sidebar/Sidebar.tsx
index 313dd0b6..c6f794d4 100644
--- a/src/components/Feed/Sidebar/Sidebar.tsx
+++ b/src/components/Feed/Sidebar/Sidebar.tsx
@@ -83,32 +83,6 @@ export const Sidebar = () => {
-
+ 
+
+
+
+
+
+
+ {data[props.type].buttonLabel}
+
+ }
+ >
+
+ {data[props.type].buttonLabel}
+
+
+
+
+
+
+
+
+
+
+
+
+ {(link) => (
+
+
+
+ #{props.topic?.title}
- + + +
+
+
+
+
+
+
+
+
+
@@ -270,46 +275,56 @@ export const AuthorView = (props: Props) => {
+
- -
++ +
+
-
- 0}>
-
- {(article) => (
- handleShare(shared)}
- onInvite={() => showModal('inviteMembers')}
- article={article}
- settings={{ isFeedMode: true }}
- desktopCoverSize="M"
- />
- )}
-
+ 0}>
+
+ {(article) => (
+ handleShare(shared)}
+ onInvite={() => showModal('inviteMembers')}
+ article={article}
+ settings={{ isFeedMode: true }}
+ desktopCoverSize="M"
+ />
+ )}
+
- (props.followers || [])
+ const loadTopicFollowers = async () => {
+ const result = await apiClient.getTopicFollowers({ slug: props.topicSlug })
+ setFollowers(result)
+ }
const loadFavoriteTopArticles = async (topic: string) => {
const options: LoadShoutsOptions = {
@@ -81,13 +87,29 @@ export const TopicView = (props: Props) => {
setReactedTopMonthArticles(result)
}
+ const [topicAuthors, setTopicAuthors] = createSignal([])
+ const loadTopicAuthors = async () => {
+ const by: AuthorsBy = { topic: props.topicSlug }
+ const result = await apiClient.loadAuthorsBy({ by })
+ setTopicAuthors(result)
+ }
const loadRandom = () => {
loadFavoriteTopArticles(topic()?.slug)
loadReactedTopMonthArticles(topic()?.slug)
}
- createEffect(on(topic, loadRandom, { defer: true }))
+ createEffect(
+ on(
+ () => topic()?.id,
+ (_) => {
+ loadTopicFollowers()
+ loadTopicAuthors()
+ loadRandom()
+ },
+ { defer: true },
+ ),
+ )
const title = createMemo(
() =>
@@ -152,7 +174,7 @@ export const TopicView = (props: Props) => {
-
-
-
- - {t('Recent')} - - {/*
- */} - {/* {t('Most read')}*/} - {/* */} -
- - changeSearchParams({ by: 'likes' })}> - {t('Top rated')} - - -
- - changeSearchParams({ by: 'last_comment' })}> - {t('Most commented')} - - -
-
+
-
+
- -
+
- + {t('Recent')} + + {/*
- */} + {/* {t('Most read')}*/} + {/* */} +
- + changeSearchParams({ by: 'likes' })}> + {t('Top rated')} + + +
- + changeSearchParams({ by: 'last_comment' })}> + {t('Most commented')} + + +
+
+ changeSearchParams({ period: period.value })}
+ />
+
changeSearchParams({ period: period.value })}
+ onChange={(visibility: VisibilityItem) =>
+ changeSearchParams({ visibility: visibility.value })
+ }
/>
-
-
- changeSearchParams({ visibility: visibility.value })
- }
- />
+
-
+ {(article) => (
+
+
-
- {(article) => (
-
-
-
-
-
+
diff --git a/src/components/Views/Topic.tsx b/src/components/Views/Topic.tsx
index 08f4f57f..7389b3a5 100644
--- a/src/components/Views/Topic.tsx
+++ b/src/components/Views/Topic.tsx
@@ -1,4 +1,4 @@
-import { LoadShoutsOptions, Shout, Topic } from '../../graphql/schema/core.gen'
+import { Author, AuthorsBy, LoadShoutsOptions, Shout, Topic } from '../../graphql/schema/core.gen'
import { clsx } from 'clsx'
import { For, Show, createEffect, createMemo, createSignal, on, onMount } from 'solid-js'
@@ -33,6 +33,7 @@ interface Props {
topic: Topic
shouts: Shout[]
topicSlug: string
+ followers?: Author[]
}
export const PRERENDERED_ARTICLES_COUNT = 28
@@ -56,6 +57,11 @@ export const TopicView = (props: Props) => {
setTopic(topics[props.topicSlug])
}
})
+ const [followers, setFollowers] = createSignal
-
+ {t('Popular authors')}
- - {t('All authors')} -
+
-
+
+
+ {t('Popular authors')}
+ + {t('All authors')} +-
+
-
+
+
+ )}
+
-
-
-
-
-
- )}
-
- -
++ +
+
diff --git a/src/components/_shared/Subscribers/Subscribers.module.scss b/src/components/_shared/Subscribers/Subscribers.module.scss
new file mode 100644
index 00000000..84494bd3
--- /dev/null
+++ b/src/components/_shared/Subscribers/Subscribers.module.scss
@@ -0,0 +1,50 @@
+.subscribers {
+ align-items: center;
+ cursor: pointer;
+ display: inline-flex;
+ margin: 0 1rem 0 0;
+ vertical-align: top;
+ border-bottom: unset !important;
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ .subscribersItem {
+ position: relative;
+
+ &:nth-child(1) {
+ z-index: 2;
+ }
+
+ &:nth-child(2) {
+ z-index: 1;
+ }
+
+ &:not(:last-child) {
+ margin-right: -4px;
+ box-shadow: 0 0 0 1px var(--background-color);
+ }
+ }
+
+ .subscribersCounter {
+ font-weight: 500;
+ }
+
+ &:hover {
+ background: none !important;
+
+ .subscribersCounter {
+ background: var(--background-color-invert);
+ }
+ }
+}
+
+.subscribersList {
+ display: flex;
+ margin-right: 0.6rem;
+}
diff --git a/src/components/_shared/Subscribers/Subscribers.tsx b/src/components/_shared/Subscribers/Subscribers.tsx
new file mode 100644
index 00000000..899f5565
--- /dev/null
+++ b/src/components/_shared/Subscribers/Subscribers.tsx
@@ -0,0 +1,67 @@
+import { For, Show } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
+
+import { Author, Topic } from '../../../graphql/schema/core.gen'
+import { Userpic } from '../../Author/Userpic'
+
+import styles from './Subscribers.module.scss'
+
+type Props = {
+ followers?: Author[]
+ followersAmount?: number
+ following?: Array
+ followingAmount?: number
+}
+
+export const Subscribers = (props: Props) => {
+ const { t } = useLocalize()
+
+ return (
+ <>
+
+ 0}>
+
+ 0}>
+
+ => {
+ const response = await publicGraphQLClient.query(topicFollowers, { slug }).toPromise()
+ return response.data.get_topic_followers
+ },
+
getAuthorFollows: async (params: {
slug?: string
author_id?: number
diff --git a/src/graphql/query/core/topic-followers.ts b/src/graphql/query/core/topic-followers.ts
new file mode 100644
index 00000000..1ec60ead
--- /dev/null
+++ b/src/graphql/query/core/topic-followers.ts
@@ -0,0 +1,25 @@
+import { gql } from '@urql/core'
+
+export default gql`
+ query TopicFollowersQuery($slug: String) {
+ get_topic_followers(slug: $slug) {
+ id
+ slug
+ name
+ bio
+ about
+ pic
+ # communities
+ links
+ created_at
+ last_seen
+ stat {
+ shouts
+ authors
+ followers
+ rating
+ comments
+ }
+ }
+ }
+`
diff --git a/src/pages/about/discussionRules.page.tsx b/src/pages/about/discussionRules.page.tsx
index 917beb61..899dfd5e 100644
--- a/src/pages/about/discussionRules.page.tsx
+++ b/src/pages/about/discussionRules.page.tsx
@@ -40,7 +40,7 @@ export const DiscussionRulesPage = () => {
людей рождается истина.
-
+
+ {(f) =>
+
+
+ {t('SubscriberWithCount', {
+ count: props.followersAmount || props.followers.length || 0,
+ })}
+
+
+
+
+
+
+ {(f) => {
+ if ('name' in f) {
+ return (
+
+
+
+ {t('SubscriptionWithCount', {
+ count: props.followingAmount || props.following?.length || 0,
+ })}
+
+
+
+ )
+}
diff --git a/src/components/_shared/Subscribers/index.ts b/src/components/_shared/Subscribers/index.ts
new file mode 100644
index 00000000..cfa0eef9
--- /dev/null
+++ b/src/components/_shared/Subscribers/index.ts
@@ -0,0 +1 @@
+export { Subscribers } from './Subscribers'
diff --git a/src/graphql/client/core.ts b/src/graphql/client/core.ts
index bbfa00f4..cb9f4719 100644
--- a/src/graphql/client/core.ts
+++ b/src/graphql/client/core.ts
@@ -5,6 +5,7 @@ import type {
LoadShoutsOptions,
MutationDelete_ShoutArgs,
ProfileInput,
+ QueryGet_Topic_FollowersArgs,
QueryLoad_Authors_ByArgs,
QueryLoad_Shouts_Random_TopArgs,
QueryLoad_Shouts_SearchArgs,
@@ -44,6 +45,7 @@ import authorsAll from '../query/core/authors-all'
import authorsLoadBy from '../query/core/authors-load-by'
import reactionsLoadBy from '../query/core/reactions-load-by'
import topicBySlug from '../query/core/topic-by-slug'
+import topicFollowers from '../query/core/topic-followers'
import topicsAll from '../query/core/topics-all'
import topicsRandomQuery from '../query/core/topics-random'
@@ -129,6 +131,11 @@ export const apiClient = {
return response.data.get_author_followers
},
+ getTopicFollowers: async ({ slug }: QueryGet_Topic_FollowersArgs): PromiseЗа что можно получить дырку в карме и выиграть бан в сообществе
+За что можно получить дырку в карме и выиграть бан в сообществе
-
diff --git a/src/pages/feed.page.tsx b/src/pages/feed.page.tsx index 92f1c5c8..ac0e4c45 100644 --- a/src/pages/feed.page.tsx +++ b/src/pages/feed.page.tsx @@ -1,6 +1,5 @@ -import { Match, Switch, createEffect, on, onCleanup } from 'solid-js' +import { createEffect, on, onCleanup } from 'solid-js' -import { AuthGuard } from '../components/AuthGuard' import { Feed } from '../components/Views/Feed' import { PageLayout } from '../components/_shared/PageLayout' import { useLocalize } from '../context/localize' @@ -32,16 +31,7 @@ export const FeedPage = () => { return (
- }> - - -- - - +- --