Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • vilem.ded/howto-cards
  • yjarosz/labCards
  • sarah.diehl/howto-cards
  • jacek.lebioda/howto-cards
  • pinar.alper/howto-cards
  • maharshi.vyas/howto-cards
  • manuel.maidorn/howto-cards
  • roland.krause/howto-cards
  • miriam.fougeras/howto-cards
  • soraya.hezzaz/howto-cards
  • fasavanh.sanichanh/howto-cards
  • marie.fossepre/howto-cards
  • jennifer.behm/howto-cards
  • annegrat.daujeumont/howto-cards
  • jon.gales/howto-cards-jpg
  • sandy.thill/howto-cards
  • jenny.tran/howto-cards
17 results
Show changes
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1214 additions and 3 deletions
_layouts/landing.html 0 → 100644
View file @ cb504c3b
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
{%- include head.html -%}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="{{ "assets/css/landing.css" | relative_url }}"" rel="stylesheet" />
<body>
<div class="main">
<div class="content-wrapper">
<header class="site-header" role="banner">
<div>
{%- if site.banner_link -%}
{%- assign banner_link = site.banner_link -%}
{%- else -%}
{%- assign banner_link = '/' | relative_url -%}
{%- endif -%}
<div class="custom-header">
<a href="{{ banner_link }}"><img class="img-uni-lu"
src="{{ '/assets/banners/uni-logo.svg' | relative_url }}"
type="image/svg+xml"
/></a>
<img class="img-banner img-banner-main"
src="{{ '/assets/banners/' | relative_url }}{{ site.banner }}/banner.svg"
type="image/svg+xml"
/>
<img class="img-banner img-banner-motto"
src="{{ '/assets/banners/' | relative_url }}{{ site.banner }}/motto.svg"
type="image/svg+xml"
/>
<img class="img-lcsb img-logo-{{ site.logo }}"
src="{{ '/assets/banners/' | relative_url }}{{ site.banner }}/logos.svg"
type="image/svg+xml"
/>
</div>
</div>
</header>
<main class="page-content" aria-label="Content" style="margin-right: 0%">
{% if site.internal %}
<div class="indicator tooltip" id="internal-indicator">
<p>
Internal
<i class="material-icons">info</i>
</p>
<span class="tooltip-text">
You are connected to the uni.lu network. <br />You see all the cards.
</span>
</div>
{% else %}
<div class="indicator tooltip" id="external-indicator">
<p>
External
<i class="material-icons">info</i>
</p>
<span class="tooltip-text">
You are <strong>not connected</strong> to the uni.lu network. <br />You can see only publicly available cards. <br />In order to see all, please connect to the university network via VPN.
</span>
</div>
{% endif %}
<div class="wrapper">
{%- if page.show_print_button -%}
<div class="print-button">
<img src="{{ "assets/pdf.svg" | relative_url }}">
<a href="javascript:window.print()"><span>Print the page</span></a>
</div>
{%- endif -%}
{{ content }}
<!-- index -->
<form action="search" method="GET">
<div class="search-bar">
<input placeholder="What would you like to look for?" type="text" name="search_query" />
<i class="large material-icons">search</i>
</div>
</form>
<div class="container">
<div class="left-inner-container" id="left-inner-container" ondrop="window.cardDropDiscard(event)" ondragover="window.allowDrop(event)">
</div>
<div class="right-inner-container" id="right-inner-container" ondrop="window.cardDrop(event)" ondragover="window.allowDrop(event)">
<div id="drop-to-add" class="card-pinned card-grayed card-pulsate">
<div class="card-header">
<div class="card-icon"><i class="large material-icons">add</i></div>
</div>
<div class="card-content">
<div class="card-title">
<small>Drop to add...</small>
</div>
</div>
</div>
<div class="card-pinned card-grayed cursor-hand" onclick="clear_pinned()">
<div class="card-header">
<div class="card-icon"><i class="large material-icons">delete</i></div>
</div>
<div class="card-content">
<div class="card-title">
<small>Remove all...</small>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
{%- include footer.html -%}
</div>
</body>
{%- include scripts.html -%}
<script>
window.is_internal = false;
</script>
<script src="{{ "assets/js/landing.js" | relative_url }}"></script>
</html>
_layouts/redirect.html 0 → 100644
View file @ cb504c3b
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>Redirecting&hellip;</title>
<link rel="canonical" href="{{ page.redirect.to }}">
<script>
var URLtoRedirect = "{{ page.redirect.to }}" + document.location.hash;
document.location.replace(URLtoRedirect);
</script>
<meta http-equiv="refresh" content="3; url={{ page.redirect.to }}">
<meta name="robots" content="noindex">
<h1>Redirecting&hellip;</h1>
<a href="{{ page.redirect.to }}">Click here if you are not redirected.</a>
</html>
\ No newline at end of file
_plugins/hook_mailto_email_protector.rb → _plugins/hook_email_protect.rb
View file @ cb504c3b
......@@ -5,7 +5,7 @@ Jekyll::Hooks.register([:pages, :posts, :documents], :pre_render) do |post|
include Jekyll::EmailProtect::EmailProtectionFilter
# Using a simpler version of email regexp
email_regexp = /mailto\:(?:[\'\"]*)(?:[\w+\-]\.?)+@[a-z\d\-]+(?:\.[a-z]+)*\.[a-z]+(?:[\'\"]*)/i
email_regexp = /mailto\:(?:[\w+\-]\.?)+@[a-z\d\-]+(?:\.[a-z]+)*\.[a-z]+/i
# Take post's content, and transform every occurence of the following regexp (an email)
post.content = post.content.gsub(email_regexp) {
......@@ -13,4 +13,3 @@ Jekyll::Hooks.register([:pages, :posts, :documents], :pre_render) do |post|
|param| "mailto:" + Jekyll::EmailProtect::EmailProtectionFilter::encode_email(param[7..-1].delete("'").delete('"'))
}
end
assets/banners/howto-card/motto.svg
View file @ cb504c3b
This diff is collapsed.
assets/css/landing.css 0 → 100644
View file @ cb504c3b
:root {
--primary-color: rgb(0, 170, 220);
--secondary-color: #dddedd;
--red-color: rgb(255, 20, 11);
--tooltip-bg: rgb(25, 25, 25);
--border-radius: 25px;
--border-radius-pinned: 18px;
--title-height: 30px;
--animation-time: 300ms;
}
.wrapper {
padding-right: 15px;
}
.container {
font-family: Helvetica;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 5fr 1fr;
}
@media (max-width: 1080px) {
.container {
grid-template-columns: 5fr 0fr;
}
}
.container > .left-inner-container {
grid-column: 1;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
padding-right: 10px;
border: solid 1px rgba(0,0,0,0);
border-right: solid 2px rgba(240, 240, 240, 0.7);
}
@media (max-width: 1080px) {
.container > .left-inner-container {
border: none;
padding-right: 0px;
}
}
.full-bleed {
width: 100%;
grid-column: 1 / 4;
}
.container > .right-inner-container {
height: 100%;
border: solid 1px rgba(0,0,0,0);
grid-column: 2;
transition: border var(--animation-time) linear, background-color var(--animation-time) linear;
margin: 0px auto;
display: block;
padding-top: 12px;
width: 100%;
border-radius: 0px 20px 20px 0;
padding-left: 5px;
}
@media (max-width: 1080px) {
.container > .right-inner-container {
display: none;
}
}
.droppable {
background: #eee;
border: solid 1px var(--secondary-color);
}
.cursor-hand {
cursor: pointer !important;
}
/* ==================================================== */
/* Normal cards */
/* ==================================================== */
.card-link {
color: unset !important;
text-decoration: none;
cursor: pointer;
}
.card-link:hover {
text-decoration: none;
}
.card-link:hover > .card > .card-content {
border-color: var(--primary-color) !important;
}
.card {
margin: 10px;
margin-bottom: 20px;
width: 160px;
min-height: 100px;
}
@media (max-width: 10px) {
.card {
width: 100%;
grid-template-columns: 3fr 5fr;
display: grid;
height: 60px;
}
}
.card.card-dragged {
height: 80px;
}
.card > .card-header {
height: 50%;
border: solid 3px var(--primary-color);
border-radius: var(--border-radius) var(--border-radius) 0 0;
background-color: white;
transition: background-color var(--animation-time) linear, border-style var(--animation-time) linear;
}
@media (max-width: 10px) {
.card > .card-header {
display: grid;
grid-template-rows: 2fr 2fr;
border-radius: var(--border-radius) 0px 0px var(--border-radius);
min-height: 100px;
}
}
.card > .card-header:hover {
border-color: var(--primary-color);
background-color: var(--primary-color);
}
.card > .card-header:hover > .card-icon {
color: white;
}
.card > .card-header.card-dragged {
border-style: dotted !important;
border-color: #66c9e9 !important;
height: 150px;
border-radius: var(--border-radius);
}
.card > .card-header.card-dragged > .card-title {
background: none !important;
position: relative;
top: -35px;
}
.card > .card-content {
border: solid 3px var(--secondary-color);
border-top: 0;
border-radius: 0 0 var(--border-radius) var(--border-radius);
/* min-height: calc(50% - 20px); */
min-height: 110px;
padding: 10px 10px 5px 10px;
text-align: center;
transition: height var(--animation-time) linear, border-color var(--animation-time) linear;
background-color: white;
font-size: 15px;
}
@media (max-width: 10px) {
.card > .card-content {
display: flex;
border-radius: 0 var(--border-radius) var(--border-radius) 0px;
min-height: 100px;
}
}
.card > .card-content.card-dragged {
opacity: 0;
background: rgba(255,255,255,0.0);
height: 0px;
}
.card > .card-header > .card-icon {
height: calc(100% - var(--title-height));
width: 80%;
margin: 0px auto;
display: block;
text-align: center;
color: var(--primary-color);
transition: color var(--animation-time) linear;
}
.card > .card-header > .card-icon i {
padding-top: 10px;
font-size: 4rem;
}
.card > .card-header > .card-title {
cursor: move;
--card-title-padding: 6px;
background-color: var(--primary-color);
color: white;
width: 100%;
height: calc(var(--title-height) - var(--card-title-padding));
padding-top: var(--card-title-padding);
text-align: center;
vertical-align: middle;
font-size: 14pt;
}
@media (max-width: 10px) {
.card > .card-header > .card-title {
border-radius: 0px 0px 0px var(--border-radius);
height: 15px;
padding: 0 0 5px 0;
font-size: unset;
}
}
/* ==================================================== */
/* Pinned cards */
/* ==================================================== */
.card-pinned {
width: 74px;
height: 72px;
margin-bottom: 60px;
margin-left: 25%;
cursor: pointer;
}
.card-pinned[draggable="True"] > .card-header > .card-title {
cursor: pointer;
}
.card-pinned > .card-header {
height: 100%;
border: solid 3px var(--primary-color);
border-radius: var(--border-radius-pinned);
background-color: white;
transition: background-color var(--animation-time) linear, border-style var(--animation-time) linear;
}
.card-pinned > .card-header > .card-icon {
text-align: center;
color: var(--primary-color);
}
.card-pinned > .card-header > .card-icon i {
padding-top: 10px;
font-size: 3rem;
}
.card-pinned > .card-content {
padding: 4px 0px;
font-size: smaller;
color: #777;
text-align: center;
}
.card-pinned.card-red > .card-header {
border-color: var(--red-color);
}
.card-pinned.card-red > .card-header > .card-icon {
color: var(--red-color);
}
.card-pinned.card-grayed > .card-header {
border-color: #ccc;
border-style: dashed;
user-select: none;
}
#drop-to-add > * {
cursor: auto;
}
.card-pinned.card-grayed > .card-header > .card-icon {
color: #ccc;
}
.right-inner-container.droppable > .card-pinned.card-grayed.card-pulsate {
animation-name: stretch;
animation-duration: 0.6s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;
}
@keyframes stretch {
0% {
transform: scale(.90);
}
100% {
transform: scale(1.1);
}
}
/* ==================================================== */
/* Search bar */
/* ==================================================== */
div.search-bar {
width: 60%;
margin-left: 12%;
display: flex;
}
@media (max-width: 1080px) {
div.search-bar {
margin-left: 3%;
width: 100%;
}
}
.search-bar > input {
width: 100%;
margin: 0px 0px 40px 0px;
border-radius: 20px;
border: solid 2px #eee ;
padding: 8px 25px;
height: 15pt;
font-size: 16px;
transition: border var(--animation-time) linear, font-size var(--animation-time) linear;
}
.search-bar > i {
position: relative;
left: -40px;
top: 7px;
}
.search-bar > input:focus {
border-color: var(--primary-color);
outline: none;
font-size: larger;
}
.search-bar > input:active {
border-color: var(--primary-color);
outline: none;
font-size: larger;
}
/* ==================================================== */
/* Internal/external indicator */
/* ==================================================== */
.indicator {
position: absolute;
top: 190px;
right: 59px;
color: #d6d6d6;
text-align: center;
cursor: pointer;
}
@media (max-width: 1080px) {
.indicator {
top: 128px;
right: 72px;
}
}
@media (max-width: 700px) {
.indicator {
top: 10px;
right: 50px;
}
}
.indicator > p > i {
font-size: 20px;
position: relative;
top: 5px;
left: 5px;
}
.indicator > p {
font-size: 14px;
}
/* ==================================================== */
/* Tooltip */
/* ==================================================== */
.tooltip .tooltip-text {
visibility: hidden;
width: 400px;
right: 120%;
top: -43px;
background-color: var(--tooltip-bg);
color: var(--secondary-color);
text-align: center;
padding: 10px 0;
border-radius: 8px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltip-text {
visibility: visible;
}
.tooltip .tooltip-text::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent var(--tooltip-bg);
}
assets/js/box_hider.js 0 → 100644
View file @ cb504c3b
/**
* This is used to hide the sections of the index page
* based on the URL fragment (a.k.a. "hash")
*/
window.boxHider = (function() {
function GetSelectedId() {
var boxId = window.location.hash + '-card';
if (boxId.length > 0) {
return boxId.substring(1);
}
return "";
}
function GetAllBoxElements() {
return document.getElementsByClassName('index-box');
}
function GetAllBoxElementsArray() {
var allBoxes = GetAllBoxElements();
var allBoxesArray = Array.prototype.slice.call(allBoxes);
return allBoxesArray;
}
function GetSelectedBoxElement(id) {
var allBoxesArray = GetAllBoxElementsArray();
// note: handbook and lab are actually grouped sections
if (id.startsWith('handbook') || id.startsWith('lab') || id.startsWith('qms') || id.startsWith('publication')) {
return true;
} else {
var element = document.getElementById(id);
if (allBoxesArray.includes(element)) {
return element;
}
return false;
}
}
function HideElement(element) {
if (element instanceof HTMLElement) {
element.style['display'] = 'none';
}
}
function ShowElement(element) {
if (element instanceof HTMLElement) {
element.style['display'] = 'inline-block';
}
}
function HideAllCategories() {
var allCategoriesElement = document.getElementById('all-categories');
HideElement(allCategoriesElement);
}
function ShowAllBoxes() {
var allBoxes = GetAllBoxElementsArray();
allBoxes.map(function(box) {
ShowElement(box);
});
}
function Trigger() {
// First, try to get the hash from the URL (https://example.com/uri?param#hash)
var boxId = GetSelectedId();
if (boxId.length == 0) {
// If there is no hash in the URL, just show all the boxes
ShowAllBoxes();
return;
}
// Otherwise, proceed to getting the corresponding div element
var selectedBox = GetSelectedBoxElement(boxId);
if (selectedBox == false) {
// If the user selection is not a `div.index-box`, then just show all the boxes
ShowAllBoxes();
return;
}
// Hide the "All Categories" element
HideAllCategories();
// Finally, hide all boxes except of the selected one
// Moreover, make sure that the selected boxes are displayed.
var allBoxes = GetAllBoxElementsArray();
if (boxId.startsWith('handbook')) {
allBoxes.map(function(box) {
if (!box.id.startsWith('handbook')) {
HideElement(box);
} else {
ShowElement(box);
}
});
} else if (boxId.startsWith('lab')) {
allBoxes.map(function(box) {
if (!box.id.startsWith('lab')) {
HideElement(box);
} else {
ShowElement(box);
}
});
} else if (boxId.startsWith('qms')) {
allBoxes.map(function(box) {
if (!box.id.startsWith('qms')) {
HideElement(box);
} else {
ShowElement(box);
}
});
} else if (boxId.startsWith('publication')) {
allBoxes.map(function(box) {
if (!box.id.startsWith('publication')) {
HideElement(box);
} else {
ShowElement(box);
}
});
} else {
allBoxes.map(function(box) {
if (box != selectedBox) {
HideElement(box);
} else {
ShowElement(box);
}
});
}
}
return {
'Trigger': Trigger,
'ShowAllBoxes': ShowAllBoxes
}
})();
assets/js/landing.js 0 → 100644
View file @ cb504c3b
window.cards_limit = 6;
var storage_key = "pinnedCards";
if (window.is_internal) {
storage_key += "Internal"
} else {
storage_key += "External"
}
let $left_inner_container = document.getElementById("left-inner-container");
let $right_inner_container = document.getElementById("right-inner-container");
let $drop_to_add = document.getElementById("drop-to-add");
// ============= DATA ========================================
let pinned_cards_store = localStorage.getItem(storage_key);
window.pinned_cards = [
];
// ============= DOM functions ========================================
let create_card = function(icon, title, caption, link) {
let new_div = document.createElement('div');
new_div.innerHTML = `
<a class="card-link card-dynamic" ondragstart="window.cardDragStart(event)" ondragend="window.cardDragEnd(event)" href="${link}">
<div class="card" draggable="True" ondragstart="window.cardDragStart(event)" ondragend="window.cardDragEnd(event)" data-icon='${icon}' data-title='${title}' data-caption='${caption}' data-link="${link}">
<div class="card-header">
<div class="card-icon">${icon}</div>
<div class="card-title">${title}</div>
</div>
<div class="card-content">
<div class="card-caption">${caption}</div>
</div>
</div>
</a>
`;
return new_div;
};
let create_pinned_card = function(icon, title, caption, link) {
let new_div = document.createElement('div');
new_div.innerHTML = `
<a class="card-link card-dynamic-pinned" ondragstart="window.pinnedCardDragStart(event)" ondragend="window.pinnedCardDragEnd(event)" href="${link}">
<div class="card-pinned" draggable="True" draggable="false" ondragstart="window.pinnedCardDragStart(event)" ondragend="window.pinnedCardDragEnd(event)" data-icon='${icon}' data-title='${title}' data-caption='${caption}' data-link="${link}">
<div class="card-header">
<div class="card-icon">${icon}</div>
</div>
<div class="card-content">
<div class="card-title">${title}</div>
</div>
</div>
</a>
`;
return new_div;
}
let attach_card = function(container, card) {
container.append(card);
}
let attach_pinned_card = function(container, card) {
let card_el = create_pinned_card(card.icon, card.title, card.caption, card.link);
let first_child = container.children[1];
// might as well remove all children and rebuild the contents using window.pinned_cards
container.insertBefore(card_el, first_child);
}
// ============= Helper functions ========================================
let list_contains = function(the_list, the_object, key) {
for (const element of the_list) {
if (the_object[key] === element[key])
return true;
}
return false;
}
let remove_from_list = function(the_list, the_object, key) {
var index = -1;
for (var i = 0; i < the_list.length; i++) {
if (the_list[i][key] == the_object[key]) {
index = i;
break;
}
}
if (index != -1) {
the_list.splice(i, 1);
}
}
// ============= DRAG&DROP functions ========================================
window.cardDragStart = function(event) {
var target = event.target;
if (target.nodeName == 'A') {
target = target.firstElementChild;
}
// First, attach classes for animations
target.classList.add('card-dragged');
target.children[1].classList.add('card-dragged');
target.children[0].classList.add('card-dragged');
$right_inner_container.classList.add('droppable');
// Attach data about the card to drag&drop event
let card = {
"title": target.dataset['title'],
"icon": target.dataset['icon'],
"caption": target.dataset['caption'],
"link": target.dataset['link'],
"type": "big"
}
event.dataTransfer.setData("card", JSON.stringify(card));
// Allow drag&drop
event.dataTransfer.effectAllowed = 'move';
return true;
}
window.cardDragEnd = function(event) {
var target = event.target;
if (target.nodeName == 'A') {
target = target.firstElementChild;
}
target.classList.remove('card-dragged');
target.children[1].classList.remove('card-dragged');
target.children[0].classList.remove('card-dragged');
$right_inner_container.classList.remove('droppable');
return true;
}
window.pinnedCardDragStart = function(event) {
var target = event.target;
if (target.nodeName == 'A') {
target = target.firstElementChild;
}
$left_inner_container.classList.add('droppable');
// Attach data about the card to drag&drop event
let card = {
"title": target.dataset['title'],
"icon": target.dataset['icon'],
"caption": target.dataset['caption'],
"link": target.dataset['link'],
"type": "small"
}
event.dataTransfer.setData("card", JSON.stringify(card));
// Allow drag&drop
event.dataTransfer.effectAllowed = 'move';
return true;
}
window.pinnedCardDragEnd = function(event) {
$left_inner_container.classList.remove('droppable');
return true;
}
window.cardDrop = function(event) {
let serializedCard = event.dataTransfer.getData("card");
let card = JSON.parse(serializedCard);
// Don't react to dropping small (shortcut) cards
if (card['type'] == "small") {
return;
}
// Add limit of pinned cards
if (window.pinned_cards.length >= window.cards_limit) {
return;
}
if (!list_contains(window.pinned_cards, card, "title")) {
window.pinned_cards.push(card);
localStorage.setItem(storage_key, JSON.stringify(pinned_cards));
window.cards = window.cards.filter(function(el) { return el['title'] != card['title'];});
rebuild_pinned_cards();
rebuild_cards();
}
refresh_drop_to_add_button();
if (event.preventDefault) event.preventDefault();
if (event.stopPropagation) event.stopPropagation();
}
window.cardDropDiscard = function(event) {
let serializedCard = event.dataTransfer.getData("card");
let card = JSON.parse(serializedCard);
if (card['type'] == "big")
return;
if (list_contains(window.pinned_cards, card, "title")) {
remove_from_list(window.pinned_cards, card, "title");
localStorage.setItem(storage_key, JSON.stringify(pinned_cards));
cards.push(card);
rebuild_pinned_cards();
rebuild_cards();
}
refresh_drop_to_add_button();
if (event.preventDefault) event.preventDefault();
if (event.stopPropagation) event.stopPropagation();
}
window.allowDrop = function(event) {
event.preventDefault();
}
window.rebuild_cards = function() {
while ($left_inner_container.firstChild) {
$left_inner_container.removeChild($left_inner_container.firstChild);
}
for (const card of window.cards) {
let card_el = create_card(card.icon, card.title, card.caption, card.link);
attach_card($left_inner_container, card_el);
}
}
window.rebuild_pinned_cards = function() {
var old_pinned_cards = document.getElementsByClassName("card-dynamic-pinned");
while (old_pinned_cards.length > 0){
old_pinned_cards[0].parentNode.removeChild(old_pinned_cards[0]);
}
for (const card of pinned_cards) {
let card_el = create_pinned_card(card.icon, card.title, card.caption, card.link);
attach_pinned_card($right_inner_container, card);
}
}
window.refresh_drop_to_add_button = function() {
if (window.pinned_cards.length == window.cards_limit) {
$drop_to_add.style.display = "none"
} else {
$drop_to_add.style.display = "block"
}
}
window.clear_pinned = function() {
for (card of pinned_cards) {
cards.push(card);
}
pinned_cards = [];
localStorage.setItem(storage_key, JSON.stringify(pinned_cards));
rebuild_pinned_cards();
rebuild_cards();
refresh_drop_to_add_button();
}
window.start_cards = function() {
// ============= Initialization ========================================
if (pinned_cards_store == null) {
localStorage.setItem(storage_key, JSON.stringify(pinned_cards));
} else {
pinned_cards = JSON.parse(pinned_cards_store);
// Sort alphabetically
pinned_cards = pinned_cards.sort(function(a, b) { if (a.title > b.title) return -1; else if (a.title < b.title) return 1; else return 0; });
// Remove duplicates of pinned cards
for (const card of pinned_cards) {
remove_from_list(cards, card, "title");
}
}
refresh_drop_to_add_button();
rebuild_cards();
rebuild_pinned_cards();
}
assets/js/lunr.min.js 0 → 100644
View file @ cb504c3b
This diff is collapsed.
assets/js/router.js 0 → 100644
View file @ cb504c3b
function UrlExists(url, cb) {
jQuery.ajax({
url: url,
dataType: 'text',
type: 'GET',
complete: function(xhr){
if(typeof cb === 'function')
cb.apply(this, [xhr.status]);
},
headers: {
'Cache-Control': 'no-cache, no-store, must-revalidate',
'Pragma': 'no-cache',
'Expires': '0'
}
});
}
function GetShortcutDestination() {
var s = window.location.href;
var pathArray = s.split('?');
// Cut the query if it exists
if (pathArray.length > 1) {
return pathArray[1];
} else {
return '';
}
}
function RedirectTo(newLocation) {
setTimeout(function() {
window.location.replace(newLocation);
}, 1);
}
// Pick the shortcut link destination from URL, like: `category:subcategory:card-name`
var sub = GetShortcutDestination();
// If there's a shortcut to handle
if (sub.length > 0) {
var externalCardURL = '/external/cards/' + sub;
var internalCardURL = '/internal/cards/' + sub;
UrlExists(externalCardURL, function(status){
if (status == 200) { // The sub-card is external and accessible
RedirectTo(externalCardURL);
} else {
UrlExists(internalCardURL, function(status){
if (status == 200) { // The sub-card is internal and accessible
RedirectTo(internalCardURL);
} else {
if (!sub.includes('search_query')) { // do not redirect when a search is performed
RedirectTo('/404.html'); // No external, no internal - probably no access
}
}
})
}
});
}
assets/vendor/js/jquery-3.6.0.min.js 0 → 100644
View file @ cb504c3b
This diff is collapsed.
build_index.js 0 → 100644
View file @ cb504c3b
var lunr = require('lunr'),
stdin = process.stdin,
stdout = process.stdout,
buffer = [];
stdin.resume();
stdin.setEncoding('utf8');
stdin.on('data', function (data) {
buffer.push(data);
});
stdin.on('end', function () {
var documents = JSON.parse(buffer.join(''))
var idx = lunr(function () {
this.ref('id')
this.field('title', { boost: 10 })
this.field('url')
this.field('content')
documents.forEach(function (doc) {
this.add(doc)
}, this)
})
stdout.write(JSON.stringify(idx))
});
cards.md 0 → 100644
View file @ cb504c3b
---
layout: default
title: Cards
order: -1
---
{% include scripts.html %}
<style>
.noborderbox {
border :0;
}
</style>
{% comment %}
This code adds CSS that hides the index-boxes by default.
It's in javascript, so that it doesn't effect the browsers with javascript disabled.
How the correct boxes are shown then? box_hider.js shows them
{% endcomment %}
<script>
var element = document.createElement('style');
var content = document.createTextNode(".index-box {display: none;}");
var head = document.getElementsByTagName('head');
if (head.length > 0) {
element.appendChild(content);
head[0].appendChild(element);
}
</script>
<!-- index -->
<div class="index-box-container">
<div class="index-box noborderbox" id="access-card">
<h3>Access</h3>
<ul>
<li><a href="{{ 'external/access/harrenhal-access' | relative_url }}">HARRENHAL access</a></li>
<li><a href="{{ 'external/access/lums-passwords' | relative_url }}">LUMS account</a></li>
<li><a href="{{ 'external/access/passwords' | relative_url }}">Managing your passwords</a></li>
<li><a href="{{ 'external/access/vpn-access' | relative_url }}">VPN connection</a></li>
<li><a href="{{ 'external/access/vpn-cerbere-access' | relative_url }}">Connect to Cerbere via VPN</a></li>
<li><a href="{{ 'external/access/vpn-mobile' | relative_url }}">VPN connection on your mobile phone</a></li>
<li><a href="{{ 'external/access/wifiNetworkAccessGuests' | relative_url }}">WiFi network access for guests</a></li>
</ul>
</div>
<div class="index-box noborderbox" id="backup-card">
<h3>Backup</h3>
<ul>
<li><a href="{{ 'external/backup/computer' | relative_url }}">Staff Computer</a></li>
</ul>
</div>
<div class="index-box noborderbox" id="contribute-card">
<h3>Contribute</h3>
<ul>
<li><a href="{{ 'external/contribute/git-clients' | relative_url }}">Git clients</a></li>
<li><a href="{{ 'external/contribute/install-git' | relative_url }}">Installation of Git</a></li>
<li><a href="{{ 'external/contribute/markdown' | relative_url }}">Markdown</a></li>
<li><a href="{{ 'external/contribute/mirror-fork' | relative_url }}">Mirror fork automatically</a></li>
<li><a href="{{ 'external/contribute/review' | relative_url }}">Reviewing in Git</a></li>
<li><a href="{{ 'external/contribute/ssh-key-generation' | relative_url }}">Key-based Authentication on GitLab</a></li>
<li><a href="{{ 'external/contribute/supersede' | relative_url }}">Take over a stale merge request</a></li>
<li><a href="{{ 'external/contribute/vscode' | relative_url }}">Contribute using Visual Studio Code</a></li>
<li><a href="{{ 'external/contribute/web-ide' | relative_url }}">Contribute using Gitlab Web IDE</a></li>
</ul>
</div>
<div class="index-box noborderbox" id="exchange-channels-card">
<h3>Exchange channels</h3>
<ul>
<li><a href="{{ 'external/exchange-channels/asperaweb' | relative_url }}">AsperaWEB Quick Guide</a></li>
<li><a href="{{ 'external/exchange-channels/atlas-hpc' | relative_url }}">Data transfer between Atlas and UL HPC Clusters</a></li>
<li><a href="{{ 'external/exchange-channels/calendar' | relative_url }}">Sharing calendar in Microsoft Exchange</a></li>
<li><a href="{{ 'external/exchange-channels/cryptomator' | relative_url }}">Cryptomator</a></li>
<li><a href="{{ 'external/exchange-channels/lft' | relative_url }}">LCSB file transfer (LFT) Quick Guide</a></li>
<li><a href="{{ 'external/exchange-channels/owncloud' | relative_url }}">Owncloud</a></li>
</ul>
</div>
<div class="index-box noborderbox" id="general-card">
<h3>General</h3>
<ul>
<li><a href="{{ 'external/general/usefulLinks' | relative_url }}">Useful links for living in Luxembourg</a></li>
<li><a href="{{ 'external/general/getToLCSB' | relative_url }}">How to get to the Luxembourg Centre for Systems Biomedicine</a></li>
<li><a href="{{ 'external/general/BelvalCampusMap' | relative_url }}">Belval Campus Map</a></li>
<li><a href="{{ 'external/general/glossary' | relative_url }}">Glossary</a></li>
<li><a href="{{ 'external/general/links' | relative_url }}">Important websites</a></li>
<li><a href="{{ 'external/general/remote-working' | relative_url }}">Work remotely</a></li>
<li><a href="{{ 'external/general/attend-webex' | relative_url }}">Attend the LCSB Team Meeting online (webex)</a></li>
</ul>
</div>
<div class="index-box noborderbox" id="integrity-card">
<h3>Integrity</h3>
<ul>
<li><a href="{{ 'external/integrity/checksum' | relative_url }}">Ensuring Integrity of Data Files with Checksums</a></li>
<li><a href="{{ 'external/integrity/dmp' | relative_url }}">Data Management Plan</a></li>
<li><a href="{{ 'external/integrity/encryption/disk' | relative_url }}">Encrypting the Startup Disk for Your Laptop/Desktop</a></li>
<li><a href="{{ 'external/integrity/encryption/file' | relative_url }}">Encrypting Files and Folders</a></li>
<li><a href="{{ 'external/integrity/naming' | relative_url }}">Naming files</a></li>
<li><a href="{{ 'external/integrity/organization' | relative_url }}">Organization</a></li>
<li><a href="{{ 'external/integrity/sanitisation' | relative_url }}">Sanitising Data Files</a></li>
<li><a href="{{ 'external/integrity/spreadsheets' | relative_url }}">Working with spreadsheets</a></li>
<li><a href="{{ 'external/integrity/transfer/owncloud-privatebin' | relative_url }}">Transfer of Human Data with OwnCloud</a></li>
</ul>
</div>
<div class="index-box noborderbox" id="lab-equipment-card">
<h3>Lab: Equipment</h3>
<ul>
<li><a href="{{ 'external/lab-equipment/autoclaves' | relative_url }}">Autoclaves: utilization</a></li>
<li><a href="{{ 'external/lab-equipment/balances' | relative_url }}">Balances: utilization and maintenance</a></li>
<li><a href="{{ 'external/lab-equipment/biosafety-cabinets' | relative_url }}">Biosafety Cabinets: good practices</a></li>
<li><a href="{{ 'external/lab-equipment/cold-traps' | relative_url }}">Cold traps: maintenance</a></li>
<li><a href="{{ 'external/lab-equipment/cryostorage' | relative_url }}">Cryostorage: utilization</a></li>
<li><a href="{{ 'external/lab-equipment/dishwasher-utilization-and-maintenance' | relative_url }}">Dishwasher: utilization and maintenance</a></li>
<li><a href="{{ 'external/lab-equipment/electric-car' | relative_url }}">Electric Car</a></li>
<li><a href="{{ 'external/lab-equipment/freezers' | relative_url }}">-20°C Freezers: maintenance</a></li>
<li><a href="{{ 'external/lab-equipment/freezers-80' | relative_url }}">-80°C freezers: maintenance</a></li>
<li><a href="{{ 'external/lab-equipment/freezers-150' | relative_url }}">-150°C freezers: maintenance</a></li>
<li><a href="{{ 'external/lab-equipment/fridges' | relative_url }}">Fridges: maintenance</a></li>
<li><a href="{{ 'external/lab-equipment/hoods' | relative_url }}">Hoods: Laminar Flow - Fume Hood - Biosafety Cabinet</a></li>
<li><a href="{{ 'external/lab-equipment/incubators' | relative_url }}">Incubators: maintenance</a></li>
<li><a href="{{ 'external/lab-equipment/lightcycler' | relative_url }}">LightCycler: leave the virtual instrument mode</a></li>
<li><a href="{{ 'external/lab-equipment/pH-meter' | relative_url }}">pH meter: utilization and maintenance</a></li>
<li><a href="{{ 'external/lab-equipment/power-consumption' | relative_url }}">Power consumption of the equipment</a></li>
</ul>
</div>
<div class="index-box noborderbox" id="lab-good-practice-card">
<h3>Lab: Good Practice</h3>
<ul>
<li><a href="{{ 'external/lab-good-practice/mycoplasma' | relative_url }}">Mycoplasma contamination check</a></li>
</ul>
</div>
<div class="index-box noborderbox" id="lab-hsa-card">
<h3>Lab: Health & Safety, Access</h3>
<ul>
<li><a href="{{ 'external/lab-hsa/diphoterine' | relative_url }}">Diphoterine: utilization</a></li>
<li><a href="{{ 'external/lab-hsa/handwashing' | relative_url }}">Handwashing</a></li>
<li><a href="{{ 'external/lab-hsa/lab-coats' | relative_url }}">Lab coats</a></li>
<li><a href="{{ 'external/lab-hsa/personal-alert-safety-system' | relative_url }}">Personal alert safety system (PASS)</a></li>
<li><a href="{{ 'external/lab-hsa/pictograms' | relative_url }}">Pictograms</a></li>
<li><a href="{{ 'external/lab-hsa/ppe' | relative_url }}">Personal Protective Equipment (PPE)</a></li>
<li><a href="{{ 'external/lab-hsa/shipment' | relative_url }}">Shipment of biological or chemical samples with carrier</a></li>
<li><a href="{{ 'external/lab-hsa/spill' | relative_url }}">Spill in a laboratory</a></li>
<li><a href="{{ 'external/lab-hsa/spill-bsc' | relative_url }}">Spill in a Biosafety Cabinet</a></li>
<li><a href="{{ 'external/lab-hsa/waste' | relative_url }}">Waste Management: Chemical and Biological waste</a></li>
</ul>
</div>
<div class="index-box noborderbox" id="lab-quarks-card">
<h3>Lab: Quarks</h3>
<ul>
<li><a href="{{ 'external/lab-quarks/book-lab-equipment' | relative_url }}">Booking of a Lab Equipment</a></li>
<li><a href="{{ 'external/lab-quarks/general' | relative_url }}">General information on Quarks</a></li>
</ul>
</div>
<div class="index-box noborderbox" id="on-offboarding-card">
<h3>On offboarding</h3>
<ul>
<li><a href="{{ 'external/on-offboarding/checklistBeforeArriving' | relative_url }}">Newcomer Checklist before Arriving in Luxembourg</a></li>
<li><a href="{{ 'external/on-offboarding/checklistArrival' | relative_url }}">Checklist upon arrival in Luxembourg</a></li>
<li><a href="{{ 'external/on-offboarding/onboarding' | relative_url }}">Onboarding new members at the LCSB</a></li>
</ul>
</div>
<div class="index-box noborderbox" id="publication-card">
<h3>Publication</h3>
<ul>
<li><a href="{{ 'external/publication/orcid' | relative_url }}">Obtain an ORCID</a></li>
<li><a href="{{ 'external/publication/phdThesisTemplate' | relative_url }}">LaTeX template for a doctoral thesis at University of Luxembourg</a></li>
<li><a href="{{ 'external/publication/10WaysImproveEnglish' | relative_url }}">10 ways to improve your English</a></li>
</ul>
</div>
<div class="index-box noborderbox" id="publication-code-card">
<h3>Publication: Publishing code and programs</h3>
<ul>
<li><a href="{{ 'external/publication-code/publish-repo' | relative_url }}">Publish a repository</a></li>
<li><a href="{{ 'external/publication-code/add-gitignore' | relative_url }}">Add a .gitignore to your repository</a></li>
<li><a href="{{ 'external/publication-code/publishInBiotools' | relative_url }}">Publishing a tool in *bio.tools*</a></li>
</ul>
</div>
</div><br><center><a href="{{ '/' | relative_url }}">go back</a></center><br><center><a href="{{ '/cards' | relative_url }}">Overview of all HowTo cards</a></center>
\ No newline at end of file
documents.js 0 → 100644
View file @ cb504c3b
---
---
{% assign the_cards = site.pages | where_exp:"card","card.searchable >= 1.0" %}
[ {% for card in the_cards %} {
"id": "{{ card.url | slugify }}",
"title": "{{ card.shortcut | xml_escape }}",
"content": {{ card.content | markdownify | strip_html | jsonify }},
"url": "{{ card.url | xml_escape | relative_url }}"
} {% unless forloop.last %},{% endunless %} {% endfor %}
]
external/access/harrenhal-access/harrenhal-access.md 0 → 100644
View file @ cb504c3b
---
card_order: 100
layout: page
permalink: /external/access/harrenhal-access/
shortcut: access:harrenhal-access
redirect_from:
- /cards/access:harrenhal-access
- /external/cards/access:harrenhal-access
- /access/harrenhal-access
- /external/external/access/harrenhal-access/
---
# HARRENHAL access
HARRENHAL is a gateway to provide our external collaborators access to servers that are hosted at the LCSB via a web browser.
## How to access HARRENHAL website ?
Launch your favorite web browser and go to [HARRENHAL](https://harrenhal.uni.lu)
## First time on HARRENHAL ?
1. Enter your credentials
* Username - firstname.lastname
* Password - Temporary password provided by LCSB's sysadmins.
* Click **Login**
<img src="img/login_01.png" height="450px"><br/>
2. Configure the two-factor authentication.
* Scan the QR code with your favorite two-factor authentication app. Or click **show** to display the TOTP key.
* Enter the 6-digit authentication code provided by your two-factor authentication app.
* Click **Continue**
<img src="img/login_03.png" height="650px"><br/>
**Note:** Do not forget to backup your two-factor authentication app account or the TOTP key.
## How to login to your HARRENHAL account ?
Once you successfully complete the password reset and the two-factor authentication enrollment processes, you can login now to your HARRENHAL account.
1. Enter your credentials
* Username - firstname.lastname
* Password - Password you have set.
* Click **Login**
<img src="img/login_01.png" height="450px"><br/>
2. Enter your two-factor authentication code
* Authentication Code - 6-digit authentication code provided by your two-factor authentication app.
* Click **Continue**
<img src="img/login_04.png" height="350px"><br/>
## How to access a VM ?
1. On your homepage under **ALL CONNECTIONS** section, you can view all the VMs that you are allowed to connect to by clicking on the drop list button.
<img src="img/all_connections_01.png" height="150px"><br/>
2. Access to a VM in the list by clicking on it.
<img src="img/server_01.png" height="500px"><br/>
external/access/harrenhal-access/img/all_connections_01.png 0 → 100644
View file @ cb504c3b
external/access/harrenhal-access/img/all_connections_01.png

7.97 KiB

external/access/harrenhal-access/img/login_01.png 0 → 100644
View file @ cb504c3b
external/access/harrenhal-access/img/login_01.png

17.2 KiB

external/access/harrenhal-access/img/login_03.png 0 → 100644
View file @ cb504c3b
external/access/harrenhal-access/img/login_03.png

30.1 KiB

external/access/harrenhal-access/img/login_04.png 0 → 100644
View file @ cb504c3b
external/access/harrenhal-access/img/login_04.png

12.9 KiB

external/access/harrenhal-access/img/server_01.png 0 → 100644
View file @ cb504c3b
external/access/harrenhal-access/img/server_01.png

66.2 KiB

external/access/lums-passwords/img/lums_first-reset-password.png 0 → 100644
View file @ cb504c3b
external/access/lums-passwords/img/lums_first-reset-password.png

118 KiB