[seo] add keywords support

locale/en/translations.suml

@@ -1486,3 +1486,31 @@ calendar:
 ukraine:
     header: 'We stand with Ukraine.'
     link: '{https://supportukrainenow.org=Here''s how you can support them.}'
+
+seo:
+    keywords:
+        - 'pronouns'
+        - 'inclusive language'
+        - 'inclusivity'
+        - 'diversity'
+        - 'dei'
+        - 'queer'
+        - 'lgbtq'
+        - 'lgbt'
+        - 'lgbtq page'
+        - 'lgbt page'
+        - 'not binary'
+        - 'non binary'
+        - 'nonbinary'
+        - 'non-binary'
+        - 'gay rights'
+        - 'trans rights'
+        - 'lesbian'
+        - 'gay'
+        - 'transgender'
+        - 'trans'
+        - 'lgbtq youth'
+        - 'lgbt youth'
+        - 'i support lgbt'
+        - 'i support lgbtq'
+        - 'i support gay rights'

nuxt.config.js

@@ -13,6 +13,7 @@ const locale = config.locale;
 const locales = buildLocaleList(locale);
 const title = translations.title;
 const description = translations.description;
+const keywords = (translations?.seo?.keywords || []).join(', ')
 const banner = process.env.BASE_URL + '/api/banner/zaimki.png';
 const colour = '#C71585';
 const logo = fs.readFileSync(__dirname + '/static/logo/logo.svg').toString('utf-8').replace('/></svg>', 'fill="currentColor"/></svg>');
@@ -116,6 +117,8 @@ export default {
 
             { hid: 'description', name: 'description', content: description },
 
+            { hid: 'keywords', name: 'keywords', content: keywords },
+
             { name: 'viewport', content: 'width=device-width, initial-scale=1' },
             { hid: 'apple-mobile-web-app-title', name: 'apple-mobile-web-app-title', content: title },
             { hid: 'theme-color', name: 'theme-color', content: colour },
@@ -231,6 +234,7 @@ export default {
         PLAUSIBLE_API_HOST: process.env.PLAUSIBLE_API_HOST,
         HEARTBEAT_LINK: process.env.HEARTBEAT_LINK,
         VERSION: version,
+        KEYWORDS: keywords,
     },
     serverMiddleware: [
         '~/server/no-ssr.js',

routes/profile.vue

@@ -195,6 +195,8 @@
 <script>
     import { head } from "../src/helpers";
     import opinions from '../src/opinions';
+    import {buildPronoun} from "../src/buildPronoun";
+    import {pronouns} from "../src/data";
 
     export default {
         data() {
@@ -304,11 +306,21 @@
             },
         },
         head() {
+            const mainPronoun = buildPronoun(pronouns, this.config.profile.flags.defaultPronoun);
+
             return head({
                 title: `@${this.username}`,
                 description: this.profile ? this.profile.description : null,
                 banner: `api/banner/@${this.username}.png`,
                 noindex: true,
+                keywords: this.profile ? this.profile.flags.map(flag => {
+                    const flagName = process.env.FLAGS[flag];
+                    return flag.startsWith('-')
+                        ? flagName
+                        : mainPronoun.format(
+                            this.$t(`flags.${flagName.replace(/ /g, '_').replace(/'/g, `*`)}`, {}, false) || flagName
+                        );
+                }) : undefined,
             });
         },
     }

src/helpers.js

@@ -18,7 +18,7 @@ export const buildList = (fn, ...args) => {
     return list;
 }
 
-export const head = ({title, description, banner, noindex = false}) => {
+export const head = ({title, description, banner, noindex = false, keywords}) => {
     const meta = { meta: [] };
 
     if (title) {
@@ -48,6 +48,10 @@ export const head = ({title, description, banner, noindex = false}) => {
         meta.meta.push({ hid: 'robots', name: 'robots', content: 'noindex'});
     }
 
+    if (keywords) {
+        meta.meta.push({ hid: 'keywords', name: 'keywords', content: process.env.KEYWORDS + ', ' + keywords.join(', ')});
+    }
+
     return meta;
 }