jay
/
Portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

made theme use javascript

This commit is contained in:
Jay Robson 2024-03-10 14:01:57 +11:00
parent 058bcd5c65
commit ba2da4dbfe
5 changed files with 49 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/main.cpp
View File

@ -13,20 +13,13 @@ std::string data_error = Files::load("../static/error.html");
httplib::Server svr; httplib::Server svr;
std::string theme_light = R"( const std::string PATH_LIGHT = "/static/css/light.css";
<div><link rel="stylesheet" href="/static/css/light.css"></div> const std::string PATH_DARK = "/static/css/dark.css";
<button hx-post="/theme/dark" hx-target="#theme-target" aria-label="Light mode">&#x1F31E</button>
)";
std::string theme_dark = R"(
<div><link rel="stylesheet" href="/static/css/dark.css"></div>
<button hx-post="/theme/light" hx-target="#theme-target" aria-label="Dark mode">&#x1F319</button>
)";
std::string get_theme(const httplib::Request& req) std::string get_theme(const httplib::Request& req)
{ {
std::string cookies = req.get_header_value("Cookie"); std::string cookies = req.get_header_value("Cookie");
return regex_search(cookies, std::regex("(^|(; *))theme=light")) ? theme_light : theme_dark; return regex_search(cookies, std::regex("(^|;) *theme=light")) ? PATH_LIGHT : PATH_DARK;
} }
struct page_handler struct page_handler
@ -83,8 +76,6 @@ int main()
svr.Get("/about", page_handler("../static/public/html/about.html")); svr.Get("/about", page_handler("../static/public/html/about.html"));
svr.Post("/contact", post_contact); svr.Post("/contact", post_contact);
svr.Post("/theme/light", theme_handler("light", theme_light));
svr.Post("/theme/dark", theme_handler("dark", theme_dark));
svr.set_error_handler(error_handler); svr.set_error_handler(error_handler);

5
static/index.html
View File

@ -2,7 +2,10 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="/static/css/style.css" /> <link rel="stylesheet" href="/static/css/style.css" />
<link rel="stylesheet" id="theme-target" href="{}" />
<script src="/static/js/htmx.min.js"></script> <script src="/static/js/htmx.min.js"></script>
<script src="/static/js/jquery-3.7.1.min.js"></script>
<script src="/static/js/scripts.js"></script>
</head> </head>
<body> <body>
<div id="root-head"> <div id="root-head">
@ -11,7 +14,7 @@
<li><button hx-get="/static/html/projects.html" hx-target="#main-content" hx-push-url="/">Projects</button></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/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="/static/html/about.html" hx-target="#main-content" hx-push-url="/about">About</button></li>
<li class="right" id="theme-target">{}</li> <li class="right"><button id="theme-button"></button></li>
</ul> </ul>
<div id="root-body"> <div id="root-body">
<div id="main-content"> <div id="main-content">

4
static/public/css/style.css
View File

@ -65,11 +65,11 @@ ul.navbar li button {
display: block; display: block;
} }
ul.navbar li#theme-target { ul.navbar li.right {
float: right; float: right;
} }
ul.navbar li#theme-target button { ul.navbar li.right button {
font-size: 1.5em; font-size: 1.5em;
padding: 0; padding: 0;
height: 54px; height: 54px;

2
static/public/js/jquery-3.7.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

38
static/public/js/scripts.js Normal file
View File

@ -0,0 +1,38 @@
const SYMBOL_LIGHT = "&#x1F31E";
const SYMBOL_DARK = "&#x1F319";
const set_theme_cookie = (value) =>
{
const d = new Date();
d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
const cookie_str = `theme=${value}; path=/; expires=${d.toUTCString()}; samesite=strict`;
document.cookie = cookie_str;
};
$(document).ready(() =>
{
let e_button = $("#theme-button");
let e_target = $("#theme-target");
let css_src = e_target.attr("href");
e_button.html(css_src == "/static/css/light.css" ? SYMBOL_LIGHT : SYMBOL_DARK);
e_button.on("click", () =>
{
let css_src = e_target.attr("href");
if (css_src == "/static/css/light.css")
{
e_target.attr("href", "/static/css/dark.css");
e_button.html(SYMBOL_DARK);
set_theme_cookie("dark");
}
else
{
e_target.attr("href", "/static/css/light.css");
e_button.html(SYMBOL_LIGHT);
set_theme_cookie("light");
}
});
});