Feature: added "award" for publications (#2324)

This PR adds an "award" button to publications.
It takes the `award` value from the bibtex entry and displays(incl.
Markdown rendering) the text in a box similarly to abstract and bibtex.

User can set the entry `award_name` to configure the value. See example
config with `award_name: Nobel Prize`.

The color of the award box can be configured in `_base.scss`.

Note, there is a similar PR #2175, it I saw to issues with:

1. There was no progress
2. The award button just prints the text directly in the button,
similarly to `award_name`. Long award names could clutter the webpage.
3. IMHO, it brokes the current al-folio design, since butons do have a
fixed size/text. However, variable prize names are also possible with
this PR.
***
Pictures:

Default. Text are hidden:

<img width="708" alt="grafik"
src="https://github.com/alshedivat/al-folio/assets/1998723/1221c82c-c384-4297-807e-39385e2ce4fd">

Additional info is shown when the button is clicked. Markdown supported.

<img width="684" alt="grafik"
src="https://github.com/alshedivat/al-folio/assets/1998723/2354aeee-12b0-4d32-b194-5d2ea80d8363">

Only one text box shown at the same time, like it is with "ABS" and
"BIB":
<img width="691" alt="grafik"
src="https://github.com/alshedivat/al-folio/assets/1998723/d3937bb9-d9c2-47ac-b819-b92aec3d916a">

***

Feedback welcome.

You can also check [my
website](https://christianmainka.de/publications/awarded), which was the
base for this PR.

_bibliography/papers.bib

@@ -83,6 +83,22 @@
   year={1905}
 }
 
+@Article{einstein1905photoelectriceffect,
+  bibtex_show={true},
+  abbr={Ann. Phys.},
+  title="{{\"U}ber einen die Erzeugung und Verwandlung des Lichtes betreffenden heuristischen Gesichtspunkt}",
+  author={Albert Einstein},
+  abstract={This is the abstract text.},
+  journal={Ann. Phys.},
+  volume={322},
+  number={6},
+  pages={132--148},
+  year={1905},
+  doi={10.1002/andp.19053220607},
+  award={Albert Einstein receveid the **Nobel Prize in Physics** 1921 *for his services to Theoretical Physics, and especially for his discovery of the law of the photoelectric effect*},
+  award_name={Nobel Prize}
+}
+
 @book{przibram1967letters,
   bibtex_show={true},
   title={Letters on wave mechanics},

_config.yml

@@ -323,7 +323,7 @@ enable_publication_badges:
 
 # Filter out certain bibtex entry keywords used internally from the bib output
 filtered_bibtex_keywords:
-  [abbr, abstract, altmetric, arxiv, bibtex_show, blog, code, html, pdf, poster, preview, selected, slides, supp, video, website]
+  [abbr, abstract, altmetric, arxiv, award, award_name, bibtex_show, blog, code, html, pdf, poster, preview, selected, slides, supp, video, website]
 
 # Maximum number of authors to be shown for each publication (more authors are visible on click)
 max_author_limit: 3 # leave blank to always show all authors

_layouts/bib.liquid

@@ -156,6 +156,9 @@
 
     <!-- Links/Buttons -->
     <div class="links">
+      {% if entry.award %}
+        <a class="award btn btn-sm z-depth-0" role="button">{{ entry.award_name ? entry.award_name : "Awarded" }}</a>
+      {% endif %}
       {% if entry.abstract %}
         <a class="abstract btn btn-sm z-depth-0" role="button">Abs</a>
       {% endif %}
@@ -271,6 +274,13 @@
       {% endif %}
     {% endif %}
 
+    {% if entry.award %}
+      <!-- Hidden Award block -->
+      <div class="award hidden d-print-inline">
+        <p>{{ entry.award | markdownify }}</p>
+      </div>
+    {% endif %}
+
     {% if entry.abstract %}
       <!-- Hidden abstract block -->
       <div class="abstract hidden">

_sass/_base.scss

@@ -769,6 +769,9 @@ footer.sticky-bottom {
             border-color: var(--global-theme-color);
           }
         }
+        a.award.btn {
+          border-color: var(--global-highlight-color);
+        }
       }
 
       .badges {
@@ -826,6 +829,12 @@ footer.sticky-bottom {
         border-color: var(--global-text-color);
       }
     }
+    div.award.hidden {
+      border: dashed 1px var(--global-bg-color);
+    }
+    div.award.hidden.open {
+      border-color: var(--global-highlight-color);
+    }
   }
 }
 

_sass/_themes.scss

@@ -16,6 +16,7 @@
   --global-distill-app-color: #{$grey-color};
   --global-divider-color: rgba(0, 0, 0, 0.1);
   --global-card-bg-color: #{$white-color};
+  --global-highlight-color: #{$red-color-dark};
 
   --global-tip-block: #42b983;
   --global-tip-block-bg: #e2f5ec;

assets/js/common.js

@@ -1,12 +1,19 @@
 $(document).ready(function () {
-  // add toggle functionality to abstract and bibtex buttons
+  // add toggle functionality to abstract, award and bibtex buttons
   $("a.abstract").click(function () {
     $(this).parent().parent().find(".abstract.hidden").toggleClass("open");
+    $(this).parent().parent().find(".award.hidden.open").toggleClass("open");
+    $(this).parent().parent().find(".bibtex.hidden.open").toggleClass("open");
+  });
+  $("a.award").click(function () {
+    $(this).parent().parent().find(".abstract.hidden.open").toggleClass("open");
+    $(this).parent().parent().find(".award.hidden").toggleClass("open");
     $(this).parent().parent().find(".bibtex.hidden.open").toggleClass("open");
   });
   $("a.bibtex").click(function () {
-    $(this).parent().parent().find(".bibtex.hidden").toggleClass("open");
     $(this).parent().parent().find(".abstract.hidden.open").toggleClass("open");
+    $(this).parent().parent().find(".award.hidden.open").toggleClass("open");
+    $(this).parent().parent().find(".bibtex.hidden").toggleClass("open");
   });
   $("a").removeClass("waves-effect waves-light");