Installation sur une page

Pré-requis

Pour installer l’affiche des notices de HAL pour un membre il est nécessaire d’avoir un site hébergé. Ce module vient s’intégrer dans la page pour afficher les notices d’un membre donné. Aucune autre pré requis n’est nécessaire.

Installation

Récupération du script

Pour récupérer SpirHAL vous avez trois possibilités :

CDN

La première possibilité est d’utiliser directement la dernière version de SpirHAL sur un serveur qui l’héberge :

https://spirhal.murloc.fr/Spirhal-latest.js

Téléchargement

Une autre possibilité est de récupérer une version déjà compilée de SpirHAL sur ce lien.

Compilation

La dernière possibilité est de compiler vous même SpirHAL. Pour compiler vous même le script il est nécessaire d’avoir installé Node.JS et Angular-CLI. Il est aussi nécessaire d’avoir GIT d’installé sur votre machine.

Tout d’abord il vous faut cloner le git du projet SpirHAL :

git clone git@framagit.org:Murloc6/Spirhal.git

Une fois le contenu du projet récupérer, il faut se rendre dans le dossier et lancer la commande de compilation :

cd Spirhal
npm install
ng build

Lorsque le processus est terminé, les fichiers compilés de SpirHAL sont disponibles dans le dossier dist.

Importer les fichiers sur votre page web

Maintenant que vous avez les fichiers compilés de SpirHAL (soit par CDN, soit en les téléchargant soit en les compilant vous même) il vous faut les importer dans le code de votre page web. Pour cela il faut rajouter les balises d’import dans le head de votre page web. Par exemple si nous avons utilisé la version hébergée sur le serveur CDN, le script à importer sont :

<script src="https://spirhal.murloc.fr/Spirhal-latest.js"></script>

Ce scripts importé contien toutes les dépendances nécessaires à SpirHAL pour fonctionner.

Initialisation de SpirHAL

Une fois le fichier importé il faut maitnenant initialiser SpirHAL. Pour cela, SpirHAL utilise le principe de “Component” d’Angular (plus d’informations ici). Ce qui signifie que l’on utilise une balise spéficique pour SpirHAL avec les paramètres correspondants. Ici la balise s’appelle “spirhal”. Nous pouvons alors insérer dans notre page cette balise et la paramétrer pour qu’elle affiche les notices de la personne concernée. Par exemple si nous souhaitons afficher les notices de “Hélène Débax” du laboratoire Framespa (structID HAL 620) avec la norme “EHESS” alors nous pouvons insérer la balise suivante :

<spirhal researcherName="Hélène Débax" norm="EHESS" structId="620"></spirhal>

On peut remarquer le nom de la balise est bien “spirhal” et ensuite les paramètres sont des attributs de la balise :

  • “researcherName” est la personne dont on souhaite afficher les notices venant de HAL (attention de bien réspecter “Prénom Nom” dans cet ordre avec ces majuscules pour que la requête sur HAL fonctionne correctement)
  • “norm” est le nom de la norme bibliographique à utiliser (seul les normes implémentées peuvent être utilisées). S’il n’y a pas de norme spécifiée alors SpirHAL utilisera la représentation utilisée sur HAL
  • “structId” est le structId sur HAL du laboratoire auquel appartient la personne (ce paramètre est optionnel)
    • il est possible de connaitre le structId d’un laboratoire sur AuréHAL

Une fois cette balise ajoutée, les notices provenant de la personne spécifiée dans “researcherName” seront affichées à l’endroit où est la balise.

Page complète

Un exemple de page complète pour “Hélène Débax” et ne contenant que la liste des notices est la suivante :

<html>
    <head>
        <script src="https://spirhal.murloc.fr/Spirhal-latest.js"></script>
    </head>
    <body>
        <spirhal researcherName="Hélène Débax" norm="EHESS" structId="620"></spirhal>
    </body>
</html>

Style CSS

La balise « <spirhal> » va générer du contenu HTML qu’il est possible de stylisé avec du CSS comme tout élément d’une page HTML.

Voici un exemple du HTML généré pour une notice ayant le texte intégral disponible :

<spirhal researcherName="Hélène Débax" norm="EHESS" structId="620">
    <div class="publiList">
        <div class="groupCitation">
            <div>
                <h3>
                  Article(s)
                </h3>
            </div>
            <div class="card-body list-group">
              <div class="row-citation specificResearcher">
                <div class="citation row">
                    <ehess class="col-md-10">
                      <div class="citation EHESS">
                        <a href="https://halshs.archives-ouvertes.fr/halshs-00498858">
                            <span class="author">Hélène Débax,</span>
                            <span class="title">«Le serrement des mains. Éléments pour une analyse du rituel des serments féodaux en Languedoc et en Provence (XIe-XIIe siècles)»,</span>
                            <span class="journalTitle"><i>Le Moyen Age. Revue d'histoire et de philologie</i>,</span>
                            <span class="volume">tome CXIII,</span>
                            <span class="issue">n°1,</span>
                            <span class="year">2007,</span>
                            <span class="pages">p. 9-23</span>
                        </a>
                      </div>
                    </ehess>
                  <a class="picto-fulltext col-md-2" target="__blank" href="https://halshs.archives-ouvertes.fr/halshs-00498858/file/Debax_serrement.pdf">
                    <img _ngcontent-c1="" src="assets/picto-article.png" width="30">
                  </a>
                </div>
              </div>
            </div>
        </div>
    </div>
</spirhal>

On peut remarquer ici les classes utilisées pour encapsuler chaque éléments de la notice. Bootstrap est utilisé pour aligner les éléments sur la page.