lib updates, lint

.lintstagedrc.bak

@@ -1,6 +1,6 @@
 {
-  "*.{js,ts,tsx,json,scss,css,html}": "prettier --write",
+  "*.{js,mjs,ts,tsx,json,scss,css,html}": "prettier --write",
   "package.json": "sort-package-json",
   "*.{scss,css}": "stylelint",
-  "*.{ts,tsx,js}": "eslint --fix"
+  "*.{ts,tsx,js,mjs}": "eslint --fix"
 }

__checks__/discoursio-webapp.check.mjs

@@ -1,4 +1,4 @@
-const { chromium } = require('playwright')
+import { chromium } from 'playwright'
 
 const checkUrl = async (page, targetUrl, pageName) => {
   const response = await page.goto(targetUrl)

package.json

@@ -39,11 +39,11 @@
   },
   "devDependencies": {
     "@babel/core": "7.21.8",
-    "@graphql-codegen/cli": "3.2.2",
+    "@graphql-codegen/cli": "5.0.0",
-    "@graphql-codegen/typescript": "3.0.4",
+    "@graphql-codegen/typescript": "4.0.1",
-    "@graphql-codegen/typescript-operations": "3.0.4",
+    "@graphql-codegen/typescript-operations": "4.0.1",
-    "@graphql-codegen/typescript-urql": "3.7.3",
+    "@graphql-codegen/typescript-urql": "4.0.0",
-    "@graphql-codegen/urql-introspection": "2.2.1",
+    "@graphql-codegen/urql-introspection": "3.0.0",
     "@graphql-tools/url-loader": "7.17.18",
     "@graphql-typed-document-node/core": "3.2.0",
     "@hocuspocus/provider": "2.0.6",
@@ -56,7 +56,7 @@
     "@solid-primitives/share": "2.0.4",
     "@solid-primitives/storage": "1.3.9",
     "@solid-primitives/upload": "0.0.110",
-    "@solidjs/meta": "0.28.2",
+    "@solidjs/meta": "0.29.1",
     "@thisbeyond/solid-select": "0.14.0",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -87,27 +87,27 @@
     "@tiptap/extension-text": "2.0.3",
     "@tiptap/extension-underline": "2.0.3",
     "@tiptap/extension-youtube": "2.0.3",
-    "@types/js-cookie": "3.0.4",
+    "@types/js-cookie": "3.0.5",
-    "@types/node": "20.1.1",
+    "@types/node": "20.8.10",
-    "@typescript-eslint/eslint-plugin": "6.7.3",
+    "@typescript-eslint/eslint-plugin": "6.9.1",
-    "@typescript-eslint/parser": "6.7.3",
+    "@typescript-eslint/parser": "6.9.1",
     "@urql/core": "3.2.2",
     "@urql/devtools": "2.0.3",
-    "babel-preset-solid": "1.7.4",
+    "babel-preset-solid": "1.8.4",
     "bootstrap": "5.3.2",
     "clsx": "2.0.0",
     "cross-env": "7.0.3",
     "debounce": "1.2.1",
-    "eslint": "8.50.0",
+    "eslint": "8.53.0",
     "eslint-config-stylelint": "20.0.0",
     "eslint-import-resolver-typescript": "3.6.1",
-    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-import": "2.29.0",
-    "eslint-plugin-jest": "27.4.0",
+    "eslint-plugin-jest": "27.6.0",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-solid": "0.13.0",
-    "eslint-plugin-sonarjs": "0.21.0",
+    "eslint-plugin-sonarjs": "0.23.0",
-    "eslint-plugin-unicorn": "48.0.1",
+    "eslint-plugin-unicorn": "49.0.0",
     "fast-deep-equal": "3.1.3",
     "graphql": "16.6.0",
     "graphql-tag": "2.12.6",
@@ -118,7 +118,7 @@
     "javascript-time-ago": "2.5.9",
     "jest": "29.7.0",
     "js-cookie": "3.0.5",
-    "lint-staged": "14.0.1",
+    "lint-staged": "15.0.2",
     "loglevel": "1.8.1",
     "loglevel-plugin-prefix": "0.8.4",
     "markdown-it": "13.0.1",
@@ -128,30 +128,30 @@
     "markdown-it-replace-link": "1.2.0",
     "nanostores": "0.7.4",
     "prettier": "3.0.3",
-    "prettier-eslint": "15.0.1",
+    "prettier-eslint": "16.1.2",
     "prosemirror-history": "1.3.0",
     "prosemirror-trailing-node": "2.0.3",
     "prosemirror-view": "1.30.2",
     "rollup": "3.21.6",
-    "sass": "1.68.0",
+    "sass": "1.69.5",
-    "solid-js": "1.7.5",
+    "solid-js": "1.8.5",
     "solid-popper": "0.3.0",
     "solid-tiptap": "0.6.0",
-    "solid-transition-group": "0.2.2",
+    "solid-transition-group": "0.2.3",
     "sort-package-json": "2.6.0",
-    "stylelint": "15.10.3",
+    "stylelint": "15.11.0",
-    "stylelint-config-standard-scss": "11.0.0",
+    "stylelint-config-standard-scss": "11.1.0",
     "stylelint-order": "6.0.3",
-    "stylelint-scss": "5.2.1",
+    "stylelint-scss": "5.3.0",
     "swiper": "9.4.1",
     "typescript": "5.2.2",
     "typograf": "7.1.0",
     "uniqolor": "1.1.0",
     "vike": "0.4.144",
-    "vite": "4.3.9",
+    "vite": "4.5.0",
     "vite-plugin-mkcert": "1.16.0",
     "vite-plugin-sass-dts": "1.3.11",
-    "vite-plugin-solid": "2.7.0",
+    "vite-plugin-solid": "2.7.2",
     "y-prosemirror": "1.2.1",
     "yjs": "13.6.0"
   },

src/components/Article/Article.module.scss

@@ -1,11 +1,13 @@
 h1 {
   @include font-size(4rem);
+
   line-height: 1.1;
   margin-top: 0.5em;
 }
 
 h2 {
   @include font-size(4rem);
+
   line-height: 1.1;
 }
 
@@ -70,6 +72,7 @@ img {
     &[data-float='left'],
     &[data-float='right'] {
       @include font-size(2.2rem);
+
       line-height: 1.4;
     }
 
@@ -92,9 +95,10 @@ img {
   ta-sub,
   ta-selection-frame,
   ta-border-sub {
+    @include font-size(1.4rem);
+
     background: #f1f2f3;
     display: block;
-    @include font-size(1.4rem);
     margin: 3.2rem 0;
     padding: 3.2rem;
 
@@ -303,6 +307,7 @@ img {
 
 .shoutStatsItem {
   @include font-size(1.5rem);
+
   align-items: center;
   font-weight: 500;
   display: flex;
@@ -398,7 +403,7 @@ img {
   cursor: default;
 
   @include media-breakpoint-down(sm) {
-    color: rgb(0 0 0 / 0.4);
+    color: rgb(0 0 0 / 40%);
     flex: 1 40%;
     justify-content: end;
     margin-right: 0;
@@ -441,6 +446,7 @@ img {
 
 .topicsList {
   @include font-size(1.2rem);
+
   border-bottom: 1px solid #e8e8e8;
   letter-spacing: 0.08em;
   margin-top: 1.6rem;
@@ -486,6 +492,7 @@ img {
 
 .commentsHeader {
   @include font-size(2.4rem);
+
   margin-bottom: 1em;
 
   .newReactions {
@@ -519,6 +526,7 @@ img {
 
   button {
     @include font-size(1.5rem);
+
     border-radius: 0.8rem;
     margin-right: 1.2rem;
     padding: 0.9rem 1.2rem;
@@ -600,13 +608,14 @@ a[data-toggle='tooltip'] {
     width: 0;
     height: 0;
     border-style: solid;
-    border-width: 4px 4px 0 4px;
+    border-width: 4px 4px 0;
     border-color: var(--black-500) transparent transparent transparent;
   }
 }
 
 .lead {
   @include font-size(1.8rem);
+
   font-weight: 600;
 
   b,

src/components/Article/AudioPlayer/AudioPlayer.module.scss

@@ -51,7 +51,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-
     width: 40px;
     height: 40px;
     background: #141414;
@@ -108,7 +107,7 @@
   position: relative;
   width: 100%;
   cursor: pointer;
-  border-bottom: 2px solid #cccccc;
+  border-bottom: 2px solid #ccc;
 }
 
 .progressFilled {
@@ -126,7 +125,6 @@
     position: absolute;
     bottom: -10px;
     right: -8px;
-
     width: 8px;
     height: 8px;
     border-radius: 50%;
@@ -140,7 +138,6 @@
   padding-top: 14px;
   display: flex;
   justify-content: space-between;
-
   font-weight: 500;
   font-size: 12px;
   line-height: 16px;
@@ -157,7 +154,7 @@ $vendors-track: ('::-webkit-slider-runnable-track', '::-moz-range-track', '::-ms
 $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thumb');
 
 .volume {
-  -webkit-appearance: none;
+  appearance: none;
   height: 19px;
   float: left;
   outline: none;
@@ -182,7 +179,7 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
   @each $vendor in $vendors-thumb {
     &#{$vendor} {
       position: relative;
-      -webkit-appearance: none;
+      appearance: none;
       box-sizing: content-box;
       width: 8px;
       height: 8px;
@@ -190,7 +187,7 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
       border: 4px solid var(--default-color);
       background-color: var(--background-color);
       cursor: pointer;
-      margin: -7px 0 0 0;
+      margin: -7px 0 0;
     }
     &:active#{$vendor} {
       transform: scale(1.2);
@@ -201,6 +198,7 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
   &::-moz-range-progress {
     background-color: var(--background-color);
   }
+
   &::-moz-focus-outer {
     border: 0;
   }
@@ -209,7 +207,6 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
 .playlist {
   display: flex;
   flex-direction: column;
-
   list-style-type: none;
   margin: 32px 0 16px;
   padding: 0;
@@ -222,7 +219,6 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
 .playlistItem {
   display: flex;
   align-items: center;
-
   min-height: 56px;
   padding: 16px 0;
 }
@@ -319,6 +315,7 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
     &:not([disabled]):hover {
       border-color: var(--background-color-invert);
       background: var(--background-color-invert);
+
       img {
         filter: var(--icon-filter-hover);
       }
@@ -334,7 +331,7 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
   display: flex;
   flex-direction: column;
   gap: 16px;
-  padding: 8px 0 24px 0;
+  padding: 8px 0 24px;
 
   .description,
   .lyrics {

src/components/Article/Comment/Comment.module.scss

@@ -5,10 +5,6 @@
   position: relative;
   list-style: none;
 
-  & .comment {
-    margin-right: -1rem;
-  }
-
   &.isNew {
     border-radius: 6px;
     background: rgb(38 56 217 / 5%);
@@ -19,6 +15,8 @@
   }
 
   .comment {
+    margin-right: -1rem;
+
     &::before,
     &::after {
       content: '';

src/components/Author/AhtorLink/AhtorLink.module.scss

@@ -1,8 +1,7 @@
 .AuthorLink {
   .link {
     display: inline-flex;
-    flex-direction: row;
+    flex-flow: row nowrap;
-    flex-wrap: nowrap;
     align-items: center;
     gap: 1rem;
     justify-content: center;
@@ -33,6 +32,7 @@
     .link {
       gap: 0.5rem;
     }
+
     .name {
       font-size: 1.2rem;
       margin: 0;
@@ -43,6 +43,7 @@
     .link {
       gap: 1rem;
     }
+
     .name {
       font-size: 1.4rem;
     }

src/components/Author/AuthorBadge/AuthorBadge.module.scss

@@ -7,6 +7,7 @@
 
   &.nameOnly {
     align-items: center;
+
     .info {
       margin-bottom: 0;
     }
@@ -23,6 +24,7 @@
 
   .info {
     @include font-size(1.4rem);
+
     border: none;
     display: flex;
     flex: 0 calc(100% - 5.2rem);
@@ -81,6 +83,7 @@
       padding: 6px !important;
       min-width: 32px;
       width: unset;
+
       &:hover img {
         filter: invert(1);
       }

src/components/Author/Userpic/Userpic.module.scss

@@ -79,6 +79,7 @@
     height: 40px;
     width: 40px;
     min-width: 40px;
+
     .letters {
       font-size: 1.2rem;
     }

src/components/Discours/Hero.module.scss

@@ -1,5 +1,6 @@
 .aboutDiscours {
   @include font-size(1.6rem);
+
   background: #fef2f2;
   font-weight: 500;
   margin-bottom: 6.4rem;
@@ -8,6 +9,7 @@
 
   h4 {
     @include font-size(4rem);
+
     font-weight: bold;
     line-height: 1.1;
     margin-bottom: 2rem;

src/components/Editor/AudioUploader/AudioUploader.module.scss

@@ -5,6 +5,7 @@
   .draggable {
     margin: 8px 0;
     padding: 8px 0;
+
     &:hover {
       background: var(--placeholder-color-semi);
     }

src/components/Editor/AutoSaveNotice/AutoSaveNotice.module.scss

@@ -13,7 +13,7 @@
   z-index: 2;
   font-weight: 500;
   transition: 0.6s ease-in-out;
-  background: rgba(white, 0.3);
+  background: rgb(white 0.3);
   backdrop-filter: blur(4px);
   border: 1px solid var(--secondary-color);
   left: 100%;

src/components/Editor/Prosemirror.scss

@@ -269,6 +269,7 @@ figure[data-type='capturedImage'] {
   flex-direction: column-reverse;
 }
 
+/* stylelint-disable-next-line selector-type-no-unknown */
 footnote {
   display: inline-flex;
   position: relative;
@@ -276,7 +277,7 @@ footnote {
   width: 0.8rem;
   height: 1em;
 
-  &:before {
+  &::before {
     content: '';
     position: absolute;
     width: 10px;

src/components/Editor/SimplifiedEditor.module.scss

@@ -9,6 +9,7 @@
 
   .simplifiedEditorField {
     @include font-size(1.4rem);
+
     min-height: 100px;
 
     .emptyNode:first-child::before {
@@ -111,7 +112,7 @@
 
   &.bordered {
     box-sizing: border-box;
-    padding: 16px 12px 6px 12px;
+    padding: 16px 12px 6px;
     border-radius: 2px;
     border: 2px solid var(--black-100);
     background: var(--white-500);

src/components/Editor/extensions/Footnote.ts

@@ -79,6 +79,7 @@ export const Footnote = Node.create({
         },
       deleteFootnote:
         () =>
+        // eslint-disable-next-line unicorn/consistent-function-scoping
         ({ tr, state }) => {
           const { selection } = state
           const { $from, $to } = selection

src/components/Feed/ArticleCard/ArticleCard.module.scss

@@ -134,9 +134,10 @@
 }
 
 .shoutDate {
+  @include font-size(1.2rem);
+
   color: #9fa1a7;
   font-weight: 500;
-  @include font-size(1.2rem);
 }
 
 .shoutDetails {
@@ -155,6 +156,7 @@
 
 .shoutCardTitle {
   @include font-size(2.2rem);
+
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 0.8rem;
@@ -175,6 +177,7 @@
 
   .shoutCardTitlesContainerFeedMode & {
     @include font-size(3.2rem);
+
     line-height: 1.1;
   }
 }
@@ -188,6 +191,7 @@
 
 .shoutCardSubtitle {
   @include font-size(1.8rem);
+
   color: #141414;
   font-weight: 400;
   line-height: 1.3;
@@ -399,9 +403,10 @@
 
 .shoutCardWithCover {
   aspect-ratio: 16/9;
-  //padding: 0 2.4rem;
   width: 100%;
 
+  // padding: 0 2.4rem;
+
   @include media-breakpoint-down(xl) {
     aspect-ratio: auto;
     height: 100%;
@@ -707,6 +712,7 @@
   .shoutCardTitle,
   .shoutCardSubtitle {
     @include font-size(1.8rem);
+
     display: inline;
   }
 

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

@@ -125,6 +125,7 @@
 
   h4 {
     @include font-size(1.2rem);
+
     font-weight: bold;
     color: #9fa1a7;
     cursor: pointer;

src/components/Inbox/Search.module.scss

@@ -1,5 +1,6 @@
 .Search {
   flex: 1;
+
   .field {
     position: relative;
     background: #fff;

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

@@ -87,6 +87,7 @@
 
 .disclaimer {
   @include font-size(1.2rem);
+
   color: #9fa1a7;
   margin-bottom: 0;
 
@@ -94,13 +95,14 @@
     color: var(--default-color-invert) !important;
 
     &:hover {
-      color: rgb(255, 255, 255, 0.6) !important;
+      color: rgb(255 255 255 / 60%) !important;
     }
   }
 }
 
 .authActions {
   @include font-size(1.5rem);
+
   margin-top: 1.6rem;
   text-align: center;
 

src/components/Nav/ConfirmModal/ConfirmModal.module.scss

@@ -3,6 +3,7 @@
 
   .confirmModalTitle {
     @include font-size(3.2rem);
+
     font-weight: 700;
     color: var(--default-color);
     text-align: center;

src/components/Nav/Header/Header.module.scss

@@ -128,10 +128,11 @@
 
 .mainNavigation {
   font-size: 1.4rem !important;
-  // margin: 0 0 0 -0.4rem !important;
   opacity: 1;
   transition: opacity 0.3s;
 
+  // margin: 0 0 0 -0.4rem !important;
+
   @include media-breakpoint-down(lg) {
     background: var(--background-color);
     bottom: 0;
@@ -294,9 +295,10 @@
 .burgerContainer {
   box-sizing: content-box;
   display: inline-flex;
-  // float: right;
   padding-left: 0;
 
+  // float: right;
+
   @include media-breakpoint-up(sm) {
     padding-left: divide($container-padding-x, 2);
   }

src/components/Nav/ProfileSettingsNavigation/ProfileSettingsNavigation.module.scss

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

src/components/NotificationsPanel/NotificationView/NotificationView.module.scss

@@ -8,8 +8,6 @@
   border-radius: 16px;
   padding: 16px;
   background-color: var(--yellow-50);
-  // TODO: check markup
-  // font-weight: 700;
   line-height: 20px;
   cursor: pointer;
   transition: background-color 100ms;

src/components/NotificationsPanel/NotificationsPanel.module.scss

@@ -100,8 +100,7 @@ $transition-duration: 200ms;
 }
 
 .periodTitle {
-  // TODO: check markup
+  margin: 32px 0 16px;
-  margin: 32px 0 16px 0;
   color: var(--black-400);
   font-size: 12px;
   font-weight: 500;

src/components/Topic/Card.module.scss

@@ -56,6 +56,7 @@
 
 .topicTitle {
   @include font-size(2.2rem);
+
   font-weight: bold;
   margin-bottom: 1.2rem;
   margin-top: 0.5rem !important;
@@ -84,6 +85,7 @@
 
 .topicDescription {
   @include font-size(1.4rem);
+
   font-weight: 500;
   color: #696969;
   line-height: 1.3;

src/components/Topic/Full.module.scss

@@ -23,7 +23,6 @@
     min-width: 64px;
     font-size: 17px;
     padding: 8px 16px;
-
     background: var(--background-color-invert);
     color: var(--default-color-invert);
     border: none;

src/components/Topic/TopicBadge/TopicBadge.module.scss

@@ -36,11 +36,12 @@
   }
 
   .info {
+    @include font-size(1.4rem);
+
     border: none;
     display: flex;
     flex: 0 calc(100% - 5.2rem);
     flex-direction: column;
-    @include font-size(1.4rem);
     margin-bottom: 1rem;
 
     @include media-breakpoint-up(sm) {

src/components/Views/AllAuthors.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, For, onMount, Show } from 'solid-js'
+import { createEffect, createMemo, createSignal, For, Show } from 'solid-js'
 import type { Author } from '../../graphql/types.gen'
 import { setAuthorsSort, useAuthorsStore } from '../../stores/zine/authors'
 import { useRouter } from '../../stores/router'

src/components/Views/AllTopics.module.scss

@@ -87,6 +87,7 @@
 
 .alphabet {
   @include font-size(1.5rem);
+
   color: rgba(0 0 0 / 20%);
   display: flex;
   flex-wrap: wrap;
@@ -106,6 +107,7 @@
 
 .articlesCounter {
   @include font-size(1.2rem);
+
   margin-left: 0.5em;
   vertical-align: super;
 }

src/components/Views/AllTopics.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, For, onMount, Show } from 'solid-js'
+import { createEffect, createMemo, createSignal, For, Show } from 'solid-js'
 import type { Topic } from '../../graphql/types.gen'
 
 import { setTopicsSort, useTopicsStore } from '../../stores/zine/topics'

src/components/Views/Author/Author.module.scss

@@ -83,8 +83,8 @@
     max-height 0.5s,
     margin-bottom 0s 0.3s;
 
-  &:after {
+  &::after {
-    background-image: linear-gradient(to top, #fff, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0));
+    background-image: linear-gradient(to top, #fff, rgb(255 255 255 / 80%), rgb(255 255 255 / 0%));
     bottom: 0;
     content: '';
     display: block;
@@ -99,7 +99,7 @@
   max-height: 200em;
   margin-bottom: -2em;
 
-  &:after {
+  &::after {
     display: none;
   }
 }

src/components/Views/Edit.module.scss

@@ -50,10 +50,11 @@
     .additionalInput {
       @include font-size(1.4rem);
 
-      -moz-appearance: textfield;
+      appearance: textfield;
+
       &::-webkit-outer-spin-button,
       &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
+        appearance: none;
         margin: 0;
       }
 
@@ -223,7 +224,7 @@
       border-radius: 50%;
       top: 4px;
       right: 4px;
-      background-color: rgba(black, 0.5);
+      background-color: rgb(black 0.5);
       cursor: pointer;
       display: none;
     }

src/components/Views/Expo/Expo.module.scss

@@ -1,12 +1,13 @@
 .Expo {
   display: block;
   background: #fef2f2;
-  padding: 0 0 4rem 0;
+  padding: 0 0 4rem;
   min-height: 100vh;
 
   .navigation {
-    padding: 0 0;
+    padding: 0;
   }
+
   .showMore {
     display: flex;
     width: 100%;

src/components/Views/Feed.module.scss

@@ -9,6 +9,7 @@
 
 .feedNavigation {
   @include font-size(1.6rem);
+
   font-weight: 500;
 
   h4 {
@@ -51,6 +52,7 @@
 
   h4 {
     @include font-size(2.2rem);
+
     font-weight: bold;
     margin-bottom: 2rem;
   }
@@ -131,7 +133,7 @@
     }
 
     &:hover {
-      &:before {
+      &::before {
         background-image: url(/icons/knowledge-base-bullet-hover.svg);
       }
     }
@@ -170,6 +172,7 @@
   a {
     border: none;
     padding-bottom: 0.2em;
+
     &:hover * {
       background: var(--background-color-invert);
     }

src/components/Views/Topic.tsx

@@ -14,7 +14,6 @@ import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
 import { splitToPages } from '../../utils/splitToPages'
 import { clsx } from 'clsx'
 import { Row1 } from '../Feed/Row1'
-import { ArticleCard } from '../Feed/ArticleCard'
 import { useLocalize } from '../../context/localize'
 import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper'
 

src/components/_shared/DropArea/DropArea.module.scss

@@ -1,6 +1,6 @@
 .DropArea {
   .field {
-    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/_shared/Loading.module.scss

@@ -29,6 +29,7 @@
     width: 32px;
     height: 32px;
   }
+
   .tiny & {
     width: 18px;
     height: 18px;

src/components/_shared/SolidSwiper/ImageSwiper.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, For, Show, on, JSXElement } from 'solid-js'
+import { createEffect, createSignal, For, Show, on } from 'solid-js'
 import { MediaItem, UploadedFile } from '../../../pages/types'
 import { Icon } from '../Icon'
 import { Popover } from '../Popover'

src/components/_shared/SolidSwiper/Swiper.module.scss

@@ -30,12 +30,15 @@ $navigation-reserve: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
+
     a {
       color: var(--default-color-invert);
       border-color: var(--default-color-invert);
     }
+
     .container {
       margin: auto;
+
       // max-width: 800px;
       position: relative;
       padding: 24px 0;
@@ -108,7 +111,7 @@ $navigation-reserve: 32px;
     position: absolute;
     top: 16px;
     right: 16px;
-    background: rgba(var(--default-color), 0.3);
+    background: rgb(var(--default-color) 0.3);
     cursor: pointer;
     z-index: 12;
     display: none;
@@ -213,11 +216,13 @@ $navigation-reserve: 32px;
 
     .source {
       @include font-size(1.2rem);
+
       color: var(--secondary-color);
     }
 
     .body {
       @include font-size(1.7rem);
+
       margin-top: 24px;
 
       @include media-breakpoint-up(md) {

src/pages/feed.page.tsx

@@ -7,11 +7,6 @@ import { useRouter } from '../stores/router'
 import { AuthGuard } from '../components/AuthGuard'
 import { LoadShoutsOptions } from '../graphql/types.gen'
 
-export const FeedPage = () => {
-  onCleanup(() => resetSortedArticles())
-
-  const { page } = useRouter()
-
 const handleFeedLoadShouts = (options: LoadShoutsOptions) => {
   return loadShouts({
     ...options,
@@ -23,6 +18,11 @@ export const FeedPage = () => {
   return loadMyFeed(options)
 }
 
+export const FeedPage = () => {
+  onCleanup(() => resetSortedArticles())
+
+  const { page } = useRouter()
+
   createEffect(
     on(
       () => page().route,

src/renderer/_default.page.client.tsx

@@ -3,7 +3,7 @@ import { hydrate } from 'solid-js/web'
 import type { PageContextBuiltInClientWithClientRouting } from 'vike/types'
 import type { PageContext } from './types'
 import { MetaProvider } from '@solidjs/meta'
-import i18next, { use as useI18next } from 'i18next'
+import i18next from 'i18next'
 import ICU from 'i18next-icu'
 import HttpApi from 'i18next-http-backend'
 import * as Sentry from '@sentry/browser'
@@ -30,8 +30,11 @@ export const render = async (pageContext: PageContextBuiltInClientWithClientRout
     })
   }
 
-  useI18next(HttpApi)
+  // eslint-disable-next-line import/no-named-as-default-member
-  await i18next.use(ICU).init({
+  await i18next
+    .use(HttpApi)
+    .use(ICU)
+    .init({
       // debug: true,
       supportedLngs: ['ru', 'en'],
       fallbackLng: lng,

src/renderer/_default.page.server.tsx

@@ -1,9 +1,9 @@
-import { generateHydrationScript, renderToString } from 'solid-js/web'
+import { generateHydrationScript, getAssets, renderToString } from 'solid-js/web'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import { App } from '../components/App'
 import { initRouter } from '../stores/router'
 import type { PageContext } from './types'
-import { MetaProvider, renderTags } from '@solidjs/meta'
+import { MetaProvider } from '@solidjs/meta'
 import i18next from 'i18next'
 import ru from '../../public/locales/ru/translation.json'
 import en from '../../public/locales/en/translation.json'
@@ -12,8 +12,6 @@ import ICU from 'i18next-icu'
 
 export const passToClient = ['pageProps', 'lng', 'documentProps', 'is404']
 
-const metaTags = []
-
 const getLng = (pageContext: PageContext): Language => {
   const { urlParsed, cookies } = pageContext
 
@@ -45,6 +43,7 @@ export const render = async (pageContext: PageContext) => {
       }
     })
   } else if (i18next.language !== lng) {
+    // eslint-disable-next-line import/no-named-as-default-member
     await i18next.changeLanguage(lng)
   }
 
@@ -57,7 +56,7 @@ export const render = async (pageContext: PageContext) => {
   pageContext.lng = lng
 
   const rootContent = renderToString(() => (
-    <MetaProvider tags={metaTags}>
+    <MetaProvider>
       <App {...pageContext.pageProps} />
     </MetaProvider>
   ))
@@ -65,7 +64,7 @@ export const render = async (pageContext: PageContext) => {
   return escapeInject`<!DOCTYPE html>
     <html lang="${lng}">
       <head>
-        ${dangerouslySkipEscape(renderTags(metaTags))}
+        ${dangerouslySkipEscape(getAssets())}
         ${dangerouslySkipEscape(generateHydrationScript())}
       </head>
       <body>

src/styles/app.scss

@@ -17,7 +17,7 @@
   --link-hover-background: #000;
   --secondary-color: #85878a;
   --placeholder-color: #9fa1a7;
-  --placeholder-color-semi: rgba(159, 169, 167, 0.2);
+  --placeholder-color-semi: rgb(159 169 167 / 20%);
   --danger-color: #d00820;
   --lightgray-color: rgb(84 16 17 / 6%);
   --font: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Open Sans',
@@ -28,6 +28,7 @@
   --icon-filter-hover: invert(1);
   --editor-bubble-menu-background: #fff;
   --blue-link: #2638d9;
+
   // names from figma
   --black-50: #f7f7f8;
   --black-100: #e9e9ee;
@@ -53,6 +54,7 @@
   --icon-filter: invert(1);
   --icon-filter-hover: invert(0);
   --editor-bubble-menu-background: #444;
+
   // names from figma
   --black-50: #080807;
   --black-100: #161611;
@@ -146,11 +148,13 @@ h2 {
 
 h1 {
   @include font-size(4.8rem);
+
   line-height: 1.1;
 }
 
 h2 {
   @include font-size(4rem);
+
   line-height: 1.1;
   margin-bottom: 0.5em;
   margin-top: 1.5em;
@@ -158,6 +162,7 @@ h2 {
 
 h3 {
   @include font-size(3.2rem);
+
   line-height: 1.1;
   margin-bottom: 0.5em;
 }
@@ -289,6 +294,7 @@ button {
 
 .button--light {
   @include font-size(1.5rem);
+
   background-color: #f6f6f6;
   border-radius: 0.8rem;
   color: #000;
@@ -586,13 +592,16 @@ figure {
 
   figcaption {
     color: rgb(0 0 0 / 60%);
+
     @include font-size(1.2rem);
+
     line-height: 1.5;
   }
 }
 
 .view-switcher {
   @include font-size(1.4rem);
+
   display: flex;
   font-weight: 500;
   list-style: none;
@@ -810,8 +819,7 @@ figure {
 #root {
   display: flex;
   flex-direction: column;
-  align-content: space-between;
+  place-content: space-between space-between;
-  justify-content: space-between;
   min-height: 100vh;
 }
 
@@ -901,6 +909,7 @@ figure {
 
 .content-index {
   @include font-size(1.4rem);
+
   line-height: 1.4;
   margin: 0 3.6rem 2em 0;
 
@@ -987,6 +996,7 @@ details {
 
 .description {
   @include font-size(1.4rem);
+
   color: rgba(0 0 0 / 40%);
 
   .pretty-form__item + & {
@@ -1024,11 +1034,12 @@ details {
 
 iframe {
   border: none;
-  color: rgba(255, 255, 255, 0);
+  color: rgb(255 255 255 / 0%);
 }
 
 .lead {
   @include font-size(2rem);
+
   font-weight: bold;
   line-height: 1.5;
 }