feat: update metadata of page (#1766)

* handle image

* add scan project metadata

* refactor type

* update scan pages

* refactor duplicated upload image

* fetch assets

* handle use client case

* handle page URL

* update default title and default description

* remove log

* revert files

* Update scan on settings modal open

* Clean up from template

* Update gitignore

* Fix build error and rename Metadata to PageMetadata

* remove default mime type

* add default mime type

* display upload button in favicon

* update base url

Author: spartan-vutrannguyen

apps/studio/electron/main/assets/images.ts

@@ -20,11 +20,7 @@ async function scanImagesDirectory(projectRoot: string): Promise<ImageContentDat
                 ) {
                     const imagePath = path.join(imagesPath, entry.name);
                     const image = readFileSync(imagePath, { encoding: 'base64' });
-                    const mimeType = mime.getType(imagePath);
-                    if (!mimeType) {
-                        console.error(`Failed to get mime type for ${imagePath}`);
-                        continue;
-                    }
+                    const mimeType = mime.getType(imagePath) || 'application/octet-stream';
                     images.push({
                         fileName: entry.name,
                         content: `data:${mimeType};base64,${image}`,
@@ -50,26 +46,44 @@ export async function scanNextJsImages(projectRoot: string): Promise<ImageConten
     }
 }
 
-export async function saveImageToProject(
-    projectFolder: string,
-    content: string,
-    fileName: string,
-): Promise<string> {
-    try {
-        const imageFolder = path.join(projectFolder, DefaultSettings.IMAGE_FOLDER);
-        const imagePath = path.join(imageFolder, fileName);
+async function getUniqueFileName(imageFolder: string, fileName: string): Promise<string> {
+    let imagePath = path.join(imageFolder, fileName);
+    let counter = 1;
+
+    const fileExt = path.extname(fileName);
+    const baseName = path.basename(fileName, fileExt);
 
+    // Keep trying until we find a unique name
+    while (true) {
         try {
             await fs.access(imagePath);
-            throw new Error(`File ${fileName} already exists`);
+            // If file exists, try with a new suffix
+            const newFileName = `${baseName} (${counter})${fileExt}`;
+            imagePath = path.join(imageFolder, newFileName);
+            counter++;
         } catch (err: any) {
             if (err.code === 'ENOENT') {
-                const buffer = Buffer.from(content, 'base64');
-                await fs.writeFile(imagePath, buffer);
-                return imagePath;
+                // File doesn't exist, we can use this path
+                return path.basename(imagePath);
             }
             throw err;
         }
+    }
+}
+
+export async function saveImageToProject(
+    projectFolder: string,
+    content: string,
+    fileName: string,
+): Promise<string> {
+    try {
+        const imageFolder = path.join(projectFolder, DefaultSettings.IMAGE_FOLDER);
+        const uniqueFileName = await getUniqueFileName(imageFolder, fileName);
+        const imagePath = path.join(imageFolder, uniqueFileName);
+
+        const buffer = Buffer.from(content, 'base64');
+        await fs.writeFile(imagePath, buffer);
+        return imagePath;
     } catch (error) {
         console.error('Error uploading image:', error);
         throw error;

apps/studio/electron/main/events/code.ts

@@ -2,30 +2,30 @@ import type { CodeDiff, CodeDiffRequest } from '@onlook/models/code';
 import { MainChannels } from '@onlook/models/constants';
 import type { TemplateNode } from '@onlook/models/element';
 import { ipcMain } from 'electron';
+import {
+    addFont,
+    addLocalFont,
+    getDefaultFont,
+    removeFont,
+    scanFonts,
+    setDefaultFont,
+} from '../assets/fonts/index';
+import { FontFileWatcher } from '../assets/fonts/watcher';
+import {
+    deleteTailwindColorGroup,
+    scanTailwindConfig,
+    updateTailwindColorConfig,
+} from '../assets/styles';
 import { openFileInIde, openInIde, pickDirectory, readCodeBlock, writeCode } from '../code/';
 import { getTemplateNodeClass } from '../code/classes';
 import { extractComponentsFromDirectory } from '../code/components';
 import { getCodeDiffs } from '../code/diff';
 import { isChildTextEditable } from '../code/diff/text';
 import { readFile } from '../code/files';
+import { getTemplateNodeProps } from '../code/props';
 import { getTemplateNodeChild } from '../code/templateNode';
 import runManager from '../run';
 import { getFileContentWithoutIds } from '../run/cleanup';
-import { getTemplateNodeProps } from '../code/props';
-import {
-    scanTailwindConfig,
-    updateTailwindColorConfig,
-    deleteTailwindColorGroup,
-} from '../assets/styles';
-import {
-    addFont,
-    removeFont,
-    scanFonts,
-    setDefaultFont,
-    getDefaultFont,
-    addLocalFont,
-} from '../assets/fonts/index';
-import { FontFileWatcher } from '../assets/fonts/watcher';
 
 const fontFileWatcher = new FontFileWatcher();
 

apps/studio/electron/main/events/page.ts

@@ -1,12 +1,17 @@
+import type { PageMetadata } from '@onlook/models';
 import { MainChannels } from '@onlook/models/constants';
 import { ipcMain } from 'electron';
+import path from 'path';
 import {
     createNextJsPage,
     deleteNextJsPage,
+    detectRouterType,
     duplicateNextJsPage,
+    extractMetadata,
     renameNextJsPage,
     scanNextJsPages,
 } from '../pages';
+import { updateNextJsPage } from '../pages/update';
 
 export function listenForPageMessages() {
     ipcMain.handle(MainChannels.SCAN_PAGES, async (_event, projectRoot: string) => {
@@ -62,4 +67,34 @@ export function listenForPageMessages() {
             return await duplicateNextJsPage(projectRoot, sourcePath, targetPath);
         },
     );
+
+    ipcMain.handle(
+        MainChannels.UPDATE_PAGE_METADATA,
+        async (
+            _event,
+            {
+                projectRoot,
+                pagePath,
+                metadata,
+            }: { projectRoot: string; pagePath: string; metadata: PageMetadata },
+        ) => {
+            return await updateNextJsPage(projectRoot, pagePath, metadata);
+        },
+    );
+
+    ipcMain.handle(
+        MainChannels.SCAN_PROJECT_METADATA,
+        async (_event, { projectRoot }: { projectRoot: string }) => {
+            const routerConfig = await detectRouterType(projectRoot);
+            if (routerConfig) {
+                if (routerConfig.type === 'app') {
+                    const layoutPath = path.join(routerConfig.basePath, 'layout.tsx');
+                    return await extractMetadata(layoutPath);
+                } else {
+                    return;
+                }
+            }
+            return null;
+        },
+    );
 }

apps/studio/electron/main/pages/scan.ts

@@ -1,4 +1,7 @@
-import type { PageNode } from '@onlook/models/pages';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
+import * as t from '@babel/types';
+import type { PageMetadata, PageNode } from '@onlook/models/pages';
 import { promises as fs } from 'fs';
 import { nanoid } from 'nanoid';
 import * as path from 'path';
@@ -10,6 +13,87 @@ import {
     ROOT_PATH_IDENTIFIERS,
 } from './helpers';
 
+export async function extractMetadata(filePath: string): Promise<PageMetadata | undefined> {
+    try {
+        const content = await fs.readFile(filePath, 'utf-8');
+
+        // Parse the file content using Babel
+        const ast = parse(content, {
+            sourceType: 'module',
+            plugins: ['typescript', 'jsx'],
+        });
+
+        let metadata: PageMetadata | undefined;
+
+        // Traverse the AST to find metadata export
+        traverse(ast, {
+            ExportNamedDeclaration(path) {
+                const declaration = path.node.declaration;
+                if (t.isVariableDeclaration(declaration)) {
+                    const declarator = declaration.declarations[0];
+                    if (
+                        t.isIdentifier(declarator.id) &&
+                        declarator.id.name === 'metadata' &&
+                        t.isObjectExpression(declarator.init)
+                    ) {
+                        metadata = {};
+                        // Extract properties from the object expression
+                        for (const prop of declarator.init.properties) {
+                            if (t.isObjectProperty(prop) && t.isIdentifier(prop.key)) {
+                                const key = prop.key.name;
+                                if (t.isStringLiteral(prop.value)) {
+                                    (metadata as any)[key] = prop.value.value;
+                                } else if (t.isObjectExpression(prop.value)) {
+                                    (metadata as any)[key] = extractObjectValue(prop.value);
+                                } else if (t.isArrayExpression(prop.value)) {
+                                    (metadata as any)[key] = extractArrayValue(prop.value);
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+        });
+
+        return metadata;
+    } catch (error) {
+        console.error(`Error reading metadata from ${filePath}:`, error);
+        return undefined;
+    }
+}
+
+function extractObjectValue(obj: t.ObjectExpression): any {
+    const result: any = {};
+    for (const prop of obj.properties) {
+        if (t.isObjectProperty(prop) && t.isIdentifier(prop.key)) {
+            const key = prop.key.name;
+            if (t.isStringLiteral(prop.value)) {
+                result[key] = prop.value.value;
+            } else if (t.isObjectExpression(prop.value)) {
+                result[key] = extractObjectValue(prop.value);
+            } else if (t.isArrayExpression(prop.value)) {
+                result[key] = extractArrayValue(prop.value);
+            }
+        }
+    }
+    return result;
+}
+
+function extractArrayValue(arr: t.ArrayExpression): any[] {
+    return arr.elements
+        .map((element) => {
+            if (t.isStringLiteral(element)) {
+                return element.value;
+            } else if (t.isObjectExpression(element)) {
+                return extractObjectValue(element);
+            } else if (t.isArrayExpression(element)) {
+                return extractArrayValue(element);
+            }
+            return null;
+        })
+        .filter(Boolean);
+}
+
 async function scanAppDirectory(dir: string, parentPath: string = ''): Promise<PageNode[]> {
     const nodes: PageNode[] = [];
     const entries = await fs.readdir(dir, { withFileTypes: true });
@@ -38,6 +122,28 @@ async function scanAppDirectory(dir: string, parentPath: string = ''): Promise<P
         cleanPath = '/' + cleanPath.replace(/^\/|\/$/g, '');
 
         const isRoot = ROOT_PATH_IDENTIFIERS.includes(cleanPath);
+
+        // Extract metadata from both page and layout files
+        const pageMetadata = await extractMetadata(path.join(dir, pageFile.name));
+
+        // Look for layout file in the same directory
+        const layoutFile = entries.find(
+            (entry) =>
+                entry.isFile() &&
+                entry.name.startsWith('layout.') &&
+                ALLOWED_EXTENSIONS.includes(path.extname(entry.name)),
+        );
+
+        const layoutMetadata = layoutFile
+            ? await extractMetadata(path.join(dir, layoutFile.name))
+            : undefined;
+
+        // Merge metadata, with page metadata taking precedence over layout metadata
+        const metadata = {
+            ...layoutMetadata,
+            ...pageMetadata,
+        };
+
         nodes.push({
             id: nanoid(),
             name: isDynamicRoute
@@ -49,6 +155,7 @@ async function scanAppDirectory(dir: string, parentPath: string = ''): Promise<P
             children: [],
             isActive: false,
             isRoot,
+            metadata,
         });
     }
 
@@ -110,6 +217,9 @@ async function scanPagesDirectory(dir: string, parentPath: string = ''): Promise
 
             const isRoot = ROOT_PATH_IDENTIFIERS.includes(cleanPath);
 
+            // Extract metadata from the page file
+            const metadata = await extractMetadata(path.join(dir, entry.name));
+
             nodes.push({
                 id: nanoid(),
                 name:
@@ -122,6 +232,7 @@ async function scanPagesDirectory(dir: string, parentPath: string = ''): Promise
                 children: [],
                 isActive: false,
                 isRoot,
+                metadata,
             });
         }
     }