more beautiful examples index.html & fixes

This commit is contained in:
2023-02-23 20:47:20 +01:00
parent a1f5da363f
commit 50a83798d1
7 changed files with 122 additions and 32 deletions

View File

@@ -13,7 +13,7 @@
<a class="navitem" id="gettingStarted" href="/docs/gettingStarted.html">Getting Started</a>
<a class="navitem" id="referenceNav" onclick="toggleList( 'reference' );">API reference</a>
<div class="dropdown" id="reference">
<a class="nav-subitem" id="root" href="/docs/reference">Home</a><a class="nav-subitem" id="CSS" href="/docs/reference/CSS.html">CSS</a><a class="nav-subitem" id="HTML" href="/docs/reference/HTML.html">HTML</a><a class="nav-subitem" id="JavaScript" href="/docs/reference/JavaScript.html">JavaScript</a><a class="nav-subitem" id="Plugins" href="/docs/reference/Plugins.html">Plugins</a></div>
<a class="nav-subitem" id="root" href="/docs/reference">Home</a><a class="nav-subitem" id="CSS" href="/docs/reference/CSS.html">CSS</a><a class="nav-subitem" id="HTML" href="/docs/reference/HTML.html">HTML</a><a class="nav-subitem" id="JavaScript" href="/docs/reference/JavaScript.html">JavaScript</a><a class="nav-subitem" id="Plugins" href="/docs/reference/Plugins.html">Plugins</a><a class="nav-subitem" id="index" href="/docs/reference/index.html">index</a></div>
<a class="navitem" id="pluginsNav" onclick="toggleList( 'plugins' );">Plugins</a>
<div class="dropdown" id="plugins">
<a class="nav-subitem" id="autoplay" href="/docs/plugins/autoplay.html">autoplay</a><a class="nav-subitem" id="blackout" href="/docs/plugins/blackout.html">blackout</a><a class="nav-subitem" id="extras" href="/docs/plugins/extras.html">extras</a><a class="nav-subitem" id="form" href="/docs/plugins/form.html">form</a><a class="nav-subitem" id="fullscreen" href="/docs/plugins/fullscreen.html">fullscreen</a><a class="nav-subitem" id="goto" href="/docs/plugins/goto.html">goto</a><a class="nav-subitem" id="help" href="/docs/plugins/help.html">help</a><a class="nav-subitem" id="impressConsole" href="/docs/plugins/impressConsole.html">impressConsole</a><a class="nav-subitem" id="media" href="/docs/plugins/media.html">media</a><a class="nav-subitem" id="mobile" href="/docs/plugins/mobile.html">mobile</a><a class="nav-subitem" id="mouse-timeout" href="/docs/plugins/mouse-timeout.html">mouse-timeout</a><a class="nav-subitem" id="navigation" href="/docs/plugins/navigation.html">navigation</a><a class="nav-subitem" id="navigation-ui" href="/docs/plugins/navigation-ui.html">navigation-ui</a><a class="nav-subitem" id="progress" href="/docs/plugins/progress.html">progress</a><a class="nav-subitem" id="rel" href="/docs/plugins/rel.html">rel</a><a class="nav-subitem" id="resize" href="/docs/plugins/resize.html">resize</a><a class="nav-subitem" id="skip" href="/docs/plugins/skip.html">skip</a><a class="nav-subitem" id="stop" href="/docs/plugins/stop.html">stop</a><a class="nav-subitem" id="substep" href="/docs/plugins/substep.html">substep</a><a class="nav-subitem" id="toolbar" href="/docs/plugins/toolbar.html">toolbar</a><a class="nav-subitem" id="touch" href="/docs/plugins/touch.html">touch</a></div>

View File

@@ -372,16 +372,48 @@ function buildExamplesPage () {
/* Auto generate an index.html that lists all the directories under examples/
* This is useful for gh-pages, so you can link to http://impress.github.io/impress.js/examples
*/
var html_list = '<ul><br />\n'
let dirList = fs.readdirSync( path.join( __dirname + '/../../demo/examples' ) )
console.log( 'building examples page' );
let html_list = '<ul class="list"><br>\n';
let dirList = fs.readdirSync( path.join( __dirname + '/../../demo/examples' ) );
dirList.forEach( function( dir ) {
html_list += ' <li><a href="' + dir['file'] + '/">' + dir[ 'name' ] + '</a></li>\n';
if ( dir === 'index.html' ) {} else {
html_list += ' <li class="button"><a class="list-element" href="' + dir + '/">' + dir + '</a></li>\n';
};
});
html_list += '</ul>\n'
var html = '<html>\n<head>\n<title>Example presentations</title>\n</head>\n<body>'
html += '<h1>Example presentations</h1>\n' + html_list
html += '</body>\n</html>'
let html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css">
<title>Example presentations</title>
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="/js/index.js"></script>
<style>
.list {
margin-top: 10%;
font-size: 1.5rem;
list-style: none;
}
.list-element {
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<div id="navbar"></div>
<div class="title">
<div class="title-content">
<h1 class="heading">Examples</h1>
</div>
${ html_list }
</ul>
</div>
<div id="footer"></div>
</body>
</html>`;
fs.writeFileSync( path.join( __dirname + '/../../demo/examples/index.html' ), html );
}