timeline content

app.py

@@ -119,6 +119,224 @@ def post_detail(post_id):
     if post["id"] == 10:
 
         post["template"] = "components/timeline_post.html"
+        post["timeline"] = """
+<li class="mb-10 ml-6">
+    
+<button onclick="toggleTimeline('item1', this)"
+class="timeline-button"></button>
+
+<div>
+
+<time class="text-sm text-gray-400">
+2026-03-13
+</time>
+
+<div id="item1" class="mt-2">
+
+<h3 class="text-lg font-semibold text-gray-900">
+moved some web-based tools to localhost
+</h3>
+
+<p class="text-gray-500 mt-1">
+a testing page for blog preview and some string formatter...<br>It's also my first time to correctly using git, to upload edited pages directly via rsync and synchronization via git.
+</p>
+
+</div>
+
+</div>
+
+</li>
+
+<li class="mb-10 ml-6">
+    
+<button onclick="toggleTimeline('item2', this)"
+class="timeline-button"></button>
+
+<div>
+
+<time class="text-sm text-gray-400">
+2026-03-13
+</time>
+
+<div id="item2" class="mt-2">
+
+<h3 class="text-lg font-semibold text-gray-900">
+Editing
+</h3>
+
+<p class="text-gray-500 mt-1">
+added a timeline component,<br>but I have to generate a timeline html and paste it as text,<br>then paste into content generation, and the upload to blog.
+</p>
+
+</div>
+
+</div>
+
+</li>
+
+<li class="mb-10 ml-6">
+    
+<button onclick="toggleTimeline('item3', this)"
+class="timeline-button"></button>
+
+<div>
+
+<time class="text-sm text-gray-400">
+2026-03-12
+</time>
+
+<div id="item3" class="mt-2">
+
+<h3 class="text-lg font-semibold text-gray-900">
+Packing blog in Docker
+</h3>
+
+<p class="text-gray-500 mt-1">
+uwsgi + flask -> caddy, gunicorn, flask, docker
+</p>
+
+</div>
+
+</div>
+
+</li>
+
+<li class="mb-10 ml-6">
+    
+<button onclick="toggleTimeline('item4', this)"
+class="timeline-button"></button>
+
+<div>
+
+<time class="text-sm text-gray-400">
+2026-03-12
+</time>
+
+<div id="item4" class="mt-2">
+
+<h3 class="text-lg font-semibold text-gray-900">
+moved all wiki pages into one repository
+</h3>
+
+<p class="text-gray-500 mt-1">
+have been using gitea's wiki page to take notes, which is a life-saver<br>I made a script to pull all wiki pages into one repository, now I have a way to save all my notes.
+</p>
+
+</div>
+
+</div>
+
+</li>
+
+<li class="mb-10 ml-6">
+    
+<button onclick="toggleTimeline('item5', this)"
+class="timeline-button"></button>
+
+<div>
+
+<time class="text-sm text-gray-400">
+2026-03-11
+</time>
+
+<div id="item5" class="mt-2">
+
+<h3 class="text-lg font-semibold text-gray-900">
+/root partition is full
+</h3>
+
+<p class="text-gray-500 mt-1">
+pacman -Sc doesnt work anymore<br>I am confused very confused<br>started to move gitea from /etc to /home<br>accidentally deleted all gitea data...then recovered with a previous gitea dump
+</p>
+
+</div>
+
+</div>
+
+</li>
+
+<li class="mb-10 ml-6">
+    
+<button onclick="toggleTimeline('item6', this)"
+class="timeline-button"></button>
+
+<div>
+
+<time class="text-sm text-gray-400">
+2026-03-11
+</time>
+
+<div id="item6" class="mt-2">
+
+<h3 class="text-lg font-semibold text-gray-900">
+have another gitea instance, docker
+</h3>
+
+<p class="text-gray-500 mt-1">
+all repositories have a mirror now
+</p>
+
+</div>
+
+</div>
+
+</li>
+
+<li class="mb-10 ml-6">
+    
+<button onclick="toggleTimeline('item7', this)"
+class="timeline-button"></button>
+
+<div>
+
+<time class="text-sm text-gray-400">
+2026-03-11
+</time>
+
+<div id="item7" class="mt-2">
+
+<h3 class="text-lg font-semibold text-gray-900">
+Tailscale ip doesnt work
+</h3>
+
+<p class="text-gray-500 mt-1">
+system-wide caddy worked for https://ip <br>but docked caddy didnt work for https://ip<br>I have no clue...
+</p>
+
+</div>
+
+</div>
+
+</li>
+
+<li class="mb-10 ml-6">
+    
+<button onclick="toggleTimeline('item8', this)"
+class="timeline-button"></button>
+
+<div>
+
+<time class="text-sm text-gray-400">
+2026-03-11
+</time>
+
+<div id="item8" class="mt-2">
+
+<h3 class="text-lg font-semibold text-gray-900">
+language tool
+</h3>
+
+<p class="text-gray-500 mt-1">
+trying to use language tool, which helps with spelling but it doesnt work well for grammar checking, also the current setting should be fixed, I am not sure if I am running locally or querying via API.
+</p>
+
+</div>
+
+</div>
+
+</li>
+
+"""
 
     
     # 2. Pass the post dictionary (with the raw HTML content) directly to the template

templates/base.html

@@ -21,6 +21,7 @@
       href="{{ url_for('static', filename='css/blog.css') }}"
       rel="stylesheet"
     />
+    <script src="https://cdn.tailwindcss.com"></script>
   </head>
 
   <body>

templates/components/timeline.html

@@ -1,8 +1,8 @@
 <div class="max-w-3xl mx-auto px-6 py-16">
   <ol class="relative border-l border-gray-300">
     <p>hint</p>
-    {% for item in timeline %}
+    {{ post.timeline }}
-    <li class="mb-10 ml-6">
+    <!--li class="mb-10 ml-6">
       <span
         class="absolute flex items-center justify-center w-6 h-6 bg-gray-200 rounded-full -left-3"
       >
@@ -11,7 +11,6 @@
       <h3 class="font-semibold text-lg">{{ item.title }}</h3>
 
       <p class="text-gray-600">{{ item.description }}</p>
-    </li>
+    </li-->
-    {% endfor %}
   </ol>
 </div>