yet again
This commit is contained in:
m
209
app.py
209
app.py
@@ -120,220 +120,193 @@ def post_detail(post_id):
|
||||
|
||||
post["template"] = "components/timeline_post.html"
|
||||
post["timeline"] = """
|
||||
<li class="mb-10 ml-6">
|
||||
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||
<button
|
||||
onclick="toggleTimeline('movedsomewebbasedtoolstolocalhost', this)"
|
||||
class="timeline-button">
|
||||
</button>
|
||||
|
||||
<button onclick="toggleTimeline('item1', this)"
|
||||
class="timeline-button"></button>
|
||||
|
||||
<div>
|
||||
|
||||
<time class="text-sm text-gray-400">
|
||||
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||
2026-03-13
|
||||
</time>
|
||||
|
||||
<div id="item1" class="mt-2">
|
||||
|
||||
<h3 class="text-lg font-semibold text-gray-900">
|
||||
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||
moved some web-based tools to localhost
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-500 mt-1">
|
||||
<div id="movedsomewebbasedtoolstolocalhost">
|
||||
<p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
|
||||
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">
|
||||
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||
<button
|
||||
onclick="toggleTimeline('Editing', this)"
|
||||
class="timeline-button">
|
||||
</button>
|
||||
|
||||
<button onclick="toggleTimeline('item2', this)"
|
||||
class="timeline-button"></button>
|
||||
|
||||
<div>
|
||||
|
||||
<time class="text-sm text-gray-400">
|
||||
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||
2026-03-13
|
||||
</time>
|
||||
|
||||
<div id="item2" class="mt-2">
|
||||
|
||||
<h3 class="text-lg font-semibold text-gray-900">
|
||||
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||
Editing
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-500 mt-1">
|
||||
<div id="Editing">
|
||||
<p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
|
||||
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">
|
||||
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||
<button
|
||||
onclick="toggleTimeline('PackingbloginDocker', this)"
|
||||
class="timeline-button">
|
||||
</button>
|
||||
|
||||
<button onclick="toggleTimeline('item3', this)"
|
||||
class="timeline-button"></button>
|
||||
|
||||
<div>
|
||||
|
||||
<time class="text-sm text-gray-400">
|
||||
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||
2026-03-12
|
||||
</time>
|
||||
|
||||
<div id="item3" class="mt-2">
|
||||
|
||||
<h3 class="text-lg font-semibold text-gray-900">
|
||||
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||
Packing blog in Docker
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-500 mt-1">
|
||||
<div id="PackingbloginDocker">
|
||||
<p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
|
||||
uwsgi + flask -> caddy, gunicorn, flask, docker
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="mb-10 ml-6">
|
||||
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||
<button
|
||||
onclick="toggleTimeline('movedallwikipagesintoonerepository', this)"
|
||||
class="timeline-button">
|
||||
</button>
|
||||
|
||||
<button onclick="toggleTimeline('item4', this)"
|
||||
class="timeline-button"></button>
|
||||
|
||||
<div>
|
||||
|
||||
<time class="text-sm text-gray-400">
|
||||
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||
2026-03-12
|
||||
</time>
|
||||
|
||||
<div id="item4" class="mt-2">
|
||||
|
||||
<h3 class="text-lg font-semibold text-gray-900">
|
||||
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||
moved all wiki pages into one repository
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-500 mt-1">
|
||||
<div id="movedallwikipagesintoonerepository">
|
||||
<p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
|
||||
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">
|
||||
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||
<button
|
||||
onclick="toggleTimeline('scoopupdatevscode', this)"
|
||||
class="timeline-button">
|
||||
</button>
|
||||
|
||||
<button onclick="toggleTimeline('item5', this)"
|
||||
class="timeline-button"></button>
|
||||
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||
2026-03-12
|
||||
</time>
|
||||
|
||||
<div>
|
||||
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||
scoop update vscode
|
||||
</h3>
|
||||
|
||||
<time class="text-sm text-gray-400">
|
||||
<div id="scoopupdatevscode">
|
||||
<p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
|
||||
VS Code was always hanging for two months.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||
<button
|
||||
onclick="toggleTimeline('rootpartitionisfull', this)"
|
||||
class="timeline-button">
|
||||
</button>
|
||||
|
||||
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||
2026-03-11
|
||||
</time>
|
||||
|
||||
<div id="item5" class="mt-2">
|
||||
|
||||
<h3 class="text-lg font-semibold text-gray-900">
|
||||
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||
/root partition is full
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-500 mt-1">
|
||||
<div id="rootpartitionisfull">
|
||||
<p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
|
||||
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">
|
||||
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||
<button
|
||||
onclick="toggleTimeline('haveanothergiteainstancedocker', this)"
|
||||
class="timeline-button">
|
||||
</button>
|
||||
|
||||
<button onclick="toggleTimeline('item6', this)"
|
||||
class="timeline-button"></button>
|
||||
|
||||
<div>
|
||||
|
||||
<time class="text-sm text-gray-400">
|
||||
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||
2026-03-11
|
||||
</time>
|
||||
|
||||
<div id="item6" class="mt-2">
|
||||
|
||||
<h3 class="text-lg font-semibold text-gray-900">
|
||||
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||
have another gitea instance, docker
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-500 mt-1">
|
||||
<div id="haveanothergiteainstancedocker">
|
||||
<p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
|
||||
all repositories have a mirror now
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="mb-10 ml-6">
|
||||
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||
<button
|
||||
onclick="toggleTimeline('Tailscaleipdoesntwork', this)"
|
||||
class="timeline-button">
|
||||
</button>
|
||||
|
||||
<button onclick="toggleTimeline('item7', this)"
|
||||
class="timeline-button"></button>
|
||||
|
||||
<div>
|
||||
|
||||
<time class="text-sm text-gray-400">
|
||||
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||
2026-03-11
|
||||
</time>
|
||||
|
||||
<div id="item7" class="mt-2">
|
||||
|
||||
<h3 class="text-lg font-semibold text-gray-900">
|
||||
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||
Tailscale ip doesnt work
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-500 mt-1">
|
||||
<div id="Tailscaleipdoesntwork">
|
||||
<p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
|
||||
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">
|
||||
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||
<button
|
||||
onclick="toggleTimeline('languagetool', this)"
|
||||
class="timeline-button">
|
||||
</button>
|
||||
|
||||
<button onclick="toggleTimeline('item8', this)"
|
||||
class="timeline-button"></button>
|
||||
|
||||
<div>
|
||||
|
||||
<time class="text-sm text-gray-400">
|
||||
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||
2026-03-11
|
||||
</time>
|
||||
|
||||
<div id="item8" class="mt-2">
|
||||
|
||||
<h3 class="text-lg font-semibold text-gray-900">
|
||||
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||
language tool
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-500 mt-1">
|
||||
<div id="languagetool">
|
||||
<p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
|
||||
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>
|
||||
|
||||
"""
|
||||
|
||||
@@ -1,24 +1,49 @@
|
||||
/* 1. Reset the LI to ensure no Bootstrap frames/padding interfere */
|
||||
li.tw-list-none {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
padding-left: 0 !important; /* Forces alignment control to the Button */
|
||||
margin-left: 1.5rem !important; /* This is the 'tw-ml-6' equivalent */
|
||||
}
|
||||
|
||||
/* 2. The Precision Dot */
|
||||
.timeline-button {
|
||||
position: absolute;
|
||||
left: -0.375rem;
|
||||
|
||||
/* MATH: The li has ml-6 (1.5rem).
|
||||
To center a 0.75rem dot on the line at the edge of that margin:
|
||||
We move it left by (1.5rem + half the dot width). */
|
||||
left: -1.9rem !important;
|
||||
top: 0.25rem;
|
||||
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
|
||||
border-radius: 9999px;
|
||||
|
||||
background: #d1d5db;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
|
||||
/* This creates the 'gap' around the dot so it looks clean */
|
||||
border: 2px solid white !important;
|
||||
z-index: 10;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 3. Force the Line to be visible and solid */
|
||||
ol.tw-border-l-2 {
|
||||
border-left: 2px solid #d1d5db !important;
|
||||
border-right: none !important;
|
||||
border-top: none !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
/* Ensure the dot stays put when screen shrinks */
|
||||
.tw-relative {
|
||||
position: relative !important;
|
||||
}
|
||||
/* hover only when expanded */
|
||||
.timeline-button:hover:not(.collapsed) {
|
||||
background: #6b7280;
|
||||
|
||||
@@ -26,14 +26,12 @@
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
corePlugins: {
|
||||
preflight: false, // Keeps your base blog styles intact
|
||||
preflight: false,
|
||||
},
|
||||
// This ensures Tailwind utilities only work inside elements with the 'tailwind-scope' class
|
||||
important: "#timeline-zone",
|
||||
prefix: "tw-", // All Tailwind classes must now start with tw-
|
||||
};
|
||||
</script>
|
||||
<script src="{{ url_for('static', filename='js/timeline.js') }}"></script>
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
<div id="timeline-zone">
|
||||
<div class="max-w-3xl mx-auto px-6 py-16">
|
||||
<ol class="relative border-l border-gray-300">
|
||||
<p>hint</p>
|
||||
<div class="tw-max-w-3xl tw-mx-auto tw-px-6 tw-py-16">
|
||||
<ol
|
||||
class="tw-relative tw-border-l tw-border-gray-300 tw-list-none tw-p-0 tw-m-0 tw-ml-4"
|
||||
style="
|
||||
border-top: none !important;
|
||||
border-right: none !important;
|
||||
border-bottom: none !important;
|
||||
border-left: 1px solid #d1d5db !important;
|
||||
"
|
||||
>
|
||||
{{ post.timeline | safe}}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user