From e0e60830be5e49e89a7a51c54607349ca45fa497 Mon Sep 17 00:00:00 2001
From: Jake Charman <jake@jakecharman.co.uk>
Date: Thu, 2 Jan 2025 22:33:21 +0000
Subject: [PATCH] Frontend work

---
 src/common.py                | 11 -----------
 src/main.py                  | 12 ------------
 src/projects.py              | 23 +++++++++++++++++------
 src/projects.wsgi            |  2 +-
 src/static/style/desktop.css | 13 +++++++++++++
 src/static/style/mobile.css  | 11 +++++++++++
 src/templates/header.html    |  6 +++---
 src/templates/projects.html  | 17 +++++++++++++++++
 8 files changed, 62 insertions(+), 33 deletions(-)
 delete mode 100644 src/common.py
 delete mode 100644 src/main.py

diff --git a/src/common.py b/src/common.py
deleted file mode 100644
index 43438eb..0000000
--- a/src/common.py
+++ /dev/null
@@ -1,11 +0,0 @@
-#!/usr/bin/python3
-
-import frontmatter
-from glob import glob
-from os import path
-from main import app
-from datetime import datetime
-from bs4 import BeautifulSoup
-from markdown import markdown
-
-
diff --git a/src/main.py b/src/main.py
deleted file mode 100644
index 1939bcb..0000000
--- a/src/main.py
+++ /dev/null
@@ -1,12 +0,0 @@
-#!/usr/bin/python3
-
-from flask import Flask, render_template
-
-application = Flask(__name__)
-app = application
-
-import projects
-import common
-
-# Load the homepage.
-
diff --git a/src/projects.py b/src/projects.py
index c9841f9..819b76b 100644
--- a/src/projects.py
+++ b/src/projects.py
@@ -1,12 +1,16 @@
 #!/usr/bin/python3
 
-from main import application as app
-import common
 from os import path
 import json
-from flask import render_template, Response, send_from_directory
+from flask import Flask, render_template, Response, send_from_directory
 from markdown import markdown
+import frontmatter
+from glob import glob
+from datetime import datetime
 
+
+application = Flask(__name__)
+app = application
 md_directory = path.join(path.realpath(path.dirname(__file__)), path.normpath('projects/'))
 
 @app.context_processor
@@ -38,7 +42,14 @@ def get_by_meta_key(directory: str, key: str, value: str):
 
 @app.route('/')
 def index():
-    return "Hello, World!"
+    articles_to_return = sorted(
+        get_all_posts(
+            md_directory), 
+            key=lambda d: d.metadata.get('date'),
+            reverse=True
+        )
+
+    return render_template('projects.html', articles=articles_to_return)
 
 @app.route('/error/<code>')
 def error(code):
@@ -80,7 +91,7 @@ def category(category):
         return Response(status=404)
 
     articles_to_return = sorted(
-        common.get_by_meta_key(
+        get_by_meta_key(
             md_directory, 'category', category), 
             key=lambda d: d.metadata.get('date'),
             reverse=True
@@ -93,7 +104,7 @@ def category(category):
 
 @app.route('/<category>/<article>')
 def article(category, article):
-    articles = [x for x in common.get_by_meta_key(md_directory, 'id', article) if x.metadata.get('category') == category]
+    articles = [x for x in get_by_meta_key(md_directory, 'id', article) if x.metadata.get('category') == category]
 
     if len(articles) == 0:
         return Response(status=404)
diff --git a/src/projects.wsgi b/src/projects.wsgi
index 2c855ac..92aa835 100644
--- a/src/projects.wsgi
+++ b/src/projects.wsgi
@@ -3,4 +3,4 @@
 import sys
 sys.path.append('/var/www/jc')
 
-from main import application
+from projects import application
diff --git a/src/static/style/desktop.css b/src/static/style/desktop.css
index 17dd22f..5b09dc6 100644
--- a/src/static/style/desktop.css
+++ b/src/static/style/desktop.css
@@ -36,4 +36,17 @@
     .gradient-right{
         background-image: linear-gradient(to left,  rgba(23, 22, 20, 1), rgba(23, 22, 20, 1), rgba(23, 22, 20, 0));
     }
+
+    #projects{
+        align-items: center;
+        justify-content: center;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+    
+    .project{
+        width: 20vw;
+        height: 25vw;
+        margin: 10px;
+    }
 }
\ No newline at end of file
diff --git a/src/static/style/mobile.css b/src/static/style/mobile.css
index 175d6e5..3b8ec82 100644
--- a/src/static/style/mobile.css
+++ b/src/static/style/mobile.css
@@ -90,4 +90,15 @@ footer h2, section h2{
 
 a{
     color: #e5e5e5;
+}
+
+#projects{
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.project{
+    width: 80vw;
+    border: 2px solid rgba(23, 22, 20, 1);
 }
\ No newline at end of file
diff --git a/src/templates/header.html b/src/templates/header.html
index 3c0d097..da80030 100644
--- a/src/templates/header.html
+++ b/src/templates/header.html
@@ -5,9 +5,9 @@
     <title>Jake Charman</title>
     <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Tourney:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400..900&family=Tourney:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="style/mobile.css" />
-    <link rel="stylesheet" href="style/desktop.css" />
-    <link rel="stylesheet" href="fonts/fontawesome/css/all.min.css" />
+    <link rel="stylesheet" href="/style/mobile.css" />
+    <link rel="stylesheet" href="/style/desktop.css" />
+    <link rel="stylesheet" href="/fonts/fontawesome/css/all.min.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 </head>
diff --git a/src/templates/projects.html b/src/templates/projects.html
index badd2e7..a53de1a 100644
--- a/src/templates/projects.html
+++ b/src/templates/projects.html
@@ -1,2 +1,19 @@
 {% include 'header.html' %}
+    <main>
+        <h2>Projects</h2>
+        <p>A selection of projects I've worked on.</p>
+        <section id="projects">
+            {% for row in articles %}
+            <div class="project">
+                {% if row.get('link') is not none %}
+                <a href="{{ row.link }}"><h2>{{ row.title }}</h2></a>
+                {% else %}
+                <a href="./{{ row.get('categpry', '.') }}/{{ row.id }}"><h2>{{ row.title }}</h2></a>
+                {% endif %}
+                <p class="article-description">{{ row.description }}</p>
+                <p class="article-date">{{ row.date | human_date }}</p>
+            </div>
+            {% endfor %}
+        </section>
+    </main>
 {% include 'footer.html' %}
\ No newline at end of file