build(public-assets): added dynamic localisations for i18n, dynamic t…

…itle for template Currently, text assets are loaded through i18n. To reuse the existing functionality for the upcoming edu build, we need i18n to load in a different localisation file based on the `ASSET_VARIANT` environment variable. -injected `ASSET_VARIANT` env variable through webpack `DefinePlugin` configuration and implemented path switching at `i18n.ts` -implemented dynamic title for template used by `HTMLWebpackPlugin`
opengovsg · Mar 15, 2021 · 7996933 · 7996933
1 parent 9a455b3
commit 7996933
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 11 deletions.
diff --git a/public/edu/index.html b/public/edu/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Edu.edu.sg</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta http-equiv="Content-Language" content="en">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/assets/android-chrome-192x192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="/assets/android-chrome-512x512.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
+    <link
+        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
+        rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <div id="root"></div>
+</body>
+
+</html>
diff --git a/public/edu/locales/en/translation.json b/public/edu/locales/en/translation.json
@@ -0,0 +1,48 @@
+{
+  "general": {
+    "emailDomain": "gov.sg",
+    "shortUrlPrefix": "go.gov.sg/",
+    "appTitle": "Go.gov.sg",
+    "appCatchphrase": {
+      "styled": "Trusted short links from <strong><i>education officers</i></strong>",
+      "noStyle": "Trusted short links from education officers"
+    },
+    "appDescription": {
+      "subtitle": "<strong>$t(general.appTitle)</strong> short links can only be created by education officers, so you can be sure it’s from a trustworthy source."
+    },
+    "appSignInPrompt": "Are you a education officer?",
+    "copyright": "© 2020 Open Government Products, ",
+    "copyrightTag": "Government Technology Agency of Singapore",
+    "placeholders": {
+      "email": "jane@data.gov.sg"
+    },
+    "links": {
+      "contribute": "https://go.gov.sg/go-opensource",
+      "directory": "/directory",
+      "faq": "https://guide.go.gov.sg/faq.html",
+      "privacy": "https://guide.go.gov.sg/privacy.html",
+      "terms": "https://guide.go.gov.sg/termsofuse.html",
+      "contact": "https://form.gov.sg/forms/govtech/5c5295edb3d80b0017ac7c81",
+      "builtBy": "https://open.gov.sg",
+      "linkedin": "https://sg.linkedin.com/company/open-government-products",
+      "facebook": "https://www.facebook.com/opengovsg"
+    },
+    "builtBy": "Built by Open Government Products"
+  },
+  "homePage": {
+    "features": {
+      "antiPhishing": {
+        "description": "Shorten your links with a trustworthy $t(general.emailDomain) domain, so your users know they are from a education officer."
+      },
+      "customised": {
+        "description": "Long URLs are hard to remember and take up space. Create and share short links instead."
+      },
+      "analytics": {
+        "description": "Want to know how popular your links are? Track each link's click rate through our web interface."
+      },
+      "fileSharing": {
+        "description": "Upload your file to share it with anyone, using a customised and trustworthy go.gov.sg short link."
+      }
+    }
+  }
+}
diff --git a/public/index.html → public/gov/index.html b/public/index.html → public/gov/index.html
diff --git a/public/locales/en/translation.json → public/gov/locales/en/translation.json b/public/locales/en/translation.json → public/gov/locales/en/translation.json
diff --git a/src/client/app/i18n.ts b/src/client/app/i18n.ts
@@ -2,12 +2,23 @@ import i18next from 'i18next'
 import Backend from 'i18next-http-backend'
 import { initReactI18next } from 'react-i18next'
 
+declare let ASSET_VARIANT: string
+const assetVariant = ASSET_VARIANT || 'gov'
+
+const pathVariant =
+  assetVariant === 'edu'
+    ? '/edu/locales/{{lng}}/{{ns}}.json'
+    : '/gov/locales/{{lng}}/{{ns}}.json'
+
 export const i18nInit = i18next
   // load translation using http -> see /public/locales
   .use(Backend)
   .use(initReactI18next) // Passes i18n down to react-i18next.
   .init({
     // debug: true, // For verbose logging in development.
+    backend: {
+      loadPath: pathVariant,
+    },
     lng: 'en',
     fallbackLng: 'en',
     whitelist: ['en'],

diff --git a/webpack.config.js b/webpack.config.js
@@ -2,6 +2,7 @@ const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const SentryCliPlugin = require('@sentry/webpack-plugin')
+const webpack = require('webpack')
 
 const outputDirectory = 'dist'
 const srcDirectory = path.join(__dirname, 'src/client/app')
@@ -15,7 +16,26 @@ const requiredSentryEnvVar = [
 ]
 
 const assetVariant = process.env.ASSET_VARIANT || 'gov'
-const assetResolveDir = assetVariant === 'edu' ? 'assets/edu/' : 'assets/gov/'
+const assetResolveDir = assetVariant === 'edu' ? 'assets/edu' : 'assets/gov'
+const templatePath = assetVariant === 'edu' ? 'edu' : 'gov'
+
+const govMetaTags = {
+  'og:title': 'Go.gov.sg',
+  'og:type': 'article',
+  'og:description': 'The official Singapore government link shortener',
+  'og:image':
+    'https://s3-ap-southeast-1.amazonaws.com/gosg-public/gosg-landing-meta.jpg',
+}
+
+const eduMetaTags = {
+  'og:title': 'Edu.edu.sg',
+  'og:type': 'article',
+  'og:description': 'The official Singapore government link shortener',
+  'og:image':
+    'https://s3-ap-southeast-1.amazonaws.com/gosg-public/gosg-landing-meta.jpg',
+}
+
+const metaVariant = assetVariant === 'edu' ? eduMetaTags : govMetaTags
 
 module.exports = () => {
   const jsBundle = {
@@ -73,17 +93,13 @@ module.exports = () => {
     plugins: [
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
-        template: './public/index.html',
-        favicon: `./src/client/app/${assetResolveDir}favicon/favicon.ico`,
+        template: path.join('./public', templatePath, 'index.html'),
+        favicon: `./src/client/app/${assetResolveDir}/favicon/favicon.ico`,
         chunksSortMode: 'none',
-        meta: {
-          // Open Graph protocol meta tags
-          'og:title': 'Go.gov.sg',
-          'og:type': 'article',
-          'og:description': 'The official Singapore government link shortener',
-          'og:image':
-            'https://s3-ap-southeast-1.amazonaws.com/gosg-public/gosg-landing-meta.jpg',
-        },
+        meta: metaVariant,
+      }),
+      new webpack.DefinePlugin({
+        ASSET_VARIANT: JSON.stringify(process.env.ASSET_VARIANT),
       }),
     ],
   }