feat(@dpc-sdp/nuxt-ripple): 🚧 wip on adding favicon generation as module

packages/nuxt-ripple-cli/package.json

@@ -24,7 +24,6 @@
     "enquirer": "^2.3.6",
     "hygen": "^6.2.11",
     "mockttp": "^3.9.1",
-    "node-wget": "^0.4.6",
     "npm-check-updates": "^16.10.16",
     "object-to-argv": "^2.0.0",
     "rfg-api": "^0.5.3",

packages/nuxt-ripple/lib/generate.ts

@@ -0,0 +1,81 @@
+import { init as initRfgApi } from 'rfg-api'
+import path from 'path'
+
+const { generateFavicon, createRequest } = initRfgApi()
+
+export interface generateOpts {
+  masterPath: string
+  outputPath: string
+  API_KEY: string
+  themeColour: string
+}
+
+export async function generate(opt: generateOpts): Promise<object | null> {
+  console.log('Favicon: generating assets')
+
+  const iosConfig = {
+    pictureAspect: 'noChange'
+  }
+
+  const safariConfig = {
+    pictureAspect: 'black_and_white',
+    backgroundColor: '#ffffff',
+    threshold: 60
+  }
+
+  const androidConfig = {
+    pictureAspect: 'noChange',
+    manifest: {
+      name: 'Ripple',
+      display: 'standalone',
+      orientation: 'portrait',
+      start_url: '/'
+    },
+    assets: {
+      legacyIcon: false,
+      lowResolutionIcons: false
+    },
+    theme_color: opt.themeColour
+  }
+
+  const windowsConfig = {
+    pictureAspect: 'white_silhouette',
+    backgroundColor: opt.themeColour,
+    assets: {
+      windows80Ie10Tile: true,
+      windows10Ie11EdgeTiles: {
+        small: true,
+        medium: true,
+        big: true,
+        rectangle: true
+      }
+    }
+  }
+
+  const faviconDesign = {
+    desktopBrowser: {},
+    ios: iosConfig,
+    androidChrome: androidConfig,
+    safariPinnedTab: safariConfig,
+    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 || '.'),
+    (err: any) => {
+      if (err) {
+        throw err
+      }
+
+      console.log('Favicon: generate complete!')
+    }
+  )
+}

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

@@ -0,0 +1,53 @@
+// `nuxt/kit` is a helper subpath import you can use when defining local modules
+// that means you do not need to add `@nuxt/kit` to your project's dependencies
+import { createResolver, defineNuxtModule } from 'nuxt/kit'
+import { generate } from './../lib/generate'
+import * as jsonapiParse from 'jsonapi-parse'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'generateFavicon'
+  },
+  hooks: {
+    ready: async (nuxtApp) => {
+      console.info(`app ready`)
+      const faviconApiKey = ''
+
+      // the tide baseurl
+      const tideBaseUrl = nuxtApp.options.runtimeConfig.public.tide.baseUrl
+
+      // the public folder
+      const publicFolderPath = nuxtApp.options.alias.public
+
+      // 1. check the public folder does not already have a favicon.ico
+
+      // 2. fetch the site taxonomy
+      const siteTaxonomyRes = await fetch(
+        `${tideBaseUrl}/api/v1/taxonomy_term/sites?filter%5Bdrupal_internal__tid%5D=8888&site=8888&include=field_site_favicon`
+      )
+      const siteTaxonomyData = await siteTaxonomyRes.json()
+      const parsedData = jsonapiParse.parse(siteTaxonomyData).data
+
+      // This is the favicon URL from the site taxonomy
+      console.log('siteTaxonomy', parsedData[0]?.field_site_favicon?.url)
+
+      // 3. fetch and save the favicon in the public folder nuxtApp.options.alias.public
+      // save a reference to the saved favicon path savedFaviconPath
+
+      // 4. generate the icons
+
+      // https://develop.content.reference.sdp.vic.gov.au/api/v1/taxonomy_term/sites?filter%5Bdrupal_internal__tid%5D=8888&site=8888&include=field_site_favicon
+
+      // await generate({
+      //   masterPath: `${publicFolderPath}/${savedFaviconPath}`,
+      //   outputPath: publicFolderPath,
+      //   API_KEY: faviconApiKey,
+      //   themeColour: 'red'
+      // })
+    }
+  },
+  setup() {
+    const { resolve } = createResolver(import.meta.url)
+    // console.log(resolve('./../lib/generate'))
+  }
+})

packages/nuxt-ripple/package.json

@@ -19,6 +19,7 @@
     "@nuxtjs/robots": "^3.0.0",
     "@vueuse/core": "^9.13.0",
     "change-case": "^4.1.2",
-    "defu": "^6.1.2"
+    "defu": "^6.1.2",
+    "rfg-api": "^0.5.3"
   }
 }