discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

404 page made right (#323)

Browse Source
This commit is contained in:
Igor Lobanov 2023-11-18 16:20:15 +01:00 committed by GitHub
parent 8cad60bdda
commit ef784e288a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/App.tsx
View File

@ -84,8 +84,11 @@ const pagesMap: Record<keyof typeof ROUTES, Component<PageProps>> = {
fourOuFour: FourOuFourPage, fourOuFour: FourOuFourPage,
} }
export const App = (props: PageProps) => { type Props = PageProps & { is404: boolean }
export const App = (props: Props) => {
const { page, searchParams } = useRouter<RootSearchParams>() const { page, searchParams } = useRouter<RootSearchParams>()
let is404 = props.is404
createEffect(() => { createEffect(() => {
if (!searchParams().modal) { if (!searchParams().modal) {
@ -101,7 +104,8 @@ export const App = (props: PageProps) => {
const pageComponent = createMemo(() => { const pageComponent = createMemo(() => {
const result = pagesMap[page()?.route || 'home'] const result = pagesMap[page()?.route || 'home']
if (!result || page()?.path === '/404') { if (is404 || !result || page()?.path === '/404') {
is404 = false
return FourOuFourPage return FourOuFourPage
} }

2
src/pages/article.page.server.ts
View File

@ -10,7 +10,7 @@ export const onBeforeRender = async (pageContext: PageContext) => {
const article = await apiClient.getShoutBySlug(slug) const article = await apiClient.getShoutBySlug(slug)
if (!article) { if (!article) {
throw render(404, '/404') throw render(404)
} }
const pageProps: PageProps = { article, seo: { title: article.title } } const pageProps: PageProps = { article, seo: { title: article.title } }

9
src/pages/author.page.server.ts
View File

@ -1,17 +1,24 @@
import type { PageProps } from './types' import type { PageProps } from './types'
import type { PageContext } from '../renderer/types' import type { PageContext } from '../renderer/types'
import { render } from 'vike/abort'
import { PRERENDERED_ARTICLES_COUNT } from '../components/Views/Author' import { PRERENDERED_ARTICLES_COUNT } from '../components/Views/Author'
import { apiClient } from '../utils/apiClient' import { apiClient } from '../utils/apiClient'
export const onBeforeRender = async (pageContext: PageContext) => { export const onBeforeRender = async (pageContext: PageContext) => {
const { slug } = pageContext.routeParams const { slug } = pageContext.routeParams
const author = await apiClient.getAuthor({ slug })
if (!author) {
throw render(404)
}
const authorShouts = await apiClient.getShouts({ const authorShouts = await apiClient.getShouts({
filters: { author: slug, visibility: 'community' }, filters: { author: slug, visibility: 'community' },
limit: PRERENDERED_ARTICLES_COUNT, limit: PRERENDERED_ARTICLES_COUNT,
}) })
const author = await apiClient.getAuthor({ slug })
const pageProps: PageProps = { author, authorShouts, seo: { title: author.name } } const pageProps: PageProps = { author, authorShouts, seo: { title: author.name } }

6
src/pages/topic.page.server.ts
View File

@ -1,6 +1,8 @@
import type { PageProps } from './types' import type { PageProps } from './types'
import type { PageContext } from '../renderer/types' import type { PageContext } from '../renderer/types'
import { render } from 'vike/abort'
import { apiClient } from '../utils/apiClient' import { apiClient } from '../utils/apiClient'
export const onBeforeRender = async (pageContext: PageContext) => { export const onBeforeRender = async (pageContext: PageContext) => {
@ -8,6 +10,10 @@ export const onBeforeRender = async (pageContext: PageContext) => {
const topic = await apiClient.getTopic({ slug }) const topic = await apiClient.getTopic({ slug })
if (!topic) {
throw render(404)
}
const pageProps: PageProps = { topic, seo: { title: topic.title } } const pageProps: PageProps = { topic, seo: { title: topic.title } }
return { return {

6
src/renderer/_default.page.client.tsx
View File

@ -17,13 +17,9 @@ let layoutReady = false
export const render = async (pageContext: PageContextBuiltInClientWithClientRouting & PageContext) => { export const render = async (pageContext: PageContextBuiltInClientWithClientRouting & PageContext) => {
const { lng, pageProps, is404 } = pageContext const { lng, pageProps, is404 } = pageContext
if (is404) {
initRouter('/404')
} else {
const { pathname, search } = window.location const { pathname, search } = window.location
const searchParams = Object.fromEntries(new URLSearchParams(search)) const searchParams = Object.fromEntries(new URLSearchParams(search))
initRouter(pathname, searchParams) initRouter(pathname, searchParams)
}
if (SENTRY_DSN) { if (SENTRY_DSN) {
Sentry.init({ Sentry.init({
@ -53,7 +49,7 @@ export const render = async (pageContext: PageContextBuiltInClientWithClientRout
const content = document.querySelector('#root') const content = document.querySelector('#root')
if (!layoutReady) { if (!layoutReady) {
hydrate(() => <App {...pageProps} />, content) hydrate(() => <App {...pageProps} is404={is404} />, content)
layoutReady = true layoutReady = true
} }
} }

6
src/renderer/_default.page.server.tsx
View File

@ -48,15 +48,11 @@ export const render = async (pageContext: PageContext) => {
await i18next.changeLanguage(lng) await i18next.changeLanguage(lng)
} }
if (pageContext.is404) {
initRouter('/404')
} else {
initRouter(pageContext.urlParsed.pathname, pageContext.urlParsed.search) initRouter(pageContext.urlParsed.pathname, pageContext.urlParsed.search)
}
pageContext.lng = lng pageContext.lng = lng
const rootContent = renderToString(() => <App {...pageContext.pageProps} />) const rootContent = renderToString(() => <App {...pageContext.pageProps} is404={pageContext.is404} />)
return escapeInject`<!DOCTYPE html> return escapeInject`<!DOCTYPE html>
<html lang="${lng}"> <html lang="${lng}">