Improve HTML Rendering #2

TheOnlyWayUp · 2024-04-27T01:40:43Z

WP-DM-Export/src/Frontend/src/routes/list/+page.svelte

Lines 54 to 121 in 0ee014e

    
           	function generate_html(username) { 
        
           		let tailwind_import = '<script src="https://cdn.tailwindcss.com"></' + 'script' + '>'; 
        
           		let template = `<html> 
        
           <head> 
        
           <title>Conversation with ${username}</title> 
        
           ${tailwind_import} 
        
           </head> 
        
           <body class="bg-slate-300">`; 
        
           		let sent = ` 
        
           <div class="w-screen my-3 place-items-end grid"> 
        
           <div class="grid-cols-2 grid w-fit place-items-center"> 
        
           <div class="flex flex-col text-right max-w-md"> 
        
           <p class="text-slate-650 ">{username}</p> 
        
           <p class="bg-slate-100 p-2 rounded-lg max-w-md text-wrap rounded-tr-none ">{content}</p> 
        
           <p class="text-slate-500">{date}</p> 
        
           </div> 
        
           <img src="{avatar}" alt="{username}'s Display Picture" class="rounded-full w-[48px] h-[48px]"> 
        
           </div>`; 
        
           		let received = ` 
        
           <div class="w-screen my-3"> 
        
           <div class="grid-cols-2 grid w-fit place-items-center"> 
        
           <img src="{avatar}" alt="{username}'s Display Picture" class="rounded-full w-[48px] h-[48px]"> 
        
           <div class="flex flex-col max-w-md"> 
        
           <p class="text-slate-650">{username}</p> 
        
           <p class="bg-slate-100 p-2 rounded-lg max-w-md text-wrap rounded-tl-none">{content}</p> 
        
           <p class="text-slate-500">{date}</p> 
        
           </div> 
        
           </div> 
        
           `; 
        
           		let end = `</body> 
        
           </html>`; 
        
           		let content = ''; 
        
           		let data = responses[username][0]; 
        
           		let messages = []; 
        
           		data.forEach((api_data) => { 
        
           			api_data.forEach((message) => { 
        
           				messages.push(message); 
        
           			}); 
        
           		}); 
        
           		content = content + template; 
        
           		messages.reverse().forEach((message) => { 
        
           			if (message.from.name.toLowerCase() == username.toLowerCase()) { 
        
           				content = 
        
           					content + 
        
           					received 
        
           						.replaceAll('{username}', message.from.name) 
        
           						.replaceAll('{content}', message.body) 
        
           						.replaceAll('{date}', message.createDate) 
        
           						.replaceAll('{avatar}', message.from.avatar); 
        
           			} else { 
        
           				content = 
        
           					content + 
        
           					sent 
        
           						.replaceAll('{username}', message.from.name) 
        
           						.replaceAll('{content}', message.body) 
        
           						.replaceAll('{date}', message.createDate) 
        
           						.replaceAll('{avatar}', message.from.avatar); 
        
           			} 
        
           		}); 
        
           		content = content + end; 
        
           		return content; 
        
           	}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve HTML Rendering #2

Improve HTML Rendering #2

TheOnlyWayUp commented Apr 27, 2024

Improve HTML Rendering #2

Improve HTML Rendering #2

Comments

TheOnlyWayUp commented Apr 27, 2024