Add featured projects section

Author: Dhruvi16

content/contents.lr

@@ -70,3 +70,5 @@ links_plugins:
   <h5 class="link-heading"><a href="https://opensource.creativecommons.org/ccsearch-browser-extension/" class="has-text-forest-green">CC Search Browser Extension</a></h5>
   <p class="link-caption">Search the Catalog using our Extension.</p>
 </div>
+#### featured-projects ####
+title: Featured Projects

flowblocks/featured-projects.ini

@@ -0,0 +1,6 @@
+[block]
+name = Featured Projects
+
+[fields.title]
+label = Title
+type = string

models/home.ini

@@ -9,4 +9,4 @@ type = string
 [fields.block_content]
 label = Block Content
 type = flow
-flow_blocks = hero, get-involved
+flow_blocks = hero, get-involved, featured-projects

themes/vocabulary_theme/templates/blocks/featured-projects.html

@@ -0,0 +1,46 @@
+<section class="featured-projects">
+  <div class="container">
+    <div class="level">
+      <h4 class="is-paddingless level-left">
+        {{ this.title }}
+      </h4>
+      <span class="level-right">
+        <a class="project-page-link" href="/contributing-code/projects/">See all available projects <i class="icon angle-right"></i></a>
+      </span>
+    </div>
+    <div class="project-list columns">
+      {% for repo in bag('repos.repos') %}
+      {% if repo.featured %}
+        <article class="card entry-post vertical project-index column is-one-third">
+          <div class="card-content">
+            <h4 class="card-title b-header"><a href="{{ repo.url }}">{{ repo.english_name }}</a></h4>
+            <a class="button is-text tiny site-link" href="{{ repo.website }}">
+              <span>Visit site</span>
+              <i class="icon external-link"></i>
+            </a>
+            <div class="content">
+              {{ repo.description }}
+            </div>
+            <div class="labels">
+              {% for technology in repo.technologies %}
+                <button class="button tag">{{ technology }}</button>
+              {% endfor %}
+            </div>
+            <div class="external-links">
+              <a class="button is-text tiny" href="{{ repo.url }}">
+                <i class="icon github"></i>
+                <span class="link-content">Github Repository</span>
+              </a>
+              <br>
+              <a class="button is-text tiny">
+                <i class="icon slack"></i>
+                <span class="link-content">Slack channel (#{{ repo.slack }})</span>
+              </a>
+            </div>
+          </div>
+        </article>
+      {% endif %}
+    {% endfor %}
+    </div>
+  </div>
+</section>

webpack/sass/main.scss

@@ -90,6 +90,40 @@ a {
   }
 }
 
+.featured-projects {
+  @extend .padding-vertical-xxl;
+
+  .container {
+    @extend .padding-horizontal-big;
+  }
+
+  .project-page-link {
+    @extend .has-color-forest-green;
+    @extend .body-normal;
+
+    line-height: 1.5rem;
+    font-weight: bold;
+    text-decoration: none;
+
+    .icon {
+      @extend .padding-left-small;
+      @extend .padding-top-smaller;
+    }
+  }
+
+  .project-list {
+    @extend .padding-top-bigger;
+    @extend .padding-bottom-larger;
+
+    .column {
+      @extend .margin-horizontal-big;
+      @extend .margin-bottom-larger;
+
+      height: 100%;
+    }
+  }
+}
+
 .breadcrumb-container {
   border-top: 4px solid $color-forest-green;
   background-color: $color-lighter-gray;