203 lines
8.0 KiB
HTML
Executable File
203 lines
8.0 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.1.1/dist/css/materialize.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
|
<link rel="stylesheet" href="../assets/css/simpledoc.css">
|
|
<link rel="stylesheet" href="../assets/css/prism.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.2.2/dist/js/materialize.min.js"></script>
|
|
<script>
|
|
document.documentElement.setAttribute('theme', 'light');
|
|
</script>
|
|
<script src="../assets/js/config.js"></script>
|
|
<script src="../assets/js/prism.js"></script>
|
|
<script src="../assets/js/simpledoc.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<title>SimpleDoc - Quick start</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div include-html="../components/header.html"></div>
|
|
|
|
<main>
|
|
<section class="section section-title primary-container cyan darken-1" style="border-radius: 24px" id="index-banner">
|
|
<div class="container row py-5">
|
|
<div class="col s12 m8 offset-m1 xl7 offset-xl1 center-on-small-only">
|
|
<h1 class="header white-text" style="font-size: 4.2rem; margin-top: 1.6rem;">Quick start</h1>
|
|
<h4 class="light white-text" style="line-height: 1.25; margin-bottom: 1.6rem;">Let's set up and begin using SimpleDoc in no time.</h4>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div style="margin-bottom: 40px;"></div>
|
|
|
|
<div class="container row">
|
|
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
|
|
<div id="download" class="section scrollspy">
|
|
<h4 class="header-offset">Download</h4>
|
|
<p>
|
|
You can download the latest version of SimpleDoc on its <a href="https://github.com/LastLifeLeft/simpledoc/releases">GitHub release page</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<div id="requirements" class="section scrollspy">
|
|
<h4 class="header-offset">Requirements</h4>
|
|
<p>
|
|
SimpleDoc needs to run from a web server and won't work when using the <code class="inline-code">file:///</code> protocol scheme because of CORS security issues.
|
|
<br><br>
|
|
</div>
|
|
|
|
<div id="structure" class="section scrollspy">
|
|
<h4 class="header-offset">Directory Structure</h4>
|
|
<p>Once unpacked, your directory will look like:</p>
|
|
<pre><code class="language-markup">simpledoc/
|
|
├── assets/
|
|
│ ├── css/
|
|
│ │ ├── simpledoc.css
|
|
│ │ └── prism.css
|
|
│ ├── js/
|
|
│ │ ├── config.js <-- Configure this!
|
|
│ │ ├── simpledoc.js
|
|
│ │ └── prism.js
|
|
│ └── images/
|
|
│ └── showcase/
|
|
├── components/
|
|
│ ├── header.html
|
|
│ └── footer.html
|
|
├── pages/
|
|
│ ├── documentation/
|
|
│ ├── quickstart.html
|
|
│ ├── documentation.html
|
|
│ ├── showcase.html
|
|
│ └── license.html
|
|
├── templates/
|
|
│ ├── page-template.html
|
|
│ └── doc-detail-template.html
|
|
└── index.html</code></pre>
|
|
</div>
|
|
|
|
<div id="configuration" class="section scrollspy">
|
|
<h4 class="header-offset">Important: Configure BASE_PATH</h4>
|
|
<p>
|
|
<strong class="red-text">Before you start, you must configure the BASE_PATH!</strong>
|
|
<br><br>
|
|
If your documentation is in a subdirectory (not at the root of your domain), you need to set this in <code class="inline-code">assets/js/config.js</code>:
|
|
</p>
|
|
<pre><codeclass="language-javascript">const SIMPLEDOC_CONFIG = {
|
|
BASE_PATH: '', // Change this to your subdirectory!
|
|
SITE_NAME: 'SimpleDoc',
|
|
};</code></pre>
|
|
|
|
<h5>Examples:</h5>
|
|
<table class="striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Your URL</th>
|
|
<th>BASE_PATH Setting</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>https://example.com/</td>
|
|
<td><code class="inline-code">BASE_PATH: ''</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>https://example.com/docs/</td>
|
|
<td><code class="inline-code">BASE_PATH: '/docs'</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>https://lastlife.net/doc/</td>
|
|
<td><code class="inline-code">BASE_PATH: '/doc'</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>https://example.com/projects/api-docs/</td>
|
|
<td><code class="inline-code">BASE_PATH: '/projects/api-docs'</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>
|
|
<strong>Important notes:</strong>
|
|
</p>
|
|
<ul>
|
|
<li>Always start with <code class="inline-code">/</code> (forward slash)</li>
|
|
<li>Never end with <code class="inline-code">/</code> (no trailing slash)</li>
|
|
<li>Use forward slashes even on Windows</li>
|
|
</ul>
|
|
|
|
<p>
|
|
For detailed information, see <code class="inline-code">SUBDIRECTORY_SETUP.md</code> in the root directory.
|
|
</p>
|
|
</div>
|
|
<div id="customization" class="section scrollspy">
|
|
<h4 class="header-offset">Customization</h4>
|
|
|
|
<h5>Adding Your Images</h5>
|
|
<p>Place your images in <code class="inline-code">assets/images/</code>:</p>
|
|
<ul>
|
|
<li><strong>Card images:</strong> 1.png, 2.png, 3.png, 4.png (400x300px recommended)</li>
|
|
<li><strong>Profile images:</strong> community.png, lastlife.png (200x200px recommended)</li>
|
|
<li><strong>Showcase:</strong> Put screenshots in <code class="inline-code">assets/images/showcase/</code></li>
|
|
</ul>
|
|
|
|
<h5>Creating New Pages</h5>
|
|
<p>Use the templates in <code class="inline-code">templates/</code> directory.</p>
|
|
|
|
<h5>Customizing PrismJS</h5>
|
|
<p>
|
|
The included Prism supports HTML, CSS, and JavaScript. To add more languages:
|
|
</p>
|
|
<ol>
|
|
<li>Visit <a href="https://prismjs.com/download.html">PrismJS download page</a></li>
|
|
<li>Select your theme and languages</li>
|
|
<li>Replace <code class="inline-code">assets/css/prism.css</code> and <code class="inline-code">assets/js/prism.js</code></li>
|
|
</ol>
|
|
|
|
<h5>Updating Navigation</h5>
|
|
<p>Edit <code class="inline-code">components/header.html</code> to add or modify menu items.</p>
|
|
|
|
<h5>Customizing Colors</h5>
|
|
<p>
|
|
Edit <code class="inline-code">assets/css/simpledoc.css</code> to change site-wide styles.
|
|
<br>
|
|
Available MaterializeCSS colors: <code class="inline-code">red</code>, <code class="inline-code">blue</code>, <code class="inline-code">green</code>, <code class="inline-code">orange</code>, <code class="inline-code">cyan</code>, <code class="inline-code">purple</code>, <code class="inline-code">pink</code>, <code class="inline-code">teal</code>, etc.
|
|
</p>
|
|
</div>
|
|
|
|
<div id="tldr" class="section scrollspy">
|
|
<h4 class="header-offset">TL;DR</h4>
|
|
<ol>
|
|
<li>Configure <code class="inline-code">BASE_PATH</code> in <code class="inline-code">assets/js/config.js</code></li>
|
|
<li>Add your images to <code class="inline-code">assets/images/</code></li>
|
|
<li>Test locally with a web server</li>
|
|
<li>Customize the content in <code class="inline-code">pages/</code></li>
|
|
<li>Update navigation in <code class="inline-code">components/header.html</code></li>
|
|
<li>Deploy to your server</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col hide-on-small-only m3 xl3">
|
|
<div class="toc-wrapper pinned">
|
|
<div style="height: 1px">
|
|
<ul class="section table-of-contents">
|
|
<li><a href="#download" class="active">Download</a></li>
|
|
<li><a href="#requirements">Requirements</a></li>
|
|
<li><a href="#structure">Directory Structure</a></li>
|
|
<li><a href="#configuration">Configure BASE_PATH</a></li>
|
|
<li><a href="#customization">Customization</a></li>
|
|
<li><a href="#tldr">TL;DR</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div include-html="../components/footer.html"></div>
|
|
<script>includeHTML();</script>
|
|
</body>
|
|
</html>
|