Frontend work

src/common.py

@@ -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
-
-

src/main.py

@@ -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.
-

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)

src/projects.wsgi

@@ -3,4 +3,4 @@
 import sys
 sys.path.append('/var/www/jc')
 
-from main import application
+from projects import application

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;
+    }
 }

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);
 }

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>

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' %}