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

dark mode in docs

Browse Source
This commit is contained in:
janis
2023-01-22 20:00:31 +01:00
parent 1d9b07761a
commit c87fdfcef5
11 changed files with 330 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
website/docs/gettingStarted.html
View File

@@ -1,9 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>Getting Started | impress.js - documentation</title>
<title>Getting Started - impress.js</title>
<!--I am using jquery for button animations.-->
<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/docs/loader.js"></script>
<link rel="stylesheet" href="/css/docs/style.css">
</head>
<body>
<div class="content">
<div id="nav"></div>
<div id="top"></div>
<div id="docPage">
<div class="doc-container">
<div class="docTitle">
<h1>Getting Started with impress.js</h1>
</div>
<p>impress.js is a JavaScript framework to create stunning presentations. Note: impress may not help you, if you have nothing interesting to say!</p>
<p>If you are new to impress and you want to learn to use it, we suggest you <a href="./gettingStarted.html" class="docs-link">start here</a>!</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

10
website/docs/index.html
View File

@@ -4,15 +4,21 @@
<title>Docs - impress.js</title>
<!--I am using jquery for button animations.-->
<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/docs/loader.js"></script>
<link rel="stylesheet" href="/css/docs/style.css">
</head>
<body>
<div class="content">
<div id="nav"></div>
<div id="top"></div>
<div id="docPage">
<div class="docTitle">
<h1>Welcome to the impress.js docs!</h1>
<div class="doc-container">
<div class="docTitle">
<h1>Welcome to the impress.js docs!</h1>
</div>
<p>impress.js is a JavaScript framework to create stunning presentations. Note: impress may not help you, if you have nothing interesting to say!</p>
<p>If you are new to impress and you want to learn to use it, we suggest you <a href="./gettingStarted.html" class="docs-link">start here</a>!</p>
</div>
</div>
<div id="footer"></div>

57
website/docs/nav.html
View File

@@ -11,11 +11,62 @@
<div class="nav-list">
<a class="navitem" id="home" href="/docs">Home</a>
<a class="navitem" id="gettingStarted" href="/docs/gettingStarted.html">Getting Started</a>
<a class="navitem" id="advanced" href="/docs/reference">API reference</a>
<a class="nav-subitem" id="advanced" href="/docs/advanced/root">Root element</a>
<a class="navitem" id="plugins" href="/docs/plugins.html">Plugins</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="root" href="/docs/reference/root">Root element</a>
</div>
<a class="navitem" id="pluginsNav" onclick="toggleList( 'plugins' );">Plugins</a>
<div class="dropdown" id="plugins">
<a class="nav-subitem" id="impressConsole" href="/docs/plugins/impressConsole.html">Impress Console</a>
</div>
<a class="navitem" id="contributingNav" onclick="toggleList( 'contributing' );">Contributing</a>
<div class="dropdown" id="contributing">
<a class="nav-subitem" id="contributing-gettingStarted" href="/docs/contributing/gettingStarted.html">Getting Started</a>
</div>
</div>
</div>
</div>
</body>
<script>
function highlightPath () {
};
$(document).ready(function () {
$( '.navitem' ).mouseenter( function () {
$( this ).stop();
$( this ).animate( { 'background-color': 'black' }, 100 );
} );
$( '.navitem' ).mouseleave( function () {
if ( sessionStorage.getItem( 'theme' ) == 'dark' ) {
$( this ).stop();
$( this ).animate( { 'background-color': 'rgb(12, 12, 60)' }, 100 );
} else {
$( this ).stop();
$( this ).animate( { 'background-color': 'rgb(22, 22, 117)' }, 100 );
}
} );
$( '.nav-subitem' ).mouseenter( function () {
$( this ).stop();
$( this ).animate( { 'background-color': 'rgb(43, 43, 43)' }, 100 );
} );
$( '.nav-subitem' ).mouseleave( function () {
if ( sessionStorage.getItem( 'theme' ) == 'dark' ) {
$( this ).stop();
$( this ).animate( { 'background-color': 'rgb(18, 18, 99)' }, 100 );
} else {
$( this ).stop();
$( this ).animate( { 'background-color': 'rgb(27, 27, 165)' }, 100 );
}
} );
});
function toggleList ( id ) {
$( `#${id}` ).slideToggle();
};
</script>
</html>

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

@@ -14,7 +14,8 @@
const fs = require( 'fs' );
const path = require( 'path' );
const md2html = require( 'node-html-markdown' );
const mdhtml = require( 'markdown-it' );
const md2html = new mdhtml();
const pluginsPath = path.join( __dirname + '/../../../src/plugins' );
@@ -26,7 +27,7 @@ for ( let item in plugins ) {
if ( error ) {
parseJS( path.join( pluginsPath + '/' + plugins[item] ) );
} else {
console.log( data );
console.log( md2html.render( '' + data ) );
};
} );
}

14
website/docs/top.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="/css/docs/topstyle.css">
</head>
<body>
<div class="top-container">
<div class="top-wrapper">
<button onclick="toggleDarkMode();" id="darkToggle">&#9789;</button>
</div>
</div>
</body>
</html>