feat: (link card) disables show archive by default use the date published/updated to get the archived version

This commit is contained in:
草师傅 2025-06-19 22:39:19 +08:00
parent dee65f247b
commit 862acbd1f1
2 changed files with 29 additions and 3 deletions

View file

@ -4,10 +4,12 @@ interface Props {
showArchive?: boolean; showArchive?: boolean;
title?: string; title?: string;
description?: string; description?: string;
pubDate?: Date | string;
updatedDate?: Date | string;
siteName?: string; siteName?: string;
} }
const { url, showArchive = true} = Astro.props; const { url, showArchive = false, pubDate, updatedDate} = Astro.props;
const siteMetadata = { const siteMetadata = {
title: Astro.props.title || '', title: Astro.props.title || '',
@ -17,6 +19,16 @@ const siteMetadata = {
domain: new URL(url).hostname || '' domain: new URL(url).hostname || ''
}; };
// Format date to number only format (YYYYMMDD) for archive.org apis
function formatDateToNumber(date: Date | string | undefined): string {
if (!date) return '';
const d = new Date(date);
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
return `${year}${month}${day}`;
}
// Get metadata from the URL // Get metadata from the URL
async function fetchMetadata(url: string) { async function fetchMetadata(url: string) {
try { try {
@ -60,10 +72,13 @@ async function fetchMetadata(url: string) {
} }
} }
// Check if the URL is archived on the Wayback Machine at the build time // Check if the URL is archived on the Wayback Machine at the updated/build time
// TODO: bringing user's own archive service link
async function checkArchive(url: string) { async function checkArchive(url: string) {
try { try {
const archiveUrl = `https://archive.org/wayback/available?url=${encodeURIComponent(url)}`; // Determine which date to use (prefer updatedDate if available, or fallback to the build time)
const timestamp = (updatedDate ? formatDateToNumber(updatedDate) : formatDateToNumber(pubDate)) || formatDateToNumber(new Date());
const archiveUrl = `https://archive.org/wayback/available?url=${encodeURIComponent(url)}&timestamp=${timestamp}`;
const response = await fetch(archiveUrl); const response = await fetch(archiveUrl);
const data = await response.json(); const data = await response.json();

View file

@ -91,10 +91,21 @@ You can use callouts to highlight important information or warnings in your cont
### LinkCard ### LinkCard
You can use the `LinkCard` component to create cards that link to external resources or pages. This is useful for showcasing projects, documentation, or any other relevant links. You can use the `LinkCard` component to create cards that link to external resources or pages. This is useful for showcasing projects, documentation, or any other relevant links.
This most simple one can be used like this:
<LinkCard url="https://astro.build"/> <LinkCard url="https://astro.build"/>
```mdx ```mdx
<LinkCard url="https://astro.build"/> <LinkCard url="https://astro.build"/>
``` ```
or with a archive link:
<LinkCard url="https://astro.build" showArchive="true" pubDate={frontmatter.pubDate} updatedDate={frontmatter.updatedDate} />
```mdx
<LinkCard url="https://astro.build" showArchive="true" pubDate={frontmatter.pubDate} updatedDate={frontmatter.updatedDate} />
```
<Callout type="info">
The `pubDate` or `updatedDate` props is optional, but in order to make the component to display the archived version around the date correctly, they should be passed.
Choose one or both of them according to your needs.
</Callout>
<Callout type="warning"> <Callout type="warning">
On a machine with bad network, this will significantly increase build time when no other params are passed to the component. On a machine with bad network, this will significantly increase build time when no other params are passed to the component.
</Callout> </Callout>