Made welcome page into own view

2026-03-22 01:34:44 -05:00 · 2022-08-19 21:21:54 -04:00 · 2022-08-19 21:21:54 -04:00 · 1c46914bc7
commit 1c46914bc7
parent 760dfb7a07
4 changed files with 170 additions and 81 deletions
--- a/src/routes/docs.js
+++ b/src/routes/docs.js
@ -1,15 +1,29 @@
 const { Router } = require('express');
 const router = new Router();
+const util = require('../util');

-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('/welcome', async (request, response) => {
+	const renderData = {
+		currentPage: 'welcome',
+	};
+
+	response.render('docs/welcome', renderData);
+});
+
+router.get('/install', async (request, response) => {
+	const renderData = {
+		currentPage: 'install',
+	};
+
+	response.render('docs/install', renderData);
+});
+
 router.get('/search', async (request, response) => {
 	const renderData = {
 		errorList: JSON.stringify(errorList),
@ -18,53 +32,6 @@ router.get('/search', async (request, response) => {
 	response.render('docs/search', renderData);
 });

-router.get('/install', async (request, response) => {
-	const renderData = 	{
-		currentPage: 'install',
-	};
-
-	response.render('docs/install', renderData);
-});
-
-function getRawDocs(locale, subpath, pageName) {
-
-	const localePath = path.join(__dirname, '../../docs', locale.replace('-', '_'), subpath, `${pageName}.md`);
-	const defaultPath = path.join(__dirname, '../../docs', 'en_US', subpath, `${pageName}.md`);
-
-	if (fs.existsSync(localePath)) {
-		return {
-			content: parseDocs(fs.readFileSync(localePath, 'utf8')),
-			MDLocale: locale,
-		};
-	} else if (fs.existsSync(defaultPath)) {
-		return {
-			content: parseDocs(fs.readFileSync(defaultPath, 'utf8')),
-			MDLocale: 'en-US'
-		};
-	} else {
-		return {
-			content: null,
-			MDLocale: null
-		};
-	}
-}
-
-function parseDocs(rawDocs) {
-	if (rawDocs) {
-		let markedContent = marked(rawDocs);
-		markedContent = markedContent.replaceAll(/\[yt-iframe\]\(.{11}\)/g, (match) => {
-			const videoIDRegex = /(?<=\[yt-iframe\]\().*(?=\))/g;
-			const videoID = match.match(videoIDRegex)[0];
-			return `<div class="aspectratio-fallback"><iframe src="https://www.youtube-nocookie.com/embed/${videoID}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`;
-		});
-
-		const htmlContent = marked.parse(markedContent);
-		return htmlContent;
-	} else {
-		return null;
-	}
-}
-
 router.get('/:page', async (request, response, next) => {
 	const renderData = 	{};

@ -72,7 +39,7 @@ router.get('/:page', async (request, response, next) => {
 	const pageName = request.params.page;
 	renderData.currentPage = pageName;

-	const { content, MDLocale } = getRawDocs(locale, '', pageName);
+	const { content, MDLocale } = util.getRawDocs(locale, '', pageName);
 	if (content) {
 		renderData.content = content;
 	} else {
@ -80,27 +47,26 @@ router.get('/:page', async (request, response, next) => {
 	}
 	renderData.missingInLocale = locale !== MDLocale;

-	// A boolean to show the quick links grid or not.
-	if (pageName === 'welcome') {
-		renderData.showQuickLinks = true;
-	}
-
 	response.render('docs/docs', renderData);
 });
-router.get('/:subpath/:page', async (request, response, next) => {
-	const renderData = 	{};

+router.get('/:subpath/:page', async (request, response, next) => {
 	const locale = response.locals.localeString;
 	const pageName = request.params.page;
 	const subpath = request.params.subpath;
-	renderData.currentPage = `${subpath}/${pageName}`;

-	const { content, MDLocale } = getRawDocs(locale, subpath, pageName);
+	const renderData = {
+		currentPage: `${subpath}/${pageName}`
+	};
+
+	const { content, MDLocale } = util.getRawDocs(locale, subpath, pageName);
+
 	if (content) {
 		renderData.content = content;
 	} else {
 		return next();
 	}
+	
 	renderData.missingInLocale = locale !== MDLocale;

 	response.render('docs/docs', renderData);
--- a/src/util.js
+++ b/src/util.js
@ -1,12 +1,15 @@
+const path = require('path');
 const fs = require('fs-extra');
 const got = require('got');
 const crypto = require('crypto');
 const Stripe = require('stripe');
+const { marked } = require('marked');
 const mailer = require('./mailer');
 const database = require('./database');
 const logger = require('./logger');
 const config = require('../config.json');

+
 const stripe = new Stripe(config.stripe.secret_key);

 function fullUrl(request) {
@ -25,6 +28,45 @@ function getLocale(region, language) {
 	return require(`${__dirname}/../locales/US_en.json`);
 }

+function getRawDocs(locale, subpath, pageName) {
+
+	const localePath = path.join(__dirname, '../docs', locale.replace('-', '_'), subpath, `${pageName}.md`);
+	const defaultPath = path.join(__dirname, '../docs', 'en_US', subpath, `${pageName}.md`);
+
+	if (fs.existsSync(localePath)) {
+		return {
+			content: parseDocs(fs.readFileSync(localePath, 'utf8')),
+			MDLocale: locale,
+		};
+	} else if (fs.existsSync(defaultPath)) {
+		return {
+			content: parseDocs(fs.readFileSync(defaultPath, 'utf8')),
+			MDLocale: 'en-US'
+		};
+	}
+
+	return {
+		content: null,
+		MDLocale: null
+	};
+}
+
+function parseDocs(rawDocs) {
+	if (!rawDocs) {
+		return null;
+	}
+
+	let markedContent = marked(rawDocs);
+	markedContent = markedContent.replaceAll(/\[yt-iframe\]\(.{11}\)/g, (match) => {
+		const videoIDRegex = /(?<=\[yt-iframe\]\().*(?=\))/g;
+		const videoID = match.match(videoIDRegex)[0];
+		return `<div class="aspectratio-fallback"><iframe src="https://www.youtube-nocookie.com/embed/${videoID}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`;
+	});
+
+	const htmlContent = marked.parse(markedContent);
+	return htmlContent;
+}
+
 function apiGetRequest(path, headers) {
 	return got.get(`https://api.pretendo.cc${path}`, {
 		responseType: 'json',
@ -338,6 +380,8 @@ async function handleStripeEvent(event) {
 module.exports = {
 	fullUrl,
 	getLocale,
+	getRawDocs,
+	parseDocs,
 	apiGetRequest,
 	apiPostGetRequest,
 	apiDeleteGetRequest,
--- a/views/docs/docs.handlebars
+++ b/views/docs/docs.handlebars
@ -42,27 +42,6 @@
 				<p class="missing-in-locale-notice">{{ localeHelper locale "docs" "missingInLocale" }}</p>
 			{{/if}}

-			{{#if showQuickLinks}}
-				<h1>{{ localeHelper locale "docs" "quickLinks" "header" }}</h1>
-				<div class="quick-links-grid">
-					<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>
-						</div>
-						<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/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>
-						</div>
-						<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>
-				</div>
-			{{/if}}
-
 			{{{ content }}}
 		</div>
 	</div>
--- a/views/docs/welcome.handlebars
+++ b/views/docs/welcome.handlebars
@ -0,0 +1,100 @@
+<link rel="stylesheet" href="/assets/css/documentation.css" />
+
+<div class="docs-wrapper">
+
+	<a href="/" class="logo-link">
+		<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
+			<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
+				<g id="logo" transform="translate(553 467)">
+					<rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0" />
+					<g id="XMLID_6_" transform="translate(8.222 1.418)">
+						<path id="XMLID_15_"
+							d="M69.149,28.312c-1.051.553-.129,2.139.922,1.585a12.365,12.365,0,0,1,8.794-.571,10.829,10.829,0,0,1,6.342,4.166c.645,1,2.231.074,1.585-.922C83.308,27.169,74.7,25.436,69.149,28.312Z"
+							transform="translate(-64.246 -23.389)" fill="#9d6ff3" />
+						<path id="XMLID_14_"
+							d="M82.64,14.608A15.565,15.565,0,0,0,73.5,8.45a17.535,17.535,0,0,0-12.647.9c-1.051.553-.129,2.139.922,1.585,3.411-1.788,7.6-1.714,11.209-.719,3.1.848,6.268,2.544,8.038,5.309C81.681,16.543,83.267,15.622,82.64,14.608Z"
+							transform="translate(-57.476 -7.693)" fill="#9d6ff3" />
+						<path id="XMLID_9_"
+							d="M55.68,47.8a10.719,10.719,0,0,0-6.71,2.3H45.983A1.336,1.336,0,0,0,44.6,51.376V75.84a1.431,1.431,0,0,0,1.383,1.383h3.023a1.367,1.367,0,0,0,1.309-1.383V68.392A10.993,10.993,0,1,0,55.68,47.8Zm0,17.182a6.213,6.213,0,1,1,6.213-6.213A6.216,6.216,0,0,1,55.68,64.982Z"
+							transform="translate(-44.6 -40.406)" fill="#9d6ff3" />
+					</g>
+				</g>
+				<text id="Pretendo" transform="translate(593 492)" fill="#fff" font-size="17"
+					font-family="Poppins-Bold, Poppins" font-weight="700">
+					<tspan x="0" y="0">Pretendo</tspan>
+				</text>
+			</g>
+		</svg>
+	</a>
+
+	<div class="header-wrapper">
+		<button id="openSidebar" class="nostyle">
+			<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-menu">
+				<line x1="3" y1="12" x2="21" y2="12"></line>
+				<line x1="3" y1="6" x2="21" y2="6"></line>
+				<line x1="3" y1="18" x2="21" y2="18"></line>
+			</svg>
+		</button>
+		{{> header}}
+	</div>
+
+	{{> docs-sidebar}}
+
+	<div class="content">
+		<div class="content-inner">
+			<h1>{{ localeHelper locale "docs" "quickLinks" "header" }}</h1>
+			<div class="quick-links-grid">
+				<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>
+					</div>
+					<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/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>
+					</div>
+					<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>
+			</div>
+
+			<h1>Welcome</h1>
+			<p>Welcome to the official documentation for Pretendo Network. Here you'll be able to find installation instructions, error
+			codes, and more.</p>
+			<p>To begin, check out the quick links or take a look at the sidebar</p>
+		</div>
+	</div>
+</div>
+
+<script src="/assets/js/docssidebarhandler.js"></script>
+
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
+<link rel="stylesheet" href="/assets/css/highlightjs.css">
+<script>hljs.highlightAll();</script>