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 <alshedivat.maruan@gmail.com>
This commit is contained in:
Dinesh Natesan
GitHub
parent
0e4df831af
commit
e27fe2a021
|
|
@ -148,7 +148,7 @@ $ bundle exec jekyll build
|
||||||
which will (re-)generate the static webpage in the `_site/` folder.
|
which will (re-)generate the static webpage in the `_site/` folder.
|
||||||
Then simply copy the contents of the `_site/` foder to your hosting server.
|
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>
|
</details>
|
||||||
|
|
||||||
|
|
@ -244,7 +244,7 @@ scholar:
|
||||||
last_name: Einstein
|
last_name: Einstein
|
||||||
first_name: [Albert, A.]
|
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.
|
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,
|
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."]
|
- firstname: ["Nathan", "N."]
|
||||||
url: https://en.wikipedia.org/wiki/Nathan_Rosen
|
url: https://en.wikipedia.org/wiki/Nathan_Rosen
|
||||||
|
|
||||||
"Bach":
|
"Bach":
|
||||||
- firstname: ["Johann Sebastian", "J. S."]
|
- firstname: ["Johann Sebastian", "J. S."]
|
||||||
url: https://en.wikipedia.org/wiki/Johann_Sebastian_Bach
|
url: https://en.wikipedia.org/wiki/Johann_Sebastian_Bach
|
||||||
|
|
||||||
- firstname: ["Carl Philipp Emanuel", "C. P. E."]
|
- firstname: ["Carl Philipp Emanuel", "C. P. E."]
|
||||||
url: https://en.wikipedia.org/wiki/Carl_Philipp_Emanuel_Bach
|
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>
|
</details>
|
||||||
|
|
||||||
|
|
|
||||||
18
_config.yml
18
_config.yml
|
|
@ -166,13 +166,17 @@ scholar:
|
||||||
# Optional Features
|
# Optional Features
|
||||||
# -----------------------------------------------------------------------------
|
# -----------------------------------------------------------------------------
|
||||||
|
|
||||||
enable_google_analytics: false
|
enable_google_analytics: false # enables google analytics
|
||||||
enable_panelbear_analytics: false
|
enable_panelbear_analytics: false # enables panelbear analytics
|
||||||
enable_mansory: true
|
enable_mansory: true # enables automatic project cards arangement
|
||||||
enable_math: true
|
enable_math: true # enables math typesetting (uses MathJax)
|
||||||
enable_tooltips: false
|
enable_tooltips: false # enables automatic tooltip links generated
|
||||||
enable_darkmode: true
|
# for each section titles on pages and posts
|
||||||
enable_navbar_social: false
|
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
|
# Library versions
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -4,44 +4,54 @@ title: projects
|
||||||
permalink: /projects/
|
permalink: /projects/
|
||||||
description: A growing collection of your cool projects.
|
description: A growing collection of your cool projects.
|
||||||
nav: true
|
nav: true
|
||||||
|
display_categories: [work, fun]
|
||||||
|
horizontal: false
|
||||||
---
|
---
|
||||||
|
<div class="projects">
|
||||||
<div class="projects grid">
|
{% if site.enable_project_categories and page.display_categories %}
|
||||||
|
<!-- Display categorized projects -->
|
||||||
{% assign sorted_projects = site.projects | sort: "importance" %}
|
{% for category in page.display_categories %}
|
||||||
{% for project in sorted_projects %}
|
<h2 class="category">{{category}}</h2>
|
||||||
<div class="grid-item">
|
{% assign categorized_projects = site.projects | where: "category", category %}
|
||||||
{% if project.redirect %}
|
{% assign sorted_projects = categorized_projects | sort: "importance" %}
|
||||||
<a href="{{ project.redirect }}" target="_blank">
|
<!-- Generate cards for each project -->
|
||||||
{% else %}
|
{% if page.horizontal %}
|
||||||
<a href="{{ project.url | relative_url }}">
|
<div class="container">
|
||||||
{% endif %}
|
<div class="row row-cols-2">
|
||||||
<div class="card hoverable">
|
{% for project in sorted_projects %}
|
||||||
{% if project.img %}
|
{% include projects_horizontal.html %}
|
||||||
<img src="{{ project.img | relative_url }}" alt="project thumbnail">
|
{% endfor %}
|
||||||
{% 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>
|
</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>
|
</div>
|
||||||
</a>
|
{% else %}
|
||||||
</div>
|
<div class="grid">
|
||||||
{% endfor %}
|
{% for project in sorted_projects %}
|
||||||
|
{% include projects.html %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ title: project 1
|
||||||
description: a project with a background image
|
description: a project with a background image
|
||||||
img: /assets/img/12.jpg
|
img: /assets/img/12.jpg
|
||||||
importance: 1
|
importance: 1
|
||||||
|
category: work
|
||||||
---
|
---
|
||||||
|
|
||||||
Every project has a beautiful feature showcase page.
|
Every project has a beautiful feature showcase page.
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ title: project 2
|
||||||
description: a project with a background image
|
description: a project with a background image
|
||||||
img: /assets/img/3.jpg
|
img: /assets/img/3.jpg
|
||||||
importance: 2
|
importance: 2
|
||||||
|
category: work
|
||||||
---
|
---
|
||||||
|
|
||||||
Every project has a beautiful feature showcase page.
|
Every project has a beautiful feature showcase page.
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ description: a project that redirects to another website
|
||||||
img: /assets/img/7.jpg
|
img: /assets/img/7.jpg
|
||||||
redirect: https://unsplash.com
|
redirect: https://unsplash.com
|
||||||
importance: 3
|
importance: 3
|
||||||
|
category: work
|
||||||
---
|
---
|
||||||
|
|
||||||
Every project has a beautiful feature showcase page.
|
Every project has a beautiful feature showcase page.
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ title: project 4
|
||||||
description: another without an image
|
description: another without an image
|
||||||
img:
|
img:
|
||||||
importance: 3
|
importance: 3
|
||||||
|
category: fun
|
||||||
---
|
---
|
||||||
|
|
||||||
Every project has a beautiful feature showcase page.
|
Every project has a beautiful feature showcase page.
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ title: project 5
|
||||||
description: a project with a background image
|
description: a project with a background image
|
||||||
img: /assets/img/1.jpg
|
img: /assets/img/1.jpg
|
||||||
importance: 3
|
importance: 3
|
||||||
|
category: fun
|
||||||
---
|
---
|
||||||
|
|
||||||
Every project has a beautiful feature showcase page.
|
Every project has a beautiful feature showcase page.
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ title: project 6
|
||||||
description: a project with no image
|
description: a project with no image
|
||||||
img:
|
img:
|
||||||
importance: 4
|
importance: 4
|
||||||
|
category: fun
|
||||||
---
|
---
|
||||||
|
|
||||||
Every project has a beautiful feature showcase page.
|
Every project has a beautiful feature showcase page.
|
||||||
|
|
|
||||||
|
|
@ -272,6 +272,7 @@ footer.sticky-bottom {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.active .page-link {
|
&.active .page-link {
|
||||||
|
color: $white-color;
|
||||||
background-color: var(--global-theme-color);
|
background-color: var(--global-theme-color);
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--global-theme-color);
|
background-color: var(--global-theme-color);
|
||||||
|
|
@ -294,24 +295,56 @@ footer.sticky-bottom {
|
||||||
// Projects
|
// Projects
|
||||||
|
|
||||||
.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 {
|
.grid-item {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: black;
|
color: black;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--global-theme-color);
|
color: var(--global-theme-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.card-title {
|
||||||
|
color: $black-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.card {
|
|
||||||
img {
|
h2.category {
|
||||||
width: 100%;
|
color: $grey-color-light;
|
||||||
}
|
border-bottom: 1px solid $grey-color-light;
|
||||||
.card-title {
|
padding-top: 0.5rem;
|
||||||
color: $black-color;
|
margin-top: 2rem;
|
||||||
}
|
margin-bottom: 1rem;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue