janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build script now fixes links in getting started

Browse Source
This commit is contained in:
janis
2023-02-23 16:18:30 +01:00
parent 7f3e83c44d
commit 784541d9ab
2 changed files with 29 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
website/docs/gettingStarted.html
View File

@@ -20,7 +20,7 @@
<h1>Introduction</h1> <h1>Introduction</h1>
<p>Welcome to impress.js! This presentation framework allows you to create stunning presentations with the power of CSS3 transformations. <p>Welcome to impress.js! This presentation framework allows you to create stunning presentations with the power of CSS3 transformations.
<strong>NOTE:</strong> This Guide is not made for you, if you have never written HTML and/or CSS before. Knowing your way around in JavaScript certainly helps, but is not a necessity. You may still continue this tutorial and try to understand what we do as you go.</p> <strong>NOTE:</strong> This Guide is not made for you, if you have never written HTML and/or CSS before. Knowing your way around in JavaScript certainly helps, but is not a necessity. You may still continue this tutorial and try to understand what we do as you go.</p>
<p>For more advanced and complete documentation, you might prefer the <a href="DOCUMENTATION.md">DOCUMENTATION</a>.</p> <p>For more advanced and complete documentation, you might prefer the <a href="/docs/reference">DOCUMENTATION</a>.</p>
<h1>Getting started with impress.js</h1> <h1>Getting started with impress.js</h1>
<h2>Installation / acquiring the framework</h2> <h2>Installation / acquiring the framework</h2>
<p>First of all, you need to know, if you are going to have WiFi connection when you hold your presentation. If you are not sure, please use the method where you download the file instead of the cdn.</p> <p>First of all, you need to know, if you are going to have WiFi connection when you hold your presentation. If you are not sure, please use the method where you download the file instead of the cdn.</p>
@@ -130,7 +130,7 @@ Hello World
</code></pre> </code></pre>
<p><strong>NOTE:</strong> You may also use negative numbers for all these properties!</p> <p><strong>NOTE:</strong> You may also use negative numbers for all these properties!</p>
<h2>More advanced features</h2> <h2>More advanced features</h2>
<p>You might want to change some default settings, like the transition speed, the width &amp; height of the target screen, etc. This table is from the <a href="DOCUMENTATION.md">DOCUMENTATION</a> and was slightly adapted.</p> <p>You might want to change some default settings, like the transition speed, the width &amp; height of the target screen, etc. This table is from the <a href="/docs/reference">DOCUMENTATION</a> and was slightly adapted.</p>
<table> <table>
<thead> <thead>
<tr> <tr>
@@ -173,13 +173,13 @@ Hello World
</tbody> </tbody>
</table> </table>
<h3><strong>Renaming Steps</strong></h3> <h3><strong>Renaming Steps</strong></h3>
<p>You can give each step an ID. The name of the ID will be displayed in the browsers navigation bar instead of the default <em>step-x</em> whereas x is replaced by the current step number. This can be especially helpful, when trying to jump between steps and go back to a previous one. If you want to know how to move to a specific slide, you should take a look at the <a href="./src/plugins/goto/README.md">README</a> of the &quot;Goto&quot; plugin.</p> <p>You can give each step an ID. The name of the ID will be displayed in the browsers navigation bar instead of the default <em>step-x</em> whereas x is replaced by the current step number. This can be especially helpful, when trying to jump between steps and go back to a previous one. If you want to know how to move to a specific slide, you should take a look at the <a href="/docs/plugins/goto.html">README</a> of the &quot;Goto&quot; plugin.</p>
<h1>Using PLUGINS</h1> <h1>Using PLUGINS</h1>
<p>Impress.js is limited to everything that we have discussed so far and some other details, we won't go over here. Check the <a href="DOCUMENTATION.md">DOCUMENTATION</a> for that.</p> <p>Impress.js is limited to everything that we have discussed so far and some other details, we won't go over here. Check the <a href="/docs/reference">DOCUMENTATION</a> for that.</p>
<p>impress.js has accumulated a lot of very useful plugins. You may find all of them <a href="./src/plugins/">here</a>!</p> <p>impress.js has accumulated a lot of very useful plugins. You may find all of them <a href="/docs/plugins/.html">here</a>!</p>
<p>Each Plugin has a README.md file which you may read to get an idea on how to use them. Some of the plugins run unnoticed in the background, like the <em>resize</em> plugin, which automatically resizes the presentation whenever the browser window changed in size. Here, I will give you an overview of some of the plugins that impress.js includes by default.</p> <p>Each Plugin has a README.md file which you may read to get an idea on how to use them. Some of the plugins run unnoticed in the background, like the <em>resize</em> plugin, which automatically resizes the presentation whenever the browser window changed in size. Here, I will give you an overview of some of the plugins that impress.js includes by default.</p>
<p><strong>NOTE:</strong> As previously mentioned, if you'd like to get more info about how it works, take a look at the <a href="DOCUMENTATION.md">DOCUMENTATION</a> or the README.md files of the plugins.</p> <p><strong>NOTE:</strong> As previously mentioned, if you'd like to get more info about how it works, take a look at the <a href="/docs/reference">DOCUMENTATION</a> or the README.md files of the plugins.</p>
<h2><a href="/src/plugins/impressConsole/README.md">impressConsole</a></h2> <h2><a href="/docs/plugins/impressConsole.html">impressConsole</a></h2>
<p>This plugin opens up and additional browser tab which contains a speaker console. There you can see the current slide, the past slide and your notes. You add notes to your presentation by adding a <em>div</em> that belongs to the class &quot;notes&quot; to your <em>div</em> that belongs to the class &quot;step&quot;.</p> <p>This plugin opens up and additional browser tab which contains a speaker console. There you can see the current slide, the past slide and your notes. You add notes to your presentation by adding a <em>div</em> that belongs to the class &quot;notes&quot; to your <em>div</em> that belongs to the class &quot;step&quot;.</p>
<h3><strong>adding notes to your presentation</strong></h3> <h3><strong>adding notes to your presentation</strong></h3>
<p>You may add notes to your presentation by adding a div of class <em>notes</em> into the div of class <em>step</em>, like so:</p> <p>You may add notes to your presentation by adding a div of class <em>notes</em> into the div of class <em>step</em>, like so:</p>
@@ -196,14 +196,14 @@ Hello World
} }
</code></pre> </code></pre>
<p>To enter it, press P.</p> <p>To enter it, press P.</p>
<h2><a href="/src/plugins/goto/README.md">Goto</a></h2> <h2><a href="/docs/plugins/goto.html">Goto</a></h2>
<p>This plugin allows you to directly go to a certain step, by either passing in a number or the id of the step you'd like to go to.</p> <p>This plugin allows you to directly go to a certain step, by either passing in a number or the id of the step you'd like to go to.</p>
<h2><a href="/src/plugins/progress/README.md">Progress</a></h2> <h2><a href="/docs/plugins/progress.html">Progress</a></h2>
<p>This plugin, as its name implies, displays the progress in your presentation.</p> <p>This plugin, as its name implies, displays the progress in your presentation.</p>
<h2><a href="/src/plugins/blackout/blackout.js">Blackout</a></h2> <h2><a href="/docs/plugins/blackout/blackout.js.html">Blackout</a></h2>
<p>This plugin hides the screen, if you press B, which is handy in a lot of situations.</p> <p>This plugin hides the screen, if you press B, which is handy in a lot of situations.</p>
<h2>Other plugins</h2> <h2>Other plugins</h2>
<p>You may find the other plugins <a href="/src/plugins/">here</a>. It certainly helps if you familiarise yourself with the plugins.</p> <p>You may find the other plugins <a href="/docs/plugins/.html">here</a>. It certainly helps if you familiarise yourself with the plugins.</p>
<h1>Thank you for reading this</h1> <h1>Thank you for reading this</h1>
<p>If you want to know more, you can always ready the <a href="/docs/reference">DOCUMENTATION</a> or, even better, read the Source Code and try to understand how it works!</p> <p>If you want to know more, you can always ready the <a href="/docs/reference">DOCUMENTATION</a> or, even better, read the Source Code and try to understand how it works!</p>
</div> </div>

26
website/docs/src/build.js
View File

@@ -272,8 +272,8 @@ function parseDocumentationMD () {
}; };
} }
function generateGettingStarted ( html ) { function generateGettingStarted ( inputHTML ) {
let returnHTML = ''; let html = inputHTML;
for ( let letter in html ) { for ( let letter in html ) {
if ( html[letter] === '<' ) { if ( html[letter] === '<' ) {
if ( html.slice( parseInt( letter ), parseInt( letter ) + 9 ) === '<a href="' ) { if ( html.slice( parseInt( letter ), parseInt( letter ) + 9 ) === '<a href="' ) {
@@ -281,18 +281,28 @@ function generateGettingStarted ( html ) {
while ( html.slice( parseInt( letter ) + i, parseInt( letter ) + i + 1 ) !== '"' ) { while ( html.slice( parseInt( letter ) + i, parseInt( letter ) + i + 1 ) !== '"' ) {
i += 1; i += 1;
}; };
console.log( html.slice( parseInt( letter ) + 9, parseInt( letter ) + i ) ); let link = html.slice( parseInt( letter ) + 9, parseInt( letter ) + i )
let checkedLink = ''; let checkedLink = '';
if ( html.slice( parseInt( letter ) + 9, parseInt( letter ) + i ) === 'DOCUMENTATION.md' ) { if ( link === 'DOCUMENTATION.md' ) {
checkedLink = '/docs/reference'; checkedLink = '/docs/reference';
} else if ( link.slice( 0, 13 ) === './src/plugins' ) {
if ( link.slice( link.length - 9, link.length ) === 'README.md' ) {
checkedLink = '/docs/plugins' + link.slice( 13, link.length - 10 ) + '.html';
} else {
checkedLink = '/docs/plugins' + link.slice( 13, link.length ) + '.html';
}
} else if ( link.slice( 0, 12 ) === '/src/plugins' ) {
if ( link.slice( link.length - 9, link.length ) === 'README.md' ) {
checkedLink = '/docs/plugins' + link.slice( 12, link.length - 10 ) + '.html';
} else {
checkedLink = '/docs/plugins' + link.slice( 12, link.length ) + '.html';
}
} }
console.log( checkedLink ); html = html.slice( 0, parseInt( letter ) + 9 ) + checkedLink + html.slice( parseInt( letter ) + i, parseInt( html.length ) );
returnHTML = html.slice( 0, parseInt( letter ) + 9 ) + checkedLink + html.slice( parseInt( letter ) + i, parseInt( html.length ) );
}; };
}; };
}; };
console.log( returnHTML ); return html;
return returnHTML;
} }
function buildExamplesPage () { function buildExamplesPage () {