lint

.eslintrc.js

@@ -27,7 +27,7 @@ module.exports = {
         // 'plugin:@typescript-eslint/recommended-requiring-type-checking'
       ],
       rules: {
-        'no-unused-vars': [
+        '@typescript-eslint/no-unused-vars': [
           'warn',
           {
             argsIgnorePattern: '^_',
@@ -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
@@ -77,14 +77,7 @@ module.exports = {
     eqeqeq: 'error',
     'no-param-reassign': 'error',
     'no-nested-ternary': 'error',
-    'no-shadow': 'error',
-    'no-unused-vars': [
-      'warn',
-      {
-        argsIgnorePattern: '^_',
-        varsIgnorePattern: '^log$'
-      }
-    ]
+    'no-shadow': 'error'
   },
   settings: {
     'import/resolver': {

.stylelintrc

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

.stylelintrc.bak

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

src/components/App.tsx

@@ -35,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'
@@ -49,6 +50,7 @@ const pagesMap: Record<keyof typeof ROUTES, Component<PageProps>> = {
   create: CreatePage,
   edit: EditPage,
   editSettings: EditPage,
+  drafts: DraftsPage,
   home: HomePage,
   topics: AllTopicsPage,
   topic: TopicPage,

src/components/Article/Article.module.scss

@@ -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;
 }
@@ -166,10 +166,6 @@ img {
     max-height: 1.8em;
   }
 
-  .shoutStatsItemInner .iconEdit {
-    margin-right: 0.3em;
-  }
-
   img {
     display: block;
   }
@@ -177,6 +173,7 @@ img {
   a {
     border: none;
     text-decoration: none;
+
     &:hover {
       background: unset;
       color: #000;
@@ -189,9 +186,9 @@ img {
 }
 
 .shoutStatsItemInner {
-  cursor: pointer;
   margin: -0.3em -0.3em 0;
   padding: 0.3em;
+  cursor: pointer;
 
   .icon {
     margin-right: 0;
@@ -201,24 +198,6 @@ img {
     margin-right: 0.3em;
   }
 
-  &:hover {
-    background: #000;
-    cursor: pointer;
-    img {
-      filter: invert(1);
-    }
-  }
-}
-
-.shoutStatsItemInner {
-  cursor: pointer;
-  margin: -0.3em -0.3em 0;
-  padding: 0.3em;
-
-  .icon {
-    margin-right: 0;
-  }
-
   &:hover {
     background: #000;
 

src/components/Article/AudioPlayer.tsx

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

src/components/Article/Comment.module.scss

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

src/components/Article/Comment.tsx

@@ -1,6 +1,6 @@
 import styles from './Comment.module.scss'
 import { Icon } from '../_shared/Icon'
-import { AuthorCard } from '../Author/Card'
+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'

src/components/Article/CommentRatingControl.module.scss

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

src/components/Article/FullArticle.tsx

@@ -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'
@@ -13,7 +13,7 @@ import { useSession } from '../../context/session'
 import VideoPlayer from './VideoPlayer'
 import Slider from '../_shared/Slider'
 import { getPagePath } from '@nanostores/router'
-import { router } from '../../stores/router'
+import { router, useRouter } from '../../stores/router'
 import { useReactions } from '../../context/reactions'
 import { Title } from '@solidjs/meta'
 import { useLocalize } from '../../context/localize'
@@ -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,7 +229,7 @@ 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>

src/components/Article/ShoutRatingControl.tsx

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

src/components/Author/AuthorCard.module.scss

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

src/components/Author/AuthorCard.tsx

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

src/components/Author/AuthorRatingControl.tsx

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

src/components/Author/Full.tsx

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

src/components/Author/Userpic.tsx

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

src/components/Discours/Footer.module.scss

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

src/components/Discours/Hero.scss

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

src/components/Discours/ProfileSettingsNavigation.module.scss

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

src/components/Discours/Subscribe.module.scss

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

src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.module.scss

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

src/components/Editor/EditorBubbleMenu/LinkForm/LinkForm.module.scss

@@ -3,8 +3,7 @@
 
   .form {
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
+    flex-flow: row nowrap;
     padding: 6px 11px;
 
     input {
@@ -18,6 +17,7 @@
       &::placeholder {
         color: rgba(#000, 0.3);
       }
+
       &:focus {
         outline: none;
       }

src/components/Editor/EditorFloatingMenu.tsx

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

src/components/Editor/InlineForm/InlineForm.module.scss

@@ -2,7 +2,7 @@
   position: relative;
 
   &.inBubble {
-    //...
+    // ...
   }
 
   &.inFloating {
@@ -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;
       }

src/components/Editor/InlineForm/InlineForm.tsx

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

src/components/Editor/Panel/Panel.module.scss

@@ -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 {
@@ -79,7 +79,7 @@
   }
 
   a {
-    color: rgb(255 255 255 / 0.35);
+    color: rgb(255 255 255 / 35%);
     font-weight: normal !important;
 
     &:hover {
@@ -87,6 +87,7 @@
       color: #fff;
     }
   }
+
   &.hidden {
     transform: translateX(100%);
   }

src/components/Editor/Panel/Panel.tsx

@@ -6,11 +6,11 @@ import { useLocalize } from '../../../context/localize'
 import styles from './Panel.module.scss'
 import { useEditorContext } from '../../../context/editor'
 
-type Props = {
-  // isVisible: boolean
-}
+// type Props = {
+//   // isVisible: boolean
+// }
 
-export const Panel = (props: Props) => {
+export const Panel = () => {
   const { t } = useLocalize()
   const {
     isEditorPanelVisible,

src/components/Editor/Prosemirror.scss

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

src/components/Editor/TopicSelect/TopicSelect.tsx

@@ -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[]

src/components/Editor/extensions/embed.ts

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

src/components/EditorNew/Sidebar.module.scss

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

src/components/EditorNew/prosemirror/styles/ProseMirror.scss

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

src/components/Feed/ArticleCard.module.scss

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

src/components/Feed/ArticleCard.tsx

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

src/components/Feed/Beside.module.scss

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

src/components/Feed/Beside.tsx

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

src/components/Feed/Group.tsx

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

src/components/Feed/List.scss

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

src/components/Feed/List.tsx

@@ -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: () => 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>
-  )
-}

src/components/Feed/Row1.tsx

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

src/components/Feed/Row2.tsx

@@ -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'],

src/components/Feed/Row3.tsx

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

src/components/Feed/Row5.tsx

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

src/components/Feed/RowShort.tsx

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

src/components/Feed/Sidebar/Sidebar.module.scss

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

src/components/Feed/Sidebar/Sidebar.tsx

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

src/components/Inbox/MessageActionsPopup.tsx

@@ -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 }[] = [

src/components/Nav/AuthModal/AuthModal.module.scss

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

src/components/Nav/Header.module.scss

@@ -130,10 +130,11 @@
   display: inline-flex;
   font-weight: 500;
   position: relative;
-  //flex: 1 100% !important;
+
+  // flex: 1 100% !important;
 
   // replace row > * selector to remove !important
-  //width: auto !important;
+  // width: auto !important;
 
   @include media-breakpoint-down(md) {
     flex: 1;
@@ -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 {
+      // padding: 0 1.2rem;
+
       display: inline;
-      //padding: 0 1.2rem;
       position: relative;
       z-index: 1;
     }

src/components/Nav/HeaderAuth.tsx

@@ -7,14 +7,13 @@ 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'
 import { useLocalize } from '../../context/localize'
 import { getPagePath } from '@nanostores/router'
 import { Button } from '../_shared/Button'
-import { useEditorContext } from '../../context/editor'
+// import { useEditorContext } from '../../context/editor'
 
 type HeaderAuthProps = {
   setIsProfilePopupVisible: (value: boolean) => void
@@ -28,9 +27,9 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
 
   const { session, isSessionLoaded, isAuthenticated } = useSession()
 
-  const {
-    actions: { toggleEditorPanel }
-  } = useEditorContext()
+  // const {
+  //   actions: { toggleEditorPanel }
+  // } = useEditorContext()
 
   const toggleWarnings = () => setVisibleWarnings(!visibleWarnings())
 
@@ -50,6 +49,12 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
   const showSaveButton = createMemo(() => isAuthenticated() && isEditorPage())
   const showCreatePostButton = createMemo(() => isAuthenticated() && !isEditorPage())
 
+  // eslint-disable-next-line unicorn/consistent-function-scoping
+  const handleBurgerButtonClick = () => {
+    // TODO: implement me
+    console.log('Burger clicked')
+  }
+
   return (
     <ShowOnlyOnClient>
       <Show when={isSessionLoaded()} keyed={true}>
@@ -100,7 +105,11 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
               </div>
 
               <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
-                <Button value={<Icon name="burger" />} variant={'outline'} onClick={() => {}} />
+                <Button
+                  value={<Icon name="burger" />}
+                  variant={'outline'}
+                  onClick={handleBurgerButtonClick}
+                />
               </div>
             </Show>
 

src/components/Nav/Modal.module.scss

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

src/components/Nav/ProfileModal.tsx

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

src/components/Topic/Card.module.scss

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

src/components/Views/AllAuthors.tsx

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

src/components/Views/Author.tsx

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

src/components/Views/Edit.module.scss

@@ -58,7 +58,7 @@
 
 .asidePanel {
   background: #1f1f1f;
-  color: rgb(255 255 255 / 0.35);
+  color: rgb(255 255 255 / 35%);
   display: flex;
   flex-direction: column;
   font-size: 1.7rem;
@@ -78,8 +78,9 @@
   }
 
   section {
-    border-bottom: 2px solid rgb(255 255 255 / 0.1);
-    //margin-bottom: 1.8rem;
+    border-bottom: 2px solid rgb(255 255 255 / 10%);
+
+    // margin-bottom: 1.8rem;
     margin-top: 1.8rem;
     padding-bottom: 1.8rem;
 
@@ -125,7 +126,7 @@
   }
 
   a {
-    color: rgb(255 255 255 / 0.35);
+    color: rgb(255 255 255 / 35%);
     font-weight: normal !important;
 
     &:hover {

src/components/Views/Edit.tsx

@@ -55,12 +55,7 @@ export const EditView = (props: EditViewProps) => {
   const handleFormSubmit = async (e) => {
     e.preventDefault()
 
-    const article = await apiClient.updateArticle({
-      article: {
-        slug: props.shout.slug,
-        visibility: 'community'
-      }
-    })
+    const article = await apiClient.publishDraft()
 
     openPage(router, 'article', { slug: article.slug })
   }

src/components/Views/Feed.module.scss

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

src/components/Views/Feed.tsx

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

src/components/Views/Home.tsx

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

src/components/Views/Inbox.tsx

@@ -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 {
-    //   setRecipients(cashedRecipients())
-    // }
+    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()

src/components/Views/Search.tsx

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

src/components/Views/Topic.tsx

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

src/components/_shared/VotersList/VotersList.module.scss

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

src/context/localize.tsx

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

src/context/session.tsx

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

src/pages/drafts.page.tsx

@@ -1,8 +1,7 @@
-import { createMemo, createSignal, For, lazy, onMount, Show, Suspense } from 'solid-js'
+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 { useRouter } from '../stores/router'
 import { apiClient } from '../utils/apiClient'
 
 export const DraftsPage = () => {

src/pages/layoutShouts.page.tsx

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

src/renderer/_default.page.client.tsx

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

src/renderer/_default.page.server.tsx

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

src/styles/Feed.scss

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

src/styles/Inbox.module.scss

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

src/styles/Search.scss

@@ -15,10 +15,10 @@
   }
 
   input {
-    border: none;
-    border-bottom: 1px solid #ccc;
     @include font-size(4rem);
 
+    border: none;
+    border-bottom: 1px solid #ccc;
     height: 100%;
   }
 

src/styles/app.scss

@@ -239,10 +239,10 @@ button {
 }
 
 .button--light {
-  background-color: #f6f6f6;
-  color: #000;
   @include font-size(1.5rem);
 
+  background-color: #f6f6f6;
+  color: #000;
   font-weight: 400;
   height: auto;
   padding: 0.6rem 1.2rem 0.6rem 1rem;
@@ -324,6 +324,7 @@ button {
 .button--submit,
 .button--outline {
   @include font-size(2rem);
+
   padding: 1.6rem 2rem;
 }
 
@@ -499,8 +500,9 @@ figure {
 }
 
 figcaption {
-  color: #9fa1a7;
   @include font-size(1.2rem);
+
+  color: #9fa1a7;
 }
 
 .view-switcher {

src/utils/apiClient.ts

@@ -253,6 +253,34 @@ export const apiClient = {
     console.debug('[updateArticle]:', response.data)
     return response.data.updateArticle.shout
   },
+  publishDraft: async (): Promise<Shout> => {
+    console.log('publishDraft')
+    return {
+      authors: undefined,
+      body: '',
+      community: '',
+      cover: '',
+      createdAt: undefined,
+      deletedAt: undefined,
+      deletedBy: undefined,
+      id: 0,
+      lang: '',
+      layout: '',
+      mainTopic: '',
+      media: '',
+      publishedAt: undefined,
+      slug: '',
+      stat: undefined,
+      subtitle: '',
+      title: '',
+      topics: undefined,
+      updatedAt: undefined,
+      updatedBy: undefined,
+      versionOf: '',
+      visibility: ''
+    }
+  },
+
   createReaction: async (input: ReactionInput) => {
     const response = await privateGraphQLClient.mutation(reactionCreate, { reaction: input }).toPromise()
     console.debug('[createReaction]:', response)

vite.config.ts

@@ -36,10 +36,8 @@ export default defineConfig(({ mode }) => {
       rollupOptions: {
         external: []
       },
-      chunkSizeWarningLimit: 812,
+      chunkSizeWarningLimit: 1024,
       target: 'esnext'
-      // FIXME ??
-      // polyfillDynamicImport: false
     }
   }
 })