move all react html generation to components folder
This commit is contained in:
parent
aaa235d397
commit
630bff0483
|
@ -1,10 +1,13 @@
|
|||
/*
|
||||
* react html for adminpage
|
||||
* Html for adminpage
|
||||
*
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/server';
|
||||
|
||||
import Html from './Html';
|
||||
|
||||
const Admin = () => (
|
||||
<form method="post" action="admintools" encType="multipart/form-data">
|
||||
|
@ -36,4 +39,11 @@ const Admin = () => (
|
|||
</form>
|
||||
);
|
||||
|
||||
export default Admin;
|
||||
const data = {
|
||||
title: 'PixelPlanet.fun AdminTools',
|
||||
description: 'admin access on pixelplanet',
|
||||
body: <Admin />,
|
||||
};
|
||||
const adminHtml = `<!doctype html>${ReactDOM.renderToStaticMarkup(<Html {...data} />)}`;
|
||||
|
||||
export default adminHtml;
|
||||
|
|
46
src/components/Main.js
Normal file
46
src/components/Main.js
Normal file
|
@ -0,0 +1,46 @@
|
|||
/*
|
||||
* Html for mainpage
|
||||
*
|
||||
* @flow
|
||||
*/
|
||||
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/server';
|
||||
|
||||
import Html from './Html';
|
||||
import assets from './assets.json';
|
||||
import { ASSET_SERVER } from '../core/config';
|
||||
|
||||
const data = {
|
||||
title: 'PixelPlanet.fun',
|
||||
description: 'Place color pixels on an map styled canvas ' +
|
||||
'with other players online',
|
||||
// styles: [
|
||||
// { id: 'css', cssText: baseCss },
|
||||
// ],
|
||||
scripts: [
|
||||
ASSET_SERVER + assets.vendor.js,
|
||||
ASSET_SERVER + assets.client.js,
|
||||
],
|
||||
useRecaptcha: true,
|
||||
};
|
||||
|
||||
/*
|
||||
* generates string with html of main page
|
||||
* including setting global variables for countryCoords
|
||||
* and assetserver
|
||||
* @param countryCoords Cell with coordinates of client country
|
||||
* @return html of mainpage
|
||||
*/
|
||||
function generateMainPage(countryCoords: Cell): string {
|
||||
const [x, y] = countryCoords;
|
||||
const code =
|
||||
`window.coordx=${x};window.coordy=${y};window.assetserver="${ASSET_SERVER}";`;
|
||||
const htmldata = { ...data, code };
|
||||
const html = ReactDOM.renderToStaticMarkup(<Html {...htmldata} />);
|
||||
|
||||
return `<!doctype html>${html}`;
|
||||
}
|
||||
|
||||
export default generateMainPage;
|
|
@ -11,8 +11,6 @@ import type { Request, Response } from 'express';
|
|||
import bodyParser from 'body-parser';
|
||||
import sharp from 'sharp';
|
||||
import multer from 'multer';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/server';
|
||||
|
||||
import { getIPFromRequest } from '../utils/ip';
|
||||
import { getIdFromObject } from '../core/utils';
|
||||
|
@ -26,23 +24,12 @@ import { MINUTE } from '../core/constants';
|
|||
import canvases from '../canvases.json';
|
||||
import { imageABGR2Canvas } from '../core/Image';
|
||||
|
||||
import Html from '../components/Html';
|
||||
import Admin from '../components/Admin';
|
||||
import adminHtml from '../components/Admin';
|
||||
|
||||
|
||||
const router = express.Router();
|
||||
const limiter = expressLimiter(router, redis);
|
||||
|
||||
/*
|
||||
* build html of admin page with react
|
||||
*/
|
||||
const data = {
|
||||
title: 'PixelPlanet.fun AdminTools',
|
||||
description: 'admin access on pixelplanet',
|
||||
body: <Admin />,
|
||||
};
|
||||
const index = `<!doctype html>${ReactDOM.renderToStaticMarkup(<Html {...data} />)}`;
|
||||
|
||||
|
||||
/*
|
||||
* multer middleware for getting POST parameters
|
||||
|
@ -246,7 +233,7 @@ router.use(async (req: Request, res: Response) => {
|
|||
res.set({
|
||||
'Content-Type': 'text/html',
|
||||
});
|
||||
res.status(200).send(index);
|
||||
res.status(200).send(adminHtml);
|
||||
});
|
||||
|
||||
|
||||
|
|
32
src/web.js
32
src/web.js
|
@ -5,14 +5,11 @@ import compression from 'compression';
|
|||
import express from 'express';
|
||||
import http from 'http';
|
||||
import etag from 'etag';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/server';
|
||||
import expressValidator from 'express-validator';
|
||||
|
||||
|
||||
// import baseCss from './components/base.tcss';
|
||||
import forceGC from './core/forceGC';
|
||||
import Html from './components/Html';
|
||||
import assets from './assets.json'; // eslint-disable-line import/no-unresolved
|
||||
import logger from './core/logger';
|
||||
import models from './data/models';
|
||||
|
@ -25,6 +22,7 @@ import {
|
|||
resetPassword,
|
||||
} from './routes';
|
||||
import globeHtml from './components/Globe';
|
||||
import generateMainPage from './components/Main';
|
||||
|
||||
import { SECOND, MONTH } from './core/constants';
|
||||
import { PORT, ASSET_SERVER, DISCORD_INVITE } from './core/config';
|
||||
|
@ -117,7 +115,7 @@ app.use('/reset_password', resetPassword);
|
|||
|
||||
|
||||
//
|
||||
// 3D Globe
|
||||
// 3D Globe (react generated)
|
||||
// -----------------------------------------------------------------------------
|
||||
const globeEtag = etag(
|
||||
`${assets.globe.js}`,
|
||||
|
@ -130,7 +128,7 @@ app.get('/globe', async (req, res) => {
|
|||
ETag: indexEtag,
|
||||
});
|
||||
|
||||
if (req.headers['if-none-match'] === indexEtag) {
|
||||
if (req.headers['if-none-match'] === globeEtag) {
|
||||
res.status(304).end();
|
||||
return;
|
||||
}
|
||||
|
@ -140,21 +138,8 @@ app.get('/globe', async (req, res) => {
|
|||
|
||||
|
||||
//
|
||||
// Register server-side rendering middleware
|
||||
// Main Page (react generated)
|
||||
// -----------------------------------------------------------------------------
|
||||
const data = {
|
||||
title: 'PixelPlanet.fun',
|
||||
description: 'Place color pixels on an map styled canvas ' +
|
||||
'with other players online',
|
||||
// styles: [
|
||||
// { id: 'css', cssText: baseCss },
|
||||
// ],
|
||||
scripts: [
|
||||
ASSET_SERVER + assets.vendor.js,
|
||||
ASSET_SERVER + assets.client.js,
|
||||
],
|
||||
useRecaptcha: true,
|
||||
};
|
||||
const indexEtag = etag(
|
||||
`${assets.vendor.js},${assets.client.js}`,
|
||||
{ weak: true },
|
||||
|
@ -174,14 +159,9 @@ app.get('/', async (req, res) => {
|
|||
|
||||
// get start coordinates based on cloudflare header country
|
||||
const country = req.headers['cf-ipcountry'];
|
||||
const [x, y] = (country) ? ccToCoords(country) : [0, 0];
|
||||
const code =
|
||||
`window.coordx=${x};window.coordy=${y};window.assetserver="${ASSET_SERVER}";`;
|
||||
const htmldata = { ...data, code };
|
||||
const html = ReactDOM.renderToStaticMarkup(<Html {...htmldata} />);
|
||||
const index = `<!doctype html>${html}`;
|
||||
const countryCoords = (country) ? ccToCoords(country) : [0, 0];
|
||||
|
||||
res.status(200).send(index);
|
||||
res.status(200).send(generateMainPage(countryCoords));
|
||||
});
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user