Nevertheless, She Coded (#2000)

app/controllers/pages_controller.rb

@@ -61,6 +61,9 @@ class PagesController < ApplicationController
   end
 
   def shecoded
+    @articles = Article.tagged_with(["shecoded", "shecodedally", "theycoded"], any: true).
+      where(published: true, approved: true).where("published_at > ?", 3.weeks.ago).order("RANDOM()").
+      decorate
     render layout: false
     set_surrogate_key_header "shecoded_page"
   end

app/views/pages/shecoded.html.erb

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>#SheCoded 👩🏿‍💻👩‍💻👩🏾‍💻 - DEV Community</title>
+    <%= favicon_link_tag %>
     <style>
       * {
           padding: 0;
@@ -17,12 +18,10 @@
 
         html,
         body {
-          height: 100%;
           background: url(<%= asset_path "SheCodedBackground.png" %>);
           background-color: #cabde6;
           background-repeat: repeat;
           width: 100%;
-          position: fixed;
         }
 
         .mobile-only {
@@ -33,9 +32,8 @@
           width: 80%;
           max-width: 1000px;
           background-color: white;
-          height: 100%;
           margin: 0 auto;
-          padding: 20px 0;
+          padding: 90px 0 30px;
           display: flex;
           flex-direction: column;
           justify-content: center;
@@ -101,6 +99,64 @@
           border-radius: 3px;
           background: #cabde6;
         }
+        .posts {
+          column-count: 3;
+          width: 94%;
+          margin: 50px auto 20px;
+        }
+        @media only screen and (max-width: 1200px) {
+          .posts {
+            column-count: 2;
+          }
+        }
+        @media only screen and (max-width: 750px) {
+          .posts {
+            column-count: 1;
+            max-width: 480px;
+          }
+        }
+        .single-post {
+          width: 98%;
+          margin: 0px auto 10px;
+          border: 1px solid #cabde6;
+          box-sizing: border-box;
+          padding: 40px 10px;
+          border-radius: 3px;
+          display: inline-block;
+          text-align: center;
+          text-decoration: none;
+          box-shadow: 3px 3px 0px #cabde6;
+          overflow: hidden;
+        }
+
+        .single-post img {
+          border-radius: 100px;
+          border: 3px solid #cabde6;
+          width: 96px;
+          height: 96px;
+          margin-bottom: 8px;
+        }
+
+        .single-post h4 {
+          font-weight: 400;
+          margin-top: 2px;
+          font-size: 0.98em;
+        }
+
+        .single-post h5 {
+          margin-top: 5px;
+          font-size: 0.82em;
+        }
+
+        footer {
+          text-align: center;
+        }
+
+        footer a {
+          display: inline-block;
+          margin-right: 8px;
+          margin-top: 20px;
+        }
 
         @media only screen and (max-width: 600px) {
           .content {
@@ -198,6 +254,23 @@
           <path d="M0 33v32h11.3c12.5 0 17.7-1.6 21.5-6.5 3.8-4.8 4.4-9 4-28-.3-16.8-.5-18.2-2.7-21.8C30.3 2.5 26.1 1 12 1H0v32zm23.1-19.1c2.3 1.9 2.4 2.3 2.4 18.5 0 15.7-.1 16.7-2.2 18.8-1.7 1.6-3.5 2.2-7 2.2l-4.8.1-.3-20.8L11 12h4.9c3.3 0 5.6.6 7.2 1.9zM46.1 3.6c-2 2.6-2.1 3.9-2.1 29.6v26.9l2.5 2.4c2.3 2.4 2.9 2.5 16 2.5H76V54.1l-10.2-.3-10.3-.3v-15l6.3-.3 6.2-.3V27H55V12h21V1H62.1c-13.9 0-14 0-16 2.6zM87 15.2c2.1 7.9 5.5 20.8 7.6 28.8 3.2 12.3 4.3 15 7 17.7 1.9 2 4.2 3.3 5.7 3.3 3.1 0 7.1-3.1 8.5-6.7 1-2.6 15.2-55.6 15.2-56.8 0-.3-2.8-.5-6.2-.3l-6.3.3-5.6 21.5c-3.5 13.6-5.8 20.8-6.2 19.5C105.9 40 96 1.9 96 1.4c0-.2-2.9-.4-6.4-.4h-6.4L87 15.2z"></path>
         </svg>
       </a>
+      <div class="posts">
+        <% @articles.each do |article| %>
+          <a href="<%= article.path %>" class="single-post">
+            <img src="<%= ProfileImage.new(article.user).get(150) %>">
+            <h3>
+              <%= article.title %>
+            </h3>
+            <h4>
+              <%= article.user.name %>
+            </h4>
+            <h5>
+              #<%= (article.cached_tag_list_array & ["shecoded", "theycoded", "shecodedally"]).first %>
+            </h5>
+          </a>
+        <% end %>
+      </div>
+      <%= render "layouts/footer" %>
     </div>
   </body>
 </html>

lib/tasks/fetch.rake

@@ -10,6 +10,7 @@ task periodic_cache_bust: :environment do
   cache_buster = CacheBuster.new
   cache_buster.bust("/feed.xml")
   cache_buster.bust("/badge")
+  cache_buster.bust("/shecoded")
 end
 
 task hourly_bust: :environment do