add local dev steps; tweak the css for widescreen

.devcontainer/devcontainer.json

@@ -0,0 +1,22 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/alpine
+{
+	"name": "Node.js",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:20"
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "uname -a",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

.gitignore

@@ -0,0 +1,3 @@
+
+# node_modules
+node_modules

README.md

@@ -1,19 +1,12 @@
 # bostonrubygroup.org
 
-Run the service that hits the meetup.com API locally:
+This is the source code for the Boston Ruby Group website: https://www.bostonrubygroup.com/
 
-```sh
-node service.mjs
-```
+## Local development
 
-Run it with a different group name to test out the event display:
+* npm install
+* npm start
 
-```sh
-GROUP=awesomeboston node service.mjs
-```
+## Deployment
 
-Open the webpage locally:
-
-```sh
-open docs/index.html
-```
+This is a static no-build site hosted on github pages. To deploy it, push to the main branch.

devserver.js

@@ -0,0 +1,9 @@
+const express = require('express');
+const app = express();
+const port = 3000;
+
+app.use(express.static(`${__dirname}/docs`));
+
+app.listen(port, () => {
+  console.log(`Server running at http://localhost:${port}`);
+});

docs/application.css

@@ -287,12 +287,12 @@ footer {
 
 .events__list {
   display: grid;
-  grid-gap: 4rem
+  gap: 3rem
 }
 
 @media screen and (min-width: 80em) {
   .events__list {
-    grid-gap: 1rem;
+    gap: 3rem;
     grid-template-columns: repeat(5, 1fr);
     grid-template-rows: repeat(6, 1fr);
     margin-top: 2rem
@@ -313,34 +313,29 @@ footer {
 
 @media screen and (min-width: 80em) {
   .events__item:nth-of-type(1) {
-    grid-column: 4/6;
-    grid-row: 1/3
+    grid-column: 1/6;
+    grid-row: 1/5
   }
 
   .events__item:nth-of-type(2) {
-    grid-column: 1/3;
-    grid-row: 3/5;
-    text-align: right
-  }
-
-  .events__item:nth-of-type(2) h2::after {
-    margin-left: auto
+    grid-column: 1/6;
+    grid-row: 5/6;
   }
 
   .events__item:nth-of-type(3) {
-    grid-column: 3/5;
-    grid-row: 5/7
+    grid-column: 1/6;
+    grid-row: 6/7;
   }
 }
 
 .events__item-title {
   font-size: 1.25rem;
   font-weight: 700;
-  margin-bottom: 1.5rem
+  margin-bottom: .5rem
 }
 
 .events__description {
-  margin-bottom: 1.5rem;
+  margin-bottom: .5rem;
   display: block
 }
 

docs/application.js

@@ -20,8 +20,8 @@
         <p data-role="event-date-info"><time>${new Date(event.start_time_raw).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}</time></p>
         <p><time>${event.start_time}</time> to <time>${event.end_time}</time></p>
         <address data-role="event-venue-info">${event.location}<br></address>
-        <p><a href="${event.html_link}" class="cta--primary">RSVP</a></p>
-        <p>${event.description}</p>
+        <div><a href="${event.html_link}" class="cta--primary">RSVP</a></div>
+        <div class="events__description">${event.description}</div>
         <p><a href="https://www.meetup.com/bostonrb">See all events</a></p>
       `;
     } else {

docs/index.html

@@ -101,6 +101,6 @@ <h2>Join our community</h2>
     </main>
     <footer class="footer">
     </footer>
-    <script type="text/javascript" src="application.js"></script>
+    <script src="application.js"></script>
   </body>
 </html>