Skip to content

#80 Added JS Interpreter #226

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

#80 Added JS Interpreter #226

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e2ee046
Added JS Interpreter
THEBOSS0369 Aug 8, 2024
fb39b43
Fixed the interpreter not showing issue
THEBOSS0369 Aug 8, 2024
556d2d7
I added the js interpreter in html files in the book directory
THEBOSS0369 Aug 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 124 additions & 90 deletions _layouts/website/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,123 +5,157 @@
{% block description %}{{ page.description }}{% endblock %}

{% block head %}
{{ super() }}
{% if page.next and page.next.path %}
<link rel="next" href="{{ page.next.path|resolveFile }}" />
{% endif %}
{% if page.previous and page.previous.path %}
<link rel="prev" href="{{ page.previous.path|resolveFile }}" />
{% endif %}
{{ super() }}
{% if page.next and page.next.path %}
<link rel="next" href="{{ page.next.path|resolveFile }}" />
{% endif %}
{% if page.previous and page.previous.path %}
<link rel="prev" href="{{ page.previous.path|resolveFile }}" />
{% endif %}
{% endblock %}

{% block javascript %}
<noscript>
<style>
.honkit-cloak {
display: block !important;
}
</style>
</noscript>
<script>
// Restore sidebar state as critical path for prevent layout shift
function __init__getSidebarState(defaultValue){
var baseKey = "";
var key = baseKey + ":sidebar";
try {
var value = localStorage[key];
if (value === undefined) {
return defaultValue;
}
var parsed = JSON.parse(value);
return parsed == null ? defaultValue : parsed;
} catch (e) {
<noscript>
<style>
.honkit-cloak {
display: block !important;
}
</style>
</noscript>
<script>
// Restore sidebar state as critical path for prevent layout shift
function __init__getSidebarState(defaultValue) {
var baseKey = "";
var key = baseKey + ":sidebar";
try {
var value = localStorage[key];
if (value === undefined) {
return defaultValue;
}
var parsed = JSON.parse(value);
return parsed == null ? defaultValue : parsed;
} catch (e) {
return defaultValue;
}
function __init__restoreLastSidebarState() {
var isMobile = window.matchMedia("(max-width: 600px)").matches;
if (isMobile) {
// Init last state if not mobile
return;
}
var sidebarState = __init__getSidebarState(true);
var book = document.querySelector(".book");
// Show sidebar if it enabled
if (sidebarState && book) {
book.classList.add("without-animation", "with-summary");
}
}
function __init__restoreLastSidebarState() {
var isMobile = window.matchMedia("(max-width: 600px)").matches;
if (isMobile) {
// Init last state if not mobile
return;
}

try {
__init__restoreLastSidebarState();
} finally {
var book = document.querySelector(".book");
book.classList.remove("honkit-cloak");
var sidebarState = __init__getSidebarState(true);
var book = document.querySelector(".book");
// Show sidebar if it enabled
if (sidebarState && book) {
book.classList.add("without-animation", "with-summary");
}
</script>
<script src="{{ "gitbook.js"|resolveAsset }}"></script>
<script src="{{ "theme.js"|resolveAsset }}"></script>
{% for resource in plugins.resources.js %}
{% if resource.url %}
<script src="{{ resource.url }}"></script>
{% else %}
<script src="{{ resource.path|resolveAsset }}"></script>
{% endif %}
{% endfor %}
}

try {
__init__restoreLastSidebarState();
} finally {
var book = document.querySelector(".book");
book.classList.remove("honkit-cloak");
}

// Javascript Interpreter
document.addEventListener('DOMContentLoaded', function () {
var runButton = document.getElementById('run');
var outputElement = document.getElementById('output');

runButton.addEventListener('click', function () {
try {
var result = eval(code);
outputElement.textContent = result;
} catch (error) {
outputElement.textContent = 'Error' + error.message;
}
});
});

</script>
<script src="{{ " gitbook.js"|resolveAsset }}"></script>
<script src="{{ " theme.js"|resolveAsset }}"></script>
{% for resource in plugins.resources.js %}
{% if resource.url %}
<script src="{{ resource.url }}"></script>
{% else %}
<script src="{{ resource.path|resolveAsset }}"></script>
{% endif %}
{% endfor %}
{% endblock %}

{% block body %}
<div class="book honkit-cloak">
<div class="book-summary">
{% block book_sidebar %}
{% block search_input %}{% endblock %}
{% block book_summary %}
<nav role="navigation">
{% include "website/summary.html" %}
</nav>
{% endblock %}
{% block search_input %}{% endblock %}
{% block book_summary %}
<nav role="navigation">
{% include "website/summary.html" %}
</nav>
{% endblock %}
{% endblock %}
</div>

<div class="book-body">
{% block book_body %}
<div class="body-inner">
{% block book_inner %}
{% include "website/header.html" %}

<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
{% block search_results %}
<section class="normal markdown-section">
{% block page %}
{{ page.content|safe }}
{% endblock %}
</section>
{% endblock %}
</div>
</div>
{% endblock %}
<div class="body-inner">
{% block book_inner %}
{% include "website/header.html" %}

<!-- JS interpreter -->
{{ super()}}
<div>
<h2>JavaScript Interpreter</h2>
<textarea id="code" rows="10" cols="50">// Write your JavaScript code here</textarea><br>
<button id="run">Run Code</button><br>
<h3>Output:</h3>
<pre id="output"></pre>
</div>

<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
{% block search_results %}
<section class="normal markdown-section">
{% block page %}
{{ page.content|safe }}
{% endblock %}
</section>
{% endblock %}
</div>
</div>

{% block book_navigation %}
{% if page.previous and page.previous.path %}
<a href="{{ page.previous.path|resolveFile }}{{ page.previous.anchor }}" class="navigation navigation-prev {% if not (page.next and page.next.path) %}navigation-unique{% endif %}" aria-label="Previous page: {{ page.previous.title }}">
<i class="fa fa-angle-left"></i>
</a>
{% endif %}
{% if page.next and page.next.path %}
<a href="{{ page.next.path|resolveFile }}{{ page.next.anchor }}" class="navigation navigation-next {% if not (page.previous and page.previous.path) %}navigation-unique{% endif %}" aria-label="Next page: {{ page.next.title }}">
<i class="fa fa-angle-right"></i>
</a>
{% endif %}



{% endblock %}
</div>

{% block book_navigation %}
{% if page.previous and page.previous.path %}
<a href="{{ page.previous.path|resolveFile }}{{ page.previous.anchor }}"
class="navigation navigation-prev {% if not (page.next and page.next.path) %}navigation-unique{% endif %}"
aria-label="Previous page: {{ page.previous.title }}">
<i class="fa fa-angle-left"></i>
</a>
{% endif %}
{% if page.next and page.next.path %}
<a href="{{ page.next.path|resolveFile }}{{ page.next.anchor }}"
class="navigation navigation-next {% if not (page.previous and page.previous.path) %}navigation-unique{% endif %}"
aria-label="Next page: {{ page.next.title }}">
<i class="fa fa-angle-right"></i>
</a>
{% endif %}
{% endblock %}
{% endblock %}
</div>

<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({{ template.getJSContext()|dump|safe }});
gitbook.push(function () {
gitbook.page.hasChanged({{ template.getJSContext() | dump | safe }});
});
</script>
</div>
Expand Down