refactor

Author: hanson-hschang

.github/copilot-instructions.md

@@ -1,6 +1,7 @@
 # Persona Zola Theme
 
-Persona is a modern, responsive portfolio and blog theme for the Zola static site generator. It features Bootstrap components, AOS animations, and a clean design suitable for personal websites, portfolios, resumes, and blogs.
+Persona is a modern, responsive portfolio and blog theme for the Zola static site generator. 
+It features Bootstrap components, AOS animations, and a clean design suitable for personal websites, portfolios, resumes, and blogs.
 
 Always reference these instructions first and fallback to search or bash commands only when you encounter unexpected information that does not match the info here.
 
@@ -9,7 +10,7 @@ Always reference these instructions first and fallback to search or bash command
 ### Prerequisites and Setup
 - Install Zola static site generator (minimum version 0.20.0):
   ```bash
-  wget https://github.com/getzola/zola/releases/download/v0.19.2/zola-v0.19.2-x86_64-unknown-linux-gnu.tar.gz -O /tmp/zola.tar.gz
+  wget https://github.com/getzola/zola/releases/download/v0.20.0/zola-v0.20.0-x86_64-unknown-linux-gnu.tar.gz -O /tmp/zola.tar.gz
   tar -xzf /tmp/zola.tar.gz -C /tmp
   sudo mv /tmp/zola /usr/local/bin/
   ```
@@ -21,33 +22,6 @@ Always reference these instructions first and fallback to search or bash command
 - Serve development version: `zola serve --interface 0.0.0.0 --port 8000` -- starts immediately
 - Clean build: Remove `public/` directory before building if needed
 
-### Content Structure Requirements
-This is a **theme repository**, not a complete site. To test functionality:
-
-1. Create `content/` directory in repository root
-2. Create `content/_index.md` with basic frontmatter:
-   ```markdown
-   +++
-   +++
-   
-   # Welcome to Persona Theme
-   ```
-
-3. For additional sections, create structured content like:
-   ```markdown
-   +++
-   title = "About"
-   template = "plain.html"
-   
-   [extra]
-   order = 1
-   icon_class = "bi bi-person"
-   template = "plain.html"
-   +++
-   
-   Content goes here.
-   ```
-
 ### Validation and Testing
 - **CRITICAL**: Always test theme functionality after making changes by:
   1. Creating test content structure as described above
@@ -62,7 +36,7 @@ This is a **theme repository**, not a complete site. To test functionality:
 **Key template requirements that must be satisfied:**
 - Sections displayed in navigation need `extra.icon_class` (Bootstrap Icons)
 - Sections need `extra.order` for display ordering
-- Sections need `extra.template` matching template type (`"plain.html"` or `"category.html"`)
+- Sections need `extra.type` matching template type (`"plain"`, `"category"`, or `"blog"`)
 - Blog posts need `extra.excerpt` for post listing pages
 - Sections with cards need `extra.thumbnail` for image display
 
@@ -86,7 +60,12 @@ This is a **theme repository**, not a complete site. To test functionality:
 │   └── vendor/                     # Third-party libraries
 └── templates/                      # Zola templates
     ├── base.html                   # Base template
-    ├── index.html                  # Home page template
+    ├── index.html                  # Home template
+    ├── 404.html                    # 404 error page
+    ├── section.html                # Section template
+    ├── page.html                   # Page template
+    ├── categories/                 # Category template
+    ├── shortcodes/                 # Shortcode macros
     ├── macros/                     # Template macros
     └── partials/                   # Template partials
 ```
@@ -98,13 +77,13 @@ This is a **theme repository**, not a complete site. To test functionality:
 
 ### Troubleshooting
 **Common template errors:**
-- `Variable 'subsection.extra.icon_class' not found`: Add `icon_class` to section frontmatter
-- `Variable 'page.extra.excerpt' not found`: Add `excerpt` to page frontmatter  
-- `Variable 'pos.extra.template' not found`: Add `template` to section extra metadata
+- `Variable 'subsection.extra.icon_class' not found`: Add `icon_class` to section front matter
+- `Variable 'page.extra.excerpt' not found`: Add `excerpt` to page front matter  
+- `Variable 'pos.extra.type' not found`: Add `type` to section extra metadata
 
 **Build issues:**
 - Empty builds (0 pages): Create `content/_index.md` file
-- Template rendering errors: Check section frontmatter has required fields
+- Template rendering errors: Check section front matter has required fields
 - Missing assets: Verify `static/` directory structure is intact
 
 **Development server issues:**
@@ -123,7 +102,7 @@ After making template or style changes, always validate by:
    ```
 
 2. **Full theme test with sections:**
-   - Create multiple content sections with proper frontmatter
+   - Create multiple content sections with proper front matter
    - Test navigation between sections
    - Verify responsive design
    - Check contact form display (if configured)

.gitignore

@@ -3,9 +3,3 @@
 
 # Zola build directory
 public/
-
-# Test content (for theme testing only)
-content/
-
-# processed images
-static/processed_images/

config.toml

@@ -13,8 +13,8 @@ compile_sass = true
 build_search_index = true
 
 taxonomies = [
-  { name = "tags" },
-  { name = "categories" },
+  { name = "tags", feed = true },
+  { name = "categories", feed = true },
 ]
 
 [markdown]
@@ -35,8 +35,6 @@ external_links_no_referrer = true
 [extra]
 
 [extra.persona]
-title = "Persona"
-subtitles = "a Portfolio, a Resume, a Blog, a Zola Theme"
 quote = "There's the private persona and the public persona, and the two shall never meet. --- Liev Schreiber"
 social_links = [
   { name = "GitHub", url = "https://github.com/hanson-hschang/persona-zola-theme", icon_class = "bi bi-github" },

content/_index.md

@@ -0,0 +1,6 @@
++++
+title = "Persona"
+template = "index.html"
+[extra]
+subtitles = "a Portfolio, a Resume, a Blog, a Zola Theme"
++++

templates/404.html

@@ -1,6 +1,5 @@
 {% extends "base.html" %}
-{% import "macros/title.html" as title_macro %}
-{% import "macros/content.html" as content_macro %}
+{% import "macros/render.html" as render_macro %}
 
 {% block head %}
   {{ super() }}
@@ -15,12 +14,10 @@
 
   <section class="plain section">
 
-    {{ 
-      title_macro::render(
-        title="Error 404 - Page Not Found", 
-        subtitle="The page you are looking for was not found or no longer exists."
-      ) 
-    }}
+    {{ render_macro::section_title(
+      title="Error 404 - Page Not Found", 
+      subtitle="The page you are looking for was not found or no longer exists."
+    ) }}
 
   </section>
 

templates/base.html

@@ -1,8 +1,5 @@
-{% import "macros/head.html" as head_macro %}
-{% import "macros/icon-link.html" as icon_link_macro %}
 {% import "macros/debug.html" as debug_macro %}
 
-
 <!DOCTYPE html>
 <html lang="en">
 
@@ -12,7 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" >
 
     <!-- Meta Info -->
-    {{ head_macro::title() }}
+    {% include "partials/head-title.html" %}
     <meta name="description" content="{{ config.description }}" >
     <meta name="author" content="{{ config.author }}" >
 
@@ -32,7 +29,6 @@
     <link rel="stylesheet" href="{{ get_url(path='vendor/swiper/swiper-bundle.min.css') }}">
     <link rel="stylesheet" href="{{ get_url(path='vendor/academicons/css/academicons.min.css') }}"/>
 
-    <!-- Debug CSS -->
     {% if page.extra.tex %}
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
     {% endif %}

templates/blog.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-{% import "macros/title.html" as title_macro %}
 {% import "macros/section.html" as section_macro %}
 
 
@@ -25,7 +24,7 @@
       {% set_global poss = poss | concat(with=[subsection]) %}
     {% endif %}
   {% endfor %}
-  {{ section_macro::render(poss=poss) }}
+  {{ section_macro::populate(poss=poss) }}
 
   {% include "partials/contact.html" %}
 

templates/category.html

@@ -1,28 +1,21 @@
-{% import "macros/breadcrumbs.html" as breadcrumbs_macro %}
-{% import "macros/title.html" as title_macro %}
-{% import "macros/icon-link.html" as icon_link_macro %}
-
-{#
-  Page Macros
-  These macros are used to render different types of pages on the website.
-#}
+{% import "macros/render.html" as render_macro %}
 
 {% macro post_thumbnail(thumbnail) %}
   <div class="post-img">
     <img src="{{ page.extra.thumbnail }}" alt="" class="img-fluid">
   </div>
-{% endmacro post_thumbnail %}
+{% endmacro %}
 
 {% macro post_share(link) %}
 
   <div id="share" class="share-container">
     <button id="share-button" class="share-button" aria-label="Share post">
       <i class="bi bi-box-arrow-up" aria-hidden="true"></i>
     </button>
-    {{ icon_link_macro::share()}}
+    {{ render_macro::share_menu(title=page.title, permalink=page.permalink) }}
   </div>
 
-{% endmacro post_share %}
+{% endmacro %}
 
 
 {% macro post_tag(tags) %}
@@ -33,7 +26,7 @@
       {% endfor %}
     {% endif %}
   </div>
-{% endmacro post_tag %}
+{% endmacro %}
 
 
 {% macro post_header(page) %}
@@ -69,12 +62,12 @@ <h2 class="post-title">{{ page.title }}</h2>
     <div class="meta-top-divider"></div>
   </div>
 
-{% endmacro post_header %}
+{% endmacro %}
 
 
 {% macro post_content(content) %}
   <div class="post-content">{{ content | safe }}</div>
-{% endmacro post_content %}
+{% endmacro %}
 
 
 {% macro side_bar(page) %}
@@ -97,12 +90,12 @@ <h4><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h4>
     </div>
   </aside>
 
-{% endmacro side_bar %}
+{% endmacro %}
 
 
 {% macro post(page) %}
 
-  {{ breadcrumbs_macro::render(crumbs=page.components) }}
+  {{ render_macro::breadcrumbs(crumbs=page.components) }}
   <div class="container">
     <div class="row">
       <section id="blog-post" class="blog-post section col-lg-8">
@@ -120,4 +113,4 @@ <h4><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h4>
     </div>
   </div>
 
-{% endmacro blog_post%}
+{% endmacro %}