k3rs3d · shombando · Dec 20, 2025 · Dec 20, 2025 · Dec 20, 2025
diff --git a/README.md b/README.md
@@ -112,17 +112,14 @@ Templates are located in the `./data/templates` folder by default; this path can
 
 Templates contain tags which will be replaced with generated content. You can customize generated files by adding content before/after the tags. The repo includes basic template examples to get you started. 
 
-In the templates folder, `redirect.html` is used to generate each of the `next.html`/`previous.html` pages, containing the redirects for each website. The tag `{{ url }}` is inserted by the generator in each page, and that powers the webring.
+In the templates folder, `redirect.html` is used to generate each of the `next.html`/`previous.html` pages, containing the redirects for each website. The tag `{{ url }}` is inserted by the generator in each page, and that powers the webring. Right now, `{{ url }}` is a unique tag that only works in `redirect.html` for the next/previous links.
 
 Besides `redirect.html`, the templates folder can contain any other templates you want.
 
-For instance, it's a good idea for a webring to have a central hub page listing all of the sites. You can put this on `index.html`, or create a dedicated page such as `list.html`, `table.html`, etc. ~~Simply use the tag `{{ table_of_sites }}` in the template, and `ringfairy` will generate a formatted list of the sites in the webring.~~
-
 ### Template Tags
 
 The following tags are currently usable in templates: 
 
-- *`{{ sites }}`* provides access to information about the sites in the webring.  
 - *`{{ number_of_sites }}`* shows the current size of the webring.
 - *`{{ current_time }}`* displays the time of generating, showing when the page was last updated. 
 - *`{{ opml }}`* inserts the relative path of the ring's OPML file.
@@ -134,8 +131,23 @@ The following tags are currently usable in templates:
 - *`{{ featured_site_name }}`* prints the name of the "featured site", which is random. 
 - *`{{ featured_site_description }}`* prints the description of the random featured site. 
 - *`{{ featured_site_url }}`* prints the URL of the random featured site. 
+- *`{{ sites }}`* provides access to information about the sites in the webring for creating a listing of all the sites.
+
+### Ring List
+
+It's a good idea for a webring to have a central hub page listing all of the sites. You can put this on `index.html`, or create a dedicated page such as `list.html`, `table.html`, etc. This can be done by looping over the `{{ sites }}` tag and pulling out the individual properties from website.json/toml file. Here's a very basic exmaple to create an `article` :
+```html
+<div>
+	{% for site in sites %}
+		<article>
+			{{ site.website.slug }} at <a href="{{ site.website.url }}" target="_blank">{{ site.website.url }}</a>
+		</article>
+	{% endfor %}
+</div>
+```
+Refer to `data/templates/index.html` for the default layout for a fuller example.
 
-Right now, `{{ url }}` is a unique tag that only works in `redirect.html` for the next/previous links.
+The approach above provides a lot of layout flexibility. There are a couple of old approaches that can be used to generate an entire table or a CSS grid compatible layout easily by simply using the tag `{{ table_of_sites | safe }}` or `{{ grid_of_sites | safe }}` in the template, and `ringfairy` will generate a formatted list of the sites in the webring. Refer to `data/templates/table.html` and `data/templates/grid.html` for these old layouts.
 
 ----------------------------
 

diff --git a/data/templates/table.html b/data/templates/table.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <link rel="stylesheet" href="./styles.css">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ ring_name }} List</title>
+  </head>
+  <body>
+    <h1>{{ ring_name }} List</h1>
+	<p>{{ ring_description }}</p>
+    <p>Add all sites with declared RSS feeds to your feed reader with this <a href ="{{ opml }}">OPML</a> link.</p>
+
+		{{ table_of_sites | safe }}
+
+		<br>
+	<footer>
+	  <p>Last updated: {{ current_time }} </p>
+	  <p>Powered by <a href="https://github.com/k3rs3d/ringfairy">ringfairy</a>!</p>
+	</footer>
+  </body>
+</html>
diff --git a/src/gen/html.rs b/src/gen/html.rs
@@ -277,22 +277,18 @@ pub async fn build_sites_grid_html(websites: &[WebringSite]) -> String {
     for (_index, website) in websites.iter().enumerate() {
         grid_html.push_str("<article class=\"card\">\n");
         grid_html.push_str(&format!(
-            "<div class=\"card-name\">{} <span class=\"card-slug\">({})</span></div>\n",
-            website
-                .website
-                .owner
-                .as_deref()
-                .map(format_owner)
-                .unwrap_or(String::new()),
-            website.website.slug
-        ));
+						"<a href=\"{}\" target=\"_blank\"><div class=\"card-name\">{} <span class=\"card-slug\">({})</span></div></a>\n",
+						website.website.url,
+						website.website.name.as_deref().map(format_owner).unwrap_or(String::new()),
+						website.website.slug));
         grid_html.push_str("<div class=\"card-content\">\n");
         grid_html.push_str(&format!(
-            "<div class=\"card-link\"><a href=\"{}\" target=\"_blank\">{}</a>&nbsp;{}</div>\n",
+            "<div class=\"card-link\">{} <a href=\"{}\" target=\"_blank\">{}</a>&nbsp;{}</div>\n",
+            website.website.owner.as_deref().unwrap_or(""),
             website.website.url,
             website.website.url,
             if let Some(rss_url) = &website.website.rss {
-                format!(" <a href=\"{}\" target=\"_blank\">[rss]</a>", rss_url)
+                format!("<a href=\"{}\" target=\"_blank\"> [rss]</a>", rss_url)
             } else {
                 String::new()
             }