feat: add proper page titles and meta descriptions

Author: recurser

locales/en/common.json

@@ -1,2 +1,4 @@
 {
+  "meta_description": "A powerful, open-source, privacy-friendly online toolkit for developers, with a focus on security.",
+  "page_title_suffix": " - string.is - a privacy-friendly toolkit for developers"
 }

locales/en/pages-about.json

@@ -12,12 +12,12 @@
   "li_goal_open_source": "It should be open-source.",
   "li_goal_strict_csp": "It should have a strict <0>Content Security Policy</0>.",
   "page_heading": "About string.is",
-  "page_title": "About string.is",
+  "page_title": "About",
   "para_icon": "The icon is based on <0>developer</0> by <1>Achmad Mulyana</1>.",
   "para_acknowledgements": "string.is wouldn\u2019t exist without the following open-source libraries:",
   "para_built": "string.is was built to meet those goals, and provide a secure, trustworthy string conversion tool.",
   "para_contact_twitter": "Twitter: <0>@string__is</0> or <1>@davemetrics</1>",
   "para_goals": "I started to wonder what the ideal conversion tool might look like, and came up with some simple goals:",
-  "para_intro": "string.is is an <0>open-source, privacy-friendly</0> toolkit for developers.",
+  "para_intro": "string.is is an <0>open-source, privacy-friendly</0> toolkit for developers, with a focus on security.",
   "para_paranoid": "Like most developers, I need to perform the same string operations regularly, but I\u2019m paranoid about pasting sensitive data into third-party online tools."
 }

locales/en/pages-home.json

@@ -1,3 +1,4 @@
 {
-  "page_title": "string.is"
+  "page_heading": "Online Developer Toolkit",
+  "page_title": "string.is - a privacy-friendly toolkit for developers"
 }

locales/en/pages-privacy.json

@@ -9,6 +9,7 @@
   "li_dont_pay": "We don\u2019t request or accept payments.",
   "li_dont_personal": "We don\u2019t collect personal information.",
   "li_dont_share": "We don\u2019t share information with advertising companies or social networks.",
+  "meta_description": "TL;DR: we don\u2019t use cookies and we don\u2019t collect any personal data. We don\u2019t provide accounts or accept payments. We are committed to complying with GDPR, CCPA, PECR and other privacy regulations.",
   "page_heading": "Privacy Policy",
   "page_title": "Privacy Policy",
   "para_changes": "We may update this policy as needed to comply with relevant regulations and reflect any new practices. The complete change history is <0>available on Github</0>.",

locales/en/pages-security.json

@@ -12,6 +12,7 @@
   "intro": "string.is has been designed from the ground up to protect your privacy. Some of the measures taken to ensure privacy include:",
   "local_content": "All conversion operations happen <0>client-side</0> on your browser. At no time is the data you provide sent to any third parties.",
   "local_heading": "Your data never leaves your browser",
+  "meta_description": "string.is has been designed from the ground up to protect your privacy. The source code is publicly available, and your data never leaves your browser.",
   "open_source_content": "The source code is publicly available on <0>Github</0>, so that you can verify for yourself how your data is handled.",
   "open_source_heading": "Open source",
   "page_heading": "Security",

locales/en/pages-terms.json

@@ -1,4 +1,5 @@
 {
+  "meta_description": "These are the Terms of Use governing the use of this Service and the agreement that operates between You and the Company. These Terms of Use set out the rights and obligations of all users regarding the use of the Service.",
   "page_heading": "Terms of Use",
   "page_title": "Terms of Use"
 }

pages/index.tsx

@@ -1,4 +1,5 @@
 import type { ReactElement } from 'react'
+import Trans from 'next-translate/Trans'
 
 import { Application } from '@components/layout'
 import { Home as SubHome } from '@pages/Home'
@@ -17,5 +18,10 @@ export default function Home() {
  * @param page - The React page comonent.
  */
 Home.getLayout = (page: ReactElement) => (
-  <Application maxWidth={1600}>{page}</Application>
+  <Application
+    maxWidth={1600}
+    pageHeading={<Trans i18nKey={`pages-home:page_heading`} />}
+  >
+    {page}
+  </Application>
 )

src/components/pages/About.tsx

@@ -22,7 +22,12 @@ export const About = () => {
   return (
     <Pane display="flex">
       <Head>
-        <title>{t('page_title')}</title>
+        <title>
+          {t('page_title')}
+          {t('common:page_title_suffix')}
+        </title>
+        <meta content={t('page_title')} key="title" property="og:title" />
+        <meta content={t('common:meta_description')} name="description" />
       </Head>
 
       <Card title={t('page_heading')}>

src/components/pages/Converter.tsx

@@ -1,9 +1,11 @@
 import { Link, Pane, Text, majorScale } from 'evergreen-ui'
 import { ReactElement, useEffect } from 'react'
+import Head from 'next/head'
 import Trans from 'next-translate/Trans'
 
 import type { Converter as ConverterType } from '@lib/converters'
 import { Home } from '@pages/Home'
+import { removeTags } from '@lib/utilities/String'
 import { useBreakpoints } from '@services/Responsive'
 import { useConverterContext } from '@contexts/ConverterContext'
 import useTranslation from 'next-translate/useTranslation'
@@ -37,6 +39,21 @@ export const Converter = ({ converter }: Props): ReactElement => {
 
   return (
     <>
+      <Head>
+        <title>
+          {t(`pages-converter:${converter.id}-heading`)}
+          {t('common:page_title_suffix')}
+        </title>
+        <meta
+          content={t(`pages-converter:${converter.id}-heading`)}
+          key="title"
+          property="og:title"
+        />
+        <meta
+          content={removeTags(t(`pages-converter:${converter.id}-intro`))}
+          name="description"
+        />
+      </Head>
       <Pane
         alignSelf="center"
         marginBottom={isMobile ? 0 : majorScale(3)}
@@ -58,7 +75,7 @@ export const Converter = ({ converter }: Props): ReactElement => {
         </Text>
       </Pane>
 
-      <Home />
+      <Home isRootPage={false} />
     </>
   )
 }

src/components/pages/Home.tsx

@@ -4,6 +4,14 @@ import { useState } from 'react'
 import Head from 'next/head'
 import useTranslation from 'next-translate/useTranslation'
 
+interface Props {
+  /**
+   * If true, this component is embedded in the '/' root page. If false.
+   * it is embedded in a landing page for a specific converter.
+   */
+  isRootPage?: boolean
+}
+
 /**
  * Renders the 'convert' page, which is basically the heart of the
  * application. It provides an input textarea, a conversion selector,
@@ -21,16 +29,20 @@ import {
 import { Card } from '@components/layout/Card'
 import { useBreakpoints } from '@services/Responsive'
 
-export const Home = () => {
+export const Home = ({ isRootPage }: Props) => {
   const { t } = useTranslation('pages-home')
   const { isMobile } = useBreakpoints()
   const [focusOutput, setFocusOutput] = useState<boolean>(false)
 
   return (
     <Pane display="flex" gap={majorScale(2)}>
-      <Head>
-        <title>{t('page_title')}</title>
-      </Head>
+      {isRootPage ? (
+        <Head>
+          <title>{t('page_title')}</title>
+          <meta content={t('page_title')} key="title" property="og:title" />
+          <meta content={t('common:meta_description')} name="description" />
+        </Head>
+      ) : null}
 
       <Card>
         <Pane
@@ -64,3 +76,7 @@ export const Home = () => {
     </Pane>
   )
 }
+
+Home.defaultProps = {
+  isRootPage: true,
+}