Skip to content

Commit

Permalink
feat: Improve some more tooling
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabyx
gabyx committed Jun 12, 2024
1 parent 9666440 commit 51a426c
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 139 deletions.
287 changes: 148 additions & 139 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,108 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>reveal.js</title>

<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/company.css">

<!-- Theme used for syntax highlighting of code -->
<!-- <link rel="stylesheet" href="lib/css/monokai.css"> -->
<link rel="stylesheet" href="plugin/highlight/styles/railscasts.css">

<!-- Printing and PDF exports -->
<script>
// If decktape export we need to load some other css
// Emoji-Convertion
if(window.location.search.match(/decktape/gi))
{
let link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/decktape.css';
document.getElementsByTagName('head')[0].appendChild(link);
}
</script>

<!-- Some tweaks -->
<style type="text/css">
/* Code Focus */
.reveal .line {
display: block;
}
.reveal .line.focus { background: #383838; }

</style>

</head>

<body>
<div class="reveal">
<div class="slides">

<section>
<h1>Technical Presentation</h1>
<p>Reveal.js based presentations are cool:</p>
<ul>
<li>Markdown</li>
<li>CSS</li>
<li>Code Highlighting</li>
<li>Versioning</li>
<li>etc.</li>
</ul>
</section>

<section>
<h1>Smart Presentation</h1>
<h2>Smart Presentation</h2>
<h3>Smart Presentation</h3>
<h4>Smart Presentation</h4>
</section>

<section>
<h2>Code</h2>
<pre><code class="language-cpp stretch" data-trim>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

<title>reveal.js</title>

<link rel="stylesheet" href="dist/reset.css" />
<link rel="stylesheet" href="dist/reveal.css" />
<link rel="stylesheet" href="dist/theme/company.css" />

<!-- Theme used for syntax highlighting of code -->
<!-- <link rel="stylesheet" href="lib/css/monokai.css"> -->
<link rel="stylesheet" href="plugin/highlight/styles/railscasts.css" />

<!-- Printing and PDF exports -->
<script>
// If decktape export we need to load some other css
// Emoji-Convertion
if (window.location.search.match(/decktape/gi)) {
let link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "css/print/decktape.css";
document.getElementsByTagName("head")[0].appendChild(link);
}
</script>

<!-- Some tweaks -->
<style type="text/css">
/* Code Focus */
.reveal .line {
display: block;
}
.reveal .line.focus {
background: #383838;
}
</style>
</head>

<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Technical Presentation</h1>
<p>Reveal.js based presentations are cool:</p>
<ul>
<li>Markdown</li>
<li>CSS</li>
<li>Code Highlighting</li>
<li>Versioning</li>
<li>etc.</li>
</ul>
</section>

<section>
<h1>Smart Presentation</h1>
<h2>Smart Presentation</h2>
<h3>Smart Presentation</h3>
<h4>Smart Presentation</h4>
</section>

<section>
<h2>Code</h2>
<pre><code class="language-cpp stretch" data-trim>
int a = 3;
void foo(int a){
std::cout << "Hello. click!" << std::endl;
std::vector&lt;int&gt; v{1,2,4};
}</code></pre>
</section>

<section data-markdown>
<script type="text/template">
### Markdown
- *Carpe Diem*
- **b**) This is good.
- Inline Code `asd`
- [Links](http://coliru.stacked-crooked.com/)
- **Code**:
```cpp
void foo(int a){
std::cout << "Hello. click!" << std::endl;
std::vector<int>; v{1,2,4};
}
```
- **Editierbarer Code:**
<span class="fragment" data-code-focus="1,2" data-fragment-index="1">Focus</span>
<span class="fragment" data-code-focus="3" data-fragment-index="1" >Focus</span>
<pre class="fragment"><code class="language-cpp stretch" data-trim contenteditable=true>int a = 3;
</section>

<section data-markdown>
<script type="text/template">
### Markdown
- *Carpe Diem*
- **b**) This is good.
- Inline Code `asd`
- [Links](http://coliru.stacked-crooked.com/)
- **Code**:
```cpp
void foo(int a){
std::cout &lt;&lt; "Hello. click!" &lt;&lt; 1 != 3 std::endl;
std::vector&lt;int&gt; v{1,2,4};
}</code></pre>

<span class="fragment">Cool.</span>
</script>
</section>

<section data-markdown>
<script type="text/template">
std::cout << "Hello. click!" << std::endl;
std::vector<int>; v{1,2,4};
}
```
- **Editierbarer Code:**
<span class="fragment" data-code-focus="1,2" data-fragment-index="1">Focus</span>
<span class="fragment" data-code-focus="3" data-fragment-index="1" >Focus</span>
<pre class="fragment"><code class="language-cpp stretch" data-trim contenteditable=true>int a = 3;
void foo(int a){
std::cout &lt;&lt; "Hello. click!" &lt;&lt; 1 != 3 std::endl;
std::vector&lt;int&gt; v{1,2,4};
}</code></pre>

<span class="fragment">Cool.</span>
</script>
</section>

<section data-markdown>
<script type="text/template">
### Code Focus
<pre><code class="language-cpp stretch" data-trim contenteditable=true data-line-numbers="|3-4|8-10" data-fragment-index="1,2">
int a = 3;
Expand All @@ -121,49 +122,57 @@ <h2>Code</h2>
Link <a href="#/3/0/0">1</a>

<span class="fragment" data-fragment-index="2">This is now important too.</span>
</script>
</section>

<section>
<h1>Disclaimer</h1>
<p class="fragment current-only">Customized with <i class="emoji">❤️</i> by Simon Spörri and Gabriel Nützi.</p>
</section>

</script>
</section>

<section>
<h1>Disclaimer</h1>
<p class="fragment current-only">
Customized with <i class="emoji">❤️</i> by Gabriel Nützi and Simon
Spörri.
</p>
</section>
</div>
</div>
</div>

<script src="dist/reveal.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/math/math.js"></script>
<script src="plugin/search/search.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/notes/notes.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
fragmentInURL: true,
mouseWheel: false,
slideNumber: "c/t",
transition: 'fade', // none/fade/slide/convex/concave/zoom
width: 960,
height: 700,
margin: 0.05,
minScale: 0.1,
maxScale: 2,
pdfSeparateFragments: false,
hideInactiveMouse: true,
hideMouseTime: 1000,
// More info https://github.com/hakimel/reveal.js#dependencies
plugins: [RevealMarkdown, RevealHighlight, RevealSearch, RevealNotes, RevealMath, RevealZoom],
});
</script>
</body>

<script src="dist/reveal.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/math/math.js"></script>
<script src="plugin/search/search.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/notes/notes.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
fragmentInURL: true,
mouseWheel: false,
slideNumber: "c/t",
transition: "fade", // none/fade/slide/convex/concave/zoom
width: 960,
height: 700,
margin: 0.05,
minScale: 0.1,
maxScale: 2,
pdfSeparateFragments: false,
hideInactiveMouse: true,
hideMouseTime: 1000,
// More info https://github.com/hakimel/reveal.js#dependencies
plugins: [
RevealMarkdown,
RevealHighlight,
RevealSearch,
RevealNotes,
RevealMath,
RevealZoom,
],
});
</script>
</body>
</html>
6 changes: 6 additions & 0 deletions justfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@ nix-develop:
install:
npm install

# Build all stuff.
# When you changes styles and
# themes you need to run this.
build:
npm run build

# Present the presentation.
present:
npm run present
Expand Down

0 comments on commit 51a426c

Please sign in to comment.