Skip to content

Publication list

Jump to bottom
Giorgio Bonvicini edited this page Oct 4, 2021 · 1 revision

This section creates a table and a small chart from a list of publication in bibtex format.

To manually create a table of publications see here.

Code

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="/assets/js/bib-list-min.js"></script>
<link href="/assets/css/bib-list.css" rel="stylesheet" type="text/css">
<style>
    /* Use this values to change the size of each publication item in the graph for this page only. */
    :root {
        --min-pub-width: 60px;
        --max-pub-width: 100px;
        --pub-height: 12px;
    }
</style>
<section class="page-section alternate-bg">
    <div class="heading-container text-center">
        <h2 class="section-heading text-uppercase">Publications - Style 1</h2>
        <h3 class="section-subheading text-muted">My publications</h3>
    </div>
    <div class="container">
        <pre id="bibtex">
            @inproceedings{CRPITV160P147-154,
                Author = {Erkki Kaila and Teemu Rajala and Mikko-Jussi Laakso and Rolf Linden and Einari Kurvinen and Ville Karavirta and Tapio Salakoski},
                Title = {Comparing student performance between traditional and technologically enhanced programming course},
                BookTitle = {17th Australasian Computing Education Conference (ACE 2015)},
                Editor = {D'Souza, D and Falkner, K.},
                Series= {CRPIT},
                Address= {Sydney, Australia},
                Publisher = {ACS},
                Volume = {160},
                Pages = {147--154},
                URL  = {http://crpit.com/confpapers/CRPITV160Kaila.pdf},
                Year = 2015
            }
                
            ...
            
            @inproceedings{Karavirta:effortless,
                author = {Ville Karavirta and Ari Korhonen and Jussi Nikander and Petri Tenhunen},
                title = {Effortless Creation of Algorithm Visualization},
                booktitle = {Proceedings of the Second Annual Finnish / Baltic Sea Conference on Computer Science Education},
                year = {2002},
                pages = {52--56},
                month = {October},
                url = {http://www.cs.hut.fi/Research/SVG/publications/koli02P08.pdf}
            }
        </pre>
        <div id="bib-publication">
            <div class="bibchart-container">
                <div class="bibchart">
                    
                </div>
            </div>
            <div class="legend">

            </div>
            <div class="table-responsive limit-vertical text-small">
                <table class="table"></table>
            </div>
        </div>
    </div>
</section>
<script>
    // Change the "visualization" parameter to enable or disable the graph.
    bibtexify("#bibtex", "bib-publication", {"visualization": true});
</script>

Output

Customization

This is probably the most complex section of all, but if we break it down piece by piece it's not that advanced after all.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="/assets/js/bib-list-min.js"></script>
<link href="/assets/css/bib-list.css" rel="stylesheet" type="text/css">

These are some external files that have to be included for the section to work, so just include this (and make sure to get the relative address of bib-list.css and bib-list-min.js right). If you really want to learn more about this have a look at the code here (note: this is not required to use this section).

<style>
    /* Use this values to change the size of each publication item in the graph for this page only. */
    :root {
        --min-pub-width: 60px;
        --max-pub-width: 100px;
        --pub-height: 12px;
    }
</style>

As explained in the comment these 3 variables determine the size of the colored rectangles representing each publication. Depending how many years and how many publication your list is covering you might want to change these values (remember to consider the effect on smaller screens such as smartphones).

<pre id="bibtex">
    @inproceedings{CRPITV160P147-154,
        Author = {Erkki Kaila and Teemu Rajala and Mikko-Jussi Laakso and Rolf Linden and Einari Kurvinen and Ville Karavirta and Tapio Salakoski},
        Title = {Comparing student performance between traditional and technologically enhanced programming course},
        BookTitle = {17th Australasian Computing Education Conference (ACE 2015)},
        Editor = {D'Souza, D and Falkner, K.},
        Series= {CRPIT},
        Address= {Sydney, Australia},
        Publisher = {ACS},
        Volume = {160},
        Pages = {147--154},
        URL  = {http://crpit.com/confpapers/CRPITV160Kaila.pdf},
        Year = 2015
    }
        
    ...
    
    @inproceedings{Karavirta:effortless,
        author = {Ville Karavirta and Ari Korhonen and Jussi Nikander and Petri Tenhunen},
        title = {Effortless Creation of Algorithm Visualization},
        booktitle = {Proceedings of the Second Annual Finnish / Baltic Sea Conference on Computer Science Education},
        year = {2002},
        pages = {52--56},
        month = {October},
        url = {http://www.cs.hut.fi/Research/SVG/publications/koli02P08.pdf}
    }
</pre>

Here you will have to place the content of the bibtex file with your publications. Note: here we show only two publications with an ellipsis in between for brevity, but all publications must be included.

You can change the ID of this element, but if you do you will have to change it later as well.

<div id="bib-publication">
    <div class="bibchart-container">
        <div class="bibchart">
            
        </div>
    </div>
    <div class="legend">

    </div>
    <div class="table-responsive limit-vertical text-small">
        <table class="table"></table>
    </div>
</div>

These are the elements that will be populated with your publication list. You can change the ID of the div from bib-publication to anything else, but you will need to remeber it for later.

Note the use of classes limit-vertical (to avoid having an extra-long table) and text-small (to have a more compact table).

<script>
    // Change the "visualization" parameter to enable or disable the graph.
    bibtexify("#bibtex", "bib-publication", {"visualization": true});
</script>

And, at last, the call to the script that populates the page. Here you will have to specify the IDs of the element containing the bibliography (first parameter) and of the element where the list will be disaplayed (second element). Note that the first one requires the pund sign # and the second one should not have it.

If you don't want the summary graph at the top of the table just set visualization to false.

Clone this wiki locally