diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css index 57f6b2e..c4826a8 100644 --- a/docs/assets/css/style.css +++ b/docs/assets/css/style.css @@ -1,107 +1,6 @@ +@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Source+Sans+Pro:wght@400;700&display=swap"); -h1, -.headline-1, -.heading-1 { - font-size: 6rem; - font-weight: 300; - letter-spacing: -0.015625em; - line-height: 6rem; -} - -h2, -.headline-2, -.heading-2 { - font-size: 3.75rem; - font-weight: 300; - letter-spacing: -0.0083333333em; - line-height: 3.75rem; -} - -h3, -.headline-3, -.heading-3 { - font-size: 3rem; - font-weight: 400; - letter-spacing: normal; - line-height: 3.125rem; -} - -h4, -.headline-4, -.heading-4 { - font-size: 2.125rem; - font-weight: 400; - letter-spacing: 0.0073529412em; - line-height: 2.5rem; -} - -h5, -.headline-5, -.heading-5 { - font-size: 1.5rem; - font-weight: 400; - letter-spacing: normal; - line-height: 2rem; -} - -h6, -.headline-6, -.heading-6 { - font-size: 1.25rem; - font-weight: 500; - letter-spacing: 0.125em; - line-height: 2rem; -} - -.subtitle-1 { - font-size: 1rem; - font-weight: 400; - letter-spacing: 0.009375em; - line-height: 1.75rem; -} - -.subtitle-2 { - font-size: 0.875rem; - font-weight: 500; - letter-spacing: 0.0071428571em; - line-height: 1.375rem; -} - -.body-1 { - font-size: 1rem; - font-weight: 400; - letter-spacing: 0.03125em; - line-height: 1.5rem; -} - -.body-2 { - font-size: 0.875rem; - font-weight: 400; - letter-spacing: 0.0178571429em; - line-height: 1.25rem; -} - -.button { - font-size: 0.875rem; - font-weight: 500; - letter-spacing: 0.0892857143em; - line-height: 2.25rem; -} - -.caption { - font-size: 0.75rem; - font-weight: 400; - letter-spacing: 0.0333333333em; - line-height: 1.25rem; -} - -.overline { - font-size: 0.75rem; - font-weight: 500; - letter-spacing: 0.1666666667em; - line-height: 2rem; -} - +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); aki-button, *[aki-button], *.aki-button { @@ -124,7 +23,7 @@ aki-button:hover:not(:active), aki-button:active, *[aki-button]:active, *.aki-button:active { - background: #121212; + background: #080808; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); color: #fff; } @@ -132,7 +31,7 @@ aki-button:active, aki-card, *.aki-card, *[aki-card] { - background: #121212; + background: #080808; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); border-radius: 0.125rem; color: #fff; @@ -177,7 +76,7 @@ aki-toolbar, *[aki-toolbar], *.aki-toolbar { align-items: center; - background-color: #121212; + background-color: #080808; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); color: #fff; display: flex; @@ -186,9 +85,8 @@ aki-toolbar, justify-content: flex-start; max-height: 5.5rem; min-width: 20rem; - text-transform: uppercase; width: 100%; - z-index: 1; + z-index: 2; } aki-toolbar a, *[aki-toolbar] a, @@ -205,7 +103,7 @@ aki-toolbar nav, aki-toolbar nav a, *[aki-toolbar] nav a, *.aki-toolbar nav a { - border-bottom: 0.25rem solid #121212; + border-bottom: 0.25rem solid #080808; cursor: pointer; padding: 1rem; letter-spacing: 0.0178571429em; @@ -223,31 +121,63 @@ aki-toolbar nav a[active], border-bottom: 0.25rem solid #ffc107; } -.text1 { - font-family: "Open Sans", sans-serif; - font-weight: 400; -} - -.text2 { - font-family: "Source Sans Pro", sans-serif; - font-weight: 700; -} - html { - font-family: "Source Sans Pro", sans-serif; - font-size: 16px; + font-size: 100%; } body { display: flex; flex-direction: column; + font-family: "Roboto", sans-serif; + font-weight: 400; height: 100vh; + line-height: 1.75; margin: 0; padding: 0; - position: absolute; width: 100vw; } +p { + margin-bottom: 1rem; +} + +h1, +h2, +h3, +h4, +h5 { + margin: 3rem 0 1.38rem; + font-family: "Roboto", sans-serif; + font-weight: 400; + line-height: 1.3; +} + +h1 { + margin-top: 0; + font-size: 3.052rem; +} + +h2 { + font-size: 2.441rem; +} + +h3 { + font-size: 1.953rem; +} + +h4 { + font-size: 1.563rem; +} + +h5 { + font-size: 1.25rem; +} + +small, +.text_small { + font-size: 0.8rem; +} + header .left, header .center, header .right { @@ -264,17 +194,10 @@ header .left .logo { } header .left .title { font-size: 1.75rem; + font-weight: 700; letter-spacing: 0.03125em; margin-left: 1rem; } -header .left .title span:last-child { - margin-left: 0.5rem; -} -@media (max-width: 64em) { - header .left .title span:first-child { - display: none; - } -} @media (max-width: 48em) { header .left .title { margin-left: 0; @@ -283,108 +206,113 @@ header .left .title span:last-child { header .right { flex: 1 1 auto; justify-content: flex-end; + text-transform: uppercase; + /* + @media (max-width: 64em) { + &.dropdown { + align-items: center; + cursor: pointer; + display: flex; + justify-content: center; + min-width: 4rem; + + float: left; + overflow: hidden; + + &:hover .dropdown-content { + // display: block; + background: $primary; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + display: flex; + flex-direction: column; + padding: 1rem; + right: 0; + top: 5.5rem; + } + + .dropdown-button { + display: initial; + } + + .dropdown-content { + display: none; + position: absolute; + z-index: 1; + } + } + } + */ } header .right .dropdown-button { display: none; } -@media (max-width: 64em) { - header .right.dropdown { - align-items: center; - cursor: pointer; - display: flex; - justify-content: center; - min-width: 4rem; - float: left; - overflow: hidden; - } - header .right.dropdown:hover .dropdown-content { - background: #121212; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); - display: flex; - flex-direction: column; - padding: 1rem; - right: 0; - top: 5.5rem; - } - header .right.dropdown .dropdown-button { - display: initial; - } - header .right.dropdown .dropdown-content { - display: none; - position: absolute; - z-index: 1; - } -} main { display: flex; flex-direction: row; height: 100%; - position: relative; overflow: auto; width: 100%; } main aside { - background-color: #121212; - box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12); + background: #080808; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); color: #fff; + max-width: 20rem; overflow-y: auto; - width: 20rem; + width: 100%; z-index: 1; } -main aside .subheader, -main aside ul { - padding: 1rem; +main aside nav { + margin: 1rem 0; } -main aside .subheader { - font-family: "Source Sans Pro"; - font-size: 1rem; - font-weight: 700; +main aside nav a, +main aside nav div { + display: block; + padding: 0.25rem 0.5rem 0.25rem 1rem; + width: calc(100% - 1.5rem); } -main aside ul { - font-family: "Open Sans"; - font-size: 0.875rem; - font-weight: 400; +main aside nav ul { list-style: none; margin: 0; + padding-left: 1rem; } -main aside ul li { - cursor: pointer; - padding: 0.25rem 0; -} -main aside ul li a { +main aside nav a { color: #fff; - text-decoration: none; } -main aside ul li a:hover { +main aside nav a:hover { filter: invert(0.15); } -main aside ul li a[active] { +main aside nav a.active { color: #ffc107; } -main #router-outlet { - background: #282828; +main aside nav .node.hide ul { + max-height: 0 !important; +} +main aside nav .node.hide div::after { + transform: rotate(-90deg); +} +main aside nav .node div { + cursor: pointer; + display: flex; +} +main aside nav .node div::after { + content: "🔽"; + margin-right: 1rem; + text-align: right; +} +main aside nav .node ul { + overflow: hidden; +} +main article { + background: #1f1f1f; color: #fff; - height: calc(100% - 2rem); - position: relative; overflow: auto; - padding: 1rem 2rem; - width: calc(100% - 4rem); + padding: 1rem 27.1% 1rem 10.4%; + width: 62.5%; } - -footer { - bottom: 0; - color: rgba(255, 255, 255, 0.25); - font-size: 0.625rem; - left: 0; - padding: 0.5rem 1.5rem; - position: absolute; - width: calc(100% - 1.5rem * 2); -} -@media (max-width: 48em) { - footer { - display: none; - } +main article img { + max-width: 100%; } a { @@ -392,168 +320,146 @@ a { text-decoration: none; } +.doc-typography { + /* + p, + pre ul, + li, + blockquote, + span, + code { + font-size: .875rem; + font-weight: 400; + letter-spacing: .03125em; + line-height: 1.5rem; + } + + pre, + code { + background: $code !important; + } + + blockquote, + code, + .doc-alert, + .doc-info, + .doc-warning, + .doc-note { + border-radius: $border-radius; + } + + blockquote, + code, + pre, + .doc-alert, + .doc-info, + .doc-warning, + .doc-note { + padding: $padding; + } + + blockquote, + code, + pre, + li, + .doc-alert, + .doc-info, + .doc-warning, + .doc-note { + margin: $margin; + } + + + blockquote { + background: $blockquote; + color: $on-blockquote; + } + + // for url/links + // span, + a { + color: $accent; + cursor: pointer; + text-decoration: none; + + &:hover { + filter: invert(.15); + } + } + + img { + max-width: 100%; + } + + .doc-alert, + .doc-info, + .doc-warning, + .doc-note { + box-shadow: $elevation-z2; + } + + .doc-alert { + background: $alert; + color: $on-alert; + + &::before { + content: "Alert"; + display: block; + font-weight: 700; + margin: 0 0 .25rem 0; + } + } + + .doc-info { + background: $info; + color: $on-info; + + &::before { + content: "Info"; + display: block; + font-weight: 700; + margin: 0 0 .25rem 0; + } + } + + .doc-warning { + background: $warning; + color: $on-warning; + + &::before { + content: "Warning"; + display: block; + font-weight: 700; + margin: 0 0 .25rem 0; + } + + } + + .doc-note { + background: $note; + color: $on-note; + + &::before { + content: "Note"; + display: block; + font-weight: 700; + margin: 0 0 .25rem 0; + } + + } + */ +} .doc-typography table { text-align: left; } -.doc-typography h1, -.doc-typography h2, -.doc-typography h3, -.doc-typography h4, -.doc-typography h5, -.doc-typography h6 { - margin: 0; -} -.doc-typography h1 { - font-family: "Source Sans Pro"; - font-size: 3rem; - font-weight: 700; - letter-spacing: -0.015625em; - line-height: 6rem; -} -.doc-typography h2 { - font-family: "Source Sans Pro"; - font-size: 2.25rem; - font-weight: 700; - letter-spacing: -0.0083333333em; - line-height: 3.75rem; -} -.doc-typography h3 { - font-family: "Source Sans Pro"; - font-size: 1.75rem; - font-weight: 700; - letter-spacing: normal; - line-height: 3.125rem; -} -.doc-typography h4 { - font-family: "Source Sans Pro"; - font-size: 1.75rem; - font-weight: 500; - letter-spacing: 0.0073529412em; - line-height: 2.5rem; -} -.doc-typography h5 { - font-family: "Source Sans Pro"; - font-size: 1.5rem; - font-weight: 500; - letter-spacing: normal; - line-height: 2rem; -} -.doc-typography h6 { - font-family: "Source Sans Pro"; - font-size: 1.25rem; - font-weight: 500; - letter-spacing: normal; - line-height: 2rem; -} -.doc-typography p, -.doc-typography pre ul, -.doc-typography li, -.doc-typography blockquote, -.doc-typography span, -.doc-typography code { - font-size: 0.875rem; - font-weight: 400; - letter-spacing: 0.03125em; - line-height: 1.5rem; -} -.doc-typography p, -.doc-typography ul, -.doc-typography li, -.doc-typography blockquote, -.doc-typography span { - font-family: "Open Sans"; -} -.doc-typography pre, -.doc-typography code { - background: #101010 !important; -} -.doc-typography blockquote, -.doc-typography code, -.doc-typography .doc-alert, -.doc-typography .doc-info, -.doc-typography .doc-warning, -.doc-typography .doc-note { - border-radius: 0.125rem; -} -.doc-typography blockquote, -.doc-typography code, -.doc-typography pre, -.doc-typography .doc-alert, -.doc-typography .doc-info, -.doc-typography .doc-warning, -.doc-typography .doc-note { - padding: 0.25rem 0.5rem; -} -.doc-typography blockquote, -.doc-typography code, -.doc-typography pre, -.doc-typography li, -.doc-typography .doc-alert, -.doc-typography .doc-info, -.doc-typography .doc-warning, -.doc-typography .doc-note { - margin: 0 0 0.5rem; -} .doc-typography blockquote { - background: #181818; - color: #ccc; + background: rgba(255, 255, 255, 0.125); + border-radius: 4px; + margin: 0; + padding: 0.5rem 0.7rem; } -.doc-typography a { - color: #ffc107; - cursor: pointer; - text-decoration: none; -} -.doc-typography a:hover { - filter: invert(0.15); -} -.doc-typography img { - max-width: 100%; -} -.doc-typography .doc-alert, -.doc-typography .doc-info, -.doc-typography .doc-warning, -.doc-typography .doc-note { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -} -.doc-typography .doc-alert { - background: #AF1010; - color: #fff; -} -.doc-typography .doc-alert::before { - content: "Alert"; - display: block; - font-weight: 700; - margin: 0 0 0.25rem 0; -} -.doc-typography .doc-info { - background: #0D47A1; - color: #fff; -} -.doc-typography .doc-info::before { - content: "Info"; - display: block; - font-weight: 700; - margin: 0 0 0.25rem 0; -} -.doc-typography .doc-warning { - background: #ffc107; - color: #000; -} -.doc-typography .doc-warning::before { - content: "Warning"; - display: block; - font-weight: 700; - margin: 0 0 0.25rem 0; -} -.doc-typography .doc-note { - background: #999; - color: #080808; -} -.doc-typography .doc-note::before { - content: "Note"; - display: block; - font-weight: 700; - margin: 0 0 0.25rem 0; +.doc-typography blockquote p { + margin: 0; } /*# sourceMappingURL=style.css.map */ diff --git a/docs/assets/css/style.css.map b/docs/assets/css/style.css.map index 5f93e49..02d829b 100644 --- a/docs/assets/css/style.css.map +++ b/docs/assets/css/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/utils/theme.scss","../scss/utils/typography.scss","../scss/components/aki-button.scss","../scss/utils/elevation.scss","../scss/components/aki-card.scss","../scss/components/aki-divider.scss","../scss/components/aki-toolbar.scss","../scss/style.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/utils/theme.scss","../scss/style.scss","../scss/components/aki-button.scss","../scss/utils/elevation.scss","../scss/components/aki-card.scss","../scss/components/aki-divider.scss","../scss/components/aki-toolbar.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/docs/assets/data/routes.json b/docs/assets/data/routes.json new file mode 100644 index 0000000..3feaa17 --- /dev/null +++ b/docs/assets/data/routes.json @@ -0,0 +1,104 @@ +{ + "routes": [ + { + "name": "Demo", + "hidden": false, + "filepath": "demo.md" + }, + { + "name": "GETTING STARTED", + "routes": [ + { + "name": "About", + "filepath": "getting_started/about.md" + }, + { + "name": "Setup", + "filepath": "getting_started/setup.md" + }, + { + "name": "F.A.Q.", + "filepath": "getting_started/faq.md" + } + ] + }, + { + "name": "TUTORIALS", + "type": "section", + "routes": [ + { + "name": "Tutorial: Getting OP", + "routes": [ + { + "name": "Introduction", + "filepath": "tutorials/tut_0/tut0_0.md" + }, + { + "name": "Getting started", + "filepath": "tutorials/tut_0/tut0_1.md" + }, + { + "name": "1. Edit character level", + "filepath": "tutorials/tut_0/tut0_2.md" + }, + { + "name": "2. Edit skill level", + "filepath": "tutorials/tut_0/tut0_3.md" + }, + { + "name": "3. Edit quest status", + "filepath": "tutorials/tut_0/tut0_4.md" + }, + { + "name": "4. Edit hideout area status", + "filepath": "tutorials/tut_0/tut0_5.md" + }, + { + "name": "5. Add money to stash", + "filepath": "tutorials/tut_0/tut0_6.md" + } + ] + }, + { + "name": "Tutorial: Being a god with style", + "filepath": "tutorials/tut_1.md" + }, + { + "name": "Tutorial: Creating a new weapon", + "routes": [ + { + "name": "0. Introduction", + "filepath": "tutorials/tut_2/cw_0.md" + }, + { + "name": "1. Creating a new weapon", + "filepath": "tutorials/tut_2/cw_1.md" + }, + { + "name": "2. Adding it the to flea market", + "filepath": "tutorials/tut_2/cw_2.md" + }, + { + "name": "3. Adding it to a trader", + "filepath": "tutorials/tut_2/cw_3.md" + }, + { + "name": "4. Editing a weapon's texture", + "filepath": "tutorials/tut_2/cw_4.md" + } + ] + } + ] + }, + { + "name": "API REFERENCE", + "hidden": false, + "filepath": "api_ref/api.md" + }, + { + "name": "API REFERENCE LIST", + "hidden": true, + "routes": [] + } + ] +} \ No newline at end of file diff --git a/docs/assets/img/tutorials/tut_0/001.png b/docs/assets/img/tutorials/tut_0/001.png new file mode 100644 index 0000000..c5f1ca4 Binary files /dev/null and b/docs/assets/img/tutorials/tut_0/001.png differ diff --git a/docs/assets/img/tutorials/tut_0/002.png b/docs/assets/img/tutorials/tut_0/002.png new file mode 100644 index 0000000..26a985b Binary files /dev/null and b/docs/assets/img/tutorials/tut_0/002.png differ diff --git a/docs/assets/img/tutorials/tut_0/003.png b/docs/assets/img/tutorials/tut_0/003.png new file mode 100644 index 0000000..d913767 Binary files /dev/null and b/docs/assets/img/tutorials/tut_0/003.png differ diff --git a/docs/assets/img/tutorials/tut_0/004.png b/docs/assets/img/tutorials/tut_0/004.png new file mode 100644 index 0000000..0709cc3 Binary files /dev/null and b/docs/assets/img/tutorials/tut_0/004.png differ diff --git a/docs/assets/img/tutorials/tut_0/005.png b/docs/assets/img/tutorials/tut_0/005.png new file mode 100644 index 0000000..92fd963 Binary files /dev/null and b/docs/assets/img/tutorials/tut_0/005.png differ diff --git a/docs/assets/img/tutorials/tut_0/006.png b/docs/assets/img/tutorials/tut_0/006.png new file mode 100644 index 0000000..8124503 Binary files /dev/null and b/docs/assets/img/tutorials/tut_0/006.png differ diff --git a/docs/assets/js/docs.js b/docs/assets/js/docs.js new file mode 100644 index 0000000..a311abe --- /dev/null +++ b/docs/assets/js/docs.js @@ -0,0 +1,341 @@ +/** + * TODO: override the marker.js renderer for urls + * to enable proper anchor support. + * + * Probably just need to check if the text starts + * with a # or not to cover most cases. + */ + +class Docs { + /** + * @param {string} defaultView + * @param {string} routesPath + */ + constructor(defaultViewPath, fetchPath = 'content', routesPath = './assets/data/routes.json') { + /** @type {string} */ + this.defaultViewPath = defaultViewPath; + + /** @type {string} */ + this.fetchPath = fetchPath; + + /** @type {string} */ + this.routesPath = routesPath; + + /** @type {Array.} */ + this.routesData = []; + + /** @type {Array.<(Route, RoutingNode)} */ + this.routes = []; + + /** @type {Route} */ + this.currentRoute = undefined; + + this.onExec(); + } + + async onExec() { + // Get routes. + this.routesData = await this.fetchRoutes(); + + // Generate nav based on routes. + this.generateNav(this.routesData, document.querySelector('aside')); + + // Add listener for hash change. + window.addEventListener('hashchange', () => this.handleLocation(window.location)); + + + if (window.location.hash) { + this.handleLocation(window.location); + } else if (typeof this.defaultViewPath !== 'undefined') { + // TODO: Do it. + console.log("Missing Feature !\nShould load the default view"); + } + } + + /** + * @returns {Array.} The array containing the routes. + */ + async fetchRoutes() { + const response = await fetch(this.routesPath); + const json = await response.json(); + + return json["routes"]; + } + + /** + * @param {Array.} routes + * @param {HTMLElement} target + */ + generateNav(routesData, target) { + /** @type {Array.} */ + const routes = []; + const nav = document.createElement("nav"); + + routesData.forEach(routeData => { + if ("routes" in routeData) { + routes.push(new RoutingNode(routeData["name"], routeData["hidden"], routeData["routes"])); + } else { + routes.push(new Route(routeData["name"], routeData["hidden"], routeData["filepath"])); + } + }); + + routes.forEach(routingItem => { + if (!routingItem.hasOwnProperty("hidden") || !routingItem["hidden"]) { + nav.appendChild(routingItem.buildSelf()); + } + }); + + target.appendChild(nav); + + this.routes = routes; + } + + /** + * @param {Location} location + */ + handleLocation(location) { + let hashes = location.hash.split('#'); + + hashes.splice(0, 1); + + console.log(hashes); + + if (typeof this.currentRoute === "undefined" || this.currentRoute.filepath !== hashes[0]) { + const route = this.findMatchingRoute(hashes[0], this.routes); + + this.currentRoute = route; + this.displayRoute(route); + + const activeLinks = document.querySelectorAll('a.active'); + const newActiveLinks = document.querySelectorAll(`a[href='#${hashes[0]}']`); + + if (activeLinks.length > 0) { + activeLinks.forEach(link => link.classList.remove('active')); + } + + newActiveLinks.forEach(newLink => newLink.classList.add('active')); + + // TODO: update active route in the page's navbar + + if (hashes.length > 1) { + this.handleLocation(window.location); + } + } else { + const el = document.querySelector(`#${hashes[1]}`); + + el.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + } + + /** + * @param {string} filepath The filepath to search. + * @returns {Route} The matching route. + */ + findMatchingRoute(filepath, routes) { + console.log("filepath:", filepath); + + let match = undefined; + + for (let routingItem of routes) { + // If the routingItem is a route and have what we are looking for. + if (routingItem.hasOwnProperty('filepath') && routingItem['filepath'] === filepath) { + match = routingItem; + break; + } + + // Recursive search to go deeper. + for (let v of Object.keys(routingItem)) { + if (typeof routingItem[v] === 'object' && v === 'routes') { + const o = this.findMatchingRoute(filepath, routingItem[v]); + + if (o != null) { + match = o; + break; + } + } + } + } + + return match; + } + + /** + * @param {Route} route The route to load. + */ + async displayRoute(route) { + const content = await route.loadSelf(this.fetchPath); + const contentOutlet = document.querySelector('#router-outlet'); + + this.removeChildren(contentOutlet); + contentOutlet.innerHTML = marked(content); + Prism.highlightAll(); // edited + } + + removeChildren(element) { + let count = element.childNodes.length; + + while (count--) { + element.removeChild(element.lastChild); + } + } +} + +class RoutingItem { + /** + * @param {string} name + * @param {boolean} hidden + */ + constructor(name, hidden) { + this.name = name; + this.hidden = hidden; + } + + buildSelf() { + const element = document.createElement("div"); + element.innerText = this.name; + return element; + } +} + +class Route extends RoutingItem { + /** + * @param {string} name + * @param {boolean} hidden + * @param {string} filepath + */ + constructor(name, hidden, filepath) { + super(name, hidden); + + /** @type {string} */ + this.filepath = filepath; + } + + /** + * @returns {HTMLAnchorElement} The Route as an HTML link. + */ + buildSelf() { + const element = document.createElement("a"); + element.href = `#${this.filepath}`; + element.innerText = this.name; + + return element; + } + + /** + * @returns {string} The document content to load as a string. + */ + async loadSelf(prefix, suffix) { + if (typeof prefix === 'undefined') { + prefix = ''; + } else { + prefix += '/'; + } + + if (typeof suffix === 'undefined') { + suffix = ''; + } else { + suffix += '/'; + } + + const response = await fetch(`${prefix}${this.filepath}${suffix}`); + const text = await response.text(); + + return text; + } +} + +class RoutingNode extends RoutingItem { + /** + * @param {string} name + * @param {boolean} hidden + * @param {Array.} routesData + */ + constructor(name, hidden, routesData) { + super(name, hidden); + + /** @type {Array.} */ + this.routesData = routesData; + + /** @type {Array.<(Route,RoutingNode)>} */ + this.routes = []; + + this.onExec(); + } + + onExec() { + this.routesData.forEach(routeData => { + if ("routes" in routeData) { + this.routes.push(new RoutingNode(routeData["name"], routeData["hidden"], routeData["routes"])); + } else { + this.routes.push(new Route(routeData["name"], routeData["hidden"], routeData["filepath"])); + } + }); + } + + /** + * @returns {HTMLUListElement} The RoutingNode as an HTML unordered list. + */ + buildSelf(prefix, suffix) { + if (typeof prefix === 'undefined') { + prefix = ''; + } else { + prefix += '/'; + } + + if (typeof suffix === 'undefined') { + suffix = ''; + } else { + suffix += '/'; + } + + const element = document.createElement('section'); + element.classList.add("node","hide"); + + + const heading = document.createElement('div'); + heading.innerText = this.name; + heading.addEventListener('click', toggleDisplay); + + const list = document.createElement('ul'); + // list.classList.add("hide"); + this.routes.forEach(entry => { + const childEl = document.createElement('li'); + + childEl.appendChild(entry.buildSelf()); + + list.appendChild(childEl); + }); + + element.appendChild(heading); + element.appendChild(list); + + return element; + } +} + +// TODO: find them a new home + +/** + * @param {Event} event + */ +function toggleDisplay(event) { + const dropdown = event.currentTarget.parentNode; + // const list = dropdown.querySelector('ul'); + + toggleClass(dropdown, 'hide'); +}; + +/** + * @param {HTMLElement} el + * @param {string} className + */ +function toggleClass(el, className) { + if (el.classList.contains(className)) { + el.classList.remove(className); + } else { + el.classList.add(className); + } +}; \ No newline at end of file diff --git a/docs/assets/scss/components/aki-toolbar.scss b/docs/assets/scss/components/aki-toolbar.scss index 39c394b..b3aa389 100644 --- a/docs/assets/scss/components/aki-toolbar.scss +++ b/docs/assets/scss/components/aki-toolbar.scss @@ -12,9 +12,8 @@ aki-toolbar, justify-content: flex-start; max-height: 5.5rem; min-width: 20rem; - text-transform: uppercase; width: 100%; - z-index: 1; + z-index: 2; a { color: $on-primary; @@ -32,14 +31,14 @@ aki-toolbar, letter-spacing: .0178571429em; line-height: 1.25rem; transition: .25s ease-in-out; - + &:hover { filter: invert(.2); } - + &[active] { border-bottom: .25rem solid $accent; - } + } } } } \ No newline at end of file diff --git a/docs/assets/scss/style.scss b/docs/assets/scss/style.scss index 9498849..687fc0e 100644 --- a/docs/assets/scss/style.scss +++ b/docs/assets/scss/style.scss @@ -1,37 +1,75 @@ @import './utils/theme.scss'; @import './utils/elevation.scss'; -@import './utils/typography.scss'; +// @import './utils/typography.scss'; @import './components/aki-button.scss'; @import './components/aki-card.scss'; @import './components/aki-divider.scss'; @import './components/aki-toolbar.scss'; -.text1 { - font-family: 'Open Sans', sans-serif; - font-weight: 400; -} +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); -.text2 { - font-family: 'Source Sans Pro', sans-serif; - font-weight: 700; -} +// TODO: Media queries for smaller screens and devices. html { - font-family: 'Source Sans Pro', sans-serif; - font-size: $base-font-size; + font-size: 100%; } body { display: flex; flex-direction: column; + font-family: 'Roboto', sans-serif; + font-weight: 400; height: 100vh; + line-height: 1.75; margin: 0; padding: 0; - position: absolute; width: 100vw; } +p { + margin-bottom: 1rem; +} + +h1, +h2, +h3, +h4, +h5 { + margin: 3rem 0 1.38rem; + font-family: 'Roboto', sans-serif; + font-weight: 400; + line-height: 1.3; +} + +h1 { + margin-top: 0; + font-size: 3.052rem; +} + +h2 { + font-size: 2.441rem; +} + +h3 { + font-size: 1.953rem; +} + +h4 { + font-size: 1.563rem; +} + +h5 { + font-size: 1.25rem; +} + +small, +.text_small { + font-size: 0.8rem; +} + +// -------- + header { .left, @@ -53,19 +91,10 @@ header { .title { font-size: 1.75rem; + font-weight: 700; letter-spacing: .03125em; margin-left: 1rem; - span:last-child { - margin-left: .5rem; - } - - @media (max-width: #{$bp-medium}) { - span:first-child { - display: none; - } - } - @media (max-width: #{$bp-small}) { margin-left: 0; } @@ -75,11 +104,14 @@ header { .right { flex: 1 1 auto; justify-content: flex-end; + text-transform: uppercase; .dropdown-button { display: none; } + // TODO: Redo header media query + /* @media (max-width: #{$bp-medium}) { &.dropdown { align-items: center; @@ -113,6 +145,7 @@ header { } } } + */ } } @@ -120,78 +153,89 @@ main { display: flex; flex-direction: row; height: 100%; - position: relative; overflow: auto; width: 100%; aside { - background-color: $primary; - box-shadow: $elevation-z16; + background: $primary; + box-shadow: $elevation-z4; color: $on-primary; + max-width: 20rem; overflow-y: auto; - width: 20rem; + width: 100%; z-index: 1; - .subheader, - ul { - padding: 1rem; - } + nav { + margin: 1rem 0; - .subheader { - font-family: $font-source-sans-pro; - font-size: 1rem; - font-weight: 700; - } + a, + div { + display: block; + padding: .25rem .5rem .25rem 1rem; + width: calc(100% - 1.5rem); - ul { - font-family: $font-open-sans; - font-size: .875rem; - font-weight: 400; - list-style: none; - margin: 0; + // &:hover { + // background-color: rgba($secondary,.5); + // } + } - li { - cursor: pointer; - padding: .25rem 0; + ul { + list-style: none; + margin: 0; + padding-left: 1rem; + } - a { - color: $on-secondary; - text-decoration: none; + a { + color: $on-secondary; - &:hover { - filter: invert(.15); + &:hover { + filter: invert(.15); + } + &.active { + color: $accent; + } + } + + // TODO: Redo list status indicator + animations + .node { + &.hide { + ul { + max-height: 0 !important; } - &[active] { - color: $accent; + div::after { + transform: rotate(-90deg); } } + + div { + cursor: pointer; + display: flex; + + &::after { + content: "🔽"; + margin-right: 1rem; + text-align: right; + } + } + + ul { + overflow: hidden; + } } } } - #router-outlet { + article { background: $secondary; color: $on-secondary; - height: calc(100% - 2rem); - position: relative; overflow: auto; - padding: 1rem 2rem; - width: calc(100% - 4rem); - } -} + padding: 1rem 27.1% 1rem 10.4%; + width: 62.5%; -footer { - bottom: 0; - color: rgba(255, 255, 255, .25); - font-size: .625rem; - left: 0; - padding: .5rem 1.5rem; - position: absolute; - width: calc(100% - 1.5rem * 2); - - @media (max-width: #{$bp-small}) { - display: none; + img { + max-width: 100%; + } } } @@ -200,6 +244,7 @@ a { text-decoration: none; } +// Docs typography .doc-typography { $alert: #AF1010; $on-alert: #fff; @@ -220,71 +265,25 @@ a { $blockquote: #181818; $on-blockquote: #ccc; - $padding: .25rem .5rem; - $border-radius: $border-radius; + // $padding: .25rem .5rem; + // $border-radius: $border-radius; $margin: 0 0 .5rem; table { text-align: left; } - h1, - h2, - h3, - h4, - h5, - h6 { + blockquote { + background: rgba(255, 255, 255, .125); + border-radius: 4px; margin: 0; - } + padding: .5rem .7rem; - h1 { - font-family: $font-source-sans-pro; - font-size: 3rem; - font-weight: 700; - letter-spacing: -.015625em; - line-height: 6rem; + p { + margin: 0; + } } - - h2 { - font-family: $font-source-sans-pro; - font-size: 2.25rem; - font-weight: 700; - letter-spacing: -.0083333333em; - line-height: 3.75rem; - } - - h3 { - font-family: $font-source-sans-pro; - font-size: 1.75rem; - font-weight: 700; - letter-spacing: normal; - line-height: 3.125rem; - } - - h4 { - font-family: $font-source-sans-pro; - font-size: 1.75rem; - font-weight: 500; - letter-spacing: .0073529412em; - line-height: 2.5rem; - } - - h5 { - font-family: $font-source-sans-pro; - font-size: 1.5rem; - font-weight: 500; - letter-spacing: normal; - line-height: 2rem; - } - - h6 { - font-family: $font-source-sans-pro; - font-size: 1.25rem; - font-weight: 500; - letter-spacing: normal; - line-height: 2rem; - } - +/* p, pre ul, li, @@ -297,14 +296,6 @@ a { line-height: 1.5rem; } - p, - ul, - li, - blockquote, - span { - font-family: $font-open-sans; - } - pre, code { background: $code !important; @@ -418,4 +409,5 @@ a { } } -} \ No newline at end of file +*/ +} diff --git a/docs/assets/scss/utils/theme.scss b/docs/assets/scss/utils/theme.scss index b9fcfb2..21e9b90 100644 --- a/docs/assets/scss/utils/theme.scss +++ b/docs/assets/scss/utils/theme.scss @@ -3,10 +3,10 @@ $background: #fff; $on-background: #000; -$primary: #121212; +$primary: #080808; $on-primary: #fff; -$secondary: #282828; +$secondary: #1f1f1f; $on-secondary: #fff; $accent: #ffc107; diff --git a/docs/index.html b/docs/index.html index 647e9a0..28cb293 100644 --- a/docs/index.html +++ b/docs/index.html @@ -11,14 +11,12 @@
- + - - SPT-AKI - Docs - + SPT-AKI - Docs -