feat: root layout with fonts, Navbar, Footer

2026-05-28 22:28:08 +07:00
parent ab7bbd3805
commit 6ba2c8b932
3 changed files with 43 additions and 28 deletions
@@ -1,35 +1,41 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import { Noto_Sans_JP } from 'next/font/google'
+import './globals.css'
+import Navbar from '@/components/layout/Navbar'
+import Footer from '@/components/layout/Footer'
+import SearchOverlay from '@/components/search/SearchOverlay'

-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
+})
+
+const notoSansJP = Noto_Sans_JP({
+  subsets: ['latin'],
+  variable: '--font-noto-sans-jp',
+  display: 'swap',
+  weight: ['400', '500', '600', '700'],
+})

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: {
+    template: '%s — Kotobane',
+    default: 'Kotobane — Japanese Pop-Culture News',
+  },
+  description: 'VTubers, Anime, Manga, Games, Music, and Japanese culture news.',
+}

-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang="en" className={`${inter.variable} ${notoSansJP.variable}`}>
+      <body>
+        <Navbar />
+        <main>{children}</main>
+        <Footer />
+        <SearchOverlay />
      </body>
    </html>
-  );
+  )
 }
@@ -2,6 +2,11 @@ import { getAllCategories } from '@/lib/directus'
 import NavbarClient from './NavbarClient'

 export default async function Navbar() {
-  const categories = await getAllCategories()
+  let categories: { id: string; name: string; slug: string; description: string | null }[] = []
+  try {
+    categories = await getAllCategories()
+  } catch {
+    // Directus not yet available — renders empty nav
+  }
  return <NavbarClient categories={categories} />
 }
@@ -0,0 +1,4 @@
+'use client'
+export default function SearchOverlay() {
+  return null
+}