🎒🎖 Checkpoint

./README.md:1954897/2857
./server.js:1954897/4286
./package.json:1954897/1034
./index.html:1954897/1440
./public/index.js:1954897/4254
./public/style.css:1954897/5185
This commit is contained in:
Glitch (glitch-hello-node)
2021-11-14 04:51:40 +00:00
parent f7de9ecf60
commit 951dff8682
12 changed files with 421 additions and 1267 deletions
-179
View File
@@ -1,179 +0,0 @@
The LICENSE file for any project gives credit to the creator/author of the
project, copyright information for the project, and the legal terms under
which it's being shared. In other words, this is us using an MIT license to
say "we wrote this and you can do whatever you want with it."
******************************************************************************
~glitch-hello-node
******************************************************************************
MIT License
Copyright (c) 2021, Glitch, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
******************************************************************************
THIRD-PARTY SOFTWARE
1. fastify: Fastify is a web framework focused on developer experience.
2. fastify-static: Plugin for serving static files as fast as possible.
3. handlebars.js: Minimal templating on steroids
4. point-of-view: Templates rendering plugin support for Fastify.
5. HK Grotesk: The font we're using.
******************************************************************************
1. fastify (also applies to fastify-formbody)
URL: https://www.fastify.io/
https://github.com/fastify/fastify
******************************************************************************
MIT License
Copyright (c) 2016-2020 The Fastify Team
The Fastify team members are listed at https://github.com/fastify/fastify#team
and in the README file.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
******************************************************************************
END, fastify
******************************************************************************
******************************************************************************
2. fastify-static
URL: https://github.com/fastify/fastify-static
******************************************************************************
MIT License
Copyright (c) 2017-2018 Fastify
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
******************************************************************************
END, fastify-static
******************************************************************************
******************************************************************************
3. handlebars.js
URL: https://handlebarsjs.com/
https://github.com/handlebars-lang/handlebars.js
******************************************************************************
Copyright (C) 2011-2019 by Yehuda Katz
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
******************************************************************************
END, fastify-static
******************************************************************************
******************************************************************************
4. point-of-view
URL: https://github.com/fastify/point-of-view
******************************************************************************
MIT License
Copyright (c) 2017 Fastify
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
******************************************************************************
END, point-of-view
******************************************************************************
******************************************************************************
5. HK Grotesk
URL: https://hanken.co/products/hk-grotesk
******************************************************************************
HK Grotesk was designed by Hanken Design Co. It is shared using a SIL OFL
license. Full license text can be found at:
https://hanken.co/pages/web-fonts-eula
******************************************************************************
END, HK Grotesk
******************************************************************************
-42
View File
@@ -1,42 +0,0 @@
# Hello Node!
This project includes a Node.js server script and a web page that connects to it. The front-end page presents a form the visitor can use to submit a color name, sending the submitted value to the back-end API running on the server. The server returns info to the page that allows it to update the display with the chosen color. 🎨
[Node.js](https://nodejs.org/en/about/) is a popular runtime that lets you run server-side JavaScript. This project uses the [Fastify](https://www.fastify.io/) framework and explores basic templating with [Handlebars](https://handlebarsjs.com/).
## Prerequisites
You'll get best use out of this project if you're familiar with basic JavaScript. If you've written JavaScript for client-side web pages this is a little different because it uses server-side JS, but the syntax is the same!
## What's in this project?
`README.md`: Thats this file, where you can tell people what your cool website does and how you built it.
`public/style.css`: The styling rules for the pages in your site.
`server.js`: The **Node.js** server script for your new site. The JavaScript defines the endpoints in the site back-end, one to return the homepage and one to update with the submitted color. Each one sends data to a Handlebars template which builds these parameter values into the web page the visitor sees.
`package.json`: The NPM packages for your project's dependencies.
`src/`: This folder holds the site template along with some basic data files.
`src/pages/index.hbs`: This is the main page template for your site. The template receives parameters from the server script, which it includes in the page HTML. The page sends the user submitted color value in the body of a request, or as a query parameter to choose a random color.
`src/colors.json`: A collection of CSS color names. We use this in the server script to pick a random color, and to match searches against color names.
`src/seo.json`: When you're ready to share your new site or add a custom domain, change SEO/meta settings in here.
## Try this next 🏗️
Take a look in `TODO.md` for next steps you can try out in your new site!
___Want a minimal version of this project to build your own Node.js app? Check out [Blank Node](https://glitch.com/edit/#!/remix/glitch-blank-node)!___
![Glitch](https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576)
## You built this with Glitch!
[Glitch](https://glitch.com) is a friendly community where millions of people come together to build web apps and websites.
- Need more help? [Check out our Help Center](https://help.glitch.com/) for answers to any common questions.
- Ready to make it official? [Become a paid Glitch member](https://glitch.com/pricing) to boost your app with private sharing, more storage and memory, domains and more.
-22
View File
@@ -1,22 +0,0 @@
# TODO 🚧
Your new site is all yours so it doesn't matter if you break it! Try editing the code.
Let's keep track of the submitted favorites using an array. First add this code near the top of `server.js` (where the comment says `ADD FAVORITES ARRAY VARIABLE`):
```js
const favorites = [];
```
In the `POST` route, inside the `if(color)` block, add this code to save the submitted value to the array, and write it to the console:
```js
favorites.push(color);
console.log(favorites);
```
Click __Tools__ > __Logs__ at the bottom of Glitch to see the log statement in action when you submit new colors through the form.
## Keep going! 🚀
Clearly this is not a robust data storage approach and won't persist for long! Your Node apps can use a variety of databases, like [SQLite](https://glitch.com/~glitch-hello-sqlite) and [Airtable](https://glitch.com/~glitch-hello-airtable).
+4 -8
View File
@@ -6,13 +6,6 @@
"scripts": {
"start": "node server.js"
},
"dependencies": {
"fastify": "^3.23.1",
"fastify-formbody": "^5.1.0",
"fastify-static": "^4.5.0",
"handlebars": "^4.7.7",
"point-of-view": "^4.15.2"
},
"engines": {
"node": "12.x"
},
@@ -24,5 +17,8 @@
"node",
"glitch",
"express"
]
],
"dependencies": {
"express": "^4.17.1"
}
}
+28
View File
@@ -0,0 +1,28 @@
<!doctype html>
<!--
Made with love by MindfulMinun
https://benjic.xyz/
-->
<html lang="en-US" class="no-js">
<head>
<meta charset="utf-8">
<title>Density map</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,500;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<!-- scripts -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
</head>
<body class="card--active">
<div id="map"></div>
<div id="card" style="--region: ''">
<p>Tap a region to get started.</p>
</div>
</body>
<script src="./index.js"></script>
</html>
+149
View File
@@ -0,0 +1,149 @@
const buildings = {
"MC": {
name: "McDermott Library",
bounds: [
[32.98732, -96.74801],
[32.98732, -96.74723],
[32.98660, -96.74723],
[32.98660, -96.74801]
],
},
"SU": {
name: "Student Union",
bounds: [
[32.98711, -96.74909],
[32.98711, -96.74848],
[32.98661, -96.74849],
[32.98661, -96.74910]
]
},
"ECSW": {
name: "Engineering and Computer Science West",
bounds: [
[32.98639, -96.75217],
[32.98638, -96.75128],
[32.98579, -96.75119],
[32.98581, -96.75217]
]
}
}
const map = L.map('map', {
minZoom: 15,
maxZoom: 18
}).setView([32.98649, -96.7485], 18)
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
id: 'mapbox/dark-v10',
// id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(map)
for (const [id, building] of Object.entries(buildings)) {
console.log(id, building)
const poly = L.polygon(building.bounds)
poly.on('click', ev => {
console.log(ev)
map.panTo(poly.getCenter())
displayCard(id)
}).addTo(map)
if (id === "MC") {
poly.setStyle({
color: "#00e676",
opacity: .5
})
} else if (id === "SU"){
poly.setStyle({
color: "yellow",
opacity: .5
})
}
// const label = new L.marker(poly.getCenter(), { opacity: 0.00 }) //opacity may be set to zero
// label.bindTooltip(id, {permanent: true, className: "my-label", offset: [0, 0] });
// label.addTo(map)
}
async function displayCard(id) {
const card = document.getElementById("card")
await card.animate([
{ transform: 'translateY(50px)', opacity: "0" },
], {
duration: 200,
fill: 'forwards',
easing: 'cubic-bezier(0.4, 0.0, 1, 1)'
}).finished
card.innerHTML = `
<h1>${buildings[id].name}</h1>
<p>Busier than usual</p>
<canvas id="myChart" height="80"></canvas>
`
card.style.setProperty("--region", `'${id}'`)
updateChart()
await card.animate([
{ transform: 'translateY(0%)', opacity: "1" },
], {
duration: 200,
fill: 'forwards',
easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)'
}).finished
}
function updateChart() {
const ctx = document.getElementById('myChart').getContext('2d')
new Chart(ctx, {
type: 'line',
data: {
labels: ['Now', '1h ago', '2h ago', '3h ago', '4h ago', '5h ago'].reverse(),
datasets: [{
label: 'Density',
data: [12, 19, 3, 5, 2, 3],
// backgroundColor: [
// 'rgba(255, 99, 132, 0.2)',
// 'rgba(54, 162, 235, 0.2)',
// 'rgba(255, 206, 86, 0.2)',
// 'rgba(75, 192, 192, 0.2)',
// 'rgba(153, 102, 255, 0.2)',
// 'rgba(255, 159, 64, 0.2)'
// ],
// borderColor: [
// 'rgba(255, 99, 132, 1)',
// 'rgba(54, 162, 235, 1)',
// 'rgba(255, 206, 86, 1)',
// 'rgba(75, 192, 192, 1)',
// 'rgba(153, 102, 255, 1)',
// 'rgba(255, 159, 64, 1)'
// ],
borderColor: '#55aadd',
backgroundColor: '#55aadd',
// borderWidth: 2
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
})
}
const mediaQuery = window.matchMedia("(min-width: 720px)")
mediaQuery.addEventListener("change", updateSize)
requestAnimationFrame(updateSize)
function updateSize() {
map.invalidateSize(true)
console.log("updatesize!")
}
// map.invalidateSize()
+49 -184
View File
@@ -1,201 +1,66 @@
/******************************************************************************
START Glitch hello-app default styles
The styles in this section do some minimal CSS resets, set default fonts and
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/
/* Our default values set as CSS variables */
:root {
--color-bg: #BDC9FF;
--color-text-main: #000000;
--color-primary: #AFECE0;
--wrapper-height: 87vh;
--image-max-width: 300px;
--image-margin: 3rem;
--font-family: "HK Grotesk";
--font-family-header: "HK Grotesk";
*, *::before, *::after {
box-sizing: border-box;
}
/* Basic page style resets */
* {
box-sizing: border-box;
html, body {
margin: 0;
padding: 0;
}
[hidden] {
display: none !important;
}
/* Import fonts */
@font-face {
font-family: HK Grotesk;
src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
format("opentype");
}
@font-face {
font-family: HK Grotesk;
font-weight: bold;
src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
format("opentype");
}
/* Our remix on glitch button */
.btn--remix {
font-family: HK Grotesk;
padding: 0.75rem 1rem;
font-size: 1.1rem;
line-height: 1rem;
font-weight: 500;
height: 2.75rem;
align-items: center;
cursor: pointer;
background: #FFFFFF;
border: 1px solid #000000;
box-sizing: border-box;
border-radius: 4px;
text-decoration: none;
color: #000;
white-space: nowrap;
margin-left: auto;
}
.btn--remix img {
margin-right: 0.5rem;
}
.btn--remix:hover {
background-color: #D0FFF1;
}
/* Navigation grid */
.footer {
display: flex;
justify-content: space-between;
margin: 1rem auto 0;
padding: 1rem 0 0.75rem 0;
width: 100%;
flex-wrap: wrap;
border-top: 4px solid #fff;
}
.footer a:not(.btn--remix):link,
a:not(.btn--remix):visited {
font-family: HK Grotesk;
font-style: normal;
font-weight: normal;
font-size: 1.1rem;
color: #000;
text-decoration: none;
border-style: none;
}
.footer a:hover {
background: var(--color-primary);
}
.footer .links {
padding: 0.5rem 1rem 1.5rem;
white-space: nowrap;
}
.divider {
padding: 0 1rem;
}
/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/
body {
font-family: HK Grotesk;
background-color: var(--color-bg);
font-family: "IBM Plex Sans", sans-serif;
font-weight: 200;
}
/* Page structure */
.wrapper {
min-height: var(--wrapper-height);
display: grid;
place-items: center;
margin: 0 1rem;
}
.content {
display: flex;
flex-direction: column;
align-items: left;
justify-content: left;
#map {
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
p {
font-size: 1.25rem;
#card {
position: fixed;
bottom: 0; left: 0; right: 0;
width: 100%;
margin: 0 auto;
max-width: 920px;
background: #1e1e1e;
border: 2px solid white;
border-radius: 0 4em 0 0;
border-bottom: 0;
padding: 1em 1em 0;
color: white;
}
/* Title h1 style */
.title {
color: #2800FF;
font-family: HK Grotesk;
font-style: normal;
font-weight: bold;
font-size: 100px;
line-height: 105%;
margin: 2rem 0 0;
#card::before {
content: var(--region);
pointer-events: none;
display: block;
position: absolute;
bottom: 1rem;
left: 1rem;
opacity: .12;
font-size: 6em;
}
/* Very light scaling for our illustration */
.illo-container {
display: flex;
justify-content: flex-end;
}
.illustration {
max-width: 100%;
max-height: 150px;
margin-top: 1rem;
.card--active #card {
transform: translateY(0);
}
/* Styles for our custom color form and its results */
.color-info {
margin-left: 5px;
}
.color-search {
margin-top: 3rem;
}
.color-form {
width: 90%;
max-width: 500px;
margin-left: 5px;
}
.color-form a:not(.btn--remix) {
font-weight: bold;
color: var(--color-text-main);
margin-top: 8px;
}
.color-form button {
margin-top: 8px;
}
.color-form button:hover {
cursor: pointer;
box-shadow: -8px 4px 20px #9BE7D8;
}
form {
margin: 0.75rem 0;
}
button,
input {
font-family: inherit;
font-size: 100%;
background: #FFFFFF;
border: 1px solid #000000;
box-sizing: border-box;
border-radius: 4px;
padding: 0.5rem 1rem;
}
label {
color: #000000;
font-weight: bold;
@media only screen and (min-width: 720px) {
#card {
right: auto;
/* min-height: 300px; */
left: 2em;
/* max-width: 50%; */
width: 480px;
}
}
/* Instructions */
.instructions {
margin: 1rem auto 0;
}
.instructions p {
font-size: 1rem;
}
h2 {
color: #2800FF;
}
h1, p, canvas { margin: 0 0 1rem; font-weight: 300; }
+10 -119
View File
@@ -1,123 +1,14 @@
/**
* This is the main Node.js server script for your project
* Check out the two endpoints this back-end API provides in fastify.get and fastify.post below
*/
const path = require("path");
// Require the fastify framework and instantiate it
const fastify = require("fastify")({
// Set this to true for detailed logging:
logger: false
});
// ADD FAVORITES ARRAY VARIABLE FROM TODO HERE
const express = require('express')
const app = express()
const port = process.env.PORT
// Setup our static files
fastify.register(require("fastify-static"), {
root: path.join(__dirname, "public"),
prefix: "/" // optional: default '/'
});
app.use(express.static('public'))
// fastify-formbody lets us parse incoming forms
fastify.register(require("fastify-formbody"));
app.post('/', (req, res) => {
console.log(req.body)
})
// point-of-view is a templating manager for fastify
fastify.register(require("point-of-view"), {
engine: {
handlebars: require("handlebars")
}
});
// Load and parse SEO data
const seo = require("./src/seo.json");
if (seo.url === "glitch-default") {
seo.url = `https://${process.env.PROJECT_DOMAIN}.glitch.me`;
}
/**
* Our home page route
*
* Returns src/pages/index.hbs with data built into it
*/
fastify.get("/", function(request, reply) {
// params is an object we'll pass to our handlebars template
let params = { seo: seo };
// If someone clicked the option for a random color it'll be passed in the querystring
if (request.query.randomize) {
// We need to load our color data file, pick one at random, and add it to the params
const colors = require("./src/colors.json");
const allColors = Object.keys(colors);
let currentColor = allColors[(allColors.length * Math.random()) << 0];
// Add the color properties to the params object
params = {
color: colors[currentColor],
colorError: null,
seo: seo
};
}
// The Handlebars code will be able to access the parameter values and build them into the page
reply.view("/src/pages/index.hbs", params);
});
/**
* Our POST route to handle and react to form submissions
*
* Accepts body data indicating the user choice
*/
fastify.post("/", function(request, reply) {
// Build the params object to pass to the template
let params = { seo: seo };
// If the user submitted a color through the form it'll be passed here in the request body
let color = request.body.color;
// If it's not empty, let's try to find the color
if (color) {
// ADD CODE FROM TODO HERE TO SAVE SUBMITTED FAVORITES
// Load our color data file
const colors = require("./src/colors.json");
// Take our form submission, remove whitespace, and convert to lowercase
color = color.toLowerCase().replace(/\s/g, "");
// Now we see if that color is a key in our colors object
if (colors[color]) {
// Found one!
params = {
color: colors[color],
colorError: null,
seo: seo
};
} else {
// No luck! Return the user value as the error property
params = {
colorError: request.body.color,
seo: seo
};
}
}
// The Handlebars template will use the parameter values to update the page with the chosen color
reply.view("/src/pages/index.hbs", params);
});
// Run the server and report out to the logs
fastify.listen(process.env.PORT, function(err, address) {
if (err) {
fastify.log.error(err);
process.exit(1);
}
console.log(`Your app is listening on ${address}`);
fastify.log.info(`server listening on ${address}`);
});
app.listen(port, () => {
console.log(`Listening at http://localhost:${port}`)
})
+181 -419
View File
@@ -1,72 +1,42 @@
dependencies:
fastify: 3.23.1
fastify-formbody: 5.1.0
fastify-static: 4.5.0
handlebars: 4.7.7
point-of-view: 4.15.2
express: 4.17.1
packages:
/@fastify/ajv-compiler/1.1.0:
/accepts/1.3.7:
dependencies:
ajv: 6.12.6
dev: false
resolution:
integrity: sha512-gvCOUNpXsWrIQ3A4aXCLIdblL0tDq42BG/2Xw7oxbil9h11uow10ztS2GuFazNBfjbrsZ5nl+nPl5jDSjj5TSg==
/abstract-logging/2.0.1:
dev: false
resolution:
integrity: sha512-2BjRTZxTPvheOvGbBslFSYOUkr+SjPtOnrLP33f+VIWLzezQpZcqVg7ja3L4dBXmzzgwT+a029jRx5PCi3JuiA==
/ajv/6.12.6:
dependencies:
fast-deep-equal: 3.1.3
fast-json-stable-stringify: 2.1.0
json-schema-traverse: 0.4.1
uri-js: 4.4.1
dev: false
resolution:
integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
/ajv/8.6.3:
dependencies:
fast-deep-equal: 3.1.3
json-schema-traverse: 1.0.0
require-from-string: 2.0.2
uri-js: 4.4.1
dev: false
resolution:
integrity: sha512-SMJOdDP6LqTkD0Uq8qLi+gMwSt0imXLSV080qFVwJCpH9U6Mb+SUGHAXM0KNbcBPguytWyvFxcHgMLe2D2XSpw==
/archy/1.0.0:
dev: false
resolution:
integrity: sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=
/atomic-sleep/1.0.0:
mime-types: 2.1.34
negotiator: 0.6.2
dev: false
engines:
node: '>=8.0.0'
node: '>= 0.6'
resolution:
integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
/avvio/7.2.2:
integrity: sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
/array-flatten/1.1.1:
dev: false
resolution:
integrity: sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
/body-parser/1.19.0:
dependencies:
archy: 1.0.0
debug: 4.3.2
fastq: 1.13.0
queue-microtask: 1.2.3
bytes: 3.1.0
content-type: 1.0.4
debug: 2.6.9
depd: 1.1.2
http-errors: 1.7.2
iconv-lite: 0.4.24
on-finished: 2.3.0
qs: 6.7.0
raw-body: 2.4.0
type-is: 1.6.18
dev: false
engines:
node: '>= 0.8'
resolution:
integrity: sha512-XW2CMCmZaCmCCsIaJaLKxAzPwF37fXi1KGxNOvedOpeisLdmxZnblGc3hpHWYnlP+KOUxZsazh43WXNHgXpbqw==
/balanced-match/1.0.2:
integrity: sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
/bytes/3.1.0:
dev: false
engines:
node: '>= 0.8'
resolution:
integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
/brace-expansion/1.1.11:
dependencies:
balanced-match: 1.0.2
concat-map: 0.0.1
dev: false
resolution:
integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
/concat-map/0.0.1:
dev: false
resolution:
integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
integrity: sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
/content-disposition/0.5.3:
dependencies:
safe-buffer: 5.1.2
@@ -75,32 +45,28 @@ packages:
node: '>= 0.6'
resolution:
integrity: sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
/cookie/0.4.1:
/content-type/1.0.4:
dev: false
engines:
node: '>= 0.6'
resolution:
integrity: sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
integrity: sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
/cookie-signature/1.0.6:
dev: false
resolution:
integrity: sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
/cookie/0.4.0:
dev: false
engines:
node: '>= 0.6'
resolution:
integrity: sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
/debug/2.6.9:
dependencies:
ms: 2.0.0
dev: false
resolution:
integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
/debug/4.3.2:
dependencies:
ms: 2.1.2
dev: false
engines:
node: '>=6.0'
resolution:
integrity: sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
/deepmerge/4.2.2:
dev: false
engines:
node: '>=0.10.0'
resolution:
integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
/depd/1.1.2:
dev: false
engines:
@@ -121,12 +87,6 @@ packages:
node: '>= 0.8'
resolution:
integrity: sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
/encoding-negotiator/2.0.1:
dev: false
engines:
node: '>=10.13.0'
resolution:
integrity: sha512-GSK7qphNR4iPcejfAlZxKDoz3xMhnspwImK+Af5WhePS9jUpK/Oh7rUdyENWu+9rgDflOCTmAojBsgsvM8neAQ==
/escape-html/1.0.3:
dev: false
resolution:
@@ -137,110 +97,57 @@ packages:
node: '>= 0.6'
resolution:
integrity: sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
/fast-decode-uri-component/1.0.1:
dev: false
resolution:
integrity: sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg==
/fast-deep-equal/3.1.3:
dev: false
resolution:
integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
/fast-json-stable-stringify/2.1.0:
dev: false
resolution:
integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
/fast-json-stringify/2.7.11:
dependencies:
ajv: 6.12.6
deepmerge: 4.2.2
rfdc: 1.3.0
string-similarity: 4.0.4
dev: false
engines:
node: '>= 10.0.0'
resolution:
integrity: sha512-J6rw31EvrT/PTZ4xi5Sf/NjYt5jF8tAPVzIi82qmfD4niAwBbHvUB99H6ipHWEaNQKXXpoyG7THBVsbVPo9prw==
/fast-redact/3.0.2:
dev: false
engines:
node: '>=6'
resolution:
integrity: sha512-YN+CYfCVRVMUZOUPeinHNKgytM1wPI/C/UCLEi56EsY2dwwvI00kIJHJoI7pMVqGoMew8SMZ2SSfHKHULHXDsg==
/fast-safe-stringify/2.1.1:
dev: false
resolution:
integrity: sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
/fastify-error/0.3.1:
dev: false
resolution:
integrity: sha512-oCfpcsDndgnDVgiI7bwFKAun2dO+4h84vBlkWsWnz/OUK9Reff5UFoFl241xTiLeHWX/vU9zkDVXqYUxjOwHcQ==
/fastify-formbody/5.1.0:
dependencies:
fastify-plugin: 3.0.0
dev: false
resolution:
integrity: sha512-dLFQ8gMQeLuV45J72svDbrp6CZ3hxsaiK2dd3vzoiCs9wEmCSbbJV+/afQl1cfvf19+NfCIzYVQIg1r4yO4Epw==
/fastify-plugin/3.0.0:
dev: false
resolution:
integrity: sha512-ZdCvKEEd92DNLps5n0v231Bha8bkz1DjnPP/aEz37rz/q42Z5JVLmgnqR4DYuNn3NXAO3IDCPyRvgvxtJ4Ym4w==
/fastify-static/4.5.0:
/express/4.17.1:
dependencies:
accepts: 1.3.7
array-flatten: 1.1.1
body-parser: 1.19.0
content-disposition: 0.5.3
encoding-negotiator: 2.0.1
fastify-plugin: 3.0.0
glob: 7.2.0
p-limit: 3.1.0
readable-stream: 3.6.0
send: 0.17.1
dev: false
resolution:
integrity: sha512-Q7Tgl55AjsmBwiO4hKYib2BUCt+XTWLJ6Xp8YPPHU3EsrKNpevJ4cz8pjf1Ey1QhHw9O8Y2FDKdu+IC74oHvqw==
/fastify-warning/0.2.0:
dev: false
resolution:
integrity: sha512-s1EQguBw/9qtc1p/WTY4eq9WMRIACkj+HTcOIK1in4MV5aFaQC9ZCIt0dJ7pr5bIf4lPpHvAtP2ywpTNgs7hqw==
/fastify/3.23.1:
dependencies:
'@fastify/ajv-compiler': 1.1.0
abstract-logging: 2.0.1
avvio: 7.2.2
fast-json-stringify: 2.7.11
fastify-error: 0.3.1
fastify-warning: 0.2.0
find-my-way: 4.3.3
flatstr: 1.0.12
light-my-request: 4.6.0
pino: 6.13.3
content-type: 1.0.4
cookie: 0.4.0
cookie-signature: 1.0.6
debug: 2.6.9
depd: 1.1.2
encodeurl: 1.0.2
escape-html: 1.0.3
etag: 1.8.1
finalhandler: 1.1.2
fresh: 0.5.2
merge-descriptors: 1.0.1
methods: 1.1.2
on-finished: 2.3.0
parseurl: 1.3.3
path-to-regexp: 0.1.7
proxy-addr: 2.0.7
rfdc: 1.3.0
secure-json-parse: 2.4.0
semver: 7.3.5
tiny-lru: 7.0.6
dev: false
resolution:
integrity: sha512-Y+HasdpVHpr96W+gLKJXuKBVA4ydXUoW4khGtCnsE9E6R1C4MXlg5x/m3shyeR3xTDZwPBwu39FlUIgjsyLhGw==
/fastq/1.13.0:
dependencies:
reusify: 1.0.4
dev: false
resolution:
integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
/find-my-way/4.3.3:
dependencies:
fast-decode-uri-component: 1.0.1
fast-deep-equal: 3.1.3
safe-regex2: 2.0.0
semver-store: 0.3.0
qs: 6.7.0
range-parser: 1.2.1
safe-buffer: 5.1.2
send: 0.17.1
serve-static: 1.14.1
setprototypeof: 1.1.1
statuses: 1.5.0
type-is: 1.6.18
utils-merge: 1.0.1
vary: 1.1.2
dev: false
engines:
node: '>=10'
node: '>= 0.10.0'
resolution:
integrity: sha512-5E4bRdaATB1MewjOCBjx4xvD205a4t2ripCnXB+YFhYEJ0NABtrcC7XLXLq0TPoFe/WYGUFqys3Qk3HCOGeNcw==
/flatstr/1.0.12:
integrity: sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
/finalhandler/1.1.2:
dependencies:
debug: 2.6.9
encodeurl: 1.0.2
escape-html: 1.0.3
on-finished: 2.3.0
parseurl: 1.3.3
statuses: 1.5.0
unpipe: 1.0.0
dev: false
engines:
node: '>= 0.8'
resolution:
integrity: sha512-4zPxDyhCyiN2wIAtSLI6gc82/EjqZc1onI4Mz/l0pWrAlsSfYH/2ZIcU+e3oA2wDwbzIWNKwa23F8rh6+DRWkw==
integrity: sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
/forwarded/0.2.0:
dev: false
engines:
@@ -253,39 +160,18 @@ packages:
node: '>= 0.6'
resolution:
integrity: sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
/fs.realpath/1.0.0:
dev: false
resolution:
integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
/glob/7.2.0:
/http-errors/1.7.2:
dependencies:
fs.realpath: 1.0.0
inflight: 1.0.6
inherits: 2.0.4
minimatch: 3.0.4
once: 1.4.0
path-is-absolute: 1.0.1
dev: false
resolution:
integrity: sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
/handlebars/4.7.7:
dependencies:
minimist: 1.2.5
neo-async: 2.6.2
source-map: 0.6.1
wordwrap: 1.0.0
depd: 1.1.2
inherits: 2.0.3
setprototypeof: 1.1.1
statuses: 1.5.0
toidentifier: 1.0.0
dev: false
engines:
node: '>=0.4.7'
hasBin: true
optionalDependencies:
uglify-js: 3.13.3
node: '>= 0.6'
resolution:
integrity: sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
/hashlru/2.3.0:
dev: false
resolution:
integrity: sha512-0cMsjjIC8I+D3M44pOQdsy0OHXGLVz6Z0beRuufhKa0KfaD2wGwAev6jILzXsd3/vpnNQJmWyZtIILqM1N+n5A==
integrity: sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
/http-errors/1.7.3:
dependencies:
depd: 1.1.2
@@ -298,13 +184,18 @@ packages:
node: '>= 0.6'
resolution:
integrity: sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
/inflight/1.0.6:
/iconv-lite/0.4.24:
dependencies:
once: 1.4.0
wrappy: 1.0.2
safer-buffer: 2.1.2
dev: false
engines:
node: '>=0.10.0'
resolution:
integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
/inherits/2.0.3:
dev: false
resolution:
integrity: sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
integrity: sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
/inherits/2.0.4:
dev: false
resolution:
@@ -315,31 +206,36 @@ packages:
node: '>= 0.10'
resolution:
integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
/json-schema-traverse/0.4.1:
dev: false
resolution:
integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
/json-schema-traverse/1.0.0:
dev: false
resolution:
integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
/light-my-request/4.6.0:
dependencies:
ajv: 8.6.3
cookie: 0.4.1
fastify-warning: 0.2.0
set-cookie-parser: 2.4.8
dev: false
resolution:
integrity: sha512-wQWGwMr7l7fzYPzzzutRoEI1vuREpIpJpTi3t8cHlGdsnBrOF5iR559Bkh+nkDGgnUJtNuuutjnqbxP7zPWKkA==
/lru-cache/6.0.0:
dependencies:
yallist: 4.0.0
/media-typer/0.3.0:
dev: false
engines:
node: '>=10'
node: '>= 0.6'
resolution:
integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
integrity: sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
/merge-descriptors/1.0.1:
dev: false
resolution:
integrity: sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
/methods/1.1.2:
dev: false
engines:
node: '>= 0.6'
resolution:
integrity: sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
/mime-db/1.51.0:
dev: false
engines:
node: '>= 0.6'
resolution:
integrity: sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==
/mime-types/2.1.34:
dependencies:
mime-db: 1.51.0
dev: false
engines:
node: '>= 0.6'
resolution:
integrity: sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==
/mime/1.6.0:
dev: false
engines:
@@ -347,16 +243,6 @@ packages:
hasBin: true
resolution:
integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
/minimatch/3.0.4:
dependencies:
brace-expansion: 1.1.11
dev: false
resolution:
integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
/minimist/1.2.5:
dev: false
resolution:
integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
/ms/2.0.0:
dev: false
resolution:
@@ -365,14 +251,12 @@ packages:
dev: false
resolution:
integrity: sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
/ms/2.1.2:
/negotiator/0.6.2:
dev: false
engines:
node: '>= 0.6'
resolution:
integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
/neo-async/2.6.2:
dev: false
resolution:
integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
integrity: sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
/on-finished/2.3.0:
dependencies:
ee-first: 1.1.1
@@ -381,50 +265,16 @@ packages:
node: '>= 0.8'
resolution:
integrity: sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
/once/1.4.0:
dependencies:
wrappy: 1.0.2
dev: false
resolution:
integrity: sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
/p-limit/3.1.0:
dependencies:
yocto-queue: 0.1.0
/parseurl/1.3.3:
dev: false
engines:
node: '>=10'
node: '>= 0.8'
resolution:
integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
/path-is-absolute/1.0.1:
dev: false
engines:
node: '>=0.10.0'
resolution:
integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
/pino-std-serializers/3.2.0:
integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
/path-to-regexp/0.1.7:
dev: false
resolution:
integrity: sha512-EqX4pwDPrt3MuOAAUBMU0Tk5kR/YcCM5fNPEzgCO2zJ5HfX0vbiH9HbJglnyeQsN96Kznae6MWD47pZB5avTrg==
/pino/6.13.3:
dependencies:
fast-redact: 3.0.2
fast-safe-stringify: 2.1.1
fastify-warning: 0.2.0
flatstr: 1.0.12
pino-std-serializers: 3.2.0
quick-format-unescaped: 4.0.4
sonic-boom: 1.4.1
dev: false
hasBin: true
resolution:
integrity: sha512-tJy6qVgkh9MwNgqX1/oYi3ehfl2Y9H0uHyEEMsBe74KinESIjdMrMQDWpcZPpPicg3VV35d/GLQZmo4QgU2Xkg==
/point-of-view/4.15.2:
dependencies:
fastify-plugin: 3.0.0
hashlru: 2.3.0
dev: false
resolution:
integrity: sha512-4HH/lJRBx8dzFjK5EiK+m459Bkw85GDuRnbk9qnxjQfUg0HYADQvJU73lLxZlHO2G4f9KvslOoTbdBx51mlDdg==
integrity: sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
/proxy-addr/2.0.7:
dependencies:
forwarded: 0.2.0
@@ -434,90 +284,37 @@ packages:
node: '>= 0.10'
resolution:
integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
/punycode/2.1.1:
/qs/6.7.0:
dev: false
engines:
node: '>=6'
node: '>=0.6'
resolution:
integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
/queue-microtask/1.2.3:
dev: false
resolution:
integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
/quick-format-unescaped/4.0.4:
dev: false
resolution:
integrity: sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==
integrity: sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
/range-parser/1.2.1:
dev: false
engines:
node: '>= 0.6'
resolution:
integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
/readable-stream/3.6.0:
/raw-body/2.4.0:
dependencies:
inherits: 2.0.4
string_decoder: 1.3.0
util-deprecate: 1.0.2
bytes: 3.1.0
http-errors: 1.7.2
iconv-lite: 0.4.24
unpipe: 1.0.0
dev: false
engines:
node: '>= 6'
node: '>= 0.8'
resolution:
integrity: sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
/require-from-string/2.0.2:
dev: false
engines:
node: '>=0.10.0'
resolution:
integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
/ret/0.2.2:
dev: false
engines:
node: '>=4'
resolution:
integrity: sha512-M0b3YWQs7R3Z917WRQy1HHA7Ba7D8hvZg6UE5mLykJxQVE2ju0IXbGlaHPPlkY+WN7wFP+wUMXmBFA0aV6vYGQ==
/reusify/1.0.4:
dev: false
engines:
iojs: '>=1.0.0'
node: '>=0.10.0'
resolution:
integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
/rfdc/1.3.0:
dev: false
resolution:
integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
integrity: sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
/safe-buffer/5.1.2:
dev: false
resolution:
integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
/safe-buffer/5.2.1:
/safer-buffer/2.1.2:
dev: false
resolution:
integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
/safe-regex2/2.0.0:
dependencies:
ret: 0.2.2
dev: false
resolution:
integrity: sha512-PaUSFsUaNNuKwkBijoAPHAK6/eM6VirvyPWlZ7BAQy4D+hCvh4B6lIG+nPdhbFfIbP+gTGBcrdsOaUs0F+ZBOQ==
/secure-json-parse/2.4.0:
dev: false
resolution:
integrity: sha512-Q5Z/97nbON5t/L/sH6mY2EacfjVGwrCcSi5D3btRO2GZ8pf1K1UN7Z9H5J57hjVU2Qzxr1xO+FmBhOvEkzCMmg==
/semver-store/0.3.0:
dev: false
resolution:
integrity: sha512-TcZvGMMy9vodEFSse30lWinkj+JgOBvPn8wRItpQRSayhc+4ssDs335uklkfvQQJgL/WvmHLVj4Ycv2s7QCQMg==
/semver/7.3.5:
dependencies:
lru-cache: 6.0.0
dev: false
engines:
node: '>=10'
hasBin: true
resolution:
integrity: sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
/send/0.17.1:
dependencies:
debug: 2.6.9
@@ -538,97 +335,62 @@ packages:
node: '>= 0.8.0'
resolution:
integrity: sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
/set-cookie-parser/2.4.8:
/serve-static/1.14.1:
dependencies:
encodeurl: 1.0.2
escape-html: 1.0.3
parseurl: 1.3.3
send: 0.17.1
dev: false
engines:
node: '>= 0.8.0'
resolution:
integrity: sha512-edRH8mBKEWNVIVMKejNnuJxleqYE/ZSdcT8/Nem9/mmosx12pctd80s2Oy00KNZzrogMZS5mauK2/ymL1bvlvg==
integrity: sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
/setprototypeof/1.1.1:
dev: false
resolution:
integrity: sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
/sonic-boom/1.4.1:
dependencies:
atomic-sleep: 1.0.0
flatstr: 1.0.12
dev: false
resolution:
integrity: sha512-LRHh/A8tpW7ru89lrlkU4AszXt1dbwSjVWguGrmlxE7tawVmDBlI1PILMkXAxJTwqhgsEeTHzj36D5CmHgQmNg==
/source-map/0.6.1:
dev: false
engines:
node: '>=0.10.0'
resolution:
integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
/statuses/1.5.0:
dev: false
engines:
node: '>= 0.6'
resolution:
integrity: sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
/string-similarity/4.0.4:
dev: false
resolution:
integrity: sha512-/q/8Q4Bl4ZKAPjj8WerIBJWALKkaPRfrvhfF8k/B23i4nzrlRj2/go1m90In7nG/3XDSbOo0+pu6RvCTM9RGMQ==
/string_decoder/1.3.0:
dependencies:
safe-buffer: 5.2.1
dev: false
resolution:
integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
/tiny-lru/7.0.6:
dev: false
engines:
node: '>=6'
resolution:
integrity: sha512-zNYO0Kvgn5rXzWpL0y3RS09sMK67eGaQj9805jlK9G6pSadfriTczzLHFXa/xcW4mIRfmlB9HyQ/+SgL0V1uow==
/toidentifier/1.0.0:
dev: false
engines:
node: '>=0.6'
resolution:
integrity: sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
/uglify-js/3.13.3:
dev: false
engines:
node: '>=0.8.0'
hasBin: true
optional: true
resolution:
integrity: sha512-otIc7O9LyxpUcQoXzj2hL4LPWKklO6LJWoJUzNa8A17Xgi4fOeDC8FBDOLHnC/Slo1CQgsZMcM6as0M76BZaig==
/uri-js/4.4.1:
/type-is/1.6.18:
dependencies:
punycode: 2.1.1
dev: false
resolution:
integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
/util-deprecate/1.0.2:
dev: false
resolution:
integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
/wordwrap/1.0.0:
dev: false
resolution:
integrity: sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
/wrappy/1.0.2:
dev: false
resolution:
integrity: sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
/yallist/4.0.0:
dev: false
resolution:
integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
/yocto-queue/0.1.0:
media-typer: 0.3.0
mime-types: 2.1.34
dev: false
engines:
node: '>=10'
node: '>= 0.6'
resolution:
integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
/unpipe/1.0.0:
dev: false
engines:
node: '>= 0.8'
resolution:
integrity: sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
/utils-merge/1.0.1:
dev: false
engines:
node: '>= 0.4.0'
resolution:
integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
/vary/1.1.2:
dev: false
engines:
node: '>= 0.8'
resolution:
integrity: sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
registry: 'https://registry.npmjs.org/'
shrinkwrapMinorVersion: 9
shrinkwrapVersion: 3
specifiers:
fastify: ^3.23.1
fastify-formbody: ^5.1.0
fastify-static: ^4.5.0
handlebars: ^4.7.7
point-of-view: ^4.15.2
express: ^4.17.1
-150
View File
@@ -1,150 +0,0 @@
{
"aliceblue": "#f0f8ff",
"antiquewhite": "#faebd7",
"aqua": "#00ffff",
"aquamarine": "#7fffd4",
"azure": "#f0ffff",
"beige": "#f5f5dc",
"bisque": "#ffe4c4",
"black": "#000000",
"blanchedalmond": "#ffebcd",
"blue": "#0000ff",
"blueviolet": "#8a2be2",
"brown": "#a52a2a",
"burlywood": "#deb887",
"cadetblue": "#5f9ea0",
"chartreuse": "#7fff00",
"chocolate": "#d2691e",
"coral": "#ff7f50",
"cornflowerblue": "#6495ed",
"cornsilk": "#fff8dc",
"crimson": "#dc143c",
"cyan": "#00ffff",
"darkblue": "#00008b",
"darkcyan": "#008b8b",
"darkgoldenrod": "#b8860b",
"darkgray": "#a9a9a9",
"darkgreen": "#006400",
"darkgrey": "#a9a9a9",
"darkkhaki": "#bdb76b",
"darkmagenta": "#8b008b",
"darkolivegreen": "#556b2f",
"darkorange": "#ff8c00",
"darkorchid": "#9932cc",
"darkred": "#8b0000",
"darksalmon": "#e9967a",
"darkseagreen": "#8fbc8f",
"darkslateblue": "#483d8b",
"darkslategray": "#2f4f4f",
"darkslategrey": "#2f4f4f",
"darkturquoise": "#00ced1",
"darkviolet": "#9400d3",
"deeppink": "#ff1493",
"deepskyblue": "#00bfff",
"dimgray": "#696969",
"dimgrey": "#696969",
"dodgerblue": "#1e90ff",
"firebrick": "#b22222",
"floralwhite": "#fffaf0",
"forestgreen": "#228b22",
"fuchsia": "#ff00ff",
"gainsboro": "#dcdcdc",
"ghostwhite": "#f8f8ff",
"goldenrod": "#daa520",
"gold": "#ffd700",
"gray": "#808080",
"green": "#008000",
"greenyellow": "#adff2f",
"grey": "#808080",
"honeydew": "#f0fff0",
"hotpink": "#ff69b4",
"indianred": "#cd5c5c",
"indigo": "#4b0082",
"ivory": "#fffff0",
"khaki": "#f0e68c",
"lavenderblush": "#fff0f5",
"lavender": "#e6e6fa",
"lawngreen": "#7cfc00",
"lemonchiffon": "#fffacd",
"lightblue": "#add8e6",
"lightcoral": "#f08080",
"lightcyan": "#e0ffff",
"lightgoldenrodyellow": "#fafad2",
"lightgray": "#d3d3d3",
"lightgreen": "#90ee90",
"lightgrey": "#d3d3d3",
"lightpink": "#ffb6c1",
"lightsalmon": "#ffa07a",
"lightseagreen": "#20b2aa",
"lightskyblue": "#87cefa",
"lightslategray": "#778899",
"lightslategrey": "#778899",
"lightsteelblue": "#b0c4de",
"lightyellow": "#ffffe0",
"lime": "#00ff00",
"limegreen": "#32cd32",
"linen": "#faf0e6",
"magenta": "#ff00ff",
"maroon": "#800000",
"mediumaquamarine": "#66cdaa",
"mediumblue": "#0000cd",
"mediumorchid": "#ba55d3",
"mediumpurple": "#9370db",
"mediumseagreen": "#3cb371",
"mediumslateblue": "#7b68ee",
"mediumspringgreen": "#00fa9a",
"mediumturquoise": "#48d1cc",
"mediumvioletred": "#c71585",
"midnightblue": "#191970",
"mintcream": "#f5fffa",
"mistyrose": "#ffe4e1",
"moccasin": "#ffe4b5",
"navajowhite": "#ffdead",
"navy": "#000080",
"oldlace": "#fdf5e6",
"olive": "#808000",
"olivedrab": "#6b8e23",
"orange": "#ffa500",
"orangered": "#ff4500",
"orchid": "#da70d6",
"palegoldenrod": "#eee8aa",
"palegreen": "#98fb98",
"paleturquoise": "#afeeee",
"palevioletred": "#db7093",
"papayawhip": "#ffefd5",
"peachpuff": "#ffdab9",
"peru": "#cd853f",
"pink": "#ffc0cb",
"plum": "#dda0dd",
"powderblue": "#b0e0e6",
"purple": "#800080",
"rebeccapurple": "#663399",
"red": "#ff0000",
"rosybrown": "#bc8f8f",
"royalblue": "#4169e1",
"saddlebrown": "#8b4513",
"salmon": "#fa8072",
"sandybrown": "#f4a460",
"seagreen": "#2e8b57",
"seashell": "#fff5ee",
"sienna": "#a0522d",
"silver": "#c0c0c0",
"skyblue": "#87ceeb",
"slateblue": "#6a5acd",
"slategray": "#708090",
"slategrey": "#708090",
"snow": "#fffafa",
"springgreen": "#00ff7f",
"steelblue": "#4682b4",
"tan": "#d2b48c",
"teal": "#008080",
"thistle": "#d8bfd8",
"tomato": "#ff6347",
"turquoise": "#40e0d0",
"violet": "#ee82ee",
"wheat": "#f5deb3",
"white": "#ffffff",
"whitesmoke": "#f5f5f5",
"yellow": "#ffff00",
"yellowgreen": "#9acd32"
}
-137
View File
@@ -1,137 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!--
This is the main Handlebars template for the site
- When the user visits the homepage or submits a color the app calls the endpoints in server.js
- The server script passes data in here and the Handlebars code builds it into the HTML page
-->
<meta charset="utf-8" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{seo.title}}</title>
<!-- Meta tags for SEO and social sharing -->
<link rel="canonical" href="{{seo.url}}">
<meta name="description" content="{{seo.description}}">
<meta property="og:title" content="{{seo.title}}">
<meta property="og:type" content="article">
<meta property="og:url" content="{{seo.url}}">
<meta property="og:description" content="{{seo.description}}">
<meta property="og:image" content="{{seo.image}}">
<meta name="twitter:card" content="summary">
<!-- Import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css" />
<!-- This is a handlebars IF statement
Checking for a custom "color" parameter from server.js -->
{{#if color}}
<!-- If there is a color value, update the style for the page title -->
<style>
.title {
color: {{color}};
}
</style>
{{/if}}
</head>
<body>
<div class="wrapper">
<div class="content" role="main">
<!-- This is the start of content for our page -->
<h1 class="title">Hello Node!</h1>
<!-- Add text indicating that we've changed color OR had an error -->
{{#if color}}
<p class="color-info">
Now available in <b>{{color}}</b>!
</p>
{{/if}}
{{#if colorError}}
<p class="color-info">
<!-- The server script passes colorError if the user submission can't be matched -->
Hmm. Couldn't find <b>"{{colorError}}"</b>.
<a href="?randomize=go">Try a random color?</a>
</p>
{{/if}}
<div class="color-form">
<!-- Our default paragraph/message -->
{{#unless colorError}}
{{#unless color}}
<!-- There are fancier ways to do this,
but nesting two "#unless" statements sets up an
"if these are both missing..." condition -->
<p>
Learn about communication with a server by talking about color.
</p>
{{/unless}}
{{/unless}}
<!-- The "What's your favorite color?" form sends a POST request to the server
Check server.js to see how it works -->
<form class="color-search" method="post">
<label for="color">
<!-- We use the handlebars "#if" statement so the form can adapt to its situation -->
{{#if color}}
Try another color?<br>
{{else}}
What's your favorite color?<br>
{{/if}}
<input id="color" name="color" required="required" type="text">
</label>
<!-- If the user submits a value through the form
it'll be passed to the server in the request body -->
<button type="submit">Submit</button>
</form>
<!-- This randomize link communicates with the server (server.js)
using a querystring and GET request instead of a form POST -->
Can't decide? <a href="?randomize=go">Use a random color!</a>
</div>
<div class="illo-container">
<img src="https://cdn.glitch.com/c62efef6-1e75-45cf-b248-afeccdda9477%2Fillustration.svg?v=1618196069568" class="illustration" alt="Node logo" />
</div>
<!-- Instructions on using this project -->
<div class="instructions">
<h2>
Using this project
</h2>
<p>
This is the Glitch <strong>Hello Node</strong> project. You can
use it to build your own app. Check out README.md in the editor for
more info and next steps you can take!
</p>
</div>
</div>
</div>
<!-- The footer holds our remix button — you can use it for structure or cut it out ✂ -->
<footer class="footer">
<div class="links"></div>
<a
class="btn--remix"
target="_top"
href="https://glitch.com/edit/#!/remix/glitch-hello-node"
>
<img
src="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FLogo_Color.svg?v=1618199565140"
alt=""
/>
Remix on Glitch
</a>
</footer>
</body>
</html>
-7
View File
@@ -1,7 +0,0 @@
{
"glitch-help-instructions": "For a custom domain, change the 'url' parameter from 'glitch-default' to your domain _without_ a traling slash, like 'https://www.example.com'",
"title": "Hello Node!",
"description": "A simple Node site built with Glitch. Remix it to get your own.",
"url": "glitch-default",
"image": "https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fhello-node-social.png?v=1618161394375"
}