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

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

21
src/components/shortcodes/LinkCard.astro
View file

@ -4,10 +4,12 @@ interface Props {
showArchive?: boolean;
title?: string;
description?: string;
pubDate?: Date | string;
updatedDate?: Date | string;
siteName?: string;
}
const { url, showArchive = true} = Astro.props;
const { url, showArchive = false, pubDate, updatedDate} = Astro.props;
const siteMetadata = {
title: Astro.props.title || '',
@ -17,6 +19,16 @@ const siteMetadata = {
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
async function fetchMetadata(url: string) {
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) {
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 data = await response.json();

11
src/content/posts/markdown-example/index.mdx
View file

@ -91,10 +91,21 @@ You can use callouts to highlight important information or warnings in your cont
### 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.
This most simple one can be used like this:
<LinkCard url="https://astro.build"/>
```mdx
<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">
On a machine with bad network, this will significantly increase build time when no other params are passed to the component.
</Callout>