page-titles

package.json

@@ -9,6 +9,7 @@
     "build": "vinxi build",
     "start": "vinxi start",
     "codegen": "graphql-codegen",
+    "e2e": "npm run e2e:tests",
     "e2e:tests": "npx playwright test --project=webkit",
     "e2e:tests:ci": "CI=true npx playwright test --project=webkit",
     "e2e:install": "npx playwright install webkit && npx playwright install-deps ",

src/components/Views/AllAuthors/AllAuthors.tsx

@@ -56,7 +56,7 @@ export const AllAuthors = (props: Props) => {
   })
 
   const sortedKeys = createMemo<string[]>(() => {
-    const keys = Object.keys(byLetterFiltered())
+    const keys = Object.keys(byLetterFiltered()||{})
     keys.sort()
     const fk = keys.shift() || ''
     fk && keys.push(fk)
@@ -69,16 +69,16 @@ export const AllAuthors = (props: Props) => {
 
   return (
     <div class={clsx(styles.allAuthorsPage, 'wide-container')}>
-      <Meta name="descprition" content={description()} />
+      <Meta name="descprition" content={description() || ''} />
       <Meta name="keywords" content={lang() === 'ru' ? ruKeywords[''] : enKeywords['']} />
       <Meta name="og:type" content="article" />
-      <Meta name="og:title" content={ogTitle()} />
+      <Meta name="og:title" content={ogTitle() || ''} />
-      <Meta name="og:image" content={ogImage()} />
+      <Meta name="og:image" content={ogImage() || ''} />
-      <Meta name="twitter:image" content={ogImage()} />
+      <Meta name="twitter:image" content={ogImage() || ''} />
-      <Meta name="og:description" content={description()} />
+      <Meta name="og:description" content={description() || ''} />
       <Meta name="twitter:card" content="summary_large_image" />
-      <Meta name="twitter:title" content={ogTitle()} />
+      <Meta name="twitter:title" content={ogTitle() || ''} />
-      <Meta name="twitter:description" content={description()} />
+      <Meta name="twitter:description" content={description() || ''} />
       <Show when={props.isLoaded} fallback={<Loading />}>
         <div class="offset-md-5">
           <div class="row">

src/context/localize.tsx

@@ -83,7 +83,13 @@ export const LocalizeProvider = (props: { children: JSX.Element }) => {
   const formatTimeAgo = (date: Date) => timeAgo().format(date)
 
   const value: LocalizeContextType = {
-    t: i18next.t,
+    t: ((s: string) => {
+      try {
+        return i18next.t(s)
+      } catch(_) {
+        return s
+      }
+    }) as i18n['t'],
     lang,
     setLang,
     formatTime,

src/routes/[...slug].tsx

@@ -1,4 +1,4 @@
-import { RouteSectionProps, createAsync, useParams } from '@solidjs/router'
+import { RouteSectionProps, createAsync, useLocation, useParams } from '@solidjs/router'
 import { ErrorBoundary, Suspense, createMemo, createReaction, createSignal, onMount } from 'solid-js'
 import { FourOuFourView } from '~/components/Views/FourOuFour'
 import { Loading } from '~/components/_shared/Loading'
@@ -22,11 +22,12 @@ export const route = {
 
 export const ArticlePage = (props: RouteSectionProps<{ article: Shout }>) => {
   const params = useParams()
+  const loc = useLocation()
   const article = createAsync(async () => props.data.article || (await fetchShout(params.slug)))
   const { t } = useLocalize()
   const [scrollToComments, setScrollToComments] = createSignal<boolean>(false)
   const title = createMemo(
-    () => `${article()?.authors?.[0]?.name || t('Discours')}: ${article()?.title || ''}`
+    () => `${article()?.authors?.[0]?.name || t('Discours')} :: ${article()?.title || ''}`
   )
   onMount(async () => {
     if (gaIdentity) {
@@ -49,7 +50,7 @@ export const ArticlePage = (props: RouteSectionProps<{ article: Shout }>) => {
       window.gtag?.('event', 'page_view', {
         page_title: article()?.title,
         page_location: window.location.href,
-        page_path: window.location.pathname
+        page_path: loc.pathname
       })
     }
   })

src/routes/author/(all).tsx

@@ -46,13 +46,13 @@ export const route = {
   }
 } satisfies RouteDefinition
 
-export default function AllTopicsPage(props: RouteSectionProps<{ authors: Author[] }>) {
+export default function AllAuthorsPage(props: RouteSectionProps<{ authors: Author[] }>) {
   const { t } = useLocalize()
   const authors = createAsync<Author[]>(async () => props.data.authors || (await fetchData()) || [])
   const { addAuthors } = useAuthors()
   createEffect(() => addAuthors(authors() || []))
   return (
-    <PageLayout withPadding={true} title={`${t('Discours')}:${t('All topics')}`}>
+    <PageLayout withPadding={true} title={`${t('Discours')} :: ${t('All authors')}`}>
       <ReactionsProvider>
         <Suspense fallback={<Loading />}>
           <AllAuthors authors={authors() || []} isLoaded={Boolean(authors())} />

src/routes/author/[slug]/[...tab].tsx

@@ -33,7 +33,7 @@ export const TopicPage = (props: RouteSectionProps<{ articles: Shout[] }>) => {
   const { authorsEntities } = useAuthors()
   const { t } = useLocalize()
   const author = createMemo(() => authorsEntities?.()[params.slug])
-  const title = createMemo(() => `${t('Discours')}: ${author()?.name || ''}`)
+  const title = createMemo(() => `${author()?.name || ''}`)
 
   // docs: `a side effect that is run the first time the expression
   // wrapped by the returned tracking function is notified of a change`
@@ -51,7 +51,7 @@ export const TopicPage = (props: RouteSectionProps<{ articles: Shout[] }>) => {
     <ErrorBoundary fallback={(_err) => <FourOuFourView />}>
       <Suspense fallback={<Loading />}>
         <PageLayout
-          title={title()}
+          title={`${t('Discours')} :: ${title()}`}
           headerTitle={author()?.name || ''}
           slug={author()?.slug}
           articleBody={author()?.about || author()?.bio || ''}

src/routes/edit/(drafts).tsx

@@ -20,7 +20,7 @@ export const DraftsPage = () => {
   const drafts = createAsync(async () => await fetchDrafts(client))
 
   return (
-    <PageLayout title={t('Drafts')}>
+    <PageLayout title={`${t('Discours')} :: ${t('Drafts')}`}>
       <AuthGuard>
         <DraftsView drafts={drafts() || []} />
       </AuthGuard>

src/routes/edit/[id]/(draft).tsx

@@ -64,7 +64,7 @@ export const EditPage = () => {
   })
 
   return (
-    <PageLayout title={title()}>
+    <PageLayout title={`${t('Discours')} :: ${title()}`}>
       <AuthGuard>
         <EditView shout={shout() as Shout} />
       </AuthGuard>

src/routes/edit/[id]/settings.tsx

@@ -25,7 +25,8 @@ export const EditSettingsPage = () => {
     }
   }
   return (
-    <PageLayout title={t('Publication settings')}>
+
+    <PageLayout title={`${t('Discours')} :: ${t('Publication settings')}`}>
       <AuthGuard>
         <EditSettingsView shout={shout() as Shout} />
       </AuthGuard>

src/routes/edit/new.tsx

@@ -32,7 +32,7 @@ export default () => {
     }
   }
   return (
-    <PageLayout title={ogTitle()}>
+    <PageLayout title={`${t('Discours')} :: ${ogTitle()}`}>
       <Meta name="descprition" content={description()} />
       <Meta name="keywords" content={lang() === 'ru' ? ruKeywords[''] : enKeywords['']} />
       <Meta name="og:type" content="article" />

src/routes/expo/[...layout].tsx

@@ -60,7 +60,7 @@ export const ExpoPage = (props: RouteSectionProps<Shout[]>) => {
   createEffect(on(title, (ttl) => (document.title = ttl), { defer: true }))
 
   return (
-    <PageLayout withPadding={true} zeroBottomPadding={true} title={title()}>
+    <PageLayout withPadding={true} zeroBottomPadding={true} title={`${t('Discours')} :: ${title()}`}>
       <Topics />
       <Expo shouts={shouts() || []} layout={layout() as LayoutType} />
     </PageLayout>

src/routes/feed/[...feed].tsx

@@ -125,7 +125,7 @@ export const FeedPage = (props: RouteSectionProps<Shout[]>) => {
   }
   createEffect(() => setIsLoadMoreButtonVisible(offset() < (shouts()?.length || 0)))
   return (
-    <PageLayout title={t('Feed')}>
+    <PageLayout withPadding={true} title={`${t('Discours')} :: ${t('Feed')}`}>
       <ReactionsProvider>
         <Feed shouts={shouts() || []} />
       </ReactionsProvider>

src/routes/profile/(settings).tsx

@@ -8,7 +8,7 @@ export const ProfileSettingsPage = () => {
   const { t } = useLocalize()
 
   return (
-    <PageLayout title={t('Profile')}>
+    <PageLayout withPadding={true} title={`${t('Discours')} :: ${t('Profile')}`}>
       <AuthGuard>
         <ProfileProvider>
           <ProfileSettings />

src/routes/profile/security.tsx

@@ -135,7 +135,7 @@ export const ProfileSecurityPage = () => {
   }
 
   return (
-    <PageLayout title={t('Profile')}>
+    <PageLayout withPadding={true} title={`${t('Discours')} :: ${t('Security')}`}>
       <AuthGuard>
         <Show when={isSessionLoaded()} fallback={<Loading />}>
           <div class="wide-container">

src/routes/profile/subs.tsx

@@ -7,7 +7,7 @@ export const ProfileSubscriptionsPage = () => {
   const { t } = useLocalize()
 
   return (
-    <PageLayout title={t('Profile')}>
+    <PageLayout withPadding={true} title={`${t('Discours')} :: ${t('Subscriptions')}`}>
       <AuthGuard>
         <ProfileSubscriptions />
       </AuthGuard>

src/routes/search/(search).tsx

@@ -48,7 +48,7 @@ export const SearchPage = () => {
   })
 
   return (
-    <PageLayout title={t('Search')}>
+    <PageLayout withPadding={true} title={`${t('Discours')} :: ${t('Search')}`}>
       <ReactionsProvider>
         <Suspense fallback={<Loading />}>
           <Show when={isLoaded()} fallback={<Loading />}>

src/routes/topic/(all).tsx

@@ -22,7 +22,7 @@ export default function AllTopicsPage(props: RouteSectionProps<{ topics: Topic[]
   const { addTopics } = useTopics()
   createEffect(() => addTopics(topics() || []))
   return (
-    <PageLayout withPadding={true} title={`${t('Discours')}:${t('All topics')}`}>
+    <PageLayout withPadding={true} title={`${t('Discours')} :: ${t('All topics')}`}>
       <ReactionsProvider>
         <Suspense fallback={<Loading />}>
           <AllTopics topics={topics() as Topic[]} />

src/routes/topic/[...slug].tsx

@@ -33,7 +33,7 @@ export const TopicPage = (props: RouteSectionProps<{ articles: Shout[] }>) => {
   const { topicEntities } = useTopics()
   const { t } = useLocalize()
   const topic = createMemo(() => topicEntities?.()[params.slug])
-  const title = createMemo(() => `${t('Discours')}: ${topic()?.title || ''}`)
+  const title = createMemo(() => `${t('Discours')} :: ${topic()?.title || ''}`)
 
   // docs: `a side effect that is run the first time the expression
   // wrapped by the returned tracking function is notified of a change`

tests/page-sections.spec.ts

@@ -69,7 +69,7 @@ test.describe('Pages open', () => {
   Object.keys(pagesTitles).forEach((res: string) => {
     test(`Open Page ${res}`, async ({ page }) => {
       await page.goto(`${res}`)
-      const title = pagesTitles[res as keyof typeof pagesTitles] || ''
+      const title = pagesTitles[res as keyof typeof pagesTitles] || '00000000000'
       await expect(page).toHaveTitle(title)
     })
   })