feat: pwa

arrofirezasatria · Dec 9, 2022 · 03645f8 · 03645f8
1 parent 6277ea3
commit 03645f8
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 17 deletions.
diff --git a/src/components/AppsBar.tsx b/src/components/AppsBar.tsx
@@ -1,12 +1,4 @@
-import {
-  AppBar,
-  Box,
-  Button,
-  Container,
-  IconButton,
-  Toolbar,
-  Typography,
-} from "@mui/material";
+import { AppBar, Box, Container, IconButton, Toolbar } from "@mui/material";
 import React from "react";
 import { useThemeContext } from "@modules/components/ThemeContext";
 import Brightness4Icon from "@mui/icons-material/Brightness4";
@@ -18,10 +10,6 @@ const link = [
   { title: "blog", link: "/blog" },
 ];
 
-const CustomLink = (params: { url: string; title: string }) => {
-  return <Link href={params.url}>{params.title}</Link>;
-};
-
 export default function AppsBar() {
   const { toggleDarkMode, darkMode } = useThemeContext();
 
@@ -34,7 +22,7 @@ export default function AppsBar() {
               {link.map((item, index) => {
                 return (
                   <li key={index}>
-                    <CustomLink url={item.link} title={item.title} />
+                    <Link href={item.link}>{item.title}</Link>
                   </li>
                 );
               })}

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -0,0 +1,27 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        {/* for manifest PWA */}
+        <link rel="manifest" href="/static/manifest.json" />
+        {/* PWA primary color */}
+        <meta
+          name="theme-color"
+          content={"white"}
+          media="(prefers-color-scheme: light)"
+        />
+        <meta
+          name="theme-color"
+          content={"black"}
+          media="(prefers-color-scheme: dark)"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
@@ -21,9 +21,9 @@ export default function BlogPost() {
           <h1>Your Title</h1>
           <h2>subtitle</h2>
         </header>
-        <Box component={"article"}>
+        <article>
           <div>article body</div>
-        </Box>
+        </article>
       </Box>
     </AppsContainer>
   );

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -10,7 +10,9 @@ export default function Home() {
   return (
     <AppsContainer>
       <Box component="main">
-        <header>title</header>
+        <header>
+          <h1>title</h1>
+        </header>
         <section>a</section>
         <section>b</section>
       </Box>