fix: config utils

apps/cast/configUtil.js

@@ -0,0 +1,52 @@
+const cp = require('child_process');
+const { getIsSentryEnabled } = require('./sentryConfigUtil');
+
+module.exports = {
+    WEB_SECURITY_HEADERS: {
+        'Strict-Transport-Security': '  max-age=63072000',
+        'X-Content-Type-Options': 'nosniff',
+        'X-Download-Options': 'noopen',
+        'X-Frame-Options': 'deny',
+        'X-XSS-Protection': '1; mode=block',
+        'Referrer-Policy': 'same-origin',
+    },
+
+    CSP_DIRECTIVES: {
+        // self is safe enough
+        'default-src': "'self'",
+        // data to allow two factor qr code
+        'img-src': "'self' blob: data: https://*.openstreetmap.org",
+        'media-src': "'self' blob:",
+        'manifest-src': "'self'",
+        'style-src': "'self' 'unsafe-inline'",
+        'font-src ': "'self'; script-src 'self' 'unsafe-eval' blob:",
+        'connect-src':
+            "'self' https://*.ente.io http://localhost:8080 data: blob: https://ente-prod-eu.s3.eu-central-003.backblazeb2.com https://ente-prod-v3.s3.eu-central-2.wasabisys.com/ https://ente-staging-eu.s3.eu-central-003.backblazeb2.com/ ws://localhost:3000/",
+        'base-uri ': "'self'",
+        // to allow worker
+        'child-src': "'self' blob:",
+        'object-src': "'none'",
+        'frame-ancestors': " 'none'",
+        'form-action': "'none'",
+        'report-uri': ' https://csp-reporter.ente.io/local',
+        'report-to': ' https://csp-reporter.ente.io/local',
+    },
+
+    ALL_ROUTES: '/(.*)',
+
+    buildCSPHeader: (directives) => ({
+        'Content-Security-Policy-Report-Only': Object.entries(
+            directives
+        ).reduce((acc, [key, value]) => acc + `${key} ${value};`, ''),
+    }),
+
+    convertToNextHeaderFormat: (headers) =>
+        Object.entries(headers).map(([key, value]) => ({ key, value })),
+
+    getGitSha: () =>
+        cp.execSync('git rev-parse --short HEAD', {
+            cwd: __dirname,
+            encoding: 'utf8',
+        }),
+    getIsSentryEnabled: getIsSentryEnabled,
+};

apps/cast/next.config.js

@@ -1,6 +1,84 @@
-/** @type {import('next').NextConfig} */
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
-const nextConfig = {
+    enabled: process.env.ANALYZE === 'true',
-    reactStrictMode: true,
+});
-};
 
-module.exports = nextConfig;
+const { withSentryConfig } = require('@sentry/nextjs');
+const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
+
+const {
+    getGitSha,
+    convertToNextHeaderFormat,
+    buildCSPHeader,
+    WEB_SECURITY_HEADERS,
+    CSP_DIRECTIVES,
+    ALL_ROUTES,
+    getIsSentryEnabled,
+} = require('./configUtil');
+
+const GIT_SHA = getGitSha();
+
+const IS_SENTRY_ENABLED = getIsSentryEnabled();
+
+module.exports = (phase) =>
+    withSentryConfig(
+        withBundleAnalyzer({
+            sentry: {
+                hideSourceMaps: false,
+                widenClientFileUpload: true,
+            },
+            compiler: {
+                emotion: {
+                    importMap: {
+                        '@mui/material': {
+                            styled: {
+                                canonicalImport: ['@emotion/styled', 'default'],
+                                styledBaseImport: ['@mui/material', 'styled'],
+                            },
+                        },
+                        '@mui/material/styles': {
+                            styled: {
+                                canonicalImport: ['@emotion/styled', 'default'],
+                                styledBaseImport: [
+                                    '@mui/material/styles',
+                                    'styled',
+                                ],
+                            },
+                        },
+                    },
+                },
+            },
+            transpilePackages: [
+                '@mui/material',
+                '@mui/system',
+                '@mui/icons-material',
+            ],
+            env: {
+                SENTRY_RELEASE: GIT_SHA,
+                NEXT_PUBLIC_IS_TEST_APP: process.env.IS_TEST_RELEASE,
+            },
+
+            headers() {
+                return [
+                    {
+                        // Apply these headers to all routes in your application....
+                        source: ALL_ROUTES,
+                        headers: convertToNextHeaderFormat({
+                            ...WEB_SECURITY_HEADERS,
+                            ...buildCSPHeader(CSP_DIRECTIVES),
+                        }),
+                    },
+                ];
+            },
+            // https://dev.to/marcinwosinek/how-to-add-resolve-fallback-to-webpack-5-in-nextjs-10-i6j
+            webpack: (config, { isServer }) => {
+                if (!isServer) {
+                    config.resolve.fallback.fs = false;
+                }
+                return config;
+            },
+        }),
+        {
+            release: GIT_SHA,
+            dryRun: phase === PHASE_DEVELOPMENT_SERVER || !IS_SENTRY_ENABLED,
+        }
+    );

apps/cast/package.json

@@ -9,16 +9,16 @@
         "lint": "next lint"
     },
     "dependencies": {
+        "next": "14.0.2",
         "react": "^18",
-        "react-dom": "^18",
+        "react-dom": "^18"
-        "next": "14.0.2"
     },
     "devDependencies": {
-        "typescript": "^5",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "eslint": "^8",
-        "eslint-config-next": "14.0.2"
+        "eslint-config-next": "14.0.2",
+        "typescript": "^5"
     }
 }

apps/cast/src/pages/index.tsx

@@ -1,10 +1,32 @@
 // import { Inter } from 'next/font/google';
-// import { useEffect } from 'react';
+import { useEffect } from 'react';
-// import { syncCollections } from 'services/collectionService';
+import { syncCollections } from 'services/collectionService';
-// import { syncFiles } from 'services/fileService';
+import { syncFiles } from 'services/fileService';
 
 // const inter = Inter({ subsets: ['latin'] });
 
 export default function Home() {
+    const init = async () => {
+        const collections = await syncCollections();
+
+        // get requested collection id from fragment (this is temporary and will be changed during cast)
+        const requestedCollectionID = window.location.hash.slice(1);
+
+        const files = await syncFiles('normal', collections, () => {});
+
+        console.log(files);
+
+        if (requestedCollectionID) {
+            const collectionFiles = files.filter(
+                (file) => file.collectionID === Number(requestedCollectionID)
+            );
+
+            console.log('collectionFiles', collectionFiles);
+        }
+    };
+
+    useEffect(() => {
+        init();
+    }, []);
     return <></>;
 }