Jekyll and website setup

Run local site

• Run local jekyll site: 'bundle exec jekyll serve'

Jekyll example sites

• Nice jekyll example site: https://amor.cms.hu-berlin.de/~jaeschkr/#

Plugins

• Jekyll plugins overview: https://github.com/planetjekyll/awesome-jekyll-plugins
• In-site citations: see http://weinan.io/2017/03/06/using-papers-and-manuscripts-to-do-correct-citation.html

RSS Feed with blogposts: Jekyll-feed & Jekyll-planet

• Atom feed inclusion: https://github.com/jekyll/jekyll-feed
  • OK
• Jekyll-planet (Planet Pluto) to included other RSSs in blog: https://github.com/feedreader/jekyll-planet
  • Usage (steps)
    • include/edit pluto.ini
    • bash: 'gem install pluto' to install
    • bash: pluto update planet.ini [original: pluto build planet.ini]
    • create blogposts: ruby -r 'jekyll/planet' -e 'JekyllPlanet.main'
  • Note on how to assign automatic tags to websites:
    1. input tag name in website title in 'planet.ini'
    2. add tags: [#{item.title}] to line 52 of tool.rb in /Users/florian/.rvm/gems/ruby-2.6.0/gems/jekyll-planet-0.2.1/lib/jekyll/planet/tool.rb [=DONE]
• Tagging: according to https://codinfox.github.io/dev/2015/03/06/use-tags-and-categories-in-your-jekyll-based-github-pages/
  • Tag categories:
    • website: posts related to website
    • rss-repost: interesting blogposts from the internet (t-rss feed)
    • *twitter: twitter posts
    • *input-output:
• Find out where gems are installed (ruby): gem environments

Update and maintenance of Jekyll and Gems

• Gem (Ruby)
  • Update gem : 'gem update --system'
  • Update gems: 'bundle update --all' --> updates all gems in gemfile

Annotation and comments of Website: hypothes.is

• Edit of '_layouts/default.html'. See https://github.com/floriandierickx/floriandierickx.github.io/commit/bc61aa0c4dedd016f086eda4e807ff2b196b88c9

Conversion of twitter threads to HTML:

TweetView

• https://github.com/hrbrmstr/tweetview/blob/master/README.md (R package)
  • Solution to error installing tidyverse: https://medium.com/@kadek/how-to-install-the-tidyverse-r-via-homebrew-macos-10-14-d749d2136cf1
• Thanks to @hrbrmstr for helping out with formatting and publishing ! -> hrbrmstr/tweetview#1

Extract.js

• From: https://gist.github.com/phillmv/caa6d522603a28cc01f426e8d56e8f8a

Code:

// Open the Chrome inspector, and select the topmost div containing the twitter thread.
// You might want to open the first tweet in the thread, scroll down to load every item in the thread, then select the parent container

var foo = document.createElement("div");
var str = ""
$($0).find(".tweet").each(function(i, t) { 
  var tweet = $(t);
  var turl = "https://twitter.com" + tweet.data("permalink-path")
  var tdate = tweet.find(".tweet-timestamp").attr("title")
  var tcontent = tweet.find(".tweet-text").html()
  str += '<blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">' + tcontent + '</p>&mdash; FlorianDRX (@FlorianDRX) <a href="' + turl + '" target="_blank">' + tdate + '</a></blockquote>\n\n';
});

foo.innerHTML = str 

// type foo and right click to select. Congrats! Don't forget to add a 
// <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
// at the bottom of wherever you post it.

Comments integration: Discuss

• Add script to pages ('_layouts/default.html', ...)
• See commit https://github.com/floriandierickx/floriandierickx.github.io/commit/9823e711e56f555c64ff44d8f016296b9441bc81

Publishing of markdown in dynamic html: bookdown in dynamic iframe

• Integration commit: https://github.com/floriandierickx/floriandierickx.github.io/commit/3f0528db235504020757c46bd8751769a2e9f207
• Inclusion of iframe: http://seankross.com/2016/11/17/How-to-Start-a-Bookdown-Book.html (for https://floriandierickx.github.io/library/copernicus/index.html)

Online Library with Altmetric Badges [+ Annotation of Pdfs: not yet implemented, suggestions welcome] : bib-list.js [hypoethes.is and nextcloud upload]

Online library: bib-list.js

• First integration:

Integration of altmetric badges in literature list

• See https://github.com/floriandierickx/floriandierickx.github.io/commit/faba83911807f5807d280c58afce5de2000fcef4

General website formatting

Find and replace fonts in css files

regex search and replace with font-family:(?:.*);

Change spacing between menu items

change 'margin-right' in nav ul li, footer ul li {

Icons (Font Awesome and Academicons)

• Start: https://fontawesome.com/start or https://jpswalsh.github.io/academicons/
• Look for icons: https://fontawesome.com/icons/ + include icons in html:
  • Font Awesome: Include href link, around icon: ICON LINK
  • Academicons:

Change formatting of library titles

• capture in '' and '</b>' (see https://github.com/floriandierickx/floriandierickx.github.io/commit/3d79b96da69ef065bb88f0228e7e44cba38ddf8d)