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

Merge branch 'create-shout-2' into 'dev'

Browse Source 
Create shout new flow WIP

See merge request discoursio/discoursio-webapp!59
This commit is contained in:
Igor 2023-05-03 16:46:26 +00:00
commit 821fb428de
106 changed files with 2098 additions and 6735 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -68,7 +68,7 @@ module.exports = {
'unicorn/prefer-dom-node-append': 'off', // FIXME
'unicorn/prefer-top-level-await': 'warn',
'unicorn/consistent-function-scoping': 'warn',
'sonarjs/no-duplicate-string': 'warn',
'sonarjs/no-duplicate-string': ['warn', 5],
// Promise
// 'promise/catch-or-return': 'off', // Should be enabled

14
.stylelintrc
View File

@ -19,7 +19,19 @@
],
"scss/dollar-variable-pattern": ["^[a-z][a-zA-Z]+$", {
"ignore": "global"
}]
}],
"selector-pseudo-class-no-unknown": [
true,
{
"ignorePseudoClasses": ["global", "export"]
}
],
"property-no-vendor-prefix": [
true,
{
"ignoreProperties": ["box-decoration-break"]
}
]
},
"defaultSeverity": "warning"
}

31
.stylelintrc.bak Normal file
View File

@ -0,0 +1,31 @@
{
"extends": [
"stylelint-config-standard-scss"
],
"plugins": [
"stylelint-order",
"stylelint-scss"
],
"rules": {
"selector-class-pattern": null,
"no-descending-specificity": null,
"scss/function-no-unknown": null,
"scss/no-global-function-names": null,
"function-url-quotes": null,
"font-family-no-missing-generic-family-keyword": null,
"order/order": [
"custom-properties",
"declarations"
],
"scss/dollar-variable-pattern": ["^[a-z][a-zA-Z]+$", {
"ignore": "global"
}],
"selector-pseudo-class-no-unknown": [
true,
{
"ignorePseudoClasses": ["global", "export"]
}
]
},
"defaultSeverity": "warning"
}

4
codegen.yml
View File

@ -1,6 +1,6 @@
overwrite: true
#schema: 'http://localhost:8080'
schema: 'https://v2.discours.io'
schema: 'http://127.0.0.1:8080'
#schema: 'https://v2.discours.io'
generates:
src/graphql/introspec.gen.ts:
plugins:

7254
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

132
package.json
View File

@ -32,69 +32,68 @@
"@aws-sdk/abort-controller": "3.303.0",
"@aws-sdk/client-s3": "3.303.0",
"@aws-sdk/lib-storage": "3.303.0",
"@hocuspocus/provider": "2.0.1",
"@hocuspocus/provider": "2.0.6",
"formidable": "2.1.1",
"html-to-json-parser": "1.1.0",
"i18next": "22.4.13",
"i18next": "22.4.15",
"mailgun.js": "8.2.1",
"node-fetch": "3.3.1"
},
"devDependencies": {
"@babel/core": "7.21.3",
"@babel/core": "7.21.8",
"@graphql-codegen/cli": "3.2.2",
"@graphql-codegen/typescript": "3.0.2",
"@graphql-codegen/typescript-operations": "3.0.2",
"@graphql-codegen/typescript": "3.0.4",
"@graphql-codegen/typescript-operations": "3.0.4",
"@graphql-codegen/typescript-urql": "3.7.3",
"@graphql-codegen/urql-introspection": "2.2.1",
"@graphql-tools/url-loader": "7.17.14",
"@graphql-tools/url-loader": "7.17.18",
"@graphql-typed-document-node/core": "3.2.0",
"@nanostores/router": "0.8.3",
"@nanostores/solid": "0.3.2",
"@popperjs/core": "2.11.7",
"@solid-primitives/memo": "1.2.3",
"@solid-primitives/memo": "1.2.4",
"@solid-primitives/share": "2.0.4",
"@solid-primitives/storage": "1.3.8",
"@solid-primitives/storage": "1.3.9",
"@solid-primitives/upload": "0.0.110",
"@solidjs/meta": "0.28.2",
"@thisbeyond/solid-select": "0.13.0",
"@tiptap/core": "2.0.1",
"@tiptap/extension-blockquote": "2.0.1",
"@tiptap/extension-bold": "2.0.1",
"@tiptap/extension-bubble-menu": "2.0.1",
"@tiptap/extension-bullet-list": "2.0.1",
"@tiptap/extension-character-count": "2.0.1",
"@tiptap/extension-collaboration": "2.0.1",
"@tiptap/extension-collaboration-cursor": "2.0.1",
"@tiptap/extension-document": "2.0.1",
"@tiptap/extension-dropcursor": "2.0.1",
"@tiptap/extension-floating-menu": "2.0.1",
"@tiptap/extension-focus": "2.0.1",
"@tiptap/extension-gapcursor": "2.0.1",
"@tiptap/extension-hard-break": "2.0.1",
"@tiptap/extension-heading": "2.0.1",
"@tiptap/extension-highlight": "2.0.1",
"@tiptap/extension-history": "2.0.1",
"@tiptap/extension-horizontal-rule": "2.0.1",
"@tiptap/extension-image": "2.0.1",
"@tiptap/extension-italic": "2.0.1",
"@tiptap/extension-link": "2.0.1",
"@tiptap/extension-list-item": "2.0.1",
"@tiptap/extension-ordered-list": "2.0.1",
"@tiptap/extension-paragraph": "2.0.1",
"@tiptap/extension-placeholder": "2.0.1",
"@tiptap/extension-strike": "2.0.1",
"@tiptap/extension-text": "2.0.1",
"@tiptap/extension-underline": "2.0.1",
"@tiptap/extension-youtube": "2.0.1",
"@tiptap/core": "2.0.3",
"@tiptap/extension-blockquote": "2.0.3",
"@tiptap/extension-bold": "2.0.3",
"@tiptap/extension-bubble-menu": "2.0.3",
"@tiptap/extension-bullet-list": "2.0.3",
"@tiptap/extension-character-count": "2.0.3",
"@tiptap/extension-collaboration": "2.0.3",
"@tiptap/extension-collaboration-cursor": "2.0.3",
"@tiptap/extension-document": "2.0.3",
"@tiptap/extension-dropcursor": "2.0.3",
"@tiptap/extension-floating-menu": "2.0.3",
"@tiptap/extension-focus": "2.0.3",
"@tiptap/extension-gapcursor": "2.0.3",
"@tiptap/extension-hard-break": "2.0.3",
"@tiptap/extension-heading": "2.0.3",
"@tiptap/extension-highlight": "2.0.3",
"@tiptap/extension-history": "2.0.3",
"@tiptap/extension-horizontal-rule": "2.0.3",
"@tiptap/extension-image": "2.0.3",
"@tiptap/extension-italic": "2.0.3",
"@tiptap/extension-link": "2.0.3",
"@tiptap/extension-list-item": "2.0.3",
"@tiptap/extension-ordered-list": "2.0.3",
"@tiptap/extension-paragraph": "2.0.3",
"@tiptap/extension-placeholder": "2.0.3",
"@tiptap/extension-strike": "2.0.3",
"@tiptap/extension-text": "2.0.3",
"@tiptap/extension-underline": "2.0.3",
"@tiptap/extension-youtube": "2.0.3",
"@types/express": "4.17.17",
"@types/node": "18.15.11",
"@types/node": "18.16.3",
"@types/uuid": "9.0.1",
"@typescript-eslint/eslint-plugin": "5.57.0",
"@typescript-eslint/parser": "5.57.0",
"@typescript-eslint/eslint-plugin": "5.59.2",
"@typescript-eslint/parser": "5.59.2",
"@urql/core": "3.2.2",
"@urql/devtools": "2.0.3",
"@urql/exchange-graphcache": "5.2.0",
"babel-preset-solid": "1.7.0",
"babel-preset-solid": "1.7.4",
"bcryptjs": "2.4.3",
"bootstrap": "5.2.3",
"clsx": "1.2.1",
@ -102,27 +101,27 @@
"cookie-signature": "1.2.1",
"cosmiconfig-toml-loader": "1.0.0",
"cross-env": "7.0.3",
"eslint": "8.37.0",
"eslint": "8.39.0",
"eslint-config-stylelint": "18.0.0",
"eslint-import-resolver-typescript": "3.5.4",
"eslint-import-resolver-typescript": "3.5.5",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-promise": "6.1.1",
"eslint-plugin-solid": "0.12.0",
"eslint-plugin-solid": "0.12.1",
"eslint-plugin-sonarjs": "0.19.0",
"eslint-plugin-unicorn": "46.0.0",
"graphql": "16.6.0",
"graphql-tag": "2.12.6",
"graphql-ws": "5.12.0",
"graphql-ws": "5.12.1",
"hast-util-select": "5.0.5",
"html-to-json-parser": "1.1.0",
"husky": "8.0.3",
"hygen": "6.2.11",
"i18next-http-backend": "2.2.0",
"idb": "7.1.1",
"install": "0.13.0",
"jest": "29.5.0",
"js-cookie": "3.0.1",
"lint-staged": "13.2.0",
"js-cookie": "3.0.5",
"lint-staged": "13.2.2",
"loglevel": "1.8.1",
"loglevel-plugin-prefix": "0.8.4",
"markdown-it": "13.0.1",
@ -131,9 +130,8 @@
"markdown-it-mark": "3.0.1",
"markdown-it-replace-link": "1.2.0",
"nanostores": "0.7.4",
"npm": "9.6.3",
"orderedmap": "2.1.0",
"prettier": "2.8.7",
"prettier": "2.8.8",
"prettier-eslint": "15.0.1",
"prosemirror-commands": "1.5.1",
"prosemirror-dropcursor": "1.8.0",
@ -148,43 +146,43 @@
"prosemirror-schema-list": "1.2.2",
"prosemirror-state": "1.4.2",
"prosemirror-view": "1.30.2",
"rollup": "3.20.2",
"rollup": "3.21.3",
"rollup-plugin-visualizer": "5.9.0",
"sass": "1.60.0",
"solid-js": "1.7.0",
"solid-tiptap": "0.5.1",
"sass": "1.62.1",
"solid-js": "1.7.3",
"solid-tiptap": "0.6.0",
"solid-transition-group": "0.2.2",
"sort-package-json": "2.4.1",
"stylelint": "15.3.0",
"stylelint-config-standard-scss": "7.0.1",
"stylelint": "15.6.1",
"stylelint-config-standard-scss": "9.0.0",
"stylelint-order": "6.0.3",
"stylelint-scss": "4.6.0",
"stylelint-scss": "5.0.0",
"swiper": "8.4.7",
"ts-node": "10.9.1",
"typescript": "5.0.3",
"typescript": "5.0.4",
"undici": "5.21.0",
"uniqolor": "1.1.0",
"unique-names-generator": "4.7.1",
"uuid": "9.0.0",
"vite": "4.2.1",
"vite-plugin-sass-dts": "1.3.2",
"vite-plugin-solid": "2.6.1",
"vite-plugin-ssr": "0.4.108",
"vite": "4.3.4",
"vite-plugin-sass-dts": "1.3.4",
"vite-plugin-solid": "2.7.0",
"vite-plugin-ssr": "0.4.121",
"wonka": "6.3.1",
"ws": "8.13.0",
"y-indexeddb": "9.0.10",
"y-prosemirror": "1.2.0",
"y-prosemirror": "1.2.1",
"y-protocols": "1.0.5",
"y-webrtc": "10.2.5",
"y-websocket": "1.5.0",
"yjs": "13.5.51"
"yjs": "13.6.0"
},
"overrides": {
"@tiptap/extension-collaboration": {
"y-prosemirror": "1.2.0"
"y-prosemirror": "1.2.1"
},
"@tiptap/extension-collaboration-cursor": {
"y-prosemirror": "1.2.0"
"y-prosemirror": "1.2.1"
}
}
}

6
public/locales/ru/translation.json
View File

@ -67,8 +67,8 @@
"Enter your new password": "Введите новый пароль",
"Error": "Ошибка",
"Everything is ok, please give us your email address": "Ничего страшного, просто укажите свою почту, чтобы получить ссылку для сброса пароля.",
"FAQ": "Советы и предложения",
"Favorite": "Избранное",
"FAQ": "Советы и предложения",
"Favorite topics": "Избранные темы",
"Feed settings": "Настройки ленты",
"Feedback": "Обратная связь",
@ -102,8 +102,8 @@
"Independant magazine with an open horizontal cooperation about culture, science and society": "Независимый журнал с открытой горизонтальной редакцией о культуре, науке и обществе",
"Introduce": "Представление",
"Invalid email": "Проверьте правильность ввода почты",
"Invalid url format": "Неверный формат ссылки",
"Invite co-authors": "Пригласить соавторов",
"Invalid url format": "Неверный формат ссылки",
"Invite experts": "Пригласить экспертов",
"Invite to collab": "Пригласить к участию",
"It does not look like url": "Это не похоже на ссылку",
@ -154,11 +154,13 @@
"Please, confirm email": "Пожалуйста, подтвердите электронную почту",
"Popular": "Популярное",
"Popular authors": "Популярные авторы",
"Preview": "Предпросмотр",
"Principles": "Принципы сообщества",
"Profile": "Профиль",
"Profile settings": "Настройки профиля",
"Profile successfully saved": "Профиль успешно сохранён",
"Publications": "Публикации",
"Publication settings": "Настройки публикации",
"Publish": "Опубликовать",
"Quit": "Выйти",
"Quotes": "Цитаты",

6
src/components/App.tsx
View File

@ -27,6 +27,7 @@ import { ProjectsPage } from '../pages/about/projects.page'
import { TermsOfUsePage } from '../pages/about/termsOfUse.page'
import { ThanksPage } from '../pages/about/thanks.page'
import { CreatePage } from '../pages/create.page'
import { EditPage } from '../pages/edit.page'
import { ConnectPage } from '../pages/connect.page'
import { InboxPage } from '../pages/inbox.page'
import { LayoutShoutsPage } from '../pages/layoutShouts.page'
@ -34,6 +35,7 @@ import { SessionProvider } from '../context/session'
import { ProfileSettingsPage } from '../pages/profile/profileSettings.page'
import { ProfileSecurityPage } from '../pages/profile/profileSecurity.page'
import { ProfileSubscriptionsPage } from '../pages/profile/profileSubscriptions.page'
import { DraftsPage } from '../pages/drafts.page'
import { SnackbarProvider } from '../context/snackbar'
import { LocalizeProvider } from '../context/localize'
import { EditorProvider } from '../context/editor'
@ -46,7 +48,9 @@ const pagesMap: Record<keyof typeof ROUTES, Component<PageProps>> = {
expo: LayoutShoutsPage,
connect: ConnectPage,
create: CreatePage,
createSettings: CreatePage,
edit: EditPage,
editSettings: EditPage,
drafts: DraftsPage,
home: HomePage,
topics: AllTopicsPage,
topic: TopicPage,

9
src/components/Article/Article.module.scss
View File

@ -101,9 +101,9 @@ img {
}
.writeComment {
border: 2px solid #f6f6f6;
@include font-size(1.7rem);
border: 2px solid #f6f6f6;
outline: none;
padding: 0.2em 0.4em;
width: 100%;
@ -114,9 +114,9 @@ img {
}
.commentWarning {
background: #f6f6f6;
@include font-size(2.2rem);
background: #f6f6f6;
margin-bottom: 1em;
padding: 2.4rem 1.8rem;
}
@ -173,6 +173,7 @@ img {
a {
border: none;
text-decoration: none;
&:hover {
background: unset;
color: #000;
@ -185,9 +186,9 @@ img {
}
.shoutStatsItemInner {
cursor: pointer;
margin: -0.3em -0.3em 0;
padding: 0.3em;
cursor: pointer;
.icon {
margin-right: 0;
@ -199,7 +200,7 @@ img {
&:hover {
background: #000;
cursor: pointer;
img {
filter: invert(1);
}

2
src/components/Article/AudioPlayer.tsx
View File

@ -14,7 +14,7 @@ export default (props: { shout: Shout }) => {
return []
})
let audioRef: HTMLAudioElement
const [currentTrack, setCurrentTrack] = createSignal(media()[0])
const [currentTrack] = createSignal(media()[0])
const [paused, setPaused] = createSignal(true)
const togglePlayPause = () => setPaused(!paused())
const playMedia = (m: MediaItem) => {

4
src/components/Article/Comment.module.scss
View File

@ -7,7 +7,7 @@
&.isNew {
border-radius: 6px;
background: rgba(38, 56, 217, 0.05);
background: rgb(38 56 217 / 5%);
}
@include media-breakpoint-down(sm) {
@ -178,6 +178,7 @@
font-size: 1.2rem;
margin-bottom: 4px;
color: rgb(0 0 0 / 30%);
@include font-size(1.2rem);
.date {
@ -189,6 +190,7 @@
margin-right: 0.5rem;
vertical-align: middle;
}
@include media-breakpoint-down(md) {
margin-left: 1rem;
}

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

@ -1,7 +1,7 @@
import styles from './Comment.module.scss'
import { Icon } from '../_shared/Icon'
import { AuthorCard } from '../Author/Card'
import { Show, createMemo, createSignal, For, lazy, Suspense, createEffect } from 'solid-js'
import { AuthorCard } from '../Author/AuthorCard'
import { Show, createMemo, createSignal, For, lazy, Suspense } from 'solid-js'
import { clsx } from 'clsx'
import type { Author, Reaction } from '../../graphql/types.gen'
import MD from './MD'

3
src/components/Article/CommentRatingControl.module.scss
View File

@ -9,6 +9,7 @@
font-size: 1.2rem;
cursor: pointer;
transition: opacity 0.3s ease-in-out;
&:hover {
opacity: 0.5;
}
@ -31,6 +32,7 @@
.commentRatingControlUp {
border-bottom: 8px solid rgb(0 0 0 / 40%);
&.voted {
border-bottom-color: #2bb452;
}
@ -38,6 +40,7 @@
.commentRatingControlDown {
border-top: 8px solid rgb(0 0 0 / 40%);
&.voted {
border-top-color: #d00820;
}

3
src/components/Article/CommentsTree.tsx
View File

@ -122,6 +122,7 @@ export const CommentsTree = (props: Props) => {
onClick={() => {
setCommentsOrder('newOnly')
}}
class={styles.commentsViewSwitcherButton}
/>
</li>
</Show>
@ -132,6 +133,7 @@ export const CommentsTree = (props: Props) => {
onClick={() => {
setCommentsOrder('createdAt')
}}
class={styles.commentsViewSwitcherButton}
/>
</li>
<li classList={{ selected: commentsOrder() === 'rating' }}>
@ -141,6 +143,7 @@ export const CommentsTree = (props: Props) => {
onClick={() => {
setCommentsOrder('rating')
}}
class={styles.commentsViewSwitcherButton}
/>
</li>
</ul>

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

@ -1,6 +1,6 @@
import { capitalize, formatDate } from '../../utils'
import { Icon } from '../_shared/Icon'
import { AuthorCard } from '../Author/Card'
import { AuthorCard } from '../Author/AuthorCard'
import { createEffect, createMemo, createSignal, For, Match, onMount, Show, Switch } from 'solid-js'
import type { Author, Shout } from '../../graphql/types.gen'
import MD from './MD'
@ -77,7 +77,8 @@ export const FullArticle = (props: ArticleProps) => {
const canEdit = () => props.article.authors?.some((a) => a.slug === user()?.slug)
const bookmark = (ev) => {
// eslint-disable-next-line unicorn/consistent-function-scoping
const handleBookmarkButtonClick = (ev) => {
// TODO: implement bookmark clicked
ev.preventDefault()
}
@ -97,14 +98,14 @@ export const FullArticle = (props: ArticleProps) => {
behavior: 'smooth'
})
}
const { searchParams } = useRouter()
const { searchParams, changeSearchParam } = useRouter()
createEffect(() => {
if (props.scrollToComments) {
scrollToComments()
}
})
const { changeSearchParam } = useRouter()
createEffect(() => {
if (searchParams()?.scrollTo === 'comments' && commentsRef.current) {
scrollToComments()
@ -228,15 +229,17 @@ export const FullArticle = (props: ArticleProps) => {
/>
</div>
<div class={styles.shoutStatsItem} onClick={bookmark}>
<div class={styles.shoutStatsItem} onClick={handleBookmarkButtonClick}>
<div class={styles.shoutStatsItemInner}>
<Icon name="bookmark" class={styles.icon} />
</div>
</div>
<Show when={canEdit()}>
<div class={styles.shoutStatsItem}>
<a href="/edit" class={styles.shoutStatsItemInner}>
<a
href={getPagePath(router, 'edit', { shoutSlug: props.article.slug })}
class={styles.shoutStatsItemInner}
>
<Icon name="edit" class={clsx(styles.icon, styles.iconEdit)} />
{t('Edit')}
</a>

2
src/components/Article/ShoutRatingControl.tsx
View File

@ -1,6 +1,6 @@
import styles from './ShoutRatingControl.module.scss'
import { clsx } from 'clsx'
import { createMemo, For } from 'solid-js'
import { createMemo } from 'solid-js'
import { ReactionKind, Shout } from '../../graphql/types.gen'
import { loadShout } from '../../stores/zine/articles'
import { useSession } from '../../context/session'

7
src/components/Author/Card.module.scss → src/components/Author/AuthorCard.module.scss
View File

@ -169,12 +169,12 @@
}
.buttonWrite {
@include font-size(1.5rem);
color: #000;
display: inline-flex;
transition: background-color 0.3s, color 0.3s;
@include font-size(1.5rem);
&:hover {
background: #000;
color: #fff;
@ -208,8 +208,9 @@
}
.authorAbout {
color: #696969;
@include font-size(1.7rem);
color: #696969;
}
.authorSubscribe {

4
src/components/Author/Card.tsx → src/components/Author/AuthorCard.tsx
View File

@ -1,7 +1,7 @@
import type { Author, User } from '../../graphql/types.gen'
import type { Author } from '../../graphql/types.gen'
import Userpic from './Userpic'
import { Icon } from '../_shared/Icon'
import styles from './Card.module.scss'
import styles from './AuthorCard.module.scss'
import { createMemo, createSignal, For, Show } from 'solid-js'
import { translit } from '../../utils/ru2en'
import { follow, unfollow } from '../../stores/zine/common'

1
src/components/Author/AuthorRatingControl.tsx
View File

@ -11,6 +11,7 @@ export const AuthorRatingControl = (props: AuthorRatingControlProps) => {
const isUpvoted = false
const isDownvoted = false
// eslint-disable-next-line unicorn/consistent-function-scoping
const handleRatingChange = (isUpvote: boolean) => {
console.log('handleRatingChange', { isUpvote })
}

2
src/components/Author/Full.tsx
View File

@ -1,5 +1,5 @@
import type { Author } from '../../graphql/types.gen'
import { AuthorCard } from './Card'
import { AuthorCard } from './AuthorCard'
import './Full.scss'
export const AuthorFull = (props: { author: Author }) => {

4
src/components/Author/Userpic.tsx
View File

@ -1,10 +1,10 @@
import { Show } from 'solid-js'
import type { Author } from '../../graphql/types.gen'
import type { Author, User } from '../../graphql/types.gen'
import styles from './Userpic.module.scss'
import { clsx } from 'clsx'
interface UserpicProps {
user: Author
user: Author | User
hasLink?: boolean
isBig?: boolean
class?: string

8
src/components/Discours/Footer.module.scss
View File

@ -1,8 +1,8 @@
.discoursFooter {
background: #000;
color: rgb(255 255 255 / 64%);
@include font-size(1.7rem);
background: #000;
color: rgb(255 255 255 / 64%);
padding: 2.4rem 0 4.2rem;
a {
@ -48,10 +48,10 @@
}
.footerCopyright {
border-top: 5px solid #404040;
color: #696969;
@include font-size(1.5rem);
border-top: 5px solid #404040;
color: #696969;
padding-top: 1.6rem;
a {

4
src/components/Discours/Hero.scss
View File

@ -1,8 +1,8 @@
.about-discours {
background: #000;
color: #fff;
@include font-size(1.7rem);
background: #000;
color: #fff;
font-weight: 400;
margin-bottom: 6.4rem;
padding: 3.6rem 0;

1
src/components/Discours/ProfileSettingsNavigation.module.scss
View File

@ -1,5 +1,6 @@
.navigationHeader {
@include font-size(1.8rem);
font-weight: bold;
margin-top: 1.1em;
}

8
src/components/Discours/Subscribe.module.scss
View File

@ -11,13 +11,13 @@
}
input {
@include font-size(2rem);
background: none;
border: none;
border-bottom: 1px solid;
color: #fff;
font-family: inherit;
@include font-size(2rem);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
@ -30,13 +30,13 @@
}
a {
@include font-size(1.5rem);
align-items: center;
background: #fff;
border: none;
color: #000;
display: flex;
@include font-size(1.5rem);
padding: 0 0.5em;
}

28
src/components/Editor/Editor.tsx
View File

@ -29,6 +29,7 @@ import { TrailingNode } from './extensions/TrailingNode'
import { EditorBubbleMenu } from './EditorBubbleMenu/EditorBubbleMenu'
import { EditorFloatingMenu } from './EditorFloatingMenu'
import * as Y from 'yjs'
// import { WebrtcProvider } from 'y-webrtc'
import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor'
import { Collaboration } from '@tiptap/extension-collaboration'
import './Prosemirror.scss'
@ -40,7 +41,7 @@ import { Embed } from './extensions/embed'
import { useEditorContext } from '../../context/editor'
type EditorProps = {
shoutId: number
shoutSlug: string
initialContent?: string
onChange: (text: string) => void
}
@ -53,7 +54,7 @@ export const Editor = (props: EditorProps) => {
const { t } = useLocalize()
const { user } = useSession()
const docName = `shout-${props.shoutId}`
const docName = `shout-${props.shoutSlug}`
if (!providers[docName]) {
providers[docName] = new HocuspocusProvider({
@ -88,6 +89,8 @@ export const Editor = (props: EditorProps) => {
const editor = createTiptapEditor(() => ({
element: editorElRef.current,
content: props.initialContent,
//onTransaction: handleEditorTransaction,
extensions: [
Document,
Text,
@ -105,18 +108,10 @@ export const Editor = (props: EditorProps) => {
Heading.configure({
levels: [1, 2, 3]
}),
BubbleMenu.configure({
element: bubbleMenuRef.current
}),
FloatingMenu.configure({
tippyOptions: {
placement: 'left'
},
element: floatingMenuRef.current
}),
BulletList,
OrderedList,
ListItem,
CharacterCount,
Collaboration.configure({
document: yDoc
}),
@ -135,10 +130,17 @@ export const Editor = (props: EditorProps) => {
HardBreak,
Highlight,
Image,
TrailingNode,
Embed,
TrailingNode,
CharacterCount
BubbleMenu.configure({
element: bubbleMenuRef.current
}),
FloatingMenu.configure({
tippyOptions: {
placement: 'left'
},
element: floatingMenuRef.current
})
]
}))

5
src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.module.scss
View File

@ -40,8 +40,7 @@
position: relative;
cursor: pointer;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
flex-flow: row nowrap;
align-items: center;
.dropDown {
@ -50,7 +49,7 @@
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
background: #fff;
color: #898c94;

2
src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.tsx
View File

@ -19,7 +19,7 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
const [listBubbleOpen, setListBubbleOpen] = createSignal<boolean>(false)
const [linkEditorOpen, setLinkEditorOpen] = createSignal<boolean>(false)
const isActive = (name: string, attributes?: any) =>
const isActive = (name: string, attributes?: unknown) =>
createEditorTransaction(
() => props.editor,
(editor) => {

46
src/components/Editor/EditorBubbleMenu/LinkForm/LinkForm.module.scss Normal file
View File

@ -0,0 +1,46 @@
.LinkForm {
position: relative;
.form {
display: flex;
flex-flow: row nowrap;
padding: 6px 11px;
input {
margin: 0 12px 0 0;
padding: 0;
flex: 1;
border: none;
min-width: 200px;
display: block;
&::placeholder {
color: rgba(#000, 0.3);
}
&:focus {
outline: none;
}
}
}
.linkError {
padding: 6px 11px;
color: red;
font-size: 0.7em;
position: absolute;
bottom: -3rem;
left: 0;
right: 0;
height: 0;
background: #fff;
box-shadow: 0 4px 10px rgba(#000, 0.25);
opacity: 0;
transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
&.visible {
height: 32px;
opacity: 1;
}
}
}

85
src/components/Editor/EditorBubbleMenu/LinkForm/LinkForm.tsx Normal file
View File

@ -0,0 +1,85 @@
import styles from './LinkForm.module.scss'
import { Icon } from '../../../_shared/Icon'
import { createEditorTransaction } from 'solid-tiptap'
import validateUrl from '../../../../utils/validateUrl'
import type { Editor } from '@tiptap/core'
import { createSignal } from 'solid-js'
import { useLocalize } from '../../../../context/localize'
import { clsx } from 'clsx'
type Props = {
editor: Editor
onClose: () => void
}
export const LinkForm = (props: Props) => {
const { t } = useLocalize()
const [url, setUrl] = createSignal('')
const [linkError, setLinkError] = createSignal('')
const currentUrl = createEditorTransaction(
() => props.editor,
(editor) => {
return (editor && editor.getAttributes('link').href) || ''
}
)
const clearLinkForm = () => {
if (currentUrl()) {
props.editor.chain().focus().unsetLink().run()
}
setUrl('')
props.onClose()
}
const handleUrlInput = (value) => {
setUrl(value)
}
const handleSaveButtonClick = () => {
if (!validateUrl(url())) {
setLinkError(t('Invalid url format'))
return
}
props.editor.chain().focus().setLink({ href: url() }).run()
props.onClose()
}
const handleKeyPress = (event) => {
event.preventDefault()
setLinkError('')
const key = event.key
if (key === 'Enter') {
handleSaveButtonClick()
}
if (key === 'Esc') {
clearLinkForm()
}
}
return (
<div class={styles.LinkForm}>
<div class={styles.form}>
<input
type="text"
placeholder={t('Enter URL address')}
autofocus
value={currentUrl()}
onKeyPress={(e) => handleKeyPress(e)}
onInput={(e) => handleUrlInput(e.currentTarget.value)}
/>
<button type="button" onClick={handleSaveButtonClick} disabled={linkError() !== ''}>
<Icon name="status-done" />
</button>
<button type="button" onClick={() => clearLinkForm()}>
{currentUrl() ? 'Ж' : <Icon name="status-cancel" />}
</button>
</div>
<div class={clsx(styles.linkError, { [styles.visible]: Boolean(linkError()) })}>{linkError()}</div>
</div>
)
}

1
src/components/Editor/EditorBubbleMenu/LinkForm/index.ts Normal file
View File

@ -0,0 +1 @@
export { LinkForm } from './LinkForm'

28
src/components/Editor/EditorFloatingMenu.tsx
View File

@ -12,25 +12,35 @@ type FloatingMenuProps = {
const embedData = async (data) => {
const result = await HTMLParser(data, false)
if (typeof result === 'string') {
return
}
if (result && 'type' in result && result.type === 'iframe') {
return result.attributes
}
}
const validateEmbed = async (value: string): Promise<string> => {
const iframeData = await HTMLParser(value, false)
if (typeof iframeData === 'string') {
return
}
if (iframeData && iframeData.type !== 'iframe') {
return
}
}
export const EditorFloatingMenu = (props: FloatingMenuProps) => {
const [inlineEditorOpen, setInlineEditorOpen] = createSignal<boolean>(false)
const handleEmbedFormSubmit = async (value: string) => {
// TODO: add support instagram embed (blockquote)
const emb = await embedData(value)
props.editor.chain().focus().setIframe(emb).run()
}
const validateEmbed = async (value) => {
const iframeData = await HTMLParser(value, false)
if (iframeData && iframeData.type !== 'iframe') {
return
}
const { src } = (await embedData(value)) as { src: string }
props.editor.chain().focus().setIframe({ src }).run()
}
return (

5
src/components/Editor/InlineForm/InlineForm.module.scss
View File

@ -15,6 +15,7 @@
button {
opacity: 1;
&:disabled,
&:disabled:hover {
opacity: 0.3;
@ -24,8 +25,7 @@
.form {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-flow: row nowrap;
padding: 6px 11px;
input {
@ -39,6 +39,7 @@
&::placeholder {
color: rgba(#000, 0.3);
}
&:focus {
outline: none;
}

4
src/components/Editor/InlineForm/InlineForm.tsx
View File

@ -1,7 +1,5 @@
import styles from './InlineForm.module.scss'
import { Icon } from '../../_shared/Icon'
import { createEditorTransaction } from 'solid-tiptap'
import type { Editor } from '@tiptap/core'
import { createSignal, Show } from 'solid-js'
import { useLocalize } from '../../../context/localize'
import { clsx } from 'clsx'
@ -50,7 +48,7 @@ export const InlineForm = (props: Props) => {
return (
<div
class={clsx(styles.InlineForm, {
[styles.inBubble]: props.variant === 'inBubble',
// [styles.inBubble]: props.variant === 'inBubble',
[styles.inFloating]: props.variant === 'inFloating'
})}
>

30
src/components/Editor/Panel/Panel.module.scss
View File

@ -1,6 +1,6 @@
.Panel {
background: #1f1f1f;
color: rgb(255 255 255 / 0.35);
color: rgb(255 255 255 / 35%);
display: flex;
flex-direction: column;
font-size: 1.7rem;
@ -29,7 +29,7 @@
}
section {
border-bottom: 2px solid rgb(255 255 255 / 0.1);
border-bottom: 2px solid rgb(255 255 255 / 10%);
padding: 1.8rem 0;
&:first-child {
@ -56,18 +56,8 @@
}
}
.buttonWithIcon {
.linkWithIcon {
margin-left: -1.6rem;
.icon {
filter: invert(0.5);
margin-right: 0.3em;
width: 1em;
}
img {
vertical-align: middle;
}
}
.stats {
@ -79,7 +69,7 @@
}
a {
color: rgb(255 255 255 / 0.35);
color: rgb(255 255 255 / 35%);
font-weight: normal !important;
&:hover {
@ -87,7 +77,19 @@
color: #fff;
}
}
&.hidden {
transform: translateX(100%);
}
.icon {
display: inline-block;
filter: invert(0.5);
margin-right: 0.3em;
width: 1em;
img {
vertical-align: bottom;
}
}
}

104
src/components/Editor/Panel/Panel.tsx
View File

@ -1,16 +1,19 @@
import { Show } from 'solid-js'
import { clsx } from 'clsx'
import { Button } from '../../_shared/Button'
import { Icon } from '../../_shared/Icon'
import { useLocalize } from '../../../context/localize'
import styles from './Panel.module.scss'
import { useEditorContext } from '../../../context/editor'
import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
import { getPagePath } from '@nanostores/router'
import { router } from '../../../stores/router'
type Props = {
// isVisible: boolean
type PanelProps = {
shoutSlug: string
}
export const Panel = (props: Props) => {
export const Panel = (props: PanelProps) => {
const { t } = useLocalize()
const {
isEditorPanelVisible,
@ -18,8 +21,27 @@ export const Panel = (props: Props) => {
actions: { toggleEditorPanel }
} = useEditorContext()
const containerRef: { current: HTMLElement } = {
current: null
}
useOutsideClickHandler({
containerRef,
predicate: () => isEditorPanelVisible(),
handler: () => toggleEditorPanel()
})
useEscKeyDownHandler(() => {
if (isEditorPanelVisible()) {
toggleEditorPanel()
}
})
return (
<aside class={clsx('col-md-6', styles.Panel, { [styles.hidden]: !isEditorPanelVisible() })}>
<aside
ref={(el) => (containerRef.current = el)}
class={clsx('col-md-6', styles.Panel, { [styles.hidden]: !isEditorPanelVisible() })}
>
<div class={styles.actionsHolder}>
<Button
value={<Icon name="close" />}
@ -30,47 +52,50 @@ export const Panel = (props: Props) => {
</div>
<div class={clsx(styles.actionsHolder, styles.scrolled)}>
<section>
<Button value={t('Publish')} variant={'inline'} class={styles.button} />
<Button value={t('Save draft')} variant={'inline'} class={styles.button} />
<p>
<a>{t('Publish')}</a>
</p>
<p>
<a>{t('Save draft')}</a>
</p>
</section>
<section>
<Button
value={
<>
<p>
<a class={styles.linkWithIcon}>
<Icon name="eye" class={styles.icon} />
{t('Preview')}
</>
}
variant={'inline'}
class={clsx(styles.button, styles.buttonWithIcon)}
/>
<Button
value={
<>
</a>
</p>
<p>
<a
class={styles.linkWithIcon}
href={getPagePath(router, 'edit', { shoutSlug: props.shoutSlug })}
>
<Icon name="pencil-outline" class={styles.icon} />
{t('Editing')}
</>
}
variant={'inline'}
class={clsx(styles.button, styles.buttonWithIcon)}
/>
<Button
value={
<>
</a>
</p>
<p>
<a class={styles.linkWithIcon}>
<Icon name="feed-discussion" class={styles.icon} />
{t('FAQ')}
</>
}
variant={'inline'}
class={clsx(styles.button, styles.buttonWithIcon)}
/>
</a>
</p>
</section>
<section>
<Button value={t('Invite co-authors')} variant={'inline'} class={styles.button} />
<Button value={t('Publication settings')} variant={'inline'} class={styles.button} />
<Button value={t('Corrections history')} variant={'inline'} class={styles.button} />
<p>
<a>{t('Invite co-authors')}</a>
</p>
<p>
<a href={getPagePath(router, 'editSettings', { shoutSlug: props.shoutSlug })}>
{t('Publication settings')}
</a>
</p>
<p>
<a>{t('Corrections history')}</a>
</p>
</section>
<section>
@ -92,14 +117,9 @@ export const Panel = (props: Props) => {
<div>
{t('Words')}: <em>{wordCounter().words}</em>
</div>
<Show when={wordCounter().paragraphs}>
<div>
{t('Paragraphs')}: <em>{wordCounter().paragraphs}</em>
</div>
</Show>
<div>
{t('Last rev.')}: <em>22.03.22 в 18:20</em>
</div>
{/*<div>*/}
{/* {t('Last rev.')}: <em>22.03.22 в 18:20</em>*/}
{/*</div>*/}
</div>
</div>
</aside>

2
src/components/Editor/Prosemirror.scss
View File

@ -2,9 +2,9 @@
outline: none;
blockquote {
border-left: 2px solid;
@include font-size(1.6rem);
border-left: 2px solid;
margin: 1.5em 0;
padding-left: 1.6em;
}

1
src/components/Editor/TopicSelect/TopicSelect.tsx
View File

@ -3,7 +3,6 @@ import { createOptions, Select } from '@thisbeyond/solid-select'
import { useLocalize } from '../../../context/localize'
import '@thisbeyond/solid-select/style.css'
import './TopicSelect.scss'
import { clone } from '../../../utils/clone'
type TopicSelectProps = {
topics: Topic[]

5
src/components/Editor/extensions/embed.ts
View File

@ -1,7 +1,4 @@
import { mergeAttributes, Node } from '@tiptap/core'
import { NodeRange } from 'prosemirror-model'
import { insert } from 'solid-js/web'
import { TextSelection } from 'prosemirror-state'
export interface IframeOptions {
allowFullscreen: boolean
@ -48,7 +45,7 @@ export const Embed = Node.create<IframeOptions>({
const iframe = document.createElement('iframe')
iframe.width = node.attrs.width
iframe.height = node.attrs.height
iframe.allowfullscreen = node.attrs.allowfullscreen
iframe.allowFullscreen = node.attrs.allowFullscreen
iframe.src = node.attrs.src
div.append(iframe)
return {

4
src/components/EditorNew/Sidebar.module.scss
View File

@ -5,10 +5,10 @@
}
.sidebarContainer {
display: none; // режим отладки
color: rgb(255 255 255 / 50%);
@include font-size(1.6rem);
display: none; // режим отладки
color: rgb(255 255 255 / 50%);
overflow: hidden;
position: relative;
top: 0;

7
src/components/EditorNew/prosemirror/styles/ProseMirror.scss
View File

@ -85,9 +85,9 @@
}
blockquote {
border-left: 2px solid;
@include font-size(1.6rem);
border-left: 2px solid;
margin: 1.5em 0;
padding-left: 1.6em;
}
@ -287,10 +287,7 @@ li.ProseMirror-selectednode {
li.ProseMirror-selectednode::after {
content: '';
position: absolute;
left: -32px;
right: -2px;
top: -2px;
bottom: -2px;
inset: -2px -2px -2px -32px;
border: 2px solid #8cf;
pointer-events: none;
}

14
src/components/Feed/Card.module.scss → src/components/Feed/ArticleCard.module.scss
View File

@ -132,9 +132,9 @@
}
.shoutCardSubtitle {
color: #696969;
@include font-size(1.7rem);
color: #696969;
font-weight: 400;
line-height: 1.3;
margin-bottom: 0.8rem;
@ -263,9 +263,9 @@
.shoutCardTitle,
.shoutCardSubtitle {
display: inline;
@include font-size(2.6rem);
display: inline;
line-height: 1.2;
}
@ -554,24 +554,25 @@
.shoutCardBigTitle {
.shoutCardTitle {
display: block;
@include font-size(3.2rem);
display: block;
padding-right: 0;
}
.shoutCardSubtitle {
color: #696969;
@include font-size(2.4rem);
color: #696969;
}
}
.shoutCardCompact {
.shoutCardTitle,
.shoutCardSubtitle {
display: inline;
@include font-size(2.6rem);
display: inline;
line-height: 1.2;
}
@ -669,9 +670,10 @@
}
.shoutCardSubtitle {
@include font-size(2.4rem);
color: #696969;
flex: 1;
@include font-size(2.4rem);
}
}

3
src/components/Feed/Card.tsx → src/components/Feed/ArticleCard.tsx
View File

@ -3,7 +3,7 @@ import type { Shout } from '../../graphql/types.gen'
import { capitalize } from '../../utils'
import { translit } from '../../utils/ru2en'
import { Icon } from '../_shared/Icon'
import styles from './Card.module.scss'
import styles from './ArticleCard.module.scss'
import { clsx } from 'clsx'
import { CardTopic } from './CardTopic'
import { ShoutRatingControl } from '../Article/ShoutRatingControl'
@ -37,7 +37,6 @@ interface ArticleCardProps {
isBeside?: boolean
}
article: Shout
scrollTo: 'comments'
}
const getTitleAndSubtitle = (article: Shout): { title: string; subtitle: string } => {

2
src/components/Feed/Beside.module.scss
View File

@ -66,9 +66,9 @@
}
a {
border: none;
@include font-size(1.5rem);
border: none;
font-weight: 500;
padding-right: 0.3em;
white-space: nowrap;

4
src/components/Feed/Beside.tsx
View File

@ -1,8 +1,8 @@
// TODO: additional entities list column + article
import { For, Show } from 'solid-js'
import { ArticleCard } from './Card'
import { AuthorCard } from '../Author/Card'
import { ArticleCard } from './ArticleCard'
import { AuthorCard } from '../Author/AuthorCard'
import { TopicCard } from '../Topic/Card'
import styles from './Beside.module.scss'
import type { Author, Shout, Topic, User } from '../../graphql/types.gen'

2
src/components/Feed/Group.tsx
View File

@ -1,7 +1,7 @@
import type { JSX } from 'solid-js/jsx-runtime'
import { For, Show } from 'solid-js'
import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card'
import { ArticleCard } from './ArticleCard'
import './Group.scss'
interface GroupProps {

8
src/components/Feed/List.scss
View File

@ -1,8 +0,0 @@
.article-preview {
background: center url('loading.gif') no-repeat;
margin: auto;
vertical-align: middle;
text-align: center;
/* TODO: centered full viewport */
}

56
src/components/Feed/List.tsx
View File

@ -1,56 +0,0 @@
import { Row1 } from './Row1'
import { Row2 } from './Row2'
import { Row3 } from './Row3'
import { shuffle } from '../../utils'
import { createMemo, createSignal, For, Suspense } from 'solid-js'
import type { JSX } from 'solid-js'
import type { Shout } from '../../graphql/types.gen'
import './List.scss'
import { useLocalize } from '../../context/localize'
export const Block6 = (props: { articles: Shout[] }) => {
const dice = createMemo(() => shuffle([Row1, Row2, Row3]))
return (
<>
<For each={dice()}>{(c: (ppp: Shout[]) => JSX.Element) => c(props.articles)}</For>
</>
)
}
interface ArticleListProps {
articles: Shout[]
page: number
size: number
}
export default (props: ArticleListProps) => {
const { t } = useLocalize()
const [articles, setArticles] = createSignal(
props.articles.slice(props.page * props.size, props.size * (props.page + 1)) || []
)
const [loadingMore, setLoadingMore] = createSignal(false)
// const [, { more }] = useZine()
const handleMore = () => {
setArticles(props.articles.slice(props.page * props.size, props.size * (props.page + 1)))
if (props.size * (props.page + 1) > props.articles.length) {
console.log('[article-list] load more')
setLoadingMore(true)
// TODO: more()
setLoadingMore(false)
}
}
const x: number = Math.floor(articles().length / 6)
// eslint-disable-next-line unicorn/new-for-builtins
const numbers: number[] = [...Array(x).keys()]
return (
<Suspense fallback={<div class="article-preview">{t('Loading')}</div>}>
<For each={numbers}>
{() => <Block6 articles={articles().slice(0, Math.min(6, articles().length))} />}
</For>
<a href={''} onClick={handleMore} classList={{ disabled: loadingMore() }}>
{loadingMore() ? '...' : t('More')}
</a>
</Suspense>
)
}

2
src/components/Feed/Row1.tsx
View File

@ -1,6 +1,6 @@
import { Show } from 'solid-js'
import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card'
import { ArticleCard } from './ArticleCard'
export const Row1 = (props: { article: Shout; nodate?: boolean }) => (
<Show when={!!props.article}>

2
src/components/Feed/Row2.tsx
View File

@ -1,6 +1,6 @@
import { createComputed, createSignal, Show, For } from 'solid-js'
import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card'
import { ArticleCard } from './ArticleCard'
const x = [
['12', '12'],

2
src/components/Feed/Row3.tsx
View File

@ -1,7 +1,7 @@
import type { JSX } from 'solid-js/jsx-runtime'
import { For } from 'solid-js'
import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card'
import { ArticleCard } from './ArticleCard'
export const Row3 = (props: { articles: Shout[]; header?: JSX.Element; nodate?: boolean }) => {
return (

2
src/components/Feed/Row5.tsx
View File

@ -1,5 +1,5 @@
import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card'
import { ArticleCard } from './ArticleCard'
export const Row5 = (props: { articles: Shout[]; nodate?: boolean }) => {
return (

2
src/components/Feed/RowShort.tsx
View File

@ -1,6 +1,6 @@
import { For } from 'solid-js'
import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card'
import { ArticleCard } from './ArticleCard'
export default (props: { articles: Shout[] }) => (
<div class="floor floor--7">

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

@ -19,6 +19,7 @@
.counter {
@include font-size(1.2rem);
align-items: center;
align-self: flex-start;
background: #f6f6f6;

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

@ -84,8 +84,8 @@ export const Sidebar = (props: FeedSidebarProps) => {
<div class={styles.sidebar}>
<ul>
<For each={menuItems}>
{(item: ListItem, index) => (
<li key={index}>
{(item: ListItem) => (
<li>
<a href="#">
<span class={styles.sidebarItemName}>
{item.icon && <Icon name={item.icon} class={styles.icon} />}

4
src/components/Inbox/MessageActionsPopup.tsx
View File

@ -5,11 +5,11 @@ import { useLocalize } from '../../context/localize'
export type MessageActionType = 'reply' | 'copy' | 'pin' | 'forward' | 'select' | 'delete'
type MessageActionsPopup = {
type MessageActionsPopupProps = {
actionSelect?: (selectedAction) => void
} & Omit<PopupProps, 'children'>
export const MessageActionsPopup = (props: MessageActionsPopup) => {
export const MessageActionsPopup = (props: MessageActionsPopupProps) => {
const [selectedAction, setSelectedAction] = createSignal<MessageActionType | null>(null)
const { t } = useLocalize()
const actions: { name: string; action: MessageActionType }[] = [

7
src/components/Nav/AuthModal/AuthModal.module.scss
View File

@ -33,12 +33,12 @@
}
.authImage {
@include font-size(1.5rem);
background: #141414 url('/auth-page.jpg') center no-repeat;
background-size: cover;
color: #fff;
display: flex;
@include font-size(1.5rem);
padding: 3em;
position: relative;
@ -81,8 +81,9 @@
}
.disclaimer {
color: #9fa1a7;
@include font-size(1.2rem);
color: #9fa1a7;
}
.authActions {

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

@ -130,6 +130,7 @@
display: inline-flex;
font-weight: 500;
position: relative;
// flex: 1 100% !important;
// replace row > * selector to remove !important
@ -142,9 +143,10 @@
}
.mainNavigationWrapper {
@include font-size(1.7rem);
padding-left: 0;
position: relative;
@include font-size(1.7rem);
@include media-breakpoint-down(md) {
display: none;
@ -513,8 +515,9 @@
}
.textLabel {
display: inline;
// padding: 0 1.2rem;
display: inline;
position: relative;
z-index: 1;
}

25
src/components/Nav/HeaderAuth.tsx
View File

@ -3,11 +3,10 @@ import { clsx } from 'clsx'
import { router, useRouter } from '../../stores/router'
import { Icon } from '../_shared/Icon'
import { createSignal, Show } from 'solid-js'
import { createMemo, createSignal, Show } from 'solid-js'
import Notifications from './Notifications'
import { ProfilePopup } from './ProfilePopup'
import Userpic from '../Author/Userpic'
import type { Author } from '../../graphql/types.gen'
import { showModal, useWarningsStore } from '../../stores/ui'
import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
import { useSession } from '../../context/session'
@ -44,12 +43,24 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
toggleWarnings()
}
const isEditorPage = createMemo(
() => page().route === 'create' || page().route === 'edit' || page().route === 'editSettings'
)
const showNotifications = createMemo(() => isAuthenticated() && !isEditorPage())
const showSaveButton = createMemo(() => isAuthenticated() && isEditorPage())
const showCreatePostButton = createMemo(() => isAuthenticated() && !isEditorPage())
const handleBurgerButtonClick = () => {
toggleEditorPanel()
}
return (
<ShowOnlyOnClient>
<Show when={isSessionLoaded()} keyed={true}>
<div class={clsx(styles.usernav, 'col')}>
<div class={clsx(styles.userControl, styles.userControl, 'col')}>
<Show when={page().route !== 'create'}>
<Show when={showCreatePostButton()}>
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
<a href={getPagePath(router, 'create')}>
<span class={styles.textLabel}>{t('Create post')}</span>
@ -58,7 +69,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
</div>
</Show>
<Show when={isAuthenticated() && page().route !== 'create'}>
<Show when={showNotifications()}>
<div class={styles.userControlItem}>
<a href="#" onClick={handleBellIconClick}>
<div>
@ -68,7 +79,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
</div>
</Show>
<Show when={isAuthenticated() && page().route === 'create'}>
<Show when={showSaveButton()}>
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
<Button
value={
@ -97,7 +108,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
<Button
value={<Icon name="burger" />}
variant={'outline'}
onClick={() => toggleEditorPanel()}
onClick={handleBurgerButtonClick}
/>
</div>
</Show>
@ -136,7 +147,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
<div class={styles.userControlItem}>
<button class={styles.button}>
<div classList={{ entered: page().path === `/${session().user?.slug}` }}>
<Userpic user={session().user as Author} class={styles.userpic} />
<Userpic user={session().user} class={styles.userpic} />
</div>
</button>
</div>

5
src/components/Nav/Modal.module.scss
View File

@ -45,7 +45,7 @@
width: 100%;
}
@media (min-width: 800px) and (max-width: 991px) {
@media (width >= 800px) and (width <= 991px) {
// top: 11em;
}
}
@ -53,7 +53,8 @@
&.narrow {
max-width: 460px;
width: 50%;
@media (min-width: 800px) and (max-width: 991px) {
@media (width >= 800px) and (width <= 991px) {
width: 80%;
}

2
src/components/Nav/ProfileModal.tsx
View File

@ -1,4 +1,4 @@
import { AuthorCard } from '../Author/Card'
import { AuthorCard } from '../Author/AuthorCard'
import type { Author } from '../../graphql/types.gen'
import { translit } from '../../utils/ru2en'

2
src/components/Topic/Card.module.scss
View File

@ -24,9 +24,9 @@
}
.topicTitle {
font-weight: bold;
@include font-size(2.2rem);
font-weight: bold;
margin-bottom: 1.2rem;
margin-top: 0.5rem !important;
}

2
src/components/Topic/Full.tsx
View File

@ -37,7 +37,7 @@ export const FullTopic = (props: Props) => {
{t('Unfollow the topic')}
</button>
</Show>
<a href={`/create/${props.topic.slug}`}>{t('Write about the topic')}</a>
<a href={`/create/?topicId=${props.topic.id}`}>{t('Write about the topic')}</a>
</div>
<Show when={props.topic.pic}>
<img src={props.topic.pic} alt={props.topic.title} />

2
src/components/Views/AllAuthors.tsx
View File

@ -3,7 +3,7 @@ import type { Author } from '../../graphql/types.gen'
import { setAuthorsSort, useAuthorsStore } from '../../stores/zine/authors'
import { useRouter } from '../../stores/router'
import { AuthorCard } from '../Author/Card'
import { AuthorCard } from '../Author/AuthorCard'
import { clsx } from 'clsx'
import { useSession } from '../../context/session'
import { translit } from '../../utils/ru2en'

2
src/components/Views/Author.tsx
View File

@ -14,7 +14,7 @@ import stylesArticle from '../Article/Article.module.scss'
import { clsx } from 'clsx'
import Userpic from '../Author/Userpic'
import { Popup } from '../_shared/Popup'
import { AuthorCard } from '../Author/Card'
import { AuthorCard } from '../Author/AuthorCard'
import { apiClient } from '../../utils/apiClient'
import { Comment } from '../Article/Comment'
import { useLocalize } from '../../context/localize'

99
src/components/Views/Edit.module.scss Normal file
View File

@ -0,0 +1,99 @@
:global(.main-content) {
position: static;
}
.articlePreview {
border: 2px solid #e8e8e8;
min-height: 10em;
padding: 1rem 1.2rem;
}
.formHolder {
padding: 0 4rem;
}
.container {
.titleInput,
.subtitleInput {
border: 0;
outline: 0;
padding: 0;
font-size: 36px;
&::placeholder {
opacity: 0.3;
color: #000;
}
}
.titleInput {
font-weight: 700;
}
}
.editSettings,
.edit {
display: none;
&.visible {
display: block;
}
}
.asidePanel {
background: #1f1f1f;
color: rgb(255 255 255 / 35%);
display: flex;
flex-direction: column;
font-size: 1.7rem;
justify-content: flex-start;
height: 100%;
line-height: 1.4;
padding: $grid-gutter-width;
position: fixed;
transition: transform 0.3s;
right: 0;
top: 0;
z-index: 10;
.close {
filter: invert(1);
margin: -1.6rem 0 0 -1.6rem;
}
section {
border-bottom: 2px solid rgb(255 255 255 / 10%);
// margin-bottom: 1.8rem;
margin-top: 1.8rem;
padding-bottom: 1.8rem;
p {
margin: 0.6em 0;
&:last-child {
margin-bottom: 0;
}
}
}
.button {
font-weight: normal;
margin-left: -1.6rem;
&:hover {
color: #fff;
text-decoration: none;
}
}
a {
color: rgb(255 255 255 / 35%);
font-weight: normal !important;
&:hover {
background: none;
color: #fff;
}
}
}

95
src/components/Views/Create.tsx → src/components/Views/Edit.tsx
View File

@ -1,14 +1,14 @@
import { createSignal, onMount, Show } from 'solid-js'
import { useLocalize } from '../../context/localize'
import { clsx } from 'clsx'
import styles from './Create.module.scss'
import styles from './Edit.module.scss'
import { Title } from '@solidjs/meta'
import { createStore } from 'solid-js/store'
import type { Topic } from '../../graphql/types.gen'
import type { Shout, Topic } from '../../graphql/types.gen'
import { apiClient } from '../../utils/apiClient'
import { TopicSelect } from '../Editor/TopicSelect/TopicSelect'
import { router, useRouter } from '../../stores/router'
import { getPagePath } from '@nanostores/router'
import { openPage } from '@nanostores/router'
import { translit } from '../../utils/ru2en'
import { Editor } from '../Editor/Editor'
import { Panel } from '../Editor/Panel'
@ -18,12 +18,16 @@ type ShoutForm = {
title: string
subtitle: string
selectedTopics: Topic[]
mainTopic: Topic
mainTopic: string
body: string
coverImageUrl: string
}
export const CreateView = () => {
type EditViewProps = {
shout: Shout
}
export const EditView = (props: EditViewProps) => {
const { t } = useLocalize()
const [topics, setTopics] = createSignal<Topic[]>(null)
@ -32,13 +36,13 @@ export const CreateView = () => {
const [isSlugChanged, setIsSlugChanged] = createSignal(false)
const [form, setForm] = createStore<ShoutForm>({
slug: '',
title: '',
subtitle: '',
selectedTopics: [],
mainTopic: null,
body: '',
coverImageUrl: ''
slug: props.shout.slug,
title: props.shout.title,
subtitle: props.shout.subtitle,
selectedTopics: props.shout.topics,
mainTopic: props.shout.mainTopic,
body: props.shout.body,
coverImageUrl: props.shout.cover
})
onMount(async () => {
@ -49,18 +53,9 @@ export const CreateView = () => {
const handleFormSubmit = async (e) => {
e.preventDefault()
const newShout = await apiClient.createArticle({
article: {
slug: form.slug,
title: form.title,
subtitle: form.subtitle,
body: form.body,
topics: form.selectedTopics.map((topic) => topic.slug),
mainTopic: form.selectedTopics[0].slug
}
})
const article = await apiClient.publishDraft()
router.open(getPagePath(router, 'article', { slug: newShout.slug }))
openPage(router, 'article', { slug: article.slug })
}
const handleTitleInputChange = (e) => {
@ -82,17 +77,36 @@ export const CreateView = () => {
setForm('slug', slug)
}
const handleSaveButtonClick = async (e) => {
e.preventDefault()
await apiClient.updateArticle({
slug: props.shout.slug,
article: {
slug: form.slug,
title: form.title,
subtitle: form.subtitle,
body: form.body,
topics: form.selectedTopics.map((topic) => topic.slug),
mainTopic: form.selectedTopics[0].slug
}
})
openPage(router, 'drafts')
}
return (
<>
<div class={styles.container}>
<Title>{t('Write an article')}</Title>
<form onSubmit={handleFormSubmit}>
<div class="wide-container">
<div class="row">
<div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
<div
class={clsx(styles.create, {
[styles.visible]: page().route === 'create'
class={clsx(styles.edit, {
[styles.visible]: page().route === 'edit'
})}
>
<input
@ -115,16 +129,15 @@ export const CreateView = () => {
onChange={(e) => setForm('subtitle', e.currentTarget.value)}
/>
<Editor shoutId={42} onChange={(body) => setForm('body', body)} />
<div class={styles.saveBlock}>
{/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
<a href={getPagePath(router, 'createSettings')}>Настройки</a>
</div>
<Editor
shoutSlug={props.shout.slug}
initialContent={props.shout.body}
onChange={(body) => setForm('body', body)}
/>
</div>
<div
class={clsx(styles.createSettings, {
[styles.visible]: page().route === 'createSettings'
class={clsx(styles.editSettings, {
[styles.visible]: page().route === 'editSettings'
})}
>
<h1>Настройки публикации</h1>
@ -199,27 +212,15 @@ export const CreateView = () => {
выглядеть на&nbsp;главной странице
</p>
<div class={styles.articlePreview} />
<div class={styles.saveBlock}>
<p>
Проверьте ещё раз введённые данные, если всё верно, вы&nbsp;можете сохранить или
опубликовать ваш текст
</p>
{/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
<a href={getPagePath(router, 'create')}>Назад</a>
<button type="submit" class={clsx('button button--submit', styles.button)}>
Опубликовать
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<Panel />
<Panel shoutSlug={props.shout.slug} />
</>
)
}
export default CreateView
export default EditView

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

@ -1,5 +1,6 @@
.feedNavigation {
@include font-size(1.5rem);
font-weight: 500;
h4 {

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

@ -1,8 +1,8 @@
import { createEffect, createMemo, createSignal, For, onMount, Show } from 'solid-js'
import { createEffect, createSignal, For, onMount, Show } from 'solid-js'
import '../../styles/Feed.scss'
import { Icon } from '../_shared/Icon'
import { ArticleCard } from '../Feed/Card'
import { AuthorCard } from '../Author/Card'
import { ArticleCard } from '../Feed/ArticleCard'
import { AuthorCard } from '../Author/AuthorCard'
import { Sidebar } from '../Feed/Sidebar'
import { loadShouts, useArticlesStore } from '../../stores/zine/articles'
import { useAuthorsStore } from '../../stores/zine/authors'

2
src/components/Views/Home.tsx
View File

@ -22,7 +22,7 @@ import {
import { useTopAuthorsStore } from '../../stores/zine/topAuthors'
import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
import { splitToPages } from '../../utils/splitToPages'
import { ArticleCard } from '../Feed/Card'
import { ArticleCard } from '../Feed/ArticleCard'
import { useLocalize } from '../../context/localize'
type HomeProps = {

34
src/components/Views/Inbox.tsx
View File

@ -23,12 +23,14 @@ type InboxSearchParams = {
initChat: string
chat: string
}
// const userSearch = (array: Author[], keyword: string) => {
// const searchTerm = keyword.toLowerCase()
// return array.filter((value) => {
// return value.name.toLowerCase().match(new RegExp(searchTerm, 'g'))
// })
// }
const userSearch = (array: Author[], keyword: string) => {
return array.filter((value) => new RegExp(keyword.trim(), 'gi').test(value.name))
}
const handleOpenInviteModal = () => {
showModal('inviteToChat')
}
export const InboxView = () => {
const { t } = useLocalize()
@ -46,14 +48,15 @@ export const InboxView = () => {
const [messageToReply, setMessageToReply] = createSignal<MessageType | null>(null)
const { session } = useSession()
const currentUserId = createMemo(() => session()?.user.id)
// Поиск по диалогам
const getQuery = (query) => {
// if (query().length >= 2) {
// const match = userSearch(recipients(), query())
// setRecipients(match)
// } else {
if (query().length >= 2) {
const match = userSearch(recipients(), query())
setRecipients(match)
} else {
// setRecipients(cashedRecipients())
// }
}
}
let chatWindow
@ -136,10 +139,6 @@ export const InboxView = () => {
}
})
const handleOpenInviteModal = () => {
showModal('inviteToChat')
}
const chatsToShow = () => {
const sorted = chats().sort((a, b) => {
return b.updatedAt - a.updatedAt
@ -158,7 +157,10 @@ export const InboxView = () => {
}
const handleKeyDown = async (event) => {
if (event.keyCode === 13 && event.shiftKey) return
if (event.keyCode === 13 && event.shiftKey) {
return
}
if (event.keyCode === 13 && !event.shiftKey && postMessageText()?.trim().length > 0) {
event.preventDefault()
handleSubmit()

2
src/components/Views/Search.tsx
View File

@ -1,7 +1,7 @@
import { Show, For, createSignal } from 'solid-js'
import '../../styles/Search.scss'
import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from '../Feed/Card'
import { ArticleCard } from '../Feed/ArticleCard'
import { loadShouts, useArticlesStore } from '../../stores/zine/articles'
import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'

2
src/components/Views/Topic.tsx
View File

@ -15,7 +15,7 @@ import { splitToPages } from '../../utils/splitToPages'
import { clsx } from 'clsx'
import Slider from '../_shared/Slider'
import { Row1 } from '../Feed/Row1'
import { ArticleCard } from '../Feed/Card'
import { ArticleCard } from '../Feed/ArticleCard'
import { useLocalize } from '../../context/localize'
type TopicsPageSearchParams = {

7
src/components/_shared/VotersList/VotersList.module.scss
View File

@ -5,16 +5,15 @@
max-height: 360px;
overflow: auto;
}
.item {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-flow: row nowrap;
align-items: center;
.user {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-flow: row nowrap;
align-items: center;
margin-right: 1.2rem;

5
src/context/editor.tsx
View File

@ -4,7 +4,6 @@ import { Accessor, createContext, createSignal, useContext } from 'solid-js'
type WordCounter = {
characters: number
words: number
paragraphs?: number
}
type EditorContextType = {
@ -23,12 +22,12 @@ export function useEditorContext() {
}
export const EditorProvider = (props: { children: JSX.Element }) => {
const [isEditorPanelVisible, setEditorPanelVisible] = createSignal<boolean>(false)
const [isEditorPanelVisible, setIsEditorPanelVisible] = createSignal<boolean>(false)
const [wordCounter, setWordCounter] = createSignal<WordCounter>({
characters: 0,
words: 0
})
const toggleEditorPanel = () => setEditorPanelVisible(!isEditorPanelVisible())
const toggleEditorPanel = () => setIsEditorPanelVisible((value) => !value)
const countWords = (value) => setWordCounter(value)
const actions = {
toggleEditorPanel,

6
src/context/localize.tsx
View File

@ -2,7 +2,7 @@ import type { i18n } from 'i18next'
import type { Accessor, JSX } from 'solid-js'
import { createContext, createEffect, createSignal, Show, useContext } from 'solid-js'
import { useRouter } from '../stores/router'
import i18next from 'i18next'
import i18next, { changeLanguage, t } from 'i18next'
import Cookie from 'js-cookie'
type LocalizeContextType = {
@ -30,13 +30,13 @@ export const LocalizeProvider = (props: { children: JSX.Element }) => {
const lng: Language = searchParams().lng === 'en' ? 'en' : 'ru'
i18next.changeLanguage(lng)
changeLanguage(lng)
setLang(lng)
Cookie.set('lng', lng)
changeSearchParam('lng', null)
})
const value: LocalizeContextType = { t: i18next.t, lang, setLang }
const value: LocalizeContextType = { t, lang, setLang }
return (
<LocalizeContext.Provider value={value}>

1
src/context/session.tsx
View File

@ -54,7 +54,6 @@ export const SessionProvider = (props: { children: JSX.Element }) => {
initialValue: null
})
const userSlug = createMemo(() => session()?.user?.slug)
const user = createMemo(() => session()?.user)
const isAuthenticated = createMemo(() => Boolean(session()?.user?.slug))

14
src/graphql/mutation/article-create.ts
View File

@ -5,23 +5,11 @@ export default gql`
createShout(inp: $shout) {
error
shout {
id
_id: slug
slug
title
subtitle
body
topics {
id
title
slug
}
authors {
id
name
slug
userpic
caption
}
}
}
}

16
src/graphql/mutation/article-publish.ts Normal file
View File

@ -0,0 +1,16 @@
import { gql } from '@urql/core'
export default gql`
mutation UpdateShoutMutation($slug: String!) {
publishShout(slug: $slug) {
error
shout {
id
slug
title
subtitle
body
}
}
}
`

20
src/graphql/mutation/article-update.ts
View File

@ -1,29 +1,15 @@
import { gql } from '@urql/core'
export default gql`
mutation UpdateShoutMutation($shout: Shout!) {
updateShout(input: $shout) {
mutation UpdateShoutMutation($slug: String!, $shout: ShoutInput!) {
updateShout(slug: $slug, inp: $shout) {
error
shout {
_id: slug
id
slug
title
subtitle
image
body
topics {
# id
title
slug
image
}
authors {
id
name
slug
userpic
caption
}
}
}
}

28
src/graphql/mutation/draft-create.ts
View File

@ -1,28 +0,0 @@
import { gql } from '@urql/core'
export default gql`
mutation DraftCreateMutation($draft: DraftInput!) {
createDraft(draft: $draft) {
error
draft {
id
slug
title
subtitle
body
topics {
# id
title
slug
}
authors {
id
name
slug
userpic
caption
}
}
}
}
`

9
src/graphql/mutation/draft-destroy.ts
View File

@ -1,9 +0,0 @@
import { gql } from '@urql/core'
export default gql`
mutation DraftDestroyMutation($draft: Int!) {
deleteDraft(draft: $draft) {
error
}
}
`

28
src/graphql/mutation/draft-to-shout.ts
View File

@ -1,28 +0,0 @@
import { gql } from '@urql/core'
export default gql`
mutation ShoutFromDraftMutation($draft: Int!) {
draftToShout(draft: $draft) {
error
shout {
_id: slug
slug
title
subtitle
body
topics {
# id
title
slug
}
authors {
id
name
slug
userpic
caption
}
}
}
}
`

28
src/graphql/mutation/draft-update.ts
View File

@ -1,28 +0,0 @@
import { gql } from '@urql/core'
export default gql`
mutation DraftUpdateMutation($draft: DraftInput!) {
updateDraft(draft: $draft) {
error
draft {
id
slug
title
subtitle
body
topics {
# id
title
slug
}
authors {
id
name
slug
userpic
caption
}
}
}
}
`

36
src/graphql/query/article-drafts-load-by.ts Normal file
View File

@ -0,0 +1,36 @@
import { gql } from '@urql/core'
export default gql`
query LoadDraftsQuery($options: LoadShoutsOptions) {
loadDrafts(options: $options) {
id
title
subtitle
slug
layout
cover
# community
mainTopic
topics {
# id
title
body
slug
stat {
_id: shouts
shouts
authors
followers
}
}
authors {
id
name
slug
userpic
}
createdAt
publishedAt
}
}
`

17
src/graphql/query/my-drafts.ts
View File

@ -1,17 +0,0 @@
import { gql } from '@urql/core'
export default gql`
query MyDraftsQuery {
loadDrafts {
authors {
id
slug
name
pic
}
createdAt
body
title
}
}
`

78
src/graphql/types.gen.ts
View File

@ -105,30 +105,6 @@ export type Community = {
slug: Scalars['String']
}
export type DraftCollab = {
authors: Array<Maybe<Scalars['Int']>>
body?: Maybe<Scalars['String']>
chat?: Maybe<Chat>
cover?: Maybe<Scalars['String']>
createdAt: Scalars['Int']
layout?: Maybe<Scalars['String']>
slug?: Maybe<Scalars['String']>
subtitle?: Maybe<Scalars['String']>
title?: Maybe<Scalars['String']>
topics?: Maybe<Array<Maybe<Scalars['String']>>>
updatedAt?: Maybe<Scalars['Int']>
}
export type DraftInput = {
authors?: InputMaybe<Array<InputMaybe<Scalars['Int']>>>
body?: InputMaybe<Scalars['String']>
cover?: InputMaybe<Scalars['String']>
slug?: InputMaybe<Scalars['String']>
subtitle?: InputMaybe<Scalars['String']>
title?: InputMaybe<Scalars['String']>
topics?: InputMaybe<Array<InputMaybe<Scalars['Int']>>>
}
export enum FollowingEntity {
Author = 'AUTHOR',
Community = 'COMMUNITY',
@ -185,29 +161,24 @@ export type MessagesBy = {
export type Mutation = {
confirmEmail: AuthResult
createChat: Result
createDraft: Result
createMessage: Result
createReaction: Result
createShout: Result
createTopic: Result
deleteChat: Result
deleteDraft: Result
deleteMessage: Result
deleteReaction: Result
deleteShout: Result
destroyTopic: Result
draftToShout: Result
follow: Result
getSession: AuthResult
inviteAccept: Result
inviteAuthor: Result
markAsRead: Result
publishShout: Result
rateUser: Result
registerUser: AuthResult
sendLink: Result
unfollow: Result
updateChat: Result
updateDraft: Result
updateMessage: Result
updateOnlineStatus: Result
updateProfile: Result
@ -225,10 +196,6 @@ export type MutationCreateChatArgs = {
title?: InputMaybe<Scalars['String']>
}
export type MutationCreateDraftArgs = {
draft: DraftInput
}
export type MutationCreateMessageArgs = {
body: Scalars['String']
chat: Scalars['String']
@ -251,10 +218,6 @@ export type MutationDeleteChatArgs = {
chatId: Scalars['String']
}
export type MutationDeleteDraftArgs = {
draft: Scalars['Int']
}
export type MutationDeleteMessageArgs = {
chatId: Scalars['String']
id: Scalars['Int']
@ -272,29 +235,21 @@ export type MutationDestroyTopicArgs = {
slug: Scalars['String']
}
export type MutationDraftToShoutArgs = {
draft: Scalars['Int']
}
export type MutationFollowArgs = {
slug: Scalars['String']
what: FollowingEntity
}
export type MutationInviteAcceptArgs = {
draft: Scalars['Int']
}
export type MutationInviteAuthorArgs = {
author: Scalars['Int']
draft: Scalars['Int']
}
export type MutationMarkAsReadArgs = {
chatId: Scalars['String']
ids: Array<InputMaybe<Scalars['Int']>>
}
export type MutationPublishShoutArgs = {
inp: ShoutInput
slug: Scalars['String']
}
export type MutationRateUserArgs = {
slug: Scalars['String']
value: Scalars['Int']
@ -321,10 +276,6 @@ export type MutationUpdateChatArgs = {
chat: ChatInput
}
export type MutationUpdateDraftArgs = {
draft: DraftInput
}
export type MutationUpdateMessageArgs = {
body: Scalars['String']
chatId: Scalars['String']
@ -342,6 +293,7 @@ export type MutationUpdateReactionArgs = {
export type MutationUpdateShoutArgs = {
inp: ShoutInput
slug: Scalars['String']
}
export type MutationUpdateTopicArgs = {
@ -380,7 +332,7 @@ export type Query = {
isEmailUsed: Scalars['Boolean']
loadAuthorsBy: Array<Maybe<Author>>
loadChats: Result
loadDrafts: Array<Maybe<DraftCollab>>
loadDrafts: Array<Maybe<Shout>>
loadMessagesBy: Result
loadReactionsBy: Array<Maybe<Reaction>>
loadRecipients: Result
@ -388,6 +340,7 @@ export type Query = {
loadShouts: Array<Maybe<Shout>>
markdownBody: Scalars['String']
myFeed?: Maybe<Array<Maybe<Shout>>>
publishShout: Array<Maybe<Shout>>
searchMessages: Result
searchRecipients: Result
signIn: AuthResult
@ -424,6 +377,10 @@ export type QueryLoadChatsArgs = {
offset?: InputMaybe<Scalars['Int']>
}
export type QueryLoadDraftsArgs = {
options?: InputMaybe<LoadShoutsOptions>
}
export type QueryLoadMessagesByArgs = {
by: MessagesBy
limit?: InputMaybe<Scalars['Int']>
@ -457,6 +414,10 @@ export type QueryMyFeedArgs = {
options?: InputMaybe<LoadShoutsOptions>
}
export type QueryPublishShoutArgs = {
slug: Scalars['String']
}
export type QuerySearchMessagesArgs = {
by: MessagesBy
limit?: InputMaybe<Scalars['Int']>
@ -583,8 +544,6 @@ export type Result = {
chats?: Maybe<Array<Maybe<Chat>>>
communities?: Maybe<Array<Maybe<Community>>>
community?: Maybe<Community>
draft?: Maybe<DraftCollab>
drafts?: Maybe<Array<Maybe<DraftCollab>>>
error?: Maybe<Scalars['String']>
members?: Maybe<Array<Maybe<ChatMember>>>
message?: Maybe<Message>
@ -596,7 +555,6 @@ export type Result = {
slugs?: Maybe<Array<Maybe<Scalars['String']>>>
topic?: Maybe<Topic>
topics?: Maybe<Array<Maybe<Topic>>>
uids?: Maybe<Array<Maybe<Scalars['String']>>>
}
export type Role = {
@ -634,7 +592,7 @@ export type Shout = {
export type ShoutInput = {
authors?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
body: Scalars['String']
body?: InputMaybe<Scalars['String']>
community?: InputMaybe<Scalars['Int']>
mainTopic?: InputMaybe<Scalars['String']>
slug?: InputMaybe<Scalars['String']>

21
src/pages/create.page.tsx
View File

@ -1,22 +1,19 @@
import { lazy, Show, Suspense } from 'solid-js'
import { PageLayout } from '../components/_shared/PageLayout'
import { Loading } from '../components/_shared/Loading'
import { useSession } from '../context/session'
const CreateView = lazy(() => import('../components/Views/Create'))
import { onMount } from 'solid-js'
import { apiClient } from '../utils/apiClient'
import { router } from '../stores/router'
import { redirectPage } from '@nanostores/router'
export const CreatePage = () => {
const { isAuthenticated, isSessionLoaded } = useSession()
onMount(async () => {
const shout = await apiClient.createArticle({ article: {} })
redirectPage(router, 'edit', { shoutSlug: shout.slug })
})
return (
<PageLayout>
<Show when={isSessionLoaded()}>
<Show when={isAuthenticated()} fallback="Давайте авторизуемся">
<Suspense fallback={<Loading />}>
<CreateView />
</Suspense>
</Show>
</Show>
<Loading />
</PageLayout>
)
}

2
src/pages/createSettings.page.route.ts → src/pages/drafts.page.route.ts
View File

@ -1,4 +1,4 @@
import { ROUTES } from '../stores/router'
import { getServerRoute } from '../utils/getServerRoute'
export default getServerRoute(ROUTES.createSettings)
export default getServerRoute(ROUTES.drafts)

34
src/pages/drafts.page.tsx Normal file
View File

@ -0,0 +1,34 @@
import { createSignal, For, onMount, Show } from 'solid-js'
import { PageLayout } from '../components/_shared/PageLayout'
import { useSession } from '../context/session'
import { Shout } from '../graphql/types.gen'
import { apiClient } from '../utils/apiClient'
export const DraftsPage = () => {
const { isAuthenticated, isSessionLoaded, user } = useSession()
const [drafts, setDrafts] = createSignal<Shout[]>([])
onMount(async () => {
const loadedDrafts = await apiClient.getShouts({
filters: {
author: user().slug,
visibility: 'owner'
},
limit: 9999
})
setDrafts(loadedDrafts)
})
return (
<PageLayout>
<Show when={isSessionLoaded()}>
<Show when={isAuthenticated()} fallback="Давайте авторизуемся">
<For each={drafts()}>{(draft) => <div>{draft.title}</div>}</For>
</Show>
</Show>
</PageLayout>
)
}
export const Page = DraftsPage

4
src/pages/edit.page.route.ts Normal file
View File

@ -0,0 +1,4 @@
import { ROUTES } from '../stores/router'
import { getServerRoute } from '../utils/getServerRoute'
export default getServerRoute(ROUTES.edit)

40
src/pages/edit.page.tsx Normal file
View File

@ -0,0 +1,40 @@
import { createMemo, createSignal, lazy, onMount, Show, Suspense } from 'solid-js'
import { PageLayout } from '../components/_shared/PageLayout'
import { Loading } from '../components/_shared/Loading'
import { useSession } from '../context/session'
import { Shout } from '../graphql/types.gen'
import { useRouter } from '../stores/router'
import { apiClient } from '../utils/apiClient'
const EditView = lazy(() => import('../components/Views/Edit'))
export const EditPage = () => {
const { isAuthenticated, isSessionLoaded } = useSession()
const { page } = useRouter()
const shoutSlug = createMemo(() => (page().params as Record<'shoutSlug', string>).shoutSlug)
const [shout, setShout] = createSignal<Shout>(null)
onMount(async () => {
const loadedShout = await apiClient.getShout(shoutSlug())
setShout(loadedShout)
})
return (
<PageLayout>
<Show when={isSessionLoaded()}>
<Show when={isAuthenticated()} fallback="Давайте авторизуемся">
<Show when={shout()}>
<Suspense fallback={<Loading />}>
<EditView shout={shout()} />
</Suspense>
</Show>
</Show>
</Show>
</PageLayout>
)
}
export const Page = EditPage

4
src/pages/editSettings.page.route.ts Normal file
View File

@ -0,0 +1,4 @@
import { ROUTES } from '../stores/router'
import { getServerRoute } from '../utils/getServerRoute'
export default getServerRoute(ROUTES.editSettings)

8
src/pages/layoutShouts.page.tsx
View File

@ -16,7 +16,7 @@ import { Beside } from '../components/Feed/Beside'
import Slider from '../components/_shared/Slider'
import { Row1 } from '../components/Feed/Row1'
import styles from '../styles/Topic.module.scss'
import { ArticleCard } from '../components/Feed/Card'
import { ArticleCard } from '../components/Feed/ArticleCard'
import { useLocalize } from '../context/localize'
export const PRERENDERED_ARTICLES_COUNT = 21
@ -27,14 +27,16 @@ export const LayoutShoutsPage = (props: PageProps) => {
const getLayout = createMemo<LayoutType>(() => {
const { page: getPage } = useRouter()
const page = getPage()
if (page.route !== 'expo') throw new Error('ts guard')
if (page.route !== 'expo') {
throw new Error('ts guard')
}
const { layout } = page.params
return layout as LayoutType
})
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
const { sortedLayoutShouts, loadLayoutShoutsBy } = useLayoutsStore(getLayout(), props.layoutShouts)
const sortedArticles = createMemo<Shout[]>(() => sortedLayoutShouts().get(getLayout()) || [])
const loadMoreLayout = async (kind: LayoutType) => {
const loadMoreLayout = async (_kind: LayoutType) => {
saveScrollPosition()
const { hasMore } = await loadLayoutShoutsBy({
// filters: { layout: kind },

6
src/renderer/_default.page.client.tsx
View File

@ -4,7 +4,7 @@ import { hydrate } from 'solid-js/web'
import type { PageContextBuiltInClient } from 'vite-plugin-ssr/client/router'
import type { PageContext } from './types'
import { MetaProvider } from '@solidjs/meta'
import i18next from 'i18next'
import { use as useI18next, init as initI18next } from 'i18next'
import HttpApi from 'i18next-http-backend'
let layoutReady = false
@ -12,8 +12,8 @@ let layoutReady = false
export const render = async (pageContext: PageContextBuiltInClient & PageContext) => {
const { lng, pageProps } = pageContext
i18next.use(HttpApi)
await i18next.init({
useI18next(HttpApi)
await initI18next({
// debug: true,
supportedLngs: ['ru', 'en'],
fallbackLng: lng,

7
src/renderer/_default.page.server.tsx
View File

@ -4,7 +4,7 @@ import { App } from '../components/App'
import { initRouter } from '../stores/router'
import type { PageContext } from './types'
import { MetaProvider, renderTags } from '@solidjs/meta'
import i18next from 'i18next'
import i18next, { changeLanguage, init as initI18next } from 'i18next'
import ru from '../../public/locales/ru/translation.json'
import en from '../../public/locales/en/translation.json'
import type { Language } from '../context/localize'
@ -31,7 +31,8 @@ export const render = async (pageContext: PageContext) => {
const lng = getLng(pageContext)
if (!i18next.isInitialized) {
i18next.init({
// eslint-disable-next-line import/no-named-as-default-member
await initI18next({
// debug: true,
supportedLngs: ['ru', 'en'],
fallbackLng: lng,
@ -43,7 +44,7 @@ export const render = async (pageContext: PageContext) => {
}
})
} else if (i18next.language !== lng) {
await i18next.changeLanguage(lng)
await changeLanguage(lng)
}
initRouter(pageContext.urlParsed.pathname, pageContext.urlParsed.search)

33
src/stores/editor.ts
View File

@ -1,33 +0,0 @@
import { createStorageSignal } from '@solid-primitives/storage'
import type { Reaction } from '../graphql/types.gen'
import { createSignal } from 'solid-js'
// TODO: store drafts
// import type { Draft } from '../components/EditorExample/store/context'
interface Collab {
authors: string[] // slugs
invites?: string[]
createdAt: Date
body?: string
title?: string
}
export const drafts = createStorageSignal<{ [key: string]: string }>('drafts', {}) // save drafts on device
export const [collabs, setCollabs] = createSignal<Collab[]>([]) // save collabs in backend or in p2p network
export const [editorReactions, setReactions] = createSignal<Reaction[]>([])
/*
TODO: approvals and proposals derived stores
const approvals = computed(
reactions,
(rdict) => Object.values(rdict)
.filter((r: Reaction) => r.kind === ReactionKind.Accept)
)
const proposals = computed<Reaction[], typeof reactions>(
reactions,
(rdict) => Object.values(rdict)
.filter((r: Reaction) => r.kind === ReactionKind.Propose)
)
*/

4
src/stores/router.ts
View File

@ -8,7 +8,9 @@ export const ROUTES = {
inbox: '/inbox',
connect: '/connect',
create: '/create',
createSettings: '/create/settings',
edit: '/edit/:shoutSlug',
editSettings: '/edit/:shoutSlug/settings',
drafts: '/drafts',
topics: '/topics',
topic: '/topic/:slug',
authors: '/authors',

2
src/styles/Feed.scss
View File

@ -25,9 +25,9 @@
}
.comment__details {
display: flex;
@include font-size(1.2rem);
display: flex;
overflow: hidden;
position: relative;
white-space: nowrap;

5
src/styles/Inbox.module.scss
View File

@ -76,10 +76,7 @@ main {
scroll-behavior: smooth;
display: flex;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
inset: 0;
height: 100%;
overflow: auto;
flex-direction: column;

Some files were not shown because too many files have changed in this diff Show More