feat(github-card): Display a nice card on github repo links

jeanjerome · jeanjerome · commit c069ee538523 · 2024-10-11T11:00:02.000+02:00
diff --git a/README.md b/README.md
@@ -86,7 +86,8 @@ The website integrates the following layouts:
 - [Font Awesome 5](https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/using-package-managers): A widely-used icon set and toolkit.
 - [Google Fonts](https://fonts.google.com): A library of 1,000 free, open-source fonts.
 - [Compress HTML](https://github.com/penibelst/jekyll-compress-html): A plugin for HTML compression.
-- Code snippet highlighting (Jekyll integrated syntax highlighter, styled like [Carbon Now](https://carbon.now.sh/) images).
+- Code snippet highlighting: A Jekyll integrated syntax highlighter, styled like [Carbon Now](https://carbon.now.sh/) images.
+- GitHub Card: A Jekyll tag, displaying GitHub repo details as GitHub does.
 
 ## Utilizes Jekyll Themes
 
diff --git a/_plugins/jekyll-github-card.rb b/_plugins/jekyll-github-card.rb
@@ -0,0 +1,30 @@
+module Jekyll
+  class GitHubCard < Liquid::Tag
+    def initialize(tag_name, text, tokens)
+      super
+      @repo_name = text.strip
+    end
+
+
+    def render(context)
+        # Generate HTML with SVG icons
+        result = "<div class='github-card clearfix panel panel-default'>"
+        result << "  <div class='panel-body'>"
+        result << "    <div class='name'>#{octo_icon} <a href='https://github.com/#{@repo_name}' target='_blank' rel='noopener noreferrer nofollow'>#{@repo_name}</a>&nbsp;<span class='label'>Public</span></div>"
+        result << "  </div>"
+        result << "</div>"
+    end
+
+    private
+
+    # GitHub mark SVG icon
+    # https://primer.style/foundations/icons/mark-github-16
+    def octo_icon
+      <<-SVG
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path></svg>
+      SVG
+    end
+  end
+end
+
+Liquid::Template.register_tag('github_card', Jekyll::GitHubCard)
diff --git a/_posts/2023-12-29-mixtral-ollama-llamaindex-llm.markdown b/_posts/2023-12-29-mixtral-ollama-llamaindex-llm.markdown
@@ -88,7 +88,8 @@ une démocratisation de ces technologies.
 
 Pour installer Ollama sur votre poste :
 
-- Allez sur le projet Github et suivez les instructions [https://github.com/jmorganca/ollama](https://github.com/jmorganca/ollama){:target="_blank" rel="noopener noreferrer nofollow"}.
+- Allez sur le projet Github et suivez les instructions :
+  {% github_card ollama/ollama %}
 - Ou bien téléchargez directement le binaire d'installation de Ollama [https://ollama.ai/download](https://ollama.ai/download){:target="_blank" rel="noopener noreferrer nofollow"}
 et lancez son installation sur votre poste.
 
diff --git a/_posts/2024-01-07-ferret-apple-mac-llm.markdown b/_posts/2024-01-07-ferret-apple-mac-llm.markdown
@@ -61,7 +61,8 @@ git lfs install
 ### Étape 2 : Télécharger le Code Source de Ferret
 
 J'ai adapté le code de Ferret pour les processeurs Silicon et le framework Metal Performance Shaders (MPS) d'Apple. Il 
-est disponible sur [https://github.com/jeanjerome/ml-ferret/tree/silicon](https://github.com/jeanjerome/ml-ferret/tree/silicon){:target="_blank" rel="noopener noreferrer nofollow"} :
+est disponible sur ce repo :
+{% github_card jeanjerome/ml-ferret %}
 
 - La branche **_main_** contient le code d'origine d'Apple.
 - La branche **_silicon_** contient ma version adaptée.
diff --git a/_posts/2024-02-11-crewai-mixtral-agile-team.markdown b/_posts/2024-02-11-crewai-mixtral-agile-team.markdown
@@ -100,7 +100,8 @@ remplacer.
 
 ### Code Source 
 
-Vous trouverez le code source de ce projet dans le repo GitHub [https://github.com/jeanjerome/ai-agile-team](https://github.com/jeanjerome/ai-agile-team){:target="_blank" rel="noopener noreferrer nofollow"}
+Vous trouverez le code source de ce projet dans ce repo GitHub :
+{% github_card jeanjerome/ai-agile-team %}
 
 <hr class="hr-text" data-content="Agents">
 
diff --git a/_posts/en/2023-12-29-mixtral-ollama-llamaindex-llm.markdown b/_posts/en/2023-12-29-mixtral-ollama-llamaindex-llm.markdown
@@ -90,7 +90,8 @@ the democratization of these technologies.
 
 To install Ollama on your computer:
 
-- Go to the GitHub project and follow the instructions [https://github.com/jmorganca/ollama](https://github.com/jmorganca/ollama){:target="_blank" rel="noopener noreferrer nofollow"}.
+- Go to the GitHub project and follow the instructions:
+  {% github_card ollama/ollama %}
 - Or download the Ollama installation binary directly from [https://ollama.ai/download](https://ollama.ai/download){:target="_blank" rel="noopener noreferrer nofollow"}
   and start the installation on your computer.
 
diff --git a/_posts/en/2024-01-07-ferret-apple-mac-llm.markdown b/_posts/en/2024-01-07-ferret-apple-mac-llm.markdown
@@ -61,7 +61,8 @@ git lfs install
 ### Step 2: Download Ferret's Source Code
 
 I've adapted the Ferret code for Silicon processors and Apple's Metal Performance Shaders (MPS) framework. It
-is available at [https://github.com/jeanjerome/ml-ferret/tree/silicon](https://github.com/jeanjerome/ml-ferret/tree/silicon){:target="_blank" rel="noopener noreferrer nofollow"} :
+is available on this repo:
+{% github_card jeanjerome/ml-ferret %}
 
 - The **_main_** branch contains the original code from Apple.
 - The **_silicon_** branch contains my adapted version.
diff --git a/_posts/en/2024-02-11-crewai-mixtral-agile-team.markdown b/_posts/en/2024-02-11-crewai-mixtral-agile-team.markdown
@@ -94,7 +94,8 @@ and enrich human capabilities rather than merely replace them.
 
 ### Source Code
 
-You can find the source code for this project in the GitHub repo [https://github.com/jeanjerome/ai-agile-team](https://github.com/jeanjerome/ai-agile-team){:target="_blank" rel="noopener noreferrer nofollow"}
+You can find the source code for this project in this GitHub repo:
+{% github_card jeanjerome/ai-agile-team %}
 
 <hr class="hr-text" data-content="Agents">
 
diff --git a/_sass/_premonition.scss b/_sass/_premonition.scss
@@ -156,3 +156,116 @@ $svg-citation-color: "495057";
   }
   /* End of Autogenerated code */
 }
+
+// GitHub Card
+.github-card {
+  color: #59636e;
+  background: #ffffff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-size: 14px;
+  border: 1px solid #d0d7de;
+  border-radius: 10px;
+  padding: 16px;
+  margin-bottom: 20px;
+  width: 100%;
+  max-width: 600px;
+
+  /* Centrage horizontal */
+  margin: 0 auto;
+
+  display: flex;
+  flex-direction: column;
+  //justify-content: center;
+  //align-items: center;
+
+  .panel-body {
+    padding: 12px;
+  }
+
+  .name {
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 10px;
+
+    svg {
+      margin-right: 8px;
+    }
+
+    a {
+      color: #0969da;
+      text-decoration: none;
+      &:after {
+        content: none;
+      }
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .label {
+    border-color: #d1d9e0;
+    color: #59636e;
+    border: max(1px, 0.0625rem) solid #d1d9e0;
+    border-radius: 624.9375rem;
+    display: inline-block;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 18px;
+    padding: 0 0.375rem;
+    white-space: nowrap;
+  }
+
+  .description {
+    font-size: 14px;
+    color: #59636e;
+    margin-bottom: 10px;
+  }
+
+  .badge-group {
+    margin-top: 10px;
+    display: flex;
+    flex-wrap: wrap;
+
+    .badge {
+      margin: 0 .125em .333em 0;
+      display: inline-block;
+      padding: 0 7px;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 18px;
+      white-space: nowrap;
+      border: 1px solid transparent;
+      border-radius: 2em;
+      padding-right: 10px;
+      padding-left: 10px;
+      line-height: 22px;
+      color: #0969da;
+      background-color: #ddf4ff;
+      border: max(1px, 0.0625rem) solid transparent;
+    }
+  }
+
+  .stats {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #57606a;
+    margin-top: max(0.5rem, 8px) !important;
+
+    svg {
+      display: inline-block;
+      overflow: visible !important;
+      vertical-align: text-bottom;
+      fill: currentColor;
+      margin-right: max(0.25rem, 4px) !important;
+    }
+
+    span {
+      margin-right: max(1rem, 16px) !important;
+    }
+  }
+
+}
diff --git a/darkmode.js b/darkmode.js
@@ -123,3 +123,105 @@ function scrollToTop() {
 }
 
 rocket(1000);
+
+// GitHub Card
+document.addEventListener('DOMContentLoaded', async () => {
+  const repoName = document.querySelector('.github-card .name a').textContent.trim();
+
+  // Function to format large numbers (e.g., 92869 -> 92.9k)
+  function formatNumber(num) {
+    if (num >= 1000) {
+      return (num / 1000).toFixed(1) + 'k';
+    }
+    return num.toString();
+  }
+
+  // Fetch the informations repo
+  async function fetchRepoData(repo) {
+    try {
+      const response = await fetch(`https://api.github.com/repos/${repo}`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      return await response.json();
+    } catch (error) {
+      console.warn(`Failed to fetch data for ${repo}: ${error.message}`);
+      return null;
+    }
+  }
+
+  // Complete the existing HTML
+  async function completeGitHubCard() {
+    const repo = await fetchRepoData(repoName);
+
+    if (repo) {
+      const {
+        full_name: fullName,
+        description,
+        stargazers_count: stars,
+        forks_count: forks,
+        pushed_at: pushedAt,
+        language,
+        license,
+        topics = []
+      } = repo;
+
+      // Date formatter
+      const formattedDate = new Date(pushedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+
+      // Inject new data into the card
+      const card = document.querySelector('.github-card .panel-body');
+
+      // Inject description
+      const descriptionHtml = document.createElement('div');
+      descriptionHtml.className = 'description';
+      descriptionHtml.textContent = description;
+      card.appendChild(descriptionHtml);
+
+      // Injects topics
+      if (topics.length > 0) {
+        const topicsHtml = document.createElement('div');
+        topicsHtml.className = 'badge-group';
+        topicsHtml.innerHTML = topics.map(topic => `<span class='badge'>${topic}</span>`).join(' ');
+        card.appendChild(topicsHtml);
+      }
+
+      // Inject statistics (language, stars, forks, license, last push as last update)
+      const statsHtml = document.createElement('div');
+      statsHtml.className = 'stats';
+      statsHtml.innerHTML = `
+        <span>${languageIcon()} ${language || 'Unknown Language'}</span>
+        <span>${starIcon()} ${formatNumber(stars)}</span>
+        <span>${forkIcon()} ${formatNumber(forks)}</span>
+        <span>${licenseIcon()} ${license?.name || 'No License'}</span>
+        <span>Updated on ${formattedDate}</span>
+      `;
+      card.appendChild(statsHtml);
+    }
+  }
+
+  // Run the function to complete the card
+  completeGitHubCard();
+});
+
+// Icons come from official https://primer.style/foundations/icons
+
+// https://primer.style/foundations/icons/file-binary-16
+function languageIcon() {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0 1 14.25 15h-9a.75.75 0 0 1 0-1.5h9a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 10 4.25V1.5H5.75a.25.25 0 0 0-.25.25v2a.75.75 0 0 1-1.5 0Zm-4 6C0 6.784.784 6 1.75 6h1.5C4.216 6 5 6.784 5 7.75v2.5A1.75 1.75 0 0 1 3.25 12h-1.5A1.75 1.75 0 0 1 0 10.25ZM6.75 6h1.5a.75.75 0 0 1 .75.75v3.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-3h-.75a.75.75 0 0 1 0-1.5Zm-5 1.5a.25.25 0 0 0-.25.25v2.5c0 .138.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-2.5a.25.25 0 0 0-.25-.25Zm9.75-5.938V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg>`;
+}
+
+// https://primer.style/foundations/icons/star-16
+function starIcon() {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path></svg>`;
+}
+
+// https://primer.style/foundations/icons/repo-forked-16
+function forkIcon() {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path></svg>`;
+}
+
+// https://primer.style/foundations/icons/law-16
+function licenseIcon() {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path></svg>`;
+}
diff --git a/darkmode.min.js b/darkmode.min.js
