Skip to content

Instantly share code, notes, and snippets.

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

What would you like to do?
package main
import (
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))
`<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ""><svg xmlns="" 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 {
`<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
return buf.Bytes()
func main() {
data, err := ioutil.ReadFile("1059.json")
if err != nil {
x := Data{}
json.Unmarshal(data, &x)
svg := render(x.Room)
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
import injectTapEventPlugin from 'react-tap-event-plugin';
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('/api/*', proxy({ target: apiBaseUrl, changeOrigin: true }));
app.get('/img/:id', (req, res) => {
.then((json) => {
const svg = renderToStaticMarkup(
'<?xml version="1.0" standalone="no"?>' +
'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "">' +
.catch((err) => {
console.log(`error: ${err.message}`);
return res.status(500);
app.get('*', (req, res) => {
match({ routes, location: req.url }, (err, redirectLocation, renderProps) => {
if (err) {
return res.status(500).send('Internal Server Error');
} else if (redirectLocation) {
return res.redirect(302, redirectLocation.pathname +;
} 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 };
loadPropsOnServer(renderProps, loadContext, (err, asyncProps, scriptTag) => {
if (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) => {
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)}">
<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>
<div id="app">${appHtml}</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.