Add better encapsulation for SEO snippets

page-factories/makeGameTierlistPage.js → page-factories/game-tierlist/makeGameTierlistPage.js

@@ -1,31 +1,18 @@
 import React from 'react'
 
-import CommonMetaTags from '../components/seo/CommonMetaTags'
-import GameTierlist from '../components/templates/GameTierlist'
+import CommonMetaTags from '../../components/seo/CommonMetaTags'
+import GameTierlist from '../../components/templates/GameTierlist'
 
-const getSquaredLetter =
-  letter => {
-    if (letter === '-') return '➖'
-    if (letter === '+') return '✚'
-    const unicode = String.fromCharCode(55356)
-    const squared = String.fromCharCode(56688 + letter.charCodeAt() - 65)
-    return `${unicode}${squared}`
-  }
-const getSquaredLetters =
-  string => string.split('').map(getSquaredLetter).join('')
+import { getTitle, getDescription } from './seo'
 
 export default gameSlug => {
   const TierlistPage = ({ gameData, nextGameSlug, prevGameSlug }) => {
-    const title = `✅ Smash Tier List 🔥 ${gameData.shortName} 🎮`
-    const description = gameData.rosterGroupedByTier.slice(0, 5).map(
-      ({ tier, characters }) =>
-        `${getSquaredLetters(tier.name)} ${characters.slice(0, 3).map(c => c.name).join(' ')}` +
-         (characters.length > 3 ? '...' : '')
-    ).join(' ')
-
     return (
       <>
-        <CommonMetaTags title={title} description={description} />
+        <CommonMetaTags
+          title={getTitle(gameData)}
+          description={getDescription(gameData)}
+        />
         <GameTierlist
           gameData={gameData}
           nextGameSlug={nextGameSlug}

page-factories/game-tierlist/seo.js

@@ -0,0 +1,18 @@
+const getSquaredLetter =
+  letter => {
+    if (letter === '-') return '➖'
+    if (letter === '+') return '✚'
+    const unicode = String.fromCharCode(55356)
+    const squared = String.fromCharCode(56688 + letter.charCodeAt() - 65)
+    return `${unicode}${squared}`
+  }
+const getSquaredLetters =
+  string => string.split('').map(getSquaredLetter).join('')
+
+export const getTitle = gameData => `✅ Smash Tier List 🔥 ${gameData.shortName} 🎮`
+
+export const getDescription = gameData => gameData.rosterGroupedByTier.slice(0, 5).map(
+  ({ tier, characters }) =>
+    `${getSquaredLetters(tier.name)} ${characters.slice(0, 3).map(c => c.name).join(' ')}` +
+      (characters.length > 3 ? '...' : '')
+).join(' ')

pages/index.js

@@ -1,2 +1,2 @@
-import makeGameTierlistPage from '../page-factories/makeGameTierlistPage'
+import makeGameTierlistPage from '../page-factories/game-tierlist/makeGameTierlistPage'
 export default makeGameTierlistPage('ssbu')

pages/ssb.js

@@ -1,2 +1,2 @@
-import makeGameTierlistPage from '../page-factories/makeGameTierlistPage'
+import makeGameTierlistPage from '../page-factories/game-tierlist/makeGameTierlistPage'
 export default makeGameTierlistPage('ssb')

pages/ssb4.js

@@ -1,2 +1,2 @@
-import makeGameTierlistPage from '../page-factories/makeGameTierlistPage'
+import makeGameTierlistPage from '../page-factories/game-tierlist/makeGameTierlistPage'
 export default makeGameTierlistPage('ssb4')

pages/ssbb.js

@@ -1,2 +1,2 @@
-import makeGameTierlistPage from '../page-factories/makeGameTierlistPage'
+import makeGameTierlistPage from '../page-factories/game-tierlist/makeGameTierlistPage'
 export default makeGameTierlistPage('ssbb')

pages/ssbm.js

@@ -1,2 +1,2 @@
-import makeGameTierlistPage from '../page-factories/makeGameTierlistPage'
+import makeGameTierlistPage from '../page-factories/game-tierlist/makeGameTierlistPage'
 export default makeGameTierlistPage('ssbm')