fix: add html folder

index.html

@@ -24,8 +24,8 @@ <h1>Tech Talks Digest</h1>
 <th>Year</th>
 </tr>
 </thead>
-<tbody><tr data-labels="cloud native, monitoring, observability, opentelemetry, prometheus, serverless"><td><a href="https://github.com/angelicagardner/tech-talks-digest/blob/main/talks/monitoring-serverless-workloads-opentelemetry-prometheus.md">Monitoring Serverless Workloads with OpenTelemetry and Prometheus</a></td><td>cloud native, monitoring, observability, opentelemetry, prometheus, serverless</td><td>2024</td></tr><tr data-labels="prometheus, observability"><td><a href="https://github.com/angelicagardner/tech-talks-digest/blob/main/talks/prometheus-deep-dive.md">Prometheus Deep Dive</a></td><td>prometheus, observability</td><td>2019</td></tr><tr data-labels="observability, prometheus, monitoring"><td><a href="https://github.com/angelicagardner/tech-talks-digest/blob/main/talks/architecting-growth-scaling-tactics-for-prometheus-metrics.md">Architecting Growth: Scaling Tactics for Prometheus Metrics</a></td><td>observability, prometheus, monitoring</td><td>2024</td></tr><tr data-labels="observability, opentelemetry, prometheus"><td><a href="https://github.com/angelicagardner/tech-talks-digest/blob/main/talks/prometheus-and-opentelemetry-better-together.md">Prometheus and OpenTelemetry: Better Together</a></td><td>observability, opentelemetry, prometheus</td><td>2024</td></tr><tr data-labels="teamwork, inclusive, distributed"><td><a href="https://github.com/angelicagardner/tech-talks-digest/blob/main/talks/how-to-build-an-inclusive-distributed-team.md">How to Build an Inclusive Distributed Team</a></td><td>teamwork, inclusive, distributed</td><td>2018</td></tr><tr data-labels="academia, machine learning"><td><a href="https://github.com/angelicagardner/tech-talks-digest/blob/main/talks/how-to-read-ai-research-papers-effectively.md">How To Read AI Research Papers Effectively</a></td><td>academia, machine learning</td><td>2024</td></tr><tr data-labels="clean code, linting"><td><a href="https://github.com/angelicagardner/tech-talks-digest/blob/main/talks/go-linters-myths-best-practices.md">Go Linters: Myths and Best Practices</a></td><td>clean code, linting</td><td>2019</td></tr><tr data-labels="observability, opentelemetry"><td><a href="https://github.com/angelicagardner/tech-talks-digest/blob/main/talks/what-is-this-opentelemetry-thing.md">What Is This OpenTelemetry Thing?</a></td><td>observability, opentelemetry</td><td>2024</td></tr><tr data-labels="domain-driven design, software architecture"><td><a href="https://github.com/angelicagardner/tech-talks-digest/blob/main/talks/domain-driven-design-overrated.md">Is Domain-Driven Design Overrated?</a></td><td>domain-driven design, software architecture</td><td>2021</td></tr><tr data-labels="gitops, kubernetes"><td><a href="https://github.com/angelicagardner/tech-talks-digest/blob/main/talks/ensuring-kubernetes-manifests-validity-compliance.md">Ensuring Kubernetes manifests validity &amp; compliance</a></td><td>gitops, kubernetes</td><td>2021</td></tr><tr data-labels="cloud native, iam, authorization"><td><a href="https://github.com/angelicagardner/tech-talks-digest/blob/main/talks/current-state-of-cloud-native-authorization.md">The current state of cloud-native authorization</a></td><td>cloud native, iam, authorization</td><td>2023</td></tr></tbody>
+<tbody><tr data-labels="cloud native, monitoring, observability, opentelemetry, prometheus, serverless"><td><a href="talks/html/monitoring-serverless-workloads-opentelemetry-prometheus.html">Monitoring Serverless Workloads with OpenTelemetry and Prometheus</a></td><td>cloud native, monitoring, observability, opentelemetry, prometheus, serverless</td><td>2024</td></tr><tr data-labels="prometheus, observability"><td><a href="talks/html/prometheus-deep-dive.html">Prometheus Deep Dive</a></td><td>prometheus, observability</td><td>2019</td></tr><tr data-labels="observability, prometheus, monitoring"><td><a href="talks/html/architecting-growth-scaling-tactics-for-prometheus-metrics.html">Architecting Growth: Scaling Tactics for Prometheus Metrics</a></td><td>observability, prometheus, monitoring</td><td>2024</td></tr><tr data-labels="observability, opentelemetry, prometheus"><td><a href="talks/html/prometheus-and-opentelemetry-better-together.html">Prometheus and OpenTelemetry: Better Together</a></td><td>observability, opentelemetry, prometheus</td><td>2024</td></tr><tr data-labels="teamwork, inclusive, distributed"><td><a href="talks/html/how-to-build-an-inclusive-distributed-team.html">How to Build an Inclusive Distributed Team</a></td><td>teamwork, inclusive, distributed</td><td>2018</td></tr><tr data-labels="academia, machine learning"><td><a href="talks/html/how-to-read-ai-research-papers-effectively.html">How To Read AI Research Papers Effectively</a></td><td>academia, machine learning</td><td>2024</td></tr><tr data-labels="clean code, linting"><td><a href="talks/html/go-linters-myths-best-practices.html">Go Linters: Myths and Best Practices</a></td><td>clean code, linting</td><td>2019</td></tr><tr data-labels="observability, opentelemetry"><td><a href="talks/html/what-is-this-opentelemetry-thing.html">What Is This OpenTelemetry Thing?</a></td><td>observability, opentelemetry</td><td>2024</td></tr><tr data-labels="domain-driven design, software architecture"><td><a href="talks/html/domain-driven-design-overrated.html">Is Domain-Driven Design Overrated?</a></td><td>domain-driven design, software architecture</td><td>2021</td></tr><tr data-labels="gitops, kubernetes"><td><a href="talks/html/ensuring-kubernetes-manifests-validity-compliance.html">Ensuring Kubernetes manifests validity &amp; compliance</a></td><td>gitops, kubernetes</td><td>2021</td></tr><tr data-labels="cloud native, iam, authorization"><td><a href="talks/html/current-state-of-cloud-native-authorization.html">The current state of cloud-native authorization</a></td><td>cloud native, iam, authorization</td><td>2023</td></tr></tbody>
 </table>
 <script src="script.js"></script>
 </body>
-</html>
+</html>

main.py

@@ -1,18 +1,20 @@
 import frontmatter
+import markdown2
 import os
 from bs4 import BeautifulSoup
+from jinja2 import Environment, FileSystemLoader
 
-def generate_table_rows(talks_directory):
+def generate_table_rows(talks_dir):
     rows = []
-    for filename in os.listdir(talks_directory):
+    for filename in os.listdir(talks_dir):
         if filename.endswith(".md") and not filename.startswith("_"):
-            filepath = os.path.join(talks_directory, filename)
+            filepath = os.path.join(talks_dir, filename)
             with open(filepath, 'r') as f:
                 post = frontmatter.load(f)
                 title = post.metadata.get('title', 'No Title')
                 year = post.metadata.get('year', '')
                 labels = post.metadata.get('labels', '')
-                row_html = f'<tr data-labels="{labels}"><td><a href="https://github.com/angelicagardner/tech-talks-digest/blob/main/talks/{filename}">{title}</a></td><td>{labels}</td><td>{year}</td></tr>'
+                row_html = f'<tr data-labels="{labels}"><td><a href="talks/html/{filename.replace(".md", ".html")}">{title}</a></td><td>{labels}</td><td>{year}</td></tr>'
                 rows.append(row_html)
     return rows
 
@@ -27,8 +29,43 @@ def update_html_with_table_rows(html_file_path, rows):
     with open(html_file_path, 'w', encoding='utf-8') as file:
         file.write(str(soup))
 
+def generate_talk_pages(talks_dir, template_path, output_dir):
+    env = Environment(loader=FileSystemLoader('.'))
+    template = env.get_template(template_path)
+
+    for filename in os.listdir(talks_dir):
+        if filename.endswith(".md") and not filename.startswith("_"):
+            filepath = os.path.join(talks_dir, filename)
+            with open(filepath, 'r') as f:
+                post = frontmatter.load(f)
+                title = post.metadata.get('title', 'No Title')
+                year = post.metadata.get('year', '')
+                labels = post.metadata.get('labels', '').split(', ')
+                summary = post.content.split('\n')[0]
+                markdown_content = post.content
+                html_content = markdown2.markdown(markdown_content)
+
+                rendered_html = template.render(
+                    title=title,
+                    year=year,
+                    labels=labels,
+                    summary=summary,
+                    content=html_content,
+                )
+
+                output_filename = filename.replace('.md', '.html')
+                output_path = os.path.join(output_dir, output_filename)
+                os.makedirs(output_dir, exist_ok=True)
+                with open(output_path, 'w', encoding='utf-8') as out_file:
+                    out_file.write(rendered_html)
+
 if __name__ == "__main__":
-    talks_directory = './talks'
+    talks_dir = './talks'
     html_file_path = 'index.html'
-    rows = generate_table_rows(talks_directory)
+    template_path = 'template.html'
+    talks_output_dir = talks_dir + '/html'
+
+    rows = generate_table_rows(talks_dir)
     update_html_with_table_rows(html_file_path, rows)
+
+    generate_talk_pages(talks_dir, template_path, talks_output_dir)

requirements.txt

@@ -1,2 +1,4 @@
 beautifulsoup4
 python-frontmatter
+markdown2
+jinja2

script.js

@@ -34,7 +34,7 @@ document.addEventListener('DOMContentLoaded', function () {
         tableRowsArray.sort((rowA, rowB) => {
             const yearA = parseInt(rowA.querySelector('td:nth-child(3)').textContent);
             const yearB = parseInt(rowB.querySelector('td:nth-child(3)').textContent);
-            return yearA - yearB;
+            return yearB - yearA;
         });
         // Remove existing rows
         while (tbody.firstChild) {

template.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="{{ summary }}" />
+    <link href="styles.css" rel="stylesheet" />
+</head>
+
+<body>
+    <header>
+        <h1><a href="index.html">Tech Talks Digest</a></h1>
+    </header>
+    <main>
+        <article>
+            <h2>{{ title }}</h2>
+            <p><strong>Year:</strong> {{ year }}</p>
+            <p><strong>Labels:</strong>
+                {% for label in labels %}
+                <span class="label">{{ label }}</span>{% if not loop.last %}, {% endif %}
+                {% endfor %}
+            </p>
+            <div class="content">
+                {{ content | safe }}
+            </div>
+        </article>
+    </main>
+</body>
+
+</html>