SEO Header

public/favicon/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

src/app/layout.tsx

@@ -2,9 +2,9 @@
 
 import './globals.css';
 import { Inter } from 'next/font/google';
-import { SessionContextProvider } from '@supabase/auth-helpers-react';
 import { Toaster } from 'react-hot-toast';
 import { supabase } from '@/lib/supabaseClient';
+import { SessionContextProvider } from '@supabase/auth-helpers-react';
 const inter = Inter({ subsets: ['latin'] });
 
 // export const metadata = {

src/app/page.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import Announcement from './container/Announcement';
 import { supabase } from '@/lib/supabaseClient';
+import Seo from '@/components/Seo';
 
 export default function Home() {
   const [status, setStatus] = useState('');
@@ -26,6 +27,7 @@ export default function Home() {
 
   return (
     <main>
+      <Seo />
       <Announcement variant={status} />
     </main>
   );

src/components/Emoji.tsx

@@ -5,7 +5,7 @@ const Emoji = () => {
     <div>
       <svg
         className='emoji-404 mt-4'
-        enable-background='new 0 0 226 249.135'
+        enableBackground='new 0 0 226 249.135'
         height='249.135'
         id='Layer_1'
         overflow='visible'
@@ -15,39 +15,39 @@ const Emoji = () => {
       >
         <circle cx='113' cy='113' fill='#FFE585' r='109' />
         <line
-          enable-background='new    '
+          enableBackground='new    '
           fill='none'
           opacity='0.29'
           stroke='#6E6E96'
-          stroke-linecap='round'
-          stroke-linejoin='round'
-          stroke-width='8'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+          strokeWidth='8'
           x1='88.866'
           x2='136.866'
           y1='245.135'
           y2='245.135'
         />
         <line
-          enable-background='new    '
+          enableBackground='new    '
           fill='none'
           opacity='0.17'
           stroke='#6E6E96'
-          stroke-linecap='round'
-          stroke-linejoin='round'
-          stroke-width='8'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+          strokeWidth='8'
           x1='154.732'
           x2='168.732'
           y1='245.135'
           y2='245.135'
         />
         <line
-          enable-background='new    '
+          enableBackground='new    '
           fill='none'
           opacity='0.17'
           stroke='#6E6E96'
-          stroke-linecap='round'
-          stroke-linejoin='round'
-          stroke-width='8'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+          strokeWidth='8'
           x1='69.732'
           x2='58.732'
           y1='245.135'
@@ -56,15 +56,15 @@ const Emoji = () => {
         <circle cx='68.732' cy='93' fill='#6E6E96' r='9' />
         <path
           d='M115.568,5.947c-1.026,0-2.049,0.017-3.069,0.045  c54.425,1.551,98.069,46.155,98.069,100.955c0,55.781-45.219,101-101,101c-55.781,0-101-45.219-101-101  c0-8.786,1.124-17.309,3.232-25.436c-3.393,10.536-5.232,21.771-5.232,33.436c0,60.199,48.801,109,109,109s109-48.801,109-109  S175.768,5.947,115.568,5.947z'
-          enable-background='new    '
+          enableBackground='new    '
           fill='#FF9900'
           opacity='0.24'
         />
         <circle cx='156.398' cy='93' fill='#6E6E96' r='9' />
         <ellipse
           cx='67.732'
           cy='140.894'
-          enable-background='new    '
+          enableBackground='new'
           fill='#FF0000'
           opacity='0.18'
           rx='17.372'
@@ -73,7 +73,7 @@ const Emoji = () => {
         <ellipse
           cx='154.88'
           cy='140.894'
-          enable-background='new    '
+          enableBackground='new'
           fill='#FF0000'
           opacity='0.18'
           rx='17.371'
@@ -89,7 +89,7 @@ const Emoji = () => {
           fill='none'
           r='109'
           stroke='#6E6E96'
-          stroke-width='8'
+          strokeWidth='8'
         />
       </svg>
     </div>

src/components/Seo.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import Head from 'next/head';
+import { useRouter } from 'next/compat/router';
+
+const defaultMeta = {
+  title: 'Software Engineering Laboratorium Status',
+  siteName: 'Software Engineering Laboratorium Status',
+  description:
+    'Get latest status and condition for Software Engineering Laboratory in your hand',
+  url: 'https://status.labse.in',
+  type: 'website',
+  robots: 'follow, index',
+
+  image: '/favicon/favicon.ico',
+};
+
+type SeoProps = {
+  date?: string;
+  templateTitle?: string;
+} & Partial<typeof defaultMeta>;
+
+export default function Seo(props: SeoProps) {
+  const router = useRouter();
+  const meta = {
+    ...defaultMeta,
+    ...props,
+  };
+  meta['title'] = props.templateTitle
+    ? `${props.templateTitle} | ${meta.siteName}`
+    : meta.title;
+
+  return (
+    <Head>
+      <title>{meta.title}</title>
+      <meta name='robots' content={meta.robots} />
+      <meta content={meta.description} name='description' />
+      {router && (
+        <>
+          <meta property='og:url' content={`${meta.url}${router.asPath}`} />
+          <link rel='canonical' href={`${meta.url}${router.asPath}`} />
+        </>
+      )}
+
+      <meta property='og:type' content={meta.type} />
+      <meta property='og:site_name' content={meta.siteName} />
+      <meta property='og:description' content={meta.description} />
+      <meta property='og:title' content={meta.title} />
+      <meta name='image' property='og:image' content={meta.image} />
+
+      <meta name='twitter:card' content='summary_large_image' />
+      <meta name='twitter:title' content={meta.title} />
+      <meta name='twitter:description' content={meta.description} />
+      <meta name='twitter:image' content={meta.image} />
+      {meta.date && (
+        <>
+          <meta property='article:published_time' content={meta.date} />
+          <meta
+            name='publish_date'
+            property='og:publish_date'
+            content={meta.date}
+          />
+        </>
+      )}
+
+      {favicons.map((linkProps) => (
+        <link key={linkProps.href} {...linkProps} />
+      ))}
+      <meta name='msapplication-TileColor' content='#ffffff' />
+      <meta name='msapplication-config' content='/favicon/browserconfig.xml' />
+      <meta name='theme-color' content='#ffffff' />
+    </Head>
+  );
+}
+
+const favicons: Array<React.ComponentPropsWithoutRef<'link'>> = [
+  {
+    rel: 'apple-touch-icon',
+    sizes: '180x180',
+    href: '/favicon/apple-touch-icon.png',
+  },
+  {
+    rel: 'icon',
+    type: 'image/png',
+    sizes: '32x32',
+    href: '/favicon/favicon-32x32.png',
+  },
+  {
+    rel: 'icon',
+    type: 'image/png',
+    sizes: '16x16',
+    href: '/favicon/favicon-16x16.png',
+  },
+  { rel: 'manifest', href: '/favicon/site.webmanifest' },
+  {
+    rel: 'mask-icon',
+    href: '/favicon/safari-pinned-tab.svg',
+    color: '#00e887',
+  },
+  { rel: 'shortcut icon', href: '/favicon/favicon.ico' },
+];