From fd3b47fa9154c3b37f397d9472f18a431cb57f15 Mon Sep 17 00:00:00 2001 From: grassblock Date: Sun, 8 Jun 2025 21:14:52 +0800 Subject: [PATCH 1/5] feat: add link card shortcode --- src/components/shortcodes/LinkCard.astro | 239 +++++++++++++++++++ src/content/posts/markdown-example/index.mdx | 11 +- 2 files changed, 248 insertions(+), 2 deletions(-) create mode 100644 src/components/shortcodes/LinkCard.astro diff --git a/src/components/shortcodes/LinkCard.astro b/src/components/shortcodes/LinkCard.astro new file mode 100644 index 0000000..8575860 --- /dev/null +++ b/src/components/shortcodes/LinkCard.astro @@ -0,0 +1,239 @@ +--- +interface Props { + url: string; + showArchive?: boolean; + title?: string; + description?: string; + siteName?: string; +} + +const { url, showArchive = true} = Astro.props; + +const siteMetadata = { + title: Astro.props.title || '', + description: Astro.props.description || '', + siteName: Astro.props.siteName || '', + image: '', + domain: new URL(url).hostname || '' +}; + +// Get metadata from the URL +async function fetchMetadata(url: string) { + try { + const response = await fetch(url, { + headers: { + 'User-Agent': 'Mozilla/5.0 (compatible; LinkCard/1.0)' + } + }); + + if (!response.ok) { + throw new Error(`HTTP ${response.status}`); + } + + const html = await response.text(); + + // 提取元数据 + const titleMatch = html.match(/]*>([^<]+)<\/title>/i); + const descriptionMatch = html.match(/]+name=["']description["'][^>]+content=["']([^"']+)["']/i) || + html.match(/]+property=["']og:description["'][^>]+content=["']([^"']+)["']/i); + const imageMatch = html.match(/]+property=["']og:image["'][^>]+content=["']([^"']+)["']/i) || + html.match(/]+name=["']twitter:image["'][^>]+content=["']([^"']+)["']/i); + const siteNameMatch = html.match(/]+property=["']og:site_name["'][^>]+content=["']([^"']+)["']/i); + + return { + title: titleMatch?.[1]?.trim() || new URL(url).hostname, + description: descriptionMatch?.[1]?.trim() || '', + image: imageMatch?.[1]?.trim() || '', + siteName: siteNameMatch?.[1]?.trim() || new URL(url).hostname, + domain: new URL(url).hostname + }; + } catch (error) { + console.warn(`Failed to fetch metadata for ${url}:`, error); + const domain = new URL(url).hostname; + return { + title: domain, + description: '', + image: '', + siteName: domain, + domain + }; + } +} + +// Check if the URL is archived on the Wayback Machine at the build time +async function checkArchive(url: string) { + try { + const archiveUrl = `https://archive.org/wayback/available?url=${encodeURIComponent(url)}`; + const response = await fetch(archiveUrl); + const data = await response.json(); + + if (data.archived_snapshots?.closest?.available) { + return data.archived_snapshots.closest.url; + } + } catch (error) { + console.warn(`Failed to check archive for ${url}:`, error); + } + return null; +} + +// extract metadata and archive URL +const metadata = Astro.props.title ? siteMetadata : await fetchMetadata(url); +const archiveUrl = showArchive ? await checkArchive(url) : null; +--- + +
+ + {metadata.image && ( +
+ {metadata.title} +
+ )} + +
+
+

{metadata.title}

+ {metadata.domain} +
+ + {metadata.description && ( +

{metadata.description}

+ )} + + {metadata.siteName &&
+ {metadata.siteName} +
+ } +
+ + + {showArchive && archiveUrl && ( +
+ + View archived version + +
+ )} +
+ + \ No newline at end of file diff --git a/src/content/posts/markdown-example/index.mdx b/src/content/posts/markdown-example/index.mdx index c2edeb9..5c59da6 100644 --- a/src/content/posts/markdown-example/index.mdx +++ b/src/content/posts/markdown-example/index.mdx @@ -5,6 +5,7 @@ description: "Sample article showcasing basic Markdown syntax and formatting for tags: ["markdown", "css", "html", "sample"] --- import Callout from '/src/components/shortcodes/Callout.astro'; +import LinkCard from '/src/components/shortcodes/LinkCard.astro'; This article offers a sample of basic and extended Markdown formatting that can be used, also it shows how some basic HTML elements are decorated. @@ -43,8 +44,14 @@ You can use callouts to highlight important information or warnings in your cont This is an error callout. It should be used to indicate critical issues that need immediate attention. ``` - - +### 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. + +```mdx + +``` +Or to customize the card further with a title and description: + ## Headings The following HTML `

`—`

` elements represent six levels of section headings. `

` is the highest section level while `

` is the lowest. From 2f415f9c8fa49d2bf35855ee4d2e6b7e2028eacd Mon Sep 17 00:00:00 2001 From: grassblock Date: Sun, 8 Jun 2025 22:33:20 +0800 Subject: [PATCH 2/5] chore(docs): add 'spoiler' example to Markdown syntax example --- src/content/posts/markdown-example/index.mdx | 32 +++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/src/content/posts/markdown-example/index.mdx b/src/content/posts/markdown-example/index.mdx index 5c59da6..a0d9286 100644 --- a/src/content/posts/markdown-example/index.mdx +++ b/src/content/posts/markdown-example/index.mdx @@ -6,6 +6,7 @@ tags: ["markdown", "css", "html", "sample"] --- import Callout from '/src/components/shortcodes/Callout.astro'; import LinkCard from '/src/components/shortcodes/LinkCard.astro'; +import Spoiler from '/src/components/shortcodes/Spoiler.astro'; This article offers a sample of basic and extended Markdown formatting that can be used, also it shows how some basic HTML elements are decorated. @@ -21,6 +22,30 @@ your content here... ``` +### Spoiler +Inspired by the spoiler in [Moegirl wiki](https://zh.moegirl.org.cn/Mainpage), you can use the `Spoiler` component to hide content that you want to reveal later. This is useful for spoilers in game plots , movies plots, or any other content where you want to keep certain information hidden until the user chooses to reveal it. + +To reveal the content, readers can hover over the text to reveal it. + + A hot take: the theme is done through what is called 'vibe coding'. + + +```mdx + + A hot take: the theme is done through what is called 'vibe coding'. + +``` +You can also display a 'tip' for the reader when hovered: + + A hot take: the theme is done through what is called 'vibe coding'. + + +```mdx + + A hot take: the theme is done through what is called 'vibe coding'. + +``` + ### Callouts You can use callouts to highlight important information or warnings in your content. Callouts are styled boxes that draw attention to specific parts of the text. @@ -46,12 +71,17 @@ 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. + ```mdx ``` + + On a machine with bad network, this will significantly increase build time when no other params are passed to the component. + Or to customize the card further with a title and description: + ## Headings The following HTML `

`—`

` elements represent six levels of section headings. `

` is the highest section level while `

` is the lowest. @@ -92,7 +122,7 @@ The blockquote element represents content that is quoted from another source, op ## Tables -Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box. +Tables aren't part of the core Markdown spec, but Astro supports supports them out-of-the-box. | Name | Age | | ----- | --- | From eedd70c95f8f1ccbf1bf6b2644d626369e943ddb Mon Sep 17 00:00:00 2001 From: grassblock Date: Sun, 8 Jun 2025 22:39:34 +0800 Subject: [PATCH 3/5] fix: add margin to code blocks for improved layout --- src/styles/global.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/global.css b/src/styles/global.css index 19555c0..95f55bf 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -223,6 +223,7 @@ div.content { pre { padding: 1rem; + margin: 1rem auto; } /* Highlighted Code Blocks */ pre.astro-code, From ba6579d0cf99cfbd2d8bedd5b47a8f0ff6352ba8 Mon Sep 17 00:00:00 2001 From: grassblock Date: Sun, 8 Jun 2025 22:49:12 +0800 Subject: [PATCH 4/5] chore(docs): add reference from Astro docs --- src/content/posts/markdown-example/index.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/content/posts/markdown-example/index.mdx b/src/content/posts/markdown-example/index.mdx index a0d9286..f75364b 100644 --- a/src/content/posts/markdown-example/index.mdx +++ b/src/content/posts/markdown-example/index.mdx @@ -9,6 +9,12 @@ import LinkCard from '/src/components/shortcodes/LinkCard.astro'; import Spoiler from '/src/components/shortcodes/Spoiler.astro'; This article offers a sample of basic and extended Markdown formatting that can be used, also it shows how some basic HTML elements are decorated. +## Markdown in Astro +> [Markdown](https://daringfireball.net/projects/markdown/) is commonly used to author text-heavy content like blog posts and documentation. Astro includes built-in support for Markdown files that can also include [frontmatter YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) (or [TOML](https://toml.io)) to define custom properties such as a title, description, and tags. +> +> In Astro, you can author content in [GitHub Flavored Markdown](https://github.github.com/gfm/), then render it in `.astro` components. This combines a familiar writing format designed for content with the flexibility of Astro’s component syntax and architecture. + +source: [Markdown in Astro | Docs](https://docs.astro.build/en/guides/markdown-content/) ## Theme Specifics This theme came with a set of shortcodes that can be used to enhance the Markdown experience. These shortcodes are located in the `/src/components/shortcodes` directory and can be used to add custom functionality or styling to your Markdown content. From a2d594b393982b2506f292e314c3451441b82b06 Mon Sep 17 00:00:00 2001 From: grassblock Date: Sun, 8 Jun 2025 22:55:28 +0800 Subject: [PATCH 5/5] chore(docs): update contribution guide --- CONTRIBUTING.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 263540f..13b0663 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -34,6 +34,10 @@ There are other easy ways to support the project and show your appreciation, whi - Environment details (browser, OS, etc.) - For feature requests, describe the feature and why you think it would be useful +For the language of the issue, please use English or Chinese. Both are OK, but using English is preferred as it allows more people to understand the issue and help with it. + +If you are not comfortable with either, you can still use your native language (or use a translator), but I may not be able to fully understand it. + ## Development ### Development Environment This project is built using Astro, requiring a Node.js (v22.15.1 (lts) is recommended) environment. @@ -88,6 +92,11 @@ Now you already made changes to the code and want to commit it. please: - Link any related issues in the PR description (if any) - Provide a clear description of the changes +For the language of the pull request message, please use English or Chinese. Both are OK, but using English is preferred as it allows more people to understand the issue and help with it. + +If you are not comfortable with either, you can still use your native language (or use a translator), but I may not be able to fully understand it. + + ## Code of Conduct Please be respectful and considerate of others when contributing. I want to maintain a welcoming and inclusive environment for everyone.