Create a gist now

Instantly share code, notes, and snippets.

@methane /render.go
Last active Oct 24, 2016

package main
import (
"bytes"
"encoding/json"
"fmt"
"io/ioutil"
"os"
"time"
)
type Point struct {
ID int64 `json:"id" db:"id"`
StrokeID int64 `json:"stroke_id" db:"stroke_id"`
X float64 `json:"x" db:"x"`
Y float64 `json:"y" db:"y"`
}
type Stroke struct {
ID int64 `json:"id" db:"id"`
RoomID int64 `json:"room_id" db:"room_id"`
Width int `json:"width" db:"width"`
Red int `json:"red" db:"red"`
Green int `json:"green" db:"green"`
Blue int `json:"blue" db:"blue"`
Alpha float64 `json:"alpha" db:"alpha"`
CreatedAt time.Time `json:"created_at" db:"created_at"`
Points []Point `json:"points" db:"points"`
}
type Room struct {
ID int64 `json:"id" db:"id"`
Name string `json:"name" db:"name"`
CanvasWidth int `json:"canvas_width" db:"canvas_width"`
CanvasHeight int `json:"canvas_height" db:"canvas_height"`
CreatedAt time.Time `json:"created_at" db:"created_at"`
Strokes []Stroke `json:"strokes"`
StrokeCount int `json:"stroke_count"`
WatcherCount int `json:"watcher_count"`
}
type Data struct {
Room *Room `json:"room"`
}
func render(room *Room) []byte {
buf := bytes.NewBuffer(make([]byte, 0, 1024))
fmt.Fprintf(buf,
`<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="%d" height="%d" style="width:%dpx;height:%dpx;background-color:white;" viewBox="0 0 %d %d">`,
room.CanvasWidth, room.CanvasHeight,
room.CanvasWidth, room.CanvasHeight,
room.CanvasWidth, room.CanvasHeight)
for _, stroke := range room.Strokes {
fmt.Fprintf(buf,
`<polyline id="%d" stroke="rgba(%d,%d,%d,%v)" stroke-width="%d" stroke-linecap="round" stroke-linejoin="round" fill="none" points="`,
stroke.ID, stroke.Red, stroke.Green, stroke.Blue, stroke.Alpha, stroke.Width)
first := true
for _, point := range stroke.Points {
if !first {
buf.WriteByte(' ')
}
fmt.Fprintf(buf, `%.4f,%.4f`, point.X, point.Y)
first = false
}
buf.WriteString(`"></polyline>`)
}
buf.WriteString(`</svg>`)
return buf.Bytes()
}
func main() {
data, err := ioutil.ReadFile("1059.json")
if err != nil {
panic(err)
}
x := Data{}
json.Unmarshal(data, &x)
svg := render(x.Room)
os.Stdout.Write(svg)
}
import express from 'express';
import https from 'https';
import fs from 'fs';
import path from 'path';
import React from 'react';
import { renderToString, renderToStaticMarkup } from 'react-dom/server';
import escape from 'escape-html';
import { match, RouterContext } from 'react-router';
import routes from './routes';
import AsyncProps, { loadPropsOnServer } from 'async-props';
import fetchJson from './util/fetch-json';
import proxy from 'http-proxy-middleware';
import Canvas from './components/Canvas';
// for material-ui https://www.npmjs.com/package/material-ui
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
const apiBaseUrl = process.env.API;
if (!apiBaseUrl) {
throw 'Please set environment variable API=http://...';
}
if (!process.env.SSL_KEY) {
throw 'Please set environment variable SSL_KEY=/path/to/server.key';
}
if (!process.env.SSL_CERT) {
throw 'Please set environment variable SSL_CERT=/path/to/server.crt';
}
const options = {
key: fs.readFileSync(process.env.SSL_KEY),
cert: fs.readFileSync(process.env.SSL_CERT),
};
const app = express();
app.use(express.static('public'));
app.use('/api/*', proxy({ target: apiBaseUrl, changeOrigin: true }));
app.get('/img/:id', (req, res) => {
fetchJson(`${apiBaseUrl}/api/rooms/${req.params.id}`)
.then((json) => {
const svg = renderToStaticMarkup(
<Canvas
width={json.room.canvas_width}
height={json.room.canvas_height}
strokes={json.room.strokes}
/>
);
res.type('image/svg+xml').send(
'<?xml version="1.0" standalone="no"?>' +
'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' +
svg
);
})
.catch((err) => {
console.log(`error: ${err.message}`);
return res.status(500);
});
});
app.get('*', (req, res) => {
// https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md
match({ routes, location: req.url }, (err, redirectLocation, renderProps) => {
if (err) {
console.error(err);
return res.status(500).send('Internal Server Error');
} else if (redirectLocation) {
return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
} else if (!renderProps) {
return res.status(404).send('Not found');
}
fetch(`${apiBaseUrl}/api/csrf_token`, {
method: 'POST',
})
.then((result) => result.json())
.then((json) => {
const csrfToken = json.token;
const loadContext = { apiBaseUrl, csrfToken };
// https://github.com/ryanflorence/async-props
loadPropsOnServer(renderProps, loadContext, (err, asyncProps, scriptTag) => {
if (err) {
console.error(err);
return res.status(500).send('Internal Server Error');
} else {
const appHTML = renderToString(
<AsyncProps {...renderProps} {...asyncProps} />
);
const html = createHtml(appHTML, scriptTag, csrfToken);
return res.status(200).send(html);
}
});
})
.catch((err) => {
console.error(err);
return res.status(500).send('Internal Server Error');
});
});
});
const PORT = process.env.PORT || 443;
https.createServer(options, app).listen(PORT);
function createHtml(appHtml, scriptTag, csrfToken) {
return `<!DOCTYPE html>
<html data-csrf-token="${escape(csrfToken)}">
<head>
<title>ISUketch</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/css/rc-color-picker.css">
<link rel="stylesheet" href="/css/sanitize.css">
<script src="/bundle.js" async></script>
</head>
<body>
<div id="app">${appHtml}</div>
${scriptTag}
</body>
</html>`;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment