expo pages (#111)

* layout pages

* lint

* code review, lint, build fix

* lint

public/locales/en/translation.json

@@ -56,11 +56,11 @@
   "Create Chat": "Create Chat",
   "Create Group": "Create a group",
   "Create account": "Create an account",
-  "Create account from subscribe": "Create an account to subscribe to new publications",
-  "Create account from discussions": "Create an account to participate in discussions",
-  "Create account from vote": "Create an account to vote",
   "Create account from bookmark": "Create an account to add to your bookmarks",
+  "Create account from discussions": "Create an account to participate in discussions",
   "Create account from follow": "Create an account to subscribe",
+  "Create account from subscribe": "Create an account to subscribe to new publications",
+  "Create account from vote": "Create an account to vote",
   "Create post": "Create post",
   "Date of Birth": "Date of Birth",
   "Delete": "Delete",
@@ -69,6 +69,7 @@
   "Discours is created with our common effort": "Discours exists because of our common effort",
   "Discussing": "Discussing",
   "Discussion rules": "Discussion rules",
+  "Discussions": "Discussions",
   "Dogma": "Dogma",
   "Drafts": "Drafts",
   "Drag the image to this area": "Drag the image to this area",
@@ -79,11 +80,11 @@
   "Enter URL address": "Enter URL address",
   "Enter text": "Enter text",
   "Enter the Discours": "Enter the Discours",
-  "Enter the Discours from subscribe": "Sign in to subscribe to new publications",
-  "Enter the Discours from discussions": "Sign in to participate in the discussions",
-  "Enter the Discours from vote": "Sign in to vote",
   "Enter the Discours from bookmark": "Sign in to add to bookmarks",
+  "Enter the Discours from discussions": "Sign in to participate in the discussions",
   "Enter the Discours from follow": "Sign in to follow",
+  "Enter the Discours from subscribe": "Sign in to subscribe to new publications",
+  "Enter the Discours from vote": "Sign in to vote",
   "Enter the code or click the link from email to confirm": "Enter the code from the email or follow the link in the email to confirm registration",
   "Enter your new password": "Enter your new password",
   "Error": "Error",
@@ -115,6 +116,7 @@
   "Highlight": "Highlight",
   "Hooray! Welcome!": "Hooray! Welcome!",
   "Horizontal collaborative journalistic platform": "Horizontal collaborative journalism platform",
+  "Hot topics": "Hot topics",
   "Hotkeys": "Горячие клавиши",
   "How can I help/skills": "How can I help/skills",
   "How it works": "How it works",
@@ -127,6 +129,7 @@
   "Incut": "Incut",
   "Independant magazine with an open horizontal cooperation about culture, science and society": "Independant magazine with an open horizontal cooperation about culture, science and society",
   "Insert footnote": "Insert footnote",
+  "Insert video link": "Insert video link",
   "Introduce": "Introduction",
   "Invalid email": "Check if your email is correct",
   "Invalid image URL": "Invalid image URL",
@@ -149,6 +152,7 @@
   "Load more": "Show more",
   "Loading": "Loading",
   "Logout": "Logout",
+  "Looks like you forgot to upload the video": "Looks like you forgot to upload the video",
   "Manifest": "Manifest",
   "Many files, choose only one": "Many files, choose only one",
   "Material card": "Material card",
@@ -165,6 +169,7 @@
   "No such account, please try to register": "No such account found, please try to register",
   "Nothing here yet": "There's nothing here yet",
   "Nothing is here": "There is nothing here",
+  "Notifications": "Notifications",
   "Or continue with social network": "Or continue with social network",
   "Or paste a link to an image": "Or paste a link to an image",
   "Ordered list": "Ordered list",
@@ -256,7 +261,6 @@
   "Top viewed": "Most viewed",
   "Topic is supported by": "Topic is supported by",
   "Topics": "Topics",
-  "Hot topics": "Hot topics",
   "Topics which supported by author": "Topics which supported by author",
   "Try to find another way": "Try to find another way",
   "Unfollow": "Unfollow",
@@ -305,7 +309,6 @@
   "community": "community",
   "delimiter": "delimiter",
   "discussion": "discourse",
-  "Discussions": "Discussions",
   "drafts": "drafts",
   "email not confirmed": "email not confirmed",
   "enter": "enter",
@@ -322,7 +325,6 @@
   "marker list": "marker list",
   "music": "music",
   "my feed": "my ribbon",
-  "Notifications": "Notifications",
   "number list": "number list",
   "personal data usage and email notifications": "to process personal data and receive email notifications",
   "post": "post",
@@ -336,7 +338,5 @@
   "user already exist": "user already exists",
   "video": "video",
   "view": "view",
-  "zine": "zine",
+  "zine": "zine"
-  "Insert video link": "Insert video link",
-  "Looks like you forgot to upload the video": "Looks like you forgot to upload the video"
 }

public/locales/ru/translation.json

@@ -3,6 +3,7 @@
   "A short introduction to keep the reader interested": "Небольшое вступление, чтобы заинтересовать читателя",
   "About myself": "О себе",
   "About the project": "О проекте",
+  "Accomplices": "Соучастники",
   "Add another image": "Добавить другое изображение",
   "Add comment": "Комментировать",
   "Add image": "Добавить изображение",
@@ -58,11 +59,11 @@
   "Create Chat": "Создать чат",
   "Create Group": "Создать группу",
   "Create account": "Создать аккаунт",
-  "Create account from subscribe": "Создайте аккаунт для подписки на новые публикации",
-  "Create account from discussions": "Создайте аккаунт для участия в дискуссиях",
-  "Create account from vote": "Создайте аккаунт, чтобы голосовать",
   "Create account from bookmark": "Создайте аккаунт, чтобы добавить в закладки",
+  "Create account from discussions": "Создайте аккаунт для участия в дискуссиях",
   "Create account from follow": "Создайте аккаунт, чтобы подписаться",
+  "Create account from subscribe": "Создайте аккаунт для подписки на новые публикации",
+  "Create account from vote": "Создайте аккаунт, чтобы голосовать",
   "Create post": "Создать публикацию",
   "Date of Birth": "Дата рождения",
   "Delete": "Удалить",
@@ -71,6 +72,7 @@
   "Discours is created with our common effort": "Дискурс существует благодаря нашему общему вкладу",
   "Discussing": "Обсуждаемое",
   "Discussion rules": "Правила сообществ самиздата в соцсетях",
+  "Discussions": "Дискуссии",
   "Dogma": "Догма",
   "Drafts": "Черновики",
   "Drag the image to this area": "Перетащите изображение в эту область",
@@ -82,11 +84,11 @@
   "Enter URL address": "Введите адрес ссылки",
   "Enter text": "Введите текст",
   "Enter the Discours": "Войти в Дискурс",
-  "Enter the Discours from subscribe": "Войдите для подписки на новые публикации",
-  "Enter the Discours from discussions": "Войдите для участия в дискуссиях",
-  "Enter the Discours from vote": "Войдите, чтобы голосовать",
   "Enter the Discours from bookmark": "Войдите, чтобы добавить в закладки",
+  "Enter the Discours from discussions": "Войдите для участия в дискуссиях",
   "Enter the Discours from follow": "Войдите, чтобы подписаться",
+  "Enter the Discours from subscribe": "Войдите для подписки на новые публикации",
+  "Enter the Discours from vote": "Войдите, чтобы голосовать",
   "Enter the code or click the link from email to confirm": "Введите код из письма или пройдите по ссылке в письме для подтверждения регистрации",
   "Enter your new password": "Введите новый пароль",
   "Error": "Ошибка",
@@ -120,6 +122,7 @@
   "Highlight": "Подсветка",
   "Hooray! Welcome!": "Ура! Добро пожаловать!",
   "Horizontal collaborative journalistic platform": "Горизонтальная платформа для коллаборативной журналистики",
+  "Hot topics": "Горячие темы",
   "Hotkeys": "Горячие клавиши",
   "How can I help/skills": "Чем могу помочь/навыки",
   "How it works": "Как это работает",
@@ -132,6 +135,7 @@
   "Incut": "Подверстка",
   "Independant magazine with an open horizontal cooperation about culture, science and society": "Независимый журнал с открытой горизонтальной редакцией о культуре, науке и обществе",
   "Insert footnote": "Вставить сноску",
+  "Insert video link": "Вставить ссылку на видео",
   "Introduce": "Представление",
   "Invalid email": "Проверьте правильность ввода почты",
   "Invalid image URL": "Некорректная ссылка на изображение",
@@ -156,6 +160,7 @@
   "Load more": "Показать ещё",
   "Loading": "Загрузка",
   "Logout": "Выход",
+  "Looks like you forgot to upload the video": "Похоже, что вы забыли загрузить видео",
   "Manifest": "Манифест",
   "Many files, choose only one": "Много файлов, выберете один",
   "Material card": "Карточка материала",
@@ -172,6 +177,7 @@
   "No such account, please try to register": "Такой адрес не найден, попробуйте зарегистрироваться",
   "Nothing here yet": "Здесь пока ничего нет",
   "Nothing is here": "Здесь ничего нет",
+  "Notifications": "Уведомления",
   "Or continue with social network": "Или войдите через соцсеть",
   "Or paste a link to an image": "Или вставьте ссылку на изображение",
   "Ordered list": "Нумерованный список",
@@ -255,7 +261,7 @@
   "Thank you": "Благодарности",
   "This comment has not yet been rated": "Этот комментарий еще пока никто не оценил",
   "This email is already taken. If it's you": "Такой email уже зарегистрирован. Если это вы",
-  "This functionality is currently not available, we would like to work on this issue. Use the download link.": "В данный момент этот функционал не доступен, бы работаем над этой проблемой. Воспользуйтесь загрузкой по ссылке.",
+  "This functionality is currently not available, we would like to work on this issue. Use the download link.": "В данный момент этот функционал недоступен, мы работаем над этой проблемой. Воспользуйтесь загрузкой по ссылке.",
   "This post has not been rated yet": "Эту публикацию еще пока никто не оценил",
   "To leave a comment please": "Чтобы оставить комментарий, необходимо",
   "To write a comment, you must": "Чтобы написать комментарий, необходимо",
@@ -269,7 +275,6 @@
   "Top viewed": "Самое читаемое",
   "Topic is supported by": "Тему поддерживают",
   "Topics": "Темы",
-  "Hot topics": "Горячие темы",
   "Topics which supported by author": "Автор поддерживает темы",
   "Try to find another way": "Попробуйте найти по-другому",
   "Unfollow": "Отписаться",
@@ -304,7 +309,6 @@
   "You've reached a non-existed page": "Вы попали на несуществующую страницу",
   "You've successfully logged out": "Вы успешно вышли из аккаунта",
   "Your name will appear on your profile page and as your signature in publications, comments and responses.": "Ваше имя появится на странице вашего профиля и как ваша подпись в публикациях, комментариях и откликах",
-  "Accomplices": "Соучастники",
   "actions": "действия",
   "add link": "добавить ссылку",
   "all topics": "все темы",
@@ -323,7 +327,6 @@
   "delimiter": "разделитель",
   "discourse_theme": "Тема дискурса",
   "discussion": "дискурс",
-  "Discussions": "Дискуссии",
   "drafts": "черновики",
   "email not confirmed": "email не подтвержден",
   "enter": "войдите",
@@ -340,7 +343,6 @@
   "marker list": "маркир. список",
   "music": "музыка",
   "my feed": "моя лента",
-  "Notifications": "Уведомления",
   "number list": "нумер. список",
   "or": "или",
   "personal data usage and email notifications": "на обработку персональных данных и на получение почтовых уведомлений",
@@ -358,7 +360,5 @@
   "user already exist": "пользователь уже существует",
   "video": "видео",
   "view": "просмотр",
-  "zine": "журнал",
+  "zine": "журнал"
-  "Insert video link": "Вставить ссылку на видео",
-  "Looks like you forgot to upload the video": "Похоже, что вы забыли загрузить видео"
 }

src/components/Article/Article.module.scss

@@ -1,5 +1,6 @@
 h1 {
   @include font-size(4rem);
+
   line-height: 1.1;
   margin-top: 0.5em;
 }
@@ -154,6 +155,7 @@ img {
 
 .shoutStatsItem {
   @include font-size(1.5rem);
+
   font-weight: 500;
   display: inline-block;
   margin: 0 6% 1em 0;

src/components/Article/Comment.module.scss

@@ -170,8 +170,9 @@
 }
 
 .articleLink {
-  flex: 0 0 50%;
   @include font-size(1.2rem);
+
+  flex: 0 0 50%;
   margin-right: 2em;
 
   @include media-breakpoint-down(md) {

src/components/Article/Comment.tsx

@@ -5,7 +5,6 @@ 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'
-import { formatDate } from '../../utils'
 import Userpic from '../Author/Userpic'
 import { useSession } from '../../context/session'
 import { ReactionKind } from '../../graphql/types.gen'
@@ -78,9 +77,6 @@ export const Comment = (props: Props) => {
     }
   }
 
-  const formattedDate = (date) =>
-    createMemo(() => formatDate(new Date(date), { hour: 'numeric', minute: 'numeric' }))
-
   const toggleEditMode = () => {
     setEditMode((oldEditMode) => !oldEditMode)
   }

src/components/Article/CommentDate.module.scss

@@ -1,4 +1,6 @@
 .commentDates {
+  @include font-size(1.2rem);
+
   flex: 1;
   display: flex;
   gap: 1rem;
@@ -7,7 +9,6 @@
   font-size: 1.2rem;
   margin: 0 1em 4px 0;
   color: rgb(0 0 0 / 30%);
-  @include font-size(1.2rem);
 
   .date {
     .icon {

src/components/Article/CommentDate.tsx

@@ -1,6 +1,6 @@
 import styles from './CommentDate.module.scss'
 import { Icon } from '../_shared/Icon'
-import { Show, createMemo } from 'solid-js'
+import { Show } from 'solid-js'
 import type { Reaction } from '../../graphql/types.gen'
 import { formatDate } from '../../utils'
 import { useLocalize } from '../../context/localize'
@@ -15,10 +15,13 @@ type Props = {
 export const CommentDate = (props: Props) => {
   const { t } = useLocalize()
 
-  const formattedDate = (date) =>
+  const formattedDate = (date) => {
-    props.isShort
+    const formatDateOptions: Intl.DateTimeFormatOptions = props.isShort
-      ? formatDate(new Date(date), { month: 'long', day: 'numeric', year: 'numeric' })
+      ? { month: 'long', day: 'numeric', year: 'numeric' }
-      : createMemo(() => formatDate(new Date(date), { hour: 'numeric', minute: 'numeric' }))
+      : { hour: 'numeric', minute: 'numeric' }
+
+    return formatDate(new Date(date), formatDateOptions)
+  }
 
   return (
     <div class={clsx(styles.commentDates, { [styles.commentDatesLastInRow]: props.isLastInRow })}>

src/components/Author/AuthorCard.tsx

@@ -13,7 +13,6 @@ import { FollowingEntity } from '../../graphql/types.gen'
 import { router, useRouter } from '../../stores/router'
 import { openPage } from '@nanostores/router'
 import { useLocalize } from '../../context/localize'
-import { init } from 'i18next'
 
 interface AuthorCardProps {
   caption?: string

src/components/Discours/Footer.module.scss

@@ -1,5 +1,6 @@
 .discoursFooter {
   @include font-size(1.7rem);
+
   background: #000;
   color: rgb(255 255 255 / 64%);
   padding: 2.4rem 0 4.2rem;

src/components/Discours/Subscribe.module.scss

@@ -1,10 +1,10 @@
 @mixin input-placeholder-overflow($direction: 'down') {
   @if $direction == 'down' {
-    @media (max-width: 1410px) {
+    @media (width <= 1410px) {
       @content;
     }
   } @else if $direction == 'up' {
-    @media (min-width: 1411px) {
+    @media (width > 1410px) {
       @content;
     }
   } @else {
@@ -38,7 +38,7 @@
     margin: 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding: 0.2em 0.5em 0.2em 0.5em;
+    padding: 0.2em 0.5em;
     width: 100%;
     outline: none;
     border: 1px solid #fff;

src/components/Editor/BubbleMenu/BlockquoteBubbleMenu.tsx

@@ -1,6 +1,5 @@
 import type { Editor } from '@tiptap/core'
 import styles from './BubbleMenu.module.scss'
-import { clsx } from 'clsx'
 import { Icon } from '../../_shared/Icon'
 import { useLocalize } from '../../../context/localize'
 import { Popover } from '../../_shared/Popover'

src/components/Editor/BubbleMenu/BubbleMenu.module.scss

@@ -73,22 +73,23 @@
           &.yellow {
             background: #f6e3a1;
           }
+
           &.white {
             background: #fff;
             box-shadow: inset 0 0 0 1px #000;
             border-color: #fff;
           }
-          &.yellow {
+
-            background: #f6e3a1;
-          }
           &.pink {
             background: #f1b5bc;
           }
+
           &.green {
             background: #bfe9cb;
             box-shadow: inset 0 0 0 1px #000;
             border-color: #fff;
           }
+
           &.black {
             background: #000;
           }

src/components/Editor/BubbleMenu/FigureBubbleMenu.tsx

@@ -1,6 +1,5 @@
 import type { Editor } from '@tiptap/core'
 import styles from './BubbleMenu.module.scss'
-import { clsx } from 'clsx'
 import { Icon } from '../../_shared/Icon'
 import { useLocalize } from '../../../context/localize'
 import { Popover } from '../../_shared/Popover'

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

@@ -112,7 +112,7 @@
   }
 
   .backToMenuControl {
-    color: rgb(255 255 255 / 0.7);
+    color: rgb(255 255 255 / 70%);
   }
 
   .shortcutList {

src/components/Editor/Prosemirror.scss

@@ -76,11 +76,13 @@ mark.highlight {
 [data-float] {
   max-width: 50%;
 }
+
 [data-float='left'] {
   max-width: 30%;
   float: left;
   margin: 1rem 1rem 0 0;
 }
+
 [data-float='right'] {
   max-width: 30%;
   float: right;
@@ -93,11 +95,12 @@ mark.highlight {
   float: left;
   margin: 1rem 1rem 0;
 }
+
 [data-float='half-right'] {
   max-width: 50%;
   min-width: 30%;
   float: right;
-  margin: 1rem 0 1rem;
+  margin: 1rem 0;
 }
 
 .ProseMirror blockquote {
@@ -162,16 +165,20 @@ mark.highlight {
     background: #000;
     color: #fff;
   }
+
   &[data-bg='yellow'] {
     background: #f6e3a1;
   }
+
   &[data-bg='pink'] {
     background: #f1b5bc;
   }
+
   &[data-bg='green'] {
     background: #bfe9cb;
     box-shadow: 0 0 0 1px #000;
   }
+
   &[data-bg='white'] {
     background: #fff;
     box-shadow: 0 0 0 1px #000;

src/components/Editor/VideoUploader/VideoUploader.module.scss

@@ -2,7 +2,7 @@
   margin: 2rem 0;
 
   .dropArea {
-    border: 2px dashed rgba(38, 56, 217, 0.3);
+    border: 2px dashed rgb(38 56 217 / 30%);
     border-radius: 16px;
     color: #2638d9;
     display: flex;

src/components/Editor/extensions/CustomBlockquote.ts

@@ -1,5 +1,4 @@
 import { Blockquote } from '@tiptap/extension-blockquote'
-import { Command } from '@tiptap/core'
 
 export type QuoteTypes = 'quote' | 'punchline'
 

src/components/Feed/ArticleCard.module.scss

@@ -42,7 +42,7 @@
   a:link {
     border: none;
 
-    &:before {
+    &::before {
       content: '';
       height: 100%;
       left: 0;
@@ -118,6 +118,7 @@
 
 .shoutCardTitle {
   @include font-size(2.2rem);
+
   font-weight: 700;
   line-height: 1.1;
   margin-bottom: 0.8rem;
@@ -138,8 +139,9 @@
 }
 
 .shoutCardSubtitle {
-  color: #141414;
   @include font-size(1.8rem);
+
+  color: #141414;
   font-weight: 400;
   line-height: 1.3;
   margin-bottom: 1.4rem;
@@ -269,6 +271,7 @@
     .shoutCardTitle,
     .shoutCardSubtitle {
       @include font-size(2.6rem);
+
       display: inline;
       line-height: 1.2;
     }
@@ -324,11 +327,11 @@
   }
 
   .shoutCardSubtitle {
-    color: rgb(255 255 255 / 0.5);
+    color: rgb(255 255 255 / 50%);
   }
 
   &:global(.swiper-slide-active) .shoutCardCover {
-    &:after {
+    &::after {
       background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 70%) 100%);
     }
   }
@@ -336,7 +339,7 @@
 
 .shoutCardWithCover {
   aspect-ratio: 16/9;
-  padding: 0 2.4rem 0;
+  padding: 0 2.4rem;
   width: 100%;
 
   @include media-breakpoint-down(sm) {
@@ -561,7 +564,7 @@
   }
 
   .shoutDate {
-    color: rgb(255 255 255 / 0.5);
+    color: rgb(255 255 255 / 50%);
   }
 }
 
@@ -596,6 +599,7 @@
 .shoutCardBigTitle {
   .shoutCardTitle {
     @include font-size(3.2rem);
+
     display: block;
     padding-right: 0;
   }
@@ -609,6 +613,7 @@
   .shoutCardTitle,
   .shoutCardSubtitle {
     @include font-size(2.2rem);
+
     display: inline;
     line-height: 1.2;
   }
@@ -634,8 +639,9 @@
 
   .shoutCardTitle,
   .shoutCardSubtitle {
-    display: inline;
     @include font-size(1.8rem);
+
+    display: inline;
   }
 
   .shoutCardSubtitle {
@@ -705,12 +711,14 @@
 
   .shoutCardTitle {
     @include font-size(4rem);
+
     font-weight: 900;
     line-height: 1.1;
   }
 
   .shoutCardSubtitle {
     @include font-size(2.4rem);
+
     flex: 1;
   }
 }

src/components/Feed/Beside.module.scss

@@ -68,8 +68,9 @@
   }
 
   a:link {
-    border: none;
     @include font-size(1.4rem);
+
+    border: none;
     font-weight: bold;
     padding-right: 0.3em;
     white-space: nowrap;
@@ -87,6 +88,7 @@
 
   h4 {
     @include font-size(2.6rem);
+
     font-weight: bold;
     padding-right: 1em;
   }

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

@@ -18,6 +18,7 @@
 
   .counter {
     @include font-size(1.2rem);
+
     align-items: center;
     align-self: flex-start;
     background: #f6f6f6;
@@ -89,6 +90,7 @@
 
   h4 {
     @include font-size(1.2rem);
+
     font-weight: bold;
     color: #9fa1a7;
     cursor: pointer;

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

@@ -87,6 +87,7 @@
 
 .disclaimer {
   @include font-size(1.2rem);
+
   color: #9fa1a7;
   margin-bottom: 0;
 }
@@ -127,13 +128,15 @@
 }
 
 .authLink {
-  cursor: pointer;
   @include font-size(1.6rem);
+
+  cursor: pointer;
   font-weight: 500;
 }
 
 .authSubtitle {
   @include font-size(1.5rem);
+
   margin-bottom: 1em;
 }
 

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

@@ -7,6 +7,7 @@
 
 .text {
   @include font-size(1.5rem);
+
   font-weight: 500;
   margin-bottom: 1em;
   text-align: center;

src/components/Nav/Topics.scss

@@ -1,5 +1,6 @@
 .subnavigation {
   @include font-size(1.4rem);
+
   height: 6rem;
   line-height: 6rem;
   margin-bottom: 5rem !important;

src/components/Topic/Card.module.scss

@@ -35,6 +35,7 @@
 
 .topicTitle {
   @include font-size(2.2rem);
+
   font-weight: bold;
   margin-bottom: 1.2rem;
   margin-top: 0.5rem !important;
@@ -59,6 +60,7 @@
 
 .topicDescription {
   @include font-size(1.4rem);
+
   font-weight: 500;
   color: #696969;
   line-height: 1.3;
@@ -74,6 +76,7 @@
 
 .topicDetails {
   @include font-size(1.6rem);
+
   color: #9fa1a7;
   display: flex;
   margin-bottom: 1em;
@@ -85,6 +88,7 @@
 
 .topicDetailsItem {
   @include font-size(1.4rem);
+
   margin-right: 1.6rem;
   white-space: nowrap;
 

src/components/Topic/Full.module.scss

@@ -5,8 +5,9 @@
   text-align: center;
 
   h1 {
-    color: #2638d9;
     @include font-size(2rem);
+
+    color: #2638d9;
     text-transform: uppercase;
   }
 }

src/components/Views/Edit.tsx

@@ -1,4 +1,4 @@
-import { createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js'
+import { createSignal, For, onCleanup, onMount, Show } from 'solid-js'
 import { useLocalize } from '../../context/localize'
 import { clsx } from 'clsx'
 import { Title } from '@solidjs/meta'

src/components/Views/Feed.module.scss

@@ -4,6 +4,7 @@
 
 .feedNavigation {
   @include font-size(1.6rem);
+
   font-weight: 500;
 
   h4 {
@@ -39,6 +40,7 @@
 .feedAside {
   h4 {
     @include font-size(2.2rem);
+
     font-weight: bold;
     margin-bottom: 2.4rem;
   }
@@ -51,9 +53,10 @@
 }
 
 .topic {
+  @include font-size(1.2rem);
+
   background: transparentize(#2638d9, 0.95);
   display: inline-block;
-  @include font-size(1.2rem);
   font-weight: bold;
   line-height: 3.4rem;
   margin: 0 0.6rem 0.6rem 0;
@@ -88,6 +91,7 @@
 
   ul {
     @include font-size(1.4rem);
+
     font-weight: bold;
     margin: 1rem 0 0;
     line-height: 1.3;
@@ -97,7 +101,7 @@
       padding-left: 2.6rem;
       position: relative;
 
-      &:before {
+      &::before {
         background: url(/public/icons/knowledge-base-bullet.svg) no-repeat;
         content: '';
         height: 1.6rem;
@@ -140,6 +144,7 @@
 
 .commentBody {
   @include font-size(1.4rem);
+
   margin-bottom: 1.2rem;
   line-clamp: 3;
   -webkit-line-clamp: 3;
@@ -155,7 +160,7 @@
   -webkit-line-clamp: 1;
 
   a {
-    color: rgb(0 0 0 / 0.65);
+    color: rgb(0 0 0 / 65%);
 
     &:hover {
       color: #fff;
@@ -166,5 +171,6 @@
 .commentArticleTitle,
 .commentAuthor {
   @include font-size(1.2rem);
+
   font-weight: 500;
 }

src/components/_shared/DarkModeToggle/DarkModeToggle.module.scss

@@ -6,7 +6,7 @@
     position: relative;
     width: 4.6rem;
 
-    &:before {
+    &::before {
       background: #fff;
       border-radius: 100%;
       content: '';
@@ -41,14 +41,14 @@
       padding: 0;
       position: relative;
 
-      &:before {
+      &::before {
         display: none;
       }
     }
 
     &:checked + label {
       .switcher {
-        &:before {
+        &::before {
           left: 2.4rem;
         }
       }

src/components/_shared/DarkModeToggle/DarkModeToggle.tsx

@@ -2,7 +2,7 @@ import { clsx } from 'clsx'
 import styles from './DarkModeToggle.module.scss'
 import { Icon } from '../Icon'
 import { useLocalize } from '../../../context/localize'
-import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'
+import { createSignal, onCleanup, onMount } from 'solid-js'
 import { createPrefersDark } from '@solid-primitives/media'
 
 type Props = {

src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss

@@ -59,7 +59,7 @@
     line-height: 1;
     user-select: none;
     transition: opacity 0.3s ease-in-out;
-    background: rgba(255, 255, 255, 0.8);
+    background: rgb(255 255 255 / 80%);
 
     &.visible {
       opacity: 1;

src/components/_shared/Stat.module.scss

@@ -1,5 +1,6 @@
 .statMetrics {
   @include font-size(1.7rem);
+
   color: #9fa1a7;
   display: flex;
   margin: 0 0 1em;

src/components/_shared/VideoPlayer/VideoPlayer.module.scss

@@ -11,6 +11,7 @@
     flex-direction: row;
     margin-top: auto;
   }
+
   .deleteAction {
     position: absolute;
     top: -15px;

src/context/session.tsx

@@ -1,5 +1,13 @@
-import { Accessor, JSX, Resource, createEffect } from 'solid-js'
+import type { Accessor, JSX, Resource } from 'solid-js'
-import { createContext, createMemo, createResource, createSignal, onMount, useContext } from 'solid-js'
+import {
+  createEffect,
+  createContext,
+  createMemo,
+  createResource,
+  createSignal,
+  onMount,
+  useContext
+} from 'solid-js'
 import type { AuthResult, User } from '../graphql/types.gen'
 import { apiClient } from '../utils/apiClient'
 import { resetToken, setToken } from '../graphql/privateGraphQLClient'

src/pages/edit.page.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, lazy, onMount, Show, Suspense } from 'solid-js'
+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'

src/pages/layoutShouts.page.server.ts

@@ -1,11 +1,12 @@
 import type { PageContext } from '../renderer/types'
 import { apiClient } from '../utils/apiClient'
 import type { PageProps } from './types'
+import { PRERENDERED_ARTICLES_COUNT } from './layoutShouts.page'
 
 export const onBeforeRender = async (pageContext: PageContext) => {
   const { layout } = pageContext.routeParams
 
-  const layoutShouts = await apiClient.getShouts({ filters: { layout }, limit: 50 })
+  const layoutShouts = await apiClient.getShouts({ filters: { layout }, limit: PRERENDERED_ARTICLES_COUNT })
 
   const pageProps: PageProps = { layoutShouts }
 

src/pages/layoutShouts.page.tsx

@@ -1,9 +1,8 @@
 import { PageLayout } from '../components/_shared/PageLayout'
-import type { PageProps } from './types'
+import type { LayoutType, PageProps } from './types'
-import { createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js'
+import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js'
-import { loadShouts, resetSortedArticles } from '../stores/zine/articles'
+import { loadShouts, resetSortedArticles, useArticlesStore } from '../stores/zine/articles'
-import { useRouter } from '../stores/router'
+import { router, useRouter } from '../stores/router'
-import { LayoutType, useLayoutsStore } from '../stores/zine/layouts'
 import { Loading } from '../components/_shared/Loading'
 import { restoreScrollPosition, saveScrollPosition } from '../utils/scroll'
 import type { Shout } from '../graphql/types.gen'
@@ -18,42 +17,38 @@ import { Row1 } from '../components/Feed/Row1'
 import styles from '../styles/Topic.module.scss'
 import { ArticleCard } from '../components/Feed/ArticleCard'
 import { useLocalize } from '../context/localize'
+import { getPagePath } from '@nanostores/router'
+import { Title } from '@solidjs/meta'
 
-export const PRERENDERED_ARTICLES_COUNT = 21
+export const PRERENDERED_ARTICLES_COUNT = 27
 const LOAD_MORE_PAGE_SIZE = 9 // Row3 + Row3 + Row3
 
 export const LayoutShoutsPage = (props: PageProps) => {
   const { t } = useLocalize()
+  const { page: getPage } = useRouter()
+
   const getLayout = createMemo<LayoutType>(() => {
-    const { page: getPage } = useRouter()
+    const layout = getPage().params['layout']
-    const page = getPage()
-    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) => {
-    saveScrollPosition()
-    const { hasMore } = await loadLayoutShoutsBy({
-      // filters: { layout: kind },
 
-      limit: LOAD_MORE_PAGE_SIZE,
+  const { sortedArticles } = useArticlesStore({
+    shouts: props.layoutShouts
+  })
+
+  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
+
+  const loadMore = async (count) => {
+    saveScrollPosition()
+    const { hasMore } = await loadShouts({
+      filters: { layout: getLayout() },
+      limit: count,
       offset: sortedArticles().length
     })
     setIsLoadMoreButtonVisible(hasMore)
     restoreScrollPosition()
   }
 
-  onMount(async () => {
-    if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
-      loadMoreLayout(getLayout())
-    }
-  })
-
   const title = createMemo(() => {
     const l = getLayout()
     if (l === 'audio') return t('Audio')
@@ -65,101 +60,120 @@ export const LayoutShoutsPage = (props: PageProps) => {
   const pages = createMemo<Shout[][]>(() =>
     splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE)
   )
-  const isLoaded = createMemo(() => Boolean(sortedArticles()))
 
-  onMount(async () => {
+  const isLoaded = createMemo(() => Boolean(props.layoutShouts))
-    if (!isLoaded()) {
+
-      await loadShouts({ filters: { layout: getLayout() }, limit: PRERENDERED_ARTICLES_COUNT, offset: 0 })
+  onMount(() => {
+    if (isLoaded()) {
+      return
+    }
+
+    loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE)
+  })
+
+  onMount(() => {
+    if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
+      loadMore(LOAD_MORE_PAGE_SIZE)
     }
   })
 
-  onCleanup(() => resetSortedArticles())
+  createEffect((prevLayout) => {
+    if (prevLayout !== getLayout()) {
+      resetSortedArticles()
+      loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE)
+    }
+
+    return getLayout()
+  }, getLayout())
+
+  onCleanup(() => {
+    resetSortedArticles()
+  })
+
+  const handleLoadMoreClick = () => {
+    loadMore(LOAD_MORE_PAGE_SIZE)
+  }
 
-  const ModeSwitcher = () => (
-    <div class="wide-container">
-      <div class={clsx(styles.groupControls, 'row group__controls')}>
-        <div class="col-md-16">
-          <ul class="view-switcher">
-            <li classList={{ 'view-switcher__item--selected': getLayout() === 'audio' }}>
-              <a href="/expo/audio">{t('Audio')}</a>
-            </li>
-            <li classList={{ 'view-switcher__item--selected': getLayout() === 'video' }}>
-              <a href="/expo/video">{t('Video')}</a>
-            </li>
-            <li classList={{ 'view-switcher__item--selected': getLayout() === 'image' }}>
-              <a href="/expo/image">{t('Artworks')}</a>
-            </li>
-            <li classList={{ 'view-switcher__item--selected': getLayout() === 'literature' }}>
-              <a href="/expo/literature">{t('Literature')}</a>
-            </li>
-          </ul>
-        </div>
-        <div class="col-md-8">
-          <div class="mode-switcher">
-            {`${t('Show')} `}
-            <span class="mode-switcher__control">{t('All posts')}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
   return (
     <PageLayout>
+      <Title>{title()}</Title>
       <Show when={isLoaded()} fallback={<Loading />}>
         <div class={styles.topicPage}>
-          <Show when={getLayout() && Boolean(sortedArticles())}>
+          <Show when={getLayout()}>
             <div class="wide-container">
               <h1>{title()}</h1>
             </div>
 
-            <ModeSwitcher />
+            <div class="wide-container">
-            <Row1 article={sortedArticles()[0]} />
+              <div class={clsx(styles.groupControls, 'row group__controls')}>
-            <Row2 articles={sortedArticles().slice(1, 3)} />
+                <div class="col-md-16">
-            <Slider title={title()}>
+                  <ul class="view-switcher">
-              <For each={sortedArticles().slice(5, 11)}>
+                    <li classList={{ 'view-switcher__item--selected': getLayout() === 'audio' }}>
-                {(a: Shout) => (
+                      <a href={getPagePath(router, 'expo', { layout: 'audio' })}>{t('Audio')}</a>
-                  <ArticleCard
+                    </li>
-                    article={a}
+                    <li classList={{ 'view-switcher__item--selected': getLayout() === 'video' }}>
-                    settings={{
+                      <a href={getPagePath(router, 'expo', { layout: 'video' })}>{t('Video')}</a>
-                      additionalClass: 'swiper-slide',
+                    </li>
-                      isFloorImportant: true,
+                    <li classList={{ 'view-switcher__item--selected': getLayout() === 'image' }}>
-                      isWithCover: true,
+                      <a href={getPagePath(router, 'expo', { layout: 'image' })}>{t('Artworks')}</a>
-                      nodate: true
+                    </li>
-                    }}
+                    <li classList={{ 'view-switcher__item--selected': getLayout() === 'literature' }}>
-                  />
+                      <a href={getPagePath(router, 'expo', { layout: 'literature' })}>{t('Literature')}</a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <Show when={sortedArticles().length > 0} fallback={<Loading />}>
+              <Row1 article={sortedArticles()[0]} />
+              <Row2 articles={sortedArticles().slice(1, 3)} />
+              <Slider title={title()}>
+                <For each={sortedArticles().slice(5, 11)}>
+                  {(article) => (
+                    <ArticleCard
+                      article={article}
+                      settings={{
+                        additionalClass: 'swiper-slide',
+                        isFloorImportant: true,
+                        isWithCover: true,
+                        nodate: true
+                      }}
+                    />
+                  )}
+                </For>
+              </Slider>
+              <Beside
+                beside={sortedArticles()[12]}
+                title={t('Top viewed')}
+                values={sortedArticles().slice(0, 5)}
+                wrapper={'top-article'}
+              />
+              <Show when={sortedArticles().length > 5}>
+                <Row3 articles={sortedArticles().slice(13, 16)} />
+                <Row2 articles={sortedArticles().slice(16, 18)} />
+                <Row3 articles={sortedArticles().slice(18, 21)} />
+                <Row3 articles={sortedArticles().slice(21, 24)} />
+                <Row3 articles={sortedArticles().slice(24, 27)} />
+              </Show>
+
+              <For each={pages()}>
+                {(page) => (
+                  <>
+                    <Row3 articles={page.slice(0, 3)} />
+                    <Row3 articles={page.slice(3, 6)} />
+                    <Row3 articles={page.slice(6, 9)} />
+                  </>
                 )}
               </For>
-            </Slider>
-            <Beside
-              beside={sortedArticles()[12]}
-              title={t('Top viewed')}
-              values={sortedArticles().slice(0, 5)}
-              wrapper={'top-article'}
-            />
-            <Show when={sortedArticles().length > 5}>
-              <Row3 articles={sortedArticles().slice(13, 16)} />
-              <Row2 articles={sortedArticles().slice(16, 18)} />
-              <Row3 articles={sortedArticles().slice(18, 21)} />
-              <Row3 articles={sortedArticles().slice(21, 24)} />
-              <Row3 articles={sortedArticles().slice(24, 27)} />
-            </Show>
 
-            <For each={pages()}>
+              <Show when={isLoadMoreButtonVisible()}>
-              {(page) => (
+                <p class="load-more-container">
-                <>
+                  <button class="button" onClick={handleLoadMoreClick}>
-                  <Row3 articles={page.slice(0, 3)} />
+                    {t('Load more')}
-                  <Row3 articles={page.slice(3, 6)} />
+                  </button>
-                  <Row3 articles={page.slice(6, 9)} />
+                </p>
-                </>
+              </Show>
-              )}
-            </For>
-
-            <Show when={isLoadMoreButtonVisible()}>
-              <p class="load-more-container">
-                <button class="button" onClick={() => loadMoreLayout(getLayout())}>
-                  {t('Load more')}
-                </button>
-              </p>
             </Show>
           </Show>
         </div>

src/pages/types.ts

@@ -1,6 +1,5 @@
 // in a separate file to avoid circular dependencies
 import type { Author, Chat, Shout, Topic } from '../graphql/types.gen'
-import type { LayoutType } from '../stores/zine/layouts'
 
 // all the things (she said) that could be passed from the server
 export type PageProps = {
@@ -15,7 +14,7 @@ export type PageProps = {
   topic?: Topic
   allTopics?: Topic[]
   searchQuery?: string
-  layout?: LayoutType
+  layout?: string // LayoutType
   // other types?
   searchResults?: Shout[]
   chats?: Chat[]
@@ -32,3 +31,5 @@ export type UploadFile = {
   size: number
   file: File
 }
+
+export type LayoutType = 'article' | 'audio' | 'video' | 'image' | 'literature'

src/stores/zine/layouts.ts

@@ -1,48 +0,0 @@
-import type { Shout, LoadShoutsOptions } from '../../graphql/types.gen'
-import { apiClient } from '../../utils/apiClient'
-import { createSignal } from 'solid-js'
-
-export type LayoutType = 'article' | 'audio' | 'video' | 'image' | 'literature'
-
-const [sortedLayoutShouts, setSortedLayoutShouts] = createSignal<Map<LayoutType, Shout[]>>(new Map())
-
-const addLayoutShouts = (layout: LayoutType, shouts: Shout[]) => {
-  setSortedLayoutShouts((prevSorted: Map<LayoutType, Shout[]>) => {
-    const siblings = prevSorted.get(layout)
-    if (siblings) {
-      const uniqued = [...new Set([...siblings, ...shouts])]
-      prevSorted.set(layout, uniqued)
-    }
-    return prevSorted
-  })
-}
-
-export const resetSortedLayoutShouts = () => {
-  setSortedLayoutShouts(new Map())
-}
-
-export const loadLayoutShoutsBy = async (options: LoadShoutsOptions): Promise<{ hasMore: boolean }> => {
-  const newLayoutShouts = await apiClient.getShouts({
-    ...options,
-    limit: options.limit + 1
-  })
-
-  const hasMore = newLayoutShouts.length === options.limit + 1
-
-  if (hasMore) {
-    newLayoutShouts.splice(-1)
-  }
-  addLayoutShouts(options.filters.layout as LayoutType, newLayoutShouts)
-
-  return { hasMore }
-}
-
-export const useLayoutsStore = (layout: LayoutType, initialData: Shout[]) => {
-  addLayoutShouts(layout, initialData || [])
-
-  return {
-    addLayoutShouts,
-    sortedLayoutShouts,
-    loadLayoutShoutsBy
-  }
-}

src/styles/AllTopics.module.scss

@@ -1,6 +1,7 @@
 .allTopicsPage {
   .group {
     @include font-size(1.6rem);
+
     margin: 3em 0 9.6rem;
 
     @include media-breakpoint-down(sm) {
@@ -50,11 +51,12 @@
 }
 
 .alphabet {
+  @include font-size(1.5rem);
+
   color: rgba(0 0 0 / 20%);
   display: flex;
   flex-wrap: wrap;
   font-weight: 700;
-  @include font-size(1.5rem);
   margin: 1.5em -3% 0 0;
 
   li {
@@ -66,6 +68,7 @@
 
 .articlesCounter {
   @include font-size(1.2rem);
+
   margin-left: 0.5em;
   vertical-align: super;
 }

src/styles/app.scss

@@ -545,12 +545,14 @@ figure {
 
   figcaption {
     @include font-size(1.2rem);
+
     color: #9fa1a7;
   }
 }
 
 .view-switcher {
   @include font-size(1.4rem);
+
   display: flex;
   flex-wrap: wrap;
   font-weight: 500;
@@ -828,6 +830,7 @@ figure {
 
 .content-index {
   @include font-size(1.4rem);
+
   line-height: 1.4;
   margin: 0 3.6rem 2em 0;