Skip to content

Commit

Permalink
imagine an events platform that has an events widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@pcai
pcai committed Jul 13, 2024
1 parent a268d9a commit c71dfb7
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 57 deletions.
49 changes: 0 additions & 49 deletions docs/application.js
View file
Original file line number Diff line number Diff line change
@@ -1,49 +0,0 @@
(function() {
var container = document.querySelector("[data-role='upcoming-event']");
var message = container.querySelector("p");
var request = new XMLHttpRequest();

request.addEventListener("load", function () {
const event_list = JSON.parse(request.responseText)["events"];
if (!event_list) {
message.innerHTML = `<p><a href="https://www.meetup.com/bostonrb">See upcoming events</a></p>`;
return;
}
const future_events = event_list.filter(e => new Date(e.end_date_raw) > new Date())
.sort((a, b) => a.start_time_raw - b.start_time_raw);
const event = future_events[0];

if (event) {

// api returns an unholy mess of html-formatted markdown. try our best to clean it up
const desc = event.description.replace(/<br\/?>/g, "\n\n").replace(/<\/?p>/g, "\n").replace(/<a href=".*?">(.*?)<\/a>/g, "$1");

console.log(desc);
container.innerHTML = `
<h2>Our next event</h2>
<p class="events__item-title" data-role="event-name">${event.name}</p>
<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>
<div><a href="${event.html_link}" class="cta--primary">RSVP</a></div>
<div class="events__description">${marked.parse(desc)}</div>
<p><a href="https://www.meetup.com/bostonrb">See all events</a></p>
`;
} else {
message.innerHTML = "No Upcoming Event";
}
});

request.addEventListener("error", function () {
message.innerHTML = `<p><a href="https://www.meetup.com/bostonrb">See upcoming events</a></p>`;
});

request.addEventListener("timeout", function () {
message.innerHTML = `<p><a href="https://www.meetup.com/bostonrb">See upcoming events</a></p>`;
});

request.timeout = 3000;
// https://www.sociablekit.com/app/users/widgets/update_embed/25388247
request.open("GET", `https://data.accentapi.com/feed/25388247.json?no_cache=${new Date().getTime()}`);
request.send();
})();
31 changes: 23 additions & 8 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,20 @@
<link rel="stylesheet" media="all" href="application.css">
</head>
<body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3162ZSG0RY"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-3162ZSG0RY');
</script>
<a class="skip-to-main" href="#main-content">Skip to Main Content</a>
<header class="hero">
<picture class="hero__media">
<source media="(min-width: 80em)" srcset="images/hero_1200.jpg">
<source media="(min-width: 50em)" srcset="images/hero_900.jpg">
<source media="(min-width: 1px)" srcset="images/hero_650.jpg">
<img src="images/hero_650.jpg" alt="A group of people attending a Boston Ruby meetup.">
<img src="images/hero_650.jpg" alt="A group of people attending a Boston Ruby meeting.">
</picture>
<div class="hero__content">
<p class="hero__overline topic-overline">Boston Ruby Group</p>
Expand All @@ -49,15 +56,24 @@ <h1 class="hero__title">Boston Ruby Group helps you make connections, hack on pr
<section class="about">
<p class="about__content">
The Boston Ruby Group is a community of Ruby language enthusiasts. We hold
monthly meetups on the second Tuesday of the month with two long-form talks.
monthly meetings on the second Tuesday of the month with two long-form talks.
We also have a project night on the first Monday of the month.
</p>
</section>
<section class="events">
<ul class="events__list">
<li class="events__item" data-role="upcoming-event">
<h2>Our next event</h2>
<p>Loading...</p>
<h2>Upcoming Events</h2>
<iframe
src="https://lu.ma/embed/calendar/cal-O0xLKEqq4Q8vc8f/events?"
width="100%"
height="450"
frameborder="0"
style="border: 1px solid #757c8588; border-radius: 4px;"
allowfullscreen=""
aria-hidden="false"
tabindex="0"
></iframe>
</li>
<li class="events__item">
<h2>Project Nights</h2>
Expand All @@ -80,10 +96,10 @@ <h2>Meetings</h2>
<h2>Join our community</h2>
<ul class="nav__list">
<li class="nav__item">
<a href="https://www.meetup.com/bostonrb/">Meetup</a>
<a href="https://lu.ma/bostonrb">Subscribe to events</a>
</li>
<li class="nav__item">
<a href="https://join.slack.com/t/bostonrb/shared_invite/zt-26831so1i-rTRvwdAycSWZNPPrFoDdtA">Slack</a>
<a href="https://join.slack.com/t/bostonrb/shared_invite/zt-26831so1i-rTRvwdAycSWZNPPrFoDdtA">Join Slack</a>
</li>
<!--li class="nav__item">
<a href="https://twitter.com/bostonrb/">Twitter</a>
Expand All @@ -94,14 +110,13 @@ <h2>Join our community</h2>
<a href="https://papercall.io/bostonrb/">Submit a talk</a>
</li>
<li class="nav__item">
<a href="https://www.meetup.com/bostonrb/messages/boards/forum/29446267/">Job Board</a>
<a href="https://bostonrb.slack.com/archives/C0719QK96">Job Board</a>
</li>
</ul>
</nav>
</main>
<footer class="footer">
</footer>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="application.js"></script>
</body>
</html>

0 comments on commit c71dfb7

Please sign in to comment.