Added Makefile for generating examples html pages. From @t-paul

master
Marius Kintel 2015-02-04 15:13:02 -05:00
parent d7d980675d
commit 448b38fe9e
12 changed files with 559 additions and 0 deletions

1
scripts/examples-html/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
/html

View File

@ -0,0 +1,48 @@
EXAMPLES := ../../examples
SRC=$(wildcard $(EXAMPLES)/*/*.scad)
PNG=$(patsubst $(EXAMPLES)/%.scad,html/%.png,$(SRC))
HTML=$(patsubst $(EXAMPLES)/%.scad,html/%.html,$(SRC))
OPENSCAD := ../../OpenSCAD.app/Contents/MacOS/OpenSCAD
#OPENSCAD := openscad
ARGS := --imgsize=1200,900 --camera=0,0,0,55,0,25,180 --viewall --autocenter
all : $(PNG) $(HTML) example-data.js assets
.PHONY: clean
clean :
rm -rf html
.PHONY: assets
assets :
cp -a assets html/
.PHONY: example-data.js
example-data.js :
( \
echo "openscad_examples = ["; \
for a in Basics Functions Shapes Extrusion Advanced; \
do \
echo " {"; \
echo " name : \"$$a\","; \
echo " files : ["; \
for f in "$(EXAMPLES)/$$a/"*.scad ; \
do \
echo " \"`basename -s .scad $$f`\","; \
done; \
echo " ]"; \
echo " },"; \
done; \
echo "];" \
) > html/example-data.js
html/%.png : $(EXAMPLES)/%.scad
mkdir -p `dirname $@`
$(OPENSCAD) $(ARGS) -o $@ $< > out.log 2>&1
html/%.html : $(EXAMPLES)/%.scad template-pre.html template-post.html
#echo $(notdir $(patsubst %.scad,%.png,$<))
mkdir -p `dirname $@`
sed -e 's/@@IMAGE@@/$(notdir $(patsubst %.scad,%.png,$<))/g' template-pre.html > $@
sed -e 's/</\&lt/; s/>/\&gt/;' $< >> $@
cat template-post.html >> $@

View File

@ -0,0 +1,58 @@
.green {
color:#518e04;
}
#wrapper {
position: fixed;
top: 0;
left: 0;
width:100%;
height: 100%;
}
#content {
position: absolute;
top: 65px;
left: 10px;
right: 10px;
bottom: 10px;
border-width: 1px;
border-style: groove;
overflow: auto;
background: #fdf6e3;
}
#logo {
position: absolute;
top: 5px;
left: 5px;
}
#logo h1 {
position: absolute;
top: 2px;
left: 80px;
width: 20em;
margin: 0px;
font-family: "Open Sans", sans-serif;
font-size: 22px;
}
#logo img {
width: 60px;
height: 60px;
}
#image {
position: absolute;
z-index: 50;
top: 80px;
right: 30px;
}
#image img {
width: 200px;
height: 150px;
border-width: 1px;
border-style: groove;
}

View File

@ -0,0 +1,129 @@
// http://www.olivergast.de/2012/04/18/css3-dropdown-menu/
#menu {
width: 800px;
margin: 50px auto;
}
#menu h3 {
font-size: 12px;
color: #fff;
padding: 10px;
margin: 0;
background: #000;
line-height: 20px;
}
#menu ul {
position: absolute;
top: 30px;
margin: 0 auto;
margin-left: 20px;
list-style: none;
}
#menu ul li {
float: left;
margin: 0 0 0 14px;
font-size: 14px;
font-family: 'Arial', sans-serif;
line-height: 30px;
}
#menu ul li a {
color: #000;
text-decoration: none;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#menu ul li a:hover {
color: #999;
}
#menu ul li div {
float: left;
width: 4px;
height: 4px;
margin: 10px 5px;
padding: 4px;
background: #999;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#menu ul li:hover div {
background: #000;
}
#menu ul ul {
position: absolute;
z-index: 100;
top: -9999px;
background: #fff;
padding: 0;
margin: 0 0 0 -5px;
-webkit-box-shadow: 0 10px 20px #888;
-moz-box-shadow: 0 10px 20px #888;
box-shadow: 0 10px 20px #888;
}
#menu ul ul:before {
position: absolute;
content:"";
width: 10px;
height: 10px;
top: -5px;
left: 11px;
background: #000;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#menu ul li:hover ul {
top: 30px;
}
#menu ul ul li {
float: none;
font-size: 12px;
padding: 5px 10px;
text-align: left;
margin: 0;
border-bottom: 1px solid #ddd;
line-height: 20px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#menu ul ul a {
color: #333;
text-decoration: none;
}
#menu ul ul li.all {
font-size: 12px;
border-bottom: none;
text-transform: none;
}
#menu ul ul li:hover {
background: #333;
color: #fff;
}

View File

@ -0,0 +1,85 @@
/**
* Solarized Light theme
*
* Adaptation of Solarized Light from ethanschoonover.com/solarized
*
* @author Ethan Schoonover
* @author David Litmark
* @version 1.0.0
*/
pre {
background: #fdf6e3; /* base3 */
word-wrap: break-word;
margin: 0px;
padding: 6px;
color: #657b83; /* base00 */
font-size: 12px;
}
pre, code {
font-family: 'Monaco', courier, monospace;
}
pre .comment {
color: #93a1a1; /* base1 */
}
pre .constant {
color: #657b83; /* base00 */
}
pre .constant.language {
color: #268bd2; /* blue */
}
pre .constant.regexp {
color: #2aa198; /* cyan */
}
pre .storage {
color: #268bd2; /* blue */
}
pre .string, pre .comment.docstring {
color: #2aa198; /* cyan */
}
pre .support.tag.script, pre .support.tag.style {
color: #2aa198; /* cyan */
}
pre .string.regexp {
color: #2aa198; /* cyan */
}
pre .string.regexp.open, pre .string.regexp.close {
color: #2aa198; /* cyan */
}
pre .keyword, pre .selector {
color: #859900; /* green */
}
pre .inherited-class {
font-style: italic;
}
pre .entity {
color: #b58900; /* yellow */
}
pre .support, *[data-language="c"] .function.call {
color: #859900; /* green */
}
pre .support.method {
color: #657b83; /* base00 */
}
pre .support.property {
color: #657b83; /* base00 */
}
pre .variable.global, pre .variable.class, pre .variable.instance {
color: #657b83; /* base00 */
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

View File

@ -0,0 +1,65 @@
/**
* Generic language patterns
*
* @author Craig Campbell
* @version 1.0.11
*/
Rainbow.extend([
{
'matches': {
1: [
{
'name': 'keyword.operator',
'pattern': /\=|\+/g
},
{
'name': 'keyword.dot',
'pattern': /\./g
}
],
2: {
'name': 'string',
'matches': {
'name': 'constant.character.escape',
'pattern': /\\('|"){1}/g
}
}
},
'pattern': /(\(|\s|\[|\=|:|\+|\.)(('|")([^\\\1]|\\.)*?(\3))/gm
},
{
'name': 'comment',
'pattern': /\/\*[\s\S]*?\*\/|(\/\/|\#)[\s\S]*?$/gm
},
{
'name': 'constant.numeric',
'pattern': /\b(\d+(\.\d+)?(e(\+|\-)?\d+)?(f|d)?|0x[\da-f]+)\b/gi
},
{
'matches': {
1: 'keyword'
},
'pattern': /\b(and|array|as|b(ool(ean)?|reak)|c(ase|atch|har|lass|on(st|tinue))|d(ef|elete|o(uble)?)|e(cho|lse(if)?|xit|xtends|xcept)|f(inally|loat|or(each)?|unction)|global|if|import|int(eger)?|long|new|object|or|pr(int|ivate|otected)|public|return|self|st(ring|ruct|atic)|switch|th(en|is|row)|try|(un)?signed|var|void|while)(?=\(|\b)/gi
},
{
'name': 'constant.language',
'pattern': /true|false|null/g
},
{
'name': 'keyword.operator',
'pattern': /\+|\!|\-|&(gt|lt|amp);|\||\*|\=/g
},
{
'matches': {
1: 'function.call'
},
'pattern': /(\w+?)(?=\()/g
},
{
'matches': {
1: 'storage.function',
2: 'entity.name.function'
},
'pattern': /(function)\s(.*?)(?=\()/g
}
]);

View File

@ -0,0 +1,93 @@
/**
* Javascript patterns
*
* @author Craig Campbell
* @version 1.0.9
*/
Rainbow.extend('javascript', [
/**
* matches $. or $(
*/
{
'name': 'selector',
'pattern': /(\s|^)\$(?=\.|\()/g
},
{
'name': 'support',
'pattern': /\b(window|document)\b/g
},
{
'matches': {
1: 'support.property'
},
'pattern': /\.(length|node(Name|Value))\b/g
},
{
'matches': {
1: 'support.function'
},
'pattern': /(setTimeout|setInterval)(?=\()/g
},
{
'matches': {
1: 'support.method'
},
'pattern': /\.(getAttribute|push|getElementById|getElementsByClassName|log|setTimeout|setInterval)(?=\()/g
},
/**
* matches any escaped characters inside of a js regex pattern
*
* @see https://github.com/ccampbell/rainbow/issues/22
*
* this was causing single line comments to fail so it now makes sure
* the opening / is not directly followed by a *
*
* @todo check that there is valid regex in match group 1
*/
{
'name': 'string.regexp',
'matches': {
1: 'string.regexp.open',
2: {
'name': 'constant.regexp.escape',
'pattern': /\\(.){1}/g
},
3: 'string.regexp.close',
4: 'string.regexp.modifier'
},
'pattern': /(\/)(?!\*)(.+)(\/)([igm]{0,3})/g
},
/**
* matches runtime function declarations
*/
{
'matches': {
1: 'storage',
3: 'entity.function'
},
'pattern': /(var)?(\s|^)(\S*)(?=\s?=\s?function\()/g
},
/**
* matches constructor call
*/
{
'matches': {
1: 'keyword',
2: 'entity.function'
},
'pattern': /(new)\s+(.*)(?=\()/g
},
/**
* matches any function call in the style functionName: function()
*/
{
'name': 'entity.function',
'pattern': /(\w+)(?=:\s{0,}function)/g
}
]);

View File

@ -0,0 +1,38 @@
function addSubmenu(menu, name, files) {
var ul = document.createElement('ul');
ul.appendChild(document.createElement('h3'));
for (var a = 0; a < files.length; a++) {
var menulink = document.createElement('a');
menulink.href = "../" + name + "/" + files[a] + ".html";
ul.appendChild(menulink);
var li = document.createElement('li');
li.appendChild(document.createTextNode(files[a]));
menulink.appendChild(li);
}
menu.appendChild(ul);
}
function addMenu() {
var menudiv = document.getElementById("menu");
var menu = document.createElement('ul');
menudiv.appendChild(menu);
for (var a = 0; a < openscad_examples.length; a++) {
var entry = document.createElement('li');
var menulink = document.createElement('a');
menulink.href = "#";
entry.appendChild(menulink);
var entrydiv = document.createElement('div');
menulink.appendChild(entrydiv);
menulink.appendChild(document.createTextNode(openscad_examples[a].name));
addSubmenu(entry, openscad_examples[a].name, openscad_examples[a].files);
menu.appendChild(entry);
}
}
function load() {
addMenu();
}

View File

@ -0,0 +1,8 @@
/* Rainbow v1.1.9 rainbowco.de */
window.Rainbow=function(){function q(a){var b,c=a.getAttribute&&a.getAttribute("data-language")||0;if(!c){a=a.attributes;for(b=0;b<a.length;++b)if("data-language"===a[b].nodeName)return a[b].nodeValue}return c}function B(a){var b=q(a)||q(a.parentNode);if(!b){var c=/\blang(?:uage)?-(\w+)/;(a=a.className.match(c)||a.parentNode.className.match(c))&&(b=a[1])}return b}function C(a,b){for(var c in e[d]){c=parseInt(c,10);if(a==c&&b==e[d][c]?0:a<=c&&b>=e[d][c])delete e[d][c],delete j[d][c];if(a>=c&&a<e[d][c]||
b>c&&b<e[d][c])return!0}return!1}function r(a,b){return'<span class="'+a.replace(/\./g," ")+(l?" "+l:"")+'">'+b+"</span>"}function s(a,b,c,h){var f=a.exec(c);if(f){++t;!b.name&&"string"==typeof b.matches[0]&&(b.name=b.matches[0],delete b.matches[0]);var k=f[0],i=f.index,u=f[0].length+i,g=function(){function f(){s(a,b,c,h)}t%100>0?f():setTimeout(f,0)};if(C(i,u))g();else{var m=v(b.matches),l=function(a,c,h){if(a>=c.length)h(k);else{var d=f[c[a]];if(d){var e=b.matches[c[a]],i=e.language,g=e.name&&e.matches?
e.matches:e,j=function(b,d,e){var i;i=0;var g;for(g=1;g<c[a];++g)f[g]&&(i=i+f[g].length);d=e?r(e,d):d;k=k.substr(0,i)+k.substr(i).replace(b,d);l(++a,c,h)};i?n(d,i,function(a){j(d,a)}):typeof e==="string"?j(d,d,e):w(d,g.length?g:[g],function(a){j(d,a,e.matches?e.name:0)})}else l(++a,c,h)}};l(0,m,function(a){b.name&&(a=r(b.name,a));if(!j[d]){j[d]={};e[d]={}}j[d][i]={replace:f[0],"with":a};e[d][i]=u;g()})}}else h()}function v(a){var b=[],c;for(c in a)a.hasOwnProperty(c)&&b.push(c);return b.sort(function(a,
b){return b-a})}function w(a,b,c){function h(b,k){k<b.length?s(b[k].pattern,b[k],a,function(){h(b,++k)}):D(a,function(a){delete j[d];delete e[d];--d;c(a)})}++d;h(b,0)}function D(a,b){function c(a,b,h,e){if(h<b.length){++x;var g=b[h],l=j[d][g],a=a.substr(0,g)+a.substr(g).replace(l.replace,l["with"]),g=function(){c(a,b,++h,e)};0<x%250?g():setTimeout(g,0)}else e(a)}var h=v(j[d]);c(a,h,0,b)}function n(a,b,c){var d=m[b]||[],f=m[y]||[],b=z[b]?d:d.concat(f);w(a.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/&(?![\w\#]+;)/g,
"&amp;"),b,c)}function o(a,b,c){if(b<a.length){var d=a[b],f=B(d);return!(-1<(" "+d.className+" ").indexOf(" rainbow "))&&f?(f=f.toLowerCase(),d.className+=d.className?" rainbow":"rainbow",n(d.innerHTML,f,function(k){d.innerHTML=k;j={};e={};p&&p(d,f);setTimeout(function(){o(a,++b,c)},0)})):o(a,++b,c)}c&&c()}function A(a,b){var a=a&&"function"==typeof a.getElementsByTagName?a:document,c=a.getElementsByTagName("pre"),d=a.getElementsByTagName("code"),f,e=[];for(f=0;f<d.length;++f)e.push(d[f]);for(f=0;f<
c.length;++f)c[f].getElementsByTagName("code").length||e.push(c[f]);o(e,0,b)}var j={},e={},m={},z={},d=0,y=0,t=0,x=0,l,p;return{extend:function(a,b,c){1==arguments.length&&(b=a,a=y);z[a]=c;m[a]=b.concat(m[a]||[])},b:function(a){p=a},a:function(a){l=a},color:function(a,b,c){if("string"==typeof a)return n(a,b,c);if("function"==typeof a)return A(0,a);A(a,b)}}}();document.addEventListener?document.addEventListener("DOMContentLoaded",Rainbow.color,!1):window.attachEvent("onload",Rainbow.color);
Rainbow.onHighlight=Rainbow.b;Rainbow.addClass=Rainbow.a;

View File

@ -0,0 +1,6 @@
</code>
</pre>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../assets/css/main.css" type="text/css"/>
<link rel="stylesheet" href="../assets/css/menu.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../assets/css/solarized-light.css" type="text/css"/>
<script src="../example-data.js" type="text/javascript"></script>
<script src="../assets/js/menu.js" type="text/javascript"></script>
<script src="../assets/js/rainbow.min.js" type="text/javascript"></script>
<script src="../assets/js/language/generic.js" type="text/javascript"></script>
<script src="../assets/js/language/javascript.js" type="text/javascript"></script>
</head>
<body onload="load()">
<div class="wrapper">
<div id="menu"></div>
<div id="logo">
<a href="http://openscad.org/"><img src="../assets/images/openscad.png"></a>
<h1><span class="green">Open</span>SCAD - Examples</h1>
</div>
<div id="image">
<a href="@@IMAGE@@"><img src="@@IMAGE@@"></a>
</div>
<div id="content">
<pre><code data-language="javascript">