evan/VReader
evan/VReader
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[add] git link, [fix] misc styling issues
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Evan Reichard 2023-11-11 22:14:21 -05:00
parent f85deba946
commit d06914aaf1
6 changed files with 133 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
vreader/api/common.py
View File

@ -47,11 +47,15 @@ def main_entry():
def article_item(id): def article_item(id):
if len(id) != 11: if len(id) != 11:
return make_response(render_template("404.html")), 404 return make_response(
render_template("error.html", status=404, message="Invalid Article")
), 404
metadata = get_article_metadata(id) metadata = get_article_metadata(id)
if not metadata: if not metadata:
return make_response(render_template("404.html")), 404 return make_response(
render_template("error.html", status=404, message="Invalid Article")
), 404
try: try:
with open(metadata["filepath"], 'r', encoding='utf-8') as file: with open(metadata["filepath"], 'r', encoding='utf-8') as file:
@ -62,8 +66,10 @@ def article_item(id):
return make_response( return make_response(
render_template("article.html", metadata=metadata, markdown_html=markdown_html) render_template("article.html", metadata=metadata, markdown_html=markdown_html)
) )
except Exception as _: except Exception as e:
return make_response(render_template("404.html")), 404 return make_response(
render_template("error.html", status=404, message=e)
), 404
def get_article_metadata(id): def get_article_metadata(id):

2
vreader/static/tailwind.css
View File

File diff suppressed because one or more lines are too long

15
vreader/templates/404.html
View File

@ -1,15 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=0.9, user-scalable=no, viewport-fit=cover"
/>
<title>VReader - Article</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-200 h-[100dvh] p-5 flex flex-col justify-between">
{{ markdown_html|safe }}
</body>
</html>

42
vreader/templates/article.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="theme-color" content="#E5E7EB" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#E5E7EB" media="(prefers-color-scheme: light)">
@ -35,12 +35,50 @@
<body class="text-ptext bg-secondary"> <body class="text-ptext bg-secondary">
<header class="w-screen h-16 bg-secondary"> <header class="w-screen h-16 bg-secondary">
<div <div
class="flex px-2 h-16 w-11/12 md:w-5/6 mx-auto" class="flex justify-between md:px-6 h-16 w-11/12 md:w-5/6 mx-auto"
> >
<a class="flex gap-2 justify-center items-center" href="/"> <a class="flex gap-2 justify-center items-center" href="/">
<img class="h-10 rounded items-center" src="/static/icons/icon512.png"></img> <img class="h-10 rounded items-center" src="/static/icons/icon512.png"></img>
<span class="font-bold flex justify-center items-center">VReader</span> <span class="font-bold flex justify-center items-center">VReader</span>
</a> </a>
<a class="flex gap-2 justify-center items-center p-2" target="_blank" href="https://gitea.va.reichard.io/evan/VReader">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-ptext"
height="20"
viewBox="0 0 219 92"
fill="currentColor"
>
<defs>
<clipPath id="a"><path d="M159 .79h25V69h-25Zm0 0" /></clipPath>
<clipPath id="b"><path d="M183 9h35.371v60H183Zm0 0" /></clipPath>
<clipPath id="c"><path d="M0 .79h92V92H0Zm0 0" /></clipPath>
</defs>
<path
style="stroke: none; fill-rule: nonzero; fill-opacity: 1"
d="M130.871 31.836c-4.785 0-8.351 2.352-8.351 8.008 0 4.261 2.347 7.222 8.093 7.222 4.871 0 8.18-2.867 8.18-7.398 0-5.133-2.961-7.832-7.922-7.832Zm-9.57 39.95c-1.133 1.39-2.262 2.87-2.262 4.612 0 3.48 4.434 4.524 10.527 4.524 5.051 0 11.926-.352 11.926-5.043 0-2.793-3.308-2.965-7.488-3.227Zm25.761-39.688c1.563 2.004 3.22 4.789 3.22 8.793 0 9.656-7.571 15.316-18.536 15.316-2.789 0-5.312-.348-6.879-.785l-2.87 4.613 8.526.52c15.059.96 23.934 1.398 23.934 12.968 0 10.008-8.789 15.665-23.934 15.665-15.75 0-21.757-4.004-21.757-10.88 0-3.917 1.742-6 4.789-8.878-2.875-1.211-3.828-3.387-3.828-5.739 0-1.914.953-3.656 2.523-5.312 1.566-1.652 3.305-3.305 5.395-5.219-4.262-2.09-7.485-6.617-7.485-13.058 0-10.008 6.613-16.88 19.93-16.88 3.742 0 6.004.344 8.008.872h16.972v7.394l-8.007.61"
/>
<g clip-path="url(#a)">
<path
style="stroke: none; fill-rule: nonzero; fill-opacity: 1"
d="M170.379 16.281c-4.961 0-7.832-2.87-7.832-7.836 0-4.957 2.871-7.656 7.832-7.656 5.05 0 7.922 2.7 7.922 7.656 0 4.965-2.871 7.836-7.922 7.836Zm-11.227 52.305V61.71l4.438-.606c1.219-.175 1.394-.437 1.394-1.746V33.773c0-.953-.261-1.566-1.132-1.824l-4.7-1.656.957-7.047h18.016V59.36c0 1.399.086 1.57 1.395 1.746l4.437.606v6.875h-24.805"
/>
</g>
<g clip-path="url(#b)">
<path
style="stroke: none; fill-rule: nonzero; fill-opacity: 1"
d="M218.371 65.21c-3.742 1.825-9.223 3.481-14.187 3.481-10.356 0-14.27-4.175-14.27-14.015V31.879c0-.524 0-.871-.7-.871h-6.093v-7.746c7.664-.871 10.707-4.703 11.664-14.188h8.27v12.36c0 .609 0 .87.695.87h12.27v8.704h-12.965v20.797c0 5.136 1.218 7.136 5.918 7.136 2.437 0 4.96-.609 7.047-1.39l2.351 7.66"
/>
</g>
<g clip-path="url(#c)">
<path
style="stroke: none; fill-rule: nonzero; fill-opacity: 1"
d="M89.422 42.371 49.629 2.582a5.868 5.868 0 0 0-8.3 0l-8.263 8.262 10.48 10.484a6.965 6.965 0 0 1 7.173 1.668 6.98 6.98 0 0 1 1.656 7.215l10.102 10.105a6.963 6.963 0 0 1 7.214 1.657 6.976 6.976 0 0 1 0 9.875 6.98 6.98 0 0 1-9.879 0 6.987 6.987 0 0 1-1.519-7.594l-9.422-9.422v24.793a6.979 6.979 0 0 1 1.848 1.32 6.988 6.988 0 0 1 0 9.88c-2.73 2.726-7.153 2.726-9.875 0a6.98 6.98 0 0 1 0-9.88 6.893 6.893 0 0 1 2.285-1.523V34.398a6.893 6.893 0 0 1-2.285-1.523 6.988 6.988 0 0 1-1.508-7.637L29.004 14.902 1.719 42.187a5.868 5.868 0 0 0 0 8.301l39.793 39.793a5.868 5.868 0 0 0 8.3 0l39.61-39.605a5.873 5.873 0 0 0 0-8.305"
/>
</g>
<script xmlns="" />
</svg>
</a>
</div> </div>
</header> </header>
<main class="relative overflow-hidden bg-primary"> <main class="relative overflow-hidden bg-primary">

38
vreader/templates/error.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="theme-color" content="#E5E7EB" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#123636" media="(prefers-color-scheme: dark)">
<title>VReader - Error</title>
<link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="/static/style.css" />
<link rel="stylesheet" href="/static/tailwind.css" />
</head>
<body class="bg-secondary flex flex-col justify-center h-screen">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm text-center">
<h1
class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-stext"
>
{{ status }}
</h1>
<p
class="mb-8 text-3xl tracking-tight font-bold text-ptext md:text-4xl"
>
{{ message }}
</p>
<a
href="/"
class="px-2 py-1 bg-tertiary text-stext hover:bg-primary rounded"
>Back to Homepage</a
>
</div>
</div>
</body>
</html>

51
vreader/templates/index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="theme-color" content="#E5E7EB" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#E5E7EB" media="(prefers-color-scheme: light)">
@ -17,19 +17,57 @@
<body class="text-ptext bg-secondary"> <body class="text-ptext bg-secondary">
<header class="w-screen h-16 bg-secondary"> <header class="w-screen h-16 bg-secondary">
<div <div
class="flex px-2 h-16 w-11/12 md:w-5/6 mx-auto" class="flex justify-between md:px-6 h-16 w-11/12 md:w-5/6 mx-auto"
> >
<a class="flex gap-2 justify-center items-center" href="/"> <a class="flex gap-2 justify-center items-center" href="/">
<img class="h-10 rounded items-center" src="/static/icons/icon512.png"></img> <img class="h-10 rounded items-center" src="/static/icons/icon512.png"></img>
<span class="font-bold flex justify-center items-center">VReader</span> <span class="font-bold flex justify-center items-center">VReader</span>
</a> </a>
<a class="flex gap-2 justify-center items-center p-2" target="_blank" href="https://gitea.va.reichard.io/evan/VReader">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-ptext"
height="20"
viewBox="0 0 219 92"
fill="currentColor"
>
<defs>
<clipPath id="a"><path d="M159 .79h25V69h-25Zm0 0" /></clipPath>
<clipPath id="b"><path d="M183 9h35.371v60H183Zm0 0" /></clipPath>
<clipPath id="c"><path d="M0 .79h92V92H0Zm0 0" /></clipPath>
</defs>
<path
style="stroke: none; fill-rule: nonzero; fill-opacity: 1"
d="M130.871 31.836c-4.785 0-8.351 2.352-8.351 8.008 0 4.261 2.347 7.222 8.093 7.222 4.871 0 8.18-2.867 8.18-7.398 0-5.133-2.961-7.832-7.922-7.832Zm-9.57 39.95c-1.133 1.39-2.262 2.87-2.262 4.612 0 3.48 4.434 4.524 10.527 4.524 5.051 0 11.926-.352 11.926-5.043 0-2.793-3.308-2.965-7.488-3.227Zm25.761-39.688c1.563 2.004 3.22 4.789 3.22 8.793 0 9.656-7.571 15.316-18.536 15.316-2.789 0-5.312-.348-6.879-.785l-2.87 4.613 8.526.52c15.059.96 23.934 1.398 23.934 12.968 0 10.008-8.789 15.665-23.934 15.665-15.75 0-21.757-4.004-21.757-10.88 0-3.917 1.742-6 4.789-8.878-2.875-1.211-3.828-3.387-3.828-5.739 0-1.914.953-3.656 2.523-5.312 1.566-1.652 3.305-3.305 5.395-5.219-4.262-2.09-7.485-6.617-7.485-13.058 0-10.008 6.613-16.88 19.93-16.88 3.742 0 6.004.344 8.008.872h16.972v7.394l-8.007.61"
/>
<g clip-path="url(#a)">
<path
style="stroke: none; fill-rule: nonzero; fill-opacity: 1"
d="M170.379 16.281c-4.961 0-7.832-2.87-7.832-7.836 0-4.957 2.871-7.656 7.832-7.656 5.05 0 7.922 2.7 7.922 7.656 0 4.965-2.871 7.836-7.922 7.836Zm-11.227 52.305V61.71l4.438-.606c1.219-.175 1.394-.437 1.394-1.746V33.773c0-.953-.261-1.566-1.132-1.824l-4.7-1.656.957-7.047h18.016V59.36c0 1.399.086 1.57 1.395 1.746l4.437.606v6.875h-24.805"
/>
</g>
<g clip-path="url(#b)">
<path
style="stroke: none; fill-rule: nonzero; fill-opacity: 1"
d="M218.371 65.21c-3.742 1.825-9.223 3.481-14.187 3.481-10.356 0-14.27-4.175-14.27-14.015V31.879c0-.524 0-.871-.7-.871h-6.093v-7.746c7.664-.871 10.707-4.703 11.664-14.188h8.27v12.36c0 .609 0 .87.695.87h12.27v8.704h-12.965v20.797c0 5.136 1.218 7.136 5.918 7.136 2.437 0 4.96-.609 7.047-1.39l2.351 7.66"
/>
</g>
<g clip-path="url(#c)">
<path
style="stroke: none; fill-rule: nonzero; fill-opacity: 1"
d="M89.422 42.371 49.629 2.582a5.868 5.868 0 0 0-8.3 0l-8.263 8.262 10.48 10.484a6.965 6.965 0 0 1 7.173 1.668 6.98 6.98 0 0 1 1.656 7.215l10.102 10.105a6.963 6.963 0 0 1 7.214 1.657 6.976 6.976 0 0 1 0 9.875 6.98 6.98 0 0 1-9.879 0 6.987 6.987 0 0 1-1.519-7.594l-9.422-9.422v24.793a6.979 6.979 0 0 1 1.848 1.32 6.988 6.988 0 0 1 0 9.88c-2.73 2.726-7.153 2.726-9.875 0a6.98 6.98 0 0 1 0-9.88 6.893 6.893 0 0 1 2.285-1.523V34.398a6.893 6.893 0 0 1-2.285-1.523 6.988 6.988 0 0 1-1.508-7.637L29.004 14.902 1.719 42.187a5.868 5.868 0 0 0 0 8.301l39.793 39.793a5.868 5.868 0 0 0 8.3 0l39.61-39.605a5.873 5.873 0 0 0 0-8.305"
/>
</g>
<script xmlns="" />
</svg>
</a>
</div> </div>
</header> </header>
<main class="relative overflow-hidden bg-primary"> <main class="relative overflow-hidden bg-primary">
<div id="container" class="h-[100dvh] flex flex-col gap-3 px-4 overflow-auto md:px-6 mt-3"> <div id="container" class="h-[100dvh] flex flex-col gap-3 overflow-auto md:px-6 mt-3">
<div id="submit" <div id="submit"
class="flex gap-4 items-center text-lg w-11/12 md:w-4/6 mx-auto rounded px-6 py-3 bg-secondary transition-all duration-200" class="flex gap-4 items-center w-11/12 md:w-5/6 lg:w-4/6 mx-auto rounded px-6 py-3 bg-secondary transition-all duration-200"
> >
<input type="text" placeholder="YouTube URL" class="w-full px-2 py-1 bg-tertiary text-stext rounded"> <input type="text" placeholder="YouTube URL" class="w-full px-2 py-1 bg-tertiary text-stext rounded">
<button class="px-2 py-1 bg-tertiary text-stext hover:bg-primary rounded">Generate</button> <button class="px-2 py-1 bg-tertiary text-stext hover:bg-primary rounded">Generate</button>
@ -38,9 +76,9 @@
{% for article in articles %} {% for article in articles %}
<a <a
href="/articles/{{ article.video_id }}" href="/articles/{{ article.video_id }}"
class="flex items-center text-lg w-11/12 md:w-4/6 mx-auto rounded px-6 py-3 bg-secondary hover:bg-tertiary transition-all duration-200" class="flex items-center w-11/12 md:w-5/6 lg:w-4/6 mx-auto rounded px-6 py-3 bg-secondary hover:bg-tertiary transition-all duration-200"
> >
<img class="h-14 md:h-24 mr-6 rounded" src="https://i.ytimg.com/vi_webp/{{ article.video_id }}/maxresdefault.webp"></img> <img class="h-14 mr-6 rounded" src="https://i.ytimg.com/vi_webp/{{ article.video_id }}/maxresdefault.webp"></img>
<span>{{ article.title }}</span> <span>{{ article.title }}</span>
</a> </a>
{% endfor %} {% endfor %}
@ -123,7 +161,6 @@
if ("error" in resp) throw new Error(resp.error); if ("error" in resp) throw new Error(resp.error);
window.location.href = "/articles/" + videoID; window.location.href = "/articles/" + videoID;
}).catch(e => { }).catch(e => {
console.log(e);
alert(e.message); alert(e.message);
submitEl.innerHTML = oldHTML; submitEl.innerHTML = oldHTML;
}); });