From 65766784963ee0927d081a8fd5d06209bc2ff82a Mon Sep 17 00:00:00 2001
From: linogaliana <lino.galiana@insee.fr>
Date: Mon, 24 Jun 2024 16:34:08 +0000
Subject: [PATCH] Template

---
 chapters/cards.ejs                            | 76 +++++++++++++++++++
 chapters/galerie.qmd                          | 14 ++--
 .../galerie/2024/{_model.qmd => model.qmd}    |  4 +-
 index.qmd                                     |  4 +-
 styles.css                                    | 33 ++++++++
 5 files changed, 123 insertions(+), 8 deletions(-)
 create mode 100644 chapters/cards.ejs
 rename chapters/galerie/2024/{_model.qmd => model.qmd} (79%)

diff --git a/chapters/cards.ejs b/chapters/cards.ejs
new file mode 100644
index 0000000..18eb8b5
--- /dev/null
+++ b/chapters/cards.ejs
@@ -0,0 +1,76 @@
+```{=html}
+
+<%
+// Number of columns
+const cols = 2;
+
+// Card alignment
+const align = "left";
+
+// Borders
+const hideBorders = false;
+
+// Cap Options
+const imgHeight = "100%";
+%>
+
+<link href="/assets/css/all.css" rel="stylesheet">
+
+<div class="list grid quarto-listing-cols-<%=cols%>">
+<% for (const item of items) { %>
+  <div class="g-col-1" <%= metadataAttrs(item) %>>
+    <a href="<%= item.website %>" target="_blank" rel="noopener" class="grid-item-link custom-link"> <!-- Added custom-link class -->
+      <div class="quarto-grid-item card h-100 <%-`card-${align}`%><%= hideBorders ? ' borderless' : '' %>">
+        <% if (item.image) { %>
+          <p class="card-img-top">
+            <img src="<%= item.image %>" class="thumbnail-image card-img" style="height: auto;" alt="<%= item['image-alt'] %>">
+          </p>
+        <% } else { %>
+          <div class="card-img-bg" <%= imgHeight ? ` style="height: ${imgHeight};"` : '' %>>&nbsp;</div>
+        <% } %> 
+        <% if ('title' || 'subtitle' || otherFields.length > 0) { %>
+          <div class="card-body post-contents">
+            <% if ('title') { %><h5 class="no-anchor card-title listing-title custom-link"><%= item.title %></h5><% } %>
+            <% if ('subtitle') { %><div class="card-subtitle listing-subtitle custom-link"><%= item.subtitle %></div><% } %>
+
+            <% if ('description') { %>
+              <div class="card-text listing-description delink custom-link"><%= item.description %></div>
+            <% } %>
+
+            <% 
+            const flexJustify = 'author' && 'date' ? "justify" : 'author' ? "start" : "end";
+            %>
+            <% if ('author' || 'date') { %>
+              <div class="card-attribution card-text-small <%-flexJustify%>">
+                <% if ('author') { %><div class="listing-author"><%= item.author %></div><% } %>
+                <% if ('date') { %><div class="listing-date"><%= item.date %></div><% } %>
+              </div>
+            <% } %>
+            <style>
+              .listing-categories .listing-category .listing-href {
+                color: inherit; /* blue colors for links too */
+                text-decoration: inherit; /* no underline */
+              }
+            </style>
+            <div class="listing-categories" style="padding-top: 1em;">
+              <% if ('github') { %>
+                <div class="listing-category">
+                  <a class="listing-href" href="<%= item.github %>" target="_blank" rel="noopener">Github <i class="fa-brands fa-github"></i></a>
+                </div>
+              <% } %>
+              <% if (item.website) { %>
+                <div class="listing-category">
+                  <a class="listing-href" href="<%= item.website %>" target="_blank" rel="noopener">Website <i class="fa-brands fa-firefox-browser"></i></a>
+                </div>
+              <% }  %>            
+            </div>
+          </div>
+        <% } %>
+      </div>
+    </a> <!-- Added custom-link class -->
+  </div>
+<% } %>
+</div>
+
+
+```
\ No newline at end of file
diff --git a/chapters/galerie.qmd b/chapters/galerie.qmd
index 4e921f7..a308c80 100644
--- a/chapters/galerie.qmd
+++ b/chapters/galerie.qmd
@@ -1,12 +1,11 @@
 ---
-title: "Portabilité"
+title: "Galerie d'exemples"
 description: |
-  Présentation des principes et des techniques permettant de rendre un projet exécutable sur différents environnements.
-image: /box.png
-href: chapters/galerie.html
+  Une galerie d'exemple de projets
+image: https://minio.lab.sspcloud.fr/lgaliana/generative-art/mise-en-prod/galerie.jfif
 listing:
     id: sample-listings
-    contents: chapters/galerie/2024/*.qmd
+    contents: galerie/2024/*.qmd
     type: grid
     sort: "number"
     categories: true
@@ -15,5 +14,8 @@ listing:
 ---
 
 
+Une galerie d'exemple de projets à venir
 
-Une galerie d'exemple de projets à venir
\ No newline at end of file
+
+::: {#sample-listings}
+:::
diff --git a/chapters/galerie/2024/_model.qmd b/chapters/galerie/2024/model.qmd
similarity index 79%
rename from chapters/galerie/2024/_model.qmd
rename to chapters/galerie/2024/model.qmd
index 95b0aee..fca5bcd 100644
--- a/chapters/galerie/2024/_model.qmd
+++ b/chapters/galerie/2024/model.qmd
@@ -1,6 +1,7 @@
 ---
 title: "Modèle de carte"
-image: https://minio.lab.sspcloud.fr/lgaliana/generative-art/mise-en-prod/galerie.jfif
+image: "https://minio.lab.sspcloud.fr/lgaliana/generative-art/mise-en-prod/galerie.jfif"
+number: 1
 categories:
     - Parcours publication reproductible
     - Parcours MLOps
@@ -11,4 +12,5 @@ website: https://ensae-reproductibilite.github.io/website/chapters/evaluation.ht
 levels: ["Débutant", "Intermédiaire"]
 ---
 
+
 Une description en quelques mots du projet
\ No newline at end of file
diff --git a/index.qmd b/index.qmd
index b3149cb..b85688f 100644
--- a/index.qmd
+++ b/index.qmd
@@ -1,7 +1,9 @@
 ---
 listing:
   id: formations
-  contents: chapters
+  contents:
+    - "chapters/*.qmd"
+    - "!chapters/galerie/*.qmd"  
   sort: "order"
   type: grid
   template: cards.ejs
diff --git a/styles.css b/styles.css
index 68d11c6..0448185 100644
--- a/styles.css
+++ b/styles.css
@@ -3,6 +3,39 @@
   /*--title-color: #870511 ;*/
 }
 
+/* css styles */
+.grid-item-link {
+  color: inherit;
+  text-decoration: none; /* Remove underline */
+  transition: transform 0.2s ease-in-out; /* Add transition for smooth effect */
+}
+
+.grid-item-link:hover {
+  transform: scale(1.05); /* Increase the scale for a zoom effect */
+}
+
+.card-title.listing-title {
+  font-weight: bold; /* Set the card title to bold */
+  margin-bottom: 1em; /* Add a little more space after the title */
+}
+
+.card-body.post-contents {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.listing-categories {
+  margin-top: auto;
+}
+
+.listing-category:hover {
+  transform: scale(1.05); /* Apply a slight zoom effect */
+  transition: transform 0.3s ease-in-out; /* Add a smooth transition */
+}
+
+
+
 .colorized {
   color: var(--main-color) ;
 }