Tag selector

jimsite/assets.py

@@ -4,6 +4,7 @@ import shutil
 from .common import run, SiteConfig
 
 
+# TODO: Add support for origin and branch.
 def pull_git_repo(repo: str, build_cache: str) -> None:
     '''Pulls/clones a repo into the build cache directory.'''
     if os.path.exists(f'{build_cache}/.git'):

jimsite/blog.py

@@ -7,6 +7,14 @@ from .articles import ArticleMetadata, Article, format_article_tags
 from .templating import format_html_template, TemplateSelections
 
 
+def build_tag_index(index: dict[str, Article]) -> dict[str, list[str]]:
+    tag_index = {}
+    for article in index.values():
+        for tag in article.metadata.tags:
+             tag_index[tag] = (tag_index.get(tag,[])) + [article]
+    return tag_index
+
+
 def build_blog_archive(
         site: SiteConfig, 
         index: dict[str, Article],
@@ -35,10 +43,41 @@ def build_blog_archive(
         )
     archive_html_list +='</ul>'
 
+    tag_index = build_tag_index(index)
+
+    tag_selector_options = []
+    tag_selector_css_rules = [f'''
+        body:has(input[name="tag-selector"][value="*"]:checked) li:has(.blog-tag){{{{
+            display: list-item!important;
+        }}}}
+    ''']
+    for tag, articles in ({'*': [*index.keys()]} | tag_index).items():
+        tag_selector_options.append(format_html_template(
+            template_selections['tag_selector_option'],
+            tag_name = tag,
+            number_with_tag = len(articles),
+            site = site,
+            **kwargs
+        ))
+        if tag == '*':
+            continue
+        tag_selector_css_rules.append(f'''
+            body:has(input[name="tag-selector"]:not([value="{tag}"]):checked) li:has(.blog-tag[data="{tag}"]){{{{
+                display: none;
+            }}}}
+            body:has(input[name="tag-selector"][value="{tag}"]:checked) li:has(.blog-tag[data="{tag}"]){{{{
+                display: list-item!important;
+            }}}}
+        ''')
+    
+
+
     # Generate the archive article.
     archive_html_article = format_html_template(
         template_selections['archive_article'], 
         content = archive_html_list,
+        tag_selector_options = ' '.join(tag_selector_options),
+        tag_selector_css_rules = f'<style>{"\n".join(tag_selector_css_rules)}</style>',
         site = site,
         **kwargs
     )
@@ -55,11 +94,7 @@ def build_blog_archive(
             f.write(archive_html_page)
 
 
-def build_tag_index(index: dict[str, Article]) -> dict[str, list[str]]:
+
-    tag_index = {}
-    for article, (metadata, content) in index.items():
-        for tag in metadata.tags:
-             tag_index[tag] = (tag_index.get(tag,[])) + [article]
     
 
 # TODO: create a tag inventory page, as well as individual browse-by-tag pages.

jimsite/templating.py

@@ -141,7 +141,9 @@ class TemplateSelections:
             article = 'templates.components.blog_article',
             page = 'templates.pages.default',
             archive_li = 'templates.components.blog_archive_li',
-            archive_article = 'templates.components.blog_archive'
+            archive_article = 'templates.components.blog_archive',
+            tag_selector = 'templates.components.blog_archive_tag_selector',
+            tag_selector_option = 'templates.components.blog_archive_tag_selector_option'
         ) | (config or {}).get('template_default_selections', {})
 
     def __getitem__(self, key: str) -> str:

site/assets/css/reset.css

@@ -31,9 +31,12 @@ footer, header, hgroup, menu, nav, section {
 body {
 	line-height: 1;
 }
-ol, ul {
+ul {
 	list-style: disc;
 }
+ol {
+	list-style-type: decimal;
+}
 blockquote, q {
 	quotes: none;
 }

site/assets/css/theme.css

@@ -146,27 +146,47 @@ summary.heading{
     -webkit-tap-highlight-color: transparent;
 }
 
-span.blog-tag{
+input[name="tag-selector"]{
-    font-weight: bold;
+    display: none;
-    border-radius: 3px 3px 3px 3px;
+}
-    background-color: var(--azure);
+
-    color: white;
+.blog-tag{
     font-size: 0.6em;
     padding: 0.1em;
     padding-left: 0.5em;
     padding-right: 0.5em;
-    vertical-align: middle;
 }
 
-span.blog-tag:hover{
+label:has(input[name="tag-selector"]){
-    background-color: var(--azure-tint-20);
+    font-size: 0.8em;
+    padding: 0.1em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    margin: 0.5em 0.25em;
+
 }
 
-a:has(> span.blog-tag){
+.blog-tag, label:has(input[name="tag-selector"]){
+    font-weight: bold;
+    border-radius: 3px 3px 3px 3px;
+    background-color: var(--azure);
+    color: white;
+    
     vertical-align: middle;
-    color: unset;
     text-decoration: unset;
     font-weight: unset;
+
+    cursor: pointer;
+}
+
+.blog-tag:hover, label:has(input[name="tag-selector"]):hover{
+    background-color: var(--azure-tint-20);
+    color: white;
+}
+
+label:has(input[name="tag-selector"]:checked){
+    background: var(--silver);
+    color: var(--charcoal);
 }
 
 article hr{
@@ -184,3 +204,4 @@ img.rss-icon{
 span img.rss-icon{
     float: right;
 }
+

site/templates/components/blog_archive.html

@@ -1,5 +1,9 @@
 <article>
     <h1 class="headline">{site.title} Archive</h1>
     <hr />
+    <h2>Tag Inventory</h2>
+    {templates.components.blog_archive_tag_selector}
+    <br />
+    <h2>Post History</h2>
     {content}
 </article>

site/templates/components/blog_archive_tag_selector.html

@@ -0,0 +1,4 @@
+<form id="tag-selector">
+    {tag_selector_options}
+</form>
+{tag_selector_css_rules}

site/templates/components/blog_archive_tag_selector_option.html

@@ -0,0 +1,3 @@
+<label for="tag-selector-{tag_name}">{tag_name} ({number_with_tag})
+    <input type="radio" name="tag-selector" value="{tag_name}" id="tag-selector-{tag_name}">
+</label>

site/templates/components/blog_tag.html

@@ -1 +1 @@
-<a href='{site.base_url}/tags/{tag_name}.html'><span class='blog-tag' data="{tag_name}">{tag_name}</span></a>
+<a class='blog-tag' data='{tag_name}'' href='{site.base_url}/tags/{tag_name}.html'>{tag_name}</a>