Add email subscription button (#1538)

Co-authored-by: Thierry Berger <[email protected]>
Co-authored-by: Tau Gärtli <[email protected]>

content/news/052/index.md

@@ -65,7 +65,16 @@ If needed, a section can be split into subsections with a "------" delimiter.
 
 ## Announcements
 
-TODO: I'll be working on adding an email subscription this weekend, so I'll write about it here once that's done :) - Jan
+For years, our readers have asked for a way to subscribe to this newsletter by email. This again came up in our [recent survey][survey].
+We're happy to announce that this feature is now available! When you visit our [homepage],
+you can now scroll down and find an email subscription form. 
+We'll send you an email whenever a new post is published, which currently is once per month.
+
+The emails are currently sent from [[email protected]](mailto:[email protected]). 
+We will switch this to an actual @gamedev.rs address in the future. Please tell us if you encounter any issues with the emails.
+
+[survey]: https://gamedev.rs/blog/survey-02/
+[homepage]: https://gamedev.rs/
 
 ## Game Updates
 

sass/_extra.scss

@@ -10,7 +10,7 @@ li {
  margin: 15px 0;
 }
 
-pre > code {
+pre>code {
  // To avoid grey background on code blocks.
  background-color: inherit;
 }
@@ -99,31 +99,90 @@ h6:hover .anchor {
  margin-bottom: 0;
 }
 
-a.btn {
+input, button {
+ font-size: inherit;
+}
+
+input {
+ min-width: 0; // Allow the input to shrink on small devices.
+}
+
+a.btn, // Trick to increase the specificity and win against rules such as a:visited
+.btn {
  text-decoration: none;
  border-radius: 3px;
  font-weight: 600;
- border: 1px solid transparent;
+ border: none;
  box-sizing: border-box;
  display: inline-block;
  padding: 0.4em 2em;
+ transition: background-color 125ms;
 
  background-color: $brand-color;
  color: $background-color;
  border-color: $background-color;
 
  &:hover {
  color: lighten($background-color, 10);
- border-color: $brand-color;
+ background-color: lighten($brand-color, 5);
+ }
+
+ &:active {
+ background-color: darken($brand-color, 5);
  }
 }
 
+input[type=email] {
+ border-radius: 3px;
+ border: 1px solid $brand-color;
+ box-sizing: border-box;
+ padding: .4em;
+}
+
 // A hack for image captions.
 // See https://stackoverflow.com/questions/19331362/using-an-image-caption-in-markdown-jekyll
-img + em,
-a:first-child + em:last-child,
-video + em {
+img+em,
+a:first-child+em:last-child,
+video+em {
  display: block;
  text-align: center;
  color: $grey-color;
 }
+
+.email-form {
+ display: grid;
+ margin-top: $spacing-unit;
+ grid-template-columns: auto auto;
+ justify-content: center;
+ gap: .6em 1em;
+ background-color: color-mix(in oklab, $brand-color 20%, #fff);
+ padding: $spacing-unit * .5;
+ align-items: center;
+ border-radius: 3px;
+
+ .email-form__icon {
+ width: 5em;
+ height: 5em;
+ --icon-stroke-color: #{$brand-color};
+ --icon-fill-color: rgba(255, 255, 255, .4);
+ }
+
+ .email-form__description {
+ max-width: 18em;
+ }
+
+ .email-form__input {
+ grid-column: 1 / 3;
+ }
+}
+
+.email-input {
+ display: grid;
+ grid-template-columns: repeat(2, auto);
+ gap: 5px;
+
+ label {
+ grid-column: 1 / 3;
+ font-size: .8em;
+ }
+}

templates/includes/email_signup.html

@@ -0,0 +1,22 @@
+<form action="https://gamedev.us22.list-manage.com/subscribe/post?u=3b2317bf9350c11e252162541&amp;id=aaf37783ec&amp;f_id=0011cde1f0" method="post" name="mc-embedded-subscribe-form">
+ <div class="email-form">
+ <svg class="email-form__icon" aria-hidden="true">
+ <svg><use xlink:href="{{ get_url(path='intro-icons.svg#incoming-envelope') }}"></use></svg>
+ </svg>
+
+ <div class="email-form__description">
+ Get the Rust GameDev Workgroup’s monthly newsletter delivered directly to your inbox.
+ </div>
+
+ <div class="email-form__input email-input">
+ <label for="email-input">Email Address</label>
+ <input type="email" inputmode="email" name="EMAIL" id="email-input" placeholder="[email protected]" required>
+ <button type="submit" name="subscribe" class="btn">Subscribe</button>
+
+ <div style="position: absolute; left: -5000px;" aria-hidden="true">
+ <input type="text" name="b_3b2317bf9350c11e252162541_aaf37783ec" tabindex="-1" value="">
+ </div>
+ </div>
+ </div>
+</form>
+

templates/includes/home.html

@@ -39,6 +39,7 @@ <h2 class="post-list-heading">{{ section.title | default(value="Latest Blog Post
  <a class="btn" id="all-blog-posts" href="{{ get_url(path='blog/') }}">All Blog Posts</a>
  <a href="{{ get_url(path='rss.xml') }}">
  <svg class="svg-icon orange"><use xlink:href="{{ get_url(path='minima-social-icons.svg#rss') }}"></use></svg><span>Subscribe</span>
- </a>
+ </a> 
+ {% include "includes/email_signup.html" %}
  </p>
 </div>