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

more doc for build script + fixes

Browse Source
This commit is contained in:
janis
2023-01-24 13:37:05 +01:00
parent 367b65f150
commit 4fb1ff42c1
5 changed files with 26 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -22,7 +22,7 @@
"url": "https://github.com/impress/impress.js/issues" "url": "https://github.com/impress/impress.js/issues"
}, },
"scripts": { "scripts": {
"all": "npm run build && npm run test && npm run lint", "all": "npm run build && npm run test && npm run lint && npm run build-website",
"build": "node build.js", "build": "node build.js",
"lint": "npm exec -- jshint src test/*.js && npm exec -- jscs src test/*.js", "lint": "npm exec -- jshint src test/*.js && npm exec -- jscs src test/*.js",
"new-lint": "npm exec -- eslint src test", "new-lint": "npm exec -- eslint src test",

26
website/docs/Contributing.md
View File

@@ -1,28 +1,16 @@
# DOCS # DOCS
## Introduction ## Introduction
The impress.js docs include all the documentation that is relevant to the user. If you have just created a MD file for documentation and don't want to also write an HTML file, you may use the script, as described below. You may obviously write the HTML yourself by using the Template, which gives you more control. You may always after the HTML has been generated change things about it. The impress.js docs include all the documentation that is relevant to the user. The docs get converted from MD into HTML automatically when running ```npm run build-website```.
## Using the script ## Using the script
You may convert the MD file to HTML by running Whenever you update Documentation in this repository, please run the following commands to update the website:
``` ```
npm install npm install
npm run build-webpage [Filename here] npm run build-website
``` ```
After that you should add the link to your page in the documentation to the navigation bar by adding a new entry in nav.html.
*Note*: The html page is generated in the same directory the md file resides in. ## Adding new pages
If you want to add new pages (either generated ones or normal HTML files), you need to adjust some things inside of the build.js file which you can find in [here](src/build.js). Add a new entry that should be added to the nav menu. You should always use the *template.html* file if you create a new page.
## Creating from scratch using the template
Copy the file ```template.html``` to the location of the documentation page and rename it to something descriptive. Inside, you may find some basic HTML skeleton laid out, which you should NOT modify, as this creates all the necessary elements to make all doc pages look the same. You should avoid to add CSS whenever possible, use the already provided classes so the page turns out the way it should.
**The following CSS classes are provided:**
(You may look at the CSS source if you want to)
Element | Function
------------|------------
.text | normal text, required for scaling on mobile devices
.heading1 | equal to the # in MD
.heading2 | equal to the ## in MD
.heading3 | equal to the ### in MD
.code | display code block. Follow instructions below for code blocks
## Adding documentation for a new plugin
If you add a new Plugin to impress.js, you do only need to run the build-website script as described above.

6
website/docs/index.html
View File

@@ -3,9 +3,9 @@
<head> <head>
<title>Docs - impress.js</title> <title>Docs - impress.js</title>
<!--I am using jquery for button animations.--> <!--I am using jquery for button animations.-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script defer 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> <script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/js/docs/loader.js"></script> <script defer src="/js/docs/loader.js"></script>
<link rel="stylesheet" href="/css/docs/style.css"> <link rel="stylesheet" href="/css/docs/style.css">
</head> </head>
<body> <body>

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

@@ -58,12 +58,14 @@ function findLinks ( html, path ) {
}; };
function checkLinks ( link, path ) { function checkLinks ( link, path ) {
console.log( link ); let pos = 0;
if ( link.slice( parseInt( link.length ) - 9, parseInt( link.length ) ) === 'README.md' ) { if ( link.slice( parseInt( link.length ) - 9, parseInt( link.length ) ) === 'README.md' ) {
console.log( 'linking to readme' ); console.log( 'linking to readme' );
} else { } else {
if ( link.slice( 0, 2 ) === '..' ) { if ( link.slice( 0, 2 ) === '..' ) {
console.log( 'relative path' ); while ( link.slice( pos, pos + 2 ) === '.' || link.slice( pos, pos + 2 ) === '/' ) {
pos += 1;
};
} else if ( link.slice( 0, 1 ) !== '.' && link.slice( 0, 1 ) !== '/' ) { } else if ( link.slice( 0, 1 ) !== '.' && link.slice( 0, 1 ) !== '/' ) {
console.log( 'relative path in same folder' ); console.log( 'relative path in same folder' );
} else { } else {

12
website/index.html
View File

@@ -4,13 +4,14 @@
<title>impress.js - the stunning javascript presentation framework</title> <title>impress.js - the stunning javascript presentation framework</title>
<meta name="description" content="impress.js, a javascript presentation framework that uses the power of CSS 3 to create stunning presentations in your browser! It is inspired by the idea behind prezi.com"> <meta name="description" content="impress.js, a javascript presentation framework that uses the power of CSS 3 to create stunning presentations in your browser! It is inspired by the idea behind prezi.com">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/dark_hljs.css">
<!--I am using jquery for button animations (plus loading of the navbar and footer)--> <!--I am using jquery for button animations (plus loading of the navbar and footer)-->
<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/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="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> <script defer src="/js/index.js"></script>
<!--I will be using highlight.js to highlight the syntax, but I still need to figure out how to use it.--> <!--I will be using highlight.js to highlight the syntax, but I still need to figure out how to use it.-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js" integrity="sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA==" 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>
</head> </head>
<body> <body>
<!--Here, the navbar is inserted by jquery--> <!--Here, the navbar is inserted by jquery-->
@@ -30,7 +31,12 @@
<div class="create"> <div class="create">
<div class="unstyled-html"> <div class="unstyled-html">
<h3>Use HTML</h3> <h3>Use HTML</h3>
<!--TODO: Add HTML demo-code--> <!--TODO: Add html demo code-->
<pre>
<code>
&lt;div&gt;&lt;/div&gt;
</code>
</pre>
</div> </div>
<div class="crazy-styled"> <div class="crazy-styled">
<h3>And CSS</h3> <h3>And CSS</h3>