add indexes for format types and links

ddlh/repositories.py

@@ -1,4 +1,4 @@
-from collections import Counter, OrderedDict, defaultdict
+from collections import OrderedDict, defaultdict
 from typing import Optional, cast
 
 import more_itertools as mit
@@ -20,7 +20,7 @@ def __init__(self, airtable: AirtableDB):
         self.themes: OrderedDict[str, Theme] = OrderedDict()
         self.tags: dict[str, list[str]] = defaultdict(list)
         self.authors: set[str] = set()
-        self.format_types_count: Counter[str] = Counter()
+        self.by_format_type: dict[str, list[str]] = defaultdict(list)
 
         for row in self.airtable.all("featured_documents"):
             self._ingest_featured_document(row)
@@ -57,7 +57,7 @@ def _ingest_document(self, row: RecordDict) -> None:
             if format is not None:
                 document["format"] = format["name"]
                 document["format_type"] = format["type"]
-                self.format_types_count[format["type"]] += 1
+                self.by_format_type[format["type"]].append(document["link"])
 
         if "author" in document:
             self.authors.add(document["author"])
@@ -94,6 +94,14 @@ def get_documents_for_theme(self, theme_name: str) -> list[Document]:
                 return [self.documents[url_to_id(link)] for link in theme.documents]
         return []
 
+    def get_documents_for_format_type(self, format_type: str) -> list[Document]:
+        if format_type in self.by_format_type:
+            return [
+                self.documents[url_to_id(link)]
+                for link in self.by_format_type[format_type]
+            ]
+        return []
+
     def get_tags_for_theme(self, theme_name: str) -> list[str]:
         for theme in self.themes.values():
             if theme_name == theme.name:
@@ -124,9 +132,9 @@ def get_stats(self) -> Stats:
         return Stats(
             total_documents=len(self.documents),
             total_themes=len(self.themes),
-            total_text_format=self.format_types_count["text"],
-            total_audiovisual_format=self.format_types_count["audiovisual"],
-            total_tool_format=self.format_types_count["tool"],
-            total_course_format=self.format_types_count["course"],
+            total_text_format=len(self.by_format_type["text"]),
+            total_audiovisual_format=len(self.by_format_type["audiovisual"]),
+            total_tool_format=len(self.by_format_type["tool"]),
+            total_course_format=len(self.by_format_type["course"]),
             total_unique_authors=len(self.authors),
         )

ddlh/routes.py

@@ -73,6 +73,34 @@ def tag(tag: str) -> str:
     )
 
 
+@app.route("/formats/<format>", methods=["GET"])
+def format(format: str) -> str:
+    FORMAT_NAMES = {
+        "text": "Publications, papers & reports",
+        "tool": "Toolkits, methods & frameworks",
+        "audiovisual": "Masterclasses, documentaries & podcasts",
+        "course": "Interactive learning resources",
+    }
+
+    db = _get_documents_repository()
+
+    documents = db.get_documents_for_format_type(format)
+
+    format_name = FORMAT_NAMES[format]
+
+    breadcrumbs = utils.get_breadcrumbs(
+        {"title": "Formats"},
+        {"title": format_name, "url": url_for("format", format=format)},
+    )
+    return render_template(
+        "pages/format.j2",
+        breadcrumbs=breadcrumbs,
+        format=format,
+        format_name=format_name,
+        documents=documents,
+    )
+
+
 @app.route("/documents/<document_id>", methods=["GET"])
 def document(document_id: str) -> str:
     db = _get_documents_repository()

ddlh/static/styles.css

@@ -439,32 +439,58 @@ p {
       padding: 0 calc(0.5 * var(--spacer-unit));
       border-radius: 0.5rem;
       display: inline-block;
+      margin-bottom: calc(0.25 * var(--spacer-unit));
     }
 
     & .search-hint {
       padding: 0 calc(0.5 * var(--spacer-unit));
       border-radius: 0.5rem;
       border: 1px solid var(--main-fg-color);
       display: inline-block;
+      margin-bottom: calc(0.25 * var(--spacer-unit));
     }
 
     & .stat {
       font-weight: 400;
 
+      & a {
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
       &.text {
         color: var(--type-text-highlight-color);
+
+        & a {
+          color: var(--type-text-highlight-color);
+        }
       }
 
       &.audiovisual {
         color: var(--type-audiovisual-highlight-color);
+
+        & a {
+          color: var(--type-audiovisual-highlight-color);
+        }
       }
 
       &.course {
         color: var(--type-course-highlight-color);
+
+        & a {
+          color: var(--type-course-highlight-color);
+        }
       }
 
       &.tool {
         color: var(--type-tool-highlight-color);
+
+        & a {
+          color: var(--type-tool-highlight-color);
+        }
       }
     }
   }
@@ -687,6 +713,15 @@ p {
       padding: calc(1 * var(--spacer-unit));
       margin-bottom: calc(1 * var(--spacer-unit));
       line-height: 1rem;
+
+      & a {
+        color: var(--main-bg-color);
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
     }
 
     & .title {
@@ -919,24 +954,40 @@ p {
     background-color: var(--type-text-highlight-color);
     color: var(--strong-bg-color);
     border-color: var(--strong-bg-color);
+
+    & a {
+      color: var(--strong-bg-color);
+    }
   }
 
   &.colored.audiovisual {
     background-color: var(--type-audiovisual-highlight-color);
     color: var(--strong-bg-color);
     border-color: var(--strong-bg-color);
+
+    & a {
+      color: var(--strong-bg-color);
+    }
   }
 
   &.colored.course {
     background-color: var(--type-course-highlight-color);
     color: var(--strong-bg-color);
     border-color: var(--strong-bg-color);
+
+    & a {
+      color: var(--strong-bg-color);
+    }
   }
 
   &.colored.tool {
     background-color: var(--type-tool-highlight-color);
     color: var(--strong-bg-color);
     border-color: var(--strong-bg-color);
+
+    & a {
+      color: var(--strong-bg-color);
+    }
   }
 }
 
@@ -1128,6 +1179,10 @@ p {
       text-decoration: none;
     }
 
+    &:has(.format-link:hover) .title-link {
+      text-decoration: none;
+    }
+
     & .theme-link {
       position: relative;
       z-index: 100;
@@ -1174,6 +1229,12 @@ p {
       margin-left: -1px;
       margin-top: -2px;
       color: var(--strong-bg-color) !important;
+
+      a {
+        position: relative;
+        color: var(--strong-bg-color) !important;
+        z-index: 100;
+      }
     }
   }
 }

ddlh/templates/pages/format.j2

@@ -0,0 +1,7 @@
+{% extends "layouts/main.j2" %}
+{% block main %}
+    {% include "partials/format_header.j2" %}
+    {% with with_theme=true %}
+        {% include "partials/table.j2" %}
+    {% endwith %}
+{% endblock main %}

ddlh/templates/partials/carousel_item.j2

@@ -1,7 +1,7 @@
 <div class="carousel-item {{ document.format_type }}">
     <div class="details">
         <div class="blurb">
-            <span class="format colored {{ document|document_css_classes }}">{{ document.format }}</span>
+            <span class="format colored {{ document|document_css_classes }}"><a href="{{ url_for("format", format=document.format_type) }}">{{ document.format }}</a></span>
             <h3 class="title">
                 <a href="{{ url_for("document", document_id=document.link|url_to_id) }}">{{ document.title }}</a>
             </h3>

ddlh/templates/partials/document_header.j2

@@ -1,5 +1,5 @@
 <div class="theme-tag-document-header container">
-    <span class="format colored {{ document|document_css_classes }}">{{ document.format }}</span>
+    <span class="format colored {{ document|document_css_classes }}"><a href="{{ url_for("format", format=document.format_type) }}">{{ document.format }}</a></span>
     <h2 class="theme-tag-document-subhead">
         {% with theme=document.themes|get_first %}
             {% if theme %}<a href="{{ url_for("theme", theme_name=theme) }}">{{ theme }}</a>:{% endif %}

ddlh/templates/partials/format_header.j2

@@ -0,0 +1,4 @@
+<div class="theme-tag-document-header container">
+    <h2 class="theme-tag-document-subhead">Resources in collection:</h2>
+    <h1 class="{{ format }}">{{ format_name }}</h1>
+</div>

ddlh/templates/partials/index_hero.j2

@@ -7,10 +7,10 @@
             that explain
             <span class="stat"><span class="n">{{ stats.total_themes }}</span>&nbsp;thematic areas of design</span>
             that aim to support your design practice. The {{ stats.total_documents }} resources contain
-            <span class="stat text"><span class="n">{{ stats.total_text_format }}</span>&nbsp;publications, papers & reports</span>,
-            <span class="stat audiovisual"><span class="n">{{ stats.total_audiovisual_format }}</span>&nbsp;masterclasses, documentaries & podcasts</span>,
-            <span class="stat tool"><span class="n">{{ stats.total_tool_format }}</span>&nbsp;toolkits, methods & frameworks</span>, and
-            <span class="stat course"><span class="n">{{ stats.total_course_format }}</span>&nbsp;interactive learning resources</span>
+            <span class="stat text"><a href="{{ url_for("format", format="text") }}"><span class="n">{{ stats.total_text_format }}</span>&nbsp;publications, papers & reports</a></span>,
+            <span class="stat audiovisual"><a href="{{ url_for("format", format="audiovisual") }}"><span class="n">{{ stats.total_audiovisual_format }}</span>&nbsp;masterclasses, documentaries & podcasts</a></span>,
+            <span class="stat tool"><a href="{{ url_for("format", format="tool") }}"><span class="n">{{ stats.total_tool_format }}</span>&nbsp;toolkits, methods & frameworks</a></span>, and
+            <span class="stat course"><a href="{{ url_for("format", format="course") }}"><span class="n">{{ stats.total_course_format }}</span>&nbsp;interactive learning resources</a></span>
             from more than
             <span class="stat"><span class="n">{{ stats.total_unique_authors }}</span>&nbsp;different authors</span>.
         </p>

ddlh/templates/partials/table_document.j2

@@ -2,7 +2,10 @@
     <a class="card-link"
        href="{{ url_for("document", document_id=document.link|url_to_id) }}"><span class="sr-only">{{ document.title }}</span></a>
     <div class="title-container">
-        <div class="format colored {{ document |document_css_classes }}">{{ document.format }}</div>
+        <div class="format colored {{ document |document_css_classes }}">
+            <a class="format-link"
+               href="{{ url_for("format", format=document.format_type) }}">{{ document.format }}</a>
+        </div>
         <h3 class="title">
             <a class="title-link"
                href="{{ url_for("document", document_id=document.link|url_to_id) }}">{{ document.title }}</a>