Le thème du site est basé sur le thème “Bulma clean Theme” modifié pour s’ajuster aux besoins du hub. Pour une documentation complète du thème, vous pouvez consulter :
Pour la documentation liée à Bulma : Bulma.io
Le processeur Markdown utilisé est “Kramdowm”. Vous pouvez en retrouver une documentation complète ici : Kramdown quick ref.
Si la génération locale ne fonctionne pas correctement avec WSL ou si la regénération ne se fait pas, vous ouvez utiliser cette commande :
bundle exec jekyll serve --force_polling --livereload
Pour une utilisation avec l’espace en ligne “CodeSpace” de GitHub, il faudra mettre en place certains outils avant de générer le site :
rvm install "ruby-2.7.0"
rvm use 2.7.0
bundle install
bundle update
bundle exec jekyll serve
Pour l’utilitaire de recherche, celui-ci est intégré au site en utilisant Jekyll instant search. Celui-ci est simple et léger mais ne se base que sur les infos fournis dans le Front Matter de chaque page. En effet, le fonctionnement de Jekyll instant search est le suivant :
Attention donc à bien renseigner l’ensemble des informations dans le Front Matter de chaque page.
{: .shadow}
{% include image-hover.html text="Texte" link="lien d'image" %}
Passez votre souris sur le lien
Permet de générer rapidement et facilement des étapes de documentation avec une image et un texte en markdown. Le résultat est responsive et les étapes peuvent se succéder
{% include step-tuto.html
content="##### Etape 1 :
Voici une étape de documentation. *Compatible* avec **Markdown**. "
image="image001.png" %}
Voici une étape de documentation. Compatible avec Markdown.
{% include step-tuto.html
content="##### Etape 1 :
Voici la **première** étape du tutoriel."
image="image002.png" %}
{% include step-tuto.html
content="##### Etape 2 :
Voici la *seconde* étape du tutoriel."
image="image003.png" %}
Résultat :
Voici la première étape du tutoriel.
Voici la seconde étape du tutoriel.
Il est aussi possible d’inclure une vidéo :
{% include step-tuto.html
content="Il est également possible avec les mêmes outils de recycler d'autres matériaux par la suite et ainsi compléter le champs d'usage du projet. Comme ici dans cette vidéo où le recyclage des masques, utilisés et jetés quotidiennement par l'ensemble des personnes fréquentant l'école, devient possible et permet d'être injecté pour la création de nouveaux produits."
video="YVsd3XBJ6i4" %}
Il est également possible avec les mêmes outils de recycler d’autres matériaux par la suite et ainsi compléter le champs d’usage du projet. Comme ici dans cette vidéo où le recyclage des masques, utilisés et jetés quotidiennement par l’ensemble des personnes fréquentant l’école, devient possible et permet d’être injecté pour la création de nouveaux produits.
Il est parfois necessaire d’inclure plusieurs images sur une seule ligne afin de gagner de la palce ou en clarté. Pour cela vous pouvez utiliser le snip suivant :
{% include image-row.html
image_1 = "/img/posts-images/2022-11-22-17-37-51.png"
image_2 = "/img/posts-images/2022-11-22-17-47-01.png"
image_3 = "/img/posts-images/2022-11-22-17-48-51.png"
image_4 = "/img/posts-images/2022-11-22-17-38-15.png"
%}
Vous pouvez aller jusque 4 images en ligne maximum. Si vous en souhaitez moins (2 ou 3) il vous suffit de ne pas mettre d’image 3 ou 4.
Resultat avec deux images :
{% include image-row.html
image_1 = "/img/posts-images/2022-11-22-17-37-51.png"
image_2 = "/img/posts-images/2022-11-22-17-47-01.png"
%}
Rajoute les “messages” Bulma au theme :
{% include message.html
title="Attention"
message="Le PLA n’est pas autant réutilisable que les PE. Pour conserver un maximum ses propriétés, et espérer refaire du finalement d’impression, il faudrait pouvoir mélanger du plastique usagé avec du plastique neuf à chaque recyclage.
Pour éviter cela, le choix de créer des bobines de filament est mis de côté pour le moment, et l’injection plastique sera privilégiée"
status="is-warning"
dismissable="false"
icon="fas fa-exclamation-triangle" %}
Le PLA n’est pas autant réutilisable que les PE. Pour conserver un maximum ses propriétés, et espérer refaire du finalement d’impression, il faudrait pouvoir mélanger du plastique usagé avec du plastique neuf à chaque recyclage.
Pour éviter cela, le choix de créer des bobines de filament est mis de côté pour le moment, et l’injection plastique sera privilégiée
Pour intégrer un modèle 3D, on va utiliser un fichier .gltf ou .glb. Pour cela, la première chose à faire est de récupérer un fichier au bon format. Certains logiciels permettent l’export vers ces format simplement.
Si ce n’est pas le cas, il est conseiller de passer par un format intermédiaire (un .obj par exemple) puis de l’ouvrir dans le logiciel CAD Assistant. Le logiciel vous permettra de faire les dernieres modifications sur votre modèle (suppression, rendu, couleurs, materiaux,etc…) avant de l’exporter dans le bon format .gltf ou .glb.
Une fois ceci fait, rendez-vous sur le site [modelviewer]/(https://modelviewer.dev/editor/) et chargez votre fichier. Faites les ajouts nécessaires puis copiez-collez le snippet dans votre page.
Ne pas oublier de mettre votre modèle au format .gltf ou .glb sur le site de la même manière que pour une image.
Modifier le _main.scss pour changer l’affichage du model-viewer.
Pour inclure un fichier 3D rapidement sans passer par “model-viewer” et sans personnalisation, vous pouvez utiliser ce code :
{% include 3d-model.html
model = "bloc.glb"
%}
Spaceship est un plugin jekyll qui incorpore un nombre important d’outils permettant l’écriture de documents avec des fonctionnalités augmentées.
Les outils sont nombreux et intègre par exemple :
Vous trouverez une liste des fonctionnalités complète sur le repo associé : jekyll-Spaceship
Quelques exemples :
Tableaux :
| Easy Multiline | ||||
|---|---|---|---|---|
| Apple
Apple Apple |
Banana
Banana Banana |
Orange
Orange Orange |
||
| Apple
Apple |
Banana
Banana |
Orange
Orange |
||
| Apple | Banana | Orange | ||
| Stage | Direct Products | ATP Yields |
|---|---|---|
| Glycolysis
|
2 ATP | |
| 2 NADH | 3–5 ATP | |
| Pyruvaye oxidation | 2 NADH | 5 ATP |
| Citric acid cycle
|
2 ATP | |
| 6 NADH | 15 ATP | |
| 2 FADH | 3 ATP | |
| 30–32 ATP | ||
Mermaid :
Mathématiques :
$ \int_a^b f(x)\,dx. $
PlanUML :
Le plugin permet d’afficher directement un lecteur de pdf (local ou externe) dans une page en markdown. Plus d’infos sur le repo du plugin : https://github.com/MihajloNesic/jekyll-pdf-embed.
Exemple :
{% pdf "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" %}
On peut aussi afficher des présentations au format .ppt ou .pptx
{% pdf "http://img.labnol.org/di/PowerPoint.ppt" %}
LinkPreview est une addons permettant d’afficher une prévisualisation d’un lien en utilisant les métadonnées.
Utilisation simple :
{% linkpreview "https://www.unilasalle.fr" %}
Attention : LinkPreview est utilisé sur le site pour générer le Board des projets. Il n’est donc pas utilisable directement aujourd’hui dans n’importe qu’elle page.
Si le site n’a pas de metadata OpenGraph enregistrées :
Si le site a des metadata OpenGraph enregistrées :
Jekyll-remote-include permet d’inclure une page markdown externe directement dans un page du site. Cela permet de rendre un readme d’un autre repo projet par exemple.
Plus d’infos ici : Jekyll-remote-include Afin d’utiliser au mieux le plugin, la branch “context-variables” est utilisé depuis le fork de UriShX. La branch de ce fork permet d’inclure des variables liquid dans le tag liquid.
Pour l’utiliser :
{% remote_include https://raw.githubusercontent.com/jekyll/jekyll/master/README.markdown %}
La page est ensuite rendue avec les standards du site.
Attention : Bien utiliser la version raw du fichier markdown que vous souhaitez inclure si vous utiliser un markdown stocké sur un repo git. Sur GitLab, pour trouver le lien vous pouvez cliquer sur OpenRaw en haut à drotie du fichier :
Documentation site of Unilasalle Amiens Based on Jekyll website using GitLab Pages.
Learn more about GitLab Pages or read the the official GitLab Pages documentation.
Even if this documentation page is hosted on gitlab, it is easier to use a local copy of the project to modify the website. There is several way on running Jekyll locally depending on the platform you’re using.
You can both use Jekyll for windows of install the WSL to run the classical linux version of Jekyll Personnaly I prefere using the WSL since it way more convenient to install additionnal gem dependecies.
To get Ubuntu and Windows working together follow these steps :
sudo apt-get update -y && sudo apt-get upgrade -y
sudo apt-get install ruby-full build-essential zlib1g-dev
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
gem install jekyll bundler
PATH
gem install jekyll bundler
jekyll -v
You can clone this repo using Git by typing this command :
git clone https://gitlab.com/makerspace-unilasalle/campus-amiens/hub-amiens.git
Fill in your credentials and wait for it !
To start the local webserver run this command from the project root:
bundle exec jekyll serve
This website use the Bulma Clean theme. The theme is available as a ruby gem or can be used with GitHub pages.
The ruby gem is available on the Ruby Gems website at the following location. https://rubygems.org/gems/bulma-clean-theme.
The theme can be used with GitHub Pages by setting the remote_theme in your Jekyll sites _config.yml
remote_theme: chrisrhymes/bulma-clean-theme
For full instructions, please see the Readme at the GitHub repo: https://github.com/chrisrhymes/bulma-clean-theme/blob/master/README.md
The demo site showcases the available page layout options.