Merge pull request #432 from ZeusWPI/blogpost-refactor-and-scss-fix

Redesign blogpost previews

Gemfile

@@ -17,10 +17,12 @@ gem 'words_counted', git: 'https://github.com/werthen/words_counted'
 
 group :development do
   gem 'adsf'
-  gem 'thin'
+  # puma instead of thin, see https://github.com/nanoc/nanoc/issues/1499
+  gem 'puma'
   gem 'highline'
   gem 'terminal-notifier'
   gem 'terminal-notifier-guard'
+  gem 'nanoc-live'
 end
 
 group :production do

Gemfile.lock

@@ -11,20 +11,28 @@ GEM
       public_suffix (>= 2.0.2, < 5.0)
     adsf (1.4.5)
       rack (>= 1.0.0, < 3.0.0)
-    autoprefixer-rails (10.1.0.0)
+    adsf-live (1.4.5)
+      adsf (~> 1.3)
+      em-websocket (~> 0.5)
+      eventmachine (~> 1.2)
+      listen (~> 3.0)
+      rack-livereload (~> 0.3)
+    autoprefixer-rails (10.2.4.0)
       execjs
     builder (3.2.4)
     coderay (1.1.3)
     colored (1.2)
-    concurrent-ruby (1.1.7)
+    concurrent-ruby (1.1.8)
     cri (2.15.11)
-    daemons (1.3.1)
     ddmemoize (1.0.0)
       ddmetrics (~> 1.0)
       ref (~> 2.0)
     ddmetrics (1.0.1)
     ddplugin (1.0.3)
     diff-lcs (1.4.4)
+    em-websocket (0.5.2)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
     eventmachine (1.2.7)
     execjs (2.7.0)
     ffi (1.14.2)
@@ -48,6 +56,7 @@ GEM
       concurrent-ruby (~> 1.0)
     highline (2.0.3)
     htmlcompressor (0.4.0)
+    http_parser.rb (0.6.0)
     icalendar (2.7.0)
       ice_cube (~> 0.16)
     ice_cube (0.16.3)
@@ -56,7 +65,7 @@ GEM
     kramdown (2.3.0)
       rexml
     libv8 (8.4.255.0)
-    listen (3.4.0)
+    listen (3.4.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     lumberjack (1.2.8)
@@ -64,12 +73,12 @@ GEM
     mini_portile2 (2.5.0)
     mini_racer (0.3.1)
       libv8 (~> 8.4.255)
-    nanoc (4.11.22)
+    nanoc (4.12.0)
       addressable (~> 2.5)
       colored (~> 1.2)
       nanoc-checking (~> 1.0)
-      nanoc-cli (= 4.11.22)
+      nanoc-cli (= 4.12.0)
-      nanoc-core (= 4.11.22)
+      nanoc-core (= 4.12.0)
       nanoc-deploying (~> 1.0)
       parallel (~> 1.12)
       tty-command (~> 0.8)
@@ -77,12 +86,12 @@ GEM
     nanoc-checking (1.0.1)
       nanoc-cli (~> 4.11, >= 4.11.15)
       nanoc-core (~> 4.11, >= 4.11.15)
-    nanoc-cli (4.11.22)
+    nanoc-cli (4.12.0)
       cri (~> 2.15)
       diff-lcs (~> 1.3)
-      nanoc-core (= 4.11.22)
+      nanoc-core (= 4.12.0)
       zeitwerk (~> 2.1)
-    nanoc-core (4.11.22)
+    nanoc-core (4.12.0)
       concurrent-ruby (~> 1.1)
       ddmemoize (~> 1.0)
       ddmetrics (~> 1.0)
@@ -97,8 +106,14 @@ GEM
       nanoc-checking (~> 1.0)
       nanoc-cli (~> 4.11, >= 4.11.15)
       nanoc-core (~> 4.11, >= 4.11.15)
+    nanoc-live (1.0.0)
+      adsf-live (~> 1.4)
+      listen (~> 3.0)
+      nanoc-cli (~> 4.11, >= 4.11.14)
+      nanoc-core (~> 4.11, >= 4.11.14)
     nenv (0.3.0)
-    nokogiri (1.11.0)
+    nio4r (2.5.5)
+    nokogiri (1.11.1)
       mini_portile2 (~> 2.5.0)
       racc (~> 1.4)
     notiffany (0.1.3)
@@ -108,12 +123,16 @@ GEM
     parallel (1.20.1)
     pastel (0.8.0)
       tty-color (~> 0.5)
-    pry (0.13.1)
+    pry (0.14.0)
       coderay (~> 1.1)
       method_source (~> 1.0)
     public_suffix (4.0.6)
+    puma (5.2.1)
+      nio4r (~> 2.0)
     racc (1.5.2)
     rack (2.2.3)
+    rack-livereload (0.3.17)
+      rack
     rainpress (1.0.1)
     rb-fsevent (0.10.4)
     rb-inotify (0.10.1)
@@ -127,14 +146,10 @@ GEM
     slow_enumerator_tools (1.1.0)
     terminal-notifier (2.0.0)
     terminal-notifier-guard (1.7.0)
-    thin (1.8.0)
+    thor (1.1.0)
-      daemons (~> 1.0, >= 1.0.9)
-      eventmachine (~> 1.0, >= 1.0.4)
-      rack (>= 1, < 3)
-    thor (1.0.1)
     tomlrb (1.3.0)
     tty-color (0.6.0)
-    tty-command (0.10.0)
+    tty-command (0.10.1)
       pastel (~> 0.8)
     tty-platform (0.3.0)
     tty-which (0.4.2)
@@ -163,12 +178,13 @@ DEPENDENCIES
   kramdown
   mini_racer
   nanoc
+  nanoc-live
   pandoc-ruby
+  puma
   rainpress
   sassc
   terminal-notifier
   terminal-notifier-guard
-  thin
   typogruby
   uglifier (>= 4.0.0)
   w3c_validators

Rules

@@ -197,10 +197,13 @@ compile '/assets/scripts/**/*.js' do
   filter :uglify_js, harmony: true if production?
 end
 
-ignore '/assets/stylesheets/includes/**/*'
 ignore '/data/**/*'
 
+ignore '/assets/stylesheets/includes/**/*'
 compile '/assets/stylesheets/**/*.scss' do
+  # This filter is necessary for the workaround present in main.scss and deals with out of date dependencies
+  filter :erb
+
   sass_opts = {
     syntax: :scss,
     load_paths: ['content/assets/stylesheets']

content/assets/stylesheets/includes/blogpost.scss

@@ -66,21 +66,21 @@
 }
 
 .blog-preview {
-  position: relative;
+  .blogpreview-heading {
-
+    display: flex;
-  // Fadeout
+    > a {
-  &::after {
+      flex-grow: 1;
-    content: '';
+      margin-bottom: 0;
-    position: absolute;
+      display: inline-block;
-    bottom: 20px;
+    }
-    left: 0;
+  }
-    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100;White+to+Transparent */
+  > .blogpreview-extra {
-    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
+    color: #7a7a7a;
-    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
+    display: inline-block;
-    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    margin-bottom: 5px;
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
+  }
-    height: 100px;
+  > .blogpreview-tags {
-    width: 100%;
+    color: #7a7a7a;
   }
 }
 

content/assets/stylesheets/includes/general.scss

@@ -223,3 +223,11 @@ footer.footer {
 .has-small-caps {
   font-variant: small-caps;
 }
+
+.underline--magical {
+  background-image: -webkit-linear-gradient(to right,  $zeus-orange, #FFFFFF);  /* Chrome 10-25, Safari 5.1-6 */
+  background-image: linear-gradient(to right, $zeus-orange, #FFFFFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  background-repeat: no-repeat;
+  background-size: 100% 0.15em;
+  background-position: 0 99%;
+}

content/assets/stylesheets/main.scss

@@ -1,15 +1,14 @@
+/* KEEP THIS VVVV */
+/* HACK The following line of code does nothing. It only serves as a way for nanoc to recognize dependencies with all the sub scss files */
+// <% @items.find_all('/assets/stylesheets/includes/*').each {|e| e.raw_content } %>
+/* KEEP THIS ^^^^ */
+
 @import "includes/variables";
 
 @import "node_modules/bulma/bulma";
 @import "node_modules/bulma-divider/dist/css/bulma-divider";
 @import "node_modules/bulma-timeline/dist/css/bulma-timeline";
 
-// TODO: Remove this once FF64.0b2+ fixes this fustercluck
-@-moz-document url-prefix() {
-  .tile {
-    min-height: auto;
-  }
-}
 
 // Sticky footer
 body {

content/index.erb

@@ -14,15 +14,36 @@
 
 <div id="homepage">
   <div class="tile is-vertical is-ancestor">
-    <%= if studytime? then render '/tiles/blokmap.*'end %>
+    <% if studytime? %>
+      <%= render '/tiles/blokmap.*' %>
+    <% end %>
     <!--next event -->
     <div class="tile is-parent">
-      <%= render '/partials/_events_tile.*', event: front_page_events[0] %>
+      <div class="tile is-child">
+        <div class="block has-text-centered">
+          <span class="title is-2 underline--magical">Upcoming Events</span>
+        </div>
+        <% unless upcoming_events.empty? %>
+          <% upcoming_events.each do |event| %>
+            <div class="block">
+              <%= render '/partials/_events_tile.*', event: event %>
+            </div>
+          <% end %>
+        <% else %>
+          <div class="block content has-text-centered">
+            There are currently no upcoming events. If you have a suggestion, let us know on mattermost in <a href="https://mattermost.zeus.gent/zeus/channels/events">~events</a>!
+            <hr>
+          </div>
+        <% end %>
+      </div>
     </div>
     <div class="tile">
-      <!--top coders -->
+      <div class="tile is-parent">
-      <div class="tile is-parent is-6">
+        <div class="tile is-child">
-        <div class="tile is-child box gamification-tile">
+          <div class="block has-text-centered">
+            <span class="title is-2 underline--magical">Top Coders</span>
+          </div>
+          <div class="box gamification-tile">
             <div class="content">
               <div class="tile-header">
                 <h1 class="has-text-centered">
@@ -36,27 +57,44 @@
               </div>
             </div>
           </div>
+
+
+          <div class="block has-text-centered">
+            <span class="title is-2 underline--magical">Previous Events</span>
           </div>
-      <!-- latest blogpost -->
+          <% previous_events[0..3].each do |event| %>
-      <div class="tile is-6 is-parent">
+            <div class="block">
-        <%= render '/partials/_blog_preview.*', post: sorted_articles.first %>
-        </div>
-    </div>
-    <div class="tile">
-      <div class="tile is-vertical">
-        <% front_page_events[1..3].each do |event| %>
-        <div class="tile is-parent ">
               <%= render '/partials/_events_tile.*', event: event %>
             </div>
           <%end%>
         </div>
-      <div class="tile is-vertical">
+      </div>
-      <% sorted_articles[1..3].each do |post| %>
       <div class="tile is-parent">
-          <%= render '/partials/_blog_preview.*', post: post %>
+        <div class="tile is-child">
-        </div>
+          <div class='content has-text-centered box'>
-      <%end%>
+            <h2>About Zeus WPI</h2>
+            <p>
+            Zeus WPI is the student association for Computer Science at Ghent University. Our goal is to provide a stimulating environment for motivated students looking to expand their skills by engaging in interesting real-world projects.
+            </p>
 
+            <p>
+            We organize various tech related talks by experts (eg. professors, PhD's, Richard Stallman, Julia Reda, ...), hands-on coding events and introductory lectures for cool technologies. Together we build interesting applications for Ghent University students (Hydra), for FaculteitenKonvent and 12urenloop, and ofcourse for ourselves. 
+            </p>
+          </div>
+          <div class="block has-text-centered">
+            <span class="title is-2 underline--magical">Blogposts</span>
+          </div>
+          <% sorted_articles[0..3].each do |post| %>
+            <%= render '/partials/_blog_preview.*', post: post %>
+          <%end%>
+        </div>
+      </div>
+    </div>
+    <div class="tile">
+      <!--top coders -->
+      <div class="tile is-parent">
+        <div class="tile is-child">
+        </div>
       </div>
     </div>
   </div>

layouts/blogs.erb

@@ -42,13 +42,7 @@
   <div class="column">
     <div class="columns is-multiline">
       <div class="column">
-      <% posts_in_year_or_with_tag(item).each_with_index.select {|e, i| i.even?}.map(&:first).each do |post| %>
+      <% posts_in_year_or_with_tag(item).each do |post| %>
-        <%= render '/partials/_blog_preview.*', post: post %>
-      <% end %>
-      </div>
-
-      <div class="column">
-      <% posts_in_year_or_with_tag(item).each_with_index.reject {|e, i| i.even?}.map(&:first).each do |post| %>
         <%= render '/partials/_blog_preview.*', post: post %>
       <% end %>
       </div>

layouts/partials/_blog_preview.erb

@@ -1,16 +1,21 @@
-<a class="box blog-preview" href="<%= relative_path_to(post) %>">
+<div class="content blog-preview">
-  <div class="content">
+  <div class="blogpreview-heading">
-    <h3 class="has-text-centered"><%= post[:title] %></h3>
+    <a class="title is-3" href="<%= relative_path_to(post) %>">
-    <p class="has-text-centered">
+      <%= post[:title] %>
-      <%= post[:description] %>
-    </p>
-    <h5 class="has-text-centered">
-      <% if post[:author] %>
-      door <%= post[:author] %>
-      <% end %>
-    </h5>
-    <small><%= post[:created_at] %></small>
-    <br>
-    <%= excerptize(post.reps[:text].compiled_content, length: 200).tr("\n", ' ')%>
-  </div>
     </a>
+    <div class="blogpreview-tags">
+      <% post[:tags]&.each do |tag| %>
+        <!-- The following code is a bit hacky, fix when necessary -->
+        <a class="tag is-normal is-rounded" href=<%= "/blog/#{tag.gsub(' ', '_')}/index.html" %>>
+          <%= tag %>
+        </a>
+      <% end %>
+    </div>
+  </div>
+  <small class="blogpreview-extra"><%= post[:created_at] %><% if post[:author] %> • <%= post[:author] %> <% end %> • <%= post[:description] %></small>
+  <br/>
+  <p>
+  <%= excerptize(post.reps[:text].compiled_content, length: 500).tr("\n", ' ')%>
+  </p>
+  <hr>
+</div>

layouts/partials/_events_tile.erb

@@ -12,9 +12,9 @@
   <img class="event-tile-image" src="<%= @event[:image] %>" alt="">
   <% end %>
     <div class="event-text">
-      <h1 class="has-text-centered">
+      <h2 class="has-text-centered">
         <%= @event[:title] %>
-      </h1>
+      </h2>
 
       <div class="description has-text-centered">
         <%= @event[:description] %>

lib/helpers/events.rb

@@ -65,8 +65,8 @@ module EventsHelper
     @items.find_all('/events/*/*/main.md')
   end
 
-  def front_page_events
+  def previous_events
-    upcoming_events + all_events.reverse[(upcoming_events.length)..]
+    all_events.reverse[(upcoming_events.length)..]
   end
 
   def sub_events(grouped_event)