Add meta tags to pages

src/app.ts

@@ -7,6 +7,7 @@ import cookieParser from 'cookie-parser';
 import pageRouter from './routes/index.route';
 import authRouter from './routes/auth/index.route';
 import apiRouter from './routes/api/index.route';
+import { SITE_TITLE } from './utils/constant.util';
 
 // express app
 const app = express();
@@ -18,7 +19,7 @@ app.engine(
     extname: '.hbs',
     defaultLayout: 'main.view.hbs',
     helpers: {
-      title: 'Spotify Data Card',
+      siteTitle: SITE_TITLE,
       areEqual: (a: any, b: any) => a === b
     }
   })

src/controllers/api/card.controller.ts

@@ -6,7 +6,7 @@ import CardDeleteRequestQueryParams from '../../interfaces/card-delete-request-q
 import Track from '../../interfaces/track.interface';
 import Artist from '../../interfaces/artist.interface';
 import DataCardProps from '../../interfaces/data-card-props.interface';
-import { SHORT_URL } from '../../utils/config.util';
+import { SHORT_URL } from '../../utils/constant.util';
 import { boolFromString, boundedIntFromString } from '../../utils/string.util';
 
 const DEFAULT_ITEM_COUNT = 5;

src/controllers/auth/index.controller.ts

@@ -3,7 +3,7 @@ import { RequestHandler, Response } from 'express';
 import Auth from '../../models/auth.model';
 import User from '../../models/user.model';
 import TokenMap from '../../models/token-map.model';
-import { CLIENT_ID } from '../../utils/config.util';
+import { CLIENT_ID } from '../../utils/constant.util';
 import { getBaseUrl, getFullUrl } from '../../utils/url.util';
 import { generateRandomString } from '../../utils/string.util';
 

src/controllers/card-page.controller.ts

@@ -1,5 +1,16 @@
 import { RequestHandler } from 'express';
+import { HbsViewProps } from '../interfaces/hbs-view-props.interface';
+import { SITE_TITLE, SPOTIFY_ICON_PATH } from '../utils/constant.util';
+import { getFullUrl, getUrl } from '../utils/url.util';
 
-export const card_index: RequestHandler = (_req, res) => {
-  res.render('card/index.view.hbs');
+export const card_index: RequestHandler = (req, res) => {
+  const siteUrl = getUrl(req);
+  const pageUrl = getFullUrl(req);
+  const props: HbsViewProps = {
+    pageTitle: `Card View - ${SITE_TITLE}`,
+    pageDescription: "View someone's Spotify data.",
+    pageUrl,
+    siteImage: siteUrl + SPOTIFY_ICON_PATH
+  };
+  res.render('card/index.view.hbs', { ...props });
 };

src/controllers/home-page.controller.ts

@@ -1,5 +1,16 @@
 import { RequestHandler } from 'express';
+import { HbsViewProps } from '../interfaces/hbs-view-props.interface';
+import { SITE_TITLE, SPOTIFY_ICON_PATH } from '../utils/constant.util';
+import { getFullUrl, getUrl } from '../utils/url.util';
 
-export const index: RequestHandler = (_req, res) => {
-  res.render('home/index.view.hbs');
+export const index: RequestHandler = (req, res) => {
+  const siteUrl = getUrl(req);
+  const pageUrl = getFullUrl(req);
+  const props: HbsViewProps = {
+    pageTitle: SITE_TITLE,
+    pageDescription: 'Share your music taste with the world.',
+    pageUrl,
+    siteImage: siteUrl + SPOTIFY_ICON_PATH
+  };
+  res.render('home/index.view.hbs', { ...props });
 };

src/interfaces/hbs-view-props.interface.ts

@@ -0,0 +1,6 @@
+export interface HbsViewProps {
+  pageTitle: string;
+  pageDescription: string;
+  pageUrl: string;
+  siteImage: string;
+}

src/models/auth.model.ts

@@ -1,7 +1,7 @@
 import { stringify } from 'querystring';
 import axios, { AxiosError } from 'axios';
 import AccessTokenResponseBody from '../interfaces/access-token-response-body.interface';
-import { CLIENT_ID, CLIENT_SECRET } from '../utils/config.util';
+import { CLIENT_ID, CLIENT_SECRET } from '../utils/constant.util';
 
 const AUTH_CODE = 'authorization_code';
 const REFRESH_TOKEN = 'refresh_token';

src/server.ts

@@ -9,7 +9,7 @@ import 'dotenv/config';
 import mongoose from 'mongoose';
 import { createClient } from 'redis';
 import app from './app';
-import { MONGODB_URI, REDIS_URI, PORT } from './utils/config.util';
+import { MONGODB_URI, REDIS_URI, PORT } from './utils/constant.util';
 
 const redisClient = createClient({ url: REDIS_URI });
 

src/utils/config.util.ts → src/utils/constant.util.ts

@@ -1,6 +1,12 @@
+// config
 export const CLIENT_ID = process.env.SPOTIFY_CLIENT_ID!;
 export const CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET!;
 export const MONGODB_URI = process.env.MONGODB_CONNECTION_STRING!;
 export const REDIS_URI = process.env.REDIS_CONNECTION_STRING!;
 export const PORT = process.env.PORT || 8080;
+
+// other constants
+export const SITE_TITLE = 'Spotify Data Card';
 export const SHORT_URL = 'iodev.io/s-d-c';
+export const SPOTIFY_WHITE_LOGO_PATH = '/images/Spotify_Logo_RGB_White.png';
+export const SPOTIFY_ICON_PATH = '/images/Spotify_Icon_RGB_Green.png';

src/views/api/card.view.tsx

@@ -6,7 +6,7 @@ import { Item, isTrack } from '../../interfaces/item.interface';
 import StringMap from '../../interfaces/map.interface';
 import { randomIntFromInterval } from '../../utils/number.util';
 import { getBase64DataFromImagePath } from '../../utils/image.util';
-import { SHORT_URL } from '../../utils/config.util';
+import { SHORT_URL, SPOTIFY_WHITE_LOGO_PATH } from '../../utils/constant.util';
 
 // card dimensions
 const BORDER_WIDTH = 2;
@@ -227,7 +227,7 @@ export default function DataCard({
                   src={
                     'data:image/png;base64,' +
                     getBase64DataFromImagePath(
-                      'src/public/images/Spotify_Logo_RGB_White.png'
+                      `src/public${SPOTIFY_WHITE_LOGO_PATH}`
                     )
                   }
                   alt="spotify.com"

src/views/layouts/main.view.hbs

@@ -3,6 +3,35 @@
     <meta charset='UTF-8' />
     <meta http-equiv='X-UA-Compatible' content='IE=edge' />
     <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+    <title>{{pageTitle}}</title>
+    <meta name="description" content="{{pageDescription}}" />
+
+    <!-- open graph metadata -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{pageTitle}}" />
+    <meta
+      property="og:description"
+      content="{{pageDescription}}"
+    />
+    <meta property="og:url" content="{{pageUrl}}" />
+    <meta
+      property="og:image"
+      content="{{siteImage}}"
+    />
+
+    <!-- twitter metadata -->
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:text:title" content="{{pageTitle}}" />
+    <meta
+      name="twitter:description"
+      content="{{pageDescription}}"
+    />
+    <meta name="twitter:url" content="{{pageUrl}}" />
+    <meta
+      name="twitter:image"
+      content="{{siteImage}}"
+    />
+
     <link rel='stylesheet' href='css/main.css' />
     <link rel='stylesheet' href='css/fonts.css' />
     <script
@@ -13,25 +42,23 @@
 
     {{#if (areEqual @exphbs.view 'home/index.view')}}
       <script src='js/home.js' defer></script>
-      <title>{{title}}</title>
     {{/if}}
 
     {{#if (areEqual @exphbs.view 'card/index.view')}}
       <script src='https://momentjs.com/downloads/moment.js' defer></script>
       <script src='js/card.js' defer></script>
-      <title>Card View - {{title}}</title>
     {{/if}}
 
   </head>
   <body>
     {{> loading-view.view}}
     <div class="main-view">
       <div class='container'>
-        <h1 class='title'>{{title}}</h1>
+        <h1 class='title'>{{siteTitle}}</h1>
         <p class='subtitle'>
 
           {{#if (areEqual @exphbs.view 'home/index.view')}}
-            Share your music taste with the world.
+            {{pageDescription}}
           {{/if}}
 
           {{#if (areEqual @exphbs.view 'card/index.view')}}