final cleanup & fixes
This commit is contained in:
@@ -6,11 +6,7 @@ The also contains a folder for the docs (Documentation) for the project.
|
||||
|
||||
## Roadmap
|
||||
What needs to be done:
|
||||
- Finish styling of main page
|
||||
- Add code samples to main page
|
||||
- Find good font
|
||||
- Create good background image for main page
|
||||
- use jQuery and maybe some other tools to do crazy CSS scroll animations
|
||||
|
||||
# DOCS
|
||||
## Contributing Documentation
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Contributing :: Docs - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script 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 id="doc-container">
|
||||
<h1>Getting Started - Contributing</h1>
|
||||
<h3>So, you'd like to contribute to this project?</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
56
website/docs/contributing/index.html
Normal file
56
website/docs/contributing/index.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Contributing :: Docs - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script 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 id="doc-container">
|
||||
<h1>Getting Started - Contributing</h1>
|
||||
<h3>So, you'd like to contribute to this project?</h3>
|
||||
<p>We're excited to have you in the team! We'll give you a quick introduction on contributing to this project.</p>
|
||||
<p>Development happens on <a href="https://github.com/impress/impress.js">Github</a>. Fork the project and start editing! You may want to clone the repo locally. To do this, run the following commands (omit the --recursive for a minimal checkout): </p>
|
||||
<pre>
|
||||
<code>
|
||||
git clone --recursive https://github.com/impress/impress.js
|
||||
cd impress.js
|
||||
</code>
|
||||
</pre>
|
||||
<p>Once you have made your changes, we expect you to run the following commands for testing:</p>
|
||||
<pre>
|
||||
<code>
|
||||
npm i
|
||||
npm run all
|
||||
</code>
|
||||
</pre>
|
||||
<p>This will build the <b>impress.js</b> file, as well as the <b>impress.min.js</b> file which currently is not included in the repository. It will also build the website and run some tests to make sure your code follows our code guidelines.</p>
|
||||
<h3>Repository structure</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/website">/website</a>: This folder contains all the source code for the impress.js website.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/website/demo/index.html">website/demo/index.html</a> This is the official impress.js demo, showcasing all of the features of the original impress.js, as well as some new plugins as we add them. As already mentioned, this file is well commented and acts as the official tutorial.
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/website/demo/examples/">website/demo/examples/</a> Contains several demos showcasing additional features available. <a href="website/demo/examples/classic-slides/index.html">Classic Slides</a> is a simple demo that you can use as template if you want to create very simple, rectangular, PowerPoint-like presentations.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/src/">src/</a> The main file is <a href="https://github.com/impress/impress.js/blob/master/src/impress.js">src/impress.js</a>. Additional functionality is implemented as plugins in <a href="https://github.com/impress/impress.js/tree/master/src/plugins/">src/plugins/</a>. See <a href="https://github.com/impress/impress.js/blob/master/src/plugins/README.md">src/plugins/README.md</a> for information about the plugin API and how to write plugins.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/test/">test/</a> Contains QUnit and Syn libraries that we use for writing tests, as well as some test coverage for core functionality. (Yes, more tests are much welcome.) Tests for plugins are in the directory of each plugin.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/js">js/</a> Contains <a href="https://github.com/impress/impress.js/blob/master/js/impress.js">js/impress.js</a>, which contains a concatenation of the core `src/impress.js` and all the plugins. Traditionally this is the file that you'll link to in a browser. In fact both the demo and test files do exactly that.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/website/demo/css/">css</a>: Contains a CSS file used by the demo. This file is <b>not required for using impress.js</b> in your own presentations. Impress.js creates the CSS it needs dynamically.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/extras/">extras/</a> contains plugins that for various reasons aren't enabled by default. You have to explicitly add them with their own `script` element to use them.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/build.js">build.js</a> Simple build file that creates `js/impress.js`. It also creates a minified version `impress.min.js`, but that one is not included in the github repository.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/package.json">package.js</a> An NPM package specification. This was mainly added so you can easily install <a href="https://www.npmjs.com/package/buildify">buildify</a> and run `node build.js`. Other than the build process, which is really just doing roughly `cat src/impress.js src/plugins/*/*.js > js/impress.js`, and testing, `impress.js` itself doesn't depend on Node or any NPM modules.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
44
website/docs/contributing/website.html
Normal file
44
website/docs/contributing/website.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Docs - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script 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 id="doc-container">
|
||||
<h1>Contributing - Website</h1>
|
||||
<h3>So, you'd like to contribute to the impress.js website?</h3>
|
||||
<p>Do you want to contribute to the impress.js website by writing more documentation, improving existing documentation or by adding more pages, fixing some or by doing some better styling? Then let's show you how!</p>
|
||||
<p>You should start by cloning the impress.js repository. How to do that is explained <a href="/docs/contributing">here</a>. The impress.js website is located in the <a href="https://github.com/impress/impress.js/tree/master/website">website/</a> directory. You may find the website build script in the <a href="https://github.com/impress/impress.js/tree/master/website/docs/src">website/docs/src</a> directory together with the template which you should always use when creating new pages.</p>
|
||||
<p>Whenever you add a new page to the impress.js docs, you need first add a new navigation entry in the build-script and then run it to regenerate the navigation menu:</p>
|
||||
<pre>
|
||||
<code>
|
||||
npm i
|
||||
npm run build-website
|
||||
</code>
|
||||
</pre>
|
||||
<h4>Adding a new plugin to impress.js</h4>
|
||||
<p>Whenever you add a plugin to impress.js, please also provide a README.md file. Then run the build script as described above. The script will go through the plugins directory and automatically generate the HTML files from the README's</p>
|
||||
<h3>Ideas for what to do</h3>
|
||||
<ul>
|
||||
<li>Translate into other languages</li>
|
||||
<li>Guess plugin title from title of READMEs instead of filename</li>
|
||||
<li>Optimize dark mode recognition</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -19,7 +19,8 @@
|
||||
<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>
|
||||
<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>
|
||||
<a class="nav-subitem" id="contributing-gettingStarted" href="/docs/contributing">Getting Started</a>
|
||||
<a class="nav-subitem" id="website" href="/docs/contributing/website.html">Website</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -199,7 +199,8 @@ function generateNav () {
|
||||
fileStruct += `</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>
|
||||
<a class="nav-subitem" id="contributing-gettingStarted" href="/docs/contributing">Getting Started</a>
|
||||
<a class="nav-subitem" id="website" href="/docs/contributing/website.html">Website</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -352,13 +353,13 @@ function generateGettingStarted ( inputHTML ) {
|
||||
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';
|
||||
}
|
||||
};
|
||||
}
|
||||
html = html.slice( 0, parseInt( letter ) + 9 ) + checkedLink + html.slice( parseInt( letter ) + i, parseInt( html.length ) );
|
||||
};
|
||||
@@ -368,7 +369,7 @@ function generateGettingStarted ( inputHTML ) {
|
||||
}
|
||||
|
||||
function buildExamplesPage () {
|
||||
/* Auto generate an index.html that lists all the directories under examples/
|
||||
/* 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'
|
||||
|
||||
@@ -17,6 +17,16 @@ function highlightPath () {
|
||||
$( '#plugins' ).slideDown();
|
||||
bannedIDs.push( 'pluginsNav' );
|
||||
setTimeout( highlightSubPath( 14 ), 300 );
|
||||
} else if ( $( location ).attr( 'pathname' ).slice( 6, 19 ) === 'contributing/' ) {
|
||||
$( '#contributingNav' ).animate( { 'background-color': 'black' }, 200 );
|
||||
$( '#contributing' ).slideDown();
|
||||
bannedIDs.push( 'contributingNav' );
|
||||
if ( $( location ).attr( 'pathname' ).length < 21 ) {
|
||||
$( '#contributing-gettingStarted' ).animate( { 'background-color': 'rgb(43, 43, 43)' }, 200 );
|
||||
bannedIDs.push( 'contributing-gettingStarted' );
|
||||
} else {
|
||||
setTimeout( highlightSubPath( 19 ), 300 );
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@@ -44,8 +54,8 @@ $( document ).ready( function () {
|
||||
} else {
|
||||
$( this ).stop();
|
||||
$( this ).animate( { 'background-color': 'rgb(22, 22, 117)' }, 100 );
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
} );
|
||||
|
||||
$( '.nav-subitem' ).mouseenter( function () {
|
||||
@@ -61,8 +71,8 @@ $( document ).ready( function () {
|
||||
} else {
|
||||
$( this ).stop();
|
||||
$( this ).animate( { 'background-color': 'rgb(27, 27, 165)' }, 100 );
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
} );
|
||||
setTimeout( highlightPath, 300 );
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user