feat: more noscript compatibility for outdated callout

This commit is contained in:
草师傅 2025-08-20 18:06:09 +08:00
parent b3655b99b3
commit a06cea5783
Signed by: gb
GPG key ID: 43330A030E2D6478
2 changed files with 5 additions and 5 deletions

View file

@ -1,22 +1,22 @@
--- ---
import Callout from "./shortcodes/Callout.astro" import Callout from "./shortcodes/Callout.astro"
import { siteConfig} from "../config"; import { siteConfig } from "../config";
const daysBeforeOutdated = siteConfig.outdatedCallout.daysBeforeOutdated || 90; const daysBeforeOutdated = siteConfig.outdatedCallout.daysBeforeOutdated || 90;
const { lastUpdatedAt = '' } = Astro.props const { lastUpdatedAt = '', noscript = false } = Astro.props
const lastUpdated = new Date(lastUpdatedAt).getTime() const lastUpdated = new Date(lastUpdatedAt).getTime()
const dateNow = new Date().getTime() const dateNow = new Date().getTime()
const dateDelta = dateNow - lastUpdated const dateDelta = dateNow - lastUpdated
const Day = 1000 * 60 * 60 * 24 const Day = 1000 * 60 * 60 * 24
const daysDelta = Math.round(dateDelta / Day) const daysDelta = Math.round(dateDelta / Day)
--- ---
{ ( lastUpdatedAt && daysDelta >= daysBeforeOutdated ) && { ( !noscript && daysDelta >= daysBeforeOutdated ) &&
<Callout type="warning" icon="📅"> <Callout type="warning" icon="📅">
This article was updated {daysDelta} days ago. The content may be outdated. This article was updated {daysDelta} days ago. The content may be outdated.
</Callout> </Callout>
} }
{ (!lastUpdatedAt && daysDelta >= daysBeforeOutdated) && { ( noscript && daysDelta >= daysBeforeOutdated ) &&
<Callout type="warning" icon="📅"> <Callout type="warning" icon="📅">
This article was updated a long time ago. The content may be outdated. This article was updated a long time ago. The content may be outdated.
</Callout> </Callout>

View file

@ -74,7 +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} /> { siteConfig.outdatedCallout.enabled && (siteConfig.noClientJavaScript ? <OutDatedCallOut noscript=true lastUpdatedAt={lastUpdated} /> : <OutDatedCallOut server:defer lastUpdatedAt={lastUpdated} ><OutDatedCallOut noscript lastUpdatedAt={lastUpdated} slot="fallback" ></OutDatedCallOut></OutDatedCallOut>)}
<div class="content"> <div class="content">
<Content /> <Content />
</div> </div>