@@ -5,7 +5,8 @@ permalink: blog
55icon : lucide:newspaper
66order : 6
77---
8- import config from ' ../../../../explainer.config' ;
8+
9+ import config from " explainer.config" ;
910
1011# Blog
1112
@@ -21,6 +22,7 @@ You should use the frontmatter on top of the file to define the article metadata
2122> The ` permalink ` property is required. If you modify it, the URL of the article will change.
2223
2324:::code-group labels=[ frontmatter, schema]
25+
2426``` mdx
2527---
2628title: "Article title"
@@ -33,6 +35,7 @@ thumbnail: path/to/thumbnail.png
3335publishedAt: 2024-01-01:23:00:00
3436---
3537```
38+
3639``` ts
3740const schema = z .object ({
3841 title: z .string (),
@@ -41,9 +44,10 @@ const schema = z.object({
4144 icon: z .string ().optional (),
4245 thumbnail: z .string ().optional (),
4346 authors: z .array (z .string ()).optional (),
44- publishedAt: z .string ().optional ()
45- }),
47+ publishedAt: z .string ().optional (),
48+ });
4649```
50+
4751:::
4852
4953### Article visibility
@@ -60,43 +64,41 @@ In the blog index page, the articles are sorted by `publishedAt` date and displa
6064The ` authors ` property is an array of author names.
6165
6266<div class = " mt-4 flex flex-wrap items-center gap-6" >
63- {
64- Object .entries (config .blog .authors ).map (([key , author ]) => {
65- return (
66- < div
67- data - orientation = " horizontal"
68- class = " relative group/user flex items-center gap-2"
69- >
70- < span class = " inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base shrink-0 transform transition-transform duration-200 group-hover/user:scale-115" >
71- < img
72- width = " 32"
73- height = " 32"
74- alt = {author.name }
75- class = " h-full w-full rounded-[inherit] object-cover"
76- src = {author.avatar }
77- / >
78- < / span >
79- < div class = " " >
80- < a
81- href = {author.href }
82- tabindex = " -1"
83- rel = " noopener noreferrer"
84- aria - label = {author.name }
85- class = " focus:outline-none peer"
86- >
87- < span class = " absolute inset-0" aria - hidden = " true" / >
88- < / a >
89- < p class = " font-medium text-(--ui-text) peer-hover:text-(--ui-text-highlighted) transition-colors text-sm !p-0" >
90- {author .name }
91- < / p >
92- < p class = " text-muted-foreground transition-colors text-xs !p-0" >
93- @{key }
94- < / p >
95- < / div >
67+ { Object .entries (config .blog .authors ).map (([key , author ]) => {
68+ return (
69+ <div
70+ data-orientation = " horizontal"
71+ class = " relative group/user flex items-center gap-2"
72+ >
73+ <span class = " inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base shrink-0 transform transition-transform duration-200 group-hover/user:scale-115" >
74+ <img
75+ width = " 32"
76+ height = " 32"
77+ alt = { author .name }
78+ class = " h-full w-full rounded-[inherit] object-cover"
79+ src = { author .avatar }
80+ />
81+ </span >
82+ <div class = " " >
83+ <a
84+ href = { author .href }
85+ tabindex = " -1"
86+ rel = " noopener noreferrer"
87+ aria-label = { author .name }
88+ class = " focus:outline-none peer"
89+ >
90+ <span class = " absolute inset-0" aria-hidden = " true" />
91+ </a >
92+ <p class = " font-medium text-(--ui-text) peer-hover:text-(--ui-text-highlighted) transition-colors text-sm !p-0" >
93+ { author .name }
94+ </p >
95+ <p class = " text-muted-foreground transition-colors text-xs !p-0" >
96+ @{ key }
97+ </p >
9698 </div >
97- );
98- })
99- }
99+ </ div >
100+ );
101+ }) }
100102</div >
101103
102104### Add new authors
@@ -108,18 +110,19 @@ export default defineExplainerConfig({
108110 blog: {
109111 authors: {
110112 leadcode_dev: {
111- name: ' LeadcodeDev' ,
112- avatar: ' https://avatars.githubusercontent.com/u/8946317?v=4' ,
113- href: ' https://github.com/LeadcodeDev' ,
113+ name: " LeadcodeDev" ,
114+ avatar: " https://avatars.githubusercontent.com/u/8946317?v=4" ,
115+ href: " https://github.com/LeadcodeDev" ,
114116 },
115- nathaelb: { // [!code ++]
116- name: 'NathaelB', // [!code ++]
117- avatar: 'https://avatars.githubusercontent.com/u/64804778?v=4', // [!code ++]
118- href: 'https://github.com/NathaelB', // [!code ++]
117+ nathaelb: {
118+ // [!code ++]
119+ name: " NathaelB" , // [!code ++]
120+ avatar: " https://avatars.githubusercontent.com/u/64804778?v=4" , // [!code ++]
121+ href: " https://github.com/NathaelB" , // [!code ++]
119122 }, // [!code ++]
120- }
123+ },
121124 },
122- })
125+ });
123126```
124127
125128The ` authors ` property is an object where the key is the author name and the value is an object with the following properties:
@@ -136,4 +139,4 @@ authors:
136139 - leadcode_dev
137140 - nathaelb 👈
138141---
139- ` ` `
142+ ```
0 commit comments