Adding new OddNews signup page with OddNews archive, creating new mac…

…ro for OddNews signups

content/_includes/oddnews.macros.njk

@@ -0,0 +1,38 @@
+{%
+  macro oddnews_signup(
+    heading=true,
+    tag='footer'
+  )
+%}
+<div class="oddnews-signup">
+  {% if heading %}
+    <h3>OddNews Sign Up</h3>
+    <p>Get the latest news in your field — UX, CSS, JavaScript, and Python. <a href="/oddnews" title="See Archive">See Archive</a></p>
+  {% endif %}
+
+  <form action="https://oddbird.us19.list-manage.com/subscribe/post?u=80219aa68d7bad77b9fd2eb93&amp;id=7c27f7fb9a&amp;f_id=000a9de4f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self">
+    <div id="mc_embed_signup_scroll">
+      <div class="mc-field-group">
+        <label for="mce-EMAIL">Email
+          <span aria-hidden="true">*</span>
+          <span class="sr-only">required</span>
+        </label>
+        <input data-input="text email" type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required >
+        <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
+      </div>
+      <div hidden="true"><input type="hidden" name="tags" value={{ tag | oddNewsTags }}></div>
+      <div id="mce-responses" class="clear foot">
+        <div class="response" id="mce-error-response" style="display:none"></div>
+        <div class="response" id="mce-success-response" style="display:none"></div>
+      </div>
+      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+      <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_80219aa68d7bad77b9fd2eb93_7c27f7fb9a" tabindex="-1" value=""></div>
+      <div class="optionalParent">
+        <div class="clear foot form-actions">
+          <button data-btn="submit" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">Subscribe</button>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+{% endmacro %}

content/_includes/site/footer.njk

@@ -1,5 +1,6 @@
 {% import 'contact.macros.njk' as contact %}
 {% import 'utility.macros.njk' as utility %}
+{% import 'oddnews.macros.njk' as oddnews %}
 
 {%- set add_cta = page.url | addCallToAction -%}
 {%- set footer_title = "Let's chat about your web project" -%}
@@ -28,36 +29,7 @@
   {% endif %}
 
   {% if page.url != '/oddnews/' %}
-    <div class="oddnews-signup">
-      <h3>OddNews Sign Up</h3>
-      <p>Get the latest news in your field — UX, CSS, JavaScript, and Python. <a href="https://us19.campaign-archive.com/home/?u=80219aa68d7bad77b9fd2eb93&id=7c27f7fb9a" title="See Archive">See Archive</a></p>
-
-      <!-- Begin Mailchimp Signup Form -->
-      <form action="https://oddbird.us19.list-manage.com/subscribe/post?u=80219aa68d7bad77b9fd2eb93&amp;id=7c27f7fb9a&amp;f_id=000a9de4f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self">
-        <div id="mc_embed_signup_scroll">
-          <div class="mc-field-group">
-            <label for="mce-EMAIL">Email
-              <span aria-hidden="true">*</span>
-              <span class="sr-only">required</span>
-            </label>
-            <input data-input="text email" type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required >
-            <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
-          </div>
-          <div id="mce-responses" class="clear foot">
-            <div class="response" id="mce-error-response" style="display:none"></div>
-            <div class="response" id="mce-success-response" style="display:none"></div>
-          </div>
-          <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
-          <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_80219aa68d7bad77b9fd2eb93_7c27f7fb9a" tabindex="-1" value=""></div>
-          <div class="optionalParent">
-            <div class="clear foot form-actions">
-              <button data-btn="submit" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">Subscribe</button>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-    <!--End mc_embed_signup-->
+    {{ oddnews.oddnews_signup() }}
   {% endif %}
 
   <footer role="contentinfo">

content/oddnews.njk

@@ -0,0 +1,54 @@
+---
+title: OddNews
+sub: Because best practice is a conversation...
+banner: OddNews
+summary: |
+  **Hi, OddFriends!** This is the newsletter for designers
+  & developers who want to **get the latest news in your field**
+  — UX Design, CSS, JavaScript or Python — and keep tabs on the full stack.
+---
+
+{% import 'oddnews.macros.njk' as oddnews %}
+{% import 'embed.macros.njk' as embed %}
+{% import 'layout.macros.njk' as layout %}
+
+<div data-layout="oddnews-info">
+{{ oddnews.oddnews_signup(
+  heading=false,
+  tag='oddnews') }}
+
+{%- set title = 'What to Expect' -%}
+{%- set contents -%}
+  Here are a few examples of topics featured in past editions of OddNews.
+  - **Bird of the Month** - Introduction to the oddest of birds
+  - **CSS** - Miriam Suzanne's latest work in Container Queries
+  - **Python** - How to Run Playwright Inside Docker
+  - **Sass** - How to use the new `split()` function in Sass
+  - **Custom App Development** - Web Apps vs. PWAs vs. Native
+  - **UX Design** - How to conenct designers and developers with Object Oriented UX
+{%- endset -%}
+
+<aside data-layout="cta" class="has-angles" aria-labelledby="cta-title">
+  {% set callout_content %}
+    <h2 id="cta-title">{{ title | mdInline | safe }}</h2>
+    {{ contents | md | safe }}
+  {% endset %}
+
+  {{ embed.media_block(
+  media=embed.screen(
+  notch='5%',
+  content=embed.img(
+    src='writing/pexels-frank-cone.jpg',
+    alt='An orange hummingbird flying in the air',
+    sizes='media'
+  )
+),
+  content=callout_content
+) }}
+</aside>
+
+{{ layout.title('Latest News') }}
+<div class="oddnews-archive">
+  <script language="javascript" src="//oddbird.us19.list-manage.com/generate-js/?u=80219aa68d7bad77b9fd2eb93&fid=27537&show=10" type="text/javascript"></script>
+</div>
+</div>

eleventy.config.cjs

@@ -154,6 +154,7 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addFilter('imgSrc', (src) =>
     images.image(src, null, null, null, true),
   );
+  eleventyConfig.addFilter('oddNewsTags', (name) => utils.oddNewsTags(name));
 
   // shortcodes
   eleventyConfig.addPairedShortcode('md', type.md);

src/filters/utils.cjs

@@ -65,4 +65,29 @@ const onlyShow = (array, n) => {
   return array.slice(0, n);
 };
 
-module.exports = { typeCheck, styles, onlyShow };
+/* @docs
+label: oddNewsTags
+category: Filter
+note: |
+  Returns the matching mailchimp form tag
+  for the page where the signup form lives |
+
+params:
+  name:
+    type: string
+    note: name of page such as 'footer'
+*/
+const oddNewsTags = (name) => {
+  switch (name) {
+    case 'footer':
+      return '6264369';
+    case 'oddblog':
+      return '6265233';
+    case 'oddnews':
+      return '6265089';
+    default:
+      return '';
+  }
+};
+
+module.exports = { typeCheck, styles, onlyShow, oddNewsTags };