feat: seo meta + page titles

client/components/admin/admin-general.vue

@@ -49,15 +49,6 @@
                       v-model='config.description'
                       prepend-icon='explore'
                       )
-                    v-text-field(
-                      outline
-                      label='Site Keywords'
-                      :counter='255'
-                      v-model='config.keywords'
-                      prepend-icon='explore'
-                      hint='Comma-separated list of keywords.'
-                      persistent-hint
-                      )
                     v-select.mt-2(
                       outline
                       label='Meta Robots'
@@ -170,7 +161,6 @@ export default {
         host: '',
         title: '',
         description: '',
-        keywords: '',
         robots: [],
         ga: '',
         company: '',
@@ -196,7 +186,6 @@ export default {
             host: this.config.host || '',
             title: this.config.title || '',
             description: this.config.description || '',
-            keywords: this.config.keywords || '',
             robots: this.config.robots || [],
             ga: this.config.ga || '',
             company: this.config.company || '',

client/components/common/loader.vue

@@ -51,6 +51,8 @@ export default {
 
 <style lang='scss'>
   .loader-dialog {
+    transition: all .4s ease;
+
     .atom-spinner.is-inline {
       display: inline-block;
     }

client/components/login.vue

@@ -350,10 +350,10 @@ export default {
 
     @include keyframes(loginBgReveal) {
       0% {
-        background-position-y: 0;
+        background-position-x: 0;
       }
       100% {
-        background-position-y: -800px;
+        background-position-x: 800px;
       }
     }
 

client/graph/admin/site/site-mutation-save-config.gql

@@ -2,7 +2,6 @@ mutation (
   $host: String!
   $title: String!
   $description: String!
-  $keywords: String!
   $robots: [String]!
   $ga: String!
   $company: String!
@@ -17,7 +16,6 @@ mutation (
       host: $host,
       title: $title,
       description: $description,
-      keywords: $keywords,
       robots: $robots,
       ga: $ga,
       company: $company,

client/graph/admin/site/site-query-config.gql

@@ -4,7 +4,6 @@
       host
       title
       description
-      keywords
       robots
       ga
       company

dev/templates/master.pug

@@ -7,7 +7,17 @@ html
     meta(name='theme-color', content='#333333')
     meta(name='msapplication-TileColor', content='#333333')
     meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
-    title= config.title
+
+    title= pageMeta.title + ' | ' + config.title
+
+    //- SEO / OpenGraph
+    meta(name='description', content=pageMeta.description)
+    meta(property='og:title', content=pageMeta.title)
+    meta(property='og:type', content='website')
+    meta(property='og:description', content=pageMeta.description)
+    meta(property='og:image', content=pageMeta.image)
+    meta(property='og:url', content=pageMeta.url)
+    meta(property='og:site_name', content=config.title)
 
     //- Favicon
     each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
@@ -17,9 +27,9 @@ html
       link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
     link(rel='manifest', href='/manifest.json')
 
-    //- Site Lang
+    //- Site Properties
     script.
-      var siteConfig = !{JSON.stringify({ title: config.title, theme: config.theming.theme, darkMode: config.theming.darkMode, lang: config.lang.code })}
+      var siteConfig = !{JSON.stringify({ title: config.title, theme: config.theming.theme, darkMode: config.theming.darkMode, lang: config.lang.code, company: config.company })}
 
     //- CSS
     link(type='text/css', rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Roboto:400,500,700|Varela+Round|Source+Code+Pro:400,700|Material+Icons')

server/controllers/auth.js

@@ -3,11 +3,13 @@
 const express = require('express')
 const router = express.Router()
 const moment = require('moment')
+const _ = require('lodash')
 
 /**
  * Login form
  */
 router.get('/login', function (req, res, next) {
+  _.set(res.locals, 'pageMeta.title', 'Login')
   res.render('login')
 })
 
@@ -23,6 +25,7 @@ router.get('/logout', function (req, res) {
  * Register form
  */
 router.get('/register', async (req, res, next) => {
+  _.set(res.locals, 'pageMeta.title', 'Register')
   const localStrg = await WIKI.models.authentication.getStrategy('local')
   if (localStrg.selfRegistration) {
     res.render('register')

server/controllers/common.js

 const express = require('express')
 const router = express.Router()
 const pageHelper = require('../helpers/page')
+const _ = require('lodash')
 
 /* global WIKI */
 
@@ -16,10 +17,13 @@ router.get(['/e', '/e/*'], async (req, res, next) => {
     isPrivate: false
   })
   if (page) {
+    _.set(res.locals, 'pageMeta.title', `Edit ${page.title}`)
+    _.set(res.locals, 'pageMeta.description', page.description)
     page.mode = 'update'
     page.isPublished = (page.isPublished === true || page.isPublished === 1) ? 'true' : 'false'
     page.content = Buffer.from(page.content).toString('base64')
   } else {
+    _.set(res.locals, 'pageMeta.title', `New Page`)
     page = {
       path: pageArgs.path,
       localeCode: pageArgs.locale,
@@ -35,6 +39,7 @@ router.get(['/e', '/e/*'], async (req, res, next) => {
  * Administration
  */
 router.get(['/a', '/a/*'], (req, res, next) => {
+  _.set(res.locals, 'pageMeta.title', 'Admin')
   res.render('admin')
 })
 
@@ -42,6 +47,7 @@ router.get(['/a', '/a/*'], (req, res, next) => {
  * Profile
  */
 router.get(['/p', '/p/*'], (req, res, next) => {
+  _.set(res.locals, 'pageMeta.title', 'User Profile')
   res.render('profile')
 })
 
@@ -57,6 +63,8 @@ router.get(['/h', '/h/*'], async (req, res, next) => {
     isPrivate: false
   })
   if (page) {
+    _.set(res.locals, 'pageMeta.title', page.title)
+    _.set(res.locals, 'pageMeta.description', page.description)
     res.render('history', { page })
   } else {
     res.redirect(`/${pageArgs.path}`)
@@ -75,6 +83,8 @@ router.get(['/s', '/s/*'], async (req, res, next) => {
     isPrivate: false
   })
   if (page) {
+    _.set(res.locals, 'pageMeta.title', page.title)
+    _.set(res.locals, 'pageMeta.description', page.description)
     res.render('source', { page })
   } else {
     res.redirect(`/${pageArgs.path}`)
@@ -93,6 +103,8 @@ router.get('/*', async (req, res, next) => {
     isPrivate: false
   })
   if (page) {
+    _.set(res.locals, 'pageMeta.title', page.title)
+    _.set(res.locals, 'pageMeta.description', page.description)
     const sidebar = await WIKI.models.navigation.getTree({ cache: true })
     res.render('page', { page, sidebar })
   } else if (pageArgs.path === 'home') {

server/graph/resolvers/site.js

@@ -30,7 +30,6 @@ module.exports = {
         WIKI.config.company = args.company
         WIKI.config.seo = {
           description: args.description,
-          keywords: args.keywords,
           robots: args.robots,
           ga: args.ga
         }

server/graph/schemas/site.graphql

@@ -27,7 +27,6 @@ type SiteMutation {
     host: String!
     title: String!
     description: String!
-    keywords: String!
     robots: [String]!
     ga: String!
     company: String!
@@ -47,7 +46,6 @@ type SiteConfig {
   host: String!
   title: String!
   description: String!
-  keywords: String!
   robots: [String]!
   ga: String!
   company: String!

server/master.js

@@ -100,6 +100,12 @@ module.exports = async () => {
   app.locals.moment = require('moment')
   app.locals.moment.locale(WIKI.config.lang.code)
   app.locals.config = WIKI.config
+  app.locals.pageMeta = {
+    title: '',
+    description: WIKI.config.description,
+    image: '',
+    url: '/'
+  }
 
   // ----------------------------------------
   // HMR (Dev Mode Only)

server/middlewares/seo.js

@@ -15,6 +15,7 @@ module.exports = function (req, res, next) {
     let query = req.url.slice(req.path.length) || ''
     res.redirect(301, req.path.slice(0, -1) + query)
   } else {
+    _.set(res.locals, 'pageMeta.url', `${WIKI.config.host}${req.path}`)
     return next()
   }
 }

server/setup.js

@@ -133,7 +133,6 @@ module.exports = () => {
       _.set(WIKI.config, 'public', false)
       _.set(WIKI.config, 'seo', {
         description: '',
-        keywords: '',
         robots: ['index', 'follow'],
         ga: ''
       })

server/views/master.pug

@@ -7,7 +7,17 @@ html
     meta(name='theme-color', content='#333333')
     meta(name='msapplication-TileColor', content='#333333')
     meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
-    title= config.title
+
+    title= pageMeta.title + ' | ' + config.title
+
+    //- SEO / OpenGraph
+    meta(name='description', content=pageMeta.description)
+    meta(property='og:title', content=pageMeta.title)
+    meta(property='og:type', content='website')
+    meta(property='og:description', content=pageMeta.description)
+    meta(property='og:image', content=pageMeta.image)
+    meta(property='og:url', content=pageMeta.url)
+    meta(property='og:site_name', content=config.title)
 
     //- Favicon
     each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
@@ -17,9 +27,9 @@ html
       link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
     link(rel='manifest', href='/manifest.json')
 
-    //- Site Lang
+    //- Site Properties
     script.
-      var siteConfig = !{JSON.stringify({ title: config.title, theme: config.theming.theme, darkMode: config.theming.darkMode, lang: config.lang.code })}
+      var siteConfig = !{JSON.stringify({ title: config.title, theme: config.theming.theme, darkMode: config.theming.darkMode, lang: config.lang.code, company: config.company })}
 
     //- CSS
     link(type='text/css', rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Roboto:400,500,700|Varela+Round|Source+Code+Pro:400,700|Material+Icons')