Update import paths in layout files

master-co · Jan 30, 2024 · b9069ab · b9069ab
1 parent 111e8bc
commit b9069ab
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 31 deletions.
diff --git a/website/app/[locale]/(root)/layout.tsx b/website/app/[locale]/(root)/layout.tsx
@@ -1,5 +1,5 @@
 import { importTranslations } from '~/i18n'
-import RootLayout from '../root.layout'
+import RootLayout from '../../root.layout'
 import i18n from '~/i18n.config.mjs'
 
 export const metadata = {

diff --git a/website/app/[locale]/examples/layout.tsx b/website/app/[locale]/examples/layout.tsx
@@ -1,5 +1,5 @@
 import { importTranslations } from '~/i18n'
-import RootLayout from '../root.layout'
+import RootLayout from '../../root.layout'
 import i18n from '~/i18n.config.mjs'
 
 export const metadata = {

diff --git a/website/app/[locale]/play/layout.tsx b/website/app/[locale]/play/layout.tsx
@@ -1,4 +1,4 @@
-import RootLayout from '../root.layout'
+import RootLayout from '../../root.layout'
 import metadata from './metadata'
 import { generate } from '~/utils/metadata'
 import Script from 'next/script'

diff --git a/website/app/[locale]/client.tsx → website/app/client.tsx b/website/app/[locale]/client.tsx → website/app/client.tsx
diff --git a/website/app/[locale]/layout.tsx → website/app/layout.tsx b/website/app/[locale]/layout.tsx → website/app/layout.tsx
diff --git a/website/app/not-found.tsx b/website/app/not-found.tsx
@@ -0,0 +1,29 @@
+import { importTranslations } from '~/i18n'
+import RootLayout from './root.layout'
+import i18n from '~/i18n.config.mjs'
+import SearchButton from 'websites/components/SearchButton'
+import DocHeader from '~/components/DocHeader'
+import { createTranslation } from '~/i18n'
+import { headers } from 'next/headers'
+
+export default async function NotFound() {
+    const headersList = headers()
+    const domain = headersList.get('x-forwarded-proto') + '://' + headersList.get('host')
+    const referer = headersList.get('referer')
+    let locale = referer?.replace(domain, '')?.split('/')?.[1]
+    locale = i18n.locales.find((eachLocale) => eachLocale === locale) || 'en'
+    const $ = await createTranslation(locale)
+    return (
+        <RootLayout bodyClassName='bg:base' locale={locale} translations={await importTranslations(locale)}>
+            <DocHeader contained />
+            <div className="center-content flex flex:col min-h:100dvh pt:50 pt:60@md px:10x">
+                <h3 className='fg:accent font:18 ls:.01em mb:5x text:center'>404</h3>
+                <h1 className='fg:strong font:32 font:48@sm font:extrabold lh:1.2 ls:-.4 mt:0 text:center'>{$('This page does not exist')}</h1>
+                <div className='p:4x|2x'>
+                    <p className='text:18 fg:light'>{$('Sorry, the page cannot be found. Please try searching for other content.')}</p>
+                    <SearchButton className="rounded b:1|frame lh:3rem min-w:60x mt:10x mx:auto pointer-events:auto px:6x" />
+                </div>
+            </div>
+        </RootLayout>
+    )
+}
diff --git a/website/app/[locale]/root.layout.tsx → website/app/root.layout.tsx b/website/app/[locale]/root.layout.tsx → website/app/root.layout.tsx
@@ -1,24 +1,14 @@
 'use client'
 
-import '../globals.css'
+import './globals.css'
 import { getPreInitScript } from 'theme-service'
 import clsx from 'clsx'
 import { HTMLAttributes } from 'react'
-import { importTranslations } from '~/i18n'
-
-import { RedirectsProvider } from 'websites/contexts/redirects'
-import { LocaleProvider } from 'websites/contexts/locale'
-import { I18nProvider } from 'websites/contexts/i18n'
-import redirects from '~/redirects.mjs'
-import { Analytics } from '@vercel/analytics/react'
-import config from '~/master.css'
-import CSSRuntimeProvider from '@master/css.react/CSSRuntimeProvider'
-import ThemeServiceProvider from '@master/css.react/ThemeServiceProvider'
-import { SpeedInsights } from '@vercel/speed-insights/next'
 import i18n from '~/i18n.config.mjs'
+import Client from './client'
 
 export default function RootLayout({ children, locale, bodyClassName, style, translations }: {
-    children: JSX.Element,
+    children: JSX.Element[] | JSX.Element,
     locale: typeof i18n['locales'][number],
     style?: HTMLAttributes<any>['style'],
     bodyClassName?: string,
@@ -33,19 +23,9 @@ export default function RootLayout({ children, locale, bodyClassName, style, tra
                 {locale === 'tw' && <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=block" rel="stylesheet" />}
             </head>
             <body className={clsx(bodyClassName, '{font:mono;font-feature:normal}_:where(code,kbd,samp) bg:slate-50/.2_:where(::selection) fg:neutral font-feature:\'salt\' font:sans overflow-x:hidden')}>
-                <ThemeServiceProvider options={{ default: 'system' }}>
-                    <CSSRuntimeProvider config={config}>
-                        <RedirectsProvider value={redirects}>
-                            <I18nProvider value={{ ...i18n, translations }}>
-                                <LocaleProvider value={locale}>
-                                    {children}
-                                </LocaleProvider>
-                            </I18nProvider>
-                        </RedirectsProvider>
-                    </CSSRuntimeProvider>
-                </ThemeServiceProvider>
-                <Analytics />
-                <SpeedInsights />
+                <Client locale={locale} translations={translations}>
+                    {children}
+                </Client>
             </body>
         </html>
     )

diff --git a/website/components/DocSidebar.tsx b/website/components/DocSidebar.tsx
@@ -10,10 +10,10 @@ export default function DocSidebar() {
     const $ = useTranslation()
     return (
         // eslint-disable-next-line @master/css/class-validation
-        <aside id="sidebar" className="scrollbar fixed hide@print hide@<md invisible:not(:hover)::scrollbar invisible:not(:hover)::scrollbar-thumb bd:blur(25)@<md bg:transparent!::scrollbar bg:gray-10/.9@<md@dark bg:white/.8@<md direction:rtl h:calc(100%-6rem-1px) h:calc(100%-3.75rem)@md left:max(0px,calc(50%-45.3125rem)) overflow-y:overlay!@supports(overflow:overlay) overflow-y:auto overscroll-behavior:contain top:97 top:60@md w:full w:260@md w:300@xl z:1050@<md">
+        <aside id="sidebar" className="scrollbar fixed hide@print hide@<md invisible:not(:hover)::scrollbar-thumb invisible:not(:hover)::scrollbar bd:blur(25)@<md bg:transparent!::scrollbar bg:gray-10/.9@<md@dark bg:white/.8@<md direction:rtl h:calc(100%-6rem-1px) h:calc(100%-3.75rem)@md left:max(0px,calc(50%-45.3125rem)) overflow-y:auto overflow-y:overlay!@supports(overflow:overlay) overscroll-behavior:contain top:97 top:60@md w:full w:260@md w:300@xl z:1050@<md">
             <div className="direction:ltr p:0|15|20|15">
                 <div className="flex sticky@md untouchable align-items:center gradient(180deg,base|0%,base|calc(100%-2rem),transparent|100%)@md mb:-30 pb:30 pt:20 top:20 top:0@md z:1">
-                    <SearchButton className="pointer-events:auto" />
+                    <SearchButton className="font:14 lh:2.25rem pointer-events:auto px:4x text:left w:full" />
                 </div>
                 <div className="{flex;min-h:8x;px:4x;rel;align-items:center}_:where(h4,.app-nav) {pt:0;fg:strong;mt:6x;font:semibold;text:12}_:where(h4) {lines:1;break-word}_.app-nav_span {size:1x;abs;inset:0;my:auto;round}_svg bg:text-lightest_.app-nav:hover_svg bg:primary_.app-nav.active_svg contain:content:where(.app-nav,h4) fg:light_.app-nav pb:12x">
                     {pageCategories.map((eachPageCategory: any) => (

diff --git a/website/i18n/tw.json b/website/i18n/tw.json
@@ -5,6 +5,8 @@
     "ON THIS PAGE": "該頁目錄",
     "Changelog": "變更日誌",
     "Issue on this page": "關於此頁的問題",
+    "This page does not exist": "此頁面不存在",
+    "Sorry, the page cannot be found. Please try searching for other content.": "抱歉，找不到該頁面。請嘗試搜尋其他內容。",
     "Edited by": "編輯自",
     "Authored by": "撰寫自",
     "Migration": "遷移",