feat: more noscript compatibility for outdated callout
This commit is contained in:
parent
b3655b99b3
commit
a06cea5783
2 changed files with 5 additions and 5 deletions
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue