fix(pages): add the font and metadata

malkiii · Sep 2, 2024 · b7b7c8b · b7b7c8b
1 parent 6c81f88
commit b7b7c8b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.0",
+  "name": "quran-tiktok-bot",
   "private": false,
   "type": "module",
   "scripts": {

diff --git a/pages/index.md b/pages/index.md
@@ -1 +1,5 @@
+---
+title: Home
+---
+
 # Hey
diff --git a/scripts/build-pages.ts b/scripts/build-pages.ts
@@ -2,6 +2,7 @@ import path from 'path';
 import fs from 'fs-extra';
 import MarkdownIt from 'markdown-it';
 import matter from 'gray-matter';
+import pkg from '../package.json';
 
 async function main() {
   const pagesDir = path.join(import.meta.dirname, '../pages');
@@ -27,7 +28,10 @@ async function main() {
     const htmlContent = md.render(content);
 
     // Create the HTML page with the content
-    const page = createHtmlPage(data.title, htmlContent.trim());
+    const page = createHtmlPage(
+      data.title ? `${data.title} | ${config.title}` : config.title,
+      htmlContent.trim(),
+    );
 
     // Determine the new file name with .html extension
     const htmlFileName = path.basename(file, '.md') + '.html';
@@ -40,6 +44,11 @@ async function main() {
   console.log(`✅ Build completed! ${files.length} pages created.`);
 }
 
+const config = {
+  title: 'Quran TikTok Bot',
+  base: `/${pkg.name}`,
+} as const;
+
 const createHtmlPage = (title: string, content: string) => `\
 <!doctype html>
 <html>
@@ -48,11 +57,24 @@ const createHtmlPage = (title: string, content: string) => `\
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="robots" content="noindex, nofollow" />
     <title>${title}</title>
-    <link rel="icon" href="/logo.png" type="image/png" />
+    <link rel="icon" href="${config.base}/logo.png" type="image/png" />
+    <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:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
+    <style type="text/tailwindcss">
+      @layer base {
+        body {
+          font-family: 'Inter', inherit;
+          -webkit-font-smoothing:antialiased;
+          -moz-osx-font-smoothing:grayscale;
+          -webkit-tap-highlight-color:transparent;
+        }
+      }
+    </style>
   </head>
   <body>
-    <article class="prose prose-neutral mx-auto">
+    <article class="prose prose-neutral mx-auto pt-16 pb-32">
       ${content}
     </article>
   </body>

diff --git a/tsconfig.json b/tsconfig.json
@@ -7,7 +7,8 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipLibCheck": true,
-    "noUncheckedIndexedAccess": true
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true
   },
   "include": ["scripts"]
 }