Add favicon (minor)

vasco3 · Sep 2, 2018 · 2c1b3ba · 2c1b3ba
1 parent 7f4ecc5
commit 2c1b3ba
Show file tree

Hide file tree

Showing 39 changed files with 158 additions and 61 deletions.
diff --git a/pages/_document.js b/pages/_document.js
@@ -2,6 +2,7 @@
 // Event handlers like onClick can't be added to this file
 import React from 'react';
 import Document, { Head, Main, NextScript } from 'next/document';
+import meta from '../src/meta';
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
@@ -13,12 +14,91 @@ export default class MyDocument extends Document {
     return (
       <html lang="en">
         <Head>
-          <title>Cheff - food macro planner</title>
+          <meta charset="UTF-8" />
+          <title>{meta.title}</title>
+          <meta name="description" content={meta.description} />
+
+          <link
+            rel="apple-touch-icon"
+            sizes="57x57"
+            href="/static/icons/apple-icon-57x57.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="60x60"
+            href="/static/icons/apple-icon-60x60.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="72x72"
+            href="/static/icons/apple-icon-72x72.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="76x76"
+            href="/static/icons/apple-icon-76x76.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="114x114"
+            href="/static/icons/apple-icon-114x114.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="120x120"
+            href="/static/icons/apple-icon-120x120.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="144x144"
+            href="/static/icons/apple-icon-144x144.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="152x152"
+            href="/static/icons/apple-icon-152x152.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/static/icons/apple-icon-180x180.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="192x192"
+            href="/static/icons/android-icon-192x192.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="/static/icons/favicon-32x32.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="96x96"
+            href="/static/icons/favicon-96x96.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="/static/icons/favicon-16x16.png"
+          />
+          <link rel="manifest" href="/static/icons/manifest.json" />
+          <meta name="msapplication-TileColor" content="#ffffff" />
+          <meta
+            name="msapplication-TileImage"
+            content="/static/icons/ms-icon-144x144.png"
+          />
+          <meta name="theme-color" content="#fd6721" />
+
           <meta
             name="viewport"
             content="initial-scale=1.0, width=device-width, user-scalable=no"
           />
-          <link rel="manifest" href="/static/manifest.json" />
           <link
             href="https://fonts.googleapis.com/css?family=Roboto"
             rel="stylesheet"
@@ -27,13 +107,19 @@ export default class MyDocument extends Document {
             href="https://fonts.googleapis.com/icon?family=Material+Icons"
             rel="stylesheet"
           />
-          <link
-            href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/utilities.min.css"
-            rel="stylesheet"
-          />
 
           <link rel="stylesheet" href="/_next/static/style.css" />
 
+          {/* <meta property="og:url" content={meta.url} />
+          <meta property="og:title" content={meta.title || ''} />
+          <meta property="og:description" content={meta.description || ''} />
+          <meta name="twitter:site" content={meta.url || ''} />
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:image" content={meta.ogImage || ''} />
+          <meta property="og:image" content={meta.ogImage || ''} />
+          <meta property="og:image:width" content="1200" />
+          <meta property="og:image:height" content="630" /> */}
+
           <script
             dangerouslySetInnerHTML={{
               __html: `

diff --git a/src/MenuDrawer.js b/src/MenuDrawer.js
@@ -2,16 +2,24 @@ import React from 'react';
 
 import Link from 'next/link';
 
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from 'rmwc/Drawer';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerSubtitle,
+} from 'rmwc/Drawer';
 import { ListDivider, SimpleListItem } from 'rmwc/List';
 import { Typography } from 'rmwc/Typography';
 import { Icon } from 'rmwc';
+import meta from './meta';
 
 const MenuDrawer = ({ isMobile, open, onClose }) => {
   return (
     <Drawer onClose={onClose} open={open} modal={isMobile}>
       <DrawerHeader>
-        <DrawerTitle theme="primary">Cheff</DrawerTitle>
+        <DrawerTitle theme="primary">{meta.title}</DrawerTitle>
+        <DrawerSubtitle>{meta.subtitle}</DrawerSubtitle>
       </DrawerHeader>
 
       <DrawerContent>

diff --git a/src/meta.js b/src/meta.js
@@ -0,0 +1,6 @@
+export default {
+  title: 'Cheff',
+  subtitle: 'Food Macros Planner',
+  description:
+    'Cheff is a food macros planner calculator inspired in Kinobody KinoCheff.',
+};
diff --git a/static/icons/android-icon-144x144.png b/static/icons/android-icon-144x144.png
diff --git a/static/icons/android-icon-192x192.png b/static/icons/android-icon-192x192.png
diff --git a/static/icons/android-icon-36x36.png b/static/icons/android-icon-36x36.png
diff --git a/static/icons/android-icon-48x48.png b/static/icons/android-icon-48x48.png
diff --git a/static/icons/android-icon-72x72.png b/static/icons/android-icon-72x72.png
diff --git a/static/icons/android-icon-96x96.png b/static/icons/android-icon-96x96.png
diff --git a/static/icons/apple-icon-114x114.png b/static/icons/apple-icon-114x114.png
diff --git a/static/icons/apple-icon-120x120.png b/static/icons/apple-icon-120x120.png
diff --git a/static/icons/apple-icon-144x144.png b/static/icons/apple-icon-144x144.png
diff --git a/static/icons/apple-icon-152x152.png b/static/icons/apple-icon-152x152.png
diff --git a/static/icons/apple-icon-180x180.png b/static/icons/apple-icon-180x180.png
diff --git a/static/icons/apple-icon-57x57.png b/static/icons/apple-icon-57x57.png
diff --git a/static/icons/apple-icon-60x60.png b/static/icons/apple-icon-60x60.png
diff --git a/static/icons/apple-icon-72x72.png b/static/icons/apple-icon-72x72.png
diff --git a/static/icons/apple-icon-76x76.png b/static/icons/apple-icon-76x76.png
diff --git a/static/icons/apple-icon-precomposed.png b/static/icons/apple-icon-precomposed.png
diff --git a/static/icons/apple-icon.png b/static/icons/apple-icon.png
diff --git a/static/icons/browserconfig.xml b/static/icons/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
diff --git a/static/icons/favicon-16x16.png b/static/icons/favicon-16x16.png
diff --git a/static/icons/favicon-32x32.png b/static/icons/favicon-32x32.png
diff --git a/static/icons/favicon-96x96.png b/static/icons/favicon-96x96.png
diff --git a/static/icons/favicon.ico b/static/icons/favicon.ico
diff --git a/static/icons/manifest.json b/static/icons/manifest.json
@@ -0,0 +1,48 @@
+{
+  "name": "Cheff",
+  "short_name": "Cheff",
+  "theme_color": "#fd6721",
+  "background_color": "#ffffff",
+  "display": "browser",
+  "orientation": "portrait",
+  "Scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/static/icons/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/static/icons/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/static/icons/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/static/icons/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/static/icons/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/static/icons/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ]
+}
diff --git a/static/icons/ms-icon-144x144.png b/static/icons/ms-icon-144x144.png
diff --git a/static/icons/ms-icon-150x150.png b/static/icons/ms-icon-150x150.png
diff --git a/static/icons/ms-icon-310x310.png b/static/icons/ms-icon-310x310.png
diff --git a/static/icons/ms-icon-70x70.png b/static/icons/ms-icon-70x70.png
diff --git a/static/images/icons/icon-128x128.png b/static/images/icons/icon-128x128.png
diff --git a/static/images/icons/icon-144x144.png b/static/images/icons/icon-144x144.png
diff --git a/static/images/icons/icon-152x152.png b/static/images/icons/icon-152x152.png
diff --git a/static/images/icons/icon-192x192.png b/static/images/icons/icon-192x192.png
diff --git a/static/images/icons/icon-384x384.png b/static/images/icons/icon-384x384.png
diff --git a/static/images/icons/icon-512x512.png b/static/images/icons/icon-512x512.png
diff --git a/static/images/icons/icon-72x72.png b/static/images/icons/icon-72x72.png
diff --git a/static/images/icons/icon-96x96.png b/static/images/icons/icon-96x96.png
diff --git a/static/manifest.json b/static/manifest.json