From f9307986cd9f519848cbac62093b23b37b684d7d Mon Sep 17 00:00:00 2001
From: David Bolack <dbolack@gmail.com>
Date: Thu, 22 Feb 2024 23:06:40 -0600
Subject: [PATCH] WIP

@import statements are just not working. Uploaded for other eyes.
---
 client/homebrew/brewRenderer/brewRenderer.jsx | 17 ++++++++++++----
 server/app.js                                 |  8 +++++++-
 server/homebrew.api.js                        | 20 +++++++++----------
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index 9208a2b90..f2216c52b 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -176,10 +176,19 @@ const BrewRenderer = (props)=>{
 		document.dispatchEvent(new MouseEvent('click'));
 	};
 
-	const rendererPath  = props.renderer == 'V3' ? 'V3' : 'Legacy';
+	let rendererPath  = props.renderer == 'V3' ? 'V3' : 'Legacy';
 	const themePath     = props.theme ?? '5ePHB';
 	const baseThemePath = Themes[rendererPath][themePath].baseTheme;
 
+	// Override static theme values if a Brew theme.
+
+	if(themePath[0] == '#') {
+		themePath.slice(1);
+		rendererPath = '';
+	} else {
+		rendererPath += '/';
+	}
+
 	return (
 		<>
 			{/*render dummy page while iFrame is mounting.*/}
@@ -206,11 +215,11 @@ const BrewRenderer = (props)=>{
 						<RenderWarnings />
 						<NotificationPopup />
 					</div>
-					<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
+					<link href={`/css/${rendererPath}Blank`} rel='stylesheet'/>
 					{baseThemePath &&
-						<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
+						<link href={`/css/${rendererPath}${baseThemePath}`} rel='stylesheet'/>
 					}
-					<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
+					<link href={`/css/${rendererPath}${themePath}`} rel='stylesheet'/>
 
 					{/* Apply CSS from Style tab and render pages from Markdown tab */}
 					{state.isMounted
diff --git a/server/app.js b/server/app.js
index af842f2bf..7d1eaf577 100644
--- a/server/app.js
+++ b/server/app.js
@@ -9,7 +9,7 @@ const yaml = require('js-yaml');
 const app = express();
 const config = require('./config.js');
 
-const { homebrewApi, getBrew } = require('./homebrew.api.js');
+const { homebrewApi, getBrew, getBrewThemeWithCSS, getStaticTheme} = require('./homebrew.api.js');
 const GoogleActions = require('./googleActions.js');
 const serveCompressedStaticAssets = require('./static-assets.mv.js');
 const sanitizeFilename = require('sanitize-filename');
@@ -120,6 +120,12 @@ app.get('/robots.txt', (req, res)=>{
 	return res.sendFile(`robots.txt`, { root: process.cwd() });
 });
 
+// Theme
+
+app.get('/css/:id', asyncHandler(getBrew('edit', true)),  asyncHandler(getBrewThemeWithCSS));
+app.get('/css/:engine/:id/', asyncHandler(getStaticTheme));
+
+
 //Home page
 app.get('/', (req, res, next)=>{
 	req.brew = {
diff --git a/server/homebrew.api.js b/server/homebrew.api.js
index 36b885cb0..f01c7320c 100644
--- a/server/homebrew.api.js
+++ b/server/homebrew.api.js
@@ -238,12 +238,12 @@ const api = {
 	getBrewThemeWithCSS : async (req, res)=>{
 		const brew = req.brew;
 		splitTextStyleAndMetadata(brew);
-		if(res.hasOwnProperty('set')) {
-			res.set('Content-Type', 'text/css');
-		}
+		// if(res.hasOwnProperty('set')) {
+		// 	res.set('Content-Type', 'text/css');
+		// }
 		const staticTheme = `/api/css/${req.brew.renderer}/${req.brew.theme}/styles.css`;
 		const userTheme = `/api/css/${req.brew.theme.slice(1)}`;
-		const parentThemeImport = `// From Theme: ${req.brew.title}\n\n@import ${req.brew.theme[0] != '#' ? staticTheme : userTheme}\n\n`;
+		const parentThemeImport = `@import url(\"${req.brew.theme[0] != '#' ? staticTheme : userTheme}\");\n\n// From Theme: ${req.brew.title}\n\n`;
 		return res.status(200).send(`${req.brew.renderer == 'legacy' ? '' : parentThemeImport}${req.brew.style}`);
 	},
 	getStaticTheme : async(req, res)=>{
@@ -251,11 +251,11 @@ const api = {
 		if(themeParent === undefined){
 			res.status(404).send(`Invalid Theme - Engine: ${req.params.engine}, Name: ${req.params.id}`);
 		} else {
-			if(res.hasOwnProperty('set')) {
-				res.set('Content-Type', 'text/css');
-			}
-			const parentTheme = themeParent ? `@import /api/css/${req.params.engine}/${themeParent}\n` : '';
-			return res.status(200).send(`${parentTheme}@import /themes/${req.params.engine}/${req.params.id}/style.css\n`);
+			// if(res.hasOwnProperty('set')) {
+			// 	res.set('Content-Type', 'text/css');
+			// }
+			const parentTheme = themeParent ? `@import url(\"/css/${req.params.engine}/${themeParent}\");\n` : '';
+			return res.status(200).send(`${parentTheme}@import url(\"/themes/${req.params.engine}/${req.params.id}/style.css\");\n`);
 		}
 	},
 	updateBrew : async (req, res)=>{
@@ -418,7 +418,5 @@ router.put('/api/:id', asyncHandler(api.getBrew('edit', true)), asyncHandler(api
 router.put('/api/update/:id', asyncHandler(api.getBrew('edit', true)), asyncHandler(api.updateBrew));
 router.delete('/api/:id', asyncHandler(api.deleteBrew));
 router.get('/api/remove/:id', asyncHandler(api.deleteBrew));
-router.get('/api/css/:id', asyncHandler(api.getBrew('edit', true)),  asyncHandler(api.getBrewThemeWithCSS));
-router.get('/api/css/:engine/:id/', asyncHandler(api.getStaticTheme));
 
 module.exports = api;