Update .gitignore and enhance project structure

- Add 'privacy.txt' to .gitignore to prevent checking it in
- Refactor data storage from arrays to dictionaries for better data handling in 'main.py'
- Include 'pathlib' import for handling filesystem paths
- Introduce new CSS and Bootstrap files providing updated styles and responsive design elements
- Modify HTML templates to use updated data structures and enhance accessibility

These changes improve code readability, maintain project consistency, and enhance the front-end presentation. This work is part of ongoing efforts to better manage project data, secure sensitive information, and provide a more robust user interface.

.gitignore

@@ -2,3 +2,4 @@ venv/
 *.pyc
 __pycache__/
 .vscode
+privacy.txt

main.py

@@ -24,6 +24,7 @@ import os
 import json
 import re
 import logging
+import pathlib
 
 logging.basicConfig(level=logging.DEBUG)
 
@@ -126,17 +127,17 @@ def update_data():
             favorites = ible["document"]["favorites"]
 
             global_ibles["/projects"].append(
-                [
+                {
-                    link,
+                    "link": link,
-                    img,
+                    "img": img,
-                    title,
+                    "title": title,
-                    author,
+                    "author": author,
-                    author_link,
+                    "author_link": author_link,
-                    channel,
+                    "channel": channel,
-                    channel_link,
+                    "channel_link": channel_link,
-                    views,
+                    "views": views,
-                    favorites,
+                    "favorites": favorites,
-                ]
+                }
             )
 
 
@@ -204,18 +205,18 @@ def explore_lists(soup):
         if ible.select("span.ible-favorites") != []:
             favorites = ible.select("span.ible-favorites")[0].text
         list_.append(
-            [
+            {
-                link,
+                "link": link,
-                img,
+                "img": img,
-                alt,
+                "alt": alt,
-                title,
+                "title": title,
-                author,
+                "author": author,
-                author_link,
+                "author_link": author_link,
-                channel,
+                "channel": channel,
-                channel_link,
+                "channel_link": channel_link,
-                favorites,
+                "favorites": favorites,
-                views,
+                "views": views,
-            ]
+            }
         )
     return list_
 
@@ -275,20 +276,22 @@ def member_header(header):
     else:
         bio = ""
 
-    return [
+    return {
-        avatar,
+        "avatar": avatar,
-        title,
+        "title": title,
-        location,
+        "location": location,
-        signup,
+        "signup": signup,
-        instructables,
+        "instructables": instructables,
-        views,
+        "views": views,
-        comments,
+        "comments": comments,
-        followers,
+        "followers": followers,
-        bio,
+        "bio": bio,
-    ]
+    }
 
 
 def category_page(path, name, teachers=False):
+    # TODO: Figure out why this doesn't work - probably using the search function would help...
+
     try:
         data = urlopen("https://www.instructables.com" + path)
     except HTTPError as e:
@@ -304,7 +307,7 @@ def category_page(path, name, teachers=False):
         )
         title = card.select("a img")[0].get("alt")
 
-        channels.append([link, title, img])
+        channels.append({"link": link, "title": title, "img": img})
 
     ibles = []
     for ible in soup.select(
@@ -329,17 +332,17 @@ def category_page(path, name, teachers=False):
             favorites = stats.select("span.ible-favorites")[0].text
 
         ibles.append(
-            [
+            {
-                link,
+                "link": link,
-                img,
+                "img": img,
-                title,
+                "title": title,
-                author,
+                "author": author,
-                author_link,
+                "author_link": author_link,
-                channel,
+                "channel": channel,
-                channel_link,
+                "channel_link": channel_link,
-                views,
+                "views": views,
-                favorites,
+                "favorites": favorites,
-            ]
+            }
         )
 
     contests = []
@@ -350,10 +353,15 @@ def category_page(path, name, teachers=False):
         img = proxy(contest.select("a noscript img")[0].get("src"))
         title = contest.select("a img")[0].get("alt")
 
-        contests.append([link, img, title])
+        contests.append({"link": link, "img": img, "title": title})
 
     return render_template(
-        "category.html", data=[name, channels, ibles, contests, path]
+        "category.html",
+        name=name,
+        channels=channels,
+        ibles=ibles,
+        contests=contests,
+        path=path,
     )
 
 
@@ -393,23 +401,24 @@ def project_list(path, head, sort=""):
             favorites = ible["document"]["favorites"]
 
             ibles.append(
-                [
+                {
-                    link,
+                    "link": link,
-                    img,
+                    "img": img,
-                    title,
+                    "title": title,
-                    author,
+                    "author": author,
-                    author_link,
+                    "author_link": author_link,
-                    channel,
+                    "channel": channel,
-                    channel_link,
+                    "channel_link": channel_link,
-                    views,
+                    "views": views,
-                    favorites,
+                    "favorites": favorites,
-                ]
+                }
             )
 
             if len(ibles) >= 8:
                 break
 
-    return render_template("projects.html", data=[head, ibles, path])
+    print(ibles)
+    return render_template("projects.html", title=head, ibles=ibles, path=path)
 
 
 @app.route("/sitemap/")
@@ -447,7 +456,7 @@ def route_sitemap(path=""):
             channels.append([channel, channel_link])
         groups.append(["", "", channels])
 
-    return render_template("sitemap.html", data=groups)
+    return render_template("sitemap.html", title="Sitemap", groups=groups)
 
 
 @app.route("/contest/archive/")
@@ -488,7 +497,12 @@ def route_contest_archive():
     pagination = main.select("nav.pagination ul.pagination")[0]
 
     return render_template(
-        "archives.html", data=[page, contest_count, pagination, contest_list]
+        "archives.html",
+        title=f"Contest Archives (Page {page})",
+        page=page,
+        contest_count=contest_count,
+        pagination=pagination,
+        contest_list=contest_list,
     )
 
 
@@ -530,20 +544,26 @@ def route_contest(contest):
         views = entry.select(".ible-views")[0].text
 
         entry_list.append(
-            [
+            {
-                link,
+                "link": link,
-                entry_img,
+                "entry_img": entry_img,
-                entry_title,
+                "entry_title": entry_title,
-                author,
+                "author": author,
-                author_link,
+                "author_link": author_link,
-                channel,
+                "channel": channel,
-                channel_link,
+                "channel_link": channel_link,
-                views,
+                "views": views,
-            ]
+            }
         )
 
     return render_template(
-        "contest.html", data=[title, img, entry_count, prizes, info, entry_list]
+        "contest.html",
+        title=title,
+        img=img,
+        entry_count=entry_count,
+        prizes=prizes,
+        info=info,
+        entry_list=entry_list,
     )
 
 
@@ -567,7 +587,16 @@ def route_contests():
         prizes = contest.select("span.contest-meta-count")[0].text
         entries = contest.select("span.contest-meta-count")[1].text
 
-        contests.append([link, img, alt, deadline, prizes, entries])
+        contests.append(
+            {
+                "link": link,
+                "img": img,
+                "alt": alt,
+                "deadline": deadline,
+                "prizes": prizes,
+                "entries": entries,
+            }
+        )
 
     closed = []
     for display in soup.select("div.contest-winner-display"):
@@ -583,11 +612,25 @@ def route_contests():
             item_author_link = featured_item.select("a.author")[0].get("href")
 
             featured_items.append(
-                [item_link, item_img, item_title, item_author, item_author_link]
+                {
+                    "link": item_link,
+                    "img": item_img,
+                    "title": item_title,
+                    "author": item_author,
+                    "author_link": item_author_link,
+                }
             )
-        closed.append([link, img, alt, featured_items])
+        closed.append(
+            {"link": link, "img": img, "alt": alt, "featured_items": featured_items}
+        )
 
-    return render_template("contests.html", data=[contest_count, contests, closed])
+    return render_template(
+        "contests.html",
+        title="Contests",
+        contest_count=contest_count,
+        contests=contests,
+        closed=closed,
+    )
 
 
 @app.route("/<category>/<channel>/projects/")
@@ -623,6 +666,7 @@ def route_projects():
 
 @app.route("/search")
 def route_search():
+    # TODO: Fix this (using search function)
     return project_list("/search/?q=" + request.args["q"] + "&projects=all", "Search")
 
 
@@ -700,10 +744,21 @@ def route_member_instructables(member):
         if stats.select("span.ible-favorites") != []:
             favorites = stats.select("span.ible-favorites")[0].text
 
-        ible_list.append([link, img, title, views, favorites])
+        ible_list.append(
+            {
+                "link": link,
+                "img": img,
+                "title": title,
+                "views": views,
+                "favorites": favorites,
+            }
+        )
 
     return render_template(
-        "member-instructables.html", data=header_content + [ible_list]
+        "member-instructables.html",
+        title=f"{header_content['title']}'s Instructables",
+        header_content=header_content,
+        ibles=ible_list,
     )
 
 
@@ -741,7 +796,7 @@ def route_member(member):
             ible_link = ible.select("div.image-wrapper")[0].a.get("href")
             ible_img = proxy(ible.select("div.image-wrapper a img")[0].get("src"))
 
-            ibles.append([ible_title, ible_link, ible_img])
+            ibles.append({"title": ible_title, "link": ible_link, "img": ible_img})
 
     ach_list = body.select(
         "div.two-col-section div.right-col-section.centered-sidebar div.boxed-content.about-me"
@@ -766,7 +821,12 @@ def route_member(member):
 
     return render_template(
         "member.html",
-        data=header_content + [ible_list_title, ibles, ach_list_title, achs],
+        title=header_content["title"] + "'s Profile",
+        header_content=header_content,
+        ible_list_title=ible_list_title,
+        ibles=ibles,
+        ach_list_title=ach_list_title,
+        achs=achs,
     )
 
 
@@ -782,7 +842,7 @@ def route_article(article):
     try:
         header = soup.select("header")
         if len(header) < 2 and soup.select("title")[0].text.contains("Pending Review"):
-            return render_template("article-review.html")
+            return render_template("article-review.html", title="Pending Review")
         else:
             header = header[1]
         title = header.find("h1").text
@@ -807,11 +867,15 @@ def route_article(article):
 
             steps = []
             for step in body.select("section.step"):
+                print(step)
                 step_title = step.select("h2")[0].text
 
                 step_imgs = []
-                for img in step.select("div.no-js-photoset img"):
+                # TODO: Handle download links
-                    step_imgs.append([proxy(img.get("src")), img.get("alt")])
+                for img in step.select("img"):
+                    step_imgs.append(
+                        {"src": proxy(img.get("src")), "alt": img.get("alt")}
+                    )
 
                 step_videos = []
                 for img in step.select("video"):
@@ -822,11 +886,20 @@ def route_article(article):
                     "https://content.instructables.com",
                     "/proxy/?url=https://content.instructables.com",
                 )
-                steps.append([step_title, step_imgs, step_text, step_videos])
+                steps.append(
+                    {
+                        "title": step_title,
+                        "imgs": step_imgs,
+                        "text": step_text,
+                        "videos": step_videos,
+                    }
+                )
 
             comments_list = []
             comment_count = 0
 
+            # TODO: Fix comments
+
             # comments = body.select("section.discussion")[0]
 
             # comment_count = comments.select("h2")[0].text
@@ -865,20 +938,18 @@ def route_article(article):
             #         comments_list.append([comment_votes, comment_author_img_src, comment_author_img_alt, comment_author, comment_author_link, comment_date, comment_text, comment_reply_count, reply_list])
             return render_template(
                 "article.html",
-                data=[
+                title=title,
-                    title,
+                author=author,
-                    author,
+                author_link=author_link,
-                    author_link,
+                category=category,
-                    category,
+                category_link=category_link,
-                    category_link,
+                channel=channel,
-                    channel,
+                channel_link=channel_link,
-                    channel_link,
+                views=views,
-                    views,
+                favorites=favorites,
-                    favorites,
+                steps=steps,
-                    steps,
+                comment_count=comment_count,
-                    comment_count,
+                comments_list=comments_list,
-                    comments_list,
-                ],
                 enumerate=enumerate,
             )
         else:
@@ -924,32 +995,30 @@ def route_article(article):
                         "div.thumbnail div.thumbnail-info span.origin a"
                     )[0].get("href")
                 thumbnails.append(
-                    [
+                    {
-                        text,
+                        "text": text,
-                        link,
+                        "link": link,
-                        img,
+                        "img": img,
-                        thumbnail_title,
+                        "title": thumbnail_title,
-                        thumbnail_author,
+                        "author": thumbnail_author,
-                        thumbnail_author_link,
+                        "author_link": thumbnail_author_link,
-                        thumbnail_channel,
+                        "channel": thumbnail_channel,
-                        thumbnail_channel_link,
+                        "channel_link": thumbnail_channel_link,
-                    ]
+                    }
                 )
 
             return render_template(
                 "collection.html",
-                data=[
+                title=title,
-                    title,
+                author=author,
-                    author,
+                author_link=author_link,
-                    author_link,
+                category=category,
-                    category,
+                category_link=category_link,
-                    category_link,
+                channel=channel,
-                    channel,
+                channel_link=channel_link,
-                    channel_link,
+                views=views,
-                    views,
+                favorites=favorites,
-                    favorites,
+                thumbnails=thumbnails,
-                    thumbnails,
-                ],
             )
 
     except Exception:
@@ -1003,7 +1072,16 @@ def route_explore():
 
     return render_template(
         "index.html",
-        data=[title, circuits, workshop, craft, cooking, living, outside, teachers],
+        title=title,
+        sections=[
+            ("Circuits", "/circuits", circuits),
+            ("Workshop", "/workshop", workshop),
+            ("Craft", "/craft", craft),
+            ("Cooking", "/cooking", cooking),
+            ("Living", "/living", living),
+            ("Outside", "/outside", outside),
+            ("Teachers", "/teachers", teachers),
+        ],
     )
 
 
@@ -1028,8 +1106,17 @@ def route_proxy():
 
 @app.route("/privacypolicy/")
 def privacypolicy():
-    # TODO: Make this dynamic
+    content = "No privacy policy found."
-    return render_template("privacypolicy.html")
+
+    try:
+        with (pathlib.Path(__file__).parent / "privacy.txt").open() as f:
+            content = f.read()
+    except:
+        pass
+
+    return render_template(
+        "privacypolicy.html", title="Privacy Policy", content=content
+    )
 
 
 @app.errorhandler(404)

static/css/style.css

@@ -0,0 +1,202 @@
+body {
+  font-family: DejaVu Sans Mono, monospace;
+  margin: 20px auto;
+  line-height: 1.5em;
+  font-size: 1.1em;
+  max-width: 100vw;
+  color: #bbc2cf;
+  padding: 0 10px;
+  hyphens: auto;
+}
+
+a {
+  color: #ff6c6b;
+  text-decoration: none;
+}
+a:hover {
+  color: #ff6c6b;
+  text-decoration: underline;
+}
+
+h1,
+h2,
+h3,
+.fact_check_info_title {
+  line-height: 1.2;
+  color: #51afef;
+  font-size: 1.3em;
+}
+h2 {
+  font-size: 1.2em;
+}
+h3,
+.fact_check_info_title {
+  font-size: 1.1em;
+}
+
+pre,
+code {
+  tab-size: 8;
+  background: #20232a;
+  color: #969ba6;
+  border: 1px solid lightgrey;
+  padding: 5px;
+  tab-size: 4;
+}
+
+blockquote {
+  border-left: 10px solid #969ba6;
+  padding-left: 10px;
+  margin-right: 10px;
+}
+
+.ibles {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.ible-small {
+  font-size: 0.7em;
+  font-weight: thin;
+  line-height: 1em;
+}
+
+.step-imgs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.step-imgs img {
+  max-width: 300px;
+}
+
+.reply-button,
+.replies {
+  display: none;
+}
+
+.reply-button + label {
+  position: relative;
+  display: block;
+  cursor: pointer;
+}
+
+input.reply-button:checked + label + .replies {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.member-list {
+  display: inline-block;
+  max-width: 200px;
+  vertical-align: top;
+}
+
+.ible-list-item {
+  display: inline-block;
+  max-width: 350px;
+  vertical-align: top;
+  margin-bottom: 2rem;
+}
+
+.contest-list-item {
+  display: inline-block;
+  max-width: 500px;
+  vertical-align: top;
+  margin-bottom: 2rem;
+}
+
+.archive-month-wrapper {
+  display: inline-block;
+  width: 30vw;
+  vertical-align: top;
+}
+
+.archive-month {
+  display: flex;
+  flex-direction: column;
+  gap: -10px;
+  margin-bottom: 1rem;
+  justify-content: space-between;
+}
+
+.archive {
+  margin-bottom: -20px;
+}
+
+ul.pagination {
+  display: flex;
+  justify-content: space-around;
+  padding: 0 33vw;
+  list-style-type: none;
+  align-items: center;
+}
+
+ul.pagination li.active a,
+ul.pagination li.disabled a,
+ul.pagination li.active a:hover,
+ul.pagination li.disabled a:hover {
+  color: #bbc2cf;
+  text-decoration: none;
+}
+
+.closed-contest-contest {
+  object-fit: cover;
+  width: 33vw;
+  height: 15vw;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 10px;
+}
+
+.closed-contest-winner,
+.closed-contest-winner-img {
+  width: 15vw;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 10px;
+  font-size: 0.8em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sitemap-group {
+  margin-top: 2em;
+  display: inline-block;
+  width: 30vw;
+  text-align: left;
+  vertical-align: top;
+}
+
+.sitemap-group h2 {
+  text-align: center;
+}
+
+.container {
+  margin-top: 20px !important;
+}
+
+header {
+  margin-bottom: 50px;
+}
+
+.go_here_link {
+  background-color: #4caf50;
+  /* Green */
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+}
+
+.go_here_link:hover {
+  color: black;
+}

templates/400.html

@@ -1,21 +1,8 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html>
 
-<head>
+{% block content %}
-	<title>400 - Indestructables</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-	{% include "style.html" %}
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-</head>
-
-<body>
-	{% include "header.html" %}
 	<center>
-		<h1 style="font-size:10em;line-height:0em;">400</h1>
+		<h1>400</h1>
 		<p>The request was malformed</p>
 	</center>
-	{% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/404.html

@@ -1,35 +1,8 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html>
 
-<head>
+{% block content %}
-	<title>404 - Indestructables</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-	{% include "style.html" %}
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-	<style>
-		.go_here_link {
-			background-color: #4CAF50;
-			/* Green */
-			border: none;
-			color: white;
-			padding: 15px 32px;
-			text-align: center;
-			text-decoration: none;
-			display: inline-block;
-			font-size: 16px;
-		}
-
-		.go_here_link:hover {
-			color: black;
-		}
-	</style>
-</head>
-
-<body>
-	{% include "header.html" %}
 	<center>
-		<h1 style="font-size:10em;line-height:0em;">404</h1>
+		<h1>404</h1>
 		<p>This resource cannot be found</p>
 		<br>
 		<p>Why don't you try one of these instead?</p>
@@ -37,7 +10,4 @@
 		<a href="/contest" class="go_here_link">Contests</a>
 		<br><br>
 	</center>
-	{% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/429.html

@@ -1,21 +1,9 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html>
 
-<head>
+{% block content %}
-	<title>429 - Indestructables</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-	{% include "style.html" %}
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-</head>
-
-<body>
 	{% include "header.html" %}
 	<center>
-		<h1 style="font-size:10em;line-height:0em;">429</h1>
+		<h1>429</h1>
 		<p>This instance is being rate-limited</p>
 	</center>
-	{% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/500.html

@@ -1,21 +1,8 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html>
 
-<head>
+{% block content %}
-	<title>500 - Indestructables</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-	{% include "style.html" %}
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-</head>
-
-<body>
-	{% include "header.html" %}
 	<center>
-		<h1 style="font-size:10em;line-height:0em;">500</h1>
+		<h1>500</h1>
 		<p>An internal server error has occurred. Please try again later, or notify the administrator if this keeps happening.</p>
 	</center>
-	{% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/archives.html

@@ -1,22 +1,12 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html>
 
-<head>
+{% block content %}
-	<title>Contests Archive, Page {{ data[0] }} - Indestructables</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-	{% include "style.html" %}
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-</head>
-
-<body>
-	{% include "header.html" %}
 	<center>
 		<h1>Past Contests</h1>
-		<p>{{ data[1] }}</p>
+		<p>{{ contest_count }}</p>
 		<p><a href="/contest/">See running contests</a></p>
 	</center>
-	{% for year in data[3] %}
+	{% for year in contest_list %}
 	<div class="archive-year">
 		<hr>
 		<h2>{{ year[0] }}</h2>
@@ -37,8 +27,5 @@
 	</div>
 	{% endfor %}
 	<hr>
-	{{ data[2]|safe }}
+	{{ pagination|safe }}
-	{% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/article-review.html

@@ -1,21 +1,7 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html>
+{% block content %}
-
-<head>
-	<title>Pending Review - Indestructables</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-	{% include "style.html" %}
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-</head>
-
-<body>
-	{% include "header.html" %}
 	<center>
 		<h1>This content is being reviewed</h1>
 		<p>This Instructable was just published and is still pending review.</p>
 	</center>
-	{% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/article.html

@@ -1,66 +1,72 @@
-<!DOCTYPE html>
+{% extends "base.html" %} {% block content %}
-<html>
+<center>
+  <h1>{{ title }}</h1>
 
-<head>
+  <p>
-	<title>{{ data[0] }} - Indestructables</title>
+    by <a href="{{ author_link }}">{{ author }}</a> in
-	<meta charset="UTF-8">
+    <a href="{{ category_link }}">{{ category }}</a> &gt;
-	<meta name="viewport" content="width=device-width">
+    <a href="{{ channel_link }}">{{ channel }}</a>
-	{% include "style.html" %}
+  </p>
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
+  <p>
-</head>
+    {{ views }} Views, {{ favorites }} Favorites, {{ comment_count }} Comments
+  </p>
+</center>
 
-<body>
+<div class="container">
-	{% include "header.html" %}
+  {% for step in steps %}
-	<center>
+  <div class="row">
-		<h1>{{ data[0] }}</h1>
+    <h2>{{ step.title }}</h2>
+    <div class="step-imgs">
+      {% for step_img in step.imgs %}
+      <img src="{{ step_img.src }}" alt="{{ step_img.alt }}" />
+      {% endfor %}
+    </div>
+    <div class="step-vids">
+      {% for step_video in step.videos %}
+      <video src="{{ step_video }}"></video>
+      {% endfor %}
+    </div>
+    {{ step.text|safe }} {% endfor %}
 
-		<p>by <a href="{{ data[2] }}">{{ data[1] }}</a> in <a href="{{ data[4] }}">{{ data[3] }}</a> &gt; <a
+    <br />
-				href="{{ data[6] }}">{{ data[5] }}</a></p>
+    {% for index, comment in enumerate(comments) %}
-		<p>{{ data[7] }} Views, {{ data[8] }} Favorites, {{ data[10] }}</p>
+    <!-- TODO: Fix comments -->
-	</center>
+    <a href="{{ comment[4] }}">
-
+      <img
-	{% for step in data[9] %}
+        style="display: inline-block"
-	<h2>{{ step[0] }}</h2>
+        width="30px"
-	<div class="step-imgs">
+        height="30px"
-		{% for step_img in step[1] %}
+        src="{{ comment[1] }}"
-		<img src="{{ step_img[0] }}" alt="{{ step_img[1] }}">
+        alt="{{ comment[2] }}"
-		{% endfor %}
+      />
-	</div>
+      <span>{{ comment[3] }}</span>
-	<div class="step-vids">
+    </a>
-		{% for step_video in step[3] %}
+    <span>{{ comment[5] }}</span>
-		<video src="{{ step_video[0] }}"></video>
+    <span>{{ comment[0] }} votes</span>
-		{% endfor %}
+    {{ comment[6]|safe }}
-	</div>
+    <input type="checkbox" id="replies{{ index }}" class="reply-button" />
-	{{ step[2]|safe }}
+    <label for="replies{{ index }}"><b>{{ comment[7] }} replies</b></label>
-	{% endfor %}
+    <div class="replies">
-
+      {% for reply in comment[8] %}
-	<br>
+      <blockquote>
-	{% for index, comment in enumerate(data[11]) %}
+        <a href="{{ reply[4] }}">
-	<a href="{{ comment[4] }}">
+          <img
-		<img style="display:inline-block;" width=30px height=30px src="{{ comment[1] }}" alt="{{ comment[2] }}">
+            style="display: inline-block"
-		<span>{{ comment[3] }}</span>
+            width="30px"
-	</a>
+            height="30px"
-	<span>{{ comment[5] }}</span>
+            src="{{ reply[1] }}"
-	<span>{{ comment[0] }} votes</span>
+            alt="{{ comment[2] }}"
-	{{ comment[6]|safe }}
+          />
-	<input type="checkbox" id="replies{{ index }}" class="reply-button">
+          <span>{{ reply[3] }}</span>
-	<label for="replies{{ index }}"><b>{{ comment[7] }} replies</b></label>
+        </a>
-	<div class="replies">
+        <span>{{ reply[5] }}</span>
-		{% for reply in comment[8] %}
+        <span>{{ reply[0] }} votes</span>
-		<blockquote>
+        {{ reply[6]|safe }}
-			<a href="{{ reply[4] }}">
+      </blockquote>
-				<img style="display:inline-block;" width=30px height=30px src="{{ reply[1] }}" alt="{{ comment[2] }}">
+      {% endfor %}
-				<span>{{ reply[3] }}</span>
+    </div>
-			</a>
+    <br />
-			<span>{{ reply[5] }}</span>
+  </div>
-			<span>{{ reply[0] }} votes</span>
+  {% endfor %}
-			{{ reply[6]|safe }}
+</div>
-		</blockquote>
+{% endblock %}
-		{% endfor %}
-	</div>
-	<br>
-	{% endfor %}
-	{% include "footer.html" %}
-</body>
-
-</html>

templates/base.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>{% if title %}{{ title }} - {% endif %}Indestructables</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+	<link rel="stylesheet" href="{{ url_for('static', filename='dist/css/bootstrap.min.css') }}">
+	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
+</head>
+
+<body>
+	{% include "header.html" %}
+    {% block content %}
+    {% endblock %}
+	{% include "footer.html" %}
+</body>
+
+</html>

templates/category.html

@@ -1,55 +1,42 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html>
 
-<head>
+{% block content %}
-	<title>{{ data[0] }} - Indestructables</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-	{% include "style.html" %}
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-</head>
-
-<body>
-	{% include "header.html" %}
 	<center>
-		<h1>{{ data[0] }}</h1>
+		<h1>{{ title }}</h1>
 		<div class="channel-list">
-			{% for channel in data[1] %}
+			{% for channel in channels %}
 			<div style="display:inline-block">
-				<a href="{{ channel[0] }}" style="position:relative;text-align:center;color:white;">
+				<a href="{{ channel.link }}" style="position:relative;text-align:center;color:white;">
-					<img src="{{ channel[2] }}" alt="{{ channel[1] }}" style="display:inline-block;max-width:200px;">
+					<img src="{{ channel.img }}" alt="{{ channel.title }}" style="display:inline-block;max-width:200px;">
-					<p style="position:absolute;bottom:0px;left:4px;font-weight:thin;">{{ channel[1] }}</p>
+					<p style="position:absolute;bottom:0px;left:4px;font-weight:thin;">{{ channel.title }}</p>
 				</a>
 			</div>
 			{% endfor %}
 		</div>
-		<h2><a href="{{ data[4] }}projects/">Featured Projects</a></h2>
+		<h2><a href="{{ path }}projects/">Featured Projects</a></h2>
 		<div class="project-list">
-			{% for ible in data[2] %}
+			{% for ible in ibles %}
 			<div class="ible-list-item">
-				<a href="{{ ible[0] }}">
+				<a href="{{ ible.link }}">
-					<img src="{{ ible[1] }}" alt="{{ ible[2] }}">
+					<img src="{{ ible.img }}" alt="{{ ible.title }}">
 					<br>
-					<span><b>{{ ible[2] }}</b></span>
+					<span><b>{{ ible.title }}</b></span>
 				</a>
-				<span>by <a href="{{ ible[4] }}">{{ ible[3] }}</a></span>
+				<span>by <a href="{{ ible.author_link }}">{{ ible.author }}</a></span>
-				<span>in <a href="{{ ible[6] }}">{{ ible[5] }}</a></span>
+				<span>in <a href="{{ ible.channel_link }}">{{ ible.channel }}</a></span>
 				<br>
-				<span>{{ ible[7] }} Views&nbsp;&nbsp;</span>
+				<span>{{ ible.views }} Views&nbsp;&nbsp;</span>
-				<span>{{ ible[8] }} Favorites</span>
+				<span>{{ ible.favorites }} Favorites</span>
 			</div>
 			{% endfor %}
 		</div>
 		<h2><a href="/contest/">Contests</a></h2>
 		<div style="display:inline-block;">
-			{% for contest in data[3] %}
+			{% for contest in contests %}
-			<a href="{{ contest[0] }}" style="color:#bbc2cf;">
+			<a href="{{ contest.link }}" style="color:#bbc2cf;">
-				<img src="{{ contest[1] }}" alt="{{ contest[2] }}" style="max-width:400px;">
+				<img src="{{ contest.img }}" alt="{{ contest.title }}" style="max-width:400px;">
 			</a>
 			{% endfor %}
 		</div>
 	</center>
-	{% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/collection.html

@@ -1,41 +1,28 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html>
 
-<head>
+{% block content %}
-	<title>{{ data[0] }} - Indestructables</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-	{% include "style.html" %}
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-</head>
-
-<body>
-	{% include "header.html" %}
 	<center>
-		<h1>{{ data[0] }}</h1>
+		<h1>{{ title }}</h1>
 
-		<p>by <a href="{{ data[2] }}">{{ data[1] }}</a> in <a href="{{ data[4] }}">{{ data[3] }}</a> &gt; <a
+		<p>by <a href="{{ author_link }}">{{ author }}</a> in <a href="{{ category_link }}">{{ category }}</a> &gt; <a
-				href="{{ data[6] }}">{{ data[5] }}</a></p>
+				href="{{ channel_link }}">{{ channel }}</a></p>
-		<p>{{ data[7] }} Views, {{ data[8] }} Favorites, {{ data[10] }}</p>
+		<p>{{ views }} Views, {{ favorites }} Favorites</p>
 
 		<div style="max-width:90%;">
-			{% for thumbnail in data[9] %}
+			{% for thumbnail in thumbnails %}
 			<div class="ible-list-item">
-				{% if thumbnail[0] == '' %}
+				{% if thumbnail.title == '' %}
-				<a href="{{ thumbnail[1] }}" style="color:#bbc2cf;">
+				<a href="{{ thumbnail.link }}" style="color:#bbc2cf;">
-					<img style="max-width:350px;" src="{{ thumbnail[2] }}" alt="{{ thumbnail[3] }}">
+					<img style="max-width:350px;" src="{{ thumbnail.img }}" alt="{{ thumbnail.author }}">
-					<p>{{ thumbnail[3] }}</p>
+					<p>{{ thumbnail.author }}</p>
 				</a>
-				<p>by <a href="{{ thumbnail[5] }}">{{ thumbnail[4] }}</a> in <a href="{{ thumbnail[7] }}">{{
+				<p>by <a href="{{ thumbnail.author_link }}">{{ thumbnail.author }}</a> in <a href="{{ thumbnail.channel_link }}">{{
-						thumbnail[6] }}</a> </p>
+						thumbnail.channel }}</a> </p>
 				{% else %}
-				{{ thumbnail[0]|safe }}
+				{{ thumbnail.text|safe }}
 				{% endif %}
 			</div>
 			{% endfor %}
 		</div>
 	</center>
-	{% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/contest.html

@@ -1,35 +1,23 @@
-<!DOCTYPE html>
-<html>
 
-<head>
+{% extends "base.html" %}
-	<title>{{ data[0] }} - Indestructables</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-	{% include "style.html" %}
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-</head>
 
-<body>
+{% block content %}
-	{% include "header.html" %}
 	<center>
-		<img src="{{ data[1] }}" alt="{{ data[0] }}" style="max-width:98vw;">
+		<img src="{{ img }}" alt="{{ title }}" style="max-width:98vw;">
-		<p>{{ data[2] }} Entries, {{ data[3] }} Prizes</p>
+		<p>{{ entry_count }} Entries, {{ prizes }} Prizes</p>
 		<br>
-		{{ data[4]|safe }}
+		{{ info|safe }}
 		<div class="ible-list">
-			{% for ible in data[5] %}
+			{% for ible in entries %}
 			<div class="ible-list-item">
-				<a href="{{ ible[0] }}" style="color:#bbc2cf;">
+				<a href="{{ ible.link }}" style="color:#bbc2cf;">
-					<img style="max-width:350px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
+					<img style="max-width:350px;" src="{{ ible.entry_img }}" alt="{{ ible.entry_title }}">
-					<p>{{ ible[2] }}</p>
+					<p>{{ ible.entry_title }}</p>
 				</a>
-				<p>by <a href="{{ ible[4] }}">{{ ible[3] }}</a> in <a href="{{ ible[6] }}">{{ ible[5] }}</a></p>
+				<p>by <a href="{{ ible.author_link }}">{{ ible.author }}</a> in <a href="{{ ible.channel_link }}">{{ ible.channel }}</a></p>
-				<p>{{ ible[7] }} Views</p>
+				<p>{{ ible.views }} Views</p>
 			</div>
 			{% endfor %}
 		</div>
 	</center>
-	{% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/contests.html

@@ -1,53 +1,40 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html>
 
-<head>
+{% block content %}
-	<title>Contests - Indestructables</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-	{% include "style.html" %}
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-</head>
-
-<body>
-	{% include "header.html" %}
 	<center>
-		<h1>Contests</h1>
+		<h1>{{ title }}</h1>
-		{{ data[0]|safe }}
+		{{ contest_count|safe }}
 		<br>
 		<div class="contest-list">
-			{% for contest in data[1] %}
+			{% for contest in contests %}
 			<div class="contest-list-item">
-				<a href="{{ contest[0] }}">
+				<a href="{{ contest.link }}">
-					<img src="{{ contest[1] }}" alt="{{ contest[2] }}" style="max-width:500px;">
+					<img src="{{ contest.img }}" alt="{{ contest.alt }}" style="max-width:500px;">
 				</a>
-				<p>Closes {{ contest[3] }}</p>
+				<p>Closes {{ contest.deadline }}</p>
-				<p class="ible-small">{{ contest[4] }} Prizes, {{ contest[5] }} Entries</p>
+				<p class="ible-small">{{ contest.prizes }} Prizes, {{ contest.entries }} Entries</p>
 			</div>
 			{% endfor %}
 		</div>
 		<div class="closed-contests" id="contest-winners">
 			<h2>Winner's Circle</h2>
-			{% for closed in data[2] %}
+			{% for closed in closed %}
 			<div class="closed-contest">
-				<a href="{{ closed[0] }}"><img class="closed-contest-contest" src="{{ closed[1] }}"
+				<a href="{{ closed.link }}"><img class="closed-contest-contest" src="{{ closed.img }}"
-						alt="{{ closed[2] }}"></a>
+						alt="{{ closed.alt }}"></a>
-				{% for featured_items in closed[3] %}
+				{% for featured_items in closed.featured_items %}
 				<div class="closed-contest-winner">
-					<a href="{{ featured_items[0] }}">
+					<a href="{{ featured_items.link }}">
-						<img class="closed-contest-winner-img" src="{{ featured_items[1] }}"
+						<img class="closed-contest-winner-img" src="{{ featured_items.img }}"
-							alt="{{ featured_items[2] }}">
+							alt="{{ featured_items.title}}">
 						<br>
-						<b>{{ featured_items[2] }}</b>
+						<b>{{ featured_items.title }}</b>
 					</a>
-					<p>by <a href="{{ featured_items[4] }}">{{ featured_items[3] }}</a></p>
+					<p>by <a href="{{ featured_items.author_link }}">{{ featured_items.author }}</a></p>
 				</div>
 				{% endfor %}
 			</div>
 			{% endfor %}
 		</div>
 	</center>
-	{% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/header.html

@@ -1,26 +1,43 @@
 <header>
-	<ul
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
-		style="display:flex;justify-content:flex-start;list-style-type:none;padding-left:0px;align-items:center;flex-wrap:wrap;">
+    <a class="navbar-brand" href="/">
-		<div style="width: 20px; height: 0px"> </div>
+      <img src="/static/img/logo.png" alt="Indestructables" height="75px" />
-		<li><a href="/"><img style="display:inline" src="{{ url_for('static', filename='img/logo.png') }}"
+    </a>
-					height=75px></a></li>
+    <div class="container-fluid">
-		<div style="width: 40px; height: 0px"> </div>
+      <div class="row flex-grow-1">
-		<li><a href="/projects/">Projects</a></li>
+        <div class="col">
-		<div style="width: 40px; height: 0px"> </div>
+          <ul class="nav">
-		<li><a href="/contest/">Contests</a></li>
+            <li class="nav-item">
-		<div style="width: 40px; height: 0px"> </div>
+              <a class="nav-link" href="/projects/">Projects</a>
-		<li><a href="/teachers/">Teachers</a></li>
+            </li>
-
+            <li class="nav-item">
-		<div style="width: 60px; height: 0px"> </div>
+              <a class="nav-link" href="/contest/">Contests</a>
-
+            </li>
-		<form action="/search" method="GET">
+            <li class="nav-item">
-			<input type="search" placeholder="Search" name="q" maxlength="88" autocapitalize="none" autocorrect="off"
+              <a class="nav-link" href="/teachers/">Teachers</a>
-				autocomplete="off" value="" style="width: 720%; font-size: medium; padding: 3%;">
+            </li>
-		</form>
+          </ul>
-
+        </div>
-		<div style="width: 60%; height: 0px"> </div>
+        <div class="col-auto">
-
+          <form class="form-inline" action="/search" method="GET">
-		<li><a href="/sitemap/">Sitemap</a></li>
+            <input
-	</ul>
+              class="form-control mr-2"
-	<hr>
+              type="search"
+              placeholder="Search"
+              name="q"
+              aria-label="Search"
+            />
+            <button style="display: none" type="submit">Search</button>
+          </form>
+        </div>
+        <div class="col col-lg-2 text-right">
+          <ul class="nav">
+            <li class="nav-item">
+              <a class="nav-link" href="/sitemap/">Sitemap</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </nav>
 </header>

templates/index.html

@@ -1,145 +1,33 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html>
 
-<head>
+{% block content %}
-	<title>Indestructables</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-	{% include "style.html" %}
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-</head>
-
-<body>
-	{% include "header.html" %}
 	<center>
-		<h1>{{ data[0] }}</h1>
+		<h1>{{ title }}</h1>
 
-		<b><a href="/circuits/">Circuits</a></b>
+		{% for section in sections %}
-		<br>
+		<div class="container">
-		{% for ible in data[1] %}
+			<div class="row">
-		<div class="ibles">
+				<h3></strong><a href="{{ section[1] }}">{{ section[0] }}</a></h3>
-			<a href="{{ ible[0] }}">
+			</div>
-				<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
+			<div class="row justify-content-center">
-				<h3 style="max-width:19vw;">{{ ible[3] }}</h3>
+				{% for ible in section[2] %}
-			</a>
+				<div class="ibles col-xs-12 col-sm-6 col-lg-4">
-			<div class="ible-small">
+					<a href="{{ ible.link }}">
-				<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
+						<img style="max-width:19vw;" src="{{ ible.img }}" alt="{{ ible.alt }}">
-				<p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p>
+						<p>
-				<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p>
+							<strong style="max-width:19vw;">{{ ible.title }}</strong>
+						</p>
+					</a>
+					<div class="ible-small">
+						<p>by <a href="{{ ible.author_link }}">{{ ible.author }}</a></p>
+						<p>in <a href="{{ ible.channel_link }}">{{ ible.channel }}</a></p>
+						<p>{{ ible.favorites }} Favorites, {{ ible.views }} Views</p>
+					</div>
+				</div>
+				{% endfor %}
 			</div>
 		</div>
+		<hr>
 		{% endfor %}
-		<br>
-		<br>
-
-		<b><a href="/workshop/">Workshop</a></b>
-		<br>
-		{% for ible in data[2] %}
-		<div class="ibles">
-			<a href="{{ ible[0] }}">
-				<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
-				<h3 style="max-width:19vw;">{{ ible[3] }}</h3>
-			</a>
-			<div class="ible-small">
-				<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
-				<p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p>
-				<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p>
-			</div>
-		</div>
-		{% endfor %}
-		<br>
-		<br>
-
-		<b><a href="/craft/">Craft</a></b>
-		<br>
-		{% for ible in data[3] %}
-		<div class="ibles">
-			<a href="{{ ible[0] }}">
-				<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
-				<h3 style="max-width:19vw;">{{ ible[3] }}</h3>
-			</a>
-			<div class="ible-small">
-				<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
-				<p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p>
-				<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p>
-			</div>
-		</div>
-		{% endfor %}
-		<br>
-		<br>
-
-		<b><a href="/cooking/">Cooking</a></b>
-		<br>
-		{% for ible in data[4] %}
-		<div class="ibles">
-			<a href="{{ ible[0] }}">
-				<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
-				<h3 style="max-width:19vw;">{{ ible[3] }}</h3>
-			</a>
-			<div class="ible-small">
-				<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
-				<p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p>
-				<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p>
-			</div>
-		</div>
-		{% endfor %}
-		<br>
-		<br>
-
-		<b><a href="/living/">Living</a></b>
-		<br>
-		{% for ible in data[5] %}
-		<div class="ibles">
-			<a href="{{ ible[0] }}">
-				<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
-				<h3 style="max-width:19vw;">{{ ible[3] }}</h3>
-			</a>
-			<div class="ible-small">
-				<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
-				<p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p>
-				<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p>
-			</div>
-		</div>
-		{% endfor %}
-		<br>
-		<br>
-
-		<b><a href="/outside/">Outside</a></b>
-		<br>
-		{% for ible in data[6] %}
-		<div class="ibles">
-			<a href="{{ ible[0] }}">
-				<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
-				<h3 style="max-width:19vw;">{{ ible[3] }}</h3>
-			</a>
-			<div class="ible-small">
-				<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
-				<p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p>
-				<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p>
-			</div>
-		</div>
-		{% endfor %}
-		<br>
-		<br>
-
-		<b><a href="/teachers/">Teachers</a></b>
-		<br>
-		{% for ible in data[7] %}
-		<div class="ibles">
-			<a href="{{ ible[0] }}">
-				<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
-				<h3 style="max-width:19vw;">{{ ible[3] }}</h3>
-			</a>
-			<div class="ible-small">
-				<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
-				<p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p>
-				<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p>
-			</div>
-		</div>
-		{% endfor %}
-
 	</center>
-	{% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/member-instructables.html

@@ -1,45 +1,32 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html>
 
-<head>
+{% block content %}
-	<title>{{ data[1] }}'s Instructables - Indestructables</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-	{% include "style.html" %}
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-</head>
-
-<body>
-	{% include "header.html" %}
 	<center>
-		<img width=150px height=150px style="display:inline-block;" src="{{ data[0] }}" alt="{{ data[1] }}">
+		<img width=150px height=150px style="display:inline-block;" src="{{ header_content.avatar }}" alt="{{ header_content.title }}">
-		<h1>{{ data[1] }}</h1>
+		<h1>{{ header_content.title }}</h1>
-		<span>{{ data[2] }}&nbsp;&nbsp;</span>
+		<span>{{ header_content.location }}&nbsp;&nbsp;</span>
-		<span>{{ data[3] }}</span>
+		<span>{{ header_content.signup }}</span>
 		<br>
-		<span>{{ data[4] }} Instructables&nbsp;&nbsp;</span>
+		<span>{{ header_content.instructables }} Instructables&nbsp;&nbsp;</span>
-		<span>{{ data[5] }} Views&nbsp;&nbsp;</span>
+		<span>{{ header_content.views }} Views&nbsp;&nbsp;</span>
-		<span>{{ data[6] }} Comments&nbsp;&nbsp;</span>
+		<span>{{ header_content.comments }} Comments&nbsp;&nbsp;</span>
-		<span>{{ data[7] }} Followers</span>
+		<span>{{ header_content.followers }} Followers</span>
 		<br>
-		<p>{{ data[8] }}</p>
+		<p>{{ header_content.bio }}</p>
 		<hr>
 		<h2>Instructables</h2>
 
 		<div style="max-width:90%;">
-			{% for ible in data[9] %}
+			{% for ible in ibles %}
 			<div class="ible-list-item">
-				<a href="{{ ible[0] }}" style="color:#bbc2cf;">
+				<a href="{{ ible.link }}" style="color:#bbc2cf;">
-					<img style="max-width:350px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
+					<img style="max-width:350px;" src="{{ ible.img }}" alt="{{ ible.title }}">
-					<p>{{ ible[2] }}</p>
+					<p>{{ ible.title }}</p>
-					<p>{{ ible[3] }} Views, {{ ible[4] }} Favorites</p>
+					<p>{{ ible.views }} Views, {{ ible.favorites }} Favorites</p>
 				</a>
 			</div>
 			{% endfor %}
 		</div>
 
 	</center>
-	{% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/member.html

@@ -1,44 +1,34 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html>
 
-<head>
+{% block content %}
-	<title>{{ data[1] }}'s Profile - Indestructables</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-	{% include "style.html" %}
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-</head>
-
-<body>
-	{% include "header.html" %}
 	<center>
-		<img width=150px height=150px style="display:inline-block;" src="{{ data[0] }}" alt="{{ data[1] }}">
+		<img width=150px height=150px style="display:inline-block;" src="{{ header_content.avatar }}" alt="{{ header_content.title }}">
-		<h1>{{ data[1] }}</h1>
+		<h1>{{ header_content.title }}</h1>
-		<span>{{ data[2] }}&nbsp;&nbsp;</span>
+		<span>{{ header_content.location }}&nbsp;&nbsp;</span>
-		<span>{{ data[3] }}</span>
+		<span>{{ header_content.signup }}</span>
 		<br>
-		<span>{{ data[4] }} Instructables&nbsp;&nbsp;</span>
+		<span>{{ header_content.instructables }} Instructables&nbsp;&nbsp;</span>
-		<span>{{ data[5] }} Views&nbsp;&nbsp;</span>
+		<span>{{ header_content.views }} Views&nbsp;&nbsp;</span>
-		<span>{{ data[6] }} Comments&nbsp;&nbsp;</span>
+		<span>{{ header_content.comments }} Comments&nbsp;&nbsp;</span>
-		<span>{{ data[7] }} Followers</span>
+		<span>{{ header_content.followers }} Followers</span>
 		<br>
-		<p>{{ data[8] }}</p>
+		<p>{{ header_content.bio }}</p>
-		{% if data[9] != "" %}
+		{% if ible_list_title != "" %}
 		<hr>
 		{% endif %}
-		<h2>{{ data[9] }}</h2>
+		<h2>{{ ible_list_title }}</h2>
-		{% for ible in data[10] %}
+		{% for ible in ibles %}
 		<div class="member-list">
-			<a href="{{ ible[1] }}" style="color:#bbc2cf;">
+			<a href="{{ ible.link }}" style="color:#bbc2cf;">
-				<img style="max-width:200px;" src="{{ ible[2] }}" alt="{{ ible[0] }}">
+				<img style="max-width:200px;" src="{{ ible.img }}" alt="{{ ible.title }}">
-				<p>{{ ible[0] }}</p>
+				<p>{{ ible.title }}</p>
 			</a>
 		</div>
 		{% endfor %}
-		<p><a href="/member/{{ data[1] }}/instructables/">View all Instructables</a></p>
+		<p><a href="/member/{{ header_content.title }}/instructables/">View all Instructables</a></p>
 		<br>
-		<h2>{{ data[11] }}</h2>
+		<h2>{{ ach_list_title }}</h2>
-		{% for ach in data[12] %}
+		{% for ach in achs %}
 		<div class="member-list">
 			<p><b>{{ ach[0] }}</b></p>
 			<p>{{ ach[1] }}</p>
@@ -46,7 +36,4 @@
 		{% endfor %}
 
 	</center>
-	{% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/privacypolicy.html

@@ -1,23 +1,10 @@
-<!DOCTYPE html>
+{% extends 'base.html' %}
-<html>
 
-<head>
+{% block content %}
-    <title>Privacy Policy - Indestructables</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width">
-    {% include "style.html" %}
-    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-</head>
-
-<body>
-    {% include "header.html" %}
     <center>
         <br>
         <h1 style="font-size:2em;line-height:0em;">Privacy Policy</h1>
         <br>
-        <p>{% include "privacypolicy.txt" %}</p>
+        <p>{{ content }}</p>
     </center>
-    {% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/privacypolicy.txt

@@ -1 +0,0 @@
-Nothing here, yet!

templates/projects.html

@@ -1,39 +1,33 @@
-<!DOCTYPE html>
+{% extends "base.html" %} {% block content %}
-<html>
+<center>
+  <h1>{{ title }}</h1>
+  <span><a href="{{ path }}/">Featured</a></span>
+  <span><a href="{{ path }}/recent/">Recent</a></span>
+  <span><a href="{{ path }}/popular/">Popular</a></span>
+  <span><a href="{{ path }}/views/">Views</a></span>
+  <span><a href="{{ path }}/winners/">Winners</a></span>
+  <br />
 
-<head>
+  <div class="container">
-	<title>{{ data[0] }} - Indestructables</title>
+    <div class="row">
-	<meta charset="UTF-8">
+      {% for ible in ibles %}
-	<meta name="viewport" content="width=device-width">
+      <div class="ible-list-item col-xs-12 col-sm-6 col-lg-4">
-	{% include "style.html" %}
+        <a href="{{ ible.link }}" style="color: #bbc2cf">
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
+          <img
-</head>
+            style="max-width: 350px"
-
+            src="{{ ible.img }}"
-<body>
+            alt="{{ ible.title }}"
-	{% include "header.html" %}
+          />
-	<center>
+          <p>{{ ible.title }}</p>
-		<h1>{{ data[0] }}</h1>
+        </a>
-		<span><a href="{{ data[2] }}/">Featured</a></span>
+        <p>
-		<span><a href="{{ data[2] }}/recent/">Recent</a></span>
+          by <a href="{{ ible.author_link }}">{{ ible.author }}</a> in
-		<span><a href="{{ data[2] }}/popular/">Popular</a></span>
+          <a href="{{ ible.channel_link }}">{{ ible.channel }}</a>
-		<span><a href="{{ data[2] }}/views/">Views</a></span>
+        </p>
-		<span><a href="{{ data[2] }}/winners/">Winners</a></span>
+        <p>{{ ible.views }} Views, {{ ible.favorites }} Favorites</p>
-		<br>
+      </div>
-
+      {% endfor %}
-		<div style="max-width:90%;">
+    </div>
-			{% for ible in data[1] %}
+  </div>
-			<div class="ible-list-item">
+</center>
-				<a href="{{ ible[0] }}" style="color:#bbc2cf;">
+{% endblock %}
-					<img style="max-width:350px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
-					<p>{{ ible[2] }}</p>
-				</a>
-				<p>by <a href="{{ ible[4] }}">{{ ible[3] }}</a> in <a href="{{ ible[6] }}">{{ ible[5] }}</a></p>
-				<p>{{ ible[7] }} Views, {{ ible[8] }} Favorites</p>
-			</div>
-			{% endfor %}
-		</div>
-	</center>
-	{% include "footer.html" %}
-</body>
-
-</html>

templates/sitemap.html

@@ -1,21 +1,12 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html>
 
-<head>
+{% block content %}
-	<title>Sitemap - Indestructables</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-	{% include "style.html" %}
-	<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
-</head>
-
-<body>
-	{% include "header.html" %}
 	<center>
 		<h1>Sitemap</h1>
-		<div class="sitemap-groups">
+		<div class="container">
-			{% for group in data %}
+			<div class="row sitemap-groups"></div>
-			<div class="sitemap-group">
+			{% for group in groups %}
+			<div class="sitemap-group col-xs-12 col-sm-6 col-lg-4">
 				<a href="{{ group[1] }}">
 					<h2>{{ group[0] }}</h2>
 				</a>
@@ -27,8 +18,6 @@
 			</div>
 			{% endfor %}
 		</div>
+		</div>
 	</center>
-	{% include "footer.html" %}
+{% endblock %}
-</body>
-
-</html>

templates/style.html

@@ -1,166 +1,2 @@
-<style>
+<!-- TODO: Get rid of this -->
-	body {
+<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-		font-family: DejaVu Sans Mono, monospace;
-		margin:20px auto;
-		line-height:1.5em;
-		font-size:1.1em;
-		background-color:#282c34;
-		max-width:100vw;
-		color:#bbc2cf;
-		padding:0 10px;
-		hyphens:auto;
-	}
-
-
-	a { color:#ff6c6b; text-decoration:none; }
-	a:hover { color:#ff6c6b; text-decoration:underline; }
-
-	h1,h2,h3,.fact_check_info_title {
-		line-height:1.2;
-		color:#51afef;
-		font-size:1.3em;
-	}
-	h2 { font-size:1.2em; }
-	h3,.fact_check_info_title { font-size:1.1em; }
-
-	pre,code {
-		tab-size:8; 
-		background: #20232a;
-		color: #969ba6;
-		border: 1px solid lightgrey;
-		padding: 5px;
-		tab-size:4;
-	}
-
-	blockquote {
-		border-left: 10px solid #969ba6;
-		padding-left: 10px;
-		margin-right: 10px;
-	}
-
-	.ibles {
-		display:inline-block;
-		vertical-align:top;
-	}
-
-	.ible-small {
-		font-size:0.7em;
-		font-weight:thin;
-		line-height:1em;
-	}
-
-	.step-imgs {
-		display:flex;
-		align-items:center;
-		justify-content:center;
-		flex-wrap:wrap;
-	}
-
-	.step-imgs img {
-		max-width:300px;
-	}
-
-	.reply-button,.replies {
-		display:none;
-	}
-
-	.reply-button + label {
-		position:relative;
-		display:block;
-		cursor:pointer;
-	}
-
-	input.reply-button:checked + label + .replies {
-		display:flex;
-		flex-direction:column;
-		gap:1rem;
-		margin-top:1rem;
-	}
-
-	.member-list {
-		display:inline-block;
-		max-width:200px;
-		vertical-align:top;
-	}
-
-	.ible-list-item {
-		display:inline-block;
-		max-width:350px;
-		vertical-align:top;
-		margin-bottom:2rem;
-	}
-
-	.contest-list-item {
-		display:inline-block;
-		max-width:500px;
-		vertical-align:top;
-		margin-bottom:2rem;
-	}
-
-	.archive-month-wrapper {
-		display:inline-block;
-		width:30vw;
-		vertical-align:top;
-	}
-
-	.archive-month {
-		display:flex;
-		flex-direction:column;
-		gap:-10px;
-		margin-bottom:1rem;
-		justify-content:space-between;
-	}
-
-	.archive {
-		margin-bottom:-20px;
-	}
-
-	ul.pagination {
-		display:flex;
-		justify-content:space-around;
-		padding: 0 33vw;
-		list-style-type:none;
-		align-items:center;
-	}
-
-	ul.pagination li.active a,
-	ul.pagination li.disabled a,
-	ul.pagination li.active a:hover,
-	ul.pagination li.disabled a:hover {
-		color:#bbc2cf;
-		text-decoration:none;
-	}
-
-	.closed-contest-contest {
-		object-fit:cover;
-		width:33vw;
-		height:15vw;
-		display:inline-block;
-		vertical-align:top;
-		padding:0 10px;
-	}
-
-	.closed-contest-winner,
-	.closed-contest-winner-img {
-		width:15vw;
-		display:inline-block;
-		vertical-align:top;
-		padding:0 10px;
-		font-size:0.8em;
-		text-overflow:ellipsis;
-		white-space:nowrap;
-		overflow:hidden;
-	}
-
-	.sitemap-group {
-		margin-top:2em;
-		display:inline-block;
-		width:30vw;
-		text-align:left;
-		vertical-align:top;
-	}
-
-	.sitemap-group h2 {
-		text-align:center;
-	}
-</style>