refactor: remove markdown in YAML content and improve search/filter (#…

…105)
mcanouil · Aug 9, 2024 · 103b97b · 103b97b
1 parent 6c4f877
commit 103b97b
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 55 deletions.
diff --git a/_quarto.yml b/_quarto.yml
@@ -27,9 +27,12 @@ website:
   repo-actions: [edit, issue]
   page-footer:
     border: true
+    left: |
+      Powered by [[{{< iconify simple-icons:quarto >}}]{style="color:#74aadb;"} Quarto](https://quarto.org).
     center: |
-      &copy; 2024 [Mickaël CANOUIL](https://mickael.canouil.fr/).
-      Powered by [{{< iconify simple-icons:quarto >}} Quarto](https://quarto.org/).
+      &copy; []{#current-year} [Mickaël CANOUIL](https://mickael.canouil.fr/).
+    right: |
+      [[{{< iconify octicon:heart-16 >}}]{style="color:#c96198;"} Sponsor](https://github.com/sponsors/mcanouil?o=esb).
   navbar:
     logo: "assets/media/quarto-extensions.svg"
     left:
@@ -53,6 +56,7 @@ format:
       - assets/stylesheets/authors.scss
     include-after-body:
       - file: assets/scripts/ordinal-dates.html
+      - file: assets/scripts/current-year.html
     grid:
       sidebar-width: 250px
       body-width: 900px

diff --git a/about.qmd b/about.qmd
@@ -16,7 +16,7 @@ about:
 
 ::: {#quarto-extensions-about}
 ::: {.callout-note title="What is this?"}
-This is a listing of {{< iconify simple-icons:quarto >}} Quarto extensions using {{< iconify octicon:mark-github-16 >}} GitHub API to retrieve information from the repositories.
+This is a listing of [{{< iconify simple-icons:quarto >}} Quarto](https://quarto.org) extensions using {{< iconify octicon:mark-github-16 >}} GitHub API to retrieve information from the repositories.
 :::
 :::
 

diff --git a/assets/ejs/authors.ejs b/assets/ejs/authors.ejs
@@ -1,33 +1,31 @@
-```{=html}
-<div class="grid text-center list">
-  <% for (const item of items) { %>
-  <div class="g-col-12 g-col-sm-6 g-col-md-4" <%= metadataAttrs(item) %>>
-    <a href="<%- item.path %>" class="listing-extension-author no-external">
-      <div class="card hovercard">
-        <!-- <div class="ribbon">GitHub</div> -->
-        <img class="card-img-top" loading="lazy" style="border-radius: 40%;" src="<%- item.image %>" alt="<%= item.title %> picture" />
-        <div class="card-body">
-          <strong class="card-title listing-title"><%- item.title %></strong>
-          <p class="card-text">
-            <% if (item.stars || item.extensions) { %>
-            <br/>
-            <% if (item.url) { %>
-            <span>
-              <a href="<%= item.url %>" target="_blank" class="text-decoration: none;"><iconify-icon inline="true" role="img" icon="octicon:mark-github-16" aria-label="Icon mark-github-16 from octicon Iconify.design set." title="Icon mark-github-16 from octicon Iconify.design set."></iconify-icon></a>
-            </span>
-            <% } %>
-            <span>
-              <iconify-icon inline="true" role="img" icon="octicon:star-16" aria-label="Icon star-16 from octicon Iconify.design set." title="Icon star-16 from octicon Iconify.design set."></iconify-icon> <%= item.stars %>
-            </span>
-            <span>
-              <iconify-icon inline="true" role="img" icon="octicon:repo-16" aria-label="Icon repo-16 from octicon Iconify.design set." title="Icon repo-16 from octicon Iconify.design set."></iconify-icon> <%= item.extensions %>
-            </span>
-            <% } %>
-          </p>
-        </div>
-      </div>
-    </a>
-  </div>
-  <% } %>
-</div>
-```
+:::: {.grid .text-center .list}
+
+<% for (const item of items) { %>
+
+:::: {.g-col-12 .g-col-sm-6 .g-col-md-4 <%= metadataAttrs(item) %>}
+
+`<a href="<%- item.path %>" class="listing-extension-author no-external">`{=html}
+
+:::: {.card .hovercard}
+![](<%- item.image %>){.card-img-top loading="lazy" style="border-radius: 40%;" fig-alt="<%= item.title %> picture"}
+
+:::: {.card-body}
+[<%- item.title %>]{.card-title .listing-title style="font-weight: bold;"}
+
+[
+  [{{< iconify octicon:mark-github-16 >}}](<%= item.url %>){target="_blank" style="text-decoration: none;"}
+  [{{< iconify octicon:star-16 >}}]{style='color:#dcbe50;'} <%= item.stars %>
+  {{< iconify octicon:repo-16 >}} <%= item.extensions %>
+]{.card-text}
+:::
+
+:::
+
+`</a>`{=html}
+
+
+:::
+
+<% } %>
+
+:::
diff --git a/assets/ejs/extensions.ejs b/assets/ejs/extensions.ejs
@@ -1,3 +1,9 @@
+<%
+let removeLeadingZeros = function (str) {
+  return str.replace(/^0+/, '');
+}
+%>
+
 :::: {.grid .text-center .list}
 
 <% for (const item of items) { %>
@@ -7,11 +13,15 @@
 :::: {.quarto-grid-item .card .h-100 .card-center .hovercard-extension}
 
 :::: {.card-body .post-contents}
-```{=html}
-<a href="<%- item.path %>" class="quarto-grid-link">
-  <h5 class="no-anchor card-title listing-title"><%= item.title %></h5>
-</a>
-```
+
+[{{< iconify octicon:mark-github-16 >}}](<%- item['github-url'] %>){.quarto-grid-link style="position: absolute; top: 0; right: 0; padding: 0.5em;"}
+
+[
+`<h5 class="no-anchor card-title listing-title">`{=html}
+<%= item.title %>
+`</h5>`{=html}
+](<%- item['github-url'] %>){.quarto-grid-link}
+
 :::: {.listing-categories}
 ```{=html}
 <% for (const category of item.categories) { %>
@@ -26,17 +36,21 @@
 
 :::: {.card-attribution .card-text-small .justify}
 :::: {.listing-author}
-<%= item.author %>
+[<%= item.author %>](<%= item['author-url'] %>){.no-external}
 :::
 :::: {.listing-date}
 <%= item.date %>
 :::
 :::
 
 <table class="card-other-values">
-  <tr><td>License</td><td class="license"><%= item.license %></td></tr>
-  <tr><td>Stars</td><td class="stars"><%= item.stars %></td></tr>
-  <tr><td>Version</td><td class="version"><%= item.version %></td></tr>
+  <tr><td>License</td><td class="listing-license"><%= item.license %></td></tr>
+  <tr><td>Stars</td><td class="listing-stars">
+    [
+      [{{< iconify octicon:star-16 >}}]{style='color:#dcbe50;'} <%= removeLeadingZeros(item.stars) %>
+    ](<%- item['github-url'] %>/stargazers)
+  </td></tr>
+  <tr><td>Version</td><td class="listing-version"><%= item.version %></td></tr>
 </table>
 
 :::

diff --git a/assets/quarto/_author-listing.qmd b/assets/quarto/_author-listing.qmd
@@ -12,17 +12,21 @@ about:
   links:
     - text: "{{< iconify octicon:mark-github-16 >}} GitHub"
       href: "https://github.com/<<github-username>>"
-    - text: "{{< iconify octicon:star-16 >}} <<github-stars>> Stars"
+    - text: "[{{< iconify octicon:star-16 >}}]{style='color:#dcbe50;'} <<github-stars>> Stars"
     - text: "{{< iconify octicon:repo-16 >}} <<extensions-count>> Extensions"
 repo-actions: false
 listing:
   id: listing-extensions-<<github-username>>
   template: ../assets/ejs/extensions.ejs
   contents:
     - ../extensions/yaml/<<github-username>>--**.yml
-  sort-ui: [title, date, author, file-modified]
+  sort-ui: [stars, title, author, date, file-modified]
   sort:
     - stars desc
+  field-types:
+    stars: number
+  field-display-names: 
+    stars: Stars
   filter-ui: true
   categories: true
   page-size: 10

diff --git a/assets/scripts/current-year.html b/assets/scripts/current-year.html
@@ -0,0 +1,6 @@
+<script type="text/javascript">
+document.addEventListener("DOMContentLoaded", function() {
+  const currentYear = new Date().getFullYear();
+  document.getElementById('current-year').textContent = currentYear;
+});
+</script>
diff --git a/assets/scripts/make-yaml.sh b/assets/scripts/make-yaml.sh
@@ -67,13 +67,14 @@ sort -f extensions/quarto-extensions.csv | while IFS=, read -r entry; do
     extension_title=$(basename "${repo}")
     echo -e \
       "- title: ${extension_title#quarto-}\n" \
-      " path: https://github.com/${repo}\n" \
-      " author: \"[${repo_author}](/${author_listing}){.no-external}\"\n" \
+      " github-url: https://github.com/${repo}\n" \
+      " author: \"${repo_author}\"\n" \
+      " author-url: \"/${author_listing}\"\n" \
       " date: \"${repo_created}\"\n" \
       " file-modified: \"${repo_updated}\"\n" \
       " categories: ${repo_topics}\n" \
       " license: \"${repo_license}\"\n" \
-      " stars: \"[$(printf "%05d\n" ${repo_stars})]{style='display: none;'}[[\`&bigstar;\`{=html}]{style='color:#dcbe50;'} ${repo_stars}](https://github.com/${repo}/stargazers)\"\n" \
+      " stars: \"$(printf "%05d\n" ${repo_stars})\"\n" \
       " version: \"${repo_release}\"\n" \
       " description: |\n    ${repo_description}\n${yaml_usage}\n" \
       > "${meta}"

diff --git a/assets/stylesheets/theme.scss b/assets/stylesheets/theme.scss
@@ -1,6 +1,10 @@
 /*-- scss:defaults --*/
 
 /*-- scss:rules --*/
+.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
+  font-weight: bold;
+}
+
 .navbar-title {
   display: none !important;
 }
@@ -10,13 +14,35 @@
 }
 
 .category:hover {
-  color: $primary;
+  color: $link-color;
   font-weight: bold;
 }
 
 .quarto-grid-item .listing-categories .listing-category:hover {
-  color: $primary;
-  border: solid 1px $primary;
+  color: $link-color;
+  border: solid 1px $link-color;
+}
+
+.listing-author a,
+.listing-version a {
+  color: $link-color;
+}
+
+.listing-author:hover a,
+.listing-version:hover a {
+  color: $link-color;
+  font-weight: bold;
+}
+
+.listing-stars a {
+  color: $link-color;
+  text-decoration: none;
+}
+
+.listing-stars:hover a {
+  color: #dcbe50;
+  font-weight: bold;
+  text-decoration: underline;
 }
 
 .quarto-grid-item .card-title {
@@ -35,7 +61,7 @@
 }
 
 .quarto-grid-link:hover {
-  color: $primary;
+  color: $link-color;
   text-decoration: underline;
 }
 

diff --git a/index.qmd b/index.qmd
@@ -7,9 +7,13 @@ listing:
   template: assets/ejs/extensions.ejs
   contents:
     - extensions/yaml/**.yml
-  sort-ui: [title, date, author, file-modified]
+  sort-ui: [stars, title, author, date, file-modified]
   sort:
     - stars desc
+  field-types:
+    stars: number
+  field-display-names: 
+    stars: Stars
   filter-ui: true
   categories: true
   page-size: 10