Improved Twitter links

Author: stedman

.eleventy.js

@@ -6,8 +6,8 @@ const filter = require('./_includes/filter');
 const scAvatar = require('./_includes/shortcodes/avatar');
 const scResponsiveImage = require('./_includes/shortcodes/responsive-image');
 const scSocialSvg = require('./_includes/shortcodes/social-svg');
-const scMeetupDetails = require('./_includes/shortcodes/meetup-details');
 const scVideoPlayer = require('./_includes/shortcodes/video-player');
+const pscMeetupDetails = require('./_includes/shortcodes/meetup-details');
 
 /**
  * Add date properties to collections.
@@ -62,12 +62,6 @@ module.exports = (eleventyConfig) => {
   // FILTER: Replace text with regex capabilities.
   eleventyConfig.addFilter('regexReplace', filter.regexReplace);
 
-  // SHORTCODE: Format meeting details message block.
-  eleventyConfig.addShortcode('meetupDetails', scMeetupDetails);
-
-  // SHORTCODE: Embed video players for event replay.
-  eleventyConfig.addShortcode('videoPlayer', scVideoPlayer);
-
   // SHORTCODE: Resize and cache images.
   eleventyConfig.addLiquidShortcode('avatar', scAvatar);
 
@@ -77,6 +71,12 @@ module.exports = (eleventyConfig) => {
   // SHORTCODE: Add social icon SVG block.
   eleventyConfig.addLiquidShortcode('socialSvg', scSocialSvg);
 
+  // SHORTCODE: Embed video players for event replay.
+  eleventyConfig.addShortcode('videoPlayer', scVideoPlayer);
+
+  // SHORTCODE: Format meeting details message block.
+  eleventyConfig.addPairedShortcode('meetupDetails', pscMeetupDetails);
+
   // PLUGIN: RSS feed
   eleventyConfig.addPlugin(pluginRss);
 

_includes/shortcodes/meetup-details.js

@@ -18,19 +18,57 @@ const fullDate = (dateValue) => {
   return `${monthNames[newDate.getMonth()]} ${newDate.getDate()}, ${newDate.getFullYear()}`;
 };
 
+/**
+ * Create Twitter search link with page URL
+ *
+ * @param {string} content Text for link
+ * @param {string} pageUrl Page URL
+ *
+ * @return {string} Fully formed Twitter search link
+ */
+const tweetSearch = (content, pageUrl) => {
+  // const url = `${siteData.url.replace('https://', '')}/posts/meetups/`;
+  // ^^ use if less specific searches are desired ^^
+  const url = `${siteData.url.replace('https://', '')}${pageUrl}`;
+  const search = encodeURIComponent(url);
+
+  return `<a href="https://twitter.com/search?q=${search}">${content}</a>`;
+};
+
+/**
+ * Create Twitter tweet link with page title and URL
+ *
+ * @param {string} content Text for link
+ * @param {string} pageUrl Page URL
+ * @param {string} pageTitle Page Title
+ *
+ * @return {string} Fully formed Twitter share link
+ */
+const tweetPost = (content, pageUrl, pageTitle) => {
+  const settings = {
+    text: `Meetup: "${pageTitle}"`,
+    url: `${siteData.url.replace('https://', '')}${pageUrl}`,
+    via: siteData.author.twitter,
+  };
+  const params = Object.entries(settings)
+    .reduce((acc, item) => `${acc}${item[0]}=${encodeURIComponent(item[1])}&`, '');
+
+  return `<a href="https://twitter.com/intent/tweet?${params.slice(0, -1)}">${content}</a>`;
+};
+
 /**
  * Provide template for meeting details.
  *
+ * @param  {string}   meetHeader The meeting header (optional)
  * @param  {string}   meetDate   The meet date
  * @param  {string}   venue      The venue
  * @param  {string}   after      The after party gathering place
- * @param  {string}   msgHeader  The message header (optional)
  * @param  {string}   meetTitle  The meet title (optional)
- * @param  {string}   meetUrl    The meet url (optional)
+ * @param  {string}   msgHeader  The message header (optional)
  *
  * @return {string}  Completed template
  */
-module.exports = function meetupDetails(meetDate, venue, after, msgHeader, meetTitle, meetUrl) {
+module.exports = function meetupDetails(meetHeader, meetDate, venue, after, meetTitle, msgHeader) {
   const header = msgHeader || 'Meetup details';
 
   const svgBlock = `<svg display="none">
@@ -39,12 +77,6 @@ module.exports = function meetupDetails(meetDate, venue, after, msgHeader, meetT
     <g id="location-sharp"><path d='M256,32C167.67,32,96,96.51,96,176c0,128,160,304,160,304S416,304,416,176C416,96.51,344.33,32,256,32Zm0,224a64,64,0,1,1,64-64A64.07,64.07,0,0,1,256,256Z'/></g>
   </svg>`;
 
-  const meetHeaderBlock = meetTitle && meetUrl
-    ? `<div class="title is-size-4">
-        <a href="${meetUrl}">${meetTitle}</a>
-      </div>`
-    : '';
-
   const venueOrg = venue
     ? organizations[venue]
     : {};
@@ -74,7 +106,7 @@ module.exports = function meetupDetails(meetDate, venue, after, msgHeader, meetT
   </div>
 
   <div class="message-body">
-    ${meetHeaderBlock}
+    ${meetHeader}
 
     <div>
       DATE
@@ -102,11 +134,15 @@ module.exports = function meetupDetails(meetDate, venue, after, msgHeader, meetT
       ${venueLocation}
     </div>
 
+    <small>
+      (Check back here or on ${tweetSearch('Twitter', this.page.url)} for updates.)
+    </small>
+
     ${afterBlock}
 
-    <p class="has-margin-top">
-      Check back here or <a href="https://twitter.com/${siteData.author.twitter}">@${siteData.author.twitter} on Twitter</a> for updates.
-    </p>
+    <div class="has-margin-top">
+      Help ${tweetPost('spread the word on Twitter', this.page.url, meetTitle)}.
+    </div>
   </div>
 </div>`;
 };

_includes/shortcodes/responsive-image.js

@@ -1,25 +1,37 @@
 const Image = require('@11ty/eleventy-img');
 
-module.exports = async (src, alt, outputFormat = 'jpeg') => {
+module.exports = async (src, alt, outputFormats = 'jpeg') => {
   if (alt === undefined) {
     throw new Error(`Responsive Image: missing ALT attribute from: ${src}`);
   }
 
+  const sizes = '(max-width: 400px) 400px, (max-width: 800px) 800px, 100vw';
+  const formats = outputFormats.split(',');
+
   try {
     const stats = await Image(src, {
-      formats: [outputFormat],
+      formats,
       urlPath: '/assets/img/',
       outputDir: '_site/assets/img/',
       widths: [400, 800, null],
     });
 
-    const lowestSrc = stats[outputFormat][0];
-    const sizes = '(max-width: 400px) 400px, (max-width: 800px) 800px, 100vw';
-    const sourceBlock = Object.values(stats).map((imageFormat) => `<source type="image/${imageFormat[0].format}" srcset="${imageFormat.map((entry) => `${entry.url} ${entry.width}w`).join(', ')}" sizes="${sizes}">`).join('\n');
+    const defaultSrc = stats[formats.slice(-1)][0];
+    const sourceBlock = Object.values(stats).map((imageFormat) => `<source
+      type="image/${imageFormat[0].format}"
+      srcset="${imageFormat.map((entry) => `${entry.url} ${entry.width}w`).join(', ')}"
+      sizes="${sizes}">`)
+      .join('\n');
+    const imgBlock = `<img
+      src="${defaultSrc.url}"
+      width="${defaultSrc.width}"
+      height="${defaultSrc.height}"
+      alt="${alt}"
+      loading="lazy">`;
 
     return `<picture class="image">
         ${sourceBlock}
-        <img src="${lowestSrc.url}" width="${lowestSrc.width}" height="${lowestSrc.height}" alt="${alt}" loading="lazy">
+        ${imgBlock}
       </picture>`;
   } catch (err) {
     // eslint-disable-next-line no-console

_layouts/meetup.liquid

@@ -8,7 +8,8 @@ layout: base
       {{ content | safe }}
     </div>
 
-    {%- meetupDetails page.date, venue, after -%}
+    {%- meetupDetails page.date, venue, after, title -%}
+    {%- endmeetupDetails -%}
 
     {%- videoPlayer video, title -%}
   </div>

index.html

@@ -11,7 +11,11 @@ <h1 class="is-sr-only">{{ title }}</h1>
 
       <section class="meetup-details">
         {%- assign meet = collections.meetups | last -%}
-        {%- meetupDetails meet.date, meet.data.venue, meet.data.after, 'Upcoming meetup details', meet.data.title, meet.url -%}
+        {%- meetupDetails meet.date, meet.data.venue, meet.data.after, meet.data.title, 'Upcoming meetup details' -%}
+        <div class="title is-size-4">
+          <a href="{{ meet.url }}">{{ meet.data.title }}</a>
+        </div>
+        {%- endmeetupDetails -%}
 
         <meta id="meet-date" time="{{ meet.date }}">
 <script>