md2html setup & first doc page

This commit is contained in:
janis
2023-01-21 12:59:08 +01:00
parent 7ae6585f6c
commit 4e1cc69063
10 changed files with 4010 additions and 1609 deletions

5453
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -26,13 +26,14 @@
"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",
"test": "npm exec -- karma start --log-level debug --single-run=true" "test": "npm exec -- karma start --log-level debug --single-run=true",
"build-website": "node ./website/src/build.js"
}, },
"devDependencies": { "devDependencies": {
"eslint": "^6.8.0", "eslint": "^6.8.0",
"jscs": "^3.0.7", "jscs": "^2.1.1",
"jshint": "^2.11.0", "jshint": "^2.11.0",
"karma": "^4.4.1", "karma": "^6.4.1",
"karma-chrome-launcher": "^3.1.0", "karma-chrome-launcher": "^3.1.0",
"karma-firefox-launcher": "^1.3.0", "karma-firefox-launcher": "^1.3.0",
"karma-qunit": "^4.0.0", "karma-qunit": "^4.0.0",
@@ -41,6 +42,7 @@
"qunit": "^2.9.3", "qunit": "^2.9.3",
"qunit-assert-close": "^2.1.2", "qunit-assert-close": "^2.1.2",
"syn": "^0.14.1", "syn": "^0.14.1",
"terser": "^4.6.7" "terser": "^4.6.7",
"node-html-markdown": "^1.3.0"
} }
} }

View File

@@ -0,0 +1,37 @@
.nav-container {
background-color: blue;
width: 100%;
height: 100vh;
}
.nav-list {
display: flex;
flex-direction: column;
overflow: scroll;
}
.navitem {
text-decoration: none;
color: white;
padding: 5%;
width: 90%;
background-color: rgb(22, 22, 117);
font-size: 1rem;
}
.navitem:hover {
background-color: black;
}
.nav-subitem {
text-decoration: none;
color: white;
padding: 5%;
padding-left: 25%;
font-size: 0.8rem;
width: 70%;
background-color: rgb(27, 27, 165);
}
.nav-subitem:hover {
background-color: rgb(43, 43, 43);
}

View File

@@ -0,0 +1,52 @@
/*
*
* impress.js - documentation stylesheet
*
* Created 2023 by Janis Hutz
*
*/
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: calc(16pt + 0.4vw);
font-family: sans-serif;
}
.content {
background-color: rgb(255, 255, 255);
color: black;
display: grid;
grid-template-areas:
'menu main main main main'
'menu main main main main'
'menu main main main main'
'menu main main main main'
'menu main main main main'
'menu main main main main'
'menu main main main main'
'menu main main main main'
'menu footer footer footer footer';
}
.darkMode {
background-color: rgb(46, 46, 46);
color: white
}
#nav {
grid-area: menu;
width: 90%;
height: 100%;
}
#docPage {
grid-area: main;
overflow: scroll;
}
#footer {
grid-area: footer;
}

View File

@@ -2,14 +2,19 @@
<html> <html>
<head> <head>
<title>Docs - impress.js</title> <title>Docs - impress.js</title>
<!--I am using jquery for button animations and loading of the different docPages.--> <!--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/jquery/3.6.1/jquery.min.js"></script>
<script>console.log(location.href)</script> <script defer src="/js/docs/loader.js"></script>
<link rel="stylesheet" href="/css/docs/style.css">
</head> </head>
<body> <body>
<div class="content"> <div class="content">
<div id="nav"></div> <div id="nav"></div>
<div id="docPage"></div> <div id="docPage">
<div class="docTitle">
<h1>Welcome to the impress.js docs!</h1>
</div>
</div>
<div id="footer"></div> <div id="footer"></div>
</div> </div>
</body> </body>

21
website/docs/nav.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="/css/docs/navstyle.css">
</head>
<body>
<div class="nav-container">
<a class="logo-container" href="/"><img class="logo" src="/assets/apple-touch-icon.png" alt="impress-logo"></a>
<div class="nav-wrapper">
<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>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,13 @@
/*
*
* impress.js website - build.js
*
* Developed 2023 by Janis Hutz
*
*/
/*
We will convert certain MD files to html and include them in the documentation. This mostly includes the plugin documentation.
If there is no MD file in the directory, there will be no documentation. The script will also automatically build the nav menu
and copy all the necessary files to the correct places.
*/

View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="content">
<div id="nav"></div>
<div id="docPage">
<div class="docTitle"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

View File

@@ -0,0 +1,3 @@
$( document ).ready( function () {
$( '#nav' ).load( '/docs/nav.html' );
} );