add favicon

rdp77 · Oct 11, 2023 · a7ea6d4 · a7ea6d4
1 parent 0a089a0
commit a7ea6d4
Show file tree

Hide file tree

Showing 30 changed files with 56 additions and 18 deletions.
diff --git a/src/app/data/icon_assets.tsx b/src/app/data/icon_assets.tsx
@@ -0,0 +1,17 @@
+import favicon from "../favicon.ico";
+import icon180 from "../../assets/icon/apple-icon-180x180.png"
+import icon192 from "../../assets/icon/android-icon-192x192.png"
+import icon32 from "../../assets/icon/favicon-32x32.png"
+import icon96 from "../../assets/icon/favicon-96x96.png"
+import icon16 from "../../assets/icon/favicon-16x16.png"
+import icon144 from "../../assets/icon/ms-icon-144x144.png"
+
+export const iconAssets: Record<string, string> = {
+    favicon: favicon.src,
+    icon192: icon192.src,
+    icon180: icon180.src,
+    icon144: icon144.src,
+    icon96: icon96.src,
+    icon32: icon32.src,
+    icon16: icon16.src,
+};
diff --git a/src/app/data/portfolio.tsx b/src/app/data/portfolio.tsx
@@ -3,8 +3,6 @@ import {imageAssets} from "@/app/data/portfolio_assets";
 import {StaticImageData} from "next/image";
 import NetworkInstallationUniversityAirlangga from "@/app/data/portfolio/network_installation_university_airlangga";
 import React from "react";
-import FirstMedia from "@/assets/image/portfolio/first-media.png";
-import Sakpattana from "@/assets/image/portfolio/sakpattana.png";
 
 export interface PortfolioData {
     id: number;

diff --git a/src/app/meta_data.tsx b/src/app/meta_data.tsx
@@ -3,36 +3,41 @@ import React from "react";
 import {WEBSITE_DESCRIPTION, WEBSITE_KEYWORDS} from "@/app/constant/meta_data";
 import defaultImage from "../assets/image/avatar.png";
 import {description} from "@/app/data/about";
+import {useRouter} from 'next/router';
 
 interface MetaDataProps {
     title: string;
 }
 
 const MetaData: React.FC<MetaDataProps> = ({title}) => {
     const defaultImageUrl = defaultImage.src;
+    const currentUrl = process.env.APP_URL + useRouter().asPath.replace('/', '');
 
     return (
         <Head>
+            {/*HTML Meta Tags*/}
             <title>{title}</title>
             <meta name="description" content={WEBSITE_DESCRIPTION}/>
             <meta name="keywords" content={WEBSITE_KEYWORDS}/>
 
-            {/*The Open Graph protocol*/}
-            <meta property="og:locale" content="en_US" />
+            {/*Facebook Meta Tags*/}
+            <meta property="og:locale" content="en_US"/>
+            <meta property="og:site_name" content={title}/>
+            <meta property="og:image" content={defaultImageUrl}/>
+            <meta property="og:title" content={title}/>
+            <meta property="og:description" content={description}/>
+            <meta property="og:url" content={currentUrl}/>
+            <meta property="og:type" content="profile"/>
+            <meta property="profile:first_name" content="Moh Ravi"/>
+            <meta property="profile:last_name" content="Dwi Putra"/>
+            <meta property="profile:username" content="rdp77"/>
+            <meta property="profile:gender" content="male"/>
+
+            {/*Twitter Meta Tags*/}
             <meta property="twitter:image" content={defaultImageUrl}/>
             <meta property="twitter:card" content={defaultImageUrl}/>
             <meta property="twitter:title" content={title}/>
             <meta property="twitter:description" content={description}/>
-            <meta property="og:site_name" content={title} />
-            <meta property="og:image" content={defaultImageUrl}/>
-            <meta property="og:title" content={title}/>
-            <meta property="og:description" content={description}/>
-            <meta property="og:url" content="Canonical link preview URL"/>
-            <meta property="og:type" content="profile" />
-            <meta property="profile:first_name" content="Moh Ravi" />
-            <meta property="profile:last_name" content="Dwi Putra" />
-            <meta property="profile:username" content="rdp77" />
-            <meta property="profile:gender" content="male" />
 
             {/* eslint-disable-next-line @next/next/no-css-tags */}
             <link rel="stylesheet" href="/assets/css/basic.css"/>

diff --git a/public/assets/icon/android-icon-144x144.png → src/assets/icon/android-icon-144x144.png b/public/assets/icon/android-icon-144x144.png → src/assets/icon/android-icon-144x144.png
diff --git a/public/assets/icon/android-icon-192x192.png → src/assets/icon/android-icon-192x192.png b/public/assets/icon/android-icon-192x192.png → src/assets/icon/android-icon-192x192.png
diff --git a/public/assets/icon/android-icon-36x36.png → src/assets/icon/android-icon-36x36.png b/public/assets/icon/android-icon-36x36.png → src/assets/icon/android-icon-36x36.png
diff --git a/public/assets/icon/android-icon-48x48.png → src/assets/icon/android-icon-48x48.png b/public/assets/icon/android-icon-48x48.png → src/assets/icon/android-icon-48x48.png
diff --git a/public/assets/icon/android-icon-72x72.png → src/assets/icon/android-icon-72x72.png b/public/assets/icon/android-icon-72x72.png → src/assets/icon/android-icon-72x72.png
diff --git a/public/assets/icon/android-icon-96x96.png → src/assets/icon/android-icon-96x96.png b/public/assets/icon/android-icon-96x96.png → src/assets/icon/android-icon-96x96.png
diff --git a/public/assets/icon/apple-icon-114x114.png → src/assets/icon/apple-icon-114x114.png b/public/assets/icon/apple-icon-114x114.png → src/assets/icon/apple-icon-114x114.png
diff --git a/public/assets/icon/apple-icon-120x120.png → src/assets/icon/apple-icon-120x120.png b/public/assets/icon/apple-icon-120x120.png → src/assets/icon/apple-icon-120x120.png
diff --git a/public/assets/icon/apple-icon-144x144.png → src/assets/icon/apple-icon-144x144.png b/public/assets/icon/apple-icon-144x144.png → src/assets/icon/apple-icon-144x144.png
diff --git a/public/assets/icon/apple-icon-152x152.png → src/assets/icon/apple-icon-152x152.png b/public/assets/icon/apple-icon-152x152.png → src/assets/icon/apple-icon-152x152.png
diff --git a/public/assets/icon/apple-icon-180x180.png → src/assets/icon/apple-icon-180x180.png b/public/assets/icon/apple-icon-180x180.png → src/assets/icon/apple-icon-180x180.png
diff --git a/public/assets/icon/apple-icon-57x57.png → src/assets/icon/apple-icon-57x57.png b/public/assets/icon/apple-icon-57x57.png → src/assets/icon/apple-icon-57x57.png
diff --git a/public/assets/icon/apple-icon-60x60.png → src/assets/icon/apple-icon-60x60.png b/public/assets/icon/apple-icon-60x60.png → src/assets/icon/apple-icon-60x60.png
diff --git a/public/assets/icon/apple-icon-72x72.png → src/assets/icon/apple-icon-72x72.png b/public/assets/icon/apple-icon-72x72.png → src/assets/icon/apple-icon-72x72.png
diff --git a/public/assets/icon/apple-icon-76x76.png → src/assets/icon/apple-icon-76x76.png b/public/assets/icon/apple-icon-76x76.png → src/assets/icon/apple-icon-76x76.png
diff --git a/...ic/assets/icon/apple-icon-precomposed.png → src/assets/icon/apple-icon-precomposed.png b/...ic/assets/icon/apple-icon-precomposed.png → src/assets/icon/apple-icon-precomposed.png
diff --git a/public/assets/icon/apple-icon.png → src/assets/icon/apple-icon.png b/public/assets/icon/apple-icon.png → src/assets/icon/apple-icon.png
diff --git a/public/assets/icon/favicon-16x16.png → src/assets/icon/favicon-16x16.png b/public/assets/icon/favicon-16x16.png → src/assets/icon/favicon-16x16.png
diff --git a/public/assets/icon/favicon-32x32.png → src/assets/icon/favicon-32x32.png b/public/assets/icon/favicon-32x32.png → src/assets/icon/favicon-32x32.png
diff --git a/public/assets/icon/favicon-96x96.png → src/assets/icon/favicon-96x96.png b/public/assets/icon/favicon-96x96.png → src/assets/icon/favicon-96x96.png
diff --git a/public/assets/icon/favicon.ico → src/assets/icon/favicon.ico b/public/assets/icon/favicon.ico → src/assets/icon/favicon.ico
diff --git a/public/assets/icon/ms-icon-144x144.png → src/assets/icon/ms-icon-144x144.png b/public/assets/icon/ms-icon-144x144.png → src/assets/icon/ms-icon-144x144.png
diff --git a/public/assets/icon/ms-icon-150x150.png → src/assets/icon/ms-icon-150x150.png b/public/assets/icon/ms-icon-150x150.png → src/assets/icon/ms-icon-150x150.png
diff --git a/public/assets/icon/ms-icon-310x310.png → src/assets/icon/ms-icon-310x310.png b/public/assets/icon/ms-icon-310x310.png → src/assets/icon/ms-icon-310x310.png
diff --git a/public/assets/icon/ms-icon-70x70.png → src/assets/icon/ms-icon-70x70.png b/public/assets/icon/ms-icon-70x70.png → src/assets/icon/ms-icon-70x70.png
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,8 +1,10 @@
 import {useRouter} from 'next/router';
 import React, {useEffect} from 'react';
 import {redirectDomain} from "@/app/utils/redirect";
-import { config } from '@fortawesome/fontawesome-svg-core'
-import '@fortawesome/fontawesome-svg-core/styles.css'
+import {config} from '@fortawesome/fontawesome-svg-core';
+import '@fortawesome/fontawesome-svg-core/styles.css';
+import Head from 'next/head';
+
 config.autoAddCss = false
 
 interface MyAppProps {
@@ -17,7 +19,14 @@ const MyApp: React.FC<MyAppProps> = ({Component, pageProps}) => {
         redirectDomain();
     }, [router.pathname]);
 
-    return <Component {...pageProps} />;
+    return (
+        <>
+            <Head>
+                <meta name="viewport" content="width=device-width, initial-scale=1"/>
+            </Head>
+            <Component {...pageProps} />
+        </>
+    )
 };
 
 export default MyApp;
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,5 +1,6 @@
 import Document, {Html, Head, Main, NextScript} from 'next/document'
 import React from "react";
+import {iconAssets} from "@/app/data/icon_assets";
 
 class MyDocument extends Document {
     render() {
@@ -42,8 +43,16 @@ class MyDocument extends Document {
                     <meta content="#26272c" name="msapplication-navbutton-color"/>
                     <meta content="#26272c" name="apple-mobile-web-app-status-bar-style"/>
 
+                    {/*Favicon*/}
+                    <link href={iconAssets.favicon} rel="shortcut icon" type='image/x-icon'/>
+                    <link rel="apple-touch-icon" sizes="180x180" href={iconAssets.icon180}/>
+                    <link rel="icon" type="image/png" sizes="192x192" href={iconAssets.icon192}/>
+                    <link rel="icon" type="image/png" sizes="32x32" href={iconAssets.icon32}/>
+                    <link rel="icon" type="image/png" sizes="96x96" href={iconAssets.icon96}/>
+                    <link rel="icon" type="image/png" sizes="16x16" href={iconAssets.icon16}/>
+                    <meta name="msapplication-TileImage" content={iconAssets.icon144}/>
+
                     {/*Mobile Specific Metas*/}
-                    <meta name="viewport" content="width=device-width, initial-scale=1"/>
                     <link rel="manifest" href="/assets/manifest.json"/>
                 </Head>
                 <body>