Merge branch 'develop' into studio/all-minor-upgrade-1990

CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## v2.4.9
+
+[compare changes](https://github.com/dpc-sdp/ripple-framework/compare/v2.4.8...v2.4.9)
+
+
+### 🩹 Fixes
+
+  - **@dpc-sdp/nuxt-ripple:** 🐛  ensure favicon generator uses correct site ([c627b5a3](https://github.com/dpc-sdp/ripple-framework/commit/c627b5a3))
+
+### ❤️  Contributors
+
+- Dylan Kelly <[email protected]>
+
+## v2.4.8
+
+[compare changes](https://github.com/dpc-sdp/ripple-framework/compare/v2.4.7...v2.4.8)
+
+
+### 🩹 Fixes
+
+  - **@dpc-sdp/nuxt-ripple:** 🐛  move favicon generate to before build ([869482b0](https://github.com/dpc-sdp/ripple-framework/commit/869482b0))
+
+### ❤️  Contributors
+
+- Dylan Kelly <[email protected]>
+
+## v2.4.7
+
+[compare changes](https://github.com/dpc-sdp/ripple-framework/compare/v2.4.6...v2.4.7)
+
+
+### 🩹 Fixes
+
+  - **@dpc-sdp/nuxt-ripple:** 🐛  fix for favicon generator not waiting ([0c2b37d8](https://github.com/dpc-sdp/ripple-framework/commit/0c2b37d8))
+
+### ❤️  Contributors
+
+- Dylan Kelly <[email protected]>
+
 ## v2.4.6
 
 [compare changes](https://github.com/dpc-sdp/ripple-framework/compare/v2.4.5...v2.4.6)

examples/nuxt-app/.gitignore

@@ -3,3 +3,4 @@ node_modules
 .nuxt
 nuxt.d.ts
 .output
+public

examples/nuxt-app/app.config.ts

@@ -1,5 +1,14 @@
+import pkg from './package.json'
+import { getDpcPkgs } from '@dpc-sdp/ripple-tide-api/utils'
+
 export default defineAppConfig({
+  project: {
+    name: pkg.name,
+    version: pkg.version,
+    sdpVersion: pkg.sdp_version
+  },
   ripple: {
+    packages: getDpcPkgs({ ...pkg.dependencies, ...pkg.devDependencies }),
     featureFlags: {
       contentCollectionSearchConnector: 'elasticsearch'
     },

examples/nuxt-app/package.json

@@ -6,6 +6,7 @@
   "license": "Apache-2.0",
   "type": "module",
   "private": true,
+  "sdp_version": "6.6.6",
   "scripts": {
     "dev": "nuxt dev",
     "dev:mock": "NUXT_PUBLIC_API_URL=http://localhost:3001 API_PORT=3001 concurrently 'pnpm mockserver' 'pnpm dev'",
@@ -17,7 +18,7 @@
     "cy:open": "cypress open --e2e --browser electron",
     "cy:run": "cypress run --record",
     "test:ci": "NUXT_PUBLIC_API_URL=http://localhost:3001 API_PORT=3001 start-test start tcp:3000 'cy:run'",
-    "test:integration": "start-test 'NUXT_PUBLIC_API_URL=http://localhost:3001 API_PORT=3001 pnpm dev' 'http-get://localhost:3000/api/tide/site?id=8888' 'cy:open'"
+    "test:integration": "NUXT_PUBLIC_TIDE_SITE=TEST_SITE NUXT_PUBLIC_TIDE_BASE_URL=https://test.base.url/ start-test dev:mock tcp:3000 'cy:open'"
   },
   "dependencies": {
     "@dpc-sdp/nuxt-ripple": "workspace:*",

examples/nuxt-app/test/features/landingpage/languages.feature

@@ -7,12 +7,12 @@ Feature: Languages
   Scenario: RTL languages load with the correct font and direction
     Given the page endpoint for path "/arabic-page" returns fixture "/landingpage/languages-ar" with status 200
     When I visit the page "/arabic-page"
-    Then The section ".rpl-header" should be display "rtl" in "ar" with the font "Noto Kufi Arabic"
-    And The section "#rpl-main" should be display "rtl" in "ar" with the font "Noto Kufi Arabic"
+    Then the section ".rpl-header" should be display "rtl" in "ar" with the font "Noto Kufi Arabic"
+    And the section "#rpl-main" should be display "rtl" in "ar" with the font "Noto Kufi Arabic"
 
   @mockserver
   Scenario: LTR languages load with the correct font and direction
     Given the page endpoint for path "/korean-page" returns fixture "/landingpage/languages-ko" with status 200
     When I visit the page "/korean-page"
-    Then The section ".rpl-header" should be display "ltr" in "ko" with the font "Noto Sans KR"
-    And The section "#rpl-main" should be display "ltr" in "ko" with the font "Noto Sans KR"
+    Then the section ".rpl-header" should be display "ltr" in "ko" with the font "Noto Sans KR"
+    And the section "#rpl-main" should be display "ltr" in "ko" with the font "Noto Sans KR"

examples/nuxt-app/test/features/rtl/rtl-form.feature

@@ -0,0 +1,12 @@
+Feature: RTL form page
+
+  Example of mocked page
+  Background:
+    Given the page endpoint for path "/rtl-form" returns fixture "/rtl/form" with status 200
+    And the site endpoint returns fixture "/site/reference" with status 200
+    Given I visit the page "/rtl-form"
+
+  @mockserver
+  Scenario: RTL form page renders non-text elements correctly
+    Then the section ".rpl-header" should be display "rtl" in "fa" with the font "Noto Naskh Arabic"
+    And the section "#rpl-main" should be display "rtl" in "fa" with the font "Noto Naskh Arabic"

examples/nuxt-app/test/features/rtl/rtl-page.feature

@@ -0,0 +1,12 @@
+Feature: RTL complete page
+
+  Example of mocked page
+  Background:
+    Given the page endpoint for path "/rtl" returns fixture "/rtl/page" with status 200
+    And the site endpoint returns fixture "/site/reference" with status 200
+    Given I visit the page "/rtl"
+
+  @mockserver
+  Scenario: RTL page renders non-text elements correctly
+    Then the section ".rpl-header" should be display "rtl" in "fa" with the font "Noto Naskh Arabic"
+    And the section "#rpl-main" should be display "rtl" in "fa" with the font "Noto Naskh Arabic"

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.4.6",
+  "version": "2.4.9",
   "npmClient": "pnpm",
   "exact": true,
   "command": {

packages/eslint-config-ripple/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/eslint-config-ripple",
   "description": "ESLint config for Ripple projects",
-  "version": "2.4.6",
+  "version": "2.4.9",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "index.js",

packages/nuxt-ripple-analytics/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/nuxt-ripple-analytics",
   "description": "Nuxt module for handling event tracking.",
-  "version": "2.4.6",
+  "version": "2.4.9",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",

packages/nuxt-ripple-cli/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/nuxt-ripple-cli",
   "description": "A CLI for simplifying common setup and scaffolding tasks",
-  "version": "2.4.6",
+  "version": "2.4.9",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "./dist/index.js",

packages/nuxt-ripple-preview/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/nuxt-ripple-preview",
   "description": "Adds support for drupal preview links in Ripple frontend sites",
-  "version": "2.4.6",
+  "version": "2.4.9",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",

packages/nuxt-ripple/lib/generate.ts

@@ -12,7 +12,7 @@ export interface generateOpts {
   siteName: string
 }
 
-export async function generate(opt: generateOpts): Promise<object | null> {
+export async function generate(opt: generateOpts): Promise<string | null> {
   console.info('Favicon: generating assets')
 
   const iosConfig = {
@@ -62,30 +62,38 @@ export async function generate(opt: generateOpts): Promise<object | null> {
     windows: windowsConfig
   }
 
-  return generateFavicon(
-    createRequest({
-      apiKey: opt.API_KEY,
-      masterPicture: opt.masterPath,
-      iconsPath: opt.outputPath,
-      design: faviconDesign,
-      settings: { usePathAsIs: false }
-      // versioning?
-    }),
-    path.resolve(process.cwd(), opt.outputPath || '.'),
-    async (err: any) => {
-      if (err) {
-        throw err
-      }
+  return new Promise(function (resolve, reject) {
+    generateFavicon(
+      createRequest({
+        apiKey: opt.API_KEY,
+        masterPicture: opt.masterPath,
+        iconsPath: opt.outputPath,
+        design: faviconDesign,
+        settings: { usePathAsIs: false }
+        // versioning?
+      }),
+      path.resolve(process.cwd(), opt.outputPath || '.'),
+      async (err: any) => {
+        if (err) {
+          // dont reject as we want to continue building regardless
+          resolve(`Favicon: error generating - ${err.message}`)
+        }
+        // Remove outputPath from manifest files
+        for (const manifest of ['browserconfig.xml', 'site.webmanifest']) {
+          const path = `${opt.outputPath}/${manifest}`
+          const pathExists = fs.existsSync(path)
+          if (pathExists) {
+            const original = await fs.promises.readFile(path, 'utf8')
+            const updated = original.replace(
+              new RegExp(opt.outputPath, 'g'),
+              ''
+            )
+            await fs.promises.writeFile(path, updated, 'utf8')
+          }
+        }
 
-      // Remove outputPath from manifest files
-      for (const manifest of ['browserconfig.xml', 'site.webmanifest']) {
-        const path = `${opt.outputPath}/${manifest}`,
-          original = await fs.promises.readFile(path, 'utf8'),
-          updated = original.replace(new RegExp(opt.outputPath, 'g'), '')
-        await fs.promises.writeFile(path, updated, 'utf8')
+        resolve('Favicon: generate complete!')
       }
-
-      console.info('Favicon: generate complete!')
-    }
-  )
+    )
+  })
 }

packages/nuxt-ripple/modules/generate-favicon.ts

@@ -1,4 +1,4 @@
-import { createResolver, defineNuxtModule } from 'nuxt/kit'
+import { createResolver, defineNuxtModule, loadNuxtConfig } from 'nuxt/kit'
 import { generate } from './../lib/generate'
 import * as jsonapiParse from 'jsonapi-parse'
 import fs from 'fs'
@@ -11,16 +11,28 @@ export default defineNuxtModule({
     name: 'generateFavicon'
   },
   hooks: {
-    ready: async (nuxtApp) => {
+    'modules:done': async () => {
       const faviconApiKey = process.env.RFG_API_KEY
 
       // Exit early if API key is not set
       if (faviconApiKey === undefined) {
         console.info('Favicon: missing RFG_API_KEY, skipping')
         return
       }
+      const nuxtConfig = await loadNuxtConfig({})
+      const publicFolderPath = nuxtConfig.alias.public
+      const tideApiBaseUrl = process.env.NUXT_PUBLIC_TIDE_BASE_URL
+      const tideApiSiteId = process.env.NUXT_PUBLIC_TIDE_SITE
+      let headers = new Headers()
 
-      const publicFolderPath = nuxtApp.options.alias.public
+      if (process.env.NUXT_TIDE_CONFIG_AUTH_PASSWORD) {
+        const username = process.env.NUXT_TIDE_CONFIG_AUTH_USERNAME
+        const password = process.env.NUXT_TIDE_CONFIG_AUTH_PASSWORD
+        headers.set(
+          'Authorization',
+          'Basic ' + Buffer.from(username + ':' + password).toString('base64')
+        )
+      }
 
       // 1. Check if asset already exists
       if (fs.existsSync(`${publicFolderPath}/favicon.ico`)) {
@@ -30,14 +42,18 @@ export default defineNuxtModule({
 
       // 2. Fetch theme and master asset url from site taxonomy
       const siteTaxonomyRes = await fetch(
-          `${nuxtApp.options.runtimeConfig.public.tide.baseUrl}/api/v1/taxonomy_term/sites?filter%5Bdrupal_internal__tid%5D=${nuxtApp.options.runtimeConfig.public.tide.site}&site=${nuxtApp.options.runtimeConfig.public.tide.site}&include=field_site_favicon`
-        ),
-        siteTaxonomyData = await siteTaxonomyRes.json(),
-        parsedData = jsonapiParse.parse(siteTaxonomyData).data[0]
+        `${tideApiBaseUrl}/api/v1/taxonomy_term/sites?filter%5Bdrupal_internal__tid%5D=${tideApiSiteId}&site=${tideApiSiteId}&include=field_site_favicon`,
+        {
+          headers
+        }
+      )
+
+      const siteTaxonomyData = await siteTaxonomyRes.json()
+      const parsedData = jsonapiParse.parse(siteTaxonomyData).data[0]
 
       // 3. Extract site name
       const siteName =
-        parsedData.field_site_slogan.processed.replace(/<p>|<\/p>/g, '') ||
+        parsedData.field_site_slogan?.processed.replace(/<p>|<\/p>/g, '') ||
         parsedData.name ||
         'SDP'
 
@@ -70,7 +86,6 @@ export default defineNuxtModule({
         // @ts-ignore TS2345
         await finished(Readable.fromWeb(masterAssetRes.body).pipe(fileStream))
       }
-
       // 8. Generate assets
       await generate({
         masterPath: savedFaviconPath,

packages/nuxt-ripple/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/nuxt-ripple",
   "description": "Nuxt module for integrating Ripple and Tide",
-  "version": "2.4.6",
+  "version": "2.4.9",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",

packages/nuxt-ripple/plugins/hide-alerts.ts

@@ -48,12 +48,14 @@ try {
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook('tide:page', () => {
-    useHead({
-      script: [
-        {
-          innerHTML: hideAlertsOnLoadScript
-        }
-      ]
-    })
+    if (process.server) {
+      useHead({
+        script: [
+          {
+            innerHTML: hideAlertsOnLoadScript
+          }
+        ]
+      })
+    }
   })
 })

packages/nuxt-ripple/server/api/tide/index.ts

@@ -0,0 +1,34 @@
+//@ts-nocheck runtime imports
+import { defineEventHandler, H3Event } from 'h3'
+import { createHandler } from '@dpc-sdp/ripple-tide-api'
+
+export const createTideApiHandler = async (event: H3Event) => {
+  return createHandler(event, 'TideApiHandler', async () => {
+    const appConfig = useAppConfig()
+    const runtimeConfig = useRuntimeConfig()
+    if (appConfig?.ripple && appConfig.project && runtimeConfig.public?.tide) {
+      const { packages, theme, featureFlags } = appConfig.ripple
+      const { version, sdpVersion } = appConfig.project
+      const { baseUrl, site } = runtimeConfig.public.tide
+      return {
+        project: {
+          version,
+          sdpVersion
+        },
+        tide: {
+          baseUrl,
+          site
+        },
+        ripple: {
+          packages,
+          featureFlags,
+          theme
+        }
+      }
+    }
+  })
+}
+
+export default defineEventHandler(async (event: H3Event) => {
+  return createTideApiHandler(event)
+})

packages/ripple-storybook/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "ripple-storybook",
   "description": "Ripple Storybook instance",
-  "version": "2.4.6",
+  "version": "2.4.9",
   "license": "Apache-2.0",
   "private": true,
   "repository": "https://github.com/dpc-sdp/ripple-framework",

packages/ripple-test-utils/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/ripple-test-utils",
   "description": "Test utils for Ripple sites",
-  "version": "2.4.6",
+  "version": "2.4.9",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/config/index.js",