Draft: Add AI stack
Provides a landing page that shows the status of the packaging for different ML libraries.
Broken, because Hugo can't render a shortcode within a shortcode. I don't know how to solve this.
Merge request reports
Activity
Actually I think the opposite would be even better, i.e. having a partial to generate the table, and a shortcode to generate the logo. Below is a quick example built by ChatGPT.
Certainly! Let's break down the solution step by step to create a Hugo partial that generates a table from a JSON file, where one of the columns is generated by calling a shortcode.
We'll assume you're using JSON data stored in
data/books.json, and you want to generate a table from this data. One of the columns will be generated by calling a shortcode for rendering genre icons.Example Structure
Let's assume your JSON file looks like this:
data/books.json[ { "title": "The Great Adventure", "author": "John Doe", "year": 2020, "genre": "Adventure" }, { "title": "The Dystopian World", "author": "Jane Smith", "year": 2018, "genre": "Dystopian" }, { "title": "The Fictional Tale", "author": "Mark Black", "year": 2015, "genre": "Fiction" } ]Step 1: Define the Shortcode for the Genre Icon
First, let's define the shortcode that will generate an icon based on the genre. We'll create a
genre-icon.htmlshortcode./layouts/shortcodes/genre-icon.html{{- $genre := .Get "genre" -}} {{- $icon := "" -}} {{- if eq $genre "Fiction" }} {{- $icon = "<i class='fas fa-book'></i>" }} {{- else if eq $genre "Adventure" }} {{- $icon = "<i class='fas fa-compass'></i>" }} {{- else if eq $genre "Dystopian" }} {{- $icon = "<i class='fas fa-eye'></i>" }} {{- else }} {{- $icon = "<i class='fas fa-question'></i>" }} <!-- Default icon --> {{- end }} {{ $icon | safeHTML }}This shortcode takes a genre as input and returns an appropriate icon for it.
Step 2: Create the Partial to Generate the Table
Next, we create a partial that generates the table. This partial will read data from the
data/books.jsonfile and use thegenre-iconshortcode to render the genre column./layouts/partials/table-of-books.html<table> <thead> <tr> <th>Title</th> <th>Author</th> <th>Year</th> <th>Genre</th> </tr> </thead> <tbody> {{ range .Site.Data.books }} <tr> <td>{{ .title }}</td> <td>{{ .author }}</td> <td>{{ .year }}</td> <td> {{< genre-icon genre=.genre >}} <!-- Calling the shortcode here --> </td> </tr> {{ end }} </tbody> </table>- In this partial, we are using the
rangefunction to loop through each item in thebooks.jsondata. - For each book, we use
{{ .title }},{{ .author }},{{ .year }}, and{{ .genre }}to fill out the table. - We then call the
{{< genre-icon genre=.genre >}}shortcode inside the<td>for the genre column. This dynamically renders the appropriate icon for each genre.
Step 3: Use the Partial in a Template
Now that we have the
table-of-books.htmlpartial, we need to call it from a template or content file.Example: Calling the Partial in a Page (e.g.,
content/books.md)In your
content/books.mdfile (or any other content page), you can include the partial like this:--- title: "Books" --- Here is a list of books: {{ partial "table-of-books.html" . }}This will render the table generated by the partial on the page, with each genre being represented by its corresponding icon.
Step 4: Ensure FontAwesome is Loaded for Icons
Since we're using FontAwesome icons for the genres, you should make sure that FontAwesome is included in the
<head>of your layout file./layouts/partials/head.html(orbaseof.html)<head> <!-- Other head elements --> <!-- FontAwesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head>Step 5: Run Hugo to Generate the Site
Once everything is set up, you can run the Hugo development server:
hugo serverThen, visit
http://localhost:1313/books/(or whatever page you linked the partial to), and you should see the table rendered with the genre icons for each book.
Recap of the Solution:
-
JSON Data: The
books.jsonfile contains book information. -
Shortcode: The
genre-iconshortcode renders an icon for the genre. -
Partial: The
table-of-books.htmlpartial loops through the JSON data and calls thegenre-iconshortcode for each book’s genre. -
Template: The partial is included in a page (e.g.,
books.md), which generates the table with the dynamic content.
This solution combines shortcodes, partials, and JSON data in Hugo to create a dynamic, reusable component for displaying books in a table format.
- In this partial, we are using the
assigned to @fayatsll
Turns out that loading so many
<img>will result in getting some 429 errors. I've tried throttling down the requests with JS but it's a hard problem to solve.I'll leave the MR as PoC for now.
Edited by Fernando Ayats
