Skip to content

Commit 053f141

Browse files
LevelUpJosh-devLevelUpJosh-dev
committed
Add JSON/Html
You can hit any of the content endpoints with either a html path or json path to be served the two different formats of a given content page. We use the json version to remote server on a content grid. That fetch is then inline cached on the card so we don't need to make any additional requests for that content.
1 parent e6c5db0 commit 053f141

File tree

10 files changed

+92
-54
lines changed

10 files changed

+92
-54
lines changed

‎lobot/resources/css/javascript.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
.about-section {}
1+

‎lobot/resources/css/theme.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -813,6 +813,10 @@ a > code {
813813
background-color: #fff;
814814
}
815815

816+
#mainNav .nav-item {
817+
display: none;
818+
}
819+
816820
#mainNav .navbar-toggler {
817821
font-size: 80%;
818822
padding: 0.75rem;
@@ -872,7 +876,7 @@ a > code {
872876
background-color: #ffffff;
873877
}
874878

875-
#mainNav.navbar-shrink img {
879+
#mainNav.navbar-shrink .nav-item {
876880
display: block;
877881
}
878882

‎lobot/resources/html/contentGrid.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ async function ContentGrid(options) {
1616
<div class="container">
1717
<div class="row">
1818
<div class="col-md-4">
19-
<a href="TheModernBrowser">
19+
<a href="json/TheModernBrowser">
2020
<div id="the-modern-browser" class="card profile-card">
2121
<div class="background-block">
2222
<img src="assets/img/home/webp/bg-masthead.webp" alt="profile-sample1" class="background"/>
@@ -32,7 +32,7 @@ async function ContentGrid(options) {
3232
</div>
3333
3434
<div class="col-md-4">
35-
<a href="LearnWebFundamentals">
35+
<a href="json/LearnWebFundamentals">
3636
<div id="learn-web-fundamentals" class="card profile-card">
3737
<div class="background-block">
3838
<img src="assets/img/home/webp/bg-masthead.webp" alt="profile-sample1" class="background"/>
@@ -47,7 +47,7 @@ async function ContentGrid(options) {
4747
</a>
4848
</div>
4949
<div class="col-md-4">
50-
<a href="BeAnAdvocate">
50+
<a href="json/BeAnAdvocate">
5151
<div id="be-an-advocate" class="card profile-card">
5252
<div class="background-block">
5353
<img src="assets/img/home/webp/bg-masthead.webp" alt="profile-sample1" class="background"/>
@@ -62,7 +62,7 @@ async function ContentGrid(options) {
6262
</a>
6363
</div>
6464
<div class="col-md-4">
65-
<a href="TheEventLoop">
65+
<a href="json/TheEventLoop">
6666
<div id="the-event-loop" class="card profile-card">
6767
<div class="background-block">
6868
<img src="assets/img/home/webp/bg-masthead.webp" alt="profile-sample1" class="background"/>
@@ -77,7 +77,7 @@ async function ContentGrid(options) {
7777
</a>
7878
</div>
7979
<div class="col-md-4">
80-
<a href="WebComponents">
80+
<a href="json/WebComponents">
8181
<div id="web-components" class="card profile-card">
8282
<div class="background-block">
8383
<img src="assets/img/home/webp/bg-masthead.webp" alt="profile-sample1" class="background"/>

‎lobot/resources/html/footer.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,23 @@ async function Footer(options) {
1515
<div class="col align-items-center">
1616
<div class="text-center text-lg-left">
1717
<a class="image-link" href="#page-top" alt="Js.Land home link">
18-
<img width="485px" height="485px" src="assets/img/home/webp/logo-solid.webp" alt="Js.Land solid logo" class="img-fluid pb-3 logo-solid"/>
18+
<img width="485px" height="485px" src="/assets/img/home/webp/logo-solid.webp" alt="Js.Land solid logo" class="img-fluid pb-3 logo-solid"/>
1919
</a>
2020
</div>
2121
is powered by:
2222
<div class="text-center text-lg-left">
2323
<a class="image-link" target="_blank" href="https://getbootstrap.com/" alt="bootstrap homepage link">
24-
<img width="500px" height="500px" src="assets/img/home/webp/bootstrap-logo.webp" alt="bootstrap logo" class="img-fluid bootstrap-logo"/>
24+
<img width="500px" height="500px" src="/assets/img/home/webp/bootstrap-logo.webp" alt="bootstrap logo" class="img-fluid bootstrap-logo"/>
2525
</a>
2626
</div>
2727
<div class="text-center text-lg-left">
2828
<a class="image-link" target="_blank" href="https://deno.land/" alt="deno homepage link">
29-
<img width="512px" height="512px" src="assets/img/home/webp/deno-logo-inverted.webp" alt="deno logo" class="img-fluid deno-inverted-logo"/>
29+
<img width="512px" height="512px" src="/assets/img/home/webp/deno-logo-inverted.webp" alt="deno logo" class="img-fluid deno-inverted-logo"/>
3030
</a>
3131
</div>
3232
<div class="text-center text-lg-left my-3">
3333
<a class="image-link" target="_blank" href="https://www.monolisa.dev/" alt="monoLisa homepage link">
34-
<img width="1346" height="474" src="assets/img/home/webp/monolisa-logo.webp" alt="monoLisa font logo" class="img-fluid monolisa-logo"/>
34+
<img width="1346" height="474" src="/assets/img/home/webp/monolisa-logo.webp" alt="monoLisa font logo" class="img-fluid monolisa-logo"/>
3535
</a>
3636
</div>
3737
</div>

‎lobot/resources/html/home.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ async function Home(options) {
1111
return `
1212
${await window.Head()}
1313
<body id="page-top" class="home">
14-
${await window.Navigation()}
14+
${await window.Navigation(options)}
1515
<!-- Masthead-->
1616
<header class="masthead">
1717
<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">

‎lobot/resources/html/learnHtml.js‎

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { Serve } from "../../lobot.js";
1111
async function LearnHtml(options) {
1212
return `
1313
${await window.Head()}
14-
${await window.Navigation()}
1514
${await Serve(`learnHtml:css`)}
1615
<div id="learn-html" class="container-fluid mt-5">
1716
<div class="row">
@@ -31,7 +30,7 @@ async function LearnHtml(options) {
3130
<div class="mt-3">
3231
<h5><strong>HTML Element</strong></h5>
3332
<span>An <strong>Element</strong> is generally made up of three parts. An open tag some form of content and a close tag.
34-
The content of the elment will be dependent on a number of different factors which we'll review As we go through the content.</span>
33+
The content of the elment will be dependent on a number of different factors which we'll review As we go through the content.</span>
3534
</div>
3635
<div class="img-container mx-auto">
3736
<div class="img-container mx-auto">
@@ -45,28 +44,59 @@ async function LearnHtml(options) {
4544
<div class="spacer mb-3"></div>
4645
<strong>What does it do?</strong>
4746
<div class="spacer mb-1"></div>
48-
If web page was the human body; then HTML would be the webpages skelton. It creates the overarching structure for your website.
47+
If a web page was the human body; then HTML would be the skelton.
48+
It creates the overarching structure for your website however without some help it's a farily static page.
4949
</p>
5050
</div>
5151
</div>
5252
</div>
5353
<div class="col-6">
54-
<div class="card">
55-
<div class="card-body">
56-
<h5 class="card-title"><strong>JavaScript</strong></h5>
57-
<p class="card-text">
58-
<div class="spacer"></div>
59-
<strong>What is it?</strong>
60-
<div class="spacer mb-1"></div>
61-
if HTML is the skeleton in our body example; then JavaScript
62-
<div class="spacer mb-3"></div>
63-
<strong>What does it do?</strong>
64-
<div class="spacer mb-1"></div>
65-
If web page was the human body; then HTML would be the webpages skelton. It creates the overarching structure for your website.
66-
</p>
67-
</div>
68-
</div>
69-
</div>
54+
<div class="card">
55+
<div class="card-body">
56+
<h5 class="card-title"><strong>JavaScript</strong></h5>
57+
<p class="card-text">
58+
<div class="spacer"></div>
59+
<strong>What is it?</strong>
60+
<div class="spacer mb-1"></div>
61+
If the HTML is the skeleton of the web page, then JavaScript is the nervous system and portions of the brain. It helps create events and interactions within the webpage
62+
which allows for dynamic affects and interactivity on the page.
63+
<hr>
64+
<h5><strong>JavaScript Is Not Java</strong></h5>
65+
66+
<span>
67+
<strong>JavaScript</strong> should not be confused with the <strong>Java</strong> programming language.
68+
The name is purely a ploy to make it recognizable as a language during its inception.
69+
A <strong>JavaScript</strong> file can be used for many things. Let's look at a few examples.
70+
<ul class="list-group mt-3">
71+
<li class="list-group-item list-group-item-danger">
72+
You could throw some JavaScript into your html page within some <strong>script</strong> tags like this:
73+
<!-- TODO: Insert image example here. -->
74+
</li>
75+
<li class="list-group-item">
76+
<div class="spacer"></div>
77+
</li>
78+
<li class="list-group-item list-group-item-warning">
79+
You could create a JavaScript file using the file extension <strong>YourFileName.js</strong> and then link it to your html page
80+
using a script tag and src attribute like this:
81+
<!-- TODO: Insert image example here. -->
82+
</li>
83+
</ul>
84+
</span>
85+
<div class="spacer mb-1"></div>
86+
If HTML is the skeleton of our human body webpage, then JavaScript would have to be the nervous system and portions of the brain. It helps create events and interactions within the webpage
87+
which allows for dynamic affects and interactivity on the page.
88+
<div class="spacer mb-3"></div>
89+
<strong>What does it do?</strong>
90+
<div class="spacer mb-1"></div>
91+
A web page is made of elements these elments are made up html tags that are rendered by the browser.
92+
Javascript is used to create everything from a simple carousel to a complex web application. It allows you
93+
to manipulate elements on the page and create events that can be used to create dynamic effects and interactivity.
94+
On the flip side JavaScript could also have no visual impact on the page itself. However behind the scenes it's completing in some cases
95+
thousands of operations.
96+
</p>
97+
</div>
98+
</div>
99+
</div>
70100
${await window.Footer()}
71101
</div>
72102
${await Serve(`learnHtml:js`)}

‎lobot/resources/html/navigation.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
/**
22
* @type {Navigation}
3-
* @param options {string} [options] - A optional config object which can be passed into the template giving contextual data.
3+
* @param options {Object} [options] - A optional config object which can be passed into the template giving contextual data.
44
* @returns {Promise<string>}
55
* @constructor
66
*/
77

88
async function Navigation(options) {
99
const optionsOrNull = options || {};
1010
return `
11-
<nav class="navbar navbar-expand-lg navbar-light ${
12-
"type" in optionsOrNull && optionsOrNull.type === `fixed` ? "fixed-top" : ""
13-
}" id="mainNav">
11+
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
1412
<div class="container px-4 px-lg-5">
1513
<a class="navbar-brand" href="#page-top" aria-label="Js.Land main navigation">
1614
<img width="485px" height="485px" src="assets/img/home/webp/logo-solid.webp" alt="Js.Land logo image link" class="img-fluid logo-solid pb-3" />

‎lobot/resources/html/theEventLoop.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { Serve } from "../../lobot.js";
99

1010
async function TheEventLoop(options) {
1111
return `
12-
${await Serve(`javascript:css`)}
1312
<div class="container">
1413
<div class="row">
1514
<div class="col-6">

‎lobot/resources/js/contentGrid.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,25 @@
88
event.preventDefault();
99
const gridCard = event.currentTarget;
1010
const urlFragments = gridCard.closest("a").href.split("/");
11-
const contentId = urlFragments[4];
12-
const requestPath = `${urlFragments[4]}`;
11+
const resourceType = urlFragments[4];
12+
const contentId = urlFragments[5];
13+
const requestPath = `${resourceType}/${contentId}`;
1314
if (!gridCard.getAttribute(`inline-cache`)) {
14-
const response = fetch(requestPath, {
15+
const response = fetch(`${requestPath}`, {
1516
method: "GET",
1617
credentials: "same-origin",
1718
headers: {
1819
"Content-Type": "application/json",
1920
},
2021
}).then((response) => {
21-
response.json().then((body) => {
22-
const content = JSON.parse(body);
22+
response.json().then((response) => {
2323
const contentGrid = document.querySelector(
2424
`.content-grid`,
2525
);
2626
contentGrid.style.display = "none";
2727
gridCard.setAttribute(`inline-cache`, true);
28-
gridCard.setAttribute(`inline-cache-content`, content.body);
29-
contentContainer.innerHTML = content.body;
28+
gridCard.setAttribute(`inline-cache-content`, response.body);
29+
contentContainer.innerHTML = response.body;
3030
});
3131
});
3232
} else {

‎routing/routers/content.js‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const ContentRouter = Router();
1313

1414
ContentRouter.use(json());
1515
ContentRouter.use(serveStatic(`public`));
16+
ContentRouter.use(serveStatic(`/html/public`));
1617

1718
/**
1819
* @route GET /content
@@ -24,24 +25,30 @@ ContentRouter.get(`/`, async (request, response) => {
2425
});
2526

2627
/**
27-
* @route GET /content/:id
28+
* @route GET content/html/:id
2829
* @param {string} id - The id of the content to get
30+
* @param {boolean} [remoteFetch] - Weather this is a remote fetch or page load.
2931
*/
30-
ContentRouter.get(`/:id`, async (request, response) => {
31-
const body = await Serve(`${request.params.id}:html`);
32-
response.body = await body();
33-
response.send();
32+
ContentRouter.get(`/html/:id`, async (request, response) => {
33+
const contentId = request.params.id;
34+
const body = await Serve(`${contentId}:html`);
35+
const responseBody = await body();
36+
response.send(responseBody);
3437
});
3538

3639
/**
37-
* @route GET /content/:id/:section
40+
* @route GET /content/json/:id
3841
* @param {string} id - The id of the content to get
39-
* @param {string} section - The section of the content to get
42+
* @param {boolean} [remoteFetch] - Weather this is a remote fetch or page load.
4043
*/
41-
ContentRouter.get(`/:id/:section`, async (request, response) => {
42-
const body = await Serve(`${request.params.id}:html`);
43-
const responseBody = await body();
44-
response.json(JSON.stringify({ "body": responseBody }));
44+
ContentRouter.get(`/json/:id`, async (request, response) => {
45+
const contentId = request.params.id;
46+
const body = await Serve(`${contentId}:html`);
47+
let responseBody = await body();
48+
responseBody = {
49+
"body": responseBody
50+
}
51+
response.send(JSON.stringify(responseBody));
4552
});
4653

4754
export default ContentRouter;

0 commit comments

Comments
 (0)