refactor

src/main.cpp

@@ -3,6 +3,7 @@
 #include "page/contact.hpp"
 #include "page/error_handler.hpp"
 #include "page/nav_targets.hpp"
+#include "page/projects.hpp"
 
 #include <iostream>
 #include <string>
@@ -16,6 +17,7 @@ int main()
 	Page::NavTargets::Init(svr);
 	Page::Contact::Init(svr);
 	Page::ErrorHandler::Init(svr);
+	Page::Projects::Init(svr);
 	
 	std::cout << "Listening on port 8080\n";
 	svr.listen("0.0.0.0", 8080);

src/page/nav_targets.cpp

@@ -9,24 +9,34 @@ using namespace Page;
 
 struct page_handler
 {
-	std::string path;
+	std::string content;
 
-	page_handler(std::string path) : path(path) {}
+	page_handler(std::string path)
+	{
+		content = Files::Load(path);
+	}
 
 	void operator()(const httplib::Request& req, httplib::Response& res)
 	{
-		std::string data_content = Files::Load(path);
+		if(req.has_header("hx-request"))
+		{
+			res.set_content(content, "text/html");
+			return;
+		}
+
 		std::string theme = Theme::Get(req);
-		std::string page = std::vformat(Root::DATA_INDEX, std::make_format_args(theme, data_content));
+		std::string page = std::vformat(Root::DATA_INDEX, std::make_format_args(theme, content));
 		res.set_content(page, "text/html");
 	}
 };
 
 void NavTargets::Init(httplib::Server &svr)
 {
-	svr.Get("/", page_handler("../static/public/html/projects.html"));
-	svr.Get("/projects", page_handler("../static/public/html/projects.html"));
-	svr.Get("/contact", page_handler("../static/public/html/contact.html"));
-	svr.Get("/about", page_handler("../static/public/html/about.html"));
+	page_handler projects_handler = page_handler("../static/projects.html");
+
+	svr.Get("/", projects_handler);
+	svr.Get("/projects", projects_handler);
+	svr.Get("/contact", page_handler("../static/contact.html"));
+	svr.Get("/about", page_handler("../static/about.html"));
 }
 

src/page/projects.cpp

@@ -0,0 +1,49 @@
+
+#include "projects.hpp"
+#include "../files.hpp"
+#include "root.hpp"
+#include "theme.hpp"
+#include <format>
+#include <regex>
+
+using namespace Page;
+
+static const std::string PROJECTS_INDEX = Files::Load("../static/projects.html");
+
+struct project_handler
+{
+	std::string content;
+	
+	project_handler()
+	{
+
+	}
+
+	project_handler(std::string path)
+	{
+		content = Files::Load(path);
+	}
+
+	void operator()(const httplib::Request& req, httplib::Response& res)
+	{
+		if(req.has_header("hx-request"))
+		{
+			res.set_content(content, "text/html");
+			return;
+		}
+		
+		std::string theme = Theme::Get(req);
+		std::string content_projects = std::regex_replace(PROJECTS_INDEX, std::regex("<!--PROJECTS_CONTENT-->"), content);
+		std::string page = std::vformat(Root::DATA_INDEX, std::make_format_args(theme, content_projects));
+		res.set_content(page, "text/html");
+	}
+};
+
+void Projects::Init(httplib::Server& svr)
+{
+	svr.Get("/projects/fast_nuclear_sim", project_handler("../static/projects/fast_nuclear_sim.html"));
+	svr.Get("/projects/goulds_webstore", project_handler("../static/projects/goulds_webstore.html"));
+	svr.Get("/projects/project_zombie", project_handler("../static/projects/project_zombie.html"));
+	svr.Get("/projects/this_portfolio_website", project_handler("../static/projects/this_portfolio_website.html"));
+}
+

src/page/projects.hpp

@@ -0,0 +1,12 @@
+
+#pragma once
+
+#include "../cpp-httplib/httplib.h"
+
+namespace Page::Projects
+{
+
+void Init(httplib::Server& srv);
+
+};
+

static/index.html

@@ -12,9 +12,9 @@
 	<div id="root-head">
 		<ul class="navbar">
 			<li class="visually-hidden"><a href="#main-content">Skip to main content</a></li>
-			<li><button hx-get="/static/html/projects.html" hx-target="#main-content" hx-push-url="/">Projects</button></li>
-			<li><button hx-get="/static/html/contact.html" hx-target="#main-content" hx-push-url="/contact">Contact</button></li>
-			<li><button hx-get="/static/html/about.html" hx-target="#main-content" hx-push-url="/about">About</button></li>
+			<li><button hx-get="/" hx-target="#main-content" hx-push-url="/">Projects</button></li>
+			<li><button hx-get="/contact" hx-target="#main-content" hx-push-url="/contact">Contact</button></li>
+			<li><button hx-get="/about" hx-target="#main-content" hx-push-url="/about">About</button></li>
 			<li class="right"><button id="theme-button" class="button-emoji"></button></li>
 		</ul>
 		<div id="root-body">

static/projects.html

@@ -0,0 +1,19 @@
+
+<title>Jays Portfolio</title>
+
+<h1>Welcome to my portfolio website :)</h1>
+<p>
+	Here you can see the (more notable) projects I have created and/or worked on, or click/activate all the buttons to find out more about me.
+</p>
+<p>
+	Also please feel free to check out my <a href="https://github.com/jsrobson10/" target="_blank">GitHub</a> and <a href="https://git.onewaycoding.com/jay/" target="_blank">Gitea</a>
+	profiles if you would like to see the projects that aren't on here. 
+</p>
+<ul>
+	<li><button hx-get="/projects/fast_nuclear_sim" hx-push-url="/projects/fast_nuclear_sim" class="button-link" hx-target="#projects">Fast Nuclear Sim</button></li>
+	<li><button hx-get="/projects/goulds_webstore" hx-push-url="/projects/goulds_webstore" class="button-link" hx-target="#projects">Goulds Webstore</button></li>
+	<li><button hx-get="/projects/project_zombie" hx-push-url="/projects/project_zombie" class="button-link" hx-target="#projects">Project Zombie</button></li>
+	<li><button hx-get="/projects/this_portfolio_website" hx-push-url="/projects/this_portfolio_website" class="button-link" hx-target="#projects">This Portfolio Website</button></li>
+</ul>
+<div id="projects"><!--PROJECTS_CONTENT--></div>
+

static/projects/goulds_webstore.html

@@ -22,6 +22,6 @@
 </p>
 <h2>Links</h2>
 <ul>
-	<li><a href="https://store.gouldsnaturalmedicine.com.au/" target="_blank">Goulds Webstore Website</a></li>
+	<li><a href="https://store.gouldsnaturalmedicine.com.au/" target="_blank">Goulds Webstore</a></li>
 </ul>
 

static/public/css/style.css

@@ -14,6 +14,9 @@ p, label, th, td, li {
 
 img {
 	width: calc(min(100%, 800px));
+}
+
+img, iframe {
 	border-radius: 4px;
 	border-style: none;
 }
@@ -106,6 +109,21 @@ html, body {
 	padding: 0;
 }
 
+.responsive-iframe {
+	width: 100%;
+	height: 0;
+	padding-top: 56.25%;
+	position: relative;
+}
+
+.responsive-iframe iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
 #root-head {
 	margin: 0 auto;
 	padding: 0;

static/public/html/projects.html

@@ -1,19 +0,0 @@
-
-<title>Jays Portfolio</title>
-
-<h1>Welcome to my portfolio website :)</h1>
-<p>
-	Here you can see the (more notable) projects I have created and/or worked on, or click/activate all the buttons to find out more about me.
-</p>
-<p>
-	Also please feel free to check out my <a href="https://github.com/jsrobson10/" target="_blank">GitHub</a> and <a href="https://git.onewaycoding.com/jay/" target="_blank">Gitea</a>
-	profiles if you would like to see the projects that aren't on here. 
-</p>
-<ul>
-	<li><button hx-get="/static/html/projects/fast_nuclear_sim.html" class="button-link" hx-target="#projects">Fast Nuclear Sim</button></li>
-	<li><button hx-get="/static/html/projects/goulds_webstore.html" class="button-link" hx-target="#projects">Goulds Webstore</button></li>
-	<li><button hx-get="/static/html/projects/project_zombie.html" class="button-link" hx-target="#projects">Project Zombie</button></li>
-	<li><button hx-get="/static/html/projects/this_portfolio_website.html" class="button-link" hx-target="#projects">This Portfolio Website</button></li>
-</ul>
-<div id="projects"></div>
-