Du style pour le site (#434)

* style banniere

* introductions

* update quarto

* fichier des contributeurs

* conditionne pipeline

* test fork

Author: linogaliana

.github/workflows/netlify-test.yaml

@@ -5,7 +5,6 @@ on:
     branches:
       - main
       - master
-      - dev
 
 jobs:
   pages:
@@ -49,14 +48,6 @@ jobs:
           npm install --unsafe-perm=true netlify-cli -g
           netlify init
           netlify deploy --alias=${BRANCHE_REF} --dir="_site" --message "Preview deploy from ${BRANCHE_REF}"
-      - uses: actions/upload-artifact@v2
-        with:
-          name: Content
-          path: content/
-      - uses: actions/upload-artifact@v2
-        with:
-          name: Website
-          path: public/
   enonces:
     name: Render notebooks
     runs-on: ubuntu-latest
@@ -88,19 +79,8 @@ jobs:
          quarto render content --to ipynb --execute -M echo:true
          mkdir -p temp_notebooks/corrections
          python build/move_files.py temp_notebooks/corrections
-      - uses: actions/upload-artifact@v2
-        with:
-          name: Source enonce
-          path: content/
-      - uses: actions/upload-artifact@v2
-        with:
-          name: Enonces
-          path: temp_notebooks/notebooks/
-      - uses: actions/upload-artifact@v2
-        with:
-          name: Enonces
-          path: temp_notebooks/corrections/
       - name: Pushes to another repository
+        if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
         uses: linogaliana/github-action-push-to-another-repository@main
         env:
           API_TOKEN_GITHUB: ${{ secrets.API_TOKEN_GITHUB }}
@@ -114,6 +94,3 @@ jobs:
           create-target-branch-if-needed: true
           reset-repo: true
 
-
-
-

.github/workflows/notebooks.yml

@@ -11,6 +11,7 @@ jobs:
     name: Render notebooks
     runs-on: ubuntu-latest
     container: linogaliana/python-datascientist:latest
+    if: ${{ !github.event.pull_request.head.repo.fork }}    
     steps:
       - uses: actions/checkout@v3
         with:

.github/workflows/prod.yml

@@ -11,6 +11,7 @@ jobs:
     name: Render-Blog
     runs-on: ubuntu-latest
     container: linogaliana/python-datascientist:latest
+    if: ${{ !github.event.pull_request.head.repo.fork }}
     steps:
       - uses: actions/checkout@v2
         with:

CONTRIBUTING.md

@@ -0,0 +1,74 @@
+# Contribuer aux supports
+
+## Fonctionnement du dépôt
+
+Le site web et les notebooks sont construits à partir de `Quarto`. Le site
+web est le format par défaut, les _notebooks_ sont construits par
+intégration continue. 
+
+En supposant que l'environnement `Python` est fonctionnel (cf. ci-dessous), 
+le site web dans son ensemble peut être construit avec la commande
+suivante
+
+```shell
+# pour les utilisateurs du sspcloud
+quarto preview --port 5000 --host 0.0.0.0
+
+# hors du sspcloud
+quarto preview
+```
+
+Pour ne faire un _render_ que d'une fiche, il est possible de modifier à la main 
+la section `render` du 
+fichier `_quarto.yml`. Supprimer la liste des fichiers sauf les `**/introductions.qmd`
+et la fiche désirée.
+N'oubliez pas de restaurer la version d'origine
+du `quarto.yml` avant de faire la _pull request_ !
+
+Pour visualiser le _notebook_ qui sera généré à l'issue des
+modifications, la commande à exécuter est la suivante:
+
+```shell
+quarto render chemin_du_fichier/fichier.qmd --to ipynb
+```
+
+puis ouvrir le `.ipynb` obtenu. 
+
+La correction peut être prévisualisée de la manière suivante:
+
+```shell
+quarto render --execute -M echo:true
+```
+
+puis ouvrir le `.ipynb` obtenu. 
+
+
+__Aucun *output* ne doit être committé, seuls les fichiers sources `.qmd`__. Toutes les
+sorties (fichiers .png, .html, .ipynb, etc.) sont générées
+par le biais de scripts automatisés qui tournent à chaque
+_commit_ sur le dépôt `linogaliana/python-datascientist`. 
+
+
+## Mise en place de l'environnement pour tester les exemples
+
+Pour les contributeurs ayant un accès au SSP Cloud,
+ces commandes suffisent pour
+avoir l'environnement minimal nécessaire pour construire en local
+le site _web_. 
+
+```shell
+# Sur le SSPCloud
+pip install -r requirements.txt
+./requirements.sh
+```
+
+Pour les contributeurs hors de cet environnement (dommage !), 
+il est nécessaire en premier lieu d'avoir les éléments suivants:
+
+- Une version récente de `Quarto`, _a minima_ la `1.3.450`.
+- `Jupyter` et un outil de gestion des environnements `Python` (`miniconda` par exemple).
+
+L'installation de l'environnement minimal pour reproduire les exemples peut être
+fait sur la base d'un _trial and error_ en attendant la mise à disposition
+d'un fichier adéquat (`pip freeze` ne fournit pas un fichier satisfaisant)
+

_partials/title-block-link-buttons/title-block.html

@@ -0,0 +1,52 @@
+<!-- source: https://github.com/gadenbuie/garrickadenbuie-com/blob/main/_partials/title-block-link-buttons/title-block.html -->
+<!-- source: https://raw.githubusercontent.com/spcanelon/silvia/32853dd0e70a71514b0922ee306f80ed5897f776/_partials/title-block-link-buttons/title-block.html -->
+<!-- 
+<header id="title-block-header" class="quarto-title-block default">
+<div class="quarto-title"> 
+-->
+<!-- <header id="title-block-header" class="quarto-title-block default page-columns"> -->
+<!-- <div class="quarto-title page-columns page-full featured-image p-4" style="background-image: url(featured.png), url(featured.jpg), url(../featured.jpg);"> -->
+    <header id="title-block-header" class="quarto-title-block default page-columns">
+        $if(image)$
+        <div id="title-block-header-title" class="quarto-title page-columns page-full page-layout-full featured-image p-4" style="background-image: url($image$);">
+        $endif$
+        <h1 class="title">$title$</h1>
+        $if(subtitle)$
+        <p class="subtitle lead">$subtitle$</p>
+        $endif$
+        $if(categories)$
+          $if(quarto-template-params.title-block-categories)$
+          <div class="quarto-categories">
+            $for(categories)$
+            <div class="quarto-category">$categories$</div>
+            $endfor$
+          </div>
+          $endif$
+        $endif$
+        </div>
+        
+        $if(hide-description)$
+        $elseif(description)$
+        <div>
+          <div id="title-block-title-desc" class="description pt-4">
+            $description$
+          </div>
+        </div>
+        $endif$
+        
+        $title-metadata.html()$
+        
+        $if(links)$
+        <div class="mt-4 d-flex flex-row flex-wrap gap-1 justify-content-left justify-content-sm-start" role="group" aria-label="Links">
+        $for(links)$
+        <a href="$links.url$" class="btn btn-secondary text-capitalize"><i class="bi bi-$links.icon$ me-1"></i> $links.name$</a>
+        $endfor$
+        </div>
+        $endif$
+
+        $if(path)$
+        <div>$path$</div>
+        $endif$
+
+
+        </header>

_quarto.yml

@@ -199,8 +199,12 @@ format:
       - custom.scss
     css: styles.css
     toc: true
+    code-overflow: wrap
+    template-partials: 
+      - ../../_partials/title-block-link-buttons/title-block.html
   ipynb: default
 
+
 crossref:
   chapters: true
 

content/manipulation/02a_pandas_tutorial.qmd

@@ -24,6 +24,10 @@ description: |
   (`DuckDB`, `Dask`, `Polars`, `Spark`...).
 bibliography: ../../reference.bib
 image: featured.png
+links:
+- icon: journal-text
+  name: Documentation Pandas
+  url: https://pandas.pydata.org/docs/
 ---
 
 Pour essayer les exemples présents dans ce tutoriel : 

custom.scss

@@ -6,6 +6,14 @@
   color: white !important;
 }
 
+// style background image on posts
+.featured-image {
+    background-size: cover;
+    background-position: center;
+    color: white;
+    box-shadow: inset 0 0 0 1000px rgba(0,38,66,0.75);
+}
+
 /* ---------------
 DETAILS
 ----------------*/

requirements.sh

@@ -1,4 +1,4 @@
 #!/bin/bash
 
 sudo apt-get update && \
-    sudo apt install graphviz
+    sudo apt install -y graphviz