gb/mercury
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

Compare commits

base: gb:ff91324a79333b42157157f3f875aaf7eea48b53
Branches Tags
gb:master
..
compare: gb:95e5a1618a55557ebf9bbaaa086d2351f78dbc71
Branches Tags
gb:master

2 commits
ff91324a79 ... 95e5a1618a

Author SHA1 Message Date
grassblock
95e5a1618a
feat: add outdated reminder to old articles (init) 2025-08-20 17:02:07 +08:00
grassblock
e6816df0dc
feat: add draft indicator for post list 2025-08-20 15:34:18 +08:00
6 changed files with 277 additions and 223 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/ArticleList.astro
View file

@ -5,7 +5,7 @@ const { posts, displayDate = false, placeholder = false } = Astro.props;
{posts.map((post) => ( {posts.map((post) => (
<p> <p>
{displayDate && <span class="list-date">{new Date(post.data.date).toISOString().split('T')[0]}</span>} {displayDate && <span class="list-date">{new Date(post.data.date).toISOString().split('T')[0]}</span>}
<a href={`/blog/${post.slug}`}>{post.data.title}</a> {post.data.draft && <span class="draft-badge">[draft] </span>}<a href={`/blog/${post.slug}`}>{post.data.title}</a>
</p> </p>
))} ))}

14
src/components/OutDatedCallOut.astro Normal file
View file

@ -0,0 +1,14 @@
---
import Callout from "./shortcodes/Callout.astro"
const { lastUpdatedAt } = Astro.props
const lastUpdated = new Date(lastUpdatedAt).getTime()
const dateNow = new Date().getTime()
const dateDelta = dateNow - lastUpdated
const Day = 1000 * 60 * 60 * 24
const daysDelta = Math.round(dateDelta / Day)
---
{ daysDelta >= 30 &&
<Callout type="warning" icon="📅">
This article was updated on {daysDelta} days ago. The content may be outdated.
</Callout>
}

7
src/config.ts
View file

@ -37,6 +37,13 @@ export const siteConfig = {
listuuid: '3546fc35-fd75-4163-936a-114514191981', // the id of the list to subscribe to, can be found in the listmonk admin panel listuuid: '3546fc35-fd75-4163-936a-114514191981', // the id of the list to subscribe to, can be found in the listmonk admin panel
} }
}, },
// outdated callout
// enable the callout to notify users that the content maybe outdated, this will add a callout to the top of the article page,
// initialized by the server islands
outdatedCallout: {
enabled: true,
daysBeforeOutdated: 90, // the number of days before the content is considered outdated, defaults to 90 days
},
// encryption // encryption
// the global password to encrypt/decrypt the content, if set, all <ProtectedContent/> without specifying a password will be encrypted with this password // the global password to encrypt/decrypt the content, if set, all <ProtectedContent/> without specifying a password will be encrypted with this password
// To use an environment variable to set the password, replace the value with `import.meta.env.CONTENT_PASSWORD` // To use an environment variable to set the password, replace the value with `import.meta.env.CONTENT_PASSWORD`

9
src/content/posts/outdated-test/index.md Normal file
View file

@ -0,0 +1,9 @@
---
title: 'the Origin of the Computer Science'
description: 'A walkthrough of my current terminal configuration'
date: '1970-01-01'
updated: '2000-01-01'
author:
- 'Wheatley'
---
The

6
src/pages/blog/[...slug].astro
View file

@ -11,6 +11,7 @@ import AuthorInfo from "../../components/helper/authors/Info.astro";
import TableOfContents from "../../components/TableOfContents.astro"; import TableOfContents from "../../components/TableOfContents.astro";
import "katex/dist/katex.css" import "katex/dist/katex.css"
import { getLangFromUrl, useTranslations, useTranslatedPath } from '../../i18n/utils'; import { getLangFromUrl, useTranslations, useTranslatedPath } from '../../i18n/utils';
import OutDatedCallOut from "../../components/OutDatedCallOut.astro";
const lang = getLangFromUrl(Astro.url); const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang); const t = useTranslations(lang);
@ -34,10 +35,10 @@ const author = Array.isArray(entry.data.author) ? entry.data.author : (entry.dat
// Get Wordcount and Last Updated Date // Get Wordcount and Last Updated Date
const wordcount = remarkPluginFrontmatter.wordcount; const wordcount = remarkPluginFrontmatter.wordcount;
const lastUpdated = remarkPluginFrontmatter.lastModified; const lastUpdated = entry.data.updated ? entry.data.updated : remarkPluginFrontmatter.lastModified;
const pubDate = new Date(entry.data.date).toISOString().split('T')[0] const pubDate = new Date(entry.data.date).toISOString().split('T')[0]
const lastUpdatedDate = entry.data.updated ? new Date(entry.data.updated).toISOString().split('T')[0] : new Date(lastUpdated).toISOString().split('T')[0]; const lastUpdatedDate = new Date(lastUpdated).toISOString().split('T')[0]
// Get author data // Get author data
const authorData = await Promise.all((author).map((singleAuthor) => getEntry(singleAuthor).then(authorEntry => authorEntry?.data))) const authorData = await Promise.all((author).map((singleAuthor) => getEntry(singleAuthor).then(authorEntry => authorEntry?.data)))
@ -73,6 +74,7 @@ const cover = customFeaturedImage || matchedImage_src?.src || firstImageURL || `
{ (cover && cover !== firstImageURL && cover !== `/blog/${slug}/featured.png`) && <Image class="cover" width=720 height=480 src={cover} alt={`cover of ${entry.data.title}`} /> } { (cover && cover !== firstImageURL && cover !== `/blog/${slug}/featured.png`) && <Image class="cover" width=720 height=480 src={cover} alt={`cover of ${entry.data.title}`} /> }
{headings.length !== 0 && <TableOfContents headings={headings} />} {headings.length !== 0 && <TableOfContents headings={headings} />}
{entry.data.summary && <p class="summary">{entry.data.summary}</p> } {entry.data.summary && <p class="summary">{entry.data.summary}</p> }
<OutDatedCallOut server:defer lastUpdatedAt={lastUpdated} />
<div class="content"> <div class="content">
<Content /> <Content />
</div> </div>

454
src/styles/global.css
View file

@ -1,336 +1,358 @@
@import url(@fontsource-variable/jetbrains-mono); @import url(@fontsource-variable/jetbrains-mono);
/* Global Styles for Terminal Blog */ /* Global Styles for Terminal Blog */
:root { :root {
/* Dark theme (default) */ /* Dark theme (default) */
--bg-color: #2e3440; --bg-color: #2e3440;
--text-color: #d8dee9; --text-color: #d8dee9;
--secondary-text-color: #c8c8c8; --secondary-text-color: #c8c8c8;
--accent-color: #90a8c0; --accent-color: #90a8c0;
--secondary-color: #7890a8; --secondary-color: #7890a8;
--border-color: #3b4351; --border-color: #3b4351;
--header-color: #eceff4; --header-color: #eceff4;
--terminal-green: #a3be8c; --terminal-green: #a3be8c;
--terminal-yellow: #ebcb8b; --terminal-yellow: #ebcb8b;
--terminal-red: #bf616a; --terminal-red: #bf616a;
--font-mono: 'JetBrains Mono',ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
} }
/* Light theme */ /* Light theme */
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
--bg-color: #eceff4;
--text-color: #2e3440;
--secondary-text-color: #4c566a;
--accent-color: #486090;
--secondary--color: #6078a8;
--border-color: #d1d5db;
--header-color: #2e3440;
--terminal-green: #4b644b;
--terminal-yellow: #ebcb8b;
--terminal-red: #bf616a;
}
}
/* Light theme override (for switch) */
:root[data-theme="light"] {
--bg-color: #eceff4; --bg-color: #eceff4;
--text-color: #2e3440; --text-color: #2e3440;
--secondary-text-color: #4c566a; --secondary-text-color: #4c566a;
--accent-color: #486090; --accent-color: #486090;
--secondary--color: #6078a8;
--border-color: #d1d5db; --border-color: #d1d5db;
--header-color: #2e3440; --header-color: #2e3440;
--terminal-green: #4b644b; --terminal-green: #4b644b;
--terminal-yellow: #ebcb8b; --terminal-yellow: #ebcb8b;
--terminal-red: #bf616a; --terminal-red: #bf616a;
}
}
/* Light theme override (for switch) */
:root[data-theme="light"] {
--bg-color: #eceff4;
--text-color: #2e3440;
--secondary-text-color: #4c566a;
--accent-color: #486090;
--border-color: #d1d5db;
--header-color: #2e3440;
--terminal-green: #4b644b;
--terminal-yellow: #ebcb8b;
--terminal-red: #bf616a;
} }
*, *::before, *::after { *, *::before, *::after {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
html, body { html, body {
font-family: var(--font-mono); font-family: var(--font-mono);
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--text-color); color: var(--text-color);
line-height: 1.5; line-height: 1.5;
height: 100%; height: 100%;
width: 100%; width: 100%;
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
text-align: left; text-align: left;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
a { a {
color: var(--accent-color); color: var(--accent-color);
text-decoration: none; text-decoration: none;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
} }
a:hover { a:hover {
opacity: 0.8; opacity: 0.8;
} }
body { body {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 2rem 1rem; padding: 2rem 1rem;
min-height: calc(100vh - 120px); min-height: calc(100vh - 120px);
} }
.container { .container {
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
} }
.terminal-path { .terminal-path {
background-color: var(--accent-color); background-color: var(--accent-color);
color: var(--bg-color); color: var(--bg-color);
padding: 5px 10px; padding: 5px 10px;
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
margin-bottom: 1rem; margin-bottom: 1rem;
display: inline-block; display: inline-block;
} }
.content-box { .content-box {
border: 1px solid var(--accent-color); border: 1px solid var(--accent-color);
padding: 2rem; padding: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
transition: border-color 0.3s ease; transition: border-color 0.3s ease;
} }
.nav { .nav {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 2rem; gap: 2rem;
margin: 1.5rem 0; margin: 1.5rem 0;
} }
.nav a { .nav a {
font-size: 1rem; font-size: 1rem;
} }
.nav a::before { .nav a::before {
content: "./"; content: "./";
opacity: 0.7; opacity: 0.7;
} }
.nav a.home::before{
content: ""; .nav a.home::before {
content: "";
} }
.cursor { .cursor {
display: inline-block; display: inline-block;
width: 0.6em; width: 0.6em;
height: 1em; height: 1em;
background-color: var(--text-color); background-color: var(--text-color);
margin-left: 0.2em; margin-left: 0.2em;
animation: blink 1s step-end infinite; animation: blink 1s step-end infinite;
} }
@keyframes blink { @keyframes blink {
from, to { opacity: 1; } from, to {
50% { opacity: 0; } opacity: 1;
}
50% {
opacity: 0;
}
} }
.footer { .footer {
text-align: center; text-align: center;
padding: 2rem 0; padding: 2rem 0;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 300; font-weight: 300;
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
.footer svg { .footer svg {
vertical-align: middle; vertical-align: middle;
} }
.footer .floating { .footer .floating {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: 30px; right: 30px;
z-index: 10; z-index: 10;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: none; border: none;
outline: none; outline: none;
padding: 15px; padding: 15px;
} }
#toTopBtn { #toTopBtn {
display: none; display: none;
background: var(--border-color); background: var(--border-color);
border: none; border: none;
color: var(--text-color); color: var(--text-color);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-family: var(--font-mono); font-family: var(--font-mono);
cursor: pointer; cursor: pointer;
} }
#toTopBtn:hover { #toTopBtn:hover {
background: var(--accent-color); background: var(--accent-color);
color: var(--bg-color); color: var(--bg-color);
} }
/* Theme Switcher */ /* Theme Switcher */
.theme-switcher { .theme-switcher {
background: var(--border-color); background: var(--border-color);
border: none; border: none;
color: var(--text-color); color: var(--text-color);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-family: var(--font-mono); font-family: var(--font-mono);
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
} }
.theme-switcher:hover { .theme-switcher:hover {
background: var(--accent-color); background: var(--accent-color);
color: var(--bg-color); color: var(--bg-color);
} }
/* Contents */ /* Contents */
h1.title { h1.title {
color: var(--header-color); color: var(--header-color);
font-size: 1.75rem; font-size: 1.75rem;
font-weight: bold; font-weight: bold;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
div.content { div.content {
margin: 1rem auto;
span.date {
color: var(--secondary-text-color);
font-size: 0.9rem;
font-weight: 300;
margin-bottom: 1.5rem;
display: block;
}
span.list-date {
color: var(--secondary-text-color);
font-size: 0.9rem;
font-weight: 300;
margin-bottom: 1.5rem;
}
ul, ol, li {
list-style-position: inside;
}
ul {
padding-left: 20px;
margin-top: 0.5em;
margin-bottom: 1em;
}
ul li {
padding-left: 0.5em;
margin-bottom: 0.5em;
line-height: 1.3;
}
pre {
padding: 1rem;
margin: 1rem auto; margin: 1rem auto;
}
/* Highlighted Code Blocks */
pre.astro-code,
pre.astro-code span {
background-color: #3b4252 !important;
}
table { span.date {
border-collapse: collapse; color: var(--secondary-text-color);
} font-size: 0.9rem;
font-weight: 300;
margin-bottom: 1.5rem;
display: block;
}
table, span.list-date {
th, color: var(--secondary-text-color);
td { font-size: 0.9rem;
border: 1px dashed var(--secondary-text-color); font-weight: 300;
padding: 10px; margin-bottom: 1.5rem;
} }
h1, h2, h3, h4 { span.draft-badge {
margin: 0.5rem 0; color: var(--secondary-text-color);
line-height: 1.3; font-weight: 300;
} }
a { ul, ol, li {
text-decoration: underline 1px; list-style-position: inside;
} }
blockquote { ul {
border-left: 1px solid var(--accent-color); padding-left: 20px;
color: var(--text-color); margin-top: 0.5em;
padding: 20px; margin-bottom: 1em;
font-style: italic; }
margin-left: 0;
margin-right: 0;
}
/* Responsive Images */ ul li {
img { padding-left: 0.5em;
max-width: 100%; margin-bottom: 0.5em;
height: 100%; line-height: 1.3;
} }
pre {
padding: 1rem;
margin: 1rem auto;
}
/* Highlighted Code Blocks */
pre.astro-code,
pre.astro-code span {
background-color: #3b4252 !important;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px dashed var(--secondary-text-color);
padding: 10px;
}
h1, h2, h3, h4 {
margin: 0.5rem 0;
line-height: 1.3;
}
a {
text-decoration: underline 1px;
}
blockquote {
border-left: 1px solid var(--accent-color);
color: var(--text-color);
padding: 20px;
font-style: italic;
margin-left: 0;
margin-right: 0;
}
/* Responsive Images */
img {
max-width: 100%;
height: 100%;
}
} }
/* Terminal Commands */ /* Terminal Commands */
.command { .command {
color: var(--terminal-green); color: var(--terminal-green);
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.command::before { .command::before {
content: "$ "; content: "$ ";
opacity: 0.7; opacity: 0.7;
} }
/* helper Class */ /* helper Class */
.fade-in { .fade-in {
opacity: 1; opacity: 1;
transition-property: opacity; transition-property: opacity;
transition-duration: .7s; transition-duration: .7s;
transition-timing-function: cubic-bezier(.4,0,1,1); transition-timing-function: cubic-bezier(.4, 0, 1, 1);
} }
.fade-out { .fade-out {
opacity: 0; opacity: 0;
transition-property: opacity; transition-property: opacity;
transition-duration: .7s; transition-duration: .7s;
transition-timing-function: cubic-bezier(.4,0,1,1); transition-timing-function: cubic-bezier(.4, 0, 1, 1);
} }
/* Media Queries */ /* Media Queries */
@media (max-width: 768px) { @media (max-width: 768px) {
.terminal-path { .terminal-path {
font-size: 1rem; font-size: 1rem;
} }
.nav { .nav {
gap: 1rem; gap: 1rem;
} }
.content-box { .content-box {
padding: 1.5rem; padding: 1.5rem;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.terminal-path { .terminal-path {
font-size: 0.9rem; font-size: 0.9rem;
} }
.nav { .nav {
gap: 0.8rem; gap: 0.8rem;
} }
.content-box { .content-box {
padding: 1rem; padding: 1rem;
} }
} }
/* Printing */ /* Printing */
@media print { @media print {
/* Hide elements not needed for print */ /* Hide elements not needed for print */
nav.nav,.search-container,footer,div.extra-post { nav.nav, .search-container, footer, div.extra-post {
display: none; display: none;
} }
} }