feat: add a friend link (blogroll) shortcode
This commit is contained in:
parent
6a2d5fd912
commit
de4de10703
6 changed files with 54 additions and 13 deletions
19
src/components/shortcodes/BlogRoll.astro
Normal file
19
src/components/shortcodes/BlogRoll.astro
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
---
|
||||||
|
import {getCollection} from "astro:content";
|
||||||
|
import { Image } from 'astro:assets';
|
||||||
|
const links = await getCollection('links');
|
||||||
|
---
|
||||||
|
<h2>My Blogroll</h2>
|
||||||
|
{links.length > 0 && links.map((link =>
|
||||||
|
<div class="link">
|
||||||
|
{link.data.avatar && <Image src={link.data.avatar} alt={`avatar of ${link.id}`} width="16" height="16"></Image>}
|
||||||
|
<a href={link.data.link} target="_blank" rel="noopener noreferrer">
|
||||||
|
{link.id}
|
||||||
|
</a> - {link.data.description}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<style>
|
||||||
|
.link img {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,6 +1,8 @@
|
||||||
import {defineCollection} from 'astro:content';
|
import {defineCollection} from 'astro:content';
|
||||||
import {posts} from './posts/_schemas';
|
import {posts} from './posts/_schemas';
|
||||||
import {pages} from "./pages/_schemas";
|
import {pages} from "./pages/_schemas";
|
||||||
|
import {file} from 'astro/loaders';
|
||||||
|
import { z } from 'astro:content';
|
||||||
|
|
||||||
const blogCollection = defineCollection({
|
const blogCollection = defineCollection({
|
||||||
type: 'content',
|
type: 'content',
|
||||||
|
@ -10,8 +12,17 @@ const pageCollection = defineCollection({
|
||||||
type: 'content',
|
type: 'content',
|
||||||
schema: pages,
|
schema: pages,
|
||||||
});
|
});
|
||||||
|
const blogRollData = defineCollection({
|
||||||
|
loader: file("src/data/links.yaml"),
|
||||||
|
schema: z.object({
|
||||||
|
link: z.string(),
|
||||||
|
avatar: z.string().optional(),
|
||||||
|
description: z.string().optional(),
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
export const collections = {
|
export const collections = {
|
||||||
'posts': blogCollection,
|
'posts': blogCollection,
|
||||||
'pages': pageCollection,
|
'pages': pageCollection,
|
||||||
|
'links': blogRollData,
|
||||||
};
|
};
|
|
@ -1,5 +0,0 @@
|
||||||
---
|
|
||||||
title: 'Test Page'
|
|
||||||
description: 'This is a test page'
|
|
||||||
---
|
|
||||||
testestestest
|
|
9
src/content/pages/test.mdx
Normal file
9
src/content/pages/test.mdx
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
title: 'Test Page'
|
||||||
|
description: 'This is a test page'
|
||||||
|
---
|
||||||
|
import BlogRoll from "../../components/shortcodes/BlogRoll.astro"
|
||||||
|
|
||||||
|
testestestest
|
||||||
|
|
||||||
|
<BlogRoll/>
|
|
@ -1,6 +1,6 @@
|
||||||
import { z } from 'astro:content';
|
import { z } from 'astro:content';
|
||||||
|
|
||||||
export const posts = ({ image }:{image: ()=> z.ZodAny}) => z.object({
|
export const posts = ({ image }) => z.object({
|
||||||
title: z.string(),
|
title: z.string(),
|
||||||
description: z.string(),
|
description: z.string(),
|
||||||
pubDate: z.coerce.date(),
|
pubDate: z.coerce.date(),
|
||||||
|
|
7
src/data/links.yaml
Normal file
7
src/data/links.yaml
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
Link: # the name/title of the destination
|
||||||
|
link: https://www.youtube.com/watch?v=cqT0OKlEo9w # the link to the destination
|
||||||
|
avatar: https://example.org/avatar.png # set an avatar
|
||||||
|
description: We know each other for so long # the description
|
||||||
|
Another Link:
|
||||||
|
link: https://google.com
|
||||||
|
description: Your heart's been aching, but you're too shy to say it
|
Loading…
Add table
Add a link
Reference in a new issue