Skip to content

Commit 781a896

Browse files
DenverCoder1pre-commit-ci[bot]
DenverCoder1
and
pre-commit-ci[bot]
authored
feat(web): Added a home page when id is not passed (#77)
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
1 parent a73ef80 commit 781a896

File tree

8 files changed

+419
-5
lines changed

8 files changed

+419
-5
lines changed

‎.pre-commit-config.yaml

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,5 +44,5 @@ repos:
4444
rev: v2.7.1
4545
hooks:
4646
- id: prettier
47-
name: Running prettier in non-code files.
48-
types_or: [markdown, yaml, css, json]
47+
name: Running prettier in non-python files.
48+
types_or: [markdown, yaml, css, json, javascript]

‎api/index.py

+3-1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@
3131
@app.route("/")
3232
def render():
3333
try:
34+
if "id" not in request.args:
35+
return Response(response=render_template("index.html", now=datetime.utcnow()))
36+
video_id = validate_video_id(request, "id")
3437
width = validate_int(request, "width", default=250)
3538
background_color = validate_color(request, "background_color", default="#0d1117")
3639
title_color = validate_color(request, "title_color", default="#ffffff")
@@ -39,7 +42,6 @@ def render():
3942
publish_timestamp = validate_int(request, "timestamp", default=0)
4043
duration_seconds = validate_int(request, "duration", default=0)
4144
lang = validate_lang(request, "lang", default="en")
42-
video_id = validate_video_id(request, "id")
4345
thumbnail = data_uri_from_url(f"https://i.ytimg.com/vi/{video_id}/mqdefault.jpg")
4446
views = fetch_views(video_id)
4547
views = fetch_views(video_id, lang)

‎api/static/css/style.css

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
html {
2+
-webkit-box-sizing: border-box;
3+
-moz-box-sizing: border-box;
4+
box-sizing: border-box;
5+
}
6+
7+
*,
8+
*::before,
9+
*::after {
10+
-webkit-box-sizing: inherit;
11+
-moz-box-sizing: inherit;
12+
box-sizing: inherit;
13+
}
14+
15+
:root {
16+
--background: #eee;
17+
--card-background: white;
18+
--text: #1a1a1a;
19+
--border: #ccc;
20+
--stroke: #a9a9a9;
21+
--blue-light: #2196f3;
22+
--blue-transparent: #2196f3aa;
23+
--blue-dark: #1e88e5;
24+
--link: #1e88e5;
25+
--link-visited: #b344e2;
26+
--button-outline: black;
27+
--red: #ff6464;
28+
--yellow: #ffee58;
29+
--yellow-light: #fffde7;
30+
}
31+
32+
[data-theme="dark"] {
33+
--background: #090d13;
34+
--card-background: #0d1117;
35+
--text: #efefef;
36+
--border: #2a2e34;
37+
--stroke: #737373;
38+
--blue-light: #1976d2;
39+
--blue-transparent: #2196f320;
40+
--blue-dark: #1565c0;
41+
--link: #5caff1;
42+
--link-visited: #d57afc;
43+
--button-outline: black;
44+
--red: #ff6464;
45+
--yellow: #a59809;
46+
--yellow-light: #716800;
47+
}
48+
49+
body {
50+
background: var(--background);
51+
font-family: "Open Sans", sans-serif;
52+
padding-top: 10px;
53+
color: var(--text);
54+
}
55+
56+
.header-flex {
57+
display: flex;
58+
align-items: center;
59+
justify-content: space-between;
60+
}
61+
62+
.github {
63+
text-align: center;
64+
}
65+
66+
.github span {
67+
margin: 0 2px;
68+
}
69+
70+
.center {
71+
text-align: center;
72+
}
73+
74+
a {
75+
color: var(--link);
76+
text-decoration: none;
77+
}
78+
79+
a:visited {
80+
color: var(--link-visited);
81+
}
82+
83+
a:hover {
84+
filter: brightness(1.2);
85+
}
86+
87+
.example a:hover {
88+
filter: unset;
89+
}
90+
91+
.container {
92+
width: 96%;
93+
max-width: 1000px;
94+
margin: 0 auto;
95+
}
96+
97+
.footer {
98+
margin: 50px 0;
99+
}
100+
101+
.details {
102+
border: 1px solid var(--border);
103+
border-radius: 5px;
104+
padding: 5px 20px;
105+
margin-bottom: 10px;
106+
background: var(--card-background);
107+
}
108+
109+
.details > h2 {
110+
margin: 0;
111+
margin-top: 10px;
112+
}
113+
114+
/* link underline effect */
115+
116+
a.underline-hover {
117+
position: relative;
118+
text-decoration: none;
119+
color: var(--text);
120+
margin-top: 2em;
121+
display: inline-flex;
122+
align-items: center;
123+
gap: 0.25em;
124+
}
125+
.underline-hover::before {
126+
content: "";
127+
position: absolute;
128+
bottom: 0;
129+
right: 0;
130+
width: 0;
131+
height: 1px;
132+
background-color: var(--blue-light);
133+
transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
134+
}
135+
@media (hover: hover) and (pointer: fine) {
136+
.underline-hover:hover::before {
137+
left: 0;
138+
right: auto;
139+
width: 100%;
140+
}
141+
}

‎api/static/css/toggle-dark.css

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
a.darkmode {
2+
position: fixed;
3+
top: 2em;
4+
right: 2em;
5+
color: var(--text);
6+
background: var(--background);
7+
height: 3em;
8+
width: 3em;
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
border-radius: 50%;
13+
border: 2px solid var(--border);
14+
box-shadow: 0 0 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
15+
transition: 0.2s ease-in box-shadow;
16+
}
17+
18+
a.darkmode:hover {
19+
box-shadow: 0 0 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
20+
}
21+
22+
@media only screen and (max-width: 600px) {
23+
a.darkmode {
24+
top: unset;
25+
bottom: 1em;
26+
right: 1em;
27+
}
28+
}

‎api/static/images/favicon.png

7.73 KB
Loading

‎api/static/js/toggle-dark.js

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/**
2+
* Set a cookie
3+
* @param {string} cname - cookie name
4+
* @param {string} cvalue - cookie value
5+
* @param {number} exdays - number of days to expire
6+
*/
7+
function setCookie(cname, cvalue, exdays) {
8+
const d = new Date();
9+
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
10+
const expires = `expires=${d.toUTCString()}`;
11+
document.cookie = `${cname}=${cvalue}; ${expires}; path=/`;
12+
}
13+
14+
/**
15+
* Get a cookie
16+
* @param {string} cname - cookie name
17+
* @returns {string} the cookie's value
18+
*/
19+
function getCookie(name) {
20+
const dc = document.cookie;
21+
const prefix = `${name}=`;
22+
let begin = dc.indexOf(`; ${prefix}`);
23+
/** @type {Number?} */
24+
let end = null;
25+
if (begin === -1) {
26+
begin = dc.indexOf(prefix);
27+
if (begin !== 0) return null;
28+
} else {
29+
begin += 2;
30+
end = document.cookie.indexOf(";", begin);
31+
if (end === -1) {
32+
end = dc.length;
33+
}
34+
}
35+
return decodeURI(dc.substring(begin + prefix.length, end));
36+
}
37+
38+
/**
39+
* Turn on dark mode
40+
*/
41+
function darkmode() {
42+
document.querySelector(".darkmode i").className = "gg-sun";
43+
setCookie("darkmode", "on", 9999);
44+
document.body.setAttribute("data-theme", "dark");
45+
}
46+
47+
/**
48+
* Turn on light mode
49+
*/
50+
function lightmode() {
51+
document.querySelector(".darkmode i").className = "gg-moon";
52+
setCookie("darkmode", "off", 9999);
53+
document.body.removeAttribute("data-theme");
54+
}
55+
56+
/**
57+
* Toggle theme between light and dark
58+
*/
59+
function toggleTheme() {
60+
if (document.body.getAttribute("data-theme") !== "dark") {
61+
/* dark mode on */
62+
darkmode();
63+
} else {
64+
/* dark mode off */
65+
lightmode();
66+
}
67+
}
68+
69+
// set the theme based on the cookie
70+
if (
71+
getCookie("darkmode") === null &&
72+
window.matchMedia("(prefers-color-scheme: dark)").matches
73+
) {
74+
darkmode();
75+
}

0 commit comments

Comments
 (0)