refactor: move themes to @presenter/themes package

Also enable no-cors

TODO.md

@@ -10,7 +10,7 @@
 - [ ] Bundle **compiled** code
 - [x] Get clear on paths
 - [x] ESLint root package dependency usage
-- [ ] Move themes to `packages/themes`
+- [x] Move themes to `packages/themes`
 
 ## Backend
 
@@ -48,3 +48,7 @@
 
 - [ ] Add Posthog
 - [ ] Add New relic
+
+## Migration Scripts
+
+- [ ] Migrate custom themes from `%APPDATA%/Shabad OS/themes` to `%APPDATA%/Shabad OS/themes/presenter` and `%APPDATA%/Shabad OS/themes/overlay`

apps/backend/package.json

@@ -14,6 +14,7 @@
     "@presenter/contract": "*",
     "@presenter/node": "*",
     "@presenter/swiss-knife": "*",
+    "@presenter/themes": "*",
     "@shabados/database": "^4.8.7",
     "body-parser": "^1.20.0",
     "chalk": "^5.3.0",
@@ -28,7 +29,7 @@
     "express": "^4.18.1",
     "fp-ts": "^2.12.2",
     "gurmukhi-utils": "^3.2.1",
-    "helmet": "^5.0.2",
+    "helmet": "^7.1.0",
     "import-fresh": "^3.3.0",
     "lodash-es": "^4.17.21",
     "memoizee": "^0.4.15",

apps/backend/src/features/actions/index.ts

@@ -1,4 +1,4 @@
-import { CUSTOM_OVERLAY_THEMES_FOLDER, LOG_FOLDER } from '@presenter/node'
+import { LOG_FOLDER, USER_OVERLAY_THEMES_FOLDER } from '@presenter/node'
 import open from 'open'
 
 import ipc from '~/services/ipc'
@@ -9,7 +9,7 @@ type ActionsModuleOptions = {
 }
 
 const createActionsModule = ( { socketServer }: ActionsModuleOptions ) => {
-  socketServer.on( 'action:open-overlay-folder', () => void open( CUSTOM_OVERLAY_THEMES_FOLDER ) )
+  socketServer.on( 'action:open-overlay-folder', () => void open( USER_OVERLAY_THEMES_FOLDER ) )
   socketServer.on( 'action:open-logs-folder', () => void open( LOG_FOLDER ) )
   socketServer.on( 'action:open-window', () => ipc.send( 'action:open-window', undefined ) )
   socketServer.on( 'action:open-external-url', ( url: string ) => void open( url ) )

apps/backend/src/features/themes/index.ts

@@ -1,40 +1,39 @@
 import { copyFile } from 'node:fs/promises'
 import { join } from 'node:path'
 
-import { CUSTOM_OVERLAY_THEMES_FOLDER, CUSTOM_THEMES_FOLDER } from '@presenter/node'
+import { USER_OVERLAY_THEMES_FOLDER, USER_PRESENTER_THEMES_FOLDER } from '@presenter/node'
 import express, { Application } from 'express'
 
-import { FRONTEND_OVERLAY_THEMES_FOLDER, FRONTEND_THEMES_FOLDER } from '~/helpers/consts'
+import { OVERLAY_THEMES_FOLDER, PRESENTER_THEMES_FOLDER } from '~/helpers/consts'
 
-import createApi from './api'
+import { getOverlayThemeNames, getPresenterThemeNames } from './themes'
 
 const copyExampleThemes = () => Promise.all( [
-  [ FRONTEND_OVERLAY_THEMES_FOLDER, CUSTOM_OVERLAY_THEMES_FOLDER ],
-  [ FRONTEND_THEMES_FOLDER, CUSTOM_THEMES_FOLDER ],
+  [ OVERLAY_THEMES_FOLDER, USER_OVERLAY_THEMES_FOLDER ],
+  [ PRESENTER_THEMES_FOLDER, USER_PRESENTER_THEMES_FOLDER ],
 ].map( ( [ src, dest ] ) => copyFile(
   join( src, 'Example.template' ),
   join( dest, 'Example.css' ),
 ) ) )
 
 const mounts = [
-  [ '/presenter/themes', FRONTEND_THEMES_FOLDER ],
-  [ '/presenter/themes', CUSTOM_THEMES_FOLDER ],
-  [ '/presenter/themes/*', join( FRONTEND_OVERLAY_THEMES_FOLDER, 'Day.css' ) ],
-  [ '/overlay/themes', FRONTEND_OVERLAY_THEMES_FOLDER ],
-  [ '/overlay/themes/', CUSTOM_OVERLAY_THEMES_FOLDER ],
+  [ 'presenter', PRESENTER_THEMES_FOLDER ],
+  [ 'presenter', USER_PRESENTER_THEMES_FOLDER ],
+  [ 'overlay', OVERLAY_THEMES_FOLDER ],
+  [ 'overlay', USER_OVERLAY_THEMES_FOLDER ],
 ] as const
 
 type ThemesModuleOptions = {
   api: Application,
 }
 
 const createThemesModule = async ( { api }: ThemesModuleOptions ) => {
-  mounts.forEach( ( [ prefix, dir ] ) => api.use( prefix, express.static( dir ) ) )
+  mounts.forEach( ( [ prefix, dir ] ) => api.use( `/themes/${prefix}`, express.static( dir ) ) )
 
-  api.use( createApi() )
+  api.get( '/themes/presenter', ( _, res ) => void getPresenterThemeNames().then( ( r ) => res.json( r ) ) )
+  api.get( '/themes/overlay', ( _, res ) => void getOverlayThemeNames().then( ( r ) => res.json( r ) ) )
 
-  // TODO: uncomment when we have a way to copy example themes
-  // await copyExampleThemes()
+  await copyExampleThemes()
 }
 
 export default createThemesModule

apps/backend/src/features/themes/list.ts

@@ -1,9 +1,9 @@
 import { readdir } from 'node:fs/promises'
 import { basename, extname } from 'node:path'
 
-import { CUSTOM_OVERLAY_THEMES_FOLDER, CUSTOM_THEMES_FOLDER } from '@presenter/node'
+import { USER_OVERLAY_THEMES_FOLDER, USER_PRESENTER_THEMES_FOLDER } from '@presenter/node'
 
-import { FRONTEND_OVERLAY_THEMES_FOLDER, FRONTEND_THEMES_FOLDER } from '~/helpers/consts'
+import { OVERLAY_THEMES_FOLDER, PRESENTER_THEMES_FOLDER } from '~/helpers/consts'
 
 const listCSSFiles = ( path: string ) => readdir( path )
   .then( ( files ) => files.map( extname ).filter( ( extension ) => extension === '.css' ) )
@@ -14,11 +14,11 @@ const getThemeNames = ( folders: string[] ) => Promise
   .then( ( files ) => files.map( ( filename ) => basename( filename, '.css' ) ) )
 
 export const getPresenterThemeNames = () => getThemeNames( [
-  FRONTEND_THEMES_FOLDER,
-  CUSTOM_THEMES_FOLDER,
+  PRESENTER_THEMES_FOLDER,
+  USER_PRESENTER_THEMES_FOLDER,
 ] )
 
 export const getOverlayThemeNames = () => getThemeNames( [
-  FRONTEND_OVERLAY_THEMES_FOLDER,
-  CUSTOM_OVERLAY_THEMES_FOLDER,
+  OVERLAY_THEMES_FOLDER,
+  USER_OVERLAY_THEMES_FOLDER,
 ] )

apps/backend/src/features/themes/themes.ts

@@ -1,9 +1,11 @@
 import { copyFile, readdir } from 'node:fs/promises'
 
-import { CUSTOM_OVERLAY_THEMES_FOLDER, CUSTOM_THEMES_FOLDER } from '@presenter/node'
+import { getLogger, USER_OVERLAY_THEMES_FOLDER, USER_PRESENTER_THEMES_FOLDER } from '@presenter/node'
 import { basename, extname, join } from 'path'
 
-import { FRONTEND_OVERLAY_THEMES_FOLDER, FRONTEND_THEMES_FOLDER } from '~/helpers/consts'
+import { OVERLAY_THEMES_FOLDER, PRESENTER_THEMES_FOLDER } from '~/helpers/consts'
+
+const logger = getLogger( 'themes' )
 
 const listCSSFiles = ( path: string ) => readdir( path )
   .then( ( files ) => files.filter( ( path ) => extname( path ) === '.css' ) )
@@ -14,18 +16,22 @@ const getThemeNames = ( folders: string[] ) => Promise
   .then( ( files ) => files.map( ( filename ) => basename( filename, '.css' ) ) )
 
 export const getPresenterThemeNames = () => getThemeNames( [
-  FRONTEND_THEMES_FOLDER,
-  CUSTOM_THEMES_FOLDER,
-] )
+  PRESENTER_THEMES_FOLDER,
+  USER_PRESENTER_THEMES_FOLDER,
+] ).catch( ( e ) => {
+  logger.error( e, 'Unable to get presenter theme names', e )
+} )
 
 export const getOverlayThemeNames = () => getThemeNames( [
-  FRONTEND_OVERLAY_THEMES_FOLDER,
-  CUSTOM_OVERLAY_THEMES_FOLDER,
-] )
+  OVERLAY_THEMES_FOLDER,
+  USER_OVERLAY_THEMES_FOLDER,
+] ).catch( ( e ) => {
+  logger.error( e, 'Unable to get overlay theme names' )
+} )
 
 export const copyExampleThemes = () => Promise.all( [
-  [ FRONTEND_OVERLAY_THEMES_FOLDER, CUSTOM_OVERLAY_THEMES_FOLDER ],
-  [ FRONTEND_THEMES_FOLDER, CUSTOM_THEMES_FOLDER ],
+  [ OVERLAY_THEMES_FOLDER, USER_OVERLAY_THEMES_FOLDER ],
+  [ PRESENTER_THEMES_FOLDER, USER_PRESENTER_THEMES_FOLDER ],
 ].map( ( [ src, dest ] ) => copyFile(
   join( src, 'Example.template' ),
   join( dest, 'Example.css' ),

apps/backend/src/helpers/consts.ts

@@ -1,17 +1,19 @@
 import { join, resolve } from 'node:path'
 
-import { isProduction } from '@presenter/node'
+import { isProduction, resolveModule } from '@presenter/node'
 
 // Check every 5 minutes
 export const UPDATE_CHECK_INTERVAL = 5000 * 60
 
 // App folder locations
-export const APP_FOLDER = resolve( '@shabados/presenter' )
-export const FRONTEND_FOLDER = resolve( '@presenter/frontend' )
+export const APP_FOLDER = resolve( '../../../' )
+export const FRONTEND_FOLDER = resolveModule( '@presenter/frontend' )
 export const FRONTEND_SRC_FOLDER = join( FRONTEND_FOLDER, 'src' )
 export const FRONTEND_BUILD_FOLDER = join( FRONTEND_FOLDER, 'dist' )
-export const FRONTEND_OVERLAY_THEMES_FOLDER = join( FRONTEND_SRC_FOLDER, 'overlay', 'themes' )
-export const FRONTEND_THEMES_FOLDER = join( FRONTEND_SRC_FOLDER, 'Presenter', 'themes' )
+
+export const OVERLAY_THEMES_FOLDER = resolveModule( '@presenter/themes/overlay' )
+export const PRESENTER_THEMES_FOLDER = resolveModule( '@presenter/themes/presenter' )
+
 export const DATABASE_FOLDER = resolve( '@shabados/database' )
 
 // Max Search results to return in one go

apps/backend/src/services/express.ts

@@ -11,7 +11,12 @@ import ipc from '~/services/ipc'
 
 const log = getLogger( 'express' )
 
-const middleware = [ helmet(), compression(), bodyParser.json(), cors() ]
+const middleware = [
+  helmet( { crossOriginResourcePolicy: false } ),
+  compression(),
+  bodyParser.json(),
+  cors(),
+]
 
 const createExpress = () => {
   const api = express()

apps/frontend/package.json

@@ -10,6 +10,7 @@
     "lint": "eslint .",
     "types": "tsc --noEmit"
   },
+  "exports": "./build",
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
@@ -19,6 +20,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/material": "^5.16.6",
+    "@presenter/themes": "*",
     "@sentry/browser": "^6.19.7",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",

apps/frontend/src/components/ThemeLoader.tsx

@@ -1,7 +1,7 @@
+import defaultTheme from '@presenter/themes/presenter/Day.css?url'
 import { useContext } from 'react'
 
-import defaultTheme from '~/features/presenter/themes/Day.css?url'
-import { THEMES_URL } from '~/helpers/consts'
+import { PRESENTER_THEMES_URL } from '~/helpers/consts'
 import { StatusContext } from '~/helpers/contexts'
 
 type ThemeLoaderProps = { name: string }
@@ -13,7 +13,7 @@ const ThemeLoader = ( { name = 'Day' }: ThemeLoaderProps ) => {
     <link
       key={`${name}-${connectedAt?.toDateString() || ''}`}
       rel="stylesheet"
-      href={name ? `${THEMES_URL}/${name}.css` : defaultTheme}
+      href={name ? `${PRESENTER_THEMES_URL}/${name}.css` : defaultTheme}
     />
   )
 }

apps/frontend/src/helpers/consts.ts

@@ -36,8 +36,8 @@ export const BOOKMARKS_URL = `${CONTROLLER_URL}/bookmarks`
 export const NAVIGATOR_URL = `${CONTROLLER_URL}/navigator`
 export const HISTORY_URL = `${CONTROLLER_URL}/history`
 export const HISTORY_DOWNLOAD_URL = `${BACKEND_URL}/history.csv`
-export const THEMES_URL = `${BACKEND_URL}/presenter/themes`
-export const OVERLAY_THEMES_URL = `${BACKEND_URL}/overlay/themes`
+export const PRESENTER_THEMES_URL = `${BACKEND_URL}/themes/presenter`
+export const OVERLAY_THEMES_URL = `${BACKEND_URL}/themes/overlay`
 
 export const SETTINGS_URL = '/settings'
 export const SETTINGS_DEVICE_URL = `${SETTINGS_URL}/device`

packages/node/src/paths.ts

@@ -1,20 +1,25 @@
 import { chmod, mkdir } from 'node:fs/promises'
-import { join } from 'node:path'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 import getAppDataPath from 'appdata-path'
 
+export const resolveModule = ( name: string ) => dirname( fileURLToPath(
+  import.meta.resolve( name )
+) )
+
 export const DATA_FOLDER = join( getAppDataPath(), 'Shabad OS' )
-export const CUSTOM_THEMES_FOLDER = join( DATA_FOLDER, 'themes' )
-export const CUSTOM_OVERLAY_THEMES_FOLDER = join( DATA_FOLDER, 'overlay' )
+export const USER_PRESENTER_THEMES_FOLDER = join( DATA_FOLDER, 'themes', 'presenter' )
+export const USER_OVERLAY_THEMES_FOLDER = join( DATA_FOLDER, 'themes', 'overlay' )
 export const HISTORY_FOLDER = join( DATA_FOLDER, 'history' )
 export const LOG_FOLDER = join( DATA_FOLDER, 'logs' )
 export const TMP_FOLDER = join( DATA_FOLDER, 'temp' )
 export const UPDATE_TMP_FOLDER = join( TMP_FOLDER, '@shabados', 'database' )
 
 const REQUIRED_FOLDERS = [
   LOG_FOLDER,
-  CUSTOM_THEMES_FOLDER,
-  CUSTOM_OVERLAY_THEMES_FOLDER,
+  USER_PRESENTER_THEMES_FOLDER,
+  USER_OVERLAY_THEMES_FOLDER,
   HISTORY_FOLDER,
   TMP_FOLDER,
 ]

packages/themes/package.json

@@ -1,5 +1,12 @@
 {
   "name": "@presenter/themes",
   "private": true,
-  "type": "module"
+  "type": "module",
+  "exports": {
+    ".": "./package.json",
+    "./overlay": "./overlay",
+    "./overlay/*": "./overlay/*",
+    "./presenter": "./presenter",
+    "./presenter/*": "./presenter/*"
+  }
 }