1.0rc
This commit is contained in:
LastLife
parent
659df445e2
commit
9f1a0bedc0
BIN
Asset sources/Showcase.afdesign
Executable file
BIN
Asset sources/Showcase.afdesign
Executable file
Binary file not shown.
3
assets/css/prism.css
Executable file
3
assets/css/prism.css
Executable file
@ -0,0 +1,3 @@
|
|||||||
|
/* PrismJS 1.29.0
|
||||||
|
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
|
||||||
|
code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}
|
||||||
244
assets/css/simpledoc.css
Executable file
244
assets/css/simpledoc.css
Executable file
@ -0,0 +1,244 @@
|
|||||||
|
/* Light Theme (Default) */
|
||||||
|
:root {
|
||||||
|
--bg-primary: #ffffff;
|
||||||
|
--bg-secondary: #f5f5f5;
|
||||||
|
--text-primary: #212121;
|
||||||
|
--text-secondary: #757575;
|
||||||
|
--text-white: #ffffff;
|
||||||
|
--card-bg: #424242;
|
||||||
|
--card-border: #ffffff;
|
||||||
|
--inline-code-bg: #444444;
|
||||||
|
--inline-code-text: #EFEFEF;
|
||||||
|
--nav-gradient-start: #9c27b0;
|
||||||
|
--nav-gradient-end: #ff5722;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Theme */
|
||||||
|
[theme="dark"] {
|
||||||
|
--bg-primary: #121212;
|
||||||
|
--bg-secondary: #1e1e1e;
|
||||||
|
--text-primary: #e0e0e0;
|
||||||
|
--text-secondary: #b0b0b0;
|
||||||
|
--text-white: #ffffff;
|
||||||
|
--card-bg: #2d2d2d;
|
||||||
|
--card-border: #444444;
|
||||||
|
--inline-code-bg: #2d2d2d;
|
||||||
|
--inline-code-text: #e0e0e0;
|
||||||
|
--nav-gradient-start: #7b1fa2;
|
||||||
|
--nav-gradient-end: #d84315;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
display: flex;
|
||||||
|
min-height: 100vh;
|
||||||
|
flex-direction: column;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cards */
|
||||||
|
[theme="dark"] .card {
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
[theme="dark"] .card .card-content {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
[theme="dark"] .card .card-action {
|
||||||
|
border-top: 1px solid var(--card-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tables */
|
||||||
|
[theme="dark"] table {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
[theme="dark"] table.striped tbody tr:nth-child(odd) {
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code blocks */
|
||||||
|
[theme="dark"] .inline-code {
|
||||||
|
background-color: var(--inline-code-bg);
|
||||||
|
color: var(--inline-code-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
[theme="dark"] a {
|
||||||
|
color: #64b5f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
[theme="dark"] a:hover {
|
||||||
|
color: #90caf9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keep navbar links white in dark mode */
|
||||||
|
[theme="dark"] nav a,
|
||||||
|
[theme="dark"] nav .brand-logo,
|
||||||
|
[theme="dark"] nav ul li a {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
[theme="dark"] nav a:hover,
|
||||||
|
[theme="dark"] nav ul li a:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table of contents */
|
||||||
|
[theme="dark"] .table-of-contents a {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
border-left: 2px solid #444444;
|
||||||
|
}
|
||||||
|
|
||||||
|
[theme="dark"] .table-of-contents a:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-left-color: #64b5f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
[theme="dark"] .table-of-contents a.active {
|
||||||
|
color: #64b5f6;
|
||||||
|
border-left-color: #64b5f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Force navbar to always be 64px high, even on small screens */
|
||||||
|
nav {
|
||||||
|
line-height: 64px !important;
|
||||||
|
height: 64px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav .nav-wrapper {
|
||||||
|
height: 64px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav .brand-logo {
|
||||||
|
line-height: 64px !important;
|
||||||
|
height: 64px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul a {
|
||||||
|
line-height: 64px !important;
|
||||||
|
height: 64px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-fixed {
|
||||||
|
height: 64px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Override Materialize's small screen media query */
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
nav {
|
||||||
|
line-height: 64px !important;
|
||||||
|
height: 64px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav .nav-wrapper {
|
||||||
|
height: 64px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav .brand-logo {
|
||||||
|
line-height: 64px !important;
|
||||||
|
height: 64px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul a {
|
||||||
|
line-height: 64px !important;
|
||||||
|
height: 64px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-fixed {
|
||||||
|
height: 64px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the theme toggle button */
|
||||||
|
.theme-toggle-btn {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 64px;
|
||||||
|
padding: 0 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn i {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the mobile hamburger menu button */
|
||||||
|
.dropdown-trigger {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 64px;
|
||||||
|
padding: 0 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-trigger:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-trigger i {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navfeature {
|
||||||
|
background: linear-gradient(45deg, var(--nav-gradient-start), var(--nav-gradient-end));
|
||||||
|
}
|
||||||
|
|
||||||
|
.calltoaction {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-footer {
|
||||||
|
padding-top: 0px;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-action {
|
||||||
|
border-top: 1px solid var(--card-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-offset {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-code {
|
||||||
|
padding-top: 1px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
padding-left: 3px;
|
||||||
|
padding-right: 3px;
|
||||||
|
background-color: var(--inline-code-bg);
|
||||||
|
color: var(--inline-code-text);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-li {
|
||||||
|
list-style-type: none;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
BIN
assets/images/1.png
Executable file
BIN
assets/images/1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
assets/images/2.png
Executable file
BIN
assets/images/2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
assets/images/3.png
Executable file
BIN
assets/images/3.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
assets/images/4.png
Executable file
BIN
assets/images/4.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
assets/images/License.png
Executable file
BIN
assets/images/License.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
assets/images/community.png
Executable file
BIN
assets/images/community.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
assets/images/lastlife.png
Executable file
BIN
assets/images/lastlife.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
assets/images/showcase/materialize-sb.png
Executable file
BIN
assets/images/showcase/materialize-sb.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
28
assets/js/config.js
Executable file
28
assets/js/config.js
Executable file
@ -0,0 +1,28 @@
|
|||||||
|
/**
|
||||||
|
* SimpleDoc Configuration
|
||||||
|
*
|
||||||
|
* Set the BASE_PATH to match where your documentation is hosted:
|
||||||
|
* - Root of domain: BASE_PATH = ''
|
||||||
|
* - In subdirectory: BASE_PATH = '/subdirectory'
|
||||||
|
*
|
||||||
|
* Examples:
|
||||||
|
* - https://example.com/ → BASE_PATH = ''
|
||||||
|
* - https://example.com/docs/ → BASE_PATH = '/docs'
|
||||||
|
* - https://lastlife.net/doc/ → BASE_PATH = '/doc'
|
||||||
|
*/
|
||||||
|
|
||||||
|
const SIMPLEDOC_CONFIG = {
|
||||||
|
// Set this to your subdirectory path (no trailing slash)
|
||||||
|
// Leave empty ('') if at domain root
|
||||||
|
BASE_PATH: 'testSDD',
|
||||||
|
|
||||||
|
// Site name (used in header)
|
||||||
|
SITE_NAME: 'SimpleDoc',
|
||||||
|
|
||||||
|
// Optional: Add more config here as needed
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper function to get full path
|
||||||
|
function getPath(relativePath) {
|
||||||
|
return SIMPLEDOC_CONFIG.BASE_PATH + relativePath;
|
||||||
|
}
|
||||||
7
assets/js/prism.js
Executable file
7
assets/js/prism.js
Executable file
File diff suppressed because one or more lines are too long
146
assets/js/simpledoc.js
Executable file
146
assets/js/simpledoc.js
Executable file
@ -0,0 +1,146 @@
|
|||||||
|
function includeHTML()
|
||||||
|
{
|
||||||
|
var z, i, elmnt, file, xhttp;
|
||||||
|
z = document.getElementsByTagName("*");
|
||||||
|
for (i = 0; i < z.length; i++)
|
||||||
|
{
|
||||||
|
elmnt = z[i];
|
||||||
|
file = elmnt.getAttribute("include-html");
|
||||||
|
if (file)
|
||||||
|
{
|
||||||
|
xhttp = new XMLHttpRequest();
|
||||||
|
xhttp.onreadystatechange = function()
|
||||||
|
{
|
||||||
|
if (this.readyState == 4)
|
||||||
|
{
|
||||||
|
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
|
||||||
|
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
|
||||||
|
elmnt.removeAttribute("include-html");
|
||||||
|
includeHTML();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
xhttp.open("GET", file, true);
|
||||||
|
xhttp.send();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Process navigation links with BASE_PATH
|
||||||
|
processNavigationLinks();
|
||||||
|
|
||||||
|
// Initialize dark mode after content is loaded
|
||||||
|
initDarkMode();
|
||||||
|
|
||||||
|
M.AutoInit();
|
||||||
|
}
|
||||||
|
|
||||||
|
function processNavigationLinks() {
|
||||||
|
// Get BASE_PATH from config (default to empty if not set)
|
||||||
|
var basePath = (typeof SIMPLEDOC_CONFIG !== 'undefined' && SIMPLEDOC_CONFIG.BASE_PATH)
|
||||||
|
? SIMPLEDOC_CONFIG.BASE_PATH
|
||||||
|
: '';
|
||||||
|
|
||||||
|
// Find all links with data-nav-link attribute
|
||||||
|
var navLinks = document.querySelectorAll('[data-nav-link]');
|
||||||
|
|
||||||
|
for (var i = 0; i < navLinks.length; i++) {
|
||||||
|
var link = navLinks[i];
|
||||||
|
var targetPath = link.getAttribute('data-nav-link');
|
||||||
|
|
||||||
|
// Set the href with BASE_PATH prepended
|
||||||
|
link.href = "/" + basePath + targetPath;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initDarkMode() {
|
||||||
|
// Check for saved theme preference or default to 'light'
|
||||||
|
var savedTheme = localStorage.getItem('simpledoc-theme');
|
||||||
|
|
||||||
|
// If no saved preference, check system preference
|
||||||
|
if (!savedTheme) {
|
||||||
|
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||||
|
savedTheme = 'dark';
|
||||||
|
} else {
|
||||||
|
savedTheme = 'light';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply the theme
|
||||||
|
setTheme(savedTheme);
|
||||||
|
|
||||||
|
// Update icons to match current theme
|
||||||
|
updateThemeIcons(savedTheme);
|
||||||
|
|
||||||
|
// Add click listener to desktop toggle button
|
||||||
|
var themeToggle = document.getElementById('theme-toggle');
|
||||||
|
if (themeToggle) {
|
||||||
|
themeToggle.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
toggleTheme();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add click listener to mobile toggle button
|
||||||
|
var themeToggleMobile = document.getElementById('theme-toggle-mobile');
|
||||||
|
if (themeToggleMobile) {
|
||||||
|
themeToggleMobile.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
toggleTheme();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Listen for system theme changes
|
||||||
|
if (window.matchMedia) {
|
||||||
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
|
||||||
|
if (!localStorage.getItem('simpledoc-theme')) {
|
||||||
|
setTheme(e.matches ? 'dark' : 'light');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setTheme(theme) {
|
||||||
|
document.documentElement.setAttribute('theme', theme);
|
||||||
|
localStorage.setItem('simpledoc-theme', theme);
|
||||||
|
updateThemeIcons(theme);
|
||||||
|
updatePrismTheme(theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateThemeIcons(theme) {
|
||||||
|
// Show the opposite icon (what clicking will switch to)
|
||||||
|
var iconName = theme === 'dark' ? 'light_mode' : 'dark_mode';
|
||||||
|
|
||||||
|
var themeIcon = document.getElementById('theme-icon');
|
||||||
|
if (themeIcon) {
|
||||||
|
themeIcon.textContent = iconName;
|
||||||
|
}
|
||||||
|
|
||||||
|
var themeIconMobile = document.getElementById('theme-icon-mobile');
|
||||||
|
if (themeIconMobile) {
|
||||||
|
themeIconMobile.textContent = iconName;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleTheme() {
|
||||||
|
var currentTheme = document.documentElement.getAttribute('theme');
|
||||||
|
var newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||||
|
setTheme(newTheme);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePrismTheme(theme) {
|
||||||
|
// Prism Tomorrow theme works well for both light and dark modes
|
||||||
|
// You can customize this if you want different syntax highlighting themes
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize theme on page load (before includeHTML)
|
||||||
|
(function() {
|
||||||
|
var savedTheme = localStorage.getItem('simpledoc-theme');
|
||||||
|
if (!savedTheme) {
|
||||||
|
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||||
|
savedTheme = 'dark';
|
||||||
|
} else {
|
||||||
|
savedTheme = 'light';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.documentElement.setAttribute('theme', savedTheme);
|
||||||
|
})();
|
||||||
18
components/footer.html
Executable file
18
components/footer.html
Executable file
@ -0,0 +1,18 @@
|
|||||||
|
<footer class="page-footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="l6 s12">
|
||||||
|
<h5>Footer Content</h5>
|
||||||
|
<p>I created SimpleDoc to help me write documentation for my projects. While it's designed to suit my needs and may not be useful for everyone, it's available under the MIT License if you'd like to give it a try.</p>
|
||||||
|
</div>
|
||||||
|
<div class="l4 offset-l8 s12">
|
||||||
|
<h5>Links</h5>
|
||||||
|
<ul>
|
||||||
|
<li class="footer-link"><a href="https://github.com/LastLifeLeft/simpledoc">SimpleDoc on Github</a></li>
|
||||||
|
<li class="footer-link">Last Life on the web:</li>
|
||||||
|
<li class="footer-link"><a href="https://github.com/LastLifeLeft"><i class="fa-brands fa-github fa-lg"></i></a> <a href="https://bsky.app/profile/lastlife.bsky.social"><i class="fa-brands fa-bluesky fa-lg"></i></a> <a href="https://lastlife.net/"><i class="fa-solid fa-house"></i></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
35
components/header.html
Executable file
35
components/header.html
Executable file
@ -0,0 +1,35 @@
|
|||||||
|
<header>
|
||||||
|
<ul id="dropdown1" class="dropdown-content" style="min-width : 150px">
|
||||||
|
<li><a href="" data-nav-link="/pages/quickstart.html">Quick Start</a></li>
|
||||||
|
<li><a href="" data-nav-link="/pages/documentation.html">Documentation</a></li>
|
||||||
|
<li><a href="" data-nav-link="/pages/showcase.html">Showcase</a></li>
|
||||||
|
<li><a href="" data-nav-link="/pages/license.html">License & credits</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="navbar-fixed">
|
||||||
|
<nav class="navfeature">
|
||||||
|
<div class="container">
|
||||||
|
<a href="" data-nav-link="/index.html" class="brand-logo">SimpleDoc</a>
|
||||||
|
<ul id="nav" class="right hide-on-med-and-down">
|
||||||
|
<li><a href="" data-nav-link="/pages/quickstart.html">Quick Start</a></li>
|
||||||
|
<li><a href="" data-nav-link="/pages/documentation.html">Documentation</a></li>
|
||||||
|
<li><a href="" data-nav-link="/pages/showcase.html">Showcase</a></li>
|
||||||
|
<li><a href="" data-nav-link="/pages/license.html">License & credits</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#!" id="theme-toggle" class="theme-toggle-btn" title="Toggle dark mode">
|
||||||
|
<i class="material-icons" id="theme-icon">dark_mode</i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul id="nav-mobile" class="right hide-on-large-only">
|
||||||
|
<li>
|
||||||
|
<a href="#!" id="theme-toggle-mobile" class="theme-toggle-btn" title="Toggle dark mode">
|
||||||
|
<i class="material-icons" id="theme-icon-mobile">dark_mode</i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1"><i class="material-icons right">dehaze</i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
106
index.html
Executable file
106
index.html
Executable file
@ -0,0 +1,106 @@
|
|||||||
|
<!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 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</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div include-html="components/header.html"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s12">
|
||||||
|
<div class="card grey darken-1 calltoaction">
|
||||||
|
<div class="card-content white-text">
|
||||||
|
<span class="card-title center-align">Call to action!</span>
|
||||||
|
<p>SimpleDoc is a simple documentation template used across my projects. It's based on <a href="https://materializeweb.com/" class="grey-text text-lighten-2">Materialize</a> and uses some <a href="https://fontawesome.com/" class="grey-text text-lighten-2">FontAwesome</a> icons.<br />Make it yours by forking it on Github, and give your users the gift of a documentation!</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-action right-align ">
|
||||||
|
<a href="https://github.com/LastLifeLeft/simpledoc" class="white-text"><i class="fa-brands fa-github fa-xl"></i> Star it on Github</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col s12 m6">
|
||||||
|
<div class="card horizontal cyan">
|
||||||
|
<div class="card-image">
|
||||||
|
<img src="assets/images/1.png">
|
||||||
|
</div>
|
||||||
|
<div class="card-stacked">
|
||||||
|
<div class="card-content">
|
||||||
|
<span class="white-text">Get started now with a basic guide and simple examples.</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-action cyan darken-1">
|
||||||
|
<a href="pages/quickstart.html" class="white-text">Quick start</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col s12 m6">
|
||||||
|
<div class="card horizontal red accent-2">
|
||||||
|
<div class="card-image">
|
||||||
|
<img src="assets/images/2.png">
|
||||||
|
</div>
|
||||||
|
<div class="card-stacked">
|
||||||
|
<div class="card-content">
|
||||||
|
<span class="white-text">Take a look at the documentation format.</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-action red">
|
||||||
|
<a href="pages/documentation.html" class="white-text">Documentation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col s12 m6">
|
||||||
|
<div class="card horizontal orange lighten-1">
|
||||||
|
<div class="card-image">
|
||||||
|
<img src="assets/images/3.png">
|
||||||
|
</div>
|
||||||
|
<div class="card-stacked">
|
||||||
|
<div class="card-content">
|
||||||
|
<span class="white-text">Check out projects using SimpleDoc.</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-action orange">
|
||||||
|
<a href="pages/showcase.html" class="white-text">Showcase</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col s12 m6">
|
||||||
|
<div class="card horizontal green lighten-1">
|
||||||
|
<div class="card-image">
|
||||||
|
<img src="assets/images/4.png">
|
||||||
|
</div>
|
||||||
|
<div class="card-stacked white-text">
|
||||||
|
<div class="card-content">
|
||||||
|
<span class="white-text">Something something.</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-action green">
|
||||||
|
<a href="pages/license.html" class="white-text">Licence & credits</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div include-html="components/footer.html"></div>
|
||||||
|
<script>includeHTML();</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
111
pages/documentation.html
Executable file
111
pages/documentation.html
Executable file
@ -0,0 +1,111 @@
|
|||||||
|
<!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 - Documentation</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div include-html="../components/header.html"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="section section-title primary-container red" 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;">Documentation</h1>
|
||||||
|
<h4 class="light white-text" style="line-height: 1.25; margin-bottom: 1.6rem;">Detailed informations on your api endpoints, your software usage, or whatever else.</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="introduction" class="section scrollspy">
|
||||||
|
<h3 class="header">Introduction</h3>
|
||||||
|
<p class="caption">
|
||||||
|
This is the main documentation page. Start by writing a paragraph or two about the general operation of your software before delving into more specific details in the subsections. Below, provide a complete list of API endpoints, each accompanied by a brief description and an example.
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
Since SimpleDoc is a static template, there would be a distinct lack of content for this section. Let's add a few imaginary functions to showcase this page.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div id="earthbending" class="section scrollspy">
|
||||||
|
<h4>Earthbending</h4>
|
||||||
|
<p class="caption">
|
||||||
|
One of the four elemental bending arts, is the geokinetic ability to manipulate earth and rock in all their various forms, prevalent in the Earth Kingdom and the United Republic.
|
||||||
|
<br>
|
||||||
|
Earth is the element of substance, while the people of the Earth Kingdom are diverse, strong, and enduring. Following the lion turtles' decision to relinquish their role as protectors of mankind, Oma and Shu were the first earthbenders to learn this art from the badgermoles.
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Earth and stone levitation</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Earth block</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Earth compression</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Earth dagger</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Earth elevator</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Earth etching</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Earth gauntlet</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Earth hand/mannequin</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Earth impression</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Earth launch</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Earth material manipulation</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Earth shelter</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div id="firebending" class="section scrollspy">
|
||||||
|
<h4>Firebending</h4>
|
||||||
|
<p class="caption">
|
||||||
|
One of the four elemental bending arts, is the pyrokinetic ability to control and produce fire. It is unique among the bending arts, as it is the only one in which the performer can generate the element. The first human firebenders lived in a city atop a lion turtle during the era of Raava and the art later spread to the Sun Warriors, the Fire Nation, and the United Republic of Nations. The Earth Kingdom also has a small firebending minority.
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">A single spark</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Blazing rings and arcs</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Blocking fire</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Fan the flame</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Fire manipulation</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Fire blade</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Fire circle</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Fire dropkick</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Fire fists</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Fire knives</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Fire lashes</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Jet-stepping</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Fire streams</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Fire whip</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Flame charge</a></li>
|
||||||
|
<li class="doc-li"><a href="documentation/example.html">Flame redirection</a></li>
|
||||||
|
</ul>
|
||||||
|
</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="#introduction" class="active">Introduction</a></li>
|
||||||
|
<li><a href="#earthbending">Earthbending</a></li>
|
||||||
|
<li><a href="#firebending">Firebending</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div include-html="../components/footer.html"></div>
|
||||||
|
<script>includeHTML();</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
49
pages/documentation/example.html
Executable file
49
pages/documentation/example.html
Executable file
@ -0,0 +1,49 @@
|
|||||||
|
<!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 - Documentation</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div include-html="../../components/header.html"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="section section-title red" style="border-radius: 24px; padding: 0;" id="index-banner">
|
||||||
|
<div class="row py-5">
|
||||||
|
<div class="col s12 offset-m1 center-on-small-only">
|
||||||
|
<h3 class="white-text" style="margin: 0px; padding-top: 0px; padding-bottom: 5px;">Earth launch</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 40px;"></div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<p class="caption">
|
||||||
|
While earthbenders like being rooted to the ground, with some like Toph being unable to see in the air, they can quickly move rock beneath them and launch them several tens of feet into the air, whether to catch airborne opponents or to travel faster. Toph and Bumi did this during the battle at Wulong Forest and the liberation of Ba Sing Se, respectively. Bolin has shown to be able to launch himself into the air with Earthbending, as was seen when he escaped the Earth Queen's palace.
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
Example:
|
||||||
|
</p>
|
||||||
|
<pre><code class="language-css">stomp the ground with your foot or something</code></pre>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div include-html="../../components/footer.html"></div>
|
||||||
|
<script>includeHTML();</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
103
pages/license.html
Executable file
103
pages/license.html
Executable file
@ -0,0 +1,103 @@
|
|||||||
|
<!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 - Licence</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div include-html="../components/header.html"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="section section-title primary-container green" 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;">Licence</h1>
|
||||||
|
<h4 class="light white-text" style="line-height: 1.25; margin-bottom: 1.6rem;">Don't forget to credit contributors and third-party resources!</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="container row">
|
||||||
|
<h4 class="col s12 header-offset">License terms</h4>
|
||||||
|
<div class="col s12 m10 offset-m1">
|
||||||
|
<div class="card grey darken-3">
|
||||||
|
<div class="card-content white-text">
|
||||||
|
<p>The MIT License (MIT)<br><br>Copyright (c) 2025 ❤x1<br><br>Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:<br><br>The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.<br><br>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="col s12 header-offset">Third-party libraries</h4>
|
||||||
|
<table class="col s12 m10 offset-m1 striped">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Materialize</td>
|
||||||
|
<td>MIT License </td>
|
||||||
|
<td><a href="https://materializeweb.com">https://materializeweb.com</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>FontAwesome Free</td>
|
||||||
|
<td>SIL OFL 1.1 License</td>
|
||||||
|
<td><a href="https://fontawesome.com/">https://fontawesome.com/</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Google Material Icon</td>
|
||||||
|
<td>Apache-2.0 license</td>
|
||||||
|
<td><a href="https://fonts.google.com/icons">https://fonts.google.com/icons</a></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h4 class="col s12 header-offset">Meet the team</h4>
|
||||||
|
<div class="col s12 m5 l4 xl3 offset-l1 offset-xl2">
|
||||||
|
<div class="card medium green lighten-1 center-align">
|
||||||
|
<div style="margin: 20px;">
|
||||||
|
<img class="responsive-img" src="../assets/images/community.png">
|
||||||
|
<h5 class="white-text">The community</h5>
|
||||||
|
<span class="white-text">Anyone who contributes to an open-source project is a hero.<br>Let's celebrate those who work for the benefit of many!</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col s12 m5 l4 xl3 offset-m7 offset-l7 offset-xl7">
|
||||||
|
<div class="card medium green lighten-1 center-align">
|
||||||
|
<div style="margin: 20px;">
|
||||||
|
<img class="responsive-img" src="../assets/images/lastlife.png">
|
||||||
|
<h5 class="white-text">Last Life</h5>
|
||||||
|
<span class="white-text">I am a hobbyist developer with a passion for writing code, but I often struggle when it comes to writing its accompanying documentation.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div include-html="../components/footer.html"></div>
|
||||||
|
<script>includeHTML();</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
202
pages/quickstart.html
Executable file
202
pages/quickstart.html
Executable file
@ -0,0 +1,202 @@
|
|||||||
|
<!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>
|
||||||
51
pages/showcase.html
Executable file
51
pages/showcase.html
Executable file
@ -0,0 +1,51 @@
|
|||||||
|
<!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 - Showcase</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div include-html="../components/header.html"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="section section-title primary-container orange" 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;">Showcase</h1>
|
||||||
|
<h4 class="light white-text" style="line-height: 1.25; margin-bottom: 1.6rem;">Highlights of projects that use SimpleDoc, demonstrating real-world applications.</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 40px;"></div>
|
||||||
|
<div class="container row">
|
||||||
|
<div class="card s12 m4">
|
||||||
|
<div class="card-image">
|
||||||
|
<img src="../assets/images/showcase/materialize-sb.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-action">
|
||||||
|
<a href="https://github.com/LastLifeLeft/Materialize-SB">Materialize SB</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div include-html="../components/footer.html"></div>
|
||||||
|
<script>includeHTML();</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
78
templates/doc-detail-template.html
Executable file
78
templates/doc-detail-template.html
Executable file
@ -0,0 +1,78 @@
|
|||||||
|
<!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 - [FUNCTION NAME]</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div include-html="../../components/header.html"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="section section-title [COLOR]" style="border-radius: 24px; padding: 0;" id="index-banner">
|
||||||
|
<div class="row py-5">
|
||||||
|
<div class="col s12 offset-m1 center-on-small-only">
|
||||||
|
<h3 class="white-text" style="margin: 0px; padding-top: 0px; padding-bottom: 5px;">[FUNCTION NAME]</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 40px;"></div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<p class="caption">
|
||||||
|
[Description of the function or feature goes here. Explain what it does, when to use it, and any important considerations.]
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
Example:
|
||||||
|
</p>
|
||||||
|
<pre><code class="language-javascript">// Your code example here
|
||||||
|
function example() {
|
||||||
|
return "Hello World";
|
||||||
|
}</code></pre>
|
||||||
|
|
||||||
|
<h5>Parameters</h5>
|
||||||
|
<table class="striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Type</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>param1</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>Description of parameter 1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>param2</td>
|
||||||
|
<td>number</td>
|
||||||
|
<td>Description of parameter 2</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h5>Returns</h5>
|
||||||
|
<p>Description of return value</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div include-html="../../components/footer.html"></div>
|
||||||
|
<script>includeHTML();</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
45
templates/page-template.html
Executable file
45
templates/page-template.html
Executable file
@ -0,0 +1,45 @@
|
|||||||
|
<!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 - [PAGE TITLE]</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div include-html="../components/header.html"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="section section-title primary-container [COLOR]" 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;">[PAGE TITLE]</h1>
|
||||||
|
<h4 class="light white-text" style="line-height: 1.25; margin-bottom: 1.6rem;">[PAGE SUBTITLE]</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 40px;"></div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<!-- Your content here -->
|
||||||
|
<p>This is a template page. Replace this content with your own.</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div include-html="../components/footer.html"></div>
|
||||||
|
<script>includeHTML();</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user