bro-js/bro.landing
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update package dependencies for Emotion and Chakra UI. Enhance SSR rendering to include Chakra UI styles and improve HTML output for index.html and terms.html.
All checks were successful
platform/bro-js/bro.landing/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Primakov Alexandr Alexandrovich
2025-10-24 13:08:02 +03:00
parent 82613194f3
commit 3b997a18e2
3 changed files with 271 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
scripts/ssr-render.js
View File

@@ -51,14 +51,52 @@ try {
// Импортируем компоненты
const { UnderConstruction } = require('../src/pages/under-construction/underConstruction.tsx');
const { Terms } = require('../src/pages/terms/Terms.tsx');
const { ChakraProvider, extendTheme } = require('@chakra-ui/react');
console.log('✅ Компоненты загружены');
// Рендерим компоненты в HTML
const homeContent = renderToString(React.createElement(UnderConstruction));
const termsContent = renderToString(React.createElement(Terms));
// Функция для рендера с Chakra UI + базовыми стилями
function renderWithStyles(Component) {
// Chakra theme с базовыми стилями
const theme = extendTheme({});
// Генерируем базовые CSS переменные и стили Chakra
const baseStyles = `
<style data-emotion="chakra-global">
:root,:host{--chakra-vh:100vh}@supports(height:100dvh){:root,:host{--chakra-vh:100dvh}}
:root{color-scheme:light;--chakra-colors-chakra-body-text:#1A202C;--chakra-colors-chakra-body-bg:#fff;
--chakra-colors-chakra-border-color:#E2E8F0;--chakra-colors-chakra-placeholder-color:#A0AEC0}
body{background:var(--chakra-colors-chakra-body-bg);color:var(--chakra-colors-chakra-body-text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;line-height:1.5}
.chakra-container{width:100%;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
.chakra-stack>*:not(style)~*:not(style){margin-top:1.5rem;margin-inline-start:0}
.chakra-heading{font-weight:700;font-size:1.875rem;line-height:2.25rem;margin-bottom:0.5rem}
.chakra-text{margin:0;margin-bottom:0.5rem}
.chakra-link{color:#3182ce;text-decoration:none}
.chakra-link:hover{text-decoration:underline}
.chakra-divider{border-color:var(--chakra-colors-chakra-border-color);border-style:solid;
border-width:0;border-bottom-width:1px;margin-top:1rem;margin-bottom:1rem}
ul,ol{margin-left:1.5rem;margin-bottom:1rem}
li{margin-bottom:0.5rem}
hr{border-top-width:1px;border-color:#E2E8F0}
</style>`;
console.log('✅ Компоненты отрендерены');
const html = renderToString(
React.createElement(
ChakraProvider,
{ theme, cssVarsRoot: 'body' },
React.createElement(Component)
)
);
return { html, styles: baseStyles };
}
// Рендерим компоненты с извлечением стилей
const { html: homeContent, styles: homeStyles } = renderWithStyles(UnderConstruction);
const { html: termsContent, styles: termsStyles } = renderWithStyles(Terms);
console.log('✅ Компоненты отрендерены с Chakra UI + Emotion стилями');
// Читаем dist/index.html
const distPath = path.resolve(__dirname, '../dist');
@@ -68,14 +106,17 @@ try {
// 1. Главная страница
const searchString = '<div id="app"></div>';
if (indexHtml.includes(searchString)) {
indexHtml = indexHtml.replace(searchString, `<div id="app">${homeContent}</div>`);
indexHtml = indexHtml
.replace(searchString, `<div id="app">${homeContent}</div>`)
.replace('</head>', `${homeStyles}</head>`);
fs.writeFileSync(indexPath, indexHtml, 'utf-8');
console.log('✅ index.html обновлен с SSR контентом');
console.log('✅ index.html обновлен с SSR контентом и стилями');
}
// 2. Страница terms
let termsHtml = indexHtml
.replace(homeContent, termsContent)
.replace(homeStyles, termsStyles)
.replace('<title>bro-js admin</title>', '<title>Пользовательское соглашение - BROJS.RU</title>')
.replace(
'</head>',
@@ -84,11 +125,12 @@ try {
const termsPath = path.join(distPath, 'terms.html');
fs.writeFileSync(termsPath, termsHtml, 'utf-8');
console.log('✅ terms.html создан с SSR контентом');
console.log('✅ terms.html создан с SSR контентом и стилями');
console.log('🎉 SSR завершен успешно!');
console.log('📄 Созданы: index.html, terms.html');
console.log('💡 Весь контент отрендерен через React SSR');
console.log('🎨 Критические стили Emotion встроены в HTML');
} catch (error) {
console.error('❌ Ошибка при SSR:', error.message);