wait for hydration before url manipulation, minor fixes (#134)

src/components/Views/Author/Author.tsx

@@ -218,7 +218,7 @@ export const AuthorView = (props: AuthorProps) => {
       <Switch>
         <Match when={searchParams().by === 'about'}>
           <div class="wide-container">
-            <p>{author.bio}</p>
+            <p>{author.about}</p>
           </div>
         </Match>
         <Match when={searchParams().by === 'commented'}>

src/components/Views/Feed.module.scss

@@ -112,7 +112,7 @@
     border: none;
 
     &::before {
-      background: url(/public/icons/knowledge-base-bullet.svg) no-repeat;
+      background: url(/icons/knowledge-base-bullet.svg) no-repeat;
       content: '';
       height: 2.4rem;
       left: 0;
@@ -123,7 +123,7 @@
 
     &:hover {
       &:before {
-        background-image: url(/public/icons/knowledge-base-bullet-hover.svg);
+        background-image: url(/icons/knowledge-base-bullet-hover.svg);
       }
     }
   }

src/components/Views/Feed.tsx

@@ -123,7 +123,7 @@ export const FeedView = () => {
                     searchParams().by === 'publish_date' || !searchParams().by
                 })}
               >
-                <a href={getPagePath(router, page().route)}>{t('My feed')}</a>
+                <a href={getPagePath(router, page().route)}>{t('Recent')}</a>
               </li>
               {/*<li>*/}
               {/*  <a href="/feed/?by=views">{t('Most read')}</a>*/}

src/renderer/_default.page.client.tsx

@@ -7,6 +7,7 @@ import { use as useI18next, init as initI18next } from 'i18next'
 import HttpApi from 'i18next-http-backend'
 import * as Sentry from '@sentry/browser'
 import { SENTRY_DSN } from '../utils/config'
+import { resolveHydrationPromise } from '../utils/hydrationPromise'
 
 let layoutReady = false
 
@@ -49,3 +50,7 @@ export const render = async (pageContext: PageContextBuiltInClientWithClientRout
     layoutReady = true
   }
 }
+
+export const onHydrationEnd = () => {
+  resolveHydrationPromise()
+}

src/stores/router.ts

@@ -2,6 +2,7 @@ import type { Accessor } from 'solid-js'
 import { createRouter, createSearchParams } from '@nanostores/router'
 import { isServer } from 'solid-js/web'
 import { useStore } from '@nanostores/solid'
+import { hydrationPromise } from '../utils/hydrationPromise'
 
 export const ROUTES = {
   home: '/',
@@ -95,6 +96,8 @@ const handleClientRouteLinkClick = async (event) => {
 
   event.preventDefault()
 
+  await hydrationPromise
+
   if (url.pathname) {
     routerStore.open(url.pathname)
   }

src/utils/hydrationPromise.ts

@@ -0,0 +1,5 @@
+export let resolveHydrationPromise
+
+export const hydrationPromise = new Promise((resolve) => {
+  resolveHydrationPromise = resolve
+})