Skip to content

Commit

Permalink
add code preview to example website
Browse files Browse the repository at this point in the history
  • Loading branch information
@ofTheo
ofTheo committed Dec 7, 2023
1 parent 0837138 commit 08630e1
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 0 deletions.
43 changes: 43 additions & 0 deletions scripts/ci/emscripten/example-index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!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>

<!-- Containers for code -->
<div id="code-containers" style="margin-left:15px">
<h3><a href="https://github.com/openframeworks/openFrameworks/tree/master/examples/EXAMPLE_PARENT_FOLDER/EXAMPLE_FOLDER">EXAMPLE_FOLDER on Github</a></h3>
</div>
<link href="../../prism.css" rel="stylesheet" />
<script src="../../prism.js"></script>

<script>
const files = ['ofApp.cpp','ofApp.h','main.cpp']; //Todo: add files via listing src/

// Create containers for each code file
const codeContainers = document.getElementById('code-containers');

files.forEach((filePath, index) => {
// Create a unique ID for each container
const containerId = `code-container-${index}`;

// Create a <pre><code> structure for each file
const codeContainer = document.createElement('pre');
codeContainer.innerHTML = `<code id="${containerId}" class="language-cpp"></code>`;

const fileTitle = document.createElement('h3');
fileTitle.innerHTML = filePath + ":";

// Append the container to the main code containers div
codeContainers.appendChild(fileTitle);
codeContainers.appendChild(codeContainer);

// Fetch and display code for each file
fetch(filePath)
.then(response => response.text())
.then(code => {
const specificCodeContainer = document.getElementById(containerId);
specificCodeContainer.textContent = code;
Prism.highlightElement(specificCodeContainer);
})
.catch(error => console.error(`Error fetching ${filePath}:`, error));
});
</script>

</body></html>
14 changes: 14 additions & 0 deletions scripts/ci/emscripten/examples_to_build.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,16 @@ for folder in "${folders[@]}"; do
mkdir -p "$out_folder/$parent_folder_name"
cp -r "bin/em/$folder_name" "$out_folder/$parent_folder_name/"

example_index="$out_folder/$parent_folder_name/$folder_name/index.html"

#replace the index.html with one that can show src/main.cpp / src/ofApp.cpp etc
cp -r $script_path/example-index.html $example_index
cp -r src/* "$out_folder/$parent_folder_name/$folder_name/"

#Github Link
sed -i "s|EXAMPLE_PARENT_FOLDER|$parent_folder_name|g" "$example_index"
sed -i "s|EXAMPLE_FOLDER|$folder_name|g" "$example_index"

thumb_png="$folder_name.png"
thumb_gif="$folder_name.gif"
thumb_jpg="$folder_name.jpg"
Expand Down Expand Up @@ -110,6 +120,10 @@ cp -r $script_path/index.html $htmlFile
sed -i "s|REPLACE_ME|$outPaths|g" $htmlFile
sed -i "s|REPLACE_FILES|$outThumbs|g" $htmlFile

# Grab the code snippet js / css
cp -r $script_path/prism.* $out_folder


DO_UPLOAD="false"

if [[ "$GH_ACTIONS" = true && "${GH_BRANCH}" == "master" && -z "${GH_HEAD_REF}" ]]; then
Expand Down
3 changes: 3 additions & 0 deletions scripts/ci/emscripten/prism.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 08630e1

Please sign in to comment.