├── .eleventy.js ├── .gitignore ├── README.md ├── package-lock.json ├── package.json └── src ├── _data └── stargazers.js ├── _includes └── pet.html ├── cats ├── cats.json ├── dash.md ├── mesa.md ├── senor.md ├── tuna.md └── violet.md ├── css └── style.css ├── dogs ├── annie.md ├── chewie.md ├── dogs.json ├── jazz.md ├── max.md ├── mia.md ├── monaco.md ├── rocky.md └── scout.md └── index.html /.eleventy.js: -------------------------------------------------------------------------------- 1 | module.exports = function(eleventyConfig) { 2 | 3 | eleventyConfig.addPassthroughCopy('src/css'); 4 | 5 | return { 6 | dir: { 7 | input: 'src' 8 | } 9 | }; 10 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | _site 3 | # Local Netlify folder 4 | .netlify -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ReactJS Dallas: The Beginner's Guide to Eleventy 2 | 3 | ## Setup and Running the Project 4 | 5 | ```bash 6 | git clone https://github.com/BenDMyers/ReactJSDallas_Beginners_Guide_to_Eleventy.git 7 | cd ReactJSDallas_Beginners_Guide_to_Eleventy 8 | npm install 9 | npm run dev 10 | ``` 11 | 12 | ## Who am I? 13 | 14 | - [Ben Myers](https://benmyers.dev) 15 | - [Twitter](https://twitter.com/BenDMyers) 16 | - [LinkedIn](https://linkedin.com/in/BenDMyers) 17 | - [Weekly accessibility streams](https://twitch.tv/SomeAnticsDev) 18 | 19 | ## What is Eleventy? 20 | 21 | [Eleventy](https://11ty.dev) is a *static site generator* that allows you to use powerful templating languages to build websites. 22 | 23 | This is going to feel pretty different from web *apps* you might have built before, and that's okay! 24 | 25 | ## The Plan 26 | 27 | **Today, we're making a site to show off *your* excellent pets!** 28 | 29 | - [X] Solicit pets. 30 | - [X] Initialize an Eleventy project 31 | - [X] Create a template and add a layout 32 | - [X] Create more templates 33 | - [X] Add some data 34 | - [X] Global data 35 | - [X] Host on Netlify -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactjsdallas_beginners_guide_to_eleventy", 3 | "version": "1.0.0", 4 | "description": "## Who am I?", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "eleventy", 8 | "dev": "eleventy --serve" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/BenDMyers/ReactJSDallas_Beginners_Guide_to_Eleventy.git" 13 | }, 14 | "keywords": [], 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/BenDMyers/ReactJSDallas_Beginners_Guide_to_Eleventy/issues" 19 | }, 20 | "homepage": "https://github.com/BenDMyers/ReactJSDallas_Beginners_Guide_to_Eleventy#readme", 21 | "dependencies": { 22 | "@11ty/eleventy": "^0.12.1", 23 | "node-fetch": "^2.6.1" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/_data/stargazers.js: -------------------------------------------------------------------------------- 1 | const fetch = require('node-fetch'); 2 | 3 | module.exports = function() { 4 | return fetch('https://api.github.com/repos/BenDMyers/ReactJSDallas_Beginners_Guide_to_Eleventy/stargazers') 5 | .then(res => res.json()) 6 | .then(res => res.map(stargazer => stargazer.login)); 7 | } -------------------------------------------------------------------------------- /src/_includes/pet.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{ petName }} | Pets of ReactJS Dallas 8 | 9 | 10 | 11 |
12 | Pets of ReactJS Dallas 13 |
14 |
15 | {{ petName }} 20 |

{{ petName }}

21 | Owner: {{ owner}} 22 | 23 | {{ content }} 24 |
25 | 28 | 29 | -------------------------------------------------------------------------------- /src/cats/cats.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "pet.html", 3 | "tags": "cats" 4 | } -------------------------------------------------------------------------------- /src/cats/dash.md: -------------------------------------------------------------------------------- 1 | --- 2 | owner: Adrianne Mallett 3 | petName: Dash 4 | petImage: https://pbs.twimg.com/media/E3FMcpqXwAMqzGM?format=jpg&name=large 5 | --- 6 | 7 | Dash is a male Devon Rex with short, curly fur. His fur is a bit thin and he has a little bald spot on the top of his head that he likes to get scratched. Dash is very clever and receptive to training. He can scratch, spin clockwise and stand on command. Dash can also jump through a hula hoop 4 feet high! -------------------------------------------------------------------------------- /src/cats/mesa.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pet.html 3 | owner: Emily Stacy 4 | petName: Mesa 5 | petImage: https://res.cloudinary.com/bendmyers/image/upload/v1628642804/RJSD%20Pets/IMG-5747_qiibpv.png 6 | --- 7 | 8 | Mesa is a big cat -------------------------------------------------------------------------------- /src/cats/senor.md: -------------------------------------------------------------------------------- 1 | --- 2 | owner: Sydney Jeffries 3 | petName: Senor 4 | petImage: https://images.fineartamerica.com/images/artworkimages/mediumlarge/1/orange-tabby-reflective-laura-mountainspring.jpg 5 | --- -------------------------------------------------------------------------------- /src/cats/tuna.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pet.html 3 | petName: Tuna 4 | owner: Ben Myers 5 | petImage: https://pbs.twimg.com/media/E3FRN-6XoAURZHQ?format=jpg&name=large 6 | --- 7 | 8 | Tuna is an agent for chaos. Big fan of blankets. Also likes snacks and naps. So much. -------------------------------------------------------------------------------- /src/cats/violet.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pet.html 3 | petName: Violet 4 | owner: Adrianne the Mallett 5 | petImage: https://pbs.twimg.com/media/E3FIFh1XEAEzVyT?format=jpg&name=large 6 | --- 7 | 8 | Violet is a female Devon Rex cat with thick, dark brown fur. She likes making biscuits on blankets, especially sherpa textured fleece blankets. Her favorite toys are fake mice and Disney Tsum Tsum plushes. She likes to carry them in her mouth into every room of the house. -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | /* MVP.css v1.7.4 - https://github.com/andybrewer/mvp */ 2 | 3 | :root { 4 | --border-radius: 5px; 5 | --box-shadow: 2px 2px 10px; 6 | --color: #118bee; 7 | --color-accent: #118bee15; 8 | --color-bg: #fff; 9 | --color-bg-secondary: #e9e9e9; 10 | --color-secondary: #920de9; 11 | --color-secondary-accent: #920de90b; 12 | --color-shadow: #f4f4f4; 13 | --color-text: #000; 14 | --color-text-secondary: #999; 15 | --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 16 | --hover-brightness: 1.2; 17 | --justify-important: center; 18 | --justify-normal: left; 19 | --line-height: 1.5; 20 | --width-card: 285px; 21 | --width-card-medium: 460px; 22 | --width-card-wide: 800px; 23 | --width-content: 1080px; 24 | } 25 | 26 | /* 27 | @media (prefers-color-scheme: dark) { 28 | :root { 29 | --color: #0097fc; 30 | --color-accent: #0097fc4f; 31 | --color-bg: #333; 32 | --color-bg-secondary: #555; 33 | --color-secondary: #e20de9; 34 | --color-secondary-accent: #e20de94f; 35 | --color-shadow: #bbbbbb20; 36 | --color-text: #f7f7f7; 37 | --color-text-secondary: #aaa; 38 | } 39 | } 40 | */ 41 | 42 | /* Layout */ 43 | article aside { 44 | background: var(--color-secondary-accent); 45 | border-left: 4px solid var(--color-secondary); 46 | padding: 0.01rem 0.8rem; 47 | } 48 | 49 | body { 50 | background: var(--color-bg); 51 | color: var(--color-text); 52 | font-family: var(--font-family); 53 | line-height: var(--line-height); 54 | margin: 0; 55 | overflow-x: hidden; 56 | padding: 0; 57 | } 58 | 59 | footer, 60 | header, 61 | main { 62 | margin: 0 auto; 63 | max-width: var(--width-content); 64 | padding: 3rem 1rem; 65 | } 66 | 67 | hr { 68 | background-color: var(--color-bg-secondary); 69 | border: none; 70 | height: 1px; 71 | margin: 4rem 0; 72 | width: 100%; 73 | } 74 | 75 | section { 76 | display: flex; 77 | flex-wrap: wrap; 78 | justify-content: var(--justify-important); 79 | } 80 | 81 | section img, 82 | article img { 83 | max-width: 100%; 84 | } 85 | 86 | section pre { 87 | overflow: auto; 88 | } 89 | 90 | section aside { 91 | border: 1px solid var(--color-bg-secondary); 92 | border-radius: var(--border-radius); 93 | box-shadow: var(--box-shadow) var(--color-shadow); 94 | margin: 1rem; 95 | padding: 1.25rem; 96 | width: var(--width-card); 97 | } 98 | 99 | section aside:hover { 100 | box-shadow: var(--box-shadow) var(--color-bg-secondary); 101 | } 102 | 103 | [hidden] { 104 | display: none; 105 | } 106 | 107 | /* Headers */ 108 | article header, 109 | div header, 110 | main header { 111 | padding-top: 0; 112 | } 113 | 114 | header { 115 | text-align: var(--justify-important); 116 | } 117 | 118 | header a b, 119 | header a em, 120 | header a i, 121 | header a strong { 122 | margin-left: 0.5rem; 123 | margin-right: 0.5rem; 124 | } 125 | 126 | header nav img { 127 | margin: 1rem 0; 128 | } 129 | 130 | section header { 131 | padding-top: 0; 132 | width: 100%; 133 | } 134 | 135 | /* Nav */ 136 | nav { 137 | align-items: center; 138 | display: flex; 139 | font-weight: bold; 140 | justify-content: space-between; 141 | margin-bottom: 7rem; 142 | } 143 | 144 | nav ul { 145 | list-style: none; 146 | padding: 0; 147 | } 148 | 149 | nav ul li { 150 | display: inline-block; 151 | margin: 0 0.5rem; 152 | position: relative; 153 | text-align: left; 154 | } 155 | 156 | /* Nav Dropdown */ 157 | nav ul li:hover ul { 158 | display: block; 159 | } 160 | 161 | nav ul li ul { 162 | background: var(--color-bg); 163 | border: 1px solid var(--color-bg-secondary); 164 | border-radius: var(--border-radius); 165 | box-shadow: var(--box-shadow) var(--color-shadow); 166 | display: none; 167 | height: auto; 168 | left: -2px; 169 | padding: .5rem 1rem; 170 | position: absolute; 171 | top: 1.7rem; 172 | white-space: nowrap; 173 | width: auto; 174 | z-index: 1; 175 | } 176 | 177 | nav ul li ul::before { 178 | /* fill gap above to make mousing over them easier */ 179 | content: ""; 180 | position: absolute; 181 | left: 0; 182 | right: 0; 183 | top: -0.5rem; 184 | height: 0.5rem; 185 | } 186 | 187 | nav ul li ul li, 188 | nav ul li ul li a { 189 | display: block; 190 | } 191 | 192 | /* Typography */ 193 | code, 194 | samp { 195 | background-color: var(--color-accent); 196 | border-radius: var(--border-radius); 197 | color: var(--color-text); 198 | display: inline-block; 199 | margin: 0 0.1rem; 200 | padding: 0 0.5rem; 201 | } 202 | 203 | details { 204 | margin: 1.3rem 0; 205 | } 206 | 207 | details summary { 208 | font-weight: bold; 209 | cursor: pointer; 210 | } 211 | 212 | h1, 213 | h2, 214 | h3, 215 | h4, 216 | h5, 217 | h6 { 218 | line-height: var(--line-height); 219 | } 220 | 221 | mark { 222 | padding: 0.1rem; 223 | } 224 | 225 | ol li, 226 | ul li { 227 | padding: 0.2rem 0; 228 | } 229 | 230 | p { 231 | margin: 0.75rem 0; 232 | padding: 0; 233 | } 234 | 235 | pre { 236 | margin: 1rem 0; 237 | max-width: var(--width-card-wide); 238 | padding: 1rem 0; 239 | } 240 | 241 | pre code, 242 | pre samp { 243 | display: block; 244 | max-width: var(--width-card-wide); 245 | padding: 0.5rem 2rem; 246 | white-space: pre-wrap; 247 | } 248 | 249 | small { 250 | color: var(--color-text-secondary); 251 | } 252 | 253 | sup { 254 | background-color: var(--color-secondary); 255 | border-radius: var(--border-radius); 256 | color: var(--color-bg); 257 | font-size: xx-small; 258 | font-weight: bold; 259 | margin: 0.2rem; 260 | padding: 0.2rem 0.3rem; 261 | position: relative; 262 | top: -2px; 263 | } 264 | 265 | /* Links */ 266 | a { 267 | color: var(--color); 268 | display: inline-block; 269 | font-weight: bold; 270 | text-decoration: none; 271 | } 272 | 273 | a:hover { 274 | filter: brightness(var(--hover-brightness)); 275 | text-decoration: underline; 276 | } 277 | 278 | a b, 279 | a em, 280 | a i, 281 | a strong, 282 | button { 283 | border-radius: var(--border-radius); 284 | display: inline-block; 285 | font-size: medium; 286 | font-weight: bold; 287 | line-height: var(--line-height); 288 | margin: 0.5rem 0; 289 | padding: 1rem 2rem; 290 | } 291 | 292 | button { 293 | font-family: var(--font-family); 294 | } 295 | 296 | button:hover { 297 | cursor: pointer; 298 | filter: brightness(var(--hover-brightness)); 299 | } 300 | 301 | a b, 302 | a strong, 303 | button { 304 | background-color: var(--color); 305 | border: 2px solid var(--color); 306 | color: var(--color-bg); 307 | } 308 | 309 | a em, 310 | a i { 311 | border: 2px solid var(--color); 312 | border-radius: var(--border-radius); 313 | color: var(--color); 314 | display: inline-block; 315 | padding: 1rem 2rem; 316 | } 317 | 318 | article aside a { 319 | color: var(--color-secondary); 320 | } 321 | 322 | /* Images */ 323 | figure { 324 | margin: 0; 325 | padding: 0; 326 | } 327 | 328 | figure img { 329 | max-width: 100%; 330 | } 331 | 332 | figure figcaption { 333 | color: var(--color-text-secondary); 334 | } 335 | 336 | /* Forms */ 337 | 338 | button:disabled, 339 | input:disabled { 340 | background: var(--color-bg-secondary); 341 | border-color: var(--color-bg-secondary); 342 | color: var(--color-text-secondary); 343 | cursor: not-allowed; 344 | } 345 | 346 | button[disabled]:hover { 347 | filter: none; 348 | } 349 | 350 | form { 351 | border: 1px solid var(--color-bg-secondary); 352 | border-radius: var(--border-radius); 353 | box-shadow: var(--box-shadow) var(--color-shadow); 354 | display: block; 355 | max-width: var(--width-card-wide); 356 | min-width: var(--width-card); 357 | padding: 1.5rem; 358 | text-align: var(--justify-normal); 359 | } 360 | 361 | form header { 362 | margin: 1.5rem 0; 363 | padding: 1.5rem 0; 364 | } 365 | 366 | input, 367 | label, 368 | select, 369 | textarea { 370 | display: block; 371 | font-size: inherit; 372 | max-width: var(--width-card-wide); 373 | } 374 | 375 | input[type="checkbox"], 376 | input[type="radio"] { 377 | display: inline-block; 378 | } 379 | 380 | input[type="checkbox"]+label, 381 | input[type="radio"]+label { 382 | display: inline-block; 383 | font-weight: normal; 384 | position: relative; 385 | top: 1px; 386 | } 387 | 388 | input, 389 | select, 390 | textarea { 391 | border: 1px solid var(--color-bg-secondary); 392 | border-radius: var(--border-radius); 393 | margin-bottom: 1rem; 394 | padding: 0.4rem 0.8rem; 395 | } 396 | 397 | input[readonly], 398 | textarea[readonly] { 399 | background-color: var(--color-bg-secondary); 400 | } 401 | 402 | label { 403 | font-weight: bold; 404 | margin-bottom: 0.2rem; 405 | } 406 | 407 | /* Tables */ 408 | table { 409 | border: 1px solid var(--color-bg-secondary); 410 | border-radius: var(--border-radius); 411 | border-spacing: 0; 412 | display: inline-block; 413 | max-width: 100%; 414 | overflow-x: auto; 415 | padding: 0; 416 | white-space: nowrap; 417 | } 418 | 419 | table td, 420 | table th, 421 | table tr { 422 | padding: 0.4rem 0.8rem; 423 | text-align: var(--justify-important); 424 | } 425 | 426 | table thead { 427 | background-color: var(--color); 428 | border-collapse: collapse; 429 | border-radius: var(--border-radius); 430 | color: var(--color-bg); 431 | margin: 0; 432 | padding: 0; 433 | } 434 | 435 | table thead th:first-child { 436 | border-top-left-radius: var(--border-radius); 437 | } 438 | 439 | table thead th:last-child { 440 | border-top-right-radius: var(--border-radius); 441 | } 442 | 443 | table thead th:first-child, 444 | table tr td:first-child { 445 | text-align: var(--justify-normal); 446 | } 447 | 448 | table tr:nth-child(even) { 449 | background-color: var(--color-accent); 450 | } 451 | 452 | /* Quotes */ 453 | blockquote { 454 | display: block; 455 | font-size: x-large; 456 | line-height: var(--line-height); 457 | margin: 1rem auto; 458 | max-width: var(--width-card-medium); 459 | padding: 1.5rem 1rem; 460 | text-align: var(--justify-important); 461 | } 462 | 463 | blockquote footer { 464 | color: var(--color-text-secondary); 465 | display: block; 466 | font-size: small; 467 | line-height: var(--line-height); 468 | padding: 1.5rem 0; 469 | } -------------------------------------------------------------------------------- /src/dogs/annie.md: -------------------------------------------------------------------------------- 1 | --- 2 | owner: Richard Lane 3 | petName: Annie 4 | petImage: https://dmn-dallas-news-sandbox.cdn.arcpublishing.com/resizer/OGr6ItENaHr2KLEigUbckbSIdkE=/1660x0/smart/filters:no_upscale()/cloudfront-us-east-1.images.arcpublishing.com/sandbox.dmn/AFJXAX5F35HVBB7SXYXT3SF63Q.jpg 5 | --- 6 | 7 | Anxious Annie is always worried. -------------------------------------------------------------------------------- /src/dogs/chewie.md: -------------------------------------------------------------------------------- 1 | --- 2 | owner: Mike Mathew 3 | petName: Chewie 4 | petImage: https://www.drumsensei.com/static/9f88edf0564e60b6a88eaaf0861f397c/9568a/good-good-boy.jpg 5 | --- 6 | 7 | Chewie is an Australian Shepherd. He is a good good boy who loves rubs behind his ears and long naps. -------------------------------------------------------------------------------- /src/dogs/dogs.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "pet.html", 3 | "tags": "dogs" 4 | } -------------------------------------------------------------------------------- /src/dogs/jazz.md: -------------------------------------------------------------------------------- 1 | --- 2 | owner: Michelle Berta 3 | petName: Jazz 4 | petImage: https://uc34fbc52d19d0b8eb5404b3ff0c.previews.dropboxusercontent.com/p/thumb/ABR0sLI0-7wgodLVHjBnilLQeAtnWut2C0vxr_JXShgFyv65_zGQzgxcCrCTNBNV9D5ihgG8j6oQZ-oyyjYcsP5LGHAgSHqIZIzfTDZEp8oTCjwE2_12sx0rV-TvhwZfU0wV8BXhpln8cRPapCInBplHbVxhFzS7xNVfXh-Yol9YVZgUqpKNuOZ8Xgl3LHaT0pqgd292c1oVOxAg2MPMuqqqi55BeNtoXPoF1Nm66Q_m88qngri0ibTEbzcZVvUGSr5ljdNju13NTMijNorPavMmD_2tIK75wmMWY1r8ubHrgFVm8EoyBF_KObIRixVRLF3mcC-evcrQcsR3VfDdmLNHKFoys4Z8xITSKJaM62jEMmw-7U9h61agD4g9wB22750-HNwsyS9jufwOT4yn7S41/p.jpeg?fv_content=true&size_mode=5 5 | --- 6 | 7 | Jazz is 3 years old. She was rescued from a backyard breeder. She came to live with us a few weeks ago. She has a new excitement for life! -------------------------------------------------------------------------------- /src/dogs/max.md: -------------------------------------------------------------------------------- 1 | --- 2 | owner: Carlos Rangel 3 | petName: Max 4 | petImage: https://www.linkpicture.com/q/max.jpeg 5 | --- 6 | 7 | He is a lovable dachshund who loves treats and rolling the grass! And of course much cuddles. -------------------------------------------------------------------------------- /src/dogs/mia.md: -------------------------------------------------------------------------------- 1 | --- 2 | owner: Clonie 3 | petName: Mia 4 | petImage: https://i.ibb.co/r5M26Dm/Mia.jpg 5 | --- 6 | 7 | Mia loves treats and toys. She likes to play catch. -------------------------------------------------------------------------------- /src/dogs/monaco.md: -------------------------------------------------------------------------------- 1 | --- 2 | owner: Christy 3 | petName: Monaco 4 | petImage: https://photos.google.com/photo/AF1QipMKtKjG07iJZSsgeoX5JSQJ-ww227Hv6xXRD24w 5 | --- 6 | 7 | Monaco is a Quarter Horse, he ADORES carrots, and loves to eat in general. -------------------------------------------------------------------------------- /src/dogs/rocky.md: -------------------------------------------------------------------------------- 1 | --- 2 | owner: Nathan Barrett 3 | petName: Rocky 4 | petImage: https://framecloud-public.s3.amazonaws.com/tmp/rocky.jpeg 5 | --- 6 | 7 | Rocky likes to swim in dirty lakes and sleep on my feet while I work on the computer (and occasionally pass gas). -------------------------------------------------------------------------------- /src/dogs/scout.md: -------------------------------------------------------------------------------- 1 | --- 2 | owner: Steve 3 | petName: Scout 4 | petImage: https://lh3.googleusercontent.com/pw/AM-JKLVKPlAF8NZHGVo1QTJiyCtS75wg5WDW-TH4gqH4J4aAcfHno4Bux1cCb0RgRIVjeqxHxFva86zUpopiu_RpbHMyz-PY6wLrNIkgiAsJSOaJan32BpHgB6Tm1PYwUv_r92u4FHcZGRUzKSA7r0sVXRiTsw=w1152-h1536-no?authuser=0 5 | --- 6 | 7 | She likes to eat, sleep, and watch me code lol -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | eleventyExcludeFromCollections: true 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | 10 | Pets of ReactJS Dallas 11 | 12 | 13 | 14 |
15 |

Pets of ReactJS Dallas

16 |
17 |

Cats

18 | 27 |
28 |
29 |

Dogs

30 | 39 |
40 |
41 |
42 |

Stargazers

43 | 52 |
53 |
54 | 55 | --------------------------------------------------------------------------------