Update favicon and meta

oBusk · Nov 11, 2021 · 70c0483 · 70c0483 · vercel · Nov 11, 2021
1 parent 3a8b66a
commit 70c0483
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 2 deletions.
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,18 @@
+{
+    "name": "npm-diff.app",
+    "short_name": "npm-diff",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#3f444e",
+    "background_color": "#1a202c"
+}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -6,6 +6,7 @@ import Header from "./Header";
 
 export interface LayoutProps extends StackProps {
     title?: string;
+    description?: string;
 }
 
 const BACKGROUND_COLOR = undefined;
@@ -14,6 +15,7 @@ const PADDING = "1em";
 const Layout: FunctionComponent<LayoutProps> = ({
     children,
     title = "",
+    description,
     ...props
 }) => {
     // https://github.com/chakra-ui/chakra-ui/blob/%40chakra-ui/react%401.6.5/packages/theme/src/styles.ts#L8
@@ -23,6 +25,14 @@ const Layout: FunctionComponent<LayoutProps> = ({
         <>
             <Head>
                 <title>{title ? `${title} • ` : ""}npm-diff.app 📦🔃</title>
+                <meta
+                    name="description"
+                    content={
+                        description
+                            ? description
+                            : "Inspect changes between npm packages in a webapp"
+                    }
+                />
             </Head>
             <Stack
                 minHeight="100vh"

diff --git a/src/pages/[...parts].tsx b/src/pages/[...parts].tsx
@@ -112,7 +112,10 @@ const DiffPage: NextPage<Props> = ({
         .reduce((a, b) => a + b);
 
     return (
-        <Layout title={`Comparing ${a}...${b}`}>
+        <Layout
+            title={`Comparing ${a}...${b}`}
+            description={`A diff between the npm packages "${a}" and "${b}"`}
+        >
             <DiffIntro
                 a={a}
                 b={b}

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -7,7 +7,26 @@ export default class Document extends NextDocument {
     render() {
         return (
             <Html lang="en">
-                <Head />
+                <Head>
+                    <link
+                        rel="apple-touch-icon"
+                        sizes="180x180"
+                        href="/apple-touch-icon.png"
+                    />
+                    <link
+                        rel="icon"
+                        type="image/png"
+                        sizes="32x32"
+                        href="/favicon-32x32.png"
+                    />
+                    <link
+                        rel="icon"
+                        type="image/png"
+                        sizes="16x16"
+                        href="/favicon-16x16.png"
+                    />
+                    <link rel="manifest" href="/site.webmanifest" />
+                </Head>
                 <body>
                     <ColorModeScript
                         initialColorMode={theme.config.initialColorMode}