├── .gitignore
├── utils
    └── prismic-client.js
├── package.json
├── _data
    └── glossary.js
├── index.md
├── netlify.toml
├── _includes
    └── default.njk
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | _site
3 | 
4 | # Local Netlify folder
5 | .netlify


--------------------------------------------------------------------------------
/utils/prismic-client.js:
--------------------------------------------------------------------------------
1 | const Prismic = require('@prismicio/client');
2 | 
3 | const options = {
4 |   // accessToken:
5 | };
6 | 
7 | exports.client = Prismic.client('http://drasnerd.prismic.io/api', options);
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "drasnerd.com",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build": "eleventy",
 8 |     "dev": "eleventy --serve"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "ISC",
13 |   "dependencies": {
14 |     "@prismicio/client": "^4.0.0",
15 |     "bulma": "^0.9.2"
16 |   },
17 |   "devDependencies": {
18 |     "@11ty/eleventy": "^0.12.1"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/_data/glossary.js:
--------------------------------------------------------------------------------
 1 | // const { client } = require('../utils/prismic-client');
 2 | 
 3 | const { client } = require('../utils/prismic-client');
 4 | 
 5 | module.exports = async () => {
 6 |   const result = await client.query('');
 7 | 
 8 |   // hard-code getting the page
 9 |   const page = result.results[0];
10 |   const data = page.data.page;
11 |   const title = data.title.value[0].text;
12 | 
13 |   const terms = data.body.value
14 |     .filter((entry) => {
15 |       return entry.slice_type === 'glossary_term';
16 |     })
17 |     .map((slice) => {
18 |       const fields = slice['non-repeat'];
19 |       return {
20 |         term: fields.term.value[0].text,
21 |         definition: fields.definition.value[0].text,
22 |       };
23 |     });
24 | 
25 |   return {
26 |     title,
27 |     terms,
28 |   };
29 | };
30 | 


--------------------------------------------------------------------------------
/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default.njk
 3 | title: Drasnerd
 4 | ---
 5 | 
 6 | <style>
 7 |   .glossary-container {
 8 |     align-items: flex-start;
 9 |     display: flex;
10 |     flex-wrap: wrap;
11 |     gap: 1rem;
12 |     justify-content: space-between;
13 |   }
14 | 
15 |   .glossary-term {
16 |     background: #eee;
17 |     border-radius: 1rem;
18 |     margin: 0;
19 |     padding: 1rem;
20 |     width: calc(33% - 1rem);
21 |   }
22 | </style>
23 | 
24 | <h1 class="title">{{ glossary.title }}</h1>
25 | 
26 | <div class="glossary-container">
27 | {% for term in glossary.terms %}
28 | 
29 | <article class="glossary-term">
30 |  <div class="content">
31 |   <h2 class="title">{{ term.term }}</h2>
32 |   <div class="content">
33 |     <p>{{term.definition}}</p>
34 |   </div>
35 |  </div>
36 | </article>
37 | 
38 | {% endfor %}
39 | </div>
40 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | # example netlify.toml
 2 | [build]
 3 |   command = "npm run build"
 4 |   functions = "netlify/functions"
 5 |   publish = "_site"
 6 | 
 7 |   ## Uncomment to use this redirect for Single Page Applications like create-react-app.
 8 |   ## Not needed for static site generators.
 9 |   #[[redirects]]
10 |   #  from = "/*"
11 |   #  to = "/index.html"
12 |   #  status = 200
13 | 
14 |   ## (optional) Settings for Netlify Dev
15 |   ## https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection
16 |   #[dev]
17 |   #  command = "yarn start" # Command to start your dev server
18 |   #  port = 3000 # Port that the dev server will be listening on
19 |   #  publish = "dist" # Folder with the static content for _redirect file
20 | 
21 |   ## more info on configuring this file: https://www.netlify.com/docs/netlify-toml-reference/
22 | 


--------------------------------------------------------------------------------
/_includes/default.njk:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>{{ title }}</title>
 8 | 
 9 |     <style>
10 |       * {
11 |         box-sizing: border-box;
12 |         margin: 0;
13 |       }
14 | 
15 |       * + * {
16 |         margin-top: 1rem;
17 |       }
18 | 
19 |       body {
20 |         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
21 |           Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
22 |           'Segoe UI Symbol';
23 |         margin: 0;
24 |       }
25 | 
26 |       h1 {
27 |         text-align: center;
28 |       }
29 | 
30 |       .section {
31 |         margin: 4rem auto;
32 |         max-width: 90vw;
33 |       }
34 |     </style>
35 |   </head>
36 |   <body>
37 |     <div class="section">
38 |       {{ content | safe }}
39 |     </div>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <a href="https://www.learnwithjason.dev">
 3 |     <img src="https://res.cloudinary.com/jlengstorf/image/upload/q_auto,f_auto,w_240/v1579281727/lwj/learnwithjason.png" alt="Learn With Jason" width="120" />
 4 |   </a>
 5 | </p>
 6 | <h1 align="center">
 7 |   Troll Your Boss With The Jamstack (with Cassidy Williams)
 8 | </h1>
 9 | <h3 align="center">
10 |   This app was built live on <em>Learn With Jason</em> and it was super fun and I’m sad you weren’t there.
11 | </h3>
12 | <p align="center">
13 |   But don’t worry! You can still: 
14 |   <a href="https://www.learnwithjason.dev/troll-your-boss-with-the-jamstack"><strong>watch the video</strong></a> · 
15 |   <a href="https://drasnerd.com"><strong>see the demo</strong></a> · 
16 |   <a href="https://app.netlify.com/start/deploy?repository=https://github.com/learnwithjason/drasnerd.com&utm_source=learnwithjason&utm_medium=github&utm_campaign=devex"><strong>deploy this project</strong></a> · 
17 |   <a href="https://jason.af/lwj/schedule"><strong>see upcoming episodes</strong></a>
18 | </p>
19 | 
20 | &nbsp;
21 | 
22 | How fast can two cyberspace hooligans build an app to troll their boss? Tune in and find out as Cassidy Williams and Jason Lengstorf drag Sarah Drasner in app form!
23 | 
24 | &nbsp;
25 | 
26 | ## More Information
27 | 
28 | - [Watch this app get built live + see links and additional resources][episode]
29 | - [Follow _Learn With Jason_ on Twitch][twitch] to watch future episodes live
30 | - [Add the _Learn With Jason_ schedule to your Google Calendar][cal]
31 | 
32 | &nbsp;
33 | <p align="center">
34 |   <a href="https://app.netlify.com/start/deploy?repository=https://github.com/learnwithjason/drasnerd.com&utm_source=learnwithjason&utm_medium=github&utm_campaign=devex">
35 |     <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy this project to Netlify" />
36 |   </a>
37 | </p>
38 | 
39 | [episode]: https://www.learnwithjason.dev/troll-your-boss-with-the-jamstack
40 | [twitch]: https://jason.af/twitch
41 | [cal]: https://jason.af/lwj/cal


--------------------------------------------------------------------------------