Standardize favicon and open graph data across Nebula (#123)

* Initial commit * Prettier * Tab icon * Readd favicon fallback * Fallback fix, migrate to always dark icon on a white bg * Update icon color and fallback to png before ico * Update icon color in logoIcon.tsx * Add web manifest and apple-touch-icon * Prettier * Increase icon size and move from tsx to svg icon * Fixed width icon
UTDNebula · Nov 15, 2023 · c68f560 · c68f560
1 parent 8b46896
commit c68f560
Show file tree

Hide file tree

Showing 23 changed files with 119 additions and 381 deletions.
diff --git a/components/icons/FlatLogoIcon/README.md b/components/icons/FlatLogoIcon/README.md
diff --git a/components/icons/FlatLogoIcon/flatLogoIcon.tsx b/components/icons/FlatLogoIcon/flatLogoIcon.tsx
diff --git a/components/icons/LogoIcon/README.md b/components/icons/LogoIcon/README.md
diff --git a/components/icons/LogoIcon/logoIcon.tsx b/components/icons/LogoIcon/logoIcon.tsx
diff --git a/components/navigation/topMenu/topMenu.tsx b/components/navigation/topMenu/topMenu.tsx
@@ -1,11 +1,10 @@
 import { Share } from '@mui/icons-material';
 import { IconButton, Snackbar, Tooltip } from '@mui/material';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { useState } from 'react';
 
-import { LogoIcon } from '../../icons/LogoIcon/logoIcon';
-
 /**
  * This is a component to hold UTD Trends branding and basic navigation
  * @returns
@@ -44,10 +43,16 @@ export function TopMenu() {
     <>
       <div className="bg-primary h-16 text-light relative py-2 px-4">
         <div className="h-full flex min-w-fit justify-between">
-          <Link href="/" className="m-2">
+          <Link href="/" className="m-1">
             <div className="h-full flex align-middle place-items-center justify-center">
-              <div className="h-full float-left mr-2 w-7">
-                <LogoIcon />
+              <div className="h-full float-left mr-2 w-14">
+                <Image
+                  src="/icon-white.svg"
+                  alt="Nebula Labs logo"
+                  width={100}
+                  height={76}
+                  className="h-full w-full"
+                />
               </div>
               <h1 className="float-right text-xl text-light-always">
                 UTD Trends

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -31,7 +31,25 @@ function MyApp({ Component, pageProps }: AppProps) {
     <>
       <Head>
         <title>UTD Trends</title>
-        <link rel="icon" href="/Project_Nebula_Logo.svg" />
+        <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="icon" href="/logoIcon.svg" type="image/svg+xml" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link rel="manifest" href="/site.webmanifest" />
       </Head>
       <ThemeProvider theme={muiTheme}>
         <Component {...pageProps} />

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -3,13 +3,13 @@ import React from 'react';
 
 function Document() {
   return (
-    <Html>
+    <Html lang="en">
       <Head prefix="og: http://ogp.me/ns#">
         <meta
           name="description"
           content="A data visualization tool built to help students view historical course and section data."
         />
-        <meta name="theme-color" content="#7486ce" />
+        <meta name="theme-color" content="#573DFF" />
 
         <meta property="og:title" content="UTD Trends" />
         <meta
@@ -19,7 +19,7 @@ function Document() {
         <meta property="og:type" content="website" />
         <meta
           property="og:image"
-          content="https://trends.utdnebula.com/Project_Nebula_Logo.png"
+          content="https://trends.utdnebula.com/logoIcon.png"
         />
         <meta property="og:image:type" content="image/png" />
         <meta property="og:image:alt" content="Nebula Labs Icon." />