Skip to content

Commit be91488

Browse files
HansUXdevHansUXdev
committed
minor updates to chapter 2 - server-side rendering
1 parent 52dfc55 commit be91488

File tree

20 files changed

+901
-133
lines changed

20 files changed

+901
-133
lines changed

‎02-ClientVServer/01-HTTP/readme.md

Lines changed: 3 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -90,14 +90,15 @@ The **browser** then *reads* that file and presents it to the user according the
9090

9191
--
9292

93-
### HTTP Status Codes with CATS..
93+
### HTTP Status Codes
94+
#### with CATS..
9495

9596
Credit to [http.cat](https://http.cat/).
9697

9798
:::block
9899

99100
<p align="center">
100-
<img src="https://github.com/HansUXdev/JavaScript-First/blob/master/01-Reteaching-JavaScript/04-client-vs-server/imgs/HTTPcats.gif?raw=true" height="400px" alt="HTTP Protocol"/>
101+
<img src="http://g.recordit.co/upgfpUOSvg.gif" height="400px" alt="HTTP Protocol"/>
101102
</p>
102103

103104
{style=width:60%;float:left;}
@@ -361,34 +362,6 @@ Set the page content-length. {.fragment .current-only data-code-focus=17-17}
361362

362363
Send it. {.fragment .current-only data-code-focus=20-20}
363364

364-
---
365-
366-
### HTTP With JavaScript ES6
367-
368-
```javascript
369-
const http = require('http')
370-
const fs = require('fs');
371-
const PORT = 7000;
372-
373-
const HtmlTemplateString = (header,body,footer) => {/* Code from above */}
374-
let page1 =HtmlTemplateString(/* Same Code from above */)
375-
376-
http.createServer(
377-
(request,res)=>{
378-
if (request.url == '/') {
379-
res.writeHead(200, {
380-
'Content-Type': 'text/html',
381-
'Content-Length': page1.length,
382-
'Expires': new Date().toUTCString()
383-
})
384-
res.end(page1);
385-
}
386-
}
387-
).listen(PORT);
388-
389-
390-
```
391-
392365

393366
---
394367

‎02-ClientVServer/02-Express/readme.md

Whitespace-only changes.

‎02-ClientVServer/02-server-side-templating/Nav.gif

309 KB
Loading

‎02-ClientVServer/02-server-side-templating/code/components/main.mjs

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
export const Masonary = (nav,body) => {
2+
return `
3+
<!doctype html>
4+
<html lang="en">
5+
6+
<head>
7+
<meta charset="utf-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<meta name="description" content="">
10+
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
11+
<meta name="generator" content="Hugo 0.72.0">
12+
<title>Masonry example · Bootstrap</title>
13+
14+
<link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/masonry/">
15+
16+
<!-- Bootstrap core CSS -->
17+
18+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
19+
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
20+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
21+
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
22+
crossorigin="anonymous"></script>
23+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
24+
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
25+
crossorigin="anonymous"></script>
26+
27+
<meta name="theme-color" content="#7952b3">
28+
29+
30+
<style>
31+
.bd-placeholder-img {
32+
font-size: 1.125rem;
33+
text-anchor: middle;
34+
-webkit-user-select: none;
35+
-moz-user-select: none;
36+
-ms-user-select: none;
37+
user-select: none;
38+
}
39+
40+
@media (min-width: 768px) {
41+
.bd-placeholder-img-lg {
42+
font-size: 3.5rem;
43+
}
44+
}
45+
</style>
46+
47+
48+
</head>
49+
50+
<body>
51+
${nav}
52+
<div class="container py-5">
53+
<h1>Bootstrap and Masonry</h1>
54+
<p class="lead">Integrate <a href="https://masonry.desandro.com/">Masonry</a> with the Bootstrap grid system and
55+
cards component.</p>
56+
57+
<p>Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like
58+
so:</p>
59+
60+
<pre><code>
61+
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js&quot; integrity=&quot;sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D&quot; crossorigin=&quot;anonymous&quot; async&gt;&lt;/script&gt;
62+
</code></pre>
63+
64+
<p>By adding <code>data-masonry='{"percentPosition": true }'</code> to the <code>.row</code> wrapper, we can
65+
combine the powers of Bootstrap's responsive grid and Masonry's positioning.</p>
66+
67+
<hr class="my-5">
68+
69+
<div class="row" data-masonry='{"percentPosition": true }'>
70+
${body}=
71+
</div>
72+
73+
</div>
74+
75+
76+
77+
<script async src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
78+
integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D"
79+
crossorigin="anonymous"></script>
80+
</body>
81+
82+
</html>`;
83+
}
84+
85+

‎02-ClientVServer/02-server-side-templating/code/components/nav.mjs

Lines changed: 66 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,37 @@
1-
// export default nav = (logo="https://hansmcmurdy.com/JavaScript-First/logo.svg") => {
2-
// }
1+
// Navbar Function to build a dynamic navbar on the server
32

43

4+
// NavLinks Server-Side Component
5+
// used to create links to each page,
6+
// homepages= [ {links:"home"},{links:"about"}]
7+
// Example of how to use it
8+
// let links = NavLinks(homepages)
9+
export const NavLinks = (data) => {
10+
return data.map(links => `
11+
<li class="nav-item">
12+
<a class="nav-link" href="#">${links.name}</a>
13+
</li>
14+
`).join('');
15+
};
16+
517

618

19+
/*
20+
* Example
21+
* create links for each page
22+
* let links = NavLinks(homepages)
23+
* pass that into the 'content' arguement and returns your final menu
24+
* Nav(links)
25+
*/
726
export const Nav = (content, logo="https://hansmcmurdy.com/JavaScript-First/logo.svg") => {
827
return `
928
<div class="collapse" id="JSFirst">
1029
<div class="bg-dark p-4">
1130
<h5 class="text-white h4"> #JavaScriptFirst is an online Book </h5>
1231
<span class="text-muted">
13-
Learn more about the book here: <a class="" href="https://hansmcmurdy.com/JavaScript-First/">#JavaScriptFirst</a>
32+
Learn more about the book here: <a class="" href="hansmcmurdy.com/JavaScript-First">
33+
#JavaScriptFirst
34+
</a>
1435
</span>
1536
</div>
1637
</div>
@@ -31,52 +52,48 @@ export const Nav = (content, logo="https://hansmcmurdy.com/JavaScript-First/logo
3152
</nav>`;
3253
};
3354

34-
35-
// `<nav class="navbar navbar-expand-lg navbar-light bg-light">
36-
// <div class="container-fluid">
37-
// <a class="navbar-brand" href="#">
38-
// <img src=${logo} width="30" height="30" alt="" loading="lazy">
39-
// </a>
40-
// <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="#navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
41-
// <span class="navbar-toggler-icon"></span>
42-
// </button>
43-
// <div class="collapse navbar-collapse" id="#navbarNavAltMarkup">
44-
// <div class="navbar-nav">
45-
// ${content}
46-
// </div>
47-
// </div>
48-
// </div>
49-
// </nav>`;
5055

5156

52-
export const NavLinks = (data) => {
53-
return data.map(links => `
54-
<li class="nav-item">
55-
<a class="nav-link" href="#">${links.name}</a>
56-
</li>
57-
`).join('');
58-
};
57+
const bottomNav = (content) => `<nav class="navbar fixed-bottom navbar-expand-sm navbar-light bg-light">
58+
<div class="container-fluid">
59+
<div class="collapse navbar-collapse" id="navbarCollapse">
60+
<ul class="navbar-nav row">
61+
<li class="col-10"></li>
62+
<li class="nav-item dropup col-2">
63+
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-expanded="false">Contact</a>
64+
<ul class="dropdown-menu" aria-labelledby="dropdown10">
65+
<li><a class="dropdown-item" href="#">Call</a></li>
66+
<li><a class="dropdown-item" href="#">Directions</a></li>
67+
</ul>
68+
</li>
69+
</ul>
70+
</div>
71+
</div>
72+
</nav>`;
73+
74+
75+
// export const mobileNav = bottomNav(links);
5976

60-
// For Demo purposes
61-
export const homepages = [
62-
{
63-
name: 'Home',
64-
url: "/",
65-
icon: ""
66-
},
67-
{
68-
name: 'About',
69-
url: "/",
70-
icon: "fa-user"
71-
},
72-
{
73-
name: 'Portfolio',
74-
url: "/",
75-
icon: "fa-th"
76-
},
77-
{
78-
name: 'Contact',
79-
url: "/",
80-
icon: "fa-envelope"
81-
}
82-
];
77+
import {homepages} from "../routes.mjs";
78+
// export const homepages = [
79+
// {
80+
// name: 'Home',
81+
// url: "/",
82+
// icon: "",
83+
// data: "",
84+
// },
85+
// {
86+
// name: 'About',
87+
// url: "/about",
88+
// icon: "fa-user",
89+
// data: "",
90+
// },
91+
// {
92+
// name: 'Portfolio',
93+
// url: "/Portfolio",
94+
// icon: "fa-th",
95+
// data: "",
96+
// }
97+
// ];
98+
const links = NavLinks(homepages)
99+
export const NAV = Nav(links)

‎02-ClientVServer/02-server-side-templating/code/index.mjs

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,31 @@
1+
import http from 'http'
2+
import fetch from 'node-fetch'
3+
const PORT = 8000;
4+
import { headers } from "./util/helpers.mjs";
15

6+
// Import our pages
7+
import home from "./pages/home.mjs";
8+
import {dataCard, Masonary} from "./pages/about.mjs";
9+
import { NAV } from "./components/nav.mjs";
210

3-
4-
5-
// import Server from './layout/main.mjs';
6-
import {Server,HTML,writeHTML} from './layout/main.mjs';
7-
import {Nav, NavLinks, homepages} from './components/nav.mjs';
8-
let links = NavLinks(homepages)
9-
10-
const home = HTML(`${ Nav(links)}`);
11-
12-
Server('/',7000,home)
11+
(async () => {
12+
http.createServer(
13+
async (request, response) => {
14+
const cards = await dataCard("https://www.breakingbadapi.com/api/characters/");
15+
const about = await Masonary(NAV,cards);
16+
Promise.resolve(about)
17+
let error;
18+
switch(request.url) {
19+
case "/":
20+
headers(home, response)
21+
break;
22+
case "/about":
23+
await headers(about, response)
24+
break;
25+
default:
26+
response.end(`Error ${error}`)
27+
}
28+
}
29+
).listen(PORT);
30+
console.log(`Listening on port: ${PORT}`);
31+
})();

‎02-ClientVServer/02-server-side-templating/code/index01.mjs

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import http from 'http'
2+
const PORT = 8000;
3+
import { headers } from "./util/helpers.mjs";
4+
5+
// Import our pages
6+
import home from "./pages/home.mjs";
7+
8+
(async () => {
9+
http.createServer(
10+
(request, response) => {
11+
let error;
12+
13+
if (request.url=="/") {
14+
headers(home, response)
15+
}
16+
else {
17+
response.end(`Error ${error}`)
18+
}
19+
}
20+
).listen(PORT);
21+
console.log(`Listening on port: ${PORT}`);
22+
})();

0 commit comments

Comments
 (0)