Merge pull request #297 from Discours/fix/404_page

WIP
2023-11-04 18:01:15 +02:00 · 2023-11-04 18:01:15 +02:00 · d4e0d43a55
commit d4e0d43a55
parent b34d8716d9 efc5bb258f
56 changed files with 5025 additions and 1832 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
--- a/.lintstagedrc.bak
+++ b/.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"
 }
--- a/api/ssr.mjs
+++ b/api/ssr.mjs
@ -1,13 +1,13 @@
-import { renderPage } from 'vite-plugin-ssr/server'
+import { renderPage } from 'vike/server'

 export default async function handler(req, res) {
  const { url, cookies } = req

  const pageContext = await renderPage({ urlOriginal: url, cookies })

-  const { httpResponse, errorWhileRendering } = pageContext
+  const { httpResponse, errorWhileRendering, is404 } = pageContext

-  if (errorWhileRendering) {
+  if (errorWhileRendering && !is404) {
    console.error(errorWhileRendering)
    res.statusCode = 500
    res.end()
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -3,6 +3,7 @@
  "version": "0.8.0",
  "private": true,
  "license": "MIT",
+  "type": "module",
  "scripts": {
    "build": "vite build",
    "check": "npm run lint && npm run typecheck",
@ -38,11 +39,11 @@
  },
  "devDependencies": {
    "@babel/core": "7.21.8",
-    "@graphql-codegen/cli": "3.2.2",
-    "@graphql-codegen/typescript": "3.0.4",
-    "@graphql-codegen/typescript-operations": "3.0.4",
-    "@graphql-codegen/typescript-urql": "3.7.3",
-    "@graphql-codegen/urql-introspection": "2.2.1",
+    "@graphql-codegen/cli": "5.0.0",
+    "@graphql-codegen/typescript": "4.0.1",
+    "@graphql-codegen/typescript-operations": "4.0.1",
+    "@graphql-codegen/typescript-urql": "4.0.0",
+    "@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",
@ -55,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",
@ -86,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/node": "20.1.1",
-    "@typescript-eslint/eslint-plugin": "6.7.3",
-    "@typescript-eslint/parser": "6.7.3",
+    "@types/js-cookie": "3.0.5",
+    "@types/node": "20.8.10",
+    "@typescript-eslint/eslint-plugin": "6.9.1",
+    "@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-jest": "27.4.0",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-jest": "27.6.0",
+    "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-unicorn": "48.0.1",
+    "eslint-plugin-sonarjs": "0.23.0",
+    "eslint-plugin-unicorn": "49.0.0",
    "fast-deep-equal": "3.1.3",
    "graphql": "16.6.0",
    "graphql-tag": "2.12.6",
@ -117,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",
@ -127,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",
-    "solid-js": "1.7.5",
+    "sass": "1.69.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-config-standard-scss": "11.0.0",
+    "stylelint": "15.11.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",
-    "vite": "4.3.9",
+    "vike": "0.4.144",
+    "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-ssr": "0.4.123",
+    "vite-plugin-solid": "2.7.2",
    "y-prosemirror": "1.2.1",
    "yjs": "13.6.0"
  },
--- a/src/components/Article/Article.module.scss
+++ b/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,
--- a/src/components/Article/AudioPlayer/AudioPlayer.module.scss
+++ 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 {
--- a/src/components/Article/Comment/Comment.module.scss
+++ b/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: '';
--- a/src/components/Author/AhtorLink/AhtorLink.module.scss
+++ b/src/components/Author/AhtorLink/AhtorLink.module.scss
@ -1,8 +1,7 @@
 .AuthorLink {
  .link {
    display: inline-flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
+    flex-flow: row 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;
    }
--- a/src/components/Author/AuthorBadge/AuthorBadge.module.scss
+++ b/src/components/Author/AuthorBadge/AuthorBadge.module.scss
@ -22,6 +22,7 @@

  .info {
    @include font-size(1.4rem);
+
    border: none;
    display: flex;
    flex: 0 calc(100% - 5.2rem);
--- a/src/components/Author/Userpic/Userpic.module.scss
+++ b/src/components/Author/Userpic/Userpic.module.scss
@ -79,6 +79,7 @@
    height: 40px;
    width: 40px;
    min-width: 40px;
+
    .letters {
      font-size: 1.2rem;
    }
--- a/src/components/Discours/Hero.module.scss
+++ b/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;
--- a/src/components/Editor/AudioUploader/AudioUploader.module.scss
+++ b/src/components/Editor/AudioUploader/AudioUploader.module.scss
@ -5,6 +5,7 @@
  .draggable {
    margin: 8px 0;
    padding: 8px 0;
+
    &:hover {
      background: var(--placeholder-color-semi);
    }
--- a/src/components/Editor/AutoSaveNotice/AutoSaveNotice.module.scss
+++ b/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(255 255 255 / 30%);
  backdrop-filter: blur(4px);
  border: 1px solid var(--secondary-color);
  left: 100%;
--- a/src/components/Editor/Prosemirror.scss
+++ b/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;
--- a/src/components/Editor/SimplifiedEditor.module.scss
+++ b/src/components/Editor/SimplifiedEditor.module.scss
@ -9,6 +9,7 @@

  .simplifiedEditorField {
    @include font-size(1.4rem);
+
    min-height: 100px;

    .emptyNode:first-child::before {
@ -92,7 +93,7 @@
  }

  &.isFocused {
-    //background: red;
+    // background: red;
    .controls {
      opacity: 1;
      bottom: 0;
@ -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);
--- a/src/components/Editor/extensions/Footnote.ts
+++ b/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
--- a/src/components/Feed/ArticleCard/ArticleCard.module.scss
+++ b/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;
  }

--- a/src/components/Feed/ArticleCard/ArticleCard.tsx
+++ b/src/components/Feed/ArticleCard/ArticleCard.tsx
@ -158,7 +158,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
            [styles.shoutCardTitlesContainerFeedMode]: props.settings?.isFeedMode
          })}
        >
-          <a href={`/${props.article.slug || ''}`}>
+          <a href={getPagePath(router, 'article', { slug: props.article.slug })}>
            <div class={styles.shoutCardTitle}>
              <span class={styles.shoutCardLinkWrapper}>
                <span class={styles.shoutCardLinkContainer}>{title}</span>
--- a/src/components/Feed/Sidebar/Sidebar.module.scss
+++ b/src/components/Feed/Sidebar/Sidebar.module.scss
@ -125,6 +125,7 @@

  h4 {
    @include font-size(1.2rem);
+
    font-weight: bold;
    color: #9fa1a7;
    cursor: pointer;
--- a/src/components/Inbox/Search.module.scss
+++ b/src/components/Inbox/Search.module.scss
@ -1,5 +1,6 @@
 .Search {
  flex: 1;
+
  .field {
    position: relative;
    background: #fff;
--- a/src/components/Nav/AuthModal/AuthModal.module.scss
+++ b/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;

--- a/src/components/Nav/ConfirmModal/ConfirmModal.module.scss
+++ b/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;
--- a/src/components/Nav/Header/Header.module.scss
+++ b/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);
  }
--- a/src/components/Nav/ProfileSettingsNavigation/ProfileSettingsNavigation.module.scss
+++ b/src/components/Nav/ProfileSettingsNavigation/ProfileSettingsNavigation.module.scss
@ -1,5 +1,6 @@
 .navigationHeader {
  @include font-size(1.8rem);
+
  font-weight: bold;
  margin-top: 1.1em;
 }
--- a/src/components/NotificationsPanel/NotificationView/NotificationView.module.scss
+++ b/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;
--- a/src/components/NotificationsPanel/NotificationsPanel.module.scss
+++ b/src/components/NotificationsPanel/NotificationsPanel.module.scss
@ -100,8 +100,7 @@ $transition-duration: 200ms;
 }

 .periodTitle {
-  // TODO: check markup
-  margin: 32px 0 16px 0;
+  margin: 32px 0 16px;
  color: var(--black-400);
  font-size: 12px;
  font-weight: 500;
--- a/src/components/Topic/Card.module.scss
+++ b/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;
--- a/src/components/Topic/Full.module.scss
+++ b/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;
--- a/src/components/Topic/TopicBadge/TopicBadge.module.scss
+++ b/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) {
--- a/src/components/Views/AllAuthors.tsx
+++ b/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'
--- a/src/components/Views/AllTopics.module.scss
+++ b/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;
 }
--- a/src/components/Views/AllTopics.tsx
+++ b/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'
--- a/src/components/Views/Author/Author.module.scss
+++ b/src/components/Views/Author/Author.module.scss
@ -83,8 +83,8 @@
    max-height 0.5s,
    margin-bottom 0s 0.3s;

-  &:after {
-    background-image: linear-gradient(to top, #fff, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0));
+  &::after {
+    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;
  }
 }
--- a/src/components/Views/Edit.module.scss
+++ b/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(0 0 0 / 50%);
      cursor: pointer;
      display: none;
    }
--- a/src/components/Views/Expo/Expo.module.scss
+++ b/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%;
--- a/src/components/Views/Feed.module.scss
+++ b/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);
    }
--- a/src/components/Views/Topic.module.scss
+++ b/src/components/Views/Topic.module.scss
--- a/src/components/Views/Topic.tsx
+++ b/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'

--- a/src/components/_shared/DropArea/DropArea.module.scss
+++ b/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;
--- a/src/components/_shared/Loading.module.scss
+++ b/src/components/_shared/Loading.module.scss
@ -29,6 +29,7 @@
    width: 32px;
    height: 32px;
  }
+
  .tiny & {
    width: 18px;
    height: 18px;
--- a/src/components/_shared/SolidSwiper/ImageSwiper.tsx
+++ b/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'
--- a/src/components/_shared/SolidSwiper/Swiper.module.scss
+++ b/src/components/_shared/SolidSwiper/Swiper.module.scss
@ -30,13 +30,16 @@ $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;
+
+      // max-width: 800px;
      position: relative;
      padding: 24px 0;
      display: flex;
@ -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,15 +216,17 @@ $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) {
-        //margin-left: calc((100% + 130px) * 0.15);
+        // margin-left: calc((100% + 130px) * 0.15);
        margin-left: calc(15% + 24px);
      }
    }
--- a/src/graphql/types.gen.ts
+++ b/src/graphql/types.gen.ts
@ -4,105 +4,109 @@ export type InputMaybe<T> = Maybe<T>
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] }
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> }
 export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> }
+export type MakeEmpty<T extends { [key: string]: unknown }, K extends keyof T> = { [_ in K]?: never }
+export type Incremental<T> =
+  | T
+  | { [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never }
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
-  ID: string
-  String: string
-  Boolean: boolean
-  Int: number
-  Float: number
-  DateTime: any
+  ID: { input: string; output: string }
+  String: { input: string; output: string }
+  Boolean: { input: boolean; output: boolean }
+  Int: { input: number; output: number }
+  Float: { input: number; output: number }
+  DateTime: { input: any; output: any }
 }

 export type AuthResult = {
-  error?: Maybe<Scalars['String']>
-  token?: Maybe<Scalars['String']>
+  error?: Maybe<Scalars['String']['output']>
+  token?: Maybe<Scalars['String']['output']>
  user?: Maybe<User>
 }

 export type Author = {
-  about?: Maybe<Scalars['String']>
-  bio?: Maybe<Scalars['String']>
-  caption?: Maybe<Scalars['String']>
-  createdAt?: Maybe<Scalars['DateTime']>
-  id: Scalars['Int']
-  lastSeen?: Maybe<Scalars['DateTime']>
-  links?: Maybe<Array<Maybe<Scalars['String']>>>
-  name: Scalars['String']
+  about?: Maybe<Scalars['String']['output']>
+  bio?: Maybe<Scalars['String']['output']>
+  caption?: Maybe<Scalars['String']['output']>
+  createdAt?: Maybe<Scalars['DateTime']['output']>
+  id: Scalars['Int']['output']
+  lastSeen?: Maybe<Scalars['DateTime']['output']>
+  links?: Maybe<Array<Maybe<Scalars['String']['output']>>>
+  name: Scalars['String']['output']
  roles?: Maybe<Array<Maybe<Role>>>
-  slug: Scalars['String']
+  slug: Scalars['String']['output']
  stat?: Maybe<AuthorStat>
-  userpic?: Maybe<Scalars['String']>
+  userpic?: Maybe<Scalars['String']['output']>
 }

 export type AuthorStat = {
-  commented?: Maybe<Scalars['Int']>
-  followers?: Maybe<Scalars['Int']>
-  followings?: Maybe<Scalars['Int']>
-  rating?: Maybe<Scalars['Int']>
-  shouts?: Maybe<Scalars['Int']>
+  commented?: Maybe<Scalars['Int']['output']>
+  followers?: Maybe<Scalars['Int']['output']>
+  followings?: Maybe<Scalars['Int']['output']>
+  rating?: Maybe<Scalars['Int']['output']>
+  shouts?: Maybe<Scalars['Int']['output']>
 }

 export type AuthorsBy = {
-  createdAt?: InputMaybe<Scalars['DateTime']>
-  days?: InputMaybe<Scalars['Int']>
-  lastSeen?: InputMaybe<Scalars['DateTime']>
-  name?: InputMaybe<Scalars['String']>
-  order?: InputMaybe<Scalars['String']>
-  slug?: InputMaybe<Scalars['String']>
-  stat?: InputMaybe<Scalars['String']>
-  topic?: InputMaybe<Scalars['String']>
+  createdAt?: InputMaybe<Scalars['DateTime']['input']>
+  days?: InputMaybe<Scalars['Int']['input']>
+  lastSeen?: InputMaybe<Scalars['DateTime']['input']>
+  name?: InputMaybe<Scalars['String']['input']>
+  order?: InputMaybe<Scalars['String']['input']>
+  slug?: InputMaybe<Scalars['String']['input']>
+  stat?: InputMaybe<Scalars['String']['input']>
+  topic?: InputMaybe<Scalars['String']['input']>
 }

 export type Chat = {
-  admins?: Maybe<Array<Maybe<Scalars['Int']>>>
-  createdAt: Scalars['Int']
-  createdBy: Scalars['Int']
-  description?: Maybe<Scalars['String']>
-  id: Scalars['String']
+  admins?: Maybe<Array<Maybe<Scalars['Int']['output']>>>
+  createdAt: Scalars['Int']['output']
+  createdBy: Scalars['Int']['output']
+  description?: Maybe<Scalars['String']['output']>
+  id: Scalars['String']['output']
  members?: Maybe<Array<Maybe<ChatMember>>>
  messages?: Maybe<Array<Maybe<Message>>>
-  private?: Maybe<Scalars['Boolean']>
-  title?: Maybe<Scalars['String']>
-  unread?: Maybe<Scalars['Int']>
-  updatedAt: Scalars['Int']
-  users?: Maybe<Array<Maybe<Scalars['Int']>>>
+  private?: Maybe<Scalars['Boolean']['output']>
+  title?: Maybe<Scalars['String']['output']>
+  unread?: Maybe<Scalars['Int']['output']>
+  updatedAt: Scalars['Int']['output']
+  users?: Maybe<Array<Maybe<Scalars['Int']['output']>>>
 }

 export type ChatInput = {
-  description?: InputMaybe<Scalars['String']>
-  id: Scalars['String']
-  title?: InputMaybe<Scalars['String']>
+  description?: InputMaybe<Scalars['String']['input']>
+  id: Scalars['String']['input']
+  title?: InputMaybe<Scalars['String']['input']>
 }

 export type ChatMember = {
-  id: Scalars['Int']
-  lastSeen?: Maybe<Scalars['DateTime']>
-  name: Scalars['String']
-  online?: Maybe<Scalars['Boolean']>
-  slug: Scalars['String']
-  userpic?: Maybe<Scalars['String']>
+  id: Scalars['Int']['output']
+  lastSeen?: Maybe<Scalars['DateTime']['output']>
+  name: Scalars['String']['output']
+  online?: Maybe<Scalars['Boolean']['output']>
+  slug: Scalars['String']['output']
+  userpic?: Maybe<Scalars['String']['output']>
 }

 export type Collection = {
-  amount?: Maybe<Scalars['Int']>
-  createdAt: Scalars['DateTime']
+  amount?: Maybe<Scalars['Int']['output']>
+  createdAt: Scalars['DateTime']['output']
  createdBy: User
-  desc?: Maybe<Scalars['String']>
-  id: Scalars['Int']
-  publishedAt?: Maybe<Scalars['DateTime']>
-  slug: Scalars['String']
-  title: Scalars['String']
+  desc?: Maybe<Scalars['String']['output']>
+  id: Scalars['Int']['output']
+  publishedAt?: Maybe<Scalars['DateTime']['output']>
+  slug: Scalars['String']['output']
+  title: Scalars['String']['output']
 }

 export type Community = {
-  createdAt: Scalars['DateTime']
+  createdAt: Scalars['DateTime']['output']
  createdBy: User
-  desc?: Maybe<Scalars['String']>
-  id: Scalars['Int']
-  name: Scalars['String']
-  pic: Scalars['String']
-  slug: Scalars['String']
+  desc?: Maybe<Scalars['String']['output']>
+  id: Scalars['Int']['output']
+  name: Scalars['String']['output']
+  pic: Scalars['String']['output']
+  slug: Scalars['String']['output']
 }

 export enum FollowingEntity {
@ -113,35 +117,35 @@ export enum FollowingEntity {
 }

 export type LoadShoutsFilters = {
-  author?: InputMaybe<Scalars['String']>
-  body?: InputMaybe<Scalars['String']>
-  days?: InputMaybe<Scalars['Int']>
-  excludeLayout?: InputMaybe<Scalars['String']>
-  layout?: InputMaybe<Scalars['String']>
-  reacted?: InputMaybe<Scalars['Boolean']>
-  title?: InputMaybe<Scalars['String']>
-  topic?: InputMaybe<Scalars['String']>
-  visibility?: InputMaybe<Scalars['String']>
+  author?: InputMaybe<Scalars['String']['input']>
+  body?: InputMaybe<Scalars['String']['input']>
+  days?: InputMaybe<Scalars['Int']['input']>
+  excludeLayout?: InputMaybe<Scalars['String']['input']>
+  layout?: InputMaybe<Scalars['String']['input']>
+  reacted?: InputMaybe<Scalars['Boolean']['input']>
+  title?: InputMaybe<Scalars['String']['input']>
+  topic?: InputMaybe<Scalars['String']['input']>
+  visibility?: InputMaybe<Scalars['String']['input']>
 }

 export type LoadShoutsOptions = {
  filters?: InputMaybe<LoadShoutsFilters>
-  limit: Scalars['Int']
-  offset?: InputMaybe<Scalars['Int']>
-  order_by?: InputMaybe<Scalars['String']>
-  order_by_desc?: InputMaybe<Scalars['Boolean']>
-  with_author_captions?: InputMaybe<Scalars['Boolean']>
+  limit: Scalars['Int']['input']
+  offset?: InputMaybe<Scalars['Int']['input']>
+  order_by?: InputMaybe<Scalars['String']['input']>
+  order_by_desc?: InputMaybe<Scalars['Boolean']['input']>
+  with_author_captions?: InputMaybe<Scalars['Boolean']['input']>
 }

 export type Message = {
-  author: Scalars['Int']
-  body: Scalars['String']
-  chatId: Scalars['String']
-  createdAt: Scalars['Int']
-  id: Scalars['Int']
-  replyTo?: Maybe<Scalars['Int']>
-  seen?: Maybe<Scalars['Boolean']>
-  updatedAt?: Maybe<Scalars['Int']>
+  author: Scalars['Int']['output']
+  body: Scalars['String']['output']
+  chatId: Scalars['String']['output']
+  createdAt: Scalars['Int']['output']
+  id: Scalars['Int']['output']
+  replyTo?: Maybe<Scalars['Int']['output']>
+  seen?: Maybe<Scalars['Boolean']['output']>
+  updatedAt?: Maybe<Scalars['Int']['output']>
 }

 export enum MessageStatus {
@ -151,12 +155,12 @@ export enum MessageStatus {
 }

 export type MessagesBy = {
-  author?: InputMaybe<Scalars['String']>
-  body?: InputMaybe<Scalars['String']>
-  chat?: InputMaybe<Scalars['String']>
-  days?: InputMaybe<Scalars['Int']>
-  order?: InputMaybe<Scalars['String']>
-  stat?: InputMaybe<Scalars['String']>
+  author?: InputMaybe<Scalars['String']['input']>
+  body?: InputMaybe<Scalars['String']['input']>
+  chat?: InputMaybe<Scalars['String']['input']>
+  days?: InputMaybe<Scalars['Int']['input']>
+  order?: InputMaybe<Scalars['String']['input']>
+  stat?: InputMaybe<Scalars['String']['input']>
 }

 export type Mutation = {
@ -189,18 +193,18 @@ export type Mutation = {
 }

 export type MutationConfirmEmailArgs = {
-  token: Scalars['String']
+  token: Scalars['String']['input']
 }

 export type MutationCreateChatArgs = {
-  members: Array<InputMaybe<Scalars['Int']>>
-  title?: InputMaybe<Scalars['String']>
+  members: Array<InputMaybe<Scalars['Int']['input']>>
+  title?: InputMaybe<Scalars['String']['input']>
 }

 export type MutationCreateMessageArgs = {
-  body: Scalars['String']
-  chat: Scalars['String']
-  replyTo?: InputMaybe<Scalars['Int']>
+  body: Scalars['String']['input']
+  chat: Scalars['String']['input']
+  replyTo?: InputMaybe<Scalars['Int']['input']>
 }

 export type MutationCreateReactionArgs = {
@ -216,59 +220,59 @@ export type MutationCreateTopicArgs = {
 }

 export type MutationDeleteChatArgs = {
-  chatId: Scalars['String']
+  chatId: Scalars['String']['input']
 }

 export type MutationDeleteMessageArgs = {
-  chatId: Scalars['String']
-  id: Scalars['Int']
+  chatId: Scalars['String']['input']
+  id: Scalars['Int']['input']
 }

 export type MutationDeleteReactionArgs = {
-  id: Scalars['Int']
+  id: Scalars['Int']['input']
 }

 export type MutationDeleteShoutArgs = {
-  shout_id: Scalars['Int']
+  shout_id: Scalars['Int']['input']
 }

 export type MutationDestroyTopicArgs = {
-  slug: Scalars['String']
+  slug: Scalars['String']['input']
 }

 export type MutationFollowArgs = {
-  slug: Scalars['String']
+  slug: Scalars['String']['input']
  what: FollowingEntity
 }

 export type MutationMarkAsReadArgs = {
-  chatId: Scalars['String']
-  ids: Array<InputMaybe<Scalars['Int']>>
+  chatId: Scalars['String']['input']
+  ids: Array<InputMaybe<Scalars['Int']['input']>>
 }

 export type MutationMarkNotificationAsReadArgs = {
-  notification_id: Scalars['Int']
+  notification_id: Scalars['Int']['input']
 }

 export type MutationRateUserArgs = {
-  slug: Scalars['String']
-  value: Scalars['Int']
+  slug: Scalars['String']['input']
+  value: Scalars['Int']['input']
 }

 export type MutationRegisterUserArgs = {
-  email: Scalars['String']
-  name?: InputMaybe<Scalars['String']>
-  password?: InputMaybe<Scalars['String']>
+  email: Scalars['String']['input']
+  name?: InputMaybe<Scalars['String']['input']>
+  password?: InputMaybe<Scalars['String']['input']>
 }

 export type MutationSendLinkArgs = {
-  email: Scalars['String']
-  lang?: InputMaybe<Scalars['String']>
-  template?: InputMaybe<Scalars['String']>
+  email: Scalars['String']['input']
+  lang?: InputMaybe<Scalars['String']['input']>
+  template?: InputMaybe<Scalars['String']['input']>
 }

 export type MutationUnfollowArgs = {
-  slug: Scalars['String']
+  slug: Scalars['String']['input']
  what: FollowingEntity
 }

@ -277,9 +281,9 @@ export type MutationUpdateChatArgs = {
 }

 export type MutationUpdateMessageArgs = {
-  body: Scalars['String']
-  chatId: Scalars['String']
-  id: Scalars['Int']
+  body: Scalars['String']['input']
+  chatId: Scalars['String']['input']
+  id: Scalars['Int']['input']
 }

 export type MutationUpdateProfileArgs = {
@ -287,13 +291,13 @@ export type MutationUpdateProfileArgs = {
 }

 export type MutationUpdateReactionArgs = {
-  id: Scalars['Int']
+  id: Scalars['Int']['input']
  reaction: ReactionInput
 }

 export type MutationUpdateShoutArgs = {
-  publish?: InputMaybe<Scalars['Boolean']>
-  shout_id: Scalars['Int']
+  publish?: InputMaybe<Scalars['Boolean']['input']>
+  shout_id: Scalars['Int']['input']
  shout_input?: InputMaybe<ShoutInput>
 }

@ -307,13 +311,13 @@ export type MySubscriptionsQueryResult = {
 }

 export type Notification = {
-  createdAt: Scalars['DateTime']
-  data?: Maybe<Scalars['String']>
-  id: Scalars['Int']
-  occurrences: Scalars['Int']
-  reaction?: Maybe<Scalars['Int']>
-  seen: Scalars['Boolean']
-  shout?: Maybe<Scalars['Int']>
+  createdAt: Scalars['DateTime']['output']
+  data?: Maybe<Scalars['String']['output']>
+  id: Scalars['Int']['output']
+  occurrences: Scalars['Int']['output']
+  reaction?: Maybe<Scalars['Int']['output']>
+  seen: Scalars['Boolean']['output']
+  shout?: Maybe<Scalars['Int']['output']>
  type: NotificationType
 }

@ -323,40 +327,40 @@ export enum NotificationType {
 }

 export type NotificationsQueryParams = {
-  limit?: InputMaybe<Scalars['Int']>
-  offset?: InputMaybe<Scalars['Int']>
+  limit?: InputMaybe<Scalars['Int']['input']>
+  offset?: InputMaybe<Scalars['Int']['input']>
 }

 export type NotificationsQueryResult = {
  notifications: Array<Maybe<Notification>>
-  totalCount: Scalars['Int']
-  totalUnreadCount: Scalars['Int']
+  totalCount: Scalars['Int']['output']
+  totalUnreadCount: Scalars['Int']['output']
 }

 export type Operation = {
-  id: Scalars['Int']
-  name: Scalars['String']
+  id: Scalars['Int']['output']
+  name: Scalars['String']['output']
 }

 export type Permission = {
-  operation: Scalars['Int']
-  resource: Scalars['Int']
+  operation: Scalars['Int']['output']
+  resource: Scalars['Int']['output']
 }

 export type ProfileInput = {
-  about?: InputMaybe<Scalars['String']>
-  bio?: InputMaybe<Scalars['String']>
-  links?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
-  name?: InputMaybe<Scalars['String']>
-  slug?: InputMaybe<Scalars['String']>
-  userpic?: InputMaybe<Scalars['String']>
+  about?: InputMaybe<Scalars['String']['input']>
+  bio?: InputMaybe<Scalars['String']['input']>
+  links?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>
+  name?: InputMaybe<Scalars['String']['input']>
+  slug?: InputMaybe<Scalars['String']['input']>
+  userpic?: InputMaybe<Scalars['String']['input']>
 }

 export type Query = {
  authorsAll: Array<Maybe<Author>>
  getAuthor?: Maybe<Author>
  getTopic?: Maybe<Topic>
-  isEmailUsed: Scalars['Boolean']
+  isEmailUsed: Scalars['Boolean']['output']
  loadAuthorsBy: Array<Maybe<Author>>
  loadChats: Result
  loadDrafts: Array<Maybe<Shout>>
@ -367,7 +371,7 @@ export type Query = {
  loadRecipients: Result
  loadShout?: Maybe<Shout>
  loadShouts: Array<Maybe<Shout>>
-  markdownBody: Scalars['String']
+  markdownBody: Scalars['String']['output']
  myFeed?: Maybe<Array<Maybe<Shout>>>
  searchMessages: Result
  searchRecipients: Result
@ -383,32 +387,32 @@ export type Query = {
 }

 export type QueryGetAuthorArgs = {
-  slug: Scalars['String']
+  slug: Scalars['String']['input']
 }

 export type QueryGetTopicArgs = {
-  slug: Scalars['String']
+  slug: Scalars['String']['input']
 }

 export type QueryIsEmailUsedArgs = {
-  email: Scalars['String']
+  email: Scalars['String']['input']
 }

 export type QueryLoadAuthorsByArgs = {
  by?: InputMaybe<AuthorsBy>
-  limit?: InputMaybe<Scalars['Int']>
-  offset?: InputMaybe<Scalars['Int']>
+  limit?: InputMaybe<Scalars['Int']['input']>
+  offset?: InputMaybe<Scalars['Int']['input']>
 }

 export type QueryLoadChatsArgs = {
-  limit?: InputMaybe<Scalars['Int']>
-  offset?: InputMaybe<Scalars['Int']>
+  limit?: InputMaybe<Scalars['Int']['input']>
+  offset?: InputMaybe<Scalars['Int']['input']>
 }

 export type QueryLoadMessagesByArgs = {
  by: MessagesBy
-  limit?: InputMaybe<Scalars['Int']>
-  offset?: InputMaybe<Scalars['Int']>
+  limit?: InputMaybe<Scalars['Int']['input']>
+  offset?: InputMaybe<Scalars['Int']['input']>
 }

 export type QueryLoadNotificationsArgs = {
@ -417,18 +421,18 @@ export type QueryLoadNotificationsArgs = {

 export type QueryLoadReactionsByArgs = {
  by: ReactionBy
-  limit?: InputMaybe<Scalars['Int']>
-  offset?: InputMaybe<Scalars['Int']>
+  limit?: InputMaybe<Scalars['Int']['input']>
+  offset?: InputMaybe<Scalars['Int']['input']>
 }

 export type QueryLoadRecipientsArgs = {
-  limit?: InputMaybe<Scalars['Int']>
-  offset?: InputMaybe<Scalars['Int']>
+  limit?: InputMaybe<Scalars['Int']['input']>
+  offset?: InputMaybe<Scalars['Int']['input']>
 }

 export type QueryLoadShoutArgs = {
-  shout_id?: InputMaybe<Scalars['Int']>
-  slug?: InputMaybe<Scalars['String']>
+  shout_id?: InputMaybe<Scalars['Int']['input']>
+  slug?: InputMaybe<Scalars['String']['input']>
 }

 export type QueryLoadShoutsArgs = {
@ -436,7 +440,7 @@ export type QueryLoadShoutsArgs = {
 }

 export type QueryMarkdownBodyArgs = {
-  body: Scalars['String']
+  body: Scalars['String']['input']
 }

 export type QueryMyFeedArgs = {
@ -445,85 +449,85 @@ export type QueryMyFeedArgs = {

 export type QuerySearchMessagesArgs = {
  by: MessagesBy
-  limit?: InputMaybe<Scalars['Int']>
-  offset?: InputMaybe<Scalars['Int']>
+  limit?: InputMaybe<Scalars['Int']['input']>
+  offset?: InputMaybe<Scalars['Int']['input']>
 }

 export type QuerySearchRecipientsArgs = {
-  limit?: InputMaybe<Scalars['Int']>
-  offset?: InputMaybe<Scalars['Int']>
-  query: Scalars['String']
+  limit?: InputMaybe<Scalars['Int']['input']>
+  offset?: InputMaybe<Scalars['Int']['input']>
+  query: Scalars['String']['input']
 }

 export type QuerySignInArgs = {
-  email: Scalars['String']
-  lang?: InputMaybe<Scalars['String']>
-  password?: InputMaybe<Scalars['String']>
+  email: Scalars['String']['input']
+  lang?: InputMaybe<Scalars['String']['input']>
+  password?: InputMaybe<Scalars['String']['input']>
 }

 export type QueryTopicsByAuthorArgs = {
-  author: Scalars['String']
+  author: Scalars['String']['input']
 }

 export type QueryTopicsByCommunityArgs = {
-  community: Scalars['String']
+  community: Scalars['String']['input']
 }

 export type QueryTopicsRandomArgs = {
-  amount?: InputMaybe<Scalars['Int']>
+  amount?: InputMaybe<Scalars['Int']['input']>
 }

 export type QueryUserFollowedAuthorsArgs = {
-  slug: Scalars['String']
+  slug: Scalars['String']['input']
 }

 export type QueryUserFollowedTopicsArgs = {
-  slug: Scalars['String']
+  slug: Scalars['String']['input']
 }

 export type QueryUserFollowersArgs = {
-  slug: Scalars['String']
+  slug: Scalars['String']['input']
 }

 export type Rating = {
-  rater: Scalars['String']
-  value: Scalars['Int']
+  rater: Scalars['String']['output']
+  value: Scalars['Int']['output']
 }

 export type Reaction = {
-  body?: Maybe<Scalars['String']>
-  createdAt: Scalars['DateTime']
+  body?: Maybe<Scalars['String']['output']>
+  createdAt: Scalars['DateTime']['output']
  createdBy: User
-  deletedAt?: Maybe<Scalars['DateTime']>
+  deletedAt?: Maybe<Scalars['DateTime']['output']>
  deletedBy?: Maybe<User>
-  id: Scalars['Int']
+  id: Scalars['Int']['output']
  kind: ReactionKind
-  old_id?: Maybe<Scalars['String']>
-  old_thread?: Maybe<Scalars['String']>
-  range?: Maybe<Scalars['String']>
-  replyTo?: Maybe<Scalars['Int']>
+  old_id?: Maybe<Scalars['String']['output']>
+  old_thread?: Maybe<Scalars['String']['output']>
+  range?: Maybe<Scalars['String']['output']>
+  replyTo?: Maybe<Scalars['Int']['output']>
  shout: Shout
  stat?: Maybe<Stat>
-  updatedAt?: Maybe<Scalars['DateTime']>
+  updatedAt?: Maybe<Scalars['DateTime']['output']>
 }

 export type ReactionBy = {
-  comment?: InputMaybe<Scalars['Boolean']>
-  createdBy?: InputMaybe<Scalars['String']>
-  days?: InputMaybe<Scalars['Int']>
-  search?: InputMaybe<Scalars['String']>
-  shout?: InputMaybe<Scalars['String']>
-  shouts?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
-  sort?: InputMaybe<Scalars['String']>
-  topic?: InputMaybe<Scalars['String']>
+  comment?: InputMaybe<Scalars['Boolean']['input']>
+  createdBy?: InputMaybe<Scalars['String']['input']>
+  days?: InputMaybe<Scalars['Int']['input']>
+  search?: InputMaybe<Scalars['String']['input']>
+  shout?: InputMaybe<Scalars['String']['input']>
+  shouts?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>
+  sort?: InputMaybe<Scalars['String']['input']>
+  topic?: InputMaybe<Scalars['String']['input']>
 }

 export type ReactionInput = {
-  body?: InputMaybe<Scalars['String']>
+  body?: InputMaybe<Scalars['String']['input']>
  kind: ReactionKind
-  range?: InputMaybe<Scalars['String']>
-  replyTo?: InputMaybe<Scalars['Int']>
-  shout: Scalars['Int']
+  range?: InputMaybe<Scalars['String']['input']>
+  replyTo?: InputMaybe<Scalars['Int']['input']>
+  shout: Scalars['Int']['input']
 }

 export enum ReactionKind {
@ -552,14 +556,14 @@ export enum ReactionStatus {
 }

 export type ReactionUpdating = {
-  error?: Maybe<Scalars['String']>
+  error?: Maybe<Scalars['String']['output']>
  reaction?: Maybe<Reaction>
  status?: Maybe<ReactionStatus>
 }

 export type Resource = {
-  id: Scalars['Int']
-  name: Scalars['String']
+  id: Scalars['Int']['output']
+  name: Scalars['String']['output']
 }

 export type Result = {
@ -569,7 +573,7 @@ export type Result = {
  chats?: Maybe<Array<Maybe<Chat>>>
  communities?: Maybe<Array<Maybe<Community>>>
  community?: Maybe<Community>
-  error?: Maybe<Scalars['String']>
+  error?: Maybe<Scalars['String']['output']>
  members?: Maybe<Array<Maybe<ChatMember>>>
  message?: Maybe<Message>
  messages?: Maybe<Array<Maybe<Message>>>
@ -577,121 +581,121 @@ export type Result = {
  reactions?: Maybe<Array<Maybe<Reaction>>>
  shout?: Maybe<Shout>
  shouts?: Maybe<Array<Maybe<Shout>>>
-  slugs?: Maybe<Array<Maybe<Scalars['String']>>>
+  slugs?: Maybe<Array<Maybe<Scalars['String']['output']>>>
  topic?: Maybe<Topic>
  topics?: Maybe<Array<Maybe<Topic>>>
 }

 export type Role = {
-  community: Scalars['String']
-  desc?: Maybe<Scalars['String']>
-  id: Scalars['Int']
-  name: Scalars['String']
+  community: Scalars['String']['output']
+  desc?: Maybe<Scalars['String']['output']>
+  id: Scalars['Int']['output']
+  name: Scalars['String']['output']
  permissions: Array<Permission>
 }

 export type Shout = {
  authors?: Maybe<Array<Maybe<Author>>>
-  body: Scalars['String']
-  community?: Maybe<Scalars['String']>
-  cover?: Maybe<Scalars['String']>
-  createdAt: Scalars['DateTime']
-  deletedAt?: Maybe<Scalars['DateTime']>
+  body: Scalars['String']['output']
+  community?: Maybe<Scalars['String']['output']>
+  cover?: Maybe<Scalars['String']['output']>
+  createdAt: Scalars['DateTime']['output']
+  deletedAt?: Maybe<Scalars['DateTime']['output']>
  deletedBy?: Maybe<User>
-  description?: Maybe<Scalars['String']>
-  id: Scalars['Int']
-  lang?: Maybe<Scalars['String']>
-  layout?: Maybe<Scalars['String']>
-  lead?: Maybe<Scalars['String']>
-  mainTopic?: Maybe<Scalars['String']>
-  media?: Maybe<Scalars['String']>
-  publishedAt?: Maybe<Scalars['DateTime']>
-  slug: Scalars['String']
+  description?: Maybe<Scalars['String']['output']>
+  id: Scalars['Int']['output']
+  lang?: Maybe<Scalars['String']['output']>
+  layout?: Maybe<Scalars['String']['output']>
+  lead?: Maybe<Scalars['String']['output']>
+  mainTopic?: Maybe<Scalars['String']['output']>
+  media?: Maybe<Scalars['String']['output']>
+  publishedAt?: Maybe<Scalars['DateTime']['output']>
+  slug: Scalars['String']['output']
  stat?: Maybe<Stat>
-  subtitle?: Maybe<Scalars['String']>
-  title?: Maybe<Scalars['String']>
+  subtitle?: Maybe<Scalars['String']['output']>
+  title?: Maybe<Scalars['String']['output']>
  topics?: Maybe<Array<Maybe<Topic>>>
-  updatedAt?: Maybe<Scalars['DateTime']>
+  updatedAt?: Maybe<Scalars['DateTime']['output']>
  updatedBy?: Maybe<User>
-  versionOf?: Maybe<Scalars['String']>
-  visibility?: Maybe<Scalars['String']>
+  versionOf?: Maybe<Scalars['String']['output']>
+  visibility?: Maybe<Scalars['String']['output']>
 }

 export type ShoutInput = {
-  authors?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
-  body?: InputMaybe<Scalars['String']>
-  community?: InputMaybe<Scalars['Int']>
-  cover?: InputMaybe<Scalars['String']>
-  description?: InputMaybe<Scalars['String']>
-  layout?: InputMaybe<Scalars['String']>
-  lead?: InputMaybe<Scalars['String']>
+  authors?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>
+  body?: InputMaybe<Scalars['String']['input']>
+  community?: InputMaybe<Scalars['Int']['input']>
+  cover?: InputMaybe<Scalars['String']['input']>
+  description?: InputMaybe<Scalars['String']['input']>
+  layout?: InputMaybe<Scalars['String']['input']>
+  lead?: InputMaybe<Scalars['String']['input']>
  mainTopic?: InputMaybe<TopicInput>
-  media?: InputMaybe<Scalars['String']>
-  slug?: InputMaybe<Scalars['String']>
-  subtitle?: InputMaybe<Scalars['String']>
-  title?: InputMaybe<Scalars['String']>
+  media?: InputMaybe<Scalars['String']['input']>
+  slug?: InputMaybe<Scalars['String']['input']>
+  subtitle?: InputMaybe<Scalars['String']['input']>
+  title?: InputMaybe<Scalars['String']['input']>
  topics?: InputMaybe<Array<InputMaybe<TopicInput>>>
 }

 export type Stat = {
-  commented?: Maybe<Scalars['Int']>
-  ranking?: Maybe<Scalars['Int']>
-  rating?: Maybe<Scalars['Int']>
-  reacted?: Maybe<Scalars['Int']>
-  viewed?: Maybe<Scalars['Int']>
+  commented?: Maybe<Scalars['Int']['output']>
+  ranking?: Maybe<Scalars['Int']['output']>
+  rating?: Maybe<Scalars['Int']['output']>
+  reacted?: Maybe<Scalars['Int']['output']>
+  viewed?: Maybe<Scalars['Int']['output']>
 }

 export type Token = {
-  createdAt: Scalars['DateTime']
-  expiresAt?: Maybe<Scalars['DateTime']>
-  id: Scalars['Int']
-  ownerId: Scalars['Int']
-  usedAt?: Maybe<Scalars['DateTime']>
-  value: Scalars['String']
+  createdAt: Scalars['DateTime']['output']
+  expiresAt?: Maybe<Scalars['DateTime']['output']>
+  id: Scalars['Int']['output']
+  ownerId: Scalars['Int']['output']
+  usedAt?: Maybe<Scalars['DateTime']['output']>
+  value: Scalars['String']['output']
 }

 export type Topic = {
-  body?: Maybe<Scalars['String']>
-  id: Scalars['Int']
-  oid?: Maybe<Scalars['String']>
-  pic?: Maybe<Scalars['String']>
-  slug: Scalars['String']
+  body?: Maybe<Scalars['String']['output']>
+  id: Scalars['Int']['output']
+  oid?: Maybe<Scalars['String']['output']>
+  pic?: Maybe<Scalars['String']['output']>
+  slug: Scalars['String']['output']
  stat?: Maybe<TopicStat>
-  title?: Maybe<Scalars['String']>
+  title?: Maybe<Scalars['String']['output']>
 }

 export type TopicInput = {
-  body?: InputMaybe<Scalars['String']>
-  id?: InputMaybe<Scalars['Int']>
-  pic?: InputMaybe<Scalars['String']>
-  slug: Scalars['String']
-  title?: InputMaybe<Scalars['String']>
+  body?: InputMaybe<Scalars['String']['input']>
+  id?: InputMaybe<Scalars['Int']['input']>
+  pic?: InputMaybe<Scalars['String']['input']>
+  slug: Scalars['String']['input']
+  title?: InputMaybe<Scalars['String']['input']>
 }

 export type TopicStat = {
-  authors: Scalars['Int']
-  followers: Scalars['Int']
-  shouts: Scalars['Int']
+  authors: Scalars['Int']['output']
+  followers: Scalars['Int']['output']
+  shouts: Scalars['Int']['output']
 }

 export type User = {
-  about?: Maybe<Scalars['String']>
-  bio?: Maybe<Scalars['String']>
-  communities?: Maybe<Array<Maybe<Scalars['Int']>>>
-  createdAt: Scalars['DateTime']
-  email?: Maybe<Scalars['String']>
-  emailConfirmed?: Maybe<Scalars['Boolean']>
-  id: Scalars['Int']
-  lastSeen?: Maybe<Scalars['DateTime']>
-  links?: Maybe<Array<Maybe<Scalars['String']>>>
-  muted?: Maybe<Scalars['Boolean']>
-  name?: Maybe<Scalars['String']>
-  oauth?: Maybe<Scalars['String']>
-  oid?: Maybe<Scalars['String']>
-  password?: Maybe<Scalars['String']>
+  about?: Maybe<Scalars['String']['output']>
+  bio?: Maybe<Scalars['String']['output']>
+  communities?: Maybe<Array<Maybe<Scalars['Int']['output']>>>
+  createdAt: Scalars['DateTime']['output']
+  email?: Maybe<Scalars['String']['output']>
+  emailConfirmed?: Maybe<Scalars['Boolean']['output']>
+  id: Scalars['Int']['output']
+  lastSeen?: Maybe<Scalars['DateTime']['output']>
+  links?: Maybe<Array<Maybe<Scalars['String']['output']>>>
+  muted?: Maybe<Scalars['Boolean']['output']>
+  name?: Maybe<Scalars['String']['output']>
+  oauth?: Maybe<Scalars['String']['output']>
+  oid?: Maybe<Scalars['String']['output']>
+  password?: Maybe<Scalars['String']['output']>
  ratings?: Maybe<Array<Maybe<Rating>>>
-  slug: Scalars['String']
-  updatedAt?: Maybe<Scalars['DateTime']>
-  username: Scalars['String']
-  userpic?: Maybe<Scalars['String']>
+  slug: Scalars['String']['output']
+  updatedAt?: Maybe<Scalars['DateTime']['output']>
+  username: Scalars['String']['output']
+  userpic?: Maybe<Scalars['String']['output']>
 }
--- a/src/pages/article.page.server.ts
+++ b/src/pages/article.page.server.ts
@ -1,14 +1,14 @@
 import type { PageContext } from '../renderer/types'
 import type { PageProps } from './types'
 import { apiClient } from '../utils/apiClient'
-import { RenderErrorPage } from 'vite-plugin-ssr/RenderErrorPage'
+import { render } from 'vike/abort'

 export const onBeforeRender = async (pageContext: PageContext) => {
  const { slug } = pageContext.routeParams
  const article = await apiClient.getShoutBySlug(slug)

  if (!article) {
-    throw RenderErrorPage({ pageContext: {} })
+    throw render(404, '/404')
  }

  const pageProps: PageProps = { article }
--- a/src/pages/article.page.tsx
+++ b/src/pages/article.page.tsx
@ -3,11 +3,12 @@ import type { Shout } from '../graphql/types.gen'
 import { PageLayout } from '../components/_shared/PageLayout'
 import type { PageProps } from './types'
 import { loadShout, useArticlesStore } from '../stores/zine/articles'
-import { useRouter } from '../stores/router'
+import { router, useRouter } from '../stores/router'
 import { Loading } from '../components/_shared/Loading'
 import { ReactionsProvider } from '../context/reactions'
 import { FullArticle } from '../components/Article/FullArticle'
 import { setPageLoadManagerPromise } from '../utils/pageLoadManager'
+import { redirectPage } from '@nanostores/router'

 export const ArticlePage = (props: PageProps) => {
  const shouts = props.article ? [props.article] : []
@ -28,6 +29,10 @@ export const ArticlePage = (props: PageProps) => {
      const loadShoutPromise = loadShout(slug())
      setPageLoadManagerPromise(loadShoutPromise)
      await loadShoutPromise
+
+      if (!article()) {
+        redirectPage(router, 'fourOuFour')
+      }
    }
  })

--- a/src/pages/feed.page.tsx
+++ b/src/pages/feed.page.tsx
@ -7,22 +7,22 @@ import { useRouter } from '../stores/router'
 import { AuthGuard } from '../components/AuthGuard'
 import { LoadShoutsOptions } from '../graphql/types.gen'

+const handleFeedLoadShouts = (options: LoadShoutsOptions) => {
+  return loadShouts({
+    ...options,
+    filters: { visibility: 'community' }
+  })
+}
+
+const handleMyFeedLoadShouts = (options: LoadShoutsOptions) => {
+  return loadMyFeed(options)
+}
+
 export const FeedPage = () => {
  onCleanup(() => resetSortedArticles())

  const { page } = useRouter()

-  const handleFeedLoadShouts = (options: LoadShoutsOptions) => {
-    return loadShouts({
-      ...options,
-      filters: { visibility: 'community' }
-    })
-  }
-
-  const handleMyFeedLoadShouts = (options: LoadShoutsOptions) => {
-    return loadMyFeed(options)
-  }
-
  createEffect(
    on(
      () => page().route,
--- a/src/renderer/_default.page.client.tsx
+++ b/src/renderer/_default.page.client.tsx
@ -1,9 +1,9 @@
 import { App } from '../components/App'
 import { hydrate } from 'solid-js/web'
-import type { PageContextBuiltInClientWithClientRouting } from 'vite-plugin-ssr/types'
+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,14 +30,17 @@ export const render = async (pageContext: PageContextBuiltInClientWithClientRout
    })
  }

-  useI18next(HttpApi)
-  await i18next.use(ICU).init({
-    // debug: true,
-    supportedLngs: ['ru', 'en'],
-    fallbackLng: lng,
-    lng,
-    load: 'languageOnly'
-  })
+  // eslint-disable-next-line import/no-named-as-default-member
+  await i18next
+    .use(HttpApi)
+    .use(ICU)
+    .init({
+      // debug: true,
+      supportedLngs: ['ru', 'en'],
+      fallbackLng: lng,
+      lng,
+      load: 'languageOnly'
+    })

  const isIOSorMacOSorAndroid = /iphone|ipad|ipod|macintosh|android/i.test(navigator.userAgent)

--- a/src/renderer/_default.page.server.tsx
+++ b/src/renderer/_default.page.server.tsx
@ -1,9 +1,9 @@
-import { generateHydrationScript, renderToString } from 'solid-js/web'
-import { escapeInject, dangerouslySkipEscape } from 'vite-plugin-ssr/server'
+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>
--- a/src/renderer/_error.page.ts
+++ b/src/renderer/_error.page.ts
@ -1,4 +1,4 @@
-// this file is required by vite-plugin-ssr to show something after an error occurred
+// this file is required by vike to show something after an error occurred
 // it's empty because error handling logic lives in _default.page.server.tsx and _default.page.client.tsx

 // eslint-disable-next-line unicorn/no-empty-file
--- a/src/renderer/types.ts
+++ b/src/renderer/types.ts
@ -1,8 +1,8 @@
-import type { PageContextBuiltIn } from 'vite-plugin-ssr/types'
 import type { PageProps } from '../pages/types'
 import type { Component } from 'solid-js'
+import { PageContextBuiltInClientWithClientRouting } from 'vike/dist/esm/types'

-export type PageContext = PageContextBuiltIn & {
+export type PageContext = PageContextBuiltInClientWithClientRouting & {
  Page: (pageProps: PageProps) => Component
  pageProps: PageProps
  lng: string
--- a/src/stores/zine/articles.ts
+++ b/src/stores/zine/articles.ts
@ -119,6 +119,9 @@ const addSortedArticles = (articles: Shout[]) => {

 export const loadShout = async (slug: string): Promise<void> => {
  const newArticle = await apiClient.getShoutBySlug(slug)
+  if (!newArticle) {
+    return
+  }
  addArticles([newArticle])
  const newArticleIndex = sortedArticles().findIndex((s) => s.id === newArticle.id)
  if (newArticleIndex >= 0) {
--- a/src/styles/app.scss
+++ b/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;
-  justify-content: space-between;
+  place-content: space-between 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;
 }
--- a/src/utils/apiClient.ts
+++ b/src/utils/apiClient.ts
@ -310,9 +310,9 @@ export const apiClient = {
      })
      .toPromise()

-    if (resp.error) {
-      console.error(resp)
-    }
+    // if (resp.error) {
+    //   console.error(resp)
+    // }

    return resp.data.loadShout
  },
--- a/src/utils/getServerRoute.ts
+++ b/src/utils/getServerRoute.ts
@ -1,4 +1,4 @@
 // /:slug -> /@slug
-// https://vite-plugin-ssr.com/routing
+// https://vike.dev/routing
 // https://www.npmjs.com/package/@nanostores/router
 export const getServerRoute = (clientRoute: string) => clientRoute.replaceAll(':', '@')
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,6 +1,6 @@
 import { defineConfig } from 'vite'
 import solidPlugin from 'vite-plugin-solid'
-import ssrPlugin from 'vite-plugin-ssr/plugin'
+import ssrPlugin from 'vike/plugin'
 import sassDts from 'vite-plugin-sass-dts'
 import mkcert from 'vite-plugin-mkcert'