Add[pwa & meta]: add to the meta info to the head & SocialProfileJsonLd

Author: ugistelmokaitis

components/layout.tsx

@@ -31,7 +31,7 @@ const Layout: FC<LayoutProps> = ({
     {
       url: `${process.env.NEXT_PUBLIC_SITE_URL ?? ''}/cover.png`,
       width: 1200,
-      height: 670,
+      height: 630,
       alt: name,
     },
   ];
@@ -48,7 +48,7 @@ const Layout: FC<LayoutProps> = ({
   return (
     <>
       <NextSeo
-        titleTemplate={`%s - ${name} - Software Developer`}
+        titleTemplate={`%s | ${name} | Software Developer`}
         title={title ?? ''}
         description={description ?? ''}
         canonical={url}
@@ -58,7 +58,7 @@ const Layout: FC<LayoutProps> = ({
           description: description ?? '',
           images,
           site_name: name,
-          type: '- Software Developer',
+          type: '| Software Developer',
           profile: {
             username,
           },
@@ -69,28 +69,16 @@ const Layout: FC<LayoutProps> = ({
           cardType: 'summary_large_image',
         }}
       />
-      {/* <SocialProfileJsonLd
+      <SocialProfileJsonLd
         name={name}
         type="Organization"
         url={process.env.NEXT_PUBLIC_SITE_URL ?? ''}
-
-        sameAs={settings.social_header.map((social) =>
-          docResolver(social.social_media_link)
+        sameAs={settings.data.footerSocialMedia.map(({ socialMediaLink }) =>
+          docResolver(socialMediaLink)
         )}
-      /> */}
+      />
 
       <Header settings={settings} />
-      <div>
-        {/* <AnimatedCursor
-          innerSize={8}
-          outerSize={9}
-          color="21, 91, 226"
-          outerAlpha={0.2}
-          innerScale={0.7}
-          outerScale={9}
-          trailingSpeed={8}
-        /> */}
-      </div>
       {children}
       <Footer settings={settings} />
     </>

next-sitemap.js

@@ -0,0 +1,6 @@
+/** @type {import('next-sitemap').IConfig} */
+
+module.exports = {
+  siteUrl: process.env.NEXT_PUBLIC_SITE_URL,
+  generateRobotsTxt: true,
+};

next.config.js

@@ -6,47 +6,49 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
 
-
-module.exports = withPlugins(
+/**
+ * @type {import('next').NextConfig}
+ */
+const options = {
+  async headers() {
+    return [{source: "/(.*)", headers: createSecureHeaders()}];
+  },
+
+
+  images: {
+    domains: ['images.prismic.io', 'charm.cdn.prismic.io'],
+    disableStaticImages: true,
+  },
+
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"]
+    });
+    return config;
+
+  }
+};
+
+const plugins = [
   [
-    [
-      withPWA,
-      {
-        pwa: {
-          disable: process.env.NODE_ENV === "development",
-          dest: 'public',
-          dynamicStartUrl: false,
-          mode: process.env.NODE_ENV,
-        },
+    withPWA,
+    {
+      pwa: {
+        disable: process.env.NODE_ENV === "development",
+        dest: 'public',
+        dynamicStartUrl: false,
+        mode: process.env.NODE_ENV,
       },
-      [
-        withSentryConfig,
-        {
-          silent: true,
-        },
-      ],
-      [withBundleAnalyzer],
-    ]
-  ],
-  {
-
-
-    async headers() {
-      return [{source: "/(.*)", headers: createSecureHeaders()}];
-    },
-
-
-    images: {
-      domains: ['images.prismic.io', 'charm.cdn.prismic.io'],
-      disableStaticImages: true,
     },
+  ],
+  /* [
+      withSentryConfig,
+      {
+          silent: true,
+      },
+  ], */
+  withBundleAnalyzer,
+];
 
-    webpack(config) {
-      config.module.rules.push({
-        test: /\.svg$/,
-        use: ["@svgr/webpack"]
-      });
-      return config;
-
-    }
-  });
+module.exports = withPlugins(plugins, options);

pages/_app.tsx

@@ -4,14 +4,37 @@ import { PrismicProvider } from '@prismicio/react';
 import type { FC } from 'react';
 import { Toaster } from 'react-hot-toast';
 import '../styles/tippy.css';
-
+import Head from 'next/head';
 import { client, linkResolver } from '../utils/prismic';
 import ExternalLinkComponent from '../components/externalLink';
 import InternalLinkComponent from '../components/internalLink';
 import richTextComponents from '../components/richTextComponents';
 
 const MyApp: FC<AppProps> = ({ Component, pageProps }) => (
   <>
+    <Head>
+      <meta charSet="utf-8" />
+      <meta
+        name="viewport"
+        content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover"
+      />
+
+      <meta name="application-name" content="Ugi Stelmokaitis" />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+      <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+      <meta name="apple-mobile-web-app-title" content="Ugi Stelmokaitis" />
+
+      <meta name="format-detection" content="telephone=no" />
+      <meta name="mobile-web-app-capable" content="yes" />
+      <meta name="msapplication-TileColor" content="#111827" />
+      <meta name="msapplication-tap-highlight" content="no" />
+      <meta name="theme-color" content="#111827" />
+      <link rel="manifest" href="/manifest.json" />
+
+      <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+      <link rel="icon" type="image/png" href="/favicon.png" />
+      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#111827" />
+    </Head>
     <PrismicProvider
       linkResolver={linkResolver}
       internalLinkComponent={InternalLinkComponent}

public/android-chrome-192x192.png

@@ -0,0 +1,22 @@
+{
+  "name": "Ugi Stelmokaitis",
+  "short_name": "Ugi Stelmokaitis",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#111827",
+  "background_color": "#111827",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait"
+}

public/android-chrome-512x512.png

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "typeRoots": ["node_modules/@types"],
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,