Skip to content

Commit 08630e1

Browse files
ofTheoofTheo
committed
add code preview to example website
1 parent 0837138 commit 08630e1

File tree

4 files changed

+66
-0
lines changed

4 files changed

+66
-0
lines changed

‎scripts/ci/emscripten/example-index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!doctypehtml><html lang=en-us><head><meta charset=utf-8><meta content="text/html; charset=utf-8"http-equiv=Content-Type><title>openFrameworks</title> <style>body{font-family:helvetica,sans-serif;margin:0;padding:none}.emscripten{padding-right:0;margin-left:auto;margin-right:auto;display:block}div.emscripten{text-align:center}div.emscripten_border{border:1px solid #000}canvas.emscripten{border:0 none;outline:0}#logo{display:inline-block;margin:20px 0 20px 20px}.spinner{height:30px;width:30px;margin:0;margin-top:20px;margin-left:20px;display:inline-block;vertical-align:top;-webkit-animation:rotation .8s linear infinite;-moz-animation:rotation .8s linear infinite;-o-animation:rotation .8s linear infinite;animation:rotation .8s linear infinite;border-left:5px solid #ee3987;border-right:5px solid #ee3987;border-bottom:5px solid #ee3987;border-top:5px solid #ccc;border-radius:100%;background-color:#eee}@-webkit-keyframes rotation{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotation{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@-o-keyframes rotation{from{-o-transform:rotate(0)}to{-o-transform:rotate(360deg)}}@keyframes rotation{from{transform:rotate(0)}to{transform:rotate(360deg)}}a{color:#ee3987;}#status{display:inline-block;vertical-align:top;margin-top:30px;margin-left:20px;font-weight:700;color:#787878}#progress{height:20px;width:30px}#controls{display:inline-block;float:right;vertical-align:top;margin-top:30px;margin-right:20px}#output{width:100%;height:200px;margin:0 auto;margin-top:10px;display:block;background-color:#000;color:#fff;font-family:'Lucida Console',Monaco,monospace;outline:0}</style><script>function goEmscriptenFullscreen(e){Module.requestFullscreen(0,e)}function tryFullScreen(e,n){var t=document.getElementById("canvas");n&&(t.width=screen.width,t.height=screen.height),t.requestFullScreen?e?goEmscriptenFullscreen(n):t.requestFullScreen():t.webkitRequestFullScreen?e?goEmscriptenFullscreen(n):t.webkitRequestFullScreen():t.mozRequestFullScreen?e?goEmscriptenFullscreen(n):t.mozRequestFullScreen():(t.width=window.innerWidth,t.height=window.innerHeight,document.getElementById("header").style.display="none",document.getElementById("output").style.display="none")}</script></head><body><div id=header><a href=http://emscripten.org id=logo> <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg height=58px version=1.1 viewBox="0 0 110 58"width=110px xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink><title>openFrameworks Logo</title><defs></defs><g fill=#000000 fill-rule=evenodd id=Page-1 stroke=none stroke-width=1><path d="M58,29 C58,13 45,0 29,0 C13,0 0,13 0,29 C0,45 13,58 29,58 C45,58 58,45 58,29 Z"id=Oval-1></path><rect height=58 id=Rectangle-1 width=25 x=59 y=0></rect><rect height=15 id=Rectangle-2 width=15 x=85 y=26></rect><path d="M85,0 L110,0 L85,25 L85,0 Z"id=Path-2></path></g></svg></a><div class=spinner id=spinner></div><div class=emscripten id=status>Downloading...</div><span id=controls>Fullscreen options:<span><input type=checkbox id=resize>resize</span><span><input type=checkbox id=keepAspect>keep aspect</span><span><input type=button onclick='tryFullScreen(document.getElementById("keepAspect").checked,document.getElementById("resize").checked)'value=Fullscreen></span></span><div class=emscripten><progress hidden id=progress max=100 value=0></progress></div></div><div class=emscripten_border><canvas class=emscripten id=canvas oncontextmenu=event.preventDefault() tabindex=-1></canvas></div><textarea id=output rows=8></textarea><script>var statusElement=document.getElementById("status"),progressElement=document.getElementById("progress"),spinnerElement=document.getElementById("spinner"),Module={preRun:[],postRun:[],print:function(){var e=document.getElementById("output");return e&&(e.value=""),function(t){arguments.length>1&&(t=Array.prototype.slice.call(arguments).join(" ")),console.log(t),e&&(e.value+=t+"\n",e.scrollTop=e.scrollHeight)}}(),printErr:function(e){arguments.length>1&&(e=Array.prototype.slice.call(arguments).join(" ")),console.error(e)},canvas:function(){var e=document.getElementById("canvas");return e.addEventListener("webglcontextlost",(function(e){alert("WebGL context lost. You will need to reload the page."),e.preventDefault()}),!1),e}(),setStatus:function(e){if(Module.setStatus.last||(Module.setStatus.last={time:Date.now(),text:""}),e!==Module.setStatus.text){var t=e.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/),n=Date.now();t&&n-Module.setStatus.last.time<30||(t?(e=t[1],progressElement.value=100*parseInt(t[2]),progressElement.max=100*parseInt(t[4]),progressElement.hidden=!1,spinnerElement.hidden=!1):(progressElement.value=null,progressElement.max=null,progressElement.hidden=!0,e||(spinnerElement.style.display="none")),statusElement.innerHTML=e)}},totalDependencies:0,monitorRunDependencies:function(e){this.totalDependencies=Math.max(this.totalDependencies,e),Module.setStatus(e?"Preparing... ("+(this.totalDependencies-e)+"/"+this.totalDependencies+")":"All downloads complete.")}};Module.setStatus("Downloading..."),window.onerror=function(e){Module.setStatus("Exception thrown, see JavaScript console"),spinnerElement.style.display="none",Module.setStatus=function(e){e&&Module.printErr("[post-exception status] "+e)}}</script><script async src=index.js></script>
2+
3+
<!-- Containers for code -->
4+
<div id="code-containers" style="margin-left:15px">
5+
<h3><a href="https://github.com/openframeworks/openFrameworks/tree/master/examples/EXAMPLE_PARENT_FOLDER/EXAMPLE_FOLDER">EXAMPLE_FOLDER on Github</a></h3>
6+
</div>
7+
<link href="../../prism.css" rel="stylesheet" />
8+
<script src="../../prism.js"></script>
9+
10+
<script>
11+
const files = ['ofApp.cpp','ofApp.h','main.cpp']; //Todo: add files via listing src/
12+
13+
// Create containers for each code file
14+
const codeContainers = document.getElementById('code-containers');
15+
16+
files.forEach((filePath, index) => {
17+
// Create a unique ID for each container
18+
const containerId = `code-container-${index}`;
19+
20+
// Create a <pre><code> structure for each file
21+
const codeContainer = document.createElement('pre');
22+
codeContainer.innerHTML = `<code id="${containerId}" class="language-cpp"></code>`;
23+
24+
const fileTitle = document.createElement('h3');
25+
fileTitle.innerHTML = filePath + ":";
26+
27+
// Append the container to the main code containers div
28+
codeContainers.appendChild(fileTitle);
29+
codeContainers.appendChild(codeContainer);
30+
31+
// Fetch and display code for each file
32+
fetch(filePath)
33+
.then(response => response.text())
34+
.then(code => {
35+
const specificCodeContainer = document.getElementById(containerId);
36+
specificCodeContainer.textContent = code;
37+
Prism.highlightElement(specificCodeContainer);
38+
})
39+
.catch(error => console.error(`Error fetching ${filePath}:`, error));
40+
});
41+
</script>
42+
43+
</body></html>

‎scripts/ci/emscripten/examples_to_build.sh‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,16 @@ for folder in "${folders[@]}"; do
5858
mkdir -p "$out_folder/$parent_folder_name"
5959
cp -r "bin/em/$folder_name" "$out_folder/$parent_folder_name/"
6060

61+
example_index="$out_folder/$parent_folder_name/$folder_name/index.html"
62+
63+
#replace the index.html with one that can show src/main.cpp / src/ofApp.cpp etc
64+
cp -r $script_path/example-index.html $example_index
65+
cp -r src/* "$out_folder/$parent_folder_name/$folder_name/"
66+
67+
#Github Link
68+
sed -i "s|EXAMPLE_PARENT_FOLDER|$parent_folder_name|g" "$example_index"
69+
sed -i "s|EXAMPLE_FOLDER|$folder_name|g" "$example_index"
70+
6171
thumb_png="$folder_name.png"
6272
thumb_gif="$folder_name.gif"
6373
thumb_jpg="$folder_name.jpg"
@@ -110,6 +120,10 @@ cp -r $script_path/index.html $htmlFile
110120
sed -i "s|REPLACE_ME|$outPaths|g" $htmlFile
111121
sed -i "s|REPLACE_FILES|$outThumbs|g" $htmlFile
112122

123+
# Grab the code snippet js / css
124+
cp -r $script_path/prism.* $out_folder
125+
126+
113127
DO_UPLOAD="false"
114128

115129
if [[ "$GH_ACTIONS" = true && "${GH_BRANCH}" == "master" && -z "${GH_HEAD_REF}" ]]; then

‎scripts/ci/emscripten/prism.css‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)