mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-08-24 09:36:43 -05:00
feat(docs): add search, minor style changes
This commit is contained in:
Ash Monty
18
docs/common/errorList.json
Normal file
18
docs/common/errorList.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"juxt": [
|
||||
"JXT-598-0000",
|
||||
"JXT-598-0001",
|
||||
"JXT-598-0002",
|
||||
"JXT-598-0003",
|
||||
"JXT-598-0009",
|
||||
"JXT-598-0010",
|
||||
"JXT-598-0011",
|
||||
"JXT-598-0015",
|
||||
"JXT-598-0020",
|
||||
"JXT-598-1XXX",
|
||||
"JXT-598-2XXX",
|
||||
"JXT-598-3XXX",
|
||||
"JXT-598-4XXX",
|
||||
"JXT-598-5XXX"
|
||||
]
|
||||
}
|
||||
@@ -1,75 +1,5 @@
|
||||
# Welcome
|
||||
|
||||
Welcome to the official documentation for Pretendo Network. Here you'll be able to find installation instructions, error codes, and more.
|
||||
|
||||
# Other documentation
|
||||
|
||||
We are a bunch of programmers spending our free time reverse engineering and coding game servers for 3ds and wiiu.
|
||||
|
||||
We are a bunch of programmers spending our free time reverse engineering and coding game servers for 3ds and wiiu.
|
||||
|
||||
We are a bunch of programmers spending our free time reverse engineering and coding game servers for 3ds and wiiu.
|
||||
|
||||
```javascript
|
||||
function returnTrue() {
|
||||
class trueOrFalseObject {
|
||||
constructor(trueOrFalse) {
|
||||
this.trueOrFalse = trueOrFalse;
|
||||
}
|
||||
get trueOrFalse() {
|
||||
return this.trueOrFalse();
|
||||
}
|
||||
convertNumberToBoolean(trueOrFalse) {
|
||||
if (convertStringToNumber(trueOrFalse) === 0) {
|
||||
return true;
|
||||
} else if (convertStringToNumber(trueOrFalse) == 1) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
convertStringToNumber(trueOrFalse) {
|
||||
if (trueOrFalse === "true") {
|
||||
return 0;
|
||||
} else if (trueOrFalse === "false") {
|
||||
return true * 69 - 1 - false * 69 * 420 - 69 + 2;
|
||||
}
|
||||
}
|
||||
trueOrFalse() {
|
||||
return this.convertNumberToBoolean(trueOrFalse);
|
||||
}
|
||||
}
|
||||
|
||||
let objectWhichWeKnowIsTrue = new trueOrFalseObject("true");
|
||||
|
||||
function checkIfTrueOrFalse(objectToCheckIfTrueOrFalse) {
|
||||
if (objectToCheckIfTrueOrFalse === objectWhichWeKnowIsTrue.trueOrFalse) {
|
||||
return objectWhichWeKnowIsTrue.trueOrFalse;
|
||||
console.log(
|
||||
"Successfully checked if the object is true or false. Result: the object is true."
|
||||
);
|
||||
// TODO: fix text not console logging
|
||||
} else {
|
||||
objectWhichWeKnowIsTrue = new trueOrFalseObject("false");
|
||||
if (objectToCheckIfTrueOrFalse === objectWhichWeKnowIsTrue.trueOrFalse) {
|
||||
return objectWhichWeKnowIsTrue.trueOrFalse;
|
||||
console.log(
|
||||
"Successfully checked if the object is true or false. Result: the object is false."
|
||||
);
|
||||
// TODO: fix text not console logging
|
||||
} else {
|
||||
// something went horribly wrong
|
||||
}
|
||||
objectWhichWeKnowIsTrue = new trueOrFalseObject("true");
|
||||
}
|
||||
}
|
||||
|
||||
const isTrueTrueOrFalse = checkIfTrueOrFalse("true");
|
||||
const isfalseTrueOrFalse = checkIfTrueOrFalse("false");
|
||||
|
||||
const trueOrFalseJSON = {
|
||||
true: isTrueTrueOrFalse,
|
||||
false: isfalseTrueOrFalse,
|
||||
};
|
||||
|
||||
return trueOrFalseJSON.true
|
||||
}
|
||||
|
||||
console.log(returnTrue())
|
||||
```
|
||||
To begin, check out the quick links or take a look at the sidebar
|
||||
|
||||
@@ -1,31 +1,34 @@
|
||||
html,
|
||||
body {
|
||||
body,
|
||||
div.main-body {
|
||||
height: 100%;
|
||||
background: var(--bg-shade-0);
|
||||
}
|
||||
|
||||
a.logo-link {
|
||||
margin: auto;
|
||||
margin-left: 36px;
|
||||
height: 40px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.docs-wrapper header {
|
||||
width: calc(100% - 72px);
|
||||
background: var(--bg-shade-0);
|
||||
padding: 12px 36px;
|
||||
margin: 18px 0;
|
||||
box-sizing: border-box;
|
||||
margin: 20px;
|
||||
margin-left: 0;
|
||||
}
|
||||
header a.logo-link {
|
||||
.docs-wrapper header a.logo-link {
|
||||
display: none;
|
||||
}
|
||||
header nav a:first-child {
|
||||
margin-left: -24px;
|
||||
.docs-wrapper header nav a:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.docs-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, fit-content(100%));
|
||||
grid-template-rows: repeat(2, fit-content(100%));
|
||||
height: 100vh;
|
||||
grid-template-columns: fit-content(100%) auto;
|
||||
grid-template-rows: fit-content(100%) auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.docs-wrapper .sidebar {
|
||||
@@ -33,16 +36,15 @@ header nav a:first-child {
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
width: clamp(270px, 30vw, 500px);
|
||||
background: var(--bg-shade-0);
|
||||
max-height: calc(100vh - 69px);
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
min-height: 100%;
|
||||
}
|
||||
.docs-wrapper .sidebar .section {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 200px;
|
||||
margin-left: 138px;
|
||||
margin-left: clamp(60px, 10vw, 138px);
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
.docs-wrapper .sidebar .section:first-child {
|
||||
@@ -76,11 +78,11 @@ header nav a:first-child {
|
||||
}
|
||||
|
||||
.docs-wrapper .content {
|
||||
width: calc(100vw - clamp(270px, 30vw, 500px) - (72px * 2));
|
||||
background: var(--bg-shade-1);
|
||||
padding: 72px;
|
||||
max-height: calc(100vh - 69px - (72px * 2));
|
||||
max-height: 100%;
|
||||
overflow-y: scroll;
|
||||
border-top-left-radius: 8px;
|
||||
}
|
||||
.docs-wrapper .content-inner {
|
||||
max-width: 900px;
|
||||
@@ -126,32 +128,100 @@ header nav a:first-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.docs-wrapper .content .missing-in-locale-notice {
|
||||
background: var(--bg-shade-2);
|
||||
padding: 24px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.search .purple-card {
|
||||
padding: 36px;
|
||||
}
|
||||
.search .purple-card h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.search .purple-card p {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.search .purple-card input::placeholder {
|
||||
color: var(--text-shade-0);
|
||||
}
|
||||
.search .purple-card input:focus {
|
||||
background-color: var(--bg-shade-4);
|
||||
color: #fff;
|
||||
transition: 200ms;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search .input-wrapper {
|
||||
position: relative;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.search .input-wrapper .matches {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
font-size: 1rem;
|
||||
background-color: var(--bg-shade-2);
|
||||
border: none;
|
||||
border-radius: 0 0 4px 4px;
|
||||
max-height: 204px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.search .input-wrapper .matches * {
|
||||
padding: 12px;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
.search .input-wrapper .matches a:hover {
|
||||
background-color: var(--bg-shade-1);
|
||||
}
|
||||
.search input.has-matches {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
/*
|
||||
@media screen and (max-width: 1080px) {
|
||||
.docs-wrapper .sidebar .section {
|
||||
margin-left: 60px;
|
||||
width: 184px;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
/* Scrollbar styling 'cause it's fancy */
|
||||
.docs-wrapper .sidebar::-webkit-scrollbar,
|
||||
.docs-wrapper .content::-webkit-scrollbar,
|
||||
.docs-wrapper .content pre code::-webkit-scrollbar {
|
||||
.docs-wrapper .content pre code::-webkit-scrollbar,
|
||||
.search .input-wrapper .matches::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
.docs-wrapper .sidebar::-webkit-scrollbar-track,
|
||||
.docs-wrapper .content::-webkit-scrollbar-track,
|
||||
.docs-wrapper .content pre code::-webkit-scrollbar-track {
|
||||
.docs-wrapper .content pre code::-webkit-scrollbar-track,
|
||||
.search .input-wrapper .matches::-webkit-scrollbar-track {
|
||||
background: none;
|
||||
}
|
||||
.docs-wrapper .sidebar::-webkit-scrollbar-thumb,
|
||||
.docs-wrapper .content::-webkit-scrollbar-thumb,
|
||||
.docs-wrapper .content pre code::-webkit-scrollbar-thumb {
|
||||
.docs-wrapper .content pre code::-webkit-scrollbar-thumb,
|
||||
.search .input-wrapper .matches::-webkit-scrollbar-thumb {
|
||||
background-color: var(--text-shade-0);
|
||||
border-radius: 24px;
|
||||
border: 3px solid var(--bg-shade-1);
|
||||
border: 3px solid var(--bg-shade-0);
|
||||
}
|
||||
.docs-wrapper .content::-webkit-scrollbar-thumb {
|
||||
border: 3px solid var(--bg-shade-1);
|
||||
}
|
||||
.docs-wrapper .content pre code::-webkit-scrollbar-thumb {
|
||||
border: 3px solid var(--bg-shade-0);
|
||||
.docs-wrapper .content pre code::-webkit-scrollbar-thumb,
|
||||
.search .input-wrapper .matches::-webkit-scrollbar-thumb {
|
||||
border: 3px solid var(--bg-shade-2);
|
||||
}
|
||||
.docs-wrapper .sidebar {
|
||||
|
||||
.docs-wrapper .sidebar,
|
||||
.search .input-wrapper .matches {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--text-shade-0) var(--bg-shade-1);
|
||||
}
|
||||
@@ -163,59 +233,3 @@ header nav a:first-child {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--text-shade-0) var(--bg-shade-0);
|
||||
}
|
||||
.docs-wrapper .content .missing-in-locale-notice {
|
||||
background: var(--bg-shade-2);
|
||||
padding: 24px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.localization-form input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 0;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
background-color: var(--bg-shade-3);
|
||||
border: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
padding: 12px 24px;
|
||||
color: var(--text-shade-1);
|
||||
width: 20px;
|
||||
flex: 2 10%;
|
||||
}
|
||||
|
||||
.search input::placeholder {
|
||||
color: var(--text-shade-0);
|
||||
}
|
||||
|
||||
.search input:focus {
|
||||
background-color: #fff;
|
||||
color: var(--bg-shade-3);
|
||||
transition: 200ms;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search button {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 0;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--text-shade-3);
|
||||
padding: 12px 36px;
|
||||
background: var(--accent-shade-0);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
.docs-wrapper .sidebar .section {
|
||||
margin-left: 60px;
|
||||
width: 184px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,17 +4,26 @@ const router = new Router();
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const { marked } = require('marked');
|
||||
const errorList = require('../../docs/common/errorList.json');
|
||||
|
||||
router.get('/', async (request, response) => {
|
||||
response.redirect('/docs/welcome');
|
||||
});
|
||||
|
||||
router.get('/search', async (request, response) => {
|
||||
const renderData = {
|
||||
errorList: JSON.stringify(errorList),
|
||||
currentPage: 'search',
|
||||
};
|
||||
response.render('docs/search', renderData);
|
||||
});
|
||||
|
||||
router.get('/install', async (request, response) => {
|
||||
const renderData = {
|
||||
currentPage: request.params.slug
|
||||
currentPage: 'install',
|
||||
};
|
||||
|
||||
response.render('docs/search', renderData);
|
||||
response.render('docs/install', renderData);
|
||||
});
|
||||
|
||||
router.get('/:slug', async (request, response, next) => {
|
||||
@@ -53,11 +62,9 @@ router.get('/:slug', async (request, response, next) => {
|
||||
renderData.content = content;
|
||||
|
||||
// A boolean to show the quick links grid or not.
|
||||
let showQuickLinks = false;
|
||||
if (pageName === 'welcome') {
|
||||
showQuickLinks = true;
|
||||
renderData.showQuickLinks = true;
|
||||
}
|
||||
renderData.showQuickLinks = showQuickLinks;
|
||||
|
||||
response.render('docs/docs', renderData);
|
||||
});
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
{{#if showQuickLinks}}
|
||||
<h1>{{ localeHelper locale "docs" "quickLinks" "header" }}</h1>
|
||||
<div class="quick-links-grid">
|
||||
<a href="/docs/troubleshoot-errors">
|
||||
<a href="/docs/install">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> <div>
|
||||
<p class="header">{{ localeHelper locale "docs" "quickLinks" "links" 0 "header" }}</p>
|
||||
<p>{{ localeHelper locale "docs" "quickLinks" "links" 0 "caption" }}</p>
|
||||
@@ -48,7 +48,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
|
||||
</a>
|
||||
|
||||
<a href="/docs/beans">
|
||||
<a href="/docs/search">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> <div>
|
||||
<p class="header">{{ localeHelper locale "docs" "quickLinks" "links" 1 "header" }}</p>
|
||||
<p>{{ localeHelper locale "docs" "quickLinks" "links" 1 "caption" }}</p>
|
||||
|
||||
@@ -31,9 +31,78 @@
|
||||
|
||||
{{> docs-sidebar}}
|
||||
|
||||
<div class="content">
|
||||
<div class="content search">
|
||||
<div class="content-inner">
|
||||
<div class="card"></div>
|
||||
<div class="purple-card">
|
||||
<h1>Got an error code?</h1>
|
||||
<p>Type it in the box below to get information on your issue!</p>
|
||||
<label for="errorCode">Error code</label>
|
||||
<div class="input-wrapper">
|
||||
<input id="errorCode" placeholder="ABC-012-3456" required />
|
||||
<div class="matches">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script id="errorList" type="application/json">
|
||||
{{{errorList}}}
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/cleave.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Get the error list from the script tag
|
||||
let rawErrorList = JSON.parse(document.getElementById('errorList').innerHTML);
|
||||
|
||||
// Convert the error list to a single flat array
|
||||
rawErrorList = Object.values(rawErrorList).flat();
|
||||
|
||||
// We remove the unknown characters (e.g. the X in JXT-598-2XXX), so fuse.js will be able to match the error codes
|
||||
const errorList = rawErrorList.map(error => {
|
||||
return error.replace(/X*$/g, '');
|
||||
});
|
||||
|
||||
const fuse = new Fuse(errorList, {includeMatches: true, threshold: 0.4});
|
||||
const cleave = new Cleave('input#errorCode', {
|
||||
delimiter: '-',
|
||||
blocks: [3, 3, 4],
|
||||
uppercase: true
|
||||
});
|
||||
|
||||
const matchesContainer = document.querySelector('.matches');
|
||||
const input = document.querySelector('input#errorCode');
|
||||
|
||||
input.addEventListener('input', (e) => {
|
||||
const errorCode = e.target.value;
|
||||
const matches = fuse.search(errorCode);
|
||||
|
||||
if (!errorCode) {
|
||||
matchesContainer.innerHTML = '';
|
||||
input.classList.remove('has-matches');
|
||||
return
|
||||
}
|
||||
|
||||
matchesContainer.innerHTML = '';
|
||||
input.classList.add('has-matches');
|
||||
|
||||
if (matches.length > 0) {
|
||||
matches.forEach(match => {
|
||||
const errorCode = match.item.padEnd(12, 'X');
|
||||
const matchLink = document.createElement('a');
|
||||
matchLink.innerText = errorCode;
|
||||
matchLink.href = `/docs/errors/${errorCode}`;
|
||||
matchesContainer.appendChild(matchLink);
|
||||
});
|
||||
} else {
|
||||
const noMatch = document.createElement('p');
|
||||
noMatch.innerText = 'No matches found';
|
||||
matchesContainer.appendChild(noMatch);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user