feat: (link card) disables show archive by default use the date published/updated to get the archived version
This commit is contained in:
parent
dee65f247b
commit
862acbd1f1
2 changed files with 29 additions and 3 deletions
|
@ -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)}×tamp=${timestamp}`;
|
||||||
const response = await fetch(archiveUrl);
|
const response = await fetch(archiveUrl);
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue