feat: add Base layout with Inter font

2026-05-12 16:27:03 +08:00
parent c06d6bc3c3
commit 213d6c49bc
2 changed files with 28 additions and 14 deletions
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -0,0 +1,24 @@
+---
+import '../styles/global.css'
+
+export interface Props {
+  title?: string
+}
+const { title = 'Talk Pro — One User. Multiple Worlds.' } = Astro.props
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Talk Pro is a modern messaging app for private chats, group conversations, channels, voice and video calls." />
+    <title>{title}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />
+  </head>
+  <body class="bg-surface font-sans overflow-x-hidden">
+    <slot />
+  </body>
+</html>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,17 +1,7 @@
 ---
-import '../styles/global.css';
+import Base from '../layouts/Base.astro'
 ---

-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
-    <title>Talk Pro</title>
-  </head>
-  <body class="bg-white text-gray-900">
-    <h1 class="text-4xl font-bold p-8">Talk Pro</h1>
-  </body>
-</html>
+<Base>
+  <p class="text-text-primary text-4xl font-bold p-8">Talk Pro — scaffold works</p>
+</Base>