Skip to content

Commit

Permalink
Merge pull request BootstrapDash#1 from netlify/revengers-demo
Browse files Browse the repository at this point in the history
Revengers demo
  • Loading branch information
biilmann authored Apr 9, 2019
2 parents 4e27eea + b495c1c commit 4528c4c
Show file tree
Hide file tree
Showing 6 changed files with 341 additions and 1,524 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"version": "0.1.0",
"author": "Kyle Mathews <[email protected]>",
"dependencies": {
"faunadb": "^2.6.1",
"gatsby": "^2.3.5",
"gatsby-image": "^2.0.37",
"gatsby-plugin-manifest": "^2.0.26",
Expand Down
36 changes: 36 additions & 0 deletions scripts/finger-snap.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
#!/usr/bin/env node

/* Import faunaDB sdk */
const faunadb = require("faunadb")

const q = faunadb.query
const client = new faunadb.Client({
secret: process.env.FAUNADB_SERVER_SECRET,
})

console.log("Adjusting the gauntlet…")

client
.query(q.Paginate(q.Match(q.Ref("indexes/all_items"))))
.then(response => {
const itemRefs = response.data
const getAllItemsDataQuery = itemRefs.map(ref => {
return q.Get(ref)
})
console.log("Admiring infinity stones first…")
return client.query(getAllItemsDataQuery).then(ret => {
Promise.all(
ret.map(el => {
if (Math.random() >= 0.5) {
return null
}
return client
.query(q.Delete(q.Ref(`classes/items/${el.ref.id}`)))
.then(response => {
console.log(`Message from ${el.data.name}: I don't feel so good…`)
})
})
).then(() => console.log(`_silence_`))
})
})
.catch(e => console.error(e))
193 changes: 193 additions & 0 deletions src/components/layout.css
Original file line number Diff line number Diff line change
Expand Up @@ -116,3 +116,196 @@ button:focus {
color: #fff;
cursor: pointer;
}

/* Revengers micro-site */

.revengers {
position: absolute;
width: 100vw;
min-height: 100vh;
background-color: #050509;
background-image:
linear-gradient(-180deg, rgba(7,7,7,0.77) 0%, rgba(7,7,7,0.55) 16%, rgba(14,30,37,0.50) 100%),
url(https://images.unsplash.com/photo-1519810755548-39cd217da494?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2734&q=80);
background-size: cover;
overflow: hidden;
}

.chicken-wrap {
width: 90%;
max-width: 600px;
margin: auto;
}

.revengers-title {
text-align: center;
margin: 64px auto;
}

.revengers-title img {
width: 100%;
max-width: 438px;
}
.revengers-title h2 {
display: inline-block;
font-size: 22px;
color: white;
border-top: solid 4px #AD2831;
border-bottom: solid 4px #AD2831;
padding: 8px;
}

.revengers .msg {
margin-top: 40px;
}

.revengers .msg div {
position: relative;
}

.revengers .msg p,
.revengers .msg-author,
.revengers input,
.revengers textarea,
.submit-btn {
position: relative;
background: #FFFFFF;
border: 3px solid #000000;
font-weight: 500;
color: #050509;
}

.revengers .msg p {
border-radius: 54px 54px 0 54px;
font-size: 22px;
z-index: 1;
padding: 16px 50px;
}

.revengers .msg p:before {
content: " ";
position: absolute;
z-index: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid #AD2831;
border-radius: 54px 54px 0 54px;
}

.msg-author {
position: relative;
top: -24px;
right: -4px;
margin: 5px;
background: #D7D7D7;
border: 3px solid #000000;
border-radius: 8px;
font-size: 18px;
font-weight: 500;
padding: 4px 8px;
color: #050509;
z-index: 2;
width: auto;
float: right;
}

.msg-author:before {
content: " ";
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid #AD2831;
border-radius: 4px;
}
.guestbook-form {
margin-top: 104px;
border-top: 4px;
border-top: solid 4px #AD2831;
padding-top: 40px;
}

.revengers input,
.revengers textarea,
.submit-btn {
font-size: 22px;
padding: 16px;
margin-bottom: 16px;
border-radius: 8px;
max-width: 600px;
box-sizing: border-box;
}

form label {
position: relative;
display: inline-block;
margin: 0;
top: 2px;
background: #050509;
float: left;
color: white;
border-radius: 8px 8px 0 0;
font-size: 18px;
font-weight: 500;
padding: 4px 8px;
z-index: 2;
width: auto;
}

.submit-btn {
margin: 0;
color: white;
font-size: 22px;
font-weight: 600;
border-radius: 12px;
width: 100%;
background: #81040C;
}

.submit-btn::after {
content: " ";
position: absolute;
z-index: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid #D37200;
border-radius: 8px;
}

.submit-btn:hover,
.submit-btn:focus {
background: #D37200;
}

.delete-btn {
visibility: hidden;
content: "";
position: absolute;
top: -16px;
left: 16px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #81040C;
border: 2px solid #000;
padding: 0;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij4gIDxwYXRoIGZpbGw9IiNBRDI4MzEiIGQ9Ik04LDE1IEM0LjEzNDAwNjc1LDE1IDEsMTEuODY1OTkzMiAxLDggQzEsNC4xMzQwMDY3NSA0LjEzNDAwNjc1LDEgOCwxIEMxMS44NjU5OTMyLDEgMTUsNC4xMzQwMDY3NSAxNSw4IEMxNSwxMS44NjU5OTMyIDExLjg2NTk5MzIsMTUgOCwxNSBaIE0xMC40NDM1MiwxMC43MjMzMTA1IEwxMC40NTI4Mjk2LDEwLjczMjYyMDEgTDEwLjczMjYyMDEsMTAuNDUyODI5NiBDMTEuMDMxMDYzMiwxMC4xNTQzODY1IDExLjAzMTQ5ODYsOS42Njk4NTE3MSAxMC43MzM1OTEyLDkuMzcxOTQ0MzcgTDkuMzY1MDc5MzcsOC4wMDM0MzI1IEwxMC43MzYwNTI2LDYuNjMyNDU5MjggQzExLjAzNDQ5NTcsNi4zMzQwMTYxMyAxMS4wMzQ5MzExLDUuODQ5NDgxMzUgMTAuNzM3MDIzNyw1LjU1MTU3NDAxIEwxMC40NDg0MjYsNS4yNjI5NzYyNyBDMTAuMTUwNTE4Niw0Ljk2NTA2ODkyIDkuNjY1OTgzODcsNC45NjU1MDQyNiA5LjM2NzU0MDcyLDUuMjYzOTQ3NDEgTDguMDA1ODkzODUsNi42MjU1OTQyOCBMNi42MzczODE5OCw1LjI1NzA4MjQxIEM2LjMzOTQ3NDY0LDQuOTU5MTc1MDcgNS44NTQ5Mzk4Niw0Ljk1OTYxMDQxIDUuNTU2NDk2NzEsNS4yNTgwNTM1NiBMNS4yNjczNzk5MSw1LjU0NzE3MDM2IEM0Ljk2ODkzNjc2LDUuODQ1NjEzNTEgNC45Njg1MDE0Miw2LjMzMDE0ODI5IDUuMjY2NDA4NzYsNi42MjgwNTU2MyBMNi42MjU2MTEwMyw3Ljk4NzI1NzkgTDUuMjU0NjM3ODEsOS4zNTgyMzExMiBDNC45NTYxOTQ2Niw5LjY1NjY3NDI3IDQuOTU1NzU5MzIsMTAuMTQxMjA5IDUuMjUzNjY2NjYsMTAuNDM5MTE2NCBMNS41NDIyNjQ0LDEwLjcyNzcxNDEgQzUuODQwMTcxNzUsMTEuMDI1NjIxNSA2LjMyNDcwNjUyLDExLjAyNTE4NjEgNi42MjMxNDk2NywxMC43MjY3NDMgTDcuOTk0MTIyODksOS4zNTU3Njk3NiBMOS4zNjI2MzQ3NiwxMC43MjQyODE2IEM5LjY2MDU0MjExLDExLjAyMjE4OSAxMC4xNDUwNzY5LDExLjAyMTc1MzYgMTAuNDQzNTIsMTAuNzIzMzEwNSBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMSAtMSkiLz48L3N2Zz4=);
background-size: 100% 100%;
background-color: #fff;
z-index: 99;
}

.delete-btn:hover {
background-color: #fff;
transform: scale(1.1);
}

.msg:hover .delete-btn {
visibility: visible;
}
94 changes: 53 additions & 41 deletions src/pages/guestbook.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react"

import Layout from "../components/layout"
import { withPrefix } from "gatsby"

const GuestbookPage = () => {
const [messages, setMessages] = useState(null)
Expand Down Expand Up @@ -34,51 +34,63 @@ const GuestbookPage = () => {
poll()
return () => (polling = false)
}, [])

return (
<Layout>
<h1>Guestbook!</h1>
<div className="revengers">
<div className="chicken-wrap">
<div className="revengers-title">
<img src={withPrefix("/[email protected]")} alt="Logo" />
<h2>A messaging app for super-villains</h2>
</div>

{messages === null && <div>Loading guestbook...</div>}
{messages &&
messages.map(message => (
<div className="msg" key={message.ts}>
<h2>{message.data.name}</h2>
<div>
{message.data.message.split(/\n/).map((line, i) => (
<p key={i}>{line}</p>
))}
{messages === null && <div>Loading guestbook...</div>}
{messages &&
(["BadRequest", "Unauthorized"].includes(messages.name) ? (
<div style={{ border: "1px solid red", color: "yellow" }}>
Bad/Unauthorized Request - you may have forgotten to setup your
Fauna DB addon (<pre>netlify addons:create fauna</pre>) and run{" "}
<pre>netlify dev:exec functions/fauna/create-schema.js</pre>
</div>
</div>
))}
) : (
messages.map(message => (
<div className="msg" key={message.ts}>
<div>
<p>{message.data.message.trim()}</p>
</div>
<h2 className="msg-author">{message.data.name}</h2>
</div>
))
))}

<div>
<form className="guestbook-form" onSubmit={submit}>
<div className="form-control">
<label>Your name:</label>
<input
type="text"
value={message.name}
onChange={e => setMessage({ ...message, name: e.target.value })}
/>
</div>
<div className="form-control">
<label>Your message:</label>
<textarea
value={message.message}
onChange={e =>
setMessage({ ...message, message: e.target.value })
}
/>
</div>
<div className="form-control">
<button type="submit" disabled={saving}>
{saving ? "Submitting..." : "Submit"}
</button>
</div>
</form>
<div>
<form className="guestbook-form" onSubmit={submit}>
<div className="form-control">
<label>Your evil name:</label>
<input
type="text"
value={message.name}
required
onChange={e => setMessage({ ...message, name: e.target.value })}
/>
</div>
<div className="form-control">
<label>Your evil message:</label>
<textarea
value={message.message}
required
onChange={e =>
setMessage({ ...message, message: e.target.value })
}
/>
</div>
<div className="form-control">
<button className="submit-btn" type="submit" disabled={saving}>
{saving ? "Sending..." : "SEND MESSAGE, in a evil way"}
</button>
</div>
</form>
</div>
</div>
</Layout>
</div>
)
}

Expand Down
Binary file added static/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 4528c4c

Please sign in to comment.