0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-03-22 08:58:11 +00:00

dev base (kinda stable)

This commit is contained in:
Víctor Losada Hernández
2026-01-30 12:41:14 +01:00
parent 86f3d5c290
commit 20678ba420
10 changed files with 755 additions and 564 deletions

View File

@@ -0,0 +1,12 @@
import React from 'react'
import { hydrateRoot } from 'react-dom/client';
import Admin from './admin.jsx';
import './admin/admin.less'
window.start_app = (props) => {
hydrateRoot(
document.getElementById('reactRoot'),
<Admin {...props} />
)
}

View File

@@ -0,0 +1,13 @@
import React from 'react'
import { hydrateRoot } from 'react-dom/client'
import Homebrew from './homebrew/homebrew.jsx'
// CSS MUST be imported here
import './homebrew/homebrew.less' // or wherever your CSS lives
window.start_app = (props) => {
hydrateRoot(
document.getElementById('reactRoot'),
<Homebrew {...props} />
)
}

View File

@@ -1,4 +1,4 @@
import { renderToString } from 'react-dom/server'; import { renderToString } from 'react-dom/server';
import Admin from './admin.jsx'; import Admin from './admin/admin.jsx';
export default (props) => renderToString(<Admin {...props} />); export default (props) => renderToString(<Admin {...props} />);

View File

@@ -1,33 +1,66 @@
const template = async function(name, title='', props = {}){ import fs from "fs";
const isProd = process.env.NODE_ENV === "production";
const template = async function ({ vite, url }, name, title = "", props = {}) {
const ogTags = []; const ogTags = [];
const ogMeta = props.ogMeta ?? {}; const ogMeta = props.ogMeta ?? {};
Object.entries(ogMeta).forEach(([key, value])=>{
if(!value) return; Object.entries(ogMeta).forEach(([key, value]) => {
const tag = `<meta property="og:${key}" content="${value}">`; if (!value) return;
ogTags.push(tag); ogTags.push(`<meta property="og:${key}" content="${value}">`);
}); });
const ogMetaTags = ogTags.join('\n');
const ssrModule = await import(`../build/entry-server-${name}/bundle.js`); const ogMetaTags = ogTags.join("\n");
return `<!DOCTYPE html> // ----------------
<html> // PROD
<head> // ----------------
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, interactive-widget=resizes-visual" /> if (isProd) {
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" /> const ssrModule = await import(`../build/entry-server-${name}/bundle.js`);
<link href=${`/${name}/bundle.css`} type="text/css" rel='stylesheet' />
<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" /> return `<!DOCTYPE html>
${ogMetaTags} <html>
<meta name="twitter:card" content="summary"> <head>
<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title> <meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, interactive-widget=resizes-visual" />
</head> <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
<body> <link href="/${name}/bundle.css" rel="stylesheet" />
<main id="reactRoot">${ssrModule.default(props)}</main> <link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
<script src=${`/${name}/bundle.js`}></script> ${ogMetaTags}
<script>start_app(${JSON.stringify(props)})</script> <meta name="twitter:card" content="summary">
</body> <title>${title.length ? `${title} - The Homebrewery` : "The Homebrewery - NaturalCrit"}</title>
</html> </head>
`; <body>
<main id="reactRoot">${ssrModule.default(props)}</main>
<script src="/${name}/bundle.js"></script>
<script>start_app(${JSON.stringify(props)})</script>
</body>
</html>`;
}
// ----------------
// DEV
// ----------------
const { default: render } = await vite.ssrLoadModule(`/client/entry-server-${name}.jsx`);
let html = `<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, interactive-widget=resizes-visual" />
${ogMetaTags}
<title>${title.length ? `${title} - The Homebrewery` : "The Homebrewery - NaturalCrit"}</title>
</head>
<body>
<main id="reactRoot">${render(props)}</main>
<script type="module" src="/@vite/client"></script>
<script type="module" src="/client/entry-client-${name}.jsx"></script>
</body>
</html>`;
return vite.transformIndexHtml(url, html);
}; };
export default template; export default template;

6
package-lock.json generated
View File

@@ -5268,9 +5268,9 @@
} }
}, },
"node_modules/ci-info": { "node_modules/ci-info": {
"version": "4.3.1", "version": "4.4.0",
"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
"integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==", "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {

View File

@@ -12,11 +12,13 @@
"url": "git://github.com/naturalcrit/homebrewery.git" "url": "git://github.com/naturalcrit/homebrewery.git"
}, },
"scripts": { "scripts": {
"viteDev": "node scripts/dev.js", "viteDev1": "node scripts/dev.js",
"viteDev2": "vite dev",
"viteDevAdmin": "vite --config vite.config.js --ssr client/admin/admin.jsx", "viteDevAdmin": "vite --config vite.config.js --ssr client/admin/admin.jsx",
"viteBuild": "vite build", "viteBuild": "vite build && node scripts/compileAssets.js",
"viteStart": "vite preview --outDir build", "viteStart": "vite preview --outDir build",
"start": "node server.js", "start": "node server.js",
"compileAssets": "node scripts/compileAssets.js --dev",
"dev": "node --experimental-require-module scripts/dev.js", "dev": "node --experimental-require-module scripts/dev.js",
"quick": "node --experimental-require-module scripts/quick.js", "quick": "node --experimental-require-module scripts/quick.js",
"build": "node --experimental-require-module scripts/buildHomebrew.js && node --experimental-require-module scripts/buildAdmin.js", "build": "node --experimental-require-module scripts/buildHomebrew.js && node --experimental-require-module scripts/buildAdmin.js",

90
scripts/compileAssets.js Normal file
View File

@@ -0,0 +1,90 @@
import fs from "fs-extra";
import less from "less";
const isDev = !!process.argv.find((arg) => arg === "--dev");
const compileAssets = async () => {
await fs.copy("./client/homebrew/favicon.ico", "./build/assets/favicon.ico");
//v==----------------------------- COMPILE THEMES --------------------------------==v//
// Update list of all Theme files
const themes = { Legacy: {}, V3: {} };
let themeFiles = fs.readdirSync("./themes/Legacy");
for (const dir of themeFiles) {
const themeData = JSON.parse(fs.readFileSync(`./themes/Legacy/${dir}/settings.json`).toString());
themeData.path = dir;
themes.Legacy[dir] = themeData;
//fs.copy(`./themes/Legacy/${dir}/dropdownTexture.png`, `./build/themes/Legacy/${dir}/dropdownTexture.png`);
const src = `./themes/Legacy/${dir}/style.less`;
((outputDirectory) => {
less.render(
fs.readFileSync(src).toString(),
{
compress: !isDev,
},
function (e, output) {
fs.outputFile(outputDirectory, output.css);
},
);
})(`./build/themes/Legacy/${dir}/style.css`);
}
themeFiles = fs.readdirSync("./themes/V3");
for (const dir of themeFiles) {
const themeData = JSON.parse(fs.readFileSync(`./themes/V3/${dir}/settings.json`).toString());
themeData.path = dir;
themes.V3[dir] = themeData;
fs.copy(`./themes/V3/${dir}/dropdownTexture.png`, `./build/themes/V3/${dir}/dropdownTexture.png`);
fs.copy(`./themes/V3/${dir}/dropdownPreview.png`, `./build/themes/V3/${dir}/dropdownPreview.png`);
const src = `./themes/V3/${dir}/style.less`;
((outputDirectory) => {
less.render(
fs.readFileSync(src).toString(),
{
compress: !isDev,
},
function (e, output) {
fs.outputFile(outputDirectory, output.css);
},
);
})(`./build/themes/V3/${dir}/style.css`);
}
await fs.outputFile("./themes/themes.json", JSON.stringify(themes, null, 2));
// await less.render(lessCode, {
// compress : !dev,
// sourceMap : (dev ? {
// sourceMapFileInline: true,
// outputSourceFiles: true
// } : false),
// })
// Move assets
await fs.copy("./themes/fonts", "./build/fonts");
await fs.copy("./themes/assets", "./build/assets");
await fs.copy("./client/icons", "./build/icons");
//v==---------------------------MOVE CM EDITOR THEMES -----------------------------==v//
const editorThemesBuildDir = "./build/homebrew/cm-themes";
await fs.copy("./node_modules/codemirror/theme", editorThemesBuildDir);
await fs.copy("./themes/codeMirror/customThemes", editorThemesBuildDir);
const editorThemeFiles = fs.readdirSync(editorThemesBuildDir);
const editorThemeFile = "./themes/codeMirror/editorThemes.json";
if (fs.existsSync(editorThemeFile)) fs.rmSync(editorThemeFile);
const stream = fs.createWriteStream(editorThemeFile, { flags: "a" });
stream.write('[\n"default"');
for (const themeFile of editorThemeFiles) {
stream.write(`,\n"${themeFile.slice(0, -4)}"`);
}
stream.write("\n]\n");
stream.end();
await fs.copy("./themes/codeMirror", "./build/homebrew/codeMirror");
};
compileAssets();

View File

@@ -1,20 +1,47 @@
import DB from './server/db.js'; import DB from "./server/db.js";
import server from './server/app.js'; import createApp from "./server/app.js";
import config from './server/config.js'; import config from "./server/config.js";
import { createServer as createViteServer } from "vite";
DB.connect(config).then(()=>{ const isProd = process.env.NODE_ENV === "production";
// Ensure that we have successfully connected to the database
// before launching server async function start() {
const PORT = process.env.PORT || config.get('web_port') || 8000; let vite;
server.listen(PORT, ()=>{
const reset = '\x1b[0m'; // Reset to default style //==== Create Vite dev server only in development ====//
const bright = '\x1b[1m'; // Bright (bold) style if (!isProd) {
const cyan = '\x1b[36m'; // Cyan color vite = await createViteServer({
const underline = '\x1b[4m'; // Underlined style server: { middlewareMode: true },
appType: "custom",
logLevel: 'error',
});
}
//==== Connect to the database ====//
await DB.connect(config).catch((err) => {
console.error("Database connection failed:", err);
process.exit(1);
});
//==== Create the Express app ====//
const app = await createApp(vite);
//==== Start listening ====//
const PORT = process.env.PORT || config.get("web_port") || 8000;
app.listen(PORT, () => {
const reset = "\x1b[0m"; // Reset to default style
const bright = "\x1b[1m"; // Bright (bold) style
const cyan = "\x1b[36m"; // Cyan color
const underline = "\x1b[4m"; // Underlined style
console.log(`\n\tserver started at: ${new Date().toLocaleString()}`); console.log(`\n\tserver started at: ${new Date().toLocaleString()}`);
console.log(`\tserver on port: ${PORT}`); console.log(`\tserver on port: ${PORT}`);
console.log(`\t${bright + cyan}Open in browser: ${reset}${underline + bright + cyan}http://localhost:${PORT}${reset}\n\n`); console.log(
`\t${bright + cyan}Open in browser: ${reset}${underline + bright + cyan}http://localhost:${PORT}${reset}\n\n`,
);
}); });
}); }
//==== Start the server ====//
start();

File diff suppressed because it is too large Load Diff

View File

@@ -23,6 +23,7 @@ export default defineConfig({
}, },
}, },
server: { server: {
port:8000,
fs: { fs: {
allow: ["."], allow: ["."],
}, },