Start building a blog page

src/jakecharman/templates/blog.html

@@ -0,0 +1,57 @@
+{% extends 'main.html' %}
+
+{% block content %}
+<main id="blog-main">
+    <nav id="filter">
+        <label for="filter_category">Filter:</label>
+        <select id="filter_category" name="filter_category" onchange="update_filter()">
+            <option value="all">All Categories</option>
+            {% for category in all_categories %}
+            <option {{ 'selected' if current_category==category }} value="{{ category }}">
+                {{all_categories.get(category).get('title')}}</option>
+            {% endfor %}
+        </select>
+    </nav>
+    <h2>{{ title }}</h2>
+    <p>{{ description }}</p>
+    <p style="text-align: center; font-weight: bold; font-style: italic;">This page is relatively new. I'm adding projects as fast as I can but feel free to <a href="/contact">contact me</a> if you want to know about something in particular.</p>
+    <section id="blog">
+        {% for row in articles %}
+        <div class="blog-post">
+            {% if row.get('link') is not none %}
+                <a href="{{ row.link }}">
+            {% else %}
+                <a href="/blog/{{ row.id }}">
+            {% endif %}
+                <img class="blogpost-thumb" 
+                alt="{{ row.alt }}"
+                srcset="
+                    {% for i in range(200, 5100, 100) %}
+                        /image/{{ row.image }}?w={{i}} {{i}}w{{"," if not loop.last}}
+                    {% endfor %}
+                    "
+                    sizes="
+                        (max-width: 999px) 80vw,
+                        (min-width: 1000px) 20vw
+                    "
+                src="/image/{{ row.image }}">
+            </a>
+            <div class="blogpost-text">
+                {% if row.get('link') is not none %}
+                    <a href="{{ row.link }}">
+                {% else %}
+                    <a href="/blog/{{ row.id }}">
+                {% endif %}
+                    <h3>{{ row.title }}</h3>
+                </a>
+                <p class="blogpost-description">{{ row.description }}</p>
+                <p class="blogpost-date">{{ row.date | human_date }}</p>
+                {% for category in row.categories %}
+                <a class="blogpost-category" href="/projects/category/{{ category }}"> {{ all_categories.get(category, {}).get('title', '') }}{{ ", " if not loop.last }}</loop></a>
+                {% endfor %}
+            </div>
+        </div>
+        {% endfor %}
+    </section>
+</main>
+{% endblock %}