Categories for projects and an optional horizontal project card style…

… (#224) * Add webpage to academic pages list * adding panelbear analytics * added categories for projects and horizontal mode display for projects * rewrote the code to ensure it works properly with current project definitions * Style adjustments Co-authored-by: Maruan Al-Shedivat <[email protected]>
kushalarora · Apr 11, 2021 · e27fe2a · e27fe2a
1 parent 0e4df83
commit e27fe2a
Show file tree

Hide file tree

Showing 12 changed files with 178 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -148,7 +148,7 @@ $ bundle exec jekyll build
 which will (re-)generate the static webpage in the `_site/` folder.
 Then simply copy the contents of the `_site/` foder to your hosting server.
 
-**Note:** Make sure to correctly set the `url` and `baseurl` fields in `_config.yml` before building the webpage. If you are deploying your webpage to `your-domain.com/your-project/`, you must set `url: your-domain.com` and `baseurl: /your-project/`. If you are deploing directly to `your-domain.com`, leave `baseurl` blank. 
+**Note:** Make sure to correctly set the `url` and `baseurl` fields in `_config.yml` before building the webpage. If you are deploying your webpage to `your-domain.com/your-project/`, you must set `url: your-domain.com` and `baseurl: /your-project/`. If you are deploing directly to `your-domain.com`, leave `baseurl` blank.
 
 </details>
 
@@ -244,7 +244,7 @@ scholar:
   last_name: Einstein
   first_name: [Albert, A.]
 ```
-If the entry matches the last name and one form of the first names, it will be underlined. 
+If the entry matches the last name and one form of the first names, it will be underlined.
 Keep meta-information about your co-authors in `_data/coauthors.yml` and Jekyll will insert links to their webpages automatically.
 The coauthor data format in `_data/coauthors.yml` is as follows,
 ```
@@ -260,14 +260,14 @@ The coauthor data format in `_data/coauthors.yml` is as follows,
   - firstname: ["Nathan", "N."]
     url: https://en.wikipedia.org/wiki/Nathan_Rosen
 
-"Bach": 
+"Bach":
   - firstname: ["Johann Sebastian", "J. S."]
     url: https://en.wikipedia.org/wiki/Johann_Sebastian_Bach
 
   - firstname: ["Carl Philipp Emanuel", "C. P. E."]
     url: https://en.wikipedia.org/wiki/Carl_Philipp_Emanuel_Bach
 ```
-If the entry matches one of the combinations of the last names and the first names, it will be highlighted and linked to the url provided. 
+If the entry matches one of the combinations of the last names and the first names, it will be highlighted and linked to the url provided.
 
 </details>
 

diff --git a/_config.yml b/_config.yml
@@ -166,13 +166,17 @@ scholar:
 # Optional Features
 # -----------------------------------------------------------------------------
 
-enable_google_analytics:    false
-enable_panelbear_analytics: false
-enable_mansory:             true
-enable_math:                true
-enable_tooltips:            false
-enable_darkmode:            true
-enable_navbar_social:       false
+enable_google_analytics:    false  # enables google analytics
+enable_panelbear_analytics: false  # enables panelbear analytics
+enable_mansory:             true   # enables automatic project cards arangement
+enable_math:                true   # enables math typesetting (uses MathJax)
+enable_tooltips:            false  # enables automatic tooltip links generated
+                                   # for each section titles on pages and posts
+enable_darkmode:            true   # enables switching between light/dark modes
+enable_navbar_social:       false  # enables displaying social links in the
+                                   # navbar on the about page
+enable_project_categories:  true   # enables categorization of projects into
+                                   # multiple categories
 
 # -----------------------------------------------------------------------------
 # Library versions

diff --git a/_includes/projects.html b/_includes/projects.html
@@ -0,0 +1,32 @@
+<div class="grid-item">
+  {% if project.redirect %}
+  <a href="{{ project.redirect }}" target="_blank">
+  {% else %}
+  <a href="{{ project.url | relative_url }}">
+  {% endif %}
+    <div class="card hoverable">
+      {% if project.img %}
+      <img src="{{ project.img | relative_url }}" alt="project thumbnail">
+      {% endif %}
+      <div class="card-body">
+        <h2 class="card-title text-lowercase">{{ project.title }}</h2>
+        <p class="card-text">{{ project.description }}</p>
+        <div class="row ml-1 mr-1 p-0">
+          {% if project.github %}
+          <div class="github-icon">
+            <div class="icon" data-toggle="tooltip" title="Code Repository">
+              <a href="{{ project.github }}" target="_blank"><i class="fab fa-github gh-icon"></i></a>
+            </div>
+            {% if project.github_stars %}
+            <span class="stars" data-toggle="tooltip" title="GitHub Stars">
+              <i class="fas fa-star"></i>
+              <span id="{{ project.github_stars }}-stars"></span>
+            </span>
+            {% endif %}
+          </div>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </a>
+</div>
diff --git a/_includes/projects_horizontal.html b/_includes/projects_horizontal.html
@@ -0,0 +1,40 @@
+<div class="card-item col">
+  {% if project.redirect %}
+  <a href="{{ project.redirect }}" target="_blank">
+  {% else %}
+  <a href="{{ project.url | relative_url }}">
+  {% endif %}
+    <div class="card hoverable">
+      <div class="row g-0">
+        {% if project.img %}
+        <div class="card-img col-md-6">
+          <img src="{{ project.img | relative_url }}" alt="project thumbnail">
+        </div>
+        <div class="col-md-6">
+        {% else %}
+        <div class="col-md-12">
+        {% endif %}
+          <div class="card-body">
+            <h3 class="card-title text-lowercase">{{ project.title }}</h3>
+            <p class="card-text">{{ project.description }}</p>
+            <div class="row ml-1 mr-1 p-0">
+              {% if project.github %}
+              <div class="github-icon">
+                <div class="icon" data-toggle="tooltip" title="Code Repository">
+                  <a href="{{ project.github }}" target="_blank"><i class="fab fa-github gh-icon"></i></a>
+                </div>
+                {% if project.github_stars %}
+                <span class="stars" data-toggle="tooltip" title="GitHub Stars">
+                  <i class="fas fa-star"></i>
+                  <span id="{{ project.github_stars }}-stars"></span>
+                </span>
+                {% endif %}
+              </div>
+              {% endif %}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </a>
+</div>
diff --git a/_pages/projects.md b/_pages/projects.md
@@ -4,44 +4,54 @@ title: projects
 permalink: /projects/
 description: A growing collection of your cool projects.
 nav: true
+display_categories: [work, fun]
+horizontal: false
 ---
-
-<div class="projects grid">
-
-  {% assign sorted_projects = site.projects | sort: "importance" %}
-  {% for project in sorted_projects %}
-  <div class="grid-item">
-    {% if project.redirect %}
-    <a href="{{ project.redirect }}" target="_blank">
-    {% else %}
-    <a href="{{ project.url | relative_url }}">
-    {% endif %}
-      <div class="card hoverable">
-        {% if project.img %}
-        <img src="{{ project.img | relative_url }}" alt="project thumbnail">
-        {% endif %}
-        <div class="card-body">
-          <h2 class="card-title text-lowercase">{{ project.title }}</h2>
-          <p class="card-text">{{ project.description }}</p>
-          <div class="row ml-1 mr-1 p-0">
-            {% if project.github %}
-            <div class="github-icon">
-              <div class="icon" data-toggle="tooltip" title="Code Repository">
-                <a href="{{ project.github }}" target="_blank"><i class="fab fa-github gh-icon"></i></a>
-              </div>
-              {% if project.github_stars %}
-              <span class="stars" data-toggle="tooltip" title="GitHub Stars">
-                <i class="fas fa-star"></i>
-                <span id="{{ project.github_stars }}-stars"></span>
-              </span>
-              {% endif %}
-            </div>
-            {% endif %}
+<div class="projects">
+  {% if site.enable_project_categories and page.display_categories %}
+  <!-- Display categorized projects -->
+    {% for category in page.display_categories %}
+      <h2 class="category">{{category}}</h2>
+      {% assign categorized_projects = site.projects | where: "category", category %}
+      {% assign sorted_projects = categorized_projects | sort: "importance" %}
+      <!-- Generate cards for each project -->
+      {% if page.horizontal %}
+        <div class="container">
+          <div class="row row-cols-2">
+          {% for project in sorted_projects %}
+            {% include projects_horizontal.html %}
+          {% endfor %}
           </div>
         </div>
+      {% else %}
+        <div class="grid">
+          {% for project in sorted_projects %}
+            {% include projects.html %}
+          {% endfor %}
+        </div>
+      {% endif %}
+    {% endfor %}
+
+  {% else %}
+  <!-- Display projects without categories -->
+    {% assign sorted_projects = site.projects | sort: "importance" %}
+    <!-- Generate cards for each project -->
+    {% if page.horizontal %}
+      <div class="container">
+        <div class="row row-cols-2">
+        {% for project in sorted_projects %}
+          {% include projects_hrz.html %}
+        {% endfor %}
+        </div>
+      </div>
+    {% else %}
+      <div class="grid">
+        {% for project in sorted_projects %}
+          {% include projects.html %}
+        {% endfor %}
       </div>
-    </a>
-  </div>
-{% endfor %}
+    {% endif %}
+
+  {% endif %}
 
 </div>
diff --git a/_projects/1_project.markdown b/_projects/1_project.markdown
@@ -4,6 +4,7 @@ title: project 1
 description: a project with a background image
 img: /assets/img/12.jpg
 importance: 1
+category: work
 ---
 
 Every project has a beautiful feature showcase page.

diff --git a/_projects/2_project.markdown b/_projects/2_project.markdown
@@ -4,6 +4,7 @@ title: project 2
 description: a project with a background image
 img: /assets/img/3.jpg
 importance: 2
+category: work
 ---
 
 Every project has a beautiful feature showcase page.

diff --git a/_projects/3_project.markdown b/_projects/3_project.markdown
@@ -5,6 +5,7 @@ description: a project that redirects to another website
 img: /assets/img/7.jpg
 redirect: https://unsplash.com
 importance: 3
+category: work
 ---
 
 Every project has a beautiful feature showcase page.

diff --git a/_projects/4_project.markdown b/_projects/4_project.markdown
@@ -4,6 +4,7 @@ title: project 4
 description: another without an image
 img:
 importance: 3
+category: fun
 ---
 
 Every project has a beautiful feature showcase page.

diff --git a/_projects/5_project.markdown b/_projects/5_project.markdown
@@ -4,6 +4,7 @@ title: project 5
 description: a project with a background image
 img: /assets/img/1.jpg
 importance: 3
+category: fun
 ---
 
 Every project has a beautiful feature showcase page.

diff --git a/_projects/6_project.markdown b/_projects/6_project.markdown
@@ -4,6 +4,7 @@ title: project 6
 description: a project with no image
 img:
 importance: 4
+category: fun
 ---
 
 Every project has a beautiful feature showcase page.

diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -272,6 +272,7 @@ footer.sticky-bottom {
       }
     }
     &.active .page-link {
+      color: $white-color;
       background-color: var(--global-theme-color);
       &:hover {
         background-color: var(--global-theme-color);
@@ -294,25 +295,57 @@ footer.sticky-bottom {
 // Projects
 
 .projects {
+  .card-item {
+    width: auto;
+    margin-bottom: 10px;
+
+    a {
+      text-decoration: none;
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+    }
+
+    .card {
+      img {
+        width: 100%;
+      }
+    }
+  }
+
   .grid-item {
     width: 250px;
     margin-bottom: 10px;
+
     a {
       color: black;
       text-decoration: none;
+
       &:hover {
         color: var(--global-theme-color);
       }
     }
-  }
-  .card { 
-    img {
-      width: 100%;
-    }
-    .card-title {
-      color: $black-color;
+
+    .card {
+      img {
+        width: 100%;
+      }
+      .card-title {
+        color: $black-color;
+      }
     }
   }
+
+  h2.category {
+    color: $grey-color-light;
+    border-bottom: 1px solid $grey-color-light;
+    padding-top: 0.5rem;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    text-align: right;
+  }
 }