From 008b6a7ca848ebec54233bf1d4f5e921ef030380 Mon Sep 17 00:00:00 2001 From: Alex <atm2g19@soton.ac.uk> Date: Fri, 10 Apr 2020 21:17:34 +0100 Subject: [PATCH] Created html-rendere added mobile-compatibility to html --- public/code_jam/index.html | 15 +++---- .../coding_challenges/collisions/index.html | 15 +++---- .../collisions/quad-tree/index.html | 15 +++---- .../collisions/test-every-optim/index.html | 15 +++---- .../collisions/test-every/index.html | 15 +++---- .../covid-tracker/index.html | 15 +++---- public/coding_challenges/index.html | 15 +++---- .../sorting-visualiser/index.html | 15 +++---- .../sorting-visualiser/sorter.html | 24 ++++++------ public/css/main.css | 9 ++++- public/errors/404.html | 21 ++-------- public/errors/500.html | 39 ++----------------- public/games/backgammon/game.html | 17 +++----- public/games/backgammon/index.html | 15 +++---- public/games/battleships/game.html | 15 +++---- public/games/battleships/index.html | 15 +++---- public/games/battleships_v2/game.html | 15 +++---- public/games/battleships_v2/index.html | 15 +++---- public/games/cah/game.html | 15 +++---- public/games/cah/index.html | 15 +++---- public/games/index.html | 15 +++---- public/games/template/index.html | 15 +++---- public/include/footer.html | 3 ++ public/include/header.html | 7 ++++ public/include/meta.html | 1 + public/include/suberr.html | 5 +++ public/index.html | 15 +++---- src/sendFile.ts | 35 +++++++++++++++++ 28 files changed, 175 insertions(+), 256 deletions(-) create mode 100644 public/include/footer.html create mode 100644 public/include/header.html create mode 100644 public/include/meta.html create mode 100644 public/include/suberr.html diff --git a/public/code_jam/index.html b/public/code_jam/index.html index c35d176..6e4a553 100644 --- a/public/code_jam/index.html +++ b/public/code_jam/index.html @@ -2,18 +2,15 @@ <html> <head> + + #{meta} + <title>Google Code Jam Solutions</title> <link rel="stylesheet" href="/css/main.css"> </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> Code Jam Solutions @@ -32,9 +29,7 @@ </ul> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/coding_challenges/collisions/index.html b/public/coding_challenges/collisions/index.html index 6dd4786..4d9e141 100644 --- a/public/coding_challenges/collisions/index.html +++ b/public/coding_challenges/collisions/index.html @@ -2,18 +2,15 @@ <html> <head> + + #{meta} + <title>Collisions algorithms</title> <link rel="stylesheet" href="/css/main.css"> </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> Collisions algorithms @@ -36,9 +33,7 @@ </ul> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/coding_challenges/collisions/quad-tree/index.html b/public/coding_challenges/collisions/quad-tree/index.html index 37db3a9..f13315e 100644 --- a/public/coding_challenges/collisions/quad-tree/index.html +++ b/public/coding_challenges/collisions/quad-tree/index.html @@ -2,6 +2,9 @@ <html> <head> + + #{meta} + <title>Collisions - Quad Trees</title> <link rel="stylesheet" href="/css/main.css"> <script src="../../../js/p5/p5.js"></script> @@ -10,13 +13,7 @@ </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> @@ -29,9 +26,7 @@ <div id="container"> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/coding_challenges/collisions/test-every-optim/index.html b/public/coding_challenges/collisions/test-every-optim/index.html index 6e4b6f5..d1b592f 100644 --- a/public/coding_challenges/collisions/test-every-optim/index.html +++ b/public/coding_challenges/collisions/test-every-optim/index.html @@ -2,6 +2,9 @@ <html> <head> + + #{meta} + <title>Collisions - test all optimised</title> <link rel="stylesheet" href="/css/main.css"> <script src="../../../js/p5/p5.js"></script> @@ -9,13 +12,7 @@ </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> @@ -28,9 +25,7 @@ <div id="container"> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/coding_challenges/collisions/test-every/index.html b/public/coding_challenges/collisions/test-every/index.html index 26df212..4978234 100644 --- a/public/coding_challenges/collisions/test-every/index.html +++ b/public/coding_challenges/collisions/test-every/index.html @@ -2,6 +2,9 @@ <html> <head> + + #{meta} + <title>Collisions - test all</title> <link rel="stylesheet" href="/css/main.css"> <script src="../../../js/p5/p5.js"></script> @@ -9,13 +12,7 @@ </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> @@ -27,9 +24,7 @@ <div id="container"> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/coding_challenges/covid-tracker/index.html b/public/coding_challenges/covid-tracker/index.html index 89c914f..daaa150 100644 --- a/public/coding_challenges/covid-tracker/index.html +++ b/public/coding_challenges/covid-tracker/index.html @@ -2,6 +2,9 @@ <html> <head> + + #{meta} + <title>Covid-19 Tracker</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <script src="./index.js"></script> @@ -9,13 +12,7 @@ </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> Covid-19 Tracker @@ -25,9 +22,7 @@ <div id="container"> <canvas id="chart" width="500" height="500"></canvas> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/coding_challenges/index.html b/public/coding_challenges/index.html index 5f0a9a5..dc114fd 100644 --- a/public/coding_challenges/index.html +++ b/public/coding_challenges/index.html @@ -2,18 +2,15 @@ <html> <head> + + #{meta} + <title>Coding challenges!</title> <link rel="stylesheet" href="/css/main.css"> </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> Coding Challenges! @@ -35,9 +32,7 @@ </ul> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/coding_challenges/sorting-visualiser/index.html b/public/coding_challenges/sorting-visualiser/index.html index e4a56e3..f91827b 100644 --- a/public/coding_challenges/sorting-visualiser/index.html +++ b/public/coding_challenges/sorting-visualiser/index.html @@ -2,6 +2,9 @@ <html> <head> + + #{meta} + <title> Sorting Algorithm Visualiser </title> @@ -9,13 +12,7 @@ </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> Sorting Algorithm Visualiser @@ -39,9 +36,7 @@ </ul> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/coding_challenges/sorting-visualiser/sorter.html b/public/coding_challenges/sorting-visualiser/sorter.html index a05ae76..c498347 100644 --- a/public/coding_challenges/sorting-visualiser/sorter.html +++ b/public/coding_challenges/sorting-visualiser/sorter.html @@ -2,6 +2,9 @@ <html> <head> + + #{meta} + <title> Sorting Algorithm Visualiser </title> @@ -10,28 +13,29 @@ <script src="./main.js"></script> <script src="./visualiser.js"></script> <script src="./algo.js"></script> + <script src="./color.js"></script> <script src="./visualisers/standard.js"></script> <script src="./visualisers/spiral.js"></script> <script src="./visualisers/pie.js"></script> <script src="./visualisers/scatter.js"></script> - <script src="./algorithms/fisher-yates.js"></script> <script src="./algorithms/bubble-sort.js"></script> <script src="./algorithms/cocktail-shaker-sort.js"></script> <script src="./algorithms/quick-sort.js"></script> <script src="./algorithms/heap-sort.js"></script> + <script src="./shuffles/fisher-yates.js"></script> + <script src="./shuffles/in-order.js"></script> + <script src="./shuffles/near-sorted.js"></script> + + <script src="./colors/rainbow.js"></script> + <script src="./colors/simple.js"></script> + </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> Sorting Algorithm Visualiser @@ -46,9 +50,7 @@ </div> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/css/main.css b/public/css/main.css index aa7cdec..78815c9 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -18,7 +18,7 @@ body { padding: 20px; width: calc(100vw - 40px); background-color: #181818; - font-size: 24px; + font-size: 13pt; } @@ -28,7 +28,7 @@ body { padding: 10px; padding-left: 30px; background-color: #202020; - + font-size: 11pt; } h1 { @@ -43,6 +43,7 @@ h1 { #container { margin: 20px; + font-size: 150%; } #home { @@ -64,4 +65,8 @@ button { font-size: 20px; color: white; background-color: #101010; +} + +li { + margin: 4px; } \ No newline at end of file diff --git a/public/errors/404.html b/public/errors/404.html index 061915f..28a752d 100644 --- a/public/errors/404.html +++ b/public/errors/404.html @@ -2,24 +2,13 @@ <html> <head> + #{meta} <link rel="stylesheet" href="/css/main.css"> </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> - <div id="subheader"> - - <h1> - Error - </h1> - - </div> + #{header} + #{suberr} <div id="container" style="text-align: center;"> <h1> @@ -35,9 +24,7 @@ </h3> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/errors/500.html b/public/errors/500.html index 4f84515..1fbee23 100644 --- a/public/errors/500.html +++ b/public/errors/500.html @@ -3,43 +3,14 @@ <head> -</head> + #{meta} -<body> - <h1> - Error 500 - </h1><br> - <p> - oops - </p><br> - <h3> - Server error! - </h3><br> -</body> - -</html> -<!DOCTYPE html> -<html> - -<head> <link rel="stylesheet" href="/css/main.css"> </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> - <div id="subheader"> - - <h1> - Error - </h1> - - </div> + #{header} + #{suberr} <div id="container" style="text-align: center;"> <h1> @@ -59,9 +30,7 @@ </p> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/games/backgammon/game.html b/public/games/backgammon/game.html index 2978383..32fdee9 100644 --- a/public/games/backgammon/game.html +++ b/public/games/backgammon/game.html @@ -2,7 +2,10 @@ <html> <head> - <title>Cards against Humanity</title> + + #{meta} + + <title>Backgammon</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> <script src="/js/p5/p5.js"></script> <script src="../game.js"></script> @@ -12,13 +15,7 @@ </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> @@ -32,9 +29,7 @@ </div> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/games/backgammon/index.html b/public/games/backgammon/index.html index 17f13ec..7ab39cd 100644 --- a/public/games/backgammon/index.html +++ b/public/games/backgammon/index.html @@ -2,6 +2,9 @@ <html> <head> + + #{meta} + <title>Battleships</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script> @@ -11,13 +14,7 @@ </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> @@ -29,9 +26,7 @@ <div id="container"> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/games/battleships/game.html b/public/games/battleships/game.html index 92316e6..8192060 100644 --- a/public/games/battleships/game.html +++ b/public/games/battleships/game.html @@ -2,6 +2,9 @@ <html> <head> + + #{meta} + <title>Battleships</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script> @@ -10,13 +13,7 @@ </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> @@ -37,9 +34,7 @@ </div> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/games/battleships/index.html b/public/games/battleships/index.html index 3752123..aaad847 100644 --- a/public/games/battleships/index.html +++ b/public/games/battleships/index.html @@ -2,6 +2,9 @@ <html> <head> + + #{meta} + <title>Battleships</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script> @@ -11,13 +14,7 @@ </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> @@ -29,9 +26,7 @@ <div id="container"> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/games/battleships_v2/game.html b/public/games/battleships_v2/game.html index 587d50a..c3b607c 100644 --- a/public/games/battleships_v2/game.html +++ b/public/games/battleships_v2/game.html @@ -2,6 +2,9 @@ <html> <head> + + #{meta} + <title>Battleships-V2.0</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> <script src="/js/p5/p5.js"></script> @@ -10,13 +13,7 @@ </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> @@ -40,9 +37,7 @@ </div> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/games/battleships_v2/index.html b/public/games/battleships_v2/index.html index 0763f12..6b99df4 100644 --- a/public/games/battleships_v2/index.html +++ b/public/games/battleships_v2/index.html @@ -2,6 +2,9 @@ <html> <head> + + #{meta} + <title>Battleships</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script> @@ -11,13 +14,7 @@ </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> @@ -29,9 +26,7 @@ <div id="container"> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/games/cah/game.html b/public/games/cah/game.html index 8222ebb..123f49d 100644 --- a/public/games/cah/game.html +++ b/public/games/cah/game.html @@ -2,6 +2,9 @@ <html> <head> + + #{meta} + <title>Cards against Humanity</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> <script src="/js/p5/p5.js"></script> @@ -11,13 +14,7 @@ </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> @@ -31,9 +28,7 @@ </div> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/games/cah/index.html b/public/games/cah/index.html index 572563c..f7f0aed 100644 --- a/public/games/cah/index.html +++ b/public/games/cah/index.html @@ -2,6 +2,9 @@ <html> <head> + + #{meta} + <title>Battleships</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script> @@ -13,13 +16,7 @@ </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> @@ -31,9 +28,7 @@ <div id="container"> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/games/index.html b/public/games/index.html index d8f422a..01fafa8 100644 --- a/public/games/index.html +++ b/public/games/index.html @@ -2,17 +2,14 @@ <html> <head> + + #{meta} + <link rel="stylesheet" href="/css/main.css"> </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> @@ -49,9 +46,7 @@ </ul> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/games/template/index.html b/public/games/template/index.html index e755b3a..fae4e40 100644 --- a/public/games/template/index.html +++ b/public/games/template/index.html @@ -2,6 +2,9 @@ <html> <head> + + #{meta} + <title>Battleships</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script> @@ -11,13 +14,7 @@ </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="subheader"> <h1> @@ -29,9 +26,7 @@ <div id="container"> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/public/include/footer.html b/public/include/footer.html new file mode 100644 index 0000000..34753ba --- /dev/null +++ b/public/include/footer.html @@ -0,0 +1,3 @@ +<div id="footer"> + +</div> \ No newline at end of file diff --git a/public/include/header.html b/public/include/header.html new file mode 100644 index 0000000..c52ee28 --- /dev/null +++ b/public/include/header.html @@ -0,0 +1,7 @@ +<div id="header"> + <h1> + <a href="/" id="home"> + Alex Mansfield's web server! + </a> + </h1> +</div> \ No newline at end of file diff --git a/public/include/meta.html b/public/include/meta.html new file mode 100644 index 0000000..3808197 --- /dev/null +++ b/public/include/meta.html @@ -0,0 +1 @@ +<meta name="viewport" content="width=device-width, initial-scale=1.0"> \ No newline at end of file diff --git a/public/include/suberr.html b/public/include/suberr.html new file mode 100644 index 0000000..4fe5e38 --- /dev/null +++ b/public/include/suberr.html @@ -0,0 +1,5 @@ +<div id="subheader"> + <h1> + Error + </h1> +</div> \ No newline at end of file diff --git a/public/index.html b/public/index.html index 9a5be73..d30c53b 100644 --- a/public/index.html +++ b/public/index.html @@ -2,18 +2,15 @@ <html> <head> + + #{meta} + <title>AM Web!</title> <link rel="stylesheet" href="/css/main.css"> </head> <body> - <div id="header"> - <h1> - <a href="/" id="home"> - Alex Mansfield's web server! - </a> - </h1> - </div> + #{header} <div id="container"> <ul> <li> @@ -27,9 +24,7 @@ </li> </ul> </div> - <div id="footer"> - - </div> + #{footer} </body> </html> \ No newline at end of file diff --git a/src/sendFile.ts b/src/sendFile.ts index 700ff67..23d89be 100644 --- a/src/sendFile.ts +++ b/src/sendFile.ts @@ -9,6 +9,31 @@ function staticServe(root: string) { } function sendFile(path: string, req: express.Request, res: express.Response, next: express.NextFunction) { + let type = path.substr(path.lastIndexOf('.')); + getFile(path) + .then(async file => { + + let r = /#{.+}/gm; + let i; + if (type == '.html') + while (i = r.exec(file)) { + // console.log(i[0]); + try { + let include = await getFile(`public/include/${i[0].substring(2, i[0].length-1)}.html`); + file = file.substr(0, i.index) + include + file.substr(i.index + i[0].length); + } catch (e) { + file = file.substr(0, i.index) + file.substr(i.index + i[0].length); + } + } + res.type(type); + res.send(file); + res.end(); + }) + .catch(err => { + console.log(err); + next(404); + }) + return; fs.exists(path, (exists: boolean) => { if (!exists) { next(404); @@ -34,6 +59,16 @@ function sendFile(path: string, req: express.Request, res: express.Response, nex }) } +async function getFile(path: string): Promise < string > { + // console.log(`Getting file: ${path}`); + let handle = await fs.promises.open(path, 'r'); + // console.log("HANDLE"); + // console.log(handle); + let file = await handle.readFile(); + handle.close(); + return file.toString(); +} + export { sendFile, staticServe -- GitLab