fixes and lint

public/icons/expand.svg

@@ -0,0 +1,2 @@
+<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 12.8999L0.100098 3L2.57507 0.525024L10.0002 7.95013L17.4246 0.525716L19.8996 3.00069L12.4747 10.4256L12.4745 10.4254L10 12.8999Z" fill="#000"/></svg>

src/components/Discours/Footer.module.scss

@@ -61,7 +61,7 @@
   padding-top: 1.6rem;
 
   a {
-    color: rgba(255, 255, 255, 0.7);
+    color: rgb(255 255 255 / 70%);
 
     &:hover {
       color: #fff;

src/components/Discours/Subscribe.tsx

@@ -1,4 +1,4 @@
-import { createSignal, onMount } from 'solid-js'
+import { createSignal } from 'solid-js'
 import styles from './Subscribe.module.scss'
 import { t } from '../../utils/intl'
 import { clsx } from 'clsx'

src/components/EditorExample/components/Sidebar.tsx

@@ -9,7 +9,6 @@ import { clsx } from 'clsx'
 import styles from './Sidebar.module.scss'
 import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
 import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
-import { hideModal } from '../../../stores/ui'
 
 const Off = (props) => <div class={styles.sidebarOff}>{props.children}</div>
 

src/components/EditorNew/Editor.tsx

@@ -1,21 +1,15 @@
-import { createSignal, onMount } from 'solid-js'
+import { onMount } from 'solid-js'
 import { EditorState, Transaction } from 'prosemirror-state'
 import { EditorView, MarkViewConstructor, NodeViewConstructor } from 'prosemirror-view'
 import './prosemirror/styles/ProseMirror.scss'
 import type { Nodes, Marks } from './prosemirror/schema'
 import { createImageView } from './prosemirror/views/image'
-import { MarkdownSerializer } from 'prosemirror-markdown'
 import { schema } from './prosemirror/schema'
 import { createPlugins } from './prosemirror/plugins'
-
-import debounce from 'lodash/debounce'
 import { DOMSerializer } from 'prosemirror-model'
 import { clsx } from 'clsx'
-import styles from '../Nav/AuthModal/AuthModal.module.scss'
-import { t } from '../../utils/intl'
-import { apiClient } from '../../utils/apiClient'
 import { createArticle } from '../../stores/zine/articles'
-import type { InputMaybe, Scalars, ShoutInput } from '../../graphql/types.gen'
+import type { ShoutInput } from '../../graphql/types.gen'
 import { Sidebar } from './Sidebar'
 
 const htmlContainer = typeof document === 'undefined' ? null : document.createElement('div')
@@ -27,9 +21,6 @@ const getHtml = (state: EditorState) => {
 }
 
 export const Editor = () => {
-  const [markdown, setMarkdown] = createSignal('')
-  const [html, setHtml] = createSignal('')
-
   const editorElRef: {
     current: HTMLDivElement
   } = {
@@ -38,19 +29,9 @@ export const Editor = () => {
 
   const editorViewRef: { current: EditorView } = { current: null }
 
-  const update = (state: EditorState) => {
-    const newHtml = getHtml(state)
-    setHtml(newHtml)
-    // setMarkdown(state.toJSON())
-    // const el = document.createElement('div')
-  }
-
-  const debouncedUpdate = debounce(update, 500)
-
   const dispatchTransaction = (tr: Transaction) => {
     const newState = editorViewRef.current.state.apply(tr)
     editorViewRef.current.updateState(newState)
-    debouncedUpdate(newState)
   }
 
   onMount(async () => {
@@ -88,12 +69,8 @@ export const Editor = () => {
     <div class="container" style={{ display: 'flex' }}>
       <div style={{ flex: 1 }}>
         <div ref={(el) => (editorElRef.current = el)} />
-        <div>Markdown:</div>
-        <div>{markdown()}</div>
-        <div>HTML:</div>
-        <div>{html()}</div>
         <button class={clsx('button')} onClick={handleSaveButtonClick}>
-          Опубликовать
+          Опубликовать WIP
         </button>
       </div>
       <Sidebar editorViewRef={editorViewRef} />

src/components/EditorNew/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { For, Show, createEffect, createSignal, onCleanup, onMount } from 'solid-js'
+import { For, createEffect, createSignal, onCleanup, onMount } from 'solid-js'
 import type { JSX } from 'solid-js'
 import { undo, redo } from 'prosemirror-history'
 import { clsx } from 'clsx'

src/components/EditorNew/prosemirror/plugins/index.ts

@@ -1,5 +1,3 @@
-import { keymap } from 'prosemirror-keymap'
-import { baseKeymap } from 'prosemirror-commands'
 import { history } from 'prosemirror-history'
 import { dropCursor } from 'prosemirror-dropcursor'
 import { placeholder } from './placeholder'

src/components/Feed/Beside.module.scss

@@ -12,6 +12,8 @@
   }
 
   li {
+    margin-bottom: 1em;
+
     &.top {
       border-bottom: 1px solid #e1e1e1;
       display: flex;

src/components/Nav/Modal.scss

@@ -1,11 +1,12 @@
 .modalwrap {
-  pointer-events: all;
   align-items: center;
   background: rgb(20 20 20 / 70%);
   display: flex;
   justify-content: center;
   height: 100%;
   left: 0;
+  overflow: auto;
+  pointer-events: all;
   position: fixed;
   top: 0;
   width: 100%;

src/components/Nav/Modal.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'
+import { createEffect, createSignal, Show } from 'solid-js'
 import type { JSX } from 'solid-js'
 import { getLogger } from '../../utils/logger'
 import './Modal.scss'

src/components/Nav/Popup.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, JSX, onCleanup, onMount, Show } from 'solid-js'
+import { createEffect, createSignal, JSX, Show } from 'solid-js'
 import styles from './Popup.module.scss'
 import { clsx } from 'clsx'
 import { useOutsideClickHandler } from '../../utils/useOutsideClickHandler'

src/components/Nav/ProfileModal.tsx

@@ -15,6 +15,7 @@ export default () => {
 
   const author = createMemo<Author>(() => {
     const a: Author = {
+      id: null,
       name: 'anonymous',
       userpic: '',
       slug: ''

src/components/Topic/Card.module.scss

@@ -82,6 +82,7 @@
 
 .topicDetailsItem {
   @include font-size(1.5rem);
+
   margin-right: 1.6rem;
   white-space: nowrap;
 

src/components/Topic/Full.module.scss

@@ -1,11 +1,19 @@
-.topic__header {
+.topicHeader {
   @include font-size(1.7rem);
 
   padding-top: 5.8rem;
   text-align: center;
+
+  h1 {
+    color: #2638d9;
+    font-weight: 500;
+    text-transform: uppercase;
+
+    @include font-size(2rem);
+  }
 }
 
-.topic__actions {
+.topicActions {
   margin-top: 2.8rem;
 
   button,

src/components/Topic/Full.tsx

@@ -1,10 +1,11 @@
 import { createMemo, Show } from 'solid-js'
 import type { Topic } from '../../graphql/types.gen'
 import { FollowingEntity } from '../../graphql/types.gen'
-import './Full.scss'
+import styles from './Full.module.scss'
 import { useAuthStore } from '../../stores/auth'
 import { follow, unfollow } from '../../stores/zine/common'
 import { t } from '../../utils/intl'
+import { clsx } from 'clsx'
 
 type Props = {
   topic: Topic
@@ -15,37 +16,35 @@ export const FullTopic = (props: Props) => {
 
   const subscribed = createMemo(() => session()?.news?.topics?.includes(props.topic?.slug))
   return (
-    <div class="topic-full container">
-      <div class="row">
-        <Show when={!!props.topic?.slug}>
-          <div class="topic__header col-md-8 offset-md-2">
-            <h1>#{props.topic.title}</h1>
-            <p>{props.topic.body}</p>
-            <div class="topic__actions">
-              <Show when={!subscribed()}>
-                <button
-                  onClick={() => follow({ what: FollowingEntity.Topic, slug: props.topic.slug })}
-                  class="button"
-                >
-                  {t('Follow the topic')}
-                </button>
-              </Show>
-              <Show when={subscribed()}>
-                <button
-                  onClick={() => unfollow({ what: FollowingEntity.Topic, slug: props.topic.slug })}
-                  class="button"
-                >
-                  {t('Unfollow the topic')}
-                </button>
-              </Show>
-              <a href={`/create/${props.topic.slug}`}>{t('Write about the topic')}</a>
-            </div>
-            <Show when={props.topic.pic}>
-              <img src={props.topic.pic} alt={props.topic.title} />
+    <div class={styles.topicFull}>
+      <Show when={!!props.topic?.slug}>
+        <div class={clsx(styles.topicHeader, 'col-md-8 offset-md-2')}>
+          <h1>#{props.topic.title}</h1>
+          <p>{props.topic.body}</p>
+          <div class={clsx(styles.topicActions)}>
+            <Show when={!subscribed()}>
+              <button
+                onClick={() => follow({ what: FollowingEntity.Topic, slug: props.topic.slug })}
+                class="button"
+              >
+                {t('Follow the topic')}
+              </button>
             </Show>
+            <Show when={subscribed()}>
+              <button
+                onClick={() => unfollow({ what: FollowingEntity.Topic, slug: props.topic.slug })}
+                class="button"
+              >
+                {t('Unfollow the topic')}
+              </button>
+            </Show>
+            <a href={`/create/${props.topic.slug}`}>{t('Write about the topic')}</a>
           </div>
-        </Show>
-      </div>
+          <Show when={props.topic.pic}>
+            <img src={props.topic.pic} alt={props.topic.title} />
+          </Show>
+        </div>
+      </Show>
     </div>
   )
 }

src/components/Views/Author.tsx

@@ -7,7 +7,6 @@ import { t } from '../../utils/intl'
 import { useAuthorsStore } from '../../stores/zine/authors'
 import { loadAuthorArticles, useArticlesStore } from '../../stores/zine/articles'
 
-import '../../styles/Topic.scss'
 import { useTopicsStore } from '../../stores/zine/topics'
 import { useRouter } from '../../stores/router'
 import { Beside } from '../Feed/Beside'

src/components/Views/Topic.tsx

@@ -3,7 +3,6 @@ import type { Shout, Topic } from '../../graphql/types.gen'
 import { Row3 } from '../Feed/Row3'
 import { Row2 } from '../Feed/Row2'
 import { Beside } from '../Feed/Beside'
-import { ArticleCard } from '../Feed/Card'
 import styles from '../../styles/Topic.module.scss'
 import { FullTopic } from '../Topic/Full'
 import { t } from '../../utils/intl'

src/graphql/types.gen.ts

@@ -24,6 +24,7 @@ export type AuthResult = {
 export type Author = {
   bio?: Maybe<Scalars['String']>
   caption?: Maybe<Scalars['String']>
+  id: Scalars['Int']
   links?: Maybe<Array<Maybe<Scalars['String']>>>
   name: Scalars['String']
   slug: Scalars['String']
@@ -69,6 +70,7 @@ export type Collection = {
   createdAt: Scalars['DateTime']
   createdBy: User
   desc?: Maybe<Scalars['String']>
+  id: Scalars['Int']
   publishedAt?: Maybe<Scalars['DateTime']>
   slug: Scalars['String']
   title: Scalars['String']
@@ -84,6 +86,7 @@ export type Community = {
   createdAt: Scalars['DateTime']
   createdBy: User
   desc?: Maybe<Scalars['String']>
+  id: Scalars['Int']
   name: Scalars['String']
   pic: Scalars['String']
   slug: Scalars['String']
@@ -329,10 +332,12 @@ export type ProfileInput = {
 export type Query = {
   authorsAll: Array<Maybe<User>>
   collectionsAll: Array<Maybe<Collection>>
+  getAuthor: User
   getCollabs: Array<Maybe<Collab>>
   getCommunities: Array<Maybe<Community>>
   getCommunity: Community
   getShoutBySlug: Shout
+  getTopic: Topic
   getUserCollections: Array<Maybe<Collection>>
   getUserRoles: Array<Maybe<Role>>
   getUsersBySlugs: Array<Maybe<User>>
@@ -371,6 +376,10 @@ export type Query = {
   userReactedShouts: Array<Maybe<Shout>>
 }
 
+export type QueryGetAuthorArgs = {
+  slug: Scalars['String']
+}
+
 export type QueryGetCommunityArgs = {
   slug?: InputMaybe<Scalars['String']>
 }
@@ -379,6 +388,10 @@ export type QueryGetShoutBySlugArgs = {
   slug: Scalars['String']
 }
 
+export type QueryGetTopicArgs = {
+  slug: Scalars['String']
+}
+
 export type QueryGetUserCollectionsArgs = {
   author: Scalars['String']
 }

src/styles/Topic.module.scss

@@ -1,11 +1,11 @@
-.topic-page {
-  .group__controls {
+.topicPage {
+  .groupControls {
     align-items: baseline;
     margin-bottom: 4rem;
     margin-top: 7rem;
   }
 
-  .floor--important {
+  .floorImportant {
     a:hover {
       background: #fff;
       color: #000 !important;

src/styles/app.scss

@@ -487,7 +487,7 @@ figcaption {
 
   a {
     border-bottom: 2px solid #fff;
-    color: rgba(0, 0, 0, 0.5);
+    color: rgb(0 0 0 / 50%);
 
     &:hover {
       color: #fff;
@@ -746,7 +746,7 @@ details {
       cursor: pointer;
       margin-bottom: 0;
 
-      &:before {
+      &::before {
         content: '';
         background: url(/icons/expand.svg) no-repeat;
         background-size: contain;
@@ -762,7 +762,7 @@ details {
   }
 
   &[open] {
-    h3:before {
+    h3::before {
       transform: rotate(180deg);
     }
   }

src/utils/useOutsideClickHandler.ts

@@ -17,7 +17,7 @@ export const useOutsideClickHandler = (options: Options) => {
       return
     }
 
-    options.handler()
+    handler()
   }
 
   onMount(() => {