Dockerfile

@@ -1,2 +1,8 @@
 FROM httpd:2.4 
-COPY --chown=apache:apache src/ /usr/local/apache2/htdocs
+RUN apt-get update
+RUN apt-get -y install libapache2-mod-wsgi-py3 python3 python3-pip
+COPY src/requirements.txt /var/www/jc/requirements.txt
+RUN pip3 install  -r /var/www/jc/requirements.txt || pip3 install --break-system-packages -r /var/www/jc/requirements.txt
+COPY --chown=www-data:www-data config/httpd.conf /usr/local/apache2/conf/httpd.conf
+COPY --chown=www-data:www-data src/ /var/www/jc
+RUN httpd -t

config/httpd.conf

@@ -0,0 +1,440 @@
+#
+# This is the main Apache HTTP server configuration file.  It contains the
+# configuration directives that give the server its instructions.
+# See <URL:http://httpd.apache.org/docs/2.4/> for detailed information.
+# In particular, see 
+# <URL:http://httpd.apache.org/docs/2.4/mod/directives.html>
+# for a discussion of each configuration directive.
+#
+# Do NOT simply read the instructions in here without understanding
+# what they do.  They're here only as hints or reminders.  If you are unsure
+# consult the online docs. You have been warned.  
+#
+# Configuration and logfile names: If the filenames you specify for many
+# of the server's control files begin with "/" (or "drive:/" for Win32), the
+# server will use that explicit path.  If the filenames do *not* begin
+# with "/", the value of ServerRoot is prepended -- so "logs/access_log"
+# with ServerRoot set to "/usr/local/apache2" will be interpreted by the
+# server as "/usr/local/apache2/logs/access_log", whereas "/logs/access_log" 
+# will be interpreted as '/logs/access_log'.
+
+#
+# ServerRoot: The top of the directory tree under which the server's
+# configuration, error, and log files are kept.
+#
+# Do not add a slash at the end of the directory path.  If you point
+# ServerRoot at a non-local disk, be sure to specify a local disk on the
+# Mutex directive, if file-based mutexes are used.  If you wish to share the
+# same ServerRoot for multiple httpd daemons, you will need to change at
+# least PidFile.
+#
+ServerRoot "/usr/local/apache2"
+
+#
+# Mutex: Allows you to set the mutex mechanism and mutex file directory
+# for individual mutexes, or change the global defaults
+#
+# Uncomment and change the directory if mutexes are file-based and the default
+# mutex file directory is not on a local disk or is not appropriate for some
+# other reason.
+#
+# Mutex default:logs
+
+#
+# Listen: Allows you to bind Apache to specific IP addresses and/or
+# ports, instead of the default. See also the <VirtualHost>
+# directive.
+#
+# Change this to Listen on specific IP addresses as shown below to 
+# prevent Apache from glomming onto all bound IP addresses.
+#
+#Listen 12.34.56.78:80
+Listen 80
+
+#
+# Dynamic Shared Object (DSO) Support
+#
+# To be able to use the functionality of a module which was built as a DSO you
+# have to place corresponding `LoadModule' lines at this location so the
+# directives contained in it are actually available _before_ they are used.
+# Statically compiled modules (those listed by `httpd -l') do not need
+# to be loaded here.
+#
+# Example:
+# LoadModule foo_module modules/mod_foo.so
+#
+LoadModule mpm_event_module modules/mod_mpm_event.so
+#LoadModule mpm_prefork_module modules/mod_mpm_prefork.so
+#LoadModule mpm_worker_module modules/mod_mpm_worker.so
+LoadModule authn_file_module modules/mod_authn_file.so
+#LoadModule authn_dbm_module modules/mod_authn_dbm.so
+#LoadModule authn_anon_module modules/mod_authn_anon.so
+#LoadModule authn_dbd_module modules/mod_authn_dbd.so
+#LoadModule authn_socache_module modules/mod_authn_socache.so
+LoadModule authn_core_module modules/mod_authn_core.so
+LoadModule authz_host_module modules/mod_authz_host.so
+LoadModule authz_groupfile_module modules/mod_authz_groupfile.so
+LoadModule authz_user_module modules/mod_authz_user.so
+#LoadModule authz_dbm_module modules/mod_authz_dbm.so
+#LoadModule authz_owner_module modules/mod_authz_owner.so
+#LoadModule authz_dbd_module modules/mod_authz_dbd.so
+LoadModule authz_core_module modules/mod_authz_core.so
+#LoadModule authnz_ldap_module modules/mod_authnz_ldap.so
+#LoadModule authnz_fcgi_module modules/mod_authnz_fcgi.so
+LoadModule access_compat_module modules/mod_access_compat.so
+LoadModule auth_basic_module modules/mod_auth_basic.so
+#LoadModule auth_form_module modules/mod_auth_form.so
+#LoadModule auth_digest_module modules/mod_auth_digest.so
+#LoadModule allowmethods_module modules/mod_allowmethods.so
+#LoadModule isapi_module modules/mod_isapi.so
+#LoadModule file_cache_module modules/mod_file_cache.so
+#LoadModule cache_module modules/mod_cache.so
+#LoadModule cache_disk_module modules/mod_cache_disk.so
+#LoadModule cache_socache_module modules/mod_cache_socache.so
+#LoadModule socache_shmcb_module modules/mod_socache_shmcb.so
+#LoadModule socache_dbm_module modules/mod_socache_dbm.so
+#LoadModule socache_memcache_module modules/mod_socache_memcache.so
+#LoadModule socache_redis_module modules/mod_socache_redis.so
+#LoadModule watchdog_module modules/mod_watchdog.so
+#LoadModule macro_module modules/mod_macro.so
+#LoadModule dbd_module modules/mod_dbd.so
+#LoadModule bucketeer_module modules/mod_bucketeer.so
+#LoadModule dumpio_module modules/mod_dumpio.so
+#LoadModule echo_module modules/mod_echo.so
+#LoadModule example_hooks_module modules/mod_example_hooks.so
+#LoadModule case_filter_module modules/mod_case_filter.so
+#LoadModule case_filter_in_module modules/mod_case_filter_in.so
+#LoadModule example_ipc_module modules/mod_example_ipc.so
+#LoadModule buffer_module modules/mod_buffer.so
+#LoadModule data_module modules/mod_data.so
+#LoadModule ratelimit_module modules/mod_ratelimit.so
+LoadModule reqtimeout_module modules/mod_reqtimeout.so
+#LoadModule ext_filter_module modules/mod_ext_filter.so
+#LoadModule request_module modules/mod_request.so
+#LoadModule include_module modules/mod_include.so
+LoadModule filter_module modules/mod_filter.so
+#LoadModule reflector_module modules/mod_reflector.so
+#LoadModule substitute_module modules/mod_substitute.so
+#LoadModule sed_module modules/mod_sed.so
+#LoadModule charset_lite_module modules/mod_charset_lite.so
+LoadModule deflate_module modules/mod_deflate.so
+#LoadModule xml2enc_module modules/mod_xml2enc.so
+#LoadModule proxy_html_module modules/mod_proxy_html.so
+#LoadModule brotli_module modules/mod_brotli.so
+LoadModule mime_module modules/mod_mime.so
+#LoadModule ldap_module modules/mod_ldap.so
+LoadModule log_config_module modules/mod_log_config.so
+#LoadModule log_debug_module modules/mod_log_debug.so
+#LoadModule log_forensic_module modules/mod_log_forensic.so
+#LoadModule logio_module modules/mod_logio.so
+#LoadModule lua_module modules/mod_lua.so
+LoadModule env_module modules/mod_env.so
+#LoadModule mime_magic_module modules/mod_mime_magic.so
+#LoadModule cern_meta_module modules/mod_cern_meta.so
+#LoadModule expires_module modules/mod_expires.so
+LoadModule headers_module modules/mod_headers.so
+#LoadModule ident_module modules/mod_ident.so
+#LoadModule usertrack_module modules/mod_usertrack.so
+#LoadModule unique_id_module modules/mod_unique_id.so
+LoadModule setenvif_module modules/mod_setenvif.so
+LoadModule version_module modules/mod_version.so
+#LoadModule remoteip_module modules/mod_remoteip.so
+#LoadModule proxy_module modules/mod_proxy.so
+#LoadModule proxy_connect_module modules/mod_proxy_connect.so
+#LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
+#LoadModule proxy_http_module modules/mod_proxy_http.so
+#LoadModule proxy_fcgi_module modules/mod_proxy_fcgi.so
+#LoadModule proxy_scgi_module modules/mod_proxy_scgi.so
+#LoadModule proxy_uwsgi_module modules/mod_proxy_uwsgi.so
+#LoadModule proxy_fdpass_module modules/mod_proxy_fdpass.so
+#LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so
+#LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
+#LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
+#LoadModule proxy_express_module modules/mod_proxy_express.so
+#LoadModule proxy_hcheck_module modules/mod_proxy_hcheck.so
+#LoadModule session_module modules/mod_session.so
+#LoadModule session_cookie_module modules/mod_session_cookie.so
+#LoadModule session_crypto_module modules/mod_session_crypto.so
+#LoadModule session_dbd_module modules/mod_session_dbd.so
+#LoadModule slotmem_shm_module modules/mod_slotmem_shm.so
+#LoadModule slotmem_plain_module modules/mod_slotmem_plain.so
+#LoadModule ssl_module modules/mod_ssl.so
+#LoadModule optional_hook_export_module modules/mod_optional_hook_export.so
+#LoadModule optional_hook_import_module modules/mod_optional_hook_import.so
+#LoadModule optional_fn_import_module modules/mod_optional_fn_import.so
+#LoadModule optional_fn_export_module modules/mod_optional_fn_export.so
+#LoadModule dialup_module modules/mod_dialup.so
+#LoadModule http2_module modules/mod_http2.so
+#LoadModule proxy_http2_module modules/mod_proxy_http2.so
+#LoadModule md_module modules/mod_md.so
+#LoadModule lbmethod_byrequests_module modules/mod_lbmethod_byrequests.so
+#LoadModule lbmethod_bytraffic_module modules/mod_lbmethod_bytraffic.so
+#LoadModule lbmethod_bybusyness_module modules/mod_lbmethod_bybusyness.so
+#LoadModule lbmethod_heartbeat_module modules/mod_lbmethod_heartbeat.so
+LoadModule unixd_module modules/mod_unixd.so
+#LoadModule heartbeat_module modules/mod_heartbeat.so
+#LoadModule heartmonitor_module modules/mod_heartmonitor.so
+#LoadModule dav_module modules/mod_dav.so
+LoadModule status_module modules/mod_status.so
+LoadModule autoindex_module modules/mod_autoindex.so
+#LoadModule asis_module modules/mod_asis.so
+#LoadModule info_module modules/mod_info.so
+#LoadModule suexec_module modules/mod_suexec.so
+<IfModule !mpm_prefork_module>
+	#LoadModule cgid_module modules/mod_cgid.so
+</IfModule>
+<IfModule mpm_prefork_module>
+	#LoadModule cgi_module modules/mod_cgi.so
+</IfModule>
+#LoadModule dav_fs_module modules/mod_dav_fs.so
+#LoadModule dav_lock_module modules/mod_dav_lock.so
+#LoadModule vhost_alias_module modules/mod_vhost_alias.so
+#LoadModule negotiation_module modules/mod_negotiation.so
+LoadModule dir_module modules/mod_dir.so
+#LoadModule imagemap_module modules/mod_imagemap.so
+#LoadModule actions_module modules/mod_actions.so
+#LoadModule speling_module modules/mod_speling.so
+#LoadModule userdir_module modules/mod_userdir.so
+LoadModule alias_module modules/mod_alias.so
+#LoadModule rewrite_module modules/mod_rewrite.somod_wsgi-express start-server
+
+LoadModule wsgi_module /usr/lib/apache2/modules/mod_wsgi.so
+
+
+<IfModule unixd_module>
+#
+# If you wish httpd to run as a different user or group, you must run
+# httpd as root initially and it will switch.  
+#
+# User/Group: The name (or #number) of the user/group to run httpd as.
+# It is usually good practice to create a dedicated user and group for
+# running httpd, as with most system services.
+#
+User www-data
+Group www-data
+
+</IfModule>
+
+# 'Main' server configuration
+#
+# The directives in this section set up the values used by the 'main'
+# server, which responds to any requests that aren't handled by a
+# <VirtualHost> definition.  These values also provide defaults for
+# any <VirtualHost> containers you may define later in the file.
+#
+# All of these directives may appear inside <VirtualHost> containers,
+# in which case these default settings will be overridden for the
+# virtual host being defined.
+#
+
+#
+# ServerAdmin: Your address, where problems with the server should be
+# e-mailed.  This address appears on some server-generated pages, such
+# as error documents.  e.g. admin@your-domain.com
+#
+ServerAdmin jake@nitrousjunkie.com
+
+#
+# ServerName gives the name and port that the server uses to identify itself.
+# This can often be determined automatically, but we recommend you specify
+# it explicitly to prevent problems during startup.
+#
+# If your host doesn't have a registered DNS name, enter its IP address here.
+#
+#ServerName www.example.com:80
+
+#
+# Deny access to the entirety of your server's filesystem. You must
+# explicitly permit access to web content directories in other 
+# <Directory> blocks below.
+#
+<Directory />
+    AllowOverride none
+    Require all denied
+</Directory>
+
+#
+# DirectoryIndex: sets the file that Apache will serve if a directory
+# is requested.
+#
+<IfModule dir_module>
+    DirectoryIndex index.html
+</IfModule>
+
+#
+# The following lines prevent .htaccess and .htpasswd files from being 
+# viewed by Web clients. 
+#
+<Files ".ht*">
+    Require all denied
+</Files>
+
+#
+# ErrorLog: The location of the error log file.
+# If you do not specify an ErrorLog directive within a <VirtualHost>
+# container, error messages relating to that virtual host will be
+# logged here.  If you *do* define an error logfile for a <VirtualHost>
+# container, that host's errors will be logged there and not here.
+#
+ErrorLog /proc/self/fd/2
+
+#
+# LogLevel: Control the number of messages logged to the error_log.
+# Possible values include: debug, info, notice, warn, error, crit,
+# alert, emerg.
+#
+LogLevel warn
+
+<IfModule log_config_module>
+    #
+    # The following directives define some format nicknames for use with
+    # a CustomLog directive (see below).
+    #
+    LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
+    LogFormat "%h %l %u %t \"%r\" %>s %b" common
+
+    <IfModule logio_module>
+      # You need to enable mod_logio.c to use %I and %O
+      LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio
+    </IfModule>
+
+    #
+    # The location and format of the access logfile (Common Logfile Format).
+    # If you do not define any access logfiles within a <VirtualHost>
+    # container, they will be logged here.  Contrariwise, if you *do*
+    # define per-<VirtualHost> access logfiles, transactions will be
+    # logged therein and *not* in this file.
+    #
+    CustomLog /proc/self/fd/1 common
+
+    #
+    # If you prefer a logfile with access, agent, and referer information
+    # (Combined Logfile Format) you can use the following directive.
+    #
+    #CustomLog "logs/access_log" combined
+</IfModule>
+
+<IfModule alias_module>
+    #
+    # Redirect: Allows you to tell clients about documents that used to 
+    # exist in your server's namespace, but do not anymore. The client 
+    # will make a new request for the document at its new location.
+    # Example:
+    # Redirect permanent /foo http://www.example.com/bar
+
+    #
+    # Alias: Maps web paths into filesystem paths and is used to
+    # access content that does not live under the DocumentRoot.
+    # Example:
+    # Alias /webpath /full/filesystem/path
+    #
+    # If you include a trailing / on /webpath then the server will
+    # require it to be present in the URL.  You will also likely
+    # need to provide a <Directory> section to allow access to
+    # the filesystem path.
+
+    #
+    # ScriptAlias: This controls which directories contain server scripts. 
+    # ScriptAliases are essentially the same as Aliases, except that
+    # documents in the target directory are treated as applications and
+    # run by the server when requested rather than as documents sent to the
+    # client.  The same rules about trailing "/" apply to ScriptAlias
+    # directives as to Alias.
+    #
+    ScriptAlias /cgi-bin/ "/usr/local/apache2/cgi-bin/"
+
+</IfModule>
+
+<IfModule cgid_module>
+    #
+    # ScriptSock: On threaded servers, designate the path to the UNIX
+    # socket used to communicate with the CGI daemon of mod_cgid.
+    #
+    #Scriptsock cgisock
+</IfModule>
+
+
+<IfModule headers_module>
+    #
+    # Avoid passing HTTP_PROXY environment to CGI's on this or any proxied
+    # backend servers which have lingering "httpoxy" defects.
+    # 'Proxy' request header is undefined by the IETF, not listed by IANA
+    #
+    RequestHeader unset Proxy early
+</IfModule>
+
+<IfModule mime_module>
+    #
+    # TypesConfig points to the file containing the list of mappings from
+    # filename extension to MIME-type.
+    #
+    TypesConfig conf/mime.types
+
+    #
+    # AddType allows you to add to or override the MIME configuration
+    # file specified in TypesConfig for specific file types.
+    #
+    #AddType application/x-gzip .tgz
+    #
+    # AddEncoding allows you to have certain browsers uncompress
+    # information on the fly. Note: Not all browsers support this.
+    #
+    #AddEncoding x-compress .Z
+    #AddEncoding x-gzip .gz .tgz
+    #
+    # If the AddEncoding directives above are commented-out, then you
+    # probably should define those extensions to indicate media types:
+    #
+    AddType application/x-compress .Z
+    AddType application/x-gzip .gz .tgz
+
+    #
+    # AddHandler allows you to map certain file extensions to "handlers":
+    # actions unrelated to filetype. These can be either built into the server
+    # or added with the Action directive (see below)
+    #
+    # To use CGI scripts outside of ScriptAliased directories:
+    # (You will also need to add "ExecCGI" to the "Options" directive.)
+    #
+    #AddHandler cgi-script .cgi
+
+    # For type maps (negotiated resources):
+    #AddHandler type-map var
+
+    #
+    # Filters allow you to process content before it is sent to the client.
+    #
+    # To parse .shtml files for server-side includes (SSI):
+    # (You will also need to add "Includes" to the "Options" directive.)
+    #
+    #AddType text/html .shtml
+    #AddOutputFilter INCLUDES .shtml
+</IfModule>
+
+AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
+# DocumentRoot /var/www/jc/
+WSGIErrorOverride On
+ErrorDocument 400 /error/400
+ErrorDocument 403 /error/403
+ErrorDocument 404 /error/404
+#ErrorDocument 418 /error/418
+ErrorDocument 500 /error/500
+ErrorDocument 503 /error/503
+ErrorDocument 505 /error/505
+
+WSGISocketPrefix /var/run/wsgi
+
+WSGIDaemonProcess jc-wsgi user=www-data group=www-data threads=5
+WSGIProcessGroup jc-wsgi
+WSGIScriptAlias / /var/www/jc/projects.wsgi
+
+<Directory /var/www/jc>
+    WSGIProcessGroup jc-wsgi
+    WSGIApplicationGroup %{GLOBAL}
+    Require all granted
+</Directory>
+
+<Files jc.wsgi>
+   Require all granted
+</Files>
+

src/index.py

@@ -0,0 +1,36 @@
+#!/usr/bin/python3
+
+from flask import Flask, render_template, Response
+
+app = Flask(__name__)
+
+import projects
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/error/<code>')
+def error(code):
+    error_definitions = {
+        400: 'Bad Request',
+        403: 'Forbidden',
+        404: 'Page Not Found',
+        418: 'I\'m a Teapot',
+        500: 'Internal Server Error',
+        503: 'Service Temporarily Unavailable',
+        505: 'HTTP Version Not Supported'
+    }
+    error_desc = {
+        400: 'Sorry, I didn\'t understand your request.',
+        403: 'Sorry, you aren\'t allowed to view this page.',
+        404: 'Sorry, that page doesn\'t exist.',
+        418: 'I can\'t brew coffee as I am, in fact, a teapot.',
+        500: 'Something went wrong on my end.',
+        503: 'My website is experiencing some issues and will be back shortly.',
+        505: 'Your browser tried to use a HTTP version I don\'t support. Check it is up to date.'
+    }
+
+    return render_template('error.html', 
+                           error=f'{code}: {error_definitions.get(int(code))}',
+                           description=error_desc.get(int(code)))

src/projects.py

@@ -0,0 +1,125 @@
+#!/usr/bin/python3
+
+from os import path
+import json
+from flask import Flask, render_template, Response, send_from_directory
+from markdown import markdown
+import frontmatter
+from glob import glob
+from datetime import datetime
+from index import app
+from bs4 import BeautifulSoup
+
+md_directory = path.join(path.realpath(path.dirname(__file__)), path.normpath('projects/'))
+
+@app.context_processor
+def processor():
+    def get_excerpt(post):
+        html = markdown(post.content)
+        post_soup = BeautifulSoup(html, 'html.parser')
+        all_text = ' '.join([x.get_text() for x in post_soup.findAll('p')])
+        return ' '.join(all_text.split()[:200])
+    return dict(get_excerpt=get_excerpt)
+
+@app.template_filter('category_title')
+def category_title(category_id: str) -> str:
+    with open(path.join(md_directory, 'categories.json')) as categories_file:
+        categories = json.load(categories_file)
+
+    return categories.get(category_id).get('title', '')
+
+@app.template_filter('human_date')
+def human_date(iso_date: str) -> str:
+    try:
+        return datetime.fromisoformat(str(iso_date)).strftime('%A %d %B %Y')
+    except ValueError:
+        return iso_date
+
+@app.template_filter('to_html')
+def to_html(content):
+    return markdown(content)
+
+def get_all_posts(directory: str) -> list:
+    abs_paths = [path.join(directory, x) for x in glob(f'{directory}/*.md')]
+    return [frontmatter.load(x) for x in abs_paths]
+
+def get_by_meta_key(directory: str, key: str, value: str):
+    return [x for x in get_all_posts(directory) if x.get(key) == value or type(x.get(key, [])) is list and value in x.get(key, [])]
+
+@app.route('/projects/')
+def projects():
+    articles_to_return = sorted(
+        get_all_posts(
+            md_directory), 
+            key=lambda d: d.metadata.get('date'),
+            reverse=True
+        )
+
+    if len(articles_to_return) < 1:
+        return render_template('error.html',
+                               error='There\'s nothing here... yet.',
+                               description='I\'m still working on this page. Check back soon for some content.')
+    try:
+        with open(path.join(md_directory, 'categories.json')) as categories_file:
+            categories = json.load(categories_file)
+    except FileNotFoundError:
+        return render_template('error.html',
+                               error='There\'s nothing here... yet.',
+                               description='I\'m still working on this page. Check back soon for some content.')
+
+    return render_template('projects.html',
+                           articles=articles_to_return,
+                           all_categories=categories,
+                           title='Projects',
+                           description='A selection of projects I\'ve been involved in')
+
+@app.route('/projects/category/<category>/')
+def category(category):
+    try:
+        with open(path.join(md_directory, 'categories.json')) as categories_file:
+            categories = json.load(categories_file)
+        the_category = categories.get(category)
+    except FileNotFoundError:
+        return render_template('error.html',
+                               error='There\'s nothing here... yet.',
+                               description='I\'m still working on this page. Check back soon for some content.')
+
+    if the_category is None:
+        return Response(status=404)
+
+    articles_to_return = sorted(
+        get_by_meta_key(
+            md_directory, 'categories', category), 
+            key=lambda d: d.metadata.get('date'),
+            reverse=True
+        )
+
+    if len(articles_to_return) < 1:
+        return render_template('error.html',
+                               error='There\'s nothing here... yet.',
+                               description='I\'m still working on this page. Check back soon for some content.')
+
+    return render_template('projects.html', articles=articles_to_return,
+                           title=the_category['title'], 
+                           description=the_category['long_description'],
+                           page_title=f'{the_category["title"]} - ',
+                           all_categories=categories,
+                           current_category=category)
+
+@app.route('/projects/<article>')
+def article(article):
+    articles = get_by_meta_key(md_directory, 'id', article)
+
+    if len(articles) == 0:
+        return Response(status=404)
+    if len(articles) > 1:
+        return Response(status=500)
+
+    the_article = articles[0]
+    return render_template('article.html', post=markdown(the_article.content), 
+                           metadata=the_article.metadata,
+                           page_title=f'{the_article.metadata["title"]} - ')
+
+@app.route('/projects/image/<image>')
+def image(image):
+    return send_from_directory(path.join(md_directory, 'images'), image)

src/projects.wsgi

@@ -0,0 +1,6 @@
+#!/usr/bin/python3
+
+import sys
+sys.path.append('/var/www/jc')
+
+from index import app as application

src/requirements.txt

@@ -0,0 +1,5 @@
+flask>=2.2.3
+flask-markdown>=0.3
+markdown>=3.4.1
+beautifulsoup4>=4.11.1
+python-frontmatter>=1.1.0

src/static/js/filter_projects.js

@@ -0,0 +1,10 @@
+function update_filter() {
+    var project_filter = document.getElementById("filter_category");
+    console.log(project_filter.value)
+    if (project_filter.value == 'all') {
+        window.location.href = '/projects';
+    }
+    else {
+        window.location.href = '/projects/category/' + project_filter.value;
+    }
+}

src/static/js/update_copyright.js

@@ -0,0 +1,5 @@
+window.onload = function () {
+    var current_year = new Date().getFullYear();
+    var copyright = document.getElementById('cr-year');
+    copyright.textContent = current_year;
+}

src/static/style/desktop.css

@@ -36,4 +36,22 @@
     .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;
+    }
+
+    #top-nav{
+        float: right;
+        width: fit-content;
+        padding-right: 20px;
+    }
 }

src/static/style/mobile.css

@@ -2,9 +2,10 @@ body{
     margin: 0;
     color: #e5e5e5;
     font-family: "Noto Sans", sans-serif;
+    background-color: rgba(23, 22, 20, 1);
 }
 
-h1, h2{
+h1, h2, h3{
     font-family: "Orbitron", sans-serif;
     font-optical-sizing: auto;
     font-weight: 500;
@@ -12,17 +13,23 @@ h1, h2{
 }
 
 header{
-    width: 100%;
-    height: 25vh;
-    display: flex;
-    align-items: center;
     background-color: 4c4c4c;
+    height: 25vh;
+    width: 100%;
 }
 
 footer{
     background-color: 4c4c4c;
-    padding: 30px;
+    display: flex;
-    text-align: center;
+    justify-content: center;
+    align-items: center;
+    height: 10vh;
+}
+
+#logo-container{
+    width: 100%;
+    justify-content: center;
+    display: flex;
 }
 
 #logo{
@@ -30,6 +37,10 @@ footer{
     margin: 0 auto 0 auto;
 }
 
+#logo>a{
+    text-decoration: none;
+}
+
 footer h2, section h2{
     margin: 0;
 }
@@ -90,4 +101,70 @@ footer h2, section h2{
 
 a{
     color: #e5e5e5;
+}
+
+#projects{
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.project{
+    width: 80vw;
+    border: 2px solid #e5e5e5;
+    margin: 10px;
+}
+
+.project-thumb{
+    max-width: 100%;
+    max-height: 100%;
+}
+
+#filter {
+    float: right;
+}
+
+#top-nav{
+    width: 100%;
+    text-align: center;
+    padding-bottom: 30px;
+    padding-top: 20px
+}
+
+#top-nav>a{
+    text-decoration: none;
+    padding: 0 10px 0 10px;
+    font-weight: bold;
+}
+
+#top-nav>a:hover{
+    text-decoration: underline;
+}
+
+#error-container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 65vh;
+}
+
+#error{
+    text-align: center;
+}
+
+#project-main{
+    padding: 0 10px 0 10px;
+    min-height: 65vh;
+}
+
+.project-text{
+    padding: 10px;
+}
+
+.article-category{
+    text-decoration: none;
+}
+
+.article-category:hover{
+    text-decoration: underline;
 }

src/templates/article.html

@@ -0,0 +1,10 @@
+{% include 'header.html' %}
+<main>
+    <section id="tech-article">
+        <h1>{{ metadata.title}} </h1>
+        <p>{{ metadata.date | human_date }}</p>
+        <hr />
+        {{post|safe}}
+    </section>
+</main>
+{% include 'footer.html' %}

src/templates/error.html

@@ -0,0 +1,11 @@
+{% include 'header.html' %}
+<main>
+    <div id="error-container">
+        <div id='error'>
+            <h2>{{ error }}</h2>
+            <p>{{ description }}</p>
+            <a href='/'>Click here to return to the homepage</a>
+        </div>
+    </div>
+</main>
+{% include 'footer.html' %}

src/templates/footer.html

@@ -0,0 +1,5 @@
+<footer>
+    <p>&copy <span id="cr-year"></span> Jake Charman. This site uses cookies.</p>
+</footer>
+</body>
+</html>

src/templates/header.html

@@ -0,0 +1,27 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ page_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="/static/style/mobile.css" />
+    <link rel="stylesheet" href="/static/style/desktop.css" />
+    <link rel="stylesheet" href="/static/fonts/fontawesome/css/all.min.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <script src="/static/js/filter_projects.js"></script>
+    <script src="/static/js/update_copyright.js"></script>
+</head>
+<body>
+    <header>
+        <nav id="top-nav">
+            <a href="/">About</a>
+            <a href="/projects/">Projects</a>
+        </nav>
+        <div id="logo-container">
+            <div id="logo">
+                <a href='/'><h1>Jake Charman</h1></a>
+            </div>
+        </div>
+    </header>

src/templates/index.html

@@ -1,22 +1,4 @@
-<html lang="en">
+{% include 'header.html' %}
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <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="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-</head>
-<body>
-    <header>
-        <div id="logo">
-            <h1>Jake Charman</h1>
-        </div>
-    </header>
     <main>
         <section id="technology">
             <div class="gradient gradient-left">
@@ -60,8 +42,4 @@
             </div>
         </section>
     </main>
-    <footer>
+{% include 'footer.html' %}
-        <p>&copy 2024 Jake Charman. This site uses cookies.</p>
-    </footer>
-</body>
-</html>

src/templates/projects.html

@@ -0,0 +1,39 @@
+{% include 'header.html' %}
+<main id="project-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>
+    <section id="projects">
+        {% for row in articles %}
+        <div class="project">
+            <img class="project-thumb" src="/projects/image/{{ row.image }}">
+            <div class="project-text">
+                {% if row.get('link') is not none %}
+                <a href="{{ row.link }}">
+                    <h3>{{ row.title }}</h3>
+                </a>
+                {% else %}
+                <a href="/projects/{{ row.id }}">
+                    <h3>{{ row.title }}</h3>
+                </a>
+                {% endif %}
+                <p class="article-description">{{ row.description }}</p>
+                <p class="article-date">{{ row.date | human_date }}</p>
+                {% for category in row.categories %}
+                <a class="article-category" href="/projects/category/{{ category }}">{{ category | category_title }}{{ ", " if not loop.last }}</loop></a>
+                {% endfor %}
+            </div>
+        </div>
+        {% endfor %}
+    </section>
+</main>
+{% include 'footer.html' %}