Add helmet to pages

components/helmet.tsx

@@ -0,0 +1,73 @@
+import NextHead from 'next/head';
+import siteConfig from '../content/site.json';
+
+type HelmetProps = {
+  title?: string;
+  keywords?: string[];
+  canonical?: string;
+  description?: string;
+};
+
+const Helmet = (props: HelmetProps) => (
+  <NextHead>
+    <meta charSet='UTF-8' />
+
+    <title>{props.title || siteConfig.title}</title>
+    <meta name='description' content={props.description || siteConfig.description} />
+
+    <meta name='author' content={siteConfig.author} />
+    <meta name='keywords' content={props.keywords ? props.keywords.join(',') : siteConfig.keywords.join(',')} />
+
+    <meta name='viewport'
+          content='width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0' />
+    {props.canonical && <link rel='canonical' href={props.canonical} />}
+    <meta httpEquiv='Content-Language' content='en' />
+
+    <meta property='og:title' content={props.title || siteConfig.title} />
+    <meta property='og:description' content={props.description || siteConfig.description} />
+    <meta property='og:image' content={`${siteConfig.url.web}${siteConfig.logoSquare}`} />
+    <meta property='og:url' content={siteConfig.url.web} />
+    <meta property='og:type' content='website' />
+    <meta property='article:publisher' content={`https://facebook.com/${siteConfig.facebook}`} />
+    <meta property='og:site_name' content={siteConfig.name} />
+    <meta property='article:author' content={siteConfig.author} />
+
+    <meta name='twitter:card' content='summary' />
+    <meta name='twitter:site' content={`@${siteConfig.twitter}`} />
+    <meta name='twitter:title' content={props.title || siteConfig.title} />
+    <meta name='twitter:description' content={props.description || siteConfig.description} />
+    <meta name='twitter:image' content={`${siteConfig.url.web}${siteConfig.logoSquare}`} />
+    <meta name='twitter:image:alt' content='roadmap.sh' />
+
+    <meta name='mobile-web-app-capable' content='yes' />
+    <meta name='apple-mobile-web-app-capable' content='yes' />
+    <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
+    <link rel='apple-touch-icon' sizes='180x180' href='/manifest/apple-touch-icon.png' />
+    <meta name='msapplication-TileColor' content='#101010' />
+    <meta name='theme-color' content='#848a9a' />
+
+    <link rel='manifest' href='/manifest/manifest.json' />
+    <link rel='icon' type='image/png' sizes='32x32' href='/manifest/icon32.png' />
+    <link rel='icon' type='image/png' sizes='16x16' href='/manifest/icon16.png' />
+    <link rel='shortcut icon' href='/manifest/favicon.ico' type='image/x-icon' />
+    <link rel='icon' href='/manifest/favicon.ico' type='image/x-icon' />
+
+    { /* Global Site Tag (gtag.js) - Google Analytics */}
+    {process.env.GA_SECRET && (
+      <>
+        <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_SECRET}`} />
+        <script dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${process.env.GA_SECRET}');
+          `
+        }} />
+      </>
+    )}
+
+  </NextHead>
+);
+
+export default Helmet;

content/site.json

@@ -37,6 +37,13 @@
     "guide to becoming a developer",
     "sre roadmap",
     "sre",
-    "operations roadmap"
+    "operations roadmap",
+    "qa roadmap",
+    "android roadmap",
+    "android developer roadmap",
+    "react roadmap",
+    "react developer roadmap",
+    "dba roadmap",
+    "postgresql dba roadmap"
   ]
 }

pages/[roadmap]/index.tsx

@@ -7,6 +7,7 @@ import { Footer } from '../../components/footer';
 import { PageHeader } from '../../components/page-header';
 import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
 import MdRenderer from '../../components/md-renderer';
+import Helmet from '../../components/helmet';
 
 type RoadmapProps = {
   roadmap: RoadmapType;
@@ -52,6 +53,11 @@ export default function Roadmap(props: RoadmapProps) {
   return (
     <Box bg='white' minH='100vh'>
       <GlobalHeader />
+      <Helmet
+        title={roadmap?.seo?.title || roadmap.title}
+        description={roadmap?.seo?.description || roadmap.description}
+        keywords={roadmap?.seo.keywords || []}
+      />
       <Box mb='60px'>
         <PageHeader
           title={roadmap.title}

pages/about.tsx

@@ -5,11 +5,16 @@ import { OpensourceBanner } from '../components/opensource-banner';
 import { UpdatesBanner } from '../components/updates-banner';
 import { Footer } from '../components/footer';
 import MdRenderer from '../components/md-renderer';
+import Helmet from '../components/helmet';
 
 function AboutHeader() {
   return (
-    <Box pt={['45px', '45px', '70px']} pb={['45px', '45px', '55px']} borderBottomWidth={1} mb='30px' textAlign='left' position='static'
+    <Box pt={['45px', '45px', '70px']} pb={['45px', '45px', '55px']} borderBottomWidth={1} mb='30px' textAlign='left'
+         position='static'
          top='10px'>
+      <Helmet
+        title={'About roadmap.sh'}
+      />
       <Container maxW='container.md' position='relative' textAlign='left'>
         <Flex alignItems='center'>
           <Image d={['none', 'none', 'block']} src='/kamran.jpeg' h='170px' rounded='10px' mr='25px' />

pages/guides/[guide].tsx

@@ -7,6 +7,7 @@ import { ContentPageHeader } from '../../components/content-page-header';
 import MdRenderer from '../../components/md-renderer';
 import { getAllGuides, getGuideById, GuideType } from '../../lib/guide';
 import siteConfig from '../../content/site.json';
+import Helmet from '../../components/helmet';
 
 type GuideProps = {
   guide: GuideType;
@@ -19,6 +20,10 @@ export default function Guide(props: GuideProps) {
   return (
     <Box bg='white' minH='100vh'>
       <GlobalHeader />
+      <Helmet
+        title={guide.title}
+        description={guide.description}
+      />
       <Box mb='60px'>
         <ContentPageHeader
           title={guide.title}

pages/guides/index.tsx

@@ -8,6 +8,7 @@ import { Footer } from '../../components/footer';
 import { GuideGridItem } from './components/guide-grid-item';
 import { PageHeader } from '../../components/page-header';
 import { getAllGuides, GuideType } from '../../lib/guide';
+import Helmet from '../../components/helmet';
 
 type GuidesProps = {
   guides: GuideType[]
@@ -22,6 +23,10 @@ export default function Guides(props: GuidesProps) {
   return (
     <Box bg='white' minH='100vh'>
       <GlobalHeader />
+      <Helmet
+        title={'Visual Guides'}
+        description={'Succinct graphical explanations to engineering topics.'}
+      />
       <Box mb='60px'>
         <PageHeader
           title={'Visual Guides'}

pages/index.tsx

@@ -12,6 +12,7 @@ import { getFeaturedRoadmaps, RoadmapType } from '../lib/roadmap';
 import { getAllGuides, GuideType } from '../lib/guide';
 import { getAllVideos, VideoType } from '../lib/video';
 import siteConfig from '../content/site.json';
+import Helmet from '../components/helmet';
 
 type HomeProps = {
   roadmaps: RoadmapType[];
@@ -25,6 +26,7 @@ export default function Home(props: HomeProps) {
   return (
     <Box bg='white' minH='100vh'>
       <GlobalHeader />
+      <Helmet title='Developer Roadmaps' />
       <Box>
         <Container maxW='container.md'>
           <Box py={['23px', '23px', '35px']}>

pages/privacy.tsx

@@ -5,6 +5,7 @@ import { OpensourceBanner } from '../components/opensource-banner';
 import { UpdatesBanner } from '../components/updates-banner';
 import { Footer } from '../components/footer';
 import MdRenderer from '../components/md-renderer';
+import Helmet from '../components/helmet';
 
 export default function Privacy() {
   const PrivacyContent = require(`../content/pages/privacy.md`).default;
@@ -12,6 +13,7 @@ export default function Privacy() {
   return (
     <Box bg='gray.50' minH='100vh'>
       <GlobalHeader />
+      <Helmet  title={'Privacy Policy - roadmap.sh'} />
       <Box mb='60px'>
         <Container maxW={'container.md'} position='relative'>
           <MdRenderer>

pages/roadmaps/index.tsx

@@ -6,6 +6,7 @@ import { Footer } from '../../components/footer';
 import { PageHeader } from '../../components/page-header';
 import { RoadmapGridItem } from './components/roadmap-grid-item';
 import { getAllRoadmaps, RoadmapType } from '../../lib/roadmap';
+import Helmet from '../../components/helmet';
 
 type RoadmapsProps = {
   roadmaps: RoadmapType[];
@@ -17,6 +18,10 @@ export default function Roadmaps(props: RoadmapsProps) {
   return (
     <Box bg='white' minH='100vh'>
       <GlobalHeader />
+      <Helmet
+        title={'Developer Roadmaps'}
+        description={'Step by step guides and paths to learn different tools or technologies'}
+      />
       <Box mb='60px'>
         <PageHeader
           title={'Developer Roadmaps'}

pages/signup.tsx

@@ -18,6 +18,7 @@ import { UpdatesBanner } from '../components/updates-banner';
 import { Footer } from '../components/footer';
 import { CheckCircleIcon } from '@chakra-ui/icons';
 import siteConfig from '../content/site.json';
+import Helmet from '../components/helmet';
 
 function FreeSignUp() {
   return (
@@ -87,6 +88,7 @@ export default function SignUp() {
   return (
     <Box bg='white' minH='100vh'>
       <GlobalHeader />
+      <Helmet title={'Sign Up: Be a part of the community'} />
       <Box mb='60px'>
         <Container maxW={'container.md'} position='relative'>
           <SimpleGrid columns={[1, 1, 2]} spacing='15px' my={['30px', '30px', '80px']}>

pages/terms.tsx

@@ -5,6 +5,7 @@ import { OpensourceBanner } from '../components/opensource-banner';
 import { UpdatesBanner } from '../components/updates-banner';
 import { Footer } from '../components/footer';
 import MdRenderer from '../components/md-renderer';
+import Helmet from '../components/helmet';
 
 export default function Terms() {
   const TermsContent = require(`../content/pages/terms.md`).default;
@@ -12,6 +13,7 @@ export default function Terms() {
   return (
     <Box bg='gray.50' minH='100vh'>
       <GlobalHeader />
+      <Helmet title={'Terms – roadmap.sh'} />
       <Box mb='60px'>
         <Container maxW={'container.md'} position='relative'>
           <MdRenderer>

pages/watch/index.tsx

@@ -6,6 +6,7 @@ import { Footer } from '../../components/footer';
 import { VideoGridItem } from './components/video-grid-item';
 import { PageHeader } from '../../components/page-header';
 import { getAllVideos, VideoType } from '../../lib/video';
+import Helmet from '../../components/helmet';
 
 type VideosProps = {
   videos: VideoType[]
@@ -17,6 +18,7 @@ export default function Watch(props: VideosProps) {
   return (
     <Box bg='white' minH='100vh'>
       <GlobalHeader />
+      <Helmet title='Watch' description='Graphical video demonstrations on development topics' />
       <Box mb='60px'>
         <PageHeader
           title={'Watch'}

public/manifest/manifest.json

@@ -0,0 +1,27 @@
+{
+  "dir": "ltr",
+  "lang": "en",
+  "name": "Roadmap",
+  "scope": "/",
+  "display": "standalone",
+  "start_url": "https://roadmap.sh/",
+  "short_name": "Roadmap",
+  "theme_color": "#EDD07E",
+  "description": "Roadmaps to becoming a Modern Developer – roadmap.sh",
+  "orientation": "any",
+  "background_color": "#101010",
+  "related_applications": [],
+  "prefer_related_applications": false,
+  "icons": [
+    {
+      "src": "/manifest/icon152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "/manifest/icon196.png",
+      "sizes": "196x196",
+      "type": "image/png"
+    }
+  ]
+}