:link: Generate HTML and CSS together, on the fly

Overview

On The Fly

Build Status GoDoc License Report Card

  • Package for generating HTML and CSS together, on the fly.
  • Can also be used for generating HTML, XML or CSS (or templates).
  • HTML and CSS can be generated together, but be presented as two seperate (but linked) files.
  • Could be used to set up a diskless webserver that generates all the content on the fly (something similar could also be achieved by using templates that are not stored on disk).

New/experimental features:

  • Generating WebGL graphics with Three.JS on the fly.
  • Generating AngularJS applications on the fly.

The SVG related code has been refactored out, optimized and moved to the tinysvg package.

Online API Documentation

godoc.org

Generate HTML, CSS and SVG in one go

Create hardware accelerated 3D-graphics with three.js

Experiment with AngularJS

Example for Negroni

package main

import (
	"fmt"
	"net/http"

	"github.com/urfave/negroni"
	"github.com/xyproto/onthefly"
	"github.com/xyproto/tinysvg"
)

// Generate a new SVG image
func svgImage() []byte {
	document, svg := tinysvg.NewTinySVG(128, 64)
	svg.Describe("Hello SVG")

	// x, y, radius, color
	svg.Circle(30, 10, 5, "red")
	svg.Circle(110, 30, 2, "green")
	svg.Circle(80, 40, 7, "blue")

	// x, y, font size, font family, text and color
	svg.Text(3, 60, 6, "Courier", "There will be cake", "#394851")

	return document.Bytes()
}

// Generate a new onthefly Page (HTML5 and CSS combined)
func indexPage(svgurl string) *onthefly.Page {

	// Create a new HTML5 page, with CSS included
	page := onthefly.NewHTML5Page("Demonstration")

	// Add some text
	page.AddContent(fmt.Sprintf("onthefly %.1f", onthefly.Version))

	// Change the margin (em is default)
	page.SetMargin(4)

	// Change the font family
	page.SetFontFamily("serif") // or: sans-serif

	// Change the color scheme
	page.SetColor("black", "#d0d0d0")

	// Include the generated SVG image on the page
	body, err := page.GetTag("body")
	if err == nil {
		// CSS attributes for the body tag
		body.AddStyle("font-size", "2em")
		body.AddStyle("font-family", "sans-serif")

		// Paragraph
		p := body.AddNewTag("p")

		// CSS style
		p.AddStyle("margin-top", "2em")

		// Image tag
		img := p.AddNewTag("img")

		// HTML attributes
		img.AddAttrib("src", svgurl)
		img.AddAttrib("alt", "Three circles")

		// CSS style
		img.AddStyle("width", "60%")
		img.AddStyle("border", "4px solid white")
	}

	return page
}

// Set up the paths and handlers then start serving.
func main() {
	fmt.Println("onthefly ", onthefly.Version)

	// Create a Negroni instance and a ServeMux instance
	n := negroni.Classic()
	mux := http.NewServeMux()

	// Publish the generated SVG as "/circles.svg"
	svgurl := "/circles.svg"
	mux.HandleFunc(svgurl, func(w http.ResponseWriter, req *http.Request) {
		w.Header().Add("Content-Type", "image/svg+xml")
		w.Write(svgImage())
	})

	// Generate a Page that includes the svg image
	page := indexPage(svgurl)
	// Publish the generated Page in a way that connects the HTML and CSS
	page.Publish(mux, "/", "/style.css", false)

	// Handler goes last
	n.UseHandler(mux)

	// Listen for requests at port 3000
	n.Run(":3000")
}

Example for net/http

package main

import (
	"fmt"
	"log"
	"net/http"
	"time"

	"github.com/xyproto/onthefly"
	"github.com/xyproto/tinysvg"
)

// Generate a new SVG image
func svgImage() []byte {
	document, svg := tinysvg.NewTinySVG(128, 64)
	svg.Describe("Hello SVG")

	// x, y, radius, color
	svg.Circle(30, 10, 5, "red")
	svg.Circle(110, 30, 2, "green")
	svg.Circle(80, 40, 7, "blue")

	// x, y, font size, font family, text and color
	svg.Text(3, 60, 6, "Courier", "There will be cake", "#394851")

	return document.Bytes()
}

// Generate a new onthefly Page (HTML5 and CSS combined)
func indexPage(svgurl string) *onthefly.Page {

	// Create a new HTML5 page, with CSS included
	page := onthefly.NewHTML5Page("Demonstration")

	// Add some text
	page.AddContent(fmt.Sprintf("onthefly %.1f", onthefly.Version))

	// Change the margin (em is default)
	page.SetMargin(4)

	// Change the font family
	page.SetFontFamily("serif") // or: sans-serif

	// Change the color scheme
	page.SetColor("black", "#d0d0d0")

	// Include the generated SVG image on the page
	body, err := page.GetTag("body")
	if err == nil {

		// CSS attributes for the body tag
		body.AddStyle("font-size", "2em")
		body.AddStyle("font-family", "sans-serif")

		// Paragraph
		p := body.AddNewTag("p")

		// CSS style
		p.AddStyle("margin-top", "2em")

		// Image tag
		img := p.AddNewTag("img")

		// HTML attributes
		img.AddAttrib("src", svgurl)
		img.AddAttrib("alt", "Three circles")

		// CSS style
		img.AddStyle("width", "60%")
		img.AddStyle("border", "4px solid white")
	}

	return page
}

// Set up the paths and handlers then start serving.
func main() {
	fmt.Println("onthefly ", onthefly.Version)

	// Create a mux
	mux := http.NewServeMux()

	// Publish the generated SVG as "/circles.svg"
	svgurl := "/circles.svg"
	mux.HandleFunc(svgurl, func(w http.ResponseWriter, req *http.Request) {
		w.Header().Add("Content-Type", "image/svg+xml")
		w.Write(svgImage())
	})

	// Generate a Page that includes the svg image
	page := indexPage(svgurl)

	// Publish the generated Page in a way that connects the HTML and CSS
	page.Publish(mux, "/", "/style.css", false)

	// Configure the HTTP server and permissionHandler struct
	s := &http.Server{
		Addr:           ":3000",
		Handler:        mux,
		ReadTimeout:    10 * time.Second,
		WriteTimeout:   10 * time.Second,
		MaxHeaderBytes: 1 << 20,
	}
	log.Println("Listening for requests on port 3000")

	// Start listening
	log.Fatal(s.ListenAndServe())
}

Additional screenshots

Screenshots from version 0.8:

TODO

  • Create a version 2 that is more focused on performance and has more consistent API function names.

Version, license and author

You might also like...
VMail - check the markup (HTML, CSS) of HTML email template compatibility with email clients
VMail - check the markup (HTML, CSS) of HTML email template compatibility with email clients

VMail - check the markup (HTML, CSS) of HTML email template compatibility with email clients Email clients use different rendering standards. This is

OctoLinker — Links together, what belongs together
OctoLinker — Links together, what belongs together

What is OctoLinker? OctoLinker is a browser extension for GitHub, that turns language-specific statements like include require or import into links. I

This product about make link to be short link with golang rest api

This project using golang with go fiber, firebase, and dependency injection

LINE account link: Sample code for LINE account link
LINE account link: Sample code for LINE account link

LINE account link: Sample code for LINE account link This is sample code to demostration LINE chatbot account link, refer to document https://develope

Super fast static photo and video gallery generator (written in Go and HTML/CSS/native JS)

fastgallery Fast static photo and video gallery generator Super fast (written in Go and C, concurrent, uses fastest image/video libraries, 4-8 times f

Build cross platform GUI apps with GO and HTML/JS/CSS (powered by Electron)

Thanks to go-astilectron build cross platform GUI apps with GO and HTML/JS/CSS. It is the official GO bindings of astilectron and is powered by Electr

Build cross platform GUI apps with GO and HTML/JS/CSS (powered by nwjs)
Build cross platform GUI apps with GO and HTML/JS/CSS (powered by nwjs)

gowd Build cross platform GUI apps with GO and HTML/JS/CSS (powered by nwjs) How to use this library: Download and install nwjs Install this library g

Package damsel provides html outlining via css-selectors and common template functionality.

Damsel Markup language featuring html outlining via css-selectors, extensible via pkg html/template and others. Library This package expects to exist

HTML, CSS and SVG static renderer in pure Go

Web render This module implements a static renderer for the HTML, CSS and SVG formats. It consists for the main part of a Golang port of the awesome W

Golang bindings of Sciter: the Embeddable HTML/CSS/script engine for modern UI development
Golang bindings of Sciter: the Embeddable HTML/CSS/script engine for modern UI development

Go bindings for Sciter Check this page for other language bindings (Delphi / D / Go / .NET / Python / Rust). Attention The ownership of project is tra

go.rice is a Go package that makes working with resources such as html,js,css,images,templates, etc very easy.

go.rice go.rice is a Go package that makes working with resources such as html,js,css,images and templates easy. During development go.rice will load

Frongo is a Golang package to create HTML/CSS components using only the Go language.

Frongo Frongo is a Go tool to make HTML/CSS document out of Golang code. It was designed with readability and usability in mind, so HTML objects are c

This library generate a new tlsconfig usable within go standard library configured with a self-signed certificate generated on the fly

sslcert This library generate a new tlsconfig usable within go standard library configured with a self-signed certificate generated on the fly. Exampl

Kana - Simple discord bot for generate code snippet on the fly
Kana - Simple discord bot for generate code snippet on the fly

kana discord bot for generate code snippet on the fly, made with graphene Invite

The GOP Server is an open-source web server for Linux and Windows systems that handles HTTP  requests to scripts programmed in Go returning the result of the execution to the client. The  software is able to, depending on the requested path, return static files or execute Go scripts,  which are compiled on the fly and have specific functionality.
Asset storage and on-the-fly image resize

air - Asset & Image Resize Asset storage and on-the-fly image resize powered by libvips. Uploading an asset $ http -f POST http://127.0.0.1:1323/uploa

Dbt-postgres-proxy - Proxy server which intercepts and compiles dbt queries on the fly
Dbt-postgres-proxy - Proxy server which intercepts and compiles dbt queries on the fly

dbt-postgres-proxy A reverse proxy for postgres which compiles queries in flight

Simple system for writing HTML/XML as Go code. Better-performing replacement for html/template and text/template

Simple system for writing HTML as Go code. Use normal Go conditionals, loops and functions. Benefit from typing and code analysis. Better performance than templating. Tiny and dependency-free.

Convert Golang Struct To GraphQL Object On The Fly

Straf Convert Golang Struct To GraphQL Object On The Fly Easily Create GraphQL Schemas Example Converting struct to GraphQL Object type UserExtra stru

Owner
Alexander F. Rødseth
Software Engineer, Arch Linux TU, Go/C/Python/C++ developer and open source enthusiast.
Alexander F. Rødseth
Flamingo Framework and Core Library. Flamingo is a go based framework for pluggable web projects. It is used to build scalable and maintainable (web)applications.

Flamingo Framework Flamingo is a web framework based on Go. It is designed to build pluggable and maintainable web projects. It is production ready, f

Flamingo 316 Sep 18, 2022
A lightweight and fast http router from outer space

Alien Alien is a lightweight http router( multiplexer) for Go( Golang ), made for humans who don't like magic. Documentation docs Features fast ( see

Geofrey Ernest 123 Sep 26, 2022
A small and evil REST framework for Go

go-rest A small and evil REST framework for Go Reflection, Go structs, and JSON marshalling FTW! go get github.com/ungerik/go-rest import "github.com/

Erik Unger 124 Sep 7, 2022
Fast and Reliable Golang Web Framework

Gramework The Good Framework Gramework long-term testing stand metrics screenshot made with Gramework Stats Dashboard and metrics middleware What is i

null 371 Sep 19, 2022
Mango is a modular web-application framework for Go, inspired by Rack, and PEP333.

Mango Mango is a modular web-application framework for Go, inspired by Rack and PEP333. Note: Not actively maintained. Overview Mango is most of all a

Paul Bellamy 369 Sep 14, 2022
Simple HTTP and REST client library for Go

Resty Simple HTTP and REST client library for Go (inspired by Ruby rest-client) Features section describes in detail about Resty capabilities Resty Co

Go Resty 6.7k Oct 3, 2022
This is only a mirror and Moved to https://gitea.com/lunny/tango

Tango 简体中文 Package tango is a micro & pluggable web framework for Go. Current version: v0.5.0 Version History Getting Started To install Tango: go get

Lunny Xiao 836 Sep 27, 2022
An idiomatic Go REST API starter kit (boilerplate) following the SOLID principles and Clean Architecture

Go RESTful API Starter Kit (Boilerplate) This starter kit is designed to get you up and running with a project structure optimized for developing REST

Qiang Xue 998 Sep 27, 2022
Golang CTF framework and exploit development module

Golang CTF framework and exploit development module

Frank Hübner 15 Oct 2, 2022
Community built data connectors and processors for Spice.ai

data-components-contrib Community built data connectors and processors for Spice.ai The vision for data-components-contrib is a community-driven libra

Spice.ai 9 Sep 24, 2022