fix: add SEO to app

thedaviddias · Aug 3, 2023 · f54d241 · f54d241 · vercel · Aug 3, 2023
1 parent 345e121
commit f54d241
Show file tree

Hide file tree

Showing 24 changed files with 548 additions and 345 deletions.
diff --git a/apps/blog/locales/en/common.json b/apps/blog/locales/en/common.json
@@ -155,7 +155,7 @@
   "tags": {
     "path": "/tags",
     "seo": {
-      "title": "{{name}} Related Notes",
+      "title": "{{name}} Notes",
       "url": "tags",
       "title_all": "Tags Overview",
       "description": "Posts linked to {{name}}.",
@@ -179,7 +179,7 @@
     "path": "/categories",
     "seo": {
       "title": "{{name}} Articles",
-      "description": "Explore my posts related to {{name}}."
+      "description": "Explore posts related to {{name}}."
     },
     "h1": "Category: {{name}}"
   },

diff --git a/apps/blog/next-seo.config.ts b/apps/blog/next-seo.config.ts
@@ -0,0 +1,96 @@
+import { DefaultSeoProps } from 'next-seo'
+
+const config: DefaultSeoProps = {
+  titleTemplate: '%s | The David Dias',
+  defaultTitle: 'The David Dias',
+  openGraph: {
+    type: 'website',
+    url: 'https://thedaviddias.dev',
+    profile: {
+      firstName: 'David',
+      lastName: 'Dias',
+      gender: 'male',
+    },
+    images: [
+      {
+        url: `/og/default.png`,
+        alt: 'The David Dias',
+      },
+    ],
+  },
+  twitter: {
+    handle: '@thedaviddias',
+    site: '@thedaviddias',
+    cardType: 'summary_large_image',
+  },
+  additionalMetaTags: [
+    {
+      name: 'theme-color',
+      content: '#ffffff',
+    },
+    {
+      name: 'application-name',
+      content: 'The David Dias',
+    },
+    {
+      name: 'apple-mobile-web-app-capable',
+      content: 'yes',
+    },
+    {
+      name: 'msapplication-config',
+      content: `/favicons/browserconfig.xml`,
+    },
+  ],
+  additionalLinkTags: [
+    {
+      rel: 'alternate',
+      type: 'application/rss+xml',
+      href: '/rss/feed.xml',
+    },
+    {
+      rel: 'alternate',
+      type: 'application/rss+xml',
+      href: '/rss/fr/feed.xml',
+    },
+    {
+      rel: 'icon',
+      href: `/favicon.ico`,
+    },
+    {
+      rel: 'apple-touch-icon',
+      href: `/favicons/apple-touch-icon.png`,
+      sizes: '76x76',
+    },
+    {
+      rel: 'manifest',
+      href: `/favicons/site.webmanifest`,
+    },
+    {
+      rel: 'mask-icon',
+      href: `/favicons/safari-pinned-tab.svg`,
+      color: '#000000',
+    },
+    {
+      rel: 'icon',
+      type: 'image/png',
+      sizes: '32x32',
+      href: `/favicons/favicon-32x32.png`,
+    },
+    {
+      rel: 'icon',
+      type: 'image/png',
+      sizes: '16x16',
+      href: `/favicons/favicon-16x16.png`,
+    },
+    {
+      rel: `webmention`,
+      href: `https://webmention.io/thedaviddias.dev/webmention`,
+    },
+    {
+      rel: `pingback`,
+      href: `https://webmention.io/thedaviddias.dev/xmlrpc`,
+    },
+  ],
+}
+
+export default config
diff --git a/apps/blog/package.json b/apps/blog/package.json
@@ -37,7 +37,7 @@
     "next-compose-plugins": "^2.2.1",
     "next-mdx-remote": "^4.4.1",
     "next-plausible": "^3.7.2",
-    "next-seo": "^5.5.0",
+    "next-seo": "^6.1.0",
     "next-themes": "0.2.1",
     "postcss": "^8.4.24",
     "prettier": "^2.8.8",

diff --git a/apps/blog/public/rss/feed.json b/apps/blog/public/rss/feed.json
diff --git a/apps/blog/public/rss/feed.xml b/apps/blog/public/rss/feed.xml
diff --git a/apps/blog/public/rss/fr/feed.json b/apps/blog/public/rss/fr/feed.json
diff --git a/apps/blog/public/rss/fr/feed.xml b/apps/blog/public/rss/fr/feed.xml
diff --git a/apps/blog/src/components/BuyMeACoffee/BuyMeACoffee.tsx b/apps/blog/src/components/BuyMeACoffee/BuyMeACoffee.tsx
@@ -1,13 +1,18 @@
 import Image from 'next/image'
 import React from 'react'
 
+import { CustomLink } from '../CustomLink'
+
 export const BuyMeACoffee = () => {
   return (
     <div className="mt-10 border-t border-gray-200 dark:border-gray-600 pt-8 text-center">
       <div className="text-2xl">Has this been helpful to you?</div>
-      <p className="text-lg">
+      <div className="text-lg">
         You can support my work by sharing this article with others,
         <br />
+        <CustomLink href="/supporters" className="underline plausible-event-name=supporters">
+          sponsoring me on Github
+        </CustomLink>{' '}
         or perhaps buy me a cup of coffee 😊
         <div>
           <a
@@ -17,21 +22,17 @@ export const BuyMeACoffee = () => {
             className="external-link plausible-event-name=kofi"
           >
             <Image
-              className="inline-block h-auto max-w-xl pt-2"
+              className="inline-block h-auto max-w-xl pt-2 w-auto h-auto"
               src="/images/kofi.png"
               width={40}
               height={40}
               alt="Buy me a coffee on Ko-fi"
               aria-hidden="true"
               priority={true}
-              style={{
-                maxWidth: '100%',
-                height: 'auto',
-              }}
             />
           </a>
         </div>
-      </p>
+      </div>
     </div>
   )
 }
diff --git a/apps/blog/src/components/BuyMeACoffee/index.ts b/apps/blog/src/components/BuyMeACoffee/index.ts
@@ -0,0 +1 @@
+export * from './BuyMeACoffee'
diff --git a/apps/blog/src/components/CustomLink/CustomLink.tsx b/apps/blog/src/components/CustomLink/CustomLink.tsx
@@ -55,7 +55,11 @@ export const CustomLink: React.FC<CustomLinkProps> = ({
   }
 
   return (
-    <Link href={href} className={`cursor-pointer hover:underline ${className}`} {...rest}>
+    <Link
+      href={href}
+      className={`cursor-pointer hover:underline ${className ? className : ''}`}
+      {...rest}
+    >
       {children}
     </Link>
   )

diff --git a/apps/blog/src/components/Footer/Footer.tsx b/apps/blog/src/components/Footer/Footer.tsx
@@ -72,12 +72,12 @@ export const Footer = () => {
   if (!mounted) return null
 
   return (
-    <div className="mt-auto pt-5 sm:pt-8">
+    <footer className="mt-auto pt-5 sm:pt-8">
       <div className="h-36 max-w-5xl mx-auto relative">
         <Image
           className="object-cover max-w-xl mx-auto"
           src="/images/david-dias-banner.png"
-          alt=""
+          alt="David mecanic mode, David designer mode, David gaming mode, David sailing mode, David VR mode"
           aria-hidden="true"
           fill
           sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
@@ -86,7 +86,7 @@ export const Footer = () => {
       <div>
         <NewsletterForm />
       </div>
-      <footer
+      <div
         className="main-footer bg-gray-50 dark:bg-black transform"
         aria-labelledby="footer-heading"
       >
@@ -115,7 +115,7 @@ export const Footer = () => {
             </p>
           </div>
         </div>
-      </footer>
-    </div>
+      </div>
+    </footer>
   )
 }
diff --git a/apps/blog/src/components/MdxComponents/responsive-image.tsx b/apps/blog/src/components/MdxComponents/responsive-image.tsx
@@ -15,7 +15,7 @@ export const ResponsiveImage: React.FC<ImageProps> = ({
   const updatedFigcaption = title && extractLinks(title)
 
   return (
-    <div className="my-3">
+    <span className="my-3 block">
       <CustomLink href={src as string} aria-label="Click to enlarge the image">
         <Image
           alt={alt}
@@ -39,6 +39,6 @@ export const ResponsiveImage: React.FC<ImageProps> = ({
           <span dangerouslySetInnerHTML={{ __html: updatedFigcaption ?? title }} />
         </figcaption>
       )}
-    </div>
+    </span>
   )
 }
diff --git a/apps/blog/src/components/Projects/Projects.tsx b/apps/blog/src/components/Projects/Projects.tsx
@@ -28,7 +28,7 @@ export const Projects: React.FC<ProjectsProps> = ({ project }) => {
             {project.frontMatter.progress !== '100%' ? (
               <div className="w-full bg-gray-200 rounded-full dark:bg-gray-700">
                 <div
-                  className="bg-blue-600 text-sm font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
+                  className="bg-blue-700 text-sm font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
                   style={{ width: project.frontMatter.progress }}
                 >
                   {project.frontMatter.progress}

diff --git a/apps/blog/src/config/seo.ts b/apps/blog/src/config/seo.ts
@@ -1,100 +1,9 @@
-import { NextSeoProps } from 'next-seo'
 import { Translate } from 'next-translate'
 
 import { BASE_URL } from '@/constants'
 
-const defaultSEO: NextSeoProps = {
-  titleTemplate: '%s | The David Dias',
-  defaultTitle: 'The David Dias',
-  openGraph: {
-    type: 'website',
-    url: 'https://thedaviddias.dev',
-    profile: {
-      firstName: 'David',
-      lastName: 'Dias',
-      gender: 'male',
-    },
-    images: [
-      {
-        url: `/og/default.png`,
-        alt: 'The David Dias',
-      },
-    ],
-  },
-  twitter: {
-    handle: '@thedaviddias',
-    site: '@thedaviddias',
-    cardType: 'summary_large_image',
-  },
-  additionalMetaTags: [
-    {
-      name: 'theme-color',
-      content: '#ffffff',
-    },
-    {
-      name: 'application-name',
-      content: 'The David Dias',
-    },
-    {
-      name: 'apple-mobile-web-app-capable',
-      content: 'yes',
-    },
-    {
-      name: 'msapplication-config',
-      content: `/favicons/browserconfig.xml`,
-    },
-  ],
-  additionalLinkTags: [
-    {
-      rel: 'alternate',
-      type: 'application/rss+xml',
-      href: '/rss/feed.xml',
-    },
-    {
-      rel: 'alternate',
-      type: 'application/rss+xml',
-      href: '/rss/fr/feed.xml',
-    },
-    {
-      rel: 'icon',
-      href: `/favicon.ico`,
-    },
-    {
-      rel: 'apple-touch-icon',
-      href: `/favicons/apple-touch-icon.png`,
-      sizes: '76x76',
-    },
-    {
-      rel: 'manifest',
-      href: `/favicons/site.webmanifest`,
-    },
-    {
-      rel: 'mask-icon',
-      href: `/favicons/safari-pinned-tab.svg`,
-      color: '#000000',
-    },
-    {
-      rel: 'icon',
-      type: 'image/png',
-      sizes: '32x32',
-      href: `/favicons/favicon-32x32.png`,
-    },
-    {
-      rel: 'icon',
-      type: 'image/png',
-      sizes: '16x16',
-      href: `/favicons/favicon-16x16.png`,
-    },
-    {
-      rel: `webmention`,
-      href: `https://webmention.io/thedaviddias.dev/webmention`,
-    },
-    {
-      rel: `pingback`,
-      href: `https://webmention.io/thedaviddias.dev/xmlrpc`,
-    },
-  ],
-}
+import defaultSEO from '../../next-seo.config'
+
 export interface SEOProps {
   title?: string
   description?: string

diff --git a/apps/blog/src/pages/_app.tsx b/apps/blog/src/pages/_app.tsx
@@ -1,14 +1,18 @@
 import type { AppProps } from 'next/app'
 import PlausibleProvider from 'next-plausible'
+import { DefaultSeo } from 'next-seo'
 import { ThemeProvider } from 'next-themes'
 
 import '@/styles/globals.css'
 import '@/styles/prism.css'
 
+import SEO from '../../next-seo.config'
+
 const App = ({ Component, pageProps }: AppProps) => {
   return (
     <PlausibleProvider domain="thedaviddias.dev" trackOutboundLinks={true}>
       <ThemeProvider attribute="class">
+        <DefaultSeo {...SEO} />
         <Component {...pageProps} />
       </ThemeProvider>
     </PlausibleProvider>