yet again
This commit is contained in:
m
403
app.py
403
app.py
@@ -120,221 +120,194 @@ def post_detail(post_id):
|
|||||||
|
|
||||||
post["template"] = "components/timeline_post.html"
|
post["template"] = "components/timeline_post.html"
|
||||||
post["timeline"] = """
|
post["timeline"] = """
|
||||||
<li class="mb-10 ml-6">
|
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||||
|
<button
|
||||||
<button onclick="toggleTimeline('item1', this)"
|
onclick="toggleTimeline('movedsomewebbasedtoolstolocalhost', this)"
|
||||||
class="timeline-button"></button>
|
class="timeline-button">
|
||||||
|
</button>
|
||||||
<div>
|
|
||||||
|
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||||
<time class="text-sm text-gray-400">
|
2026-03-13
|
||||||
2026-03-13
|
</time>
|
||||||
</time>
|
|
||||||
|
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||||
<div id="item1" class="mt-2">
|
moved some web-based tools to localhost
|
||||||
|
</h3>
|
||||||
<h3 class="text-lg font-semibold text-gray-900">
|
|
||||||
moved some web-based tools to localhost
|
<div id="movedsomewebbasedtoolstolocalhost">
|
||||||
</h3>
|
<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 class="text-gray-500 mt-1">
|
</p>
|
||||||
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.
|
</div>
|
||||||
</p>
|
</li>
|
||||||
|
|
||||||
</div>
|
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||||
|
<button
|
||||||
</div>
|
onclick="toggleTimeline('Editing', this)"
|
||||||
|
class="timeline-button">
|
||||||
</li>
|
</button>
|
||||||
|
|
||||||
<li class="mb-10 ml-6">
|
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||||
|
2026-03-13
|
||||||
<button onclick="toggleTimeline('item2', this)"
|
</time>
|
||||||
class="timeline-button"></button>
|
|
||||||
|
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||||
<div>
|
Editing
|
||||||
|
</h3>
|
||||||
<time class="text-sm text-gray-400">
|
|
||||||
2026-03-13
|
<div id="Editing">
|
||||||
</time>
|
<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.
|
||||||
<div id="item2" class="mt-2">
|
</p>
|
||||||
|
</div>
|
||||||
<h3 class="text-lg font-semibold text-gray-900">
|
</li>
|
||||||
Editing
|
|
||||||
</h3>
|
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||||
|
<button
|
||||||
<p class="text-gray-500 mt-1">
|
onclick="toggleTimeline('PackingbloginDocker', this)"
|
||||||
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.
|
class="timeline-button">
|
||||||
</p>
|
</button>
|
||||||
|
|
||||||
</div>
|
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||||
|
2026-03-12
|
||||||
</div>
|
</time>
|
||||||
|
|
||||||
</li>
|
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||||
|
Packing blog in Docker
|
||||||
<li class="mb-10 ml-6">
|
</h3>
|
||||||
|
|
||||||
<button onclick="toggleTimeline('item3', this)"
|
<div id="PackingbloginDocker">
|
||||||
class="timeline-button"></button>
|
<p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
|
||||||
|
uwsgi + flask -> caddy, gunicorn, flask, docker
|
||||||
<div>
|
</p>
|
||||||
|
</div>
|
||||||
<time class="text-sm text-gray-400">
|
</li>
|
||||||
2026-03-12
|
|
||||||
</time>
|
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||||
|
<button
|
||||||
<div id="item3" class="mt-2">
|
onclick="toggleTimeline('movedallwikipagesintoonerepository', this)"
|
||||||
|
class="timeline-button">
|
||||||
<h3 class="text-lg font-semibold text-gray-900">
|
</button>
|
||||||
Packing blog in Docker
|
|
||||||
</h3>
|
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||||
|
2026-03-12
|
||||||
<p class="text-gray-500 mt-1">
|
</time>
|
||||||
uwsgi + flask -> caddy, gunicorn, flask, docker
|
|
||||||
</p>
|
<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
|
||||||
</div>
|
</h3>
|
||||||
|
|
||||||
</div>
|
<div id="movedallwikipagesintoonerepository">
|
||||||
|
<p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
|
||||||
</li>
|
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>
|
||||||
<li class="mb-10 ml-6">
|
</div>
|
||||||
|
</li>
|
||||||
<button onclick="toggleTimeline('item4', this)"
|
|
||||||
class="timeline-button"></button>
|
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||||
|
<button
|
||||||
<div>
|
onclick="toggleTimeline('scoopupdatevscode', this)"
|
||||||
|
class="timeline-button">
|
||||||
<time class="text-sm text-gray-400">
|
</button>
|
||||||
2026-03-12
|
|
||||||
</time>
|
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||||
|
2026-03-12
|
||||||
<div id="item4" class="mt-2">
|
</time>
|
||||||
|
|
||||||
<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
|
scoop update vscode
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<p class="text-gray-500 mt-1">
|
<div id="scoopupdatevscode">
|
||||||
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 class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
|
||||||
</p>
|
VS Code was always hanging for two months.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
</li>
|
||||||
</div>
|
|
||||||
|
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||||
</li>
|
<button
|
||||||
|
onclick="toggleTimeline('rootpartitionisfull', this)"
|
||||||
<li class="mb-10 ml-6">
|
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-11
|
||||||
<div>
|
</time>
|
||||||
|
|
||||||
<time class="text-sm text-gray-400">
|
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||||
2026-03-11
|
/root partition is full
|
||||||
</time>
|
</h3>
|
||||||
|
|
||||||
<div id="item5" class="mt-2">
|
<div id="rootpartitionisfull">
|
||||||
|
<p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
|
||||||
<h3 class="text-lg font-semibold text-gray-900">
|
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
|
||||||
/root partition is full
|
</p>
|
||||||
</h3>
|
</div>
|
||||||
|
</li>
|
||||||
<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
|
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||||
</p>
|
<button
|
||||||
|
onclick="toggleTimeline('haveanothergiteainstancedocker', this)"
|
||||||
</div>
|
class="timeline-button">
|
||||||
|
</button>
|
||||||
</div>
|
|
||||||
|
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||||
</li>
|
2026-03-11
|
||||||
|
</time>
|
||||||
<li class="mb-10 ml-6">
|
|
||||||
|
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||||
<button onclick="toggleTimeline('item6', this)"
|
have another gitea instance, docker
|
||||||
class="timeline-button"></button>
|
</h3>
|
||||||
|
|
||||||
<div>
|
<div id="haveanothergiteainstancedocker">
|
||||||
|
<p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
|
||||||
<time class="text-sm text-gray-400">
|
all repositories have a mirror now
|
||||||
2026-03-11
|
</p>
|
||||||
</time>
|
</div>
|
||||||
|
</li>
|
||||||
<div id="item6" class="mt-2">
|
|
||||||
|
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||||
<h3 class="text-lg font-semibold text-gray-900">
|
<button
|
||||||
have another gitea instance, docker
|
onclick="toggleTimeline('Tailscaleipdoesntwork', this)"
|
||||||
</h3>
|
class="timeline-button">
|
||||||
|
</button>
|
||||||
<p class="text-gray-500 mt-1">
|
|
||||||
all repositories have a mirror now
|
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||||
</p>
|
2026-03-11
|
||||||
|
</time>
|
||||||
</div>
|
|
||||||
|
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||||
</div>
|
Tailscale ip doesnt work
|
||||||
|
</h3>
|
||||||
</li>
|
|
||||||
|
<div id="Tailscaleipdoesntwork">
|
||||||
<li class="mb-10 ml-6">
|
<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...
|
||||||
<button onclick="toggleTimeline('item7', this)"
|
</p>
|
||||||
class="timeline-button"></button>
|
</div>
|
||||||
|
</li>
|
||||||
<div>
|
|
||||||
|
<li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
|
||||||
<time class="text-sm text-gray-400">
|
<button
|
||||||
2026-03-11
|
onclick="toggleTimeline('languagetool', this)"
|
||||||
</time>
|
class="timeline-button">
|
||||||
|
</button>
|
||||||
<div id="item7" class="mt-2">
|
|
||||||
|
<time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
|
||||||
<h3 class="text-lg font-semibold text-gray-900">
|
2026-03-11
|
||||||
Tailscale ip doesnt work
|
</time>
|
||||||
</h3>
|
|
||||||
|
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
|
||||||
<p class="text-gray-500 mt-1">
|
language tool
|
||||||
system-wide caddy worked for https://ip <br>but docked caddy didnt work for https://ip<br>I have no clue...
|
</h3>
|
||||||
</p>
|
|
||||||
|
<div id="languagetool">
|
||||||
</div>
|
<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.
|
||||||
</div>
|
</p>
|
||||||
|
</div>
|
||||||
</li>
|
</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>
|
|
||||||
|
|
||||||
"""
|
"""
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
.timeline-button {
|
||||||
position: absolute;
|
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;
|
width: 0.75rem;
|
||||||
height: 0.75rem;
|
height: 0.75rem;
|
||||||
|
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
|
|
||||||
background: #d1d5db;
|
background: #d1d5db;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
font-size: 10px;
|
/* This creates the 'gap' around the dot so it looks clean */
|
||||||
line-height: 1;
|
border: 2px solid white !important;
|
||||||
|
z-index: 10;
|
||||||
transition: all 0.2s ease;
|
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 */
|
/* hover only when expanded */
|
||||||
.timeline-button:hover:not(.collapsed) {
|
.timeline-button:hover:not(.collapsed) {
|
||||||
background: #6b7280;
|
background: #6b7280;
|
||||||
|
|||||||
@@ -26,14 +26,12 @@
|
|||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
tailwind.config = {
|
tailwind.config = {
|
||||||
corePlugins: {
|
corePlugins: {
|
||||||
preflight: false, // Keeps your base blog styles intact
|
preflight: false,
|
||||||
},
|
},
|
||||||
// This ensures Tailwind utilities only work inside elements with the 'tailwind-scope' class
|
prefix: "tw-", // All Tailwind classes must now start with tw-
|
||||||
important: "#timeline-zone",
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<script src="{{ url_for('static', filename='js/timeline.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/timeline.js') }}"></script>
|
||||||
|
|||||||
@@ -1,8 +1,13 @@
|
|||||||
<div id="timeline-zone">
|
<div class="tw-max-w-3xl tw-mx-auto tw-px-6 tw-py-16">
|
||||||
<div class="max-w-3xl mx-auto px-6 py-16">
|
<ol
|
||||||
<ol class="relative border-l border-gray-300">
|
class="tw-relative tw-border-l tw-border-gray-300 tw-list-none tw-p-0 tw-m-0 tw-ml-4"
|
||||||
<p>hint</p>
|
style="
|
||||||
|
border-top: none !important;
|
||||||
|
border-right: none !important;
|
||||||
|
border-bottom: none !important;
|
||||||
|
border-left: 1px solid #d1d5db !important;
|
||||||
|
"
|
||||||
|
>
|
||||||
{{ post.timeline | safe}}
|
{{ post.timeline | safe}}
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user