[improve] mobile css, [fix] sorting issue

vreader/api/common.py

@@ -25,20 +25,13 @@ def main_entry():
     # Get Files
     directory = str(Config.DATA_PATH)
     all_files = os.listdir(directory)
+
+    # Sort Files
     markdown_files = [file for file in all_files if file.endswith(".md")]
+    markdown_files = sorted(markdown_files, reverse=True)
 
-    # Get Create Time
-    file_info_list = []
-    for filename in markdown_files:
-        file_path = os.path.join(directory, filename)
-        creation_time = os.path.getctime(file_path)
-        file_info_list.append((filename, creation_time))
-
-    # Sort Create Time (Recent First)
-    file_info_list.sort(key=lambda x: x[1], reverse=True)
-
-    # Get Articles
-    articles = [parse_filename(item[0]) for item in file_info_list]
+    # Get Article Metadata
+    articles = [get_article_metadata(filename, directory) for filename in markdown_files]
 
     return make_response(render_template("index.html", articles=articles))
 
@@ -51,7 +44,7 @@ def article_item(id):
             render_template("error.html", status=404, message="Invalid Article")
         ), 404
 
-    metadata = get_article_metadata(id)
+    metadata = find_article(id)
     if not metadata:
         return make_response(
             render_template("error.html", status=404, message="Invalid Article")
@@ -72,23 +65,23 @@ def article_item(id):
         ), 404
 
 
-def get_article_metadata(id):
+def find_article(id):
     directory = str(Config.DATA_PATH)
     files = os.listdir(directory)
-    for file_name in files:
-        if file_name.startswith(id) and file_name.endswith(".md"):
-            file_path = os.path.join(directory, file_name)
-            metadata = parse_filename(file_name)
-            metadata["filepath"] = file_path
-            return metadata
+
+    # Find Filename
+    filename = next((x for x in files if x[15:26] == id and x.endswith(".md")), None)
+    if filename is None:
         return None
 
+    # Normalize File Info
+    return get_article_metadata(filename, directory)
 
-def parse_filename(filename):
-    video_id = filename[:11]
-    title = filename[12:][:-3]
 
+def get_article_metadata(filename, directory):
     return {
-        "video_id": video_id,
-        "title": title
+        "date": filename[:14],
+        "video_id": filename[15:26],
+        "title": filename[27:][:-3],
+        "filepath": os.path.join(directory, filename)
     }

vreader/api/v1.py

@@ -1,4 +1,5 @@
 import os
+from datetime import datetime
 from os import path
 from flask import Blueprint, request
 from vreader.config import Config
@@ -21,7 +22,7 @@ def generate():
     if len(video) != 11:
         return {"error": "Invalid VideoID"}
 
-    metadata = get_article_metadata(video)
+    metadata = find_article(video)
     if metadata is not None:
         return {"video": video}
 
@@ -35,36 +36,37 @@ def generate():
     directory = str(Config.DATA_PATH)
     title = resp.get("title")
     content = resp.get("content")
+    date = datetime.strftime(datetime.utcnow(), "%Y%m%d%H%M%S")
 
     # Derive Filename
-    new_title = f"{video}_{title}"
-    file_path = path.join(directory, f"{new_title}.md")
+    new_title = f"{date}_{video}_{title}"
+    filepath = path.join(directory, f"{new_title}.md")
 
     # Write File
-    file = open(file_path, 'w', encoding='utf-8')
+    file = open(filepath, 'w', encoding='utf-8')
     file.write(content)
     file.close()
 
     return { "title": resp["title"] }
 
 
-def get_article_metadata(id):
+def find_article(id):
     directory = str(Config.DATA_PATH)
     files = os.listdir(directory)
-    for file_name in files:
-        if file_name.startswith(id) and file_name.endswith(".md"):
-            file_path = os.path.join(directory, file_name)
-            metadata = parse_filename(file_name)
-            metadata["filepath"] = file_path
-            return metadata
+
+    # Find Filename
+    filename = next((x for x in files if x[15:26] == id and x.endswith(".md")), None)
+    if filename is None:
         return None
 
+    # Normalize File Info
+    return get_article_metadata(filename, directory)
 
-def parse_filename(filename):
-    video_id = filename[:11]
-    title = filename[12:][:-3]
 
+def get_article_metadata(filename, directory):
     return {
-        "video_id": video_id,
-        "title": title
+        "date": filename[:14],
+        "video_id": filename[15:26],
+        "title": filename[27:][:-3],
+        "filepath": os.path.join(directory, filename)
     }

vreader/oai.py

@@ -5,7 +5,7 @@ import json
 import openai
 
 PROMPT_TEMPLATE = """
-The following is a video transcription. Write a fully comprehensive article in markdown appropriately utilizing subsections. Be sure to only use the following transcription to write the article:
+The following is a video transcription. Write a fully comprehensive article in markdown appropriately utilizing subsections. Do not reference the video. Be sure to only use the following transcription to write the article:
 
 {context}
 """

vreader/static/style.css

@@ -15,10 +15,11 @@ html {
 
 main {
   height: calc(100dvh - 4rem - env(safe-area-inset-top));
+  overflow: hidden;
 }
 
 #container {
-  padding-bottom: calc(5em + env(safe-area-inset-bottom) * 2);
+  padding-bottom: calc(5.5em + env(safe-area-inset-bottom) * 2);
 }
 
 /* No Scrollbar - IE, Edge, Firefox */

vreader/templates/article.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="bg-secondary">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no, viewport-fit=cover">
@@ -32,7 +32,7 @@
     <link rel="stylesheet" href="/static/style.css">
     <link rel="stylesheet" href="/static/tailwind.css">
   </head>
-  <body class="text-ptext bg-secondary">
+  <body class="text-ptext bg-primary">
     <header class="w-screen h-16 bg-secondary">
       <div
 	class="flex justify-between md:px-6 h-16 w-11/12 md:w-5/6 mx-auto"
@@ -82,17 +82,23 @@
       </div>
     </header>
     <main class="relative overflow-hidden bg-primary">
-      <div id="container" class="h-[100dvh] overflow-auto md:px-6 w-11/12 md:w-5/6 mx-auto mt-3">
-	<div id="content" class="rounded bg-secondary p-6 mb-3">
-	  <div class="flex justify-center w-full mb-6">
+      <div id="container" class="h-[100dvh] md:px-6 w-11/12 md:w-5/6 mx-auto">
+	<div id="content" class="h-full flex flex-col overflow-auto rounded bg-secondary px-6 pt-6 gap-4 my-3">
+	  <div class="flex justify-center w-full">
 	    <a target="_blank" href="https://www.youtube.com/watch?v={{ metadata.video_id }}">
 	      <img class="h-32 rounded" src="https://i.ytimg.com/vi_webp/{{ metadata.video_id }}/maxresdefault.webp"></img>
 	    </a>
 	  </div>
-	  <hr class="border-primary pb-5" />
+	  <div class="mx-auto flex justify-center gap-4 italic">
+	    <span class="font-extrabold">NOTE:</span>
+	    <span>The following is automatically generated and has not been proofread. It is possible that the generated article contains inaccuracies.</span>
+	  </div>
+	  <hr class="border-2 border-primary rounded" />
+	  <div>
 	    {{ markdown_html|safe }}
 	  </div>
 	</div>
+      </div>
     </main>
   </body>
 </html>

vreader/templates/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="bg-secondary">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no, viewport-fit=cover">
@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="/static/style.css">
     <link rel="stylesheet" href="/static/tailwind.css">
   </head>
-  <body class="text-ptext bg-secondary">
+  <body class="text-ptext bg-primary">
     <header class="w-screen h-16 bg-secondary">
       <div
 	class="flex justify-between md:px-6 h-16 w-11/12 md:w-5/6 mx-auto"
@@ -82,7 +82,7 @@
 	  <span>{{ article.title }}</span>
 	</a>
 	{% endfor %}
-	<div class="mb-0.5"></div>
+
       </div>
     </main>
     <script>