fix manifest issue

Author: recursivezero

public/manifest.webmanifest

@@ -1,7 +1,7 @@
 {
   "background_color": "#1d1f21",
   "category": "education",
-  "description": "A learning pad for ABCD keyboard layout enthusiasts.",
+  "description": "A learning pad for ABCD keyboard.",
   "display": "standalone",
   "icons": [
     {
@@ -30,12 +30,12 @@
   "screenshots": [
     {
       "label": "abcdkbd",
-      "sizes": "196x196",
-      "src": "/assets/icons/192x192.png",
+      "sizes": "192x192",
+      "src": "/assets/images/192x192.png",
       "type": "image/png"
     }
   ],
   "short_name": "ABCDKBD",
   "start_url": "/",
   "theme_color": "#2bbc8a"
-}
+}

src/assets/styles/header.css

@@ -28,6 +28,10 @@
       font-size: 1.5rem;
       font-weight: 600;
       color: var(--primary);
+
+      & em {
+        color: #6d8c3d;
+      }
     }
   }
 
@@ -98,4 +102,4 @@
 .header-spacer {
   min-height: 5rem;
   border-bottom: 1px dotted grey;
-}
+}

src/layouts/Base.astro

@@ -58,7 +58,7 @@ const {
               // or `process.env.NODE_ENV !== 'development'`
               window.addEventListener("load", () => {
                 navigator.serviceWorker
-                  .register("/service-worker.js")
+                  .register("/service-worker.js", { scope: "/" })
                   .then((registration) => {
                     console.log("Service Worker successfully registered:", registration.scope);
                     // Optional: Check for updates

src/layouts/BaseHead.astro

@@ -24,7 +24,7 @@ const socialImageURL = new URL(ogImage ? ogImage : "/assets/images/ABCD-pink.png
 <link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
 <link rel="shortcut icon" href="/assets/favicon.ico" />
 <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png" sizes="180x180" />
-<link rel="manifest" href="manifest.webmanifest" />
+<link rel="manifest" href="/manifest.webmanifest" />
 <link rel="canonical" href={canonicalURL} />
 
 {/* Primary Meta Tags */}
@@ -52,14 +52,6 @@ const socialImageURL = new URL(ogImage ? ogImage : "/assets/images/ABCD-pink.png
 <meta property="og:image:alt" content={description} />
 <meta property="og:image:width" content="1200" />
 <meta property="og:image:height" content="630" />
-{
-  articleDate && (
-    <>
-      <meta property="article:author" content={siteConfig.author} />
-      <meta property="article:published_time" content={articleDate} />
-    </>
-  )
-}
 
 {/* Twitter */}
 <meta name="twitter:card" content="summary_large_image" />

src/layouts/common/Header.astro

@@ -9,10 +9,10 @@ import logoImage from "/public/assets/images/512x512.png";
   <div class="header__brand">
     <a href="/" class="logo__link">
       <Picture src={logoImage} formats={["png", "webp"]} alt="abcdkbd logo" class="logo" />
-      <span title={APP_NAME}>{APP_NAME}</span>
+      <span title={APP_NAME}>abcd<em>kbd</em></span>
     </a>
   </div>
-  <div class="title text__balance">Learn with fun</div>
+  <div class="title text__balance">Happy Learning Spot</div>
 
   <!--<div class="caption">
     <a href="/" class:list={{ "is-active": Astro.url.pathname === "/home" || Astro.url.pathname === "/" }}>Home</a>

src/pages/index.astro

@@ -9,7 +9,7 @@ import MobileSplash from "@/components/MobileSplash.astro";
 import BaseLayout from "@/layouts/Base";
 
 const meta = {
-  title: "Home",
+  title: "ABCDKBD - A learning corner for little learners.",
   description: "A fun and interactive learning platform for kids."
 };
 ---