From 13e63f1a59b6b711e4061eef575cc62da8b14245 Mon Sep 17 00:00:00 2001 From: Ash Monty Date: Wed, 8 Dec 2021 18:41:29 +0100 Subject: [PATCH] feat(docs): add base documentation page layout --- locales/US_en.json | 1 + public/assets/css/documentation.css | 162 +++++++++++++++++ public/assets/css/highlightjs.css | 228 ++++++++++++++---------- public/assets/css/main.css | 1 + public/assets/images/arrow-right.svg | 1 + src/routers/docs.js | 92 ++++++++++ src/server.js | 2 + views/docs.handlebars | 136 ++++++++++++++ views/layouts/blog-opengraph.handlebars | 2 +- views/partials/docs-sidebar.handlebars | 40 +++++ views/partials/header.handlebars | 1 + 11 files changed, 574 insertions(+), 92 deletions(-) create mode 100644 public/assets/css/documentation.css create mode 100644 public/assets/images/arrow-right.svg create mode 100644 src/routers/docs.js create mode 100644 views/docs.handlebars create mode 100644 views/partials/docs-sidebar.handlebars diff --git a/locales/US_en.json b/locales/US_en.json index 3b5df33..8a3583b 100644 --- a/locales/US_en.json +++ b/locales/US_en.json @@ -2,6 +2,7 @@ "nav": { "about": "About", "faq": "FAQ", + "docs": "Docs", "credits": "Credits", "progress": "Progress", "blog": "Blog" diff --git a/public/assets/css/documentation.css b/public/assets/css/documentation.css new file mode 100644 index 0000000..b4d56d4 --- /dev/null +++ b/public/assets/css/documentation.css @@ -0,0 +1,162 @@ +html, body { + background: #131730; +} +a.logo-link { + margin:auto; + margin-left: 36px; + height: 40px; +} +header { + width: calc(100% - 72px); + background: #131730; + padding: 12px 36px; + margin: 0; +} +header a.logo-link { + display: none; +} +header nav a:first-child { + margin-left: -24px; +} + +.docs-wrapper { + display: grid; + grid-template-columns: repeat(2, fit-content(100%)); + grid-template-rows: repeat(2, fit-content(100%)); + min-height: 100%; +} + +.docs-wrapper .sidebar { + display: flex; + flex-flow: column; + align-items: center; + width: clamp(270px, 30vw, 500px); + background: #161931; + max-height: calc(100vh - 69px); + overflow-y: scroll; +} +.docs-wrapper .sidebar .section { + display: flex; + flex-flow: column; + width: 200px; + margin-left: 30px; + margin-bottom: 72px; +} +.docs-wrapper .sidebar .section:first-child { + margin-top: 72px; +} +.docs-wrapper .sidebar .section h5 { + margin: 0; + font-weight: normal; + text-transform: uppercase; + color: var(--text-secondary-2); + margin-bottom: 12px; +} +.docs-wrapper .sidebar .section a { + position: relative; + text-decoration: none; + color: var(--text-secondary); + width: fit-content; + margin-bottom: 12px; +} +.docs-wrapper .sidebar .section a.active, +.docs-wrapper .sidebar .section a:hover { + color: var(--text); +} +.docs-wrapper .sidebar .section a.active::before { + /* This filter thing is jank, if anyone knows a better way to do this please fix */ + filter: invert(51%) sepia(12%) saturate(2930%) hue-rotate(218deg) + brightness(99%) contrast(92%); + position: absolute; + left: -30px; + content: url(../images/arrow-right.svg); +} + +.docs-wrapper .content { + width: calc(100vw - clamp(270px, 30vw, 500px) - (72px * 2)); + background: var(--background); + padding: 72px; + max-height: calc(100vh - 69px - (72px * 2)); + overflow-y: scroll; +} +.docs-wrapper .content-inner { + max-width: 900px; +} +.docs-wrapper .content p { + color: var(--text-secondary); +} +.docs-wrapper .content h1:first-child { + margin-top: 0; +} +.docs-wrapper .content .quick-links-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 24px; + margin-bottom: 60px; +} +.docs-wrapper .quick-links-grid a { + text-decoration: none; + background: #252a51; + border-radius: 6px; + color: var(--text-secondary); + display: flex; + align-items: center; + padding: 20px; +} +.docs-wrapper .quick-links-grid svg:first-child { + height: 36px; + margin-right: 24px; + margin-left: 4px; + color: var(--theme-light); +} +.docs-wrapper .quick-links-grid p.header { + font-size: 22px; + font-weight: 600; + color: var(--text); + margin: 0; +} +.docs-wrapper .quick-links-grid p { + margin: 0; +} +.docs-wrapper .quick-links-grid svg:last-child { + height: 36px; + margin-left: auto; +} + +/* Scrollbar styling 'cause it's fancy */ +.docs-wrapper .sidebar::-webkit-scrollbar, +.docs-wrapper .content::-webkit-scrollbar, +.docs-wrapper .content pre code::-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 { + background: none; +} +.docs-wrapper .sidebar::-webkit-scrollbar-thumb, +.docs-wrapper .content::-webkit-scrollbar-thumb, +.docs-wrapper .content pre code::-webkit-scrollbar-thumb { + background-color: var(--text-secondary-2); + border-radius: 24px; + border: 3px solid #161931; +} +.docs-wrapper .content::-webkit-scrollbar-thumb { + border: 3px solid var(--background); +} +.docs-wrapper .content pre code::-webkit-scrollbar-thumb { + border: 3px solid #0D0F20; +} +.docs-wrapper .sidebar { + scrollbar-width: thin; + scrollbar-color: var(--text-secondary-2) #161931; +} +.docs-wrapper .content { + scrollbar-width: thin; + scrollbar-color: var(--text-secondary-2) var(--background); +} +.docs-wrapper .content pre codear { + scrollbar-width: thin; + scrollbar-color: var(--text-secondary-2) #0D0F20; +} diff --git a/public/assets/css/highlightjs.css b/public/assets/css/highlightjs.css index d0def53..d52a4c9 100644 --- a/public/assets/css/highlightjs.css +++ b/public/assets/css/highlightjs.css @@ -1,91 +1,137 @@ -/** - * Adapted from Shades of Purple Theme — for Highlightjs. - * - * @author (c) Ahmad Awais - * @link GitHub Repo → https://github.com/ahmadawais/Shades-of-Purple-HighlightJS - * @version 1.5.0 - */ - - .hljs { - background: var(--btn-secondary); - color: #e3dfff; - font-weight: normal; - } - - .hljs-subst { - color: #e3dfff; - } - - .hljs-title { - color: #fad000; - font-weight: normal; - } - - .hljs-name { - color: #a1feff; - } - - .hljs-tag { - color: #ffffff; - } - - .hljs-attr { - color: #f8d000; - font-style: italic; - } - - .hljs-built_in, - .hljs-selector-tag, - .hljs-section { - color: #fb9e00; - } - - .hljs-keyword { - color: #fb9e00; - } - - .hljs-string, - .hljs-attribute, - .hljs-symbol, - .hljs-bullet, - .hljs-addition, - .hljs-code, - .hljs-regexp, - .hljs-selector-class, - .hljs-selector-attr, - .hljs-selector-pseudo, - .hljs-template-tag, - .hljs-quote, - .hljs-deletion { - color: #4cd213; - } - - .hljs-meta, - .hljs-meta .hljs-string { - color: #fb9e00; - } - - .hljs-comment { - color: #ac65ff; - } - - .hljs-keyword, - .hljs-selector-tag, - .hljs-literal, - .hljs-name, - .hljs-strong { - font-weight: normal; - } - - .hljs-literal, - .hljs-number { - color: #fa658d; - } - - .hljs-emphasis { - font-style: italic; - } - - .hljs-strong { - font-weight: bold; - } \ No newline at end of file +pre code.hljs { + display: block; + overflow-x: auto; + padding: 12px 36px; + border-radius: 10px; + font-family: Poppins, Arial, Helvetica, sans-serif; +} +code.hljs { + padding: 3px 5px; +} +.hljs { + background: #0D0F20; + color: #d6deeb; +} +.hljs-keyword { + color: #c792ea; + font-style: italic; +} +.hljs-built_in { + color: #addb67; + font-style: italic; +} +.hljs-type { + color: #82aaff; +} +.hljs-literal { + color: #ff5874; +} +.hljs-number { + color: #f78c6c; +} +.hljs-regexp { + color: #5ca7e4; +} +.hljs-string { + color: #ecc48d; +} +.hljs-subst { + color: #d3423e; +} +.hljs-symbol { + color: #82aaff; +} +.hljs-class { + color: #ffcb8b; +} +.hljs-function { + color: #82aaff; +} +.hljs-title { + color: #dcdcaa; + font-style: italic; +} +.hljs-params { + color: #7fdbca; +} +.hljs-comment { + color: #637777; + font-style: italic; +} +.hljs-doctag { + color: #7fdbca; +} +.hljs-meta, +.hljs-meta .hljs-keyword { + color: #82aaff; +} +.hljs-meta .hljs-string { + color: #ecc48d; +} +.hljs-section { + color: #82b1ff; +} +.hljs-attr, +.hljs-name, +.hljs-tag { + color: #7fdbca; +} +.hljs-attribute { + color: #80cbc4; +} +.hljs-variable { + color: #addb67; +} +.hljs-bullet { + color: #d9f5dd; +} +.hljs-code { + color: #80cbc4; +} +.hljs-emphasis { + color: #c792ea; + font-style: italic; +} +.hljs-strong { + color: #addb67; + font-weight: 700; +} +.hljs-formula { + color: #c792ea; +} +.hljs-link { + color: #ff869a; +} +.hljs-quote { + color: #697098; + font-style: italic; +} +.hljs-selector-tag { + color: #ff6363; +} +.hljs-selector-id { + color: #fad430; +} +.hljs-selector-class { + color: #addb67; + font-style: italic; +} +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #c792ea; + font-style: italic; +} +.hljs-template-tag { + color: #c792ea; +} +.hljs-template-variable { + color: #addb67; +} +.hljs-addition { + color: #addb67ff; + font-style: italic; +} +.hljs-deletion { + color: #ef535090; + font-style: italic; +} diff --git a/public/assets/css/main.css b/public/assets/css/main.css index 2c99878..5212890 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -89,6 +89,7 @@ header nav a { .locale-dropdown { margin-left: auto; z-index: 2; + height: 45px; } /* Misc */ diff --git a/public/assets/images/arrow-right.svg b/public/assets/images/arrow-right.svg new file mode 100644 index 0000000..939b57c --- /dev/null +++ b/public/assets/images/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/routers/docs.js b/src/routers/docs.js new file mode 100644 index 0000000..4e4999f --- /dev/null +++ b/src/routers/docs.js @@ -0,0 +1,92 @@ +const { Router } = require('express'); +const util = require('../util'); +const logger = require('../logger'); +const router = new Router(); + +const fs = require('fs'); +const path = require('path'); +const marked = require('marked'); +const matter = require('gray-matter'); +/* +const postList = () => { + const files = fs.readdirSync('blogposts'); + + // We get the info for each blogpost, ignoring the ones starting with _ + const posts = files + .filter(filename => !filename.startsWith('_')) + .filter(filename => filename.endsWith('.md')) // Ignores other files/folders + .map((filename) => { + const slug = filename.replace('.md', ''); + const rawPost = fs.readFileSync( + path.join('blogposts', `${filename}`), + 'utf-8' + ); + const { data: postInfo } = matter(rawPost); + return { + slug, + postInfo, + }; + }); + + posts.sort((a, b) => { + return new Date(b.postInfo.date) - new Date(a.postInfo.date); + }); + + return posts; +}; +*/ +router.get('/', async (request, response) => { + + const reqLocale = request.locale; + const locale = util.getLocale(reqLocale.region, reqLocale.language); + + const localeString = reqLocale.toString(); + + response.render('docs', { + layout: 'main', + locale, + localeString, + }); +}); +/* +router.get('/:slug', async (request, response, next) => { + + const reqLocale = request.locale; + const locale = util.getLocale(reqLocale.region, reqLocale.language); + + const localeString = reqLocale.toString(); + + // Get the name of the post from the URL + const postName = request.params.slug; + + // Get the markdown file corresponding to the post + let rawPost; + try { + rawPost = fs.readFileSync(path.join('blogposts', `${postName}.md`), 'utf-8'); + } catch(err) { + logger.error(err); + next(); + return; + } + // Convert the post info into JSON and separate it and the content + // eslint-disable-next-line prefer-const + let { data: postInfo, content } = matter(rawPost); + + // Replace [yt-iframe](videoID) with the full '); + + // Convert the content into HTML + const htmlPost = marked(content); + + response.render('blog/blogpost', { + layout: 'blog-opengraph', + locale, + localeString, + postInfo, + htmlPost, + }); +}); +*/ +module.exports = router; diff --git a/src/server.js b/src/server.js index a45414b..3e0ed4a 100644 --- a/src/server.js +++ b/src/server.js @@ -23,6 +23,7 @@ logger.info('Importing page routers'); const routers = { home: require('./routers/home'), faq: require('./routers/faq'), + docs: require('./routers/docs'), progress: require('./routers/progress'), account: require('./routers/account'), blog: require('./routers/blog'), @@ -72,6 +73,7 @@ app.use(expressLocale({ app.use('/', routers.home); app.use('/faq', routers.faq); +app.use('/docs', routers.docs); app.use('/progress', routers.progress); app.use('/account', routers.account); app.use('/localization', routers.localization); diff --git a/views/docs.handlebars b/views/docs.handlebars new file mode 100644 index 0000000..f0e298a --- /dev/null +++ b/views/docs.handlebars @@ -0,0 +1,136 @@ + + +
+ + + + + + + Pretendo + + + + + + {{> header}} + + {{> docs-sidebar}} + +
+
+

Quick links

+
+ + + +
+

Can't find something?

+

Troubleshoot errors

+
+ + + + + +
+

Nintendo be like

+

Here's your DMCA and C&D

+
+ + +
+ +

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.

+ 
+                
+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())
+                 
+
+
+
+
+ + + + + diff --git a/views/layouts/blog-opengraph.handlebars b/views/layouts/blog-opengraph.handlebars index 520af6c..4bc6cc0 100644 --- a/views/layouts/blog-opengraph.handlebars +++ b/views/layouts/blog-opengraph.handlebars @@ -51,7 +51,7 @@ - + diff --git a/views/partials/docs-sidebar.handlebars b/views/partials/docs-sidebar.handlebars new file mode 100644 index 0000000..55cfb9c --- /dev/null +++ b/views/partials/docs-sidebar.handlebars @@ -0,0 +1,40 @@ +
+
+
Getting started
+ Welcome + Installing Juxt + Troubleshoot errors +
+ +
+
Error codes - 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 +
+ +
+
Error codes - Beans
+ Black Beans + Black-Eyed Peas + Cannellini Beans + Chickpeas (Garbanzo Beans) + Great Northern Beans + Kidney Beans + Lima Beans + Pinto Beans + Fava Beans + Navy Beans +
+
\ No newline at end of file diff --git a/views/partials/header.handlebars b/views/partials/header.handlebars index 7b3b5ea..37a9b50 100644 --- a/views/partials/header.handlebars +++ b/views/partials/header.handlebars @@ -28,6 +28,7 @@ {{ locale.nav.about }} {{ locale.nav.faq }} {{ locale.nav.credits }} + {{ locale.nav.docs }} {{ locale.nav.progress }} {{ locale.nav.blog }}