update to astro V2

This commit is contained in:
Nico 2023-02-03 11:21:01 +01:00
parent 082b193d23
commit f24a432155
14 changed files with 789 additions and 796 deletions

View File

@ -11,15 +11,15 @@ declare module "astro-i18n" {
export function l<Uri extends RouteUri>( export function l<Uri extends RouteUri>(
route: Uri | string & {}, route: Uri | string & {},
...args: undefined extends RouteParams[Uri] ...args: keyof RouteParams extends Uri
? [params?: RouteParams[Uri], targetLangCode?: LangCode, routeLangCode?: LangCode] ? [params?: Record<string, string>, targetLangCode?: LangCode, routeLangCode?: LangCode]
: [params: RouteParams[Uri], targetLangCode?: LangCode, routeLangCode?: LangCode] : [params: RouteParams[Uri], targetLangCode?: LangCode, routeLangCode?: LangCode]
): string ): string
export function t<Path extends TranslationPath>( export function t<Path extends TranslationPath>(
path: Path, path: Path | string & {},
...args: undefined extends TranslationOptions[Path] ...args: undefined extends TranslationOptions[Path]
? [options?: TranslationOptions[Path], langCode?: LangCode] ? [options?: keyof TranslationOptions extends Path ? Record<string, unknown> : TranslationOptions[Path], langCode?: LangCode]
: [options: TranslationOptions[Path], langCode?: LangCode] : [options: TranslationOptions[Path], langCode?: LangCode]
): string ): string
@ -40,6 +40,8 @@ declare module "astro-i18n" {
set langCode(langCode: LangCode) set langCode(langCode: LangCode)
get formatters(): Record<string, InterpolationFormatter> get formatters(): Record<string, InterpolationFormatter>
init(Astro: { url: URL }, formatters?: Record<string, InterpolationFormatter>): void init(Astro: { url: URL }, formatters?: Record<string, InterpolationFormatter>): void
addTranslations(translations: Translations): void
addRouteTranslations(routeTranslations: RouteTranslations): void
getFormatter(name: string): InterpolationFormatter | undefined getFormatter(name: string): InterpolationFormatter | undefined
setFormatter(name: string, formatter: InterpolationFormatter): void setFormatter(name: string, formatter: InterpolationFormatter): void
deleteFormatter(name: string): void deleteFormatter(name: string): void

View File

@ -1,43 +1,67 @@
declare module 'astro:content' { declare module 'astro:content' {
export { z } from 'astro/zod'; export { z } from 'astro/zod';
export type CollectionEntry<C extends keyof typeof entryMap> = export type CollectionEntry<C extends keyof typeof entryMap> =
typeof entryMap[C][keyof typeof entryMap[C]] & Render; (typeof entryMap)[C][keyof (typeof entryMap)[C]] & Render;
type BaseCollectionConfig<S extends import('astro/zod').ZodRawShape> = { type BaseSchemaWithoutEffects =
| import('astro/zod').AnyZodObject
| import('astro/zod').ZodUnion<import('astro/zod').AnyZodObject[]>
| import('astro/zod').ZodDiscriminatedUnion<string, import('astro/zod').AnyZodObject[]>
| import('astro/zod').ZodIntersection<
import('astro/zod').AnyZodObject,
import('astro/zod').AnyZodObject
>;
type BaseSchema =
| BaseSchemaWithoutEffects
| import('astro/zod').ZodEffects<BaseSchemaWithoutEffects>;
type BaseCollectionConfig<S extends BaseSchema> = {
schema?: S; schema?: S;
slug?: (entry: { slug?: (entry: {
id: CollectionEntry<keyof typeof entryMap>['id']; id: CollectionEntry<keyof typeof entryMap>['id'];
defaultSlug: string; defaultSlug: string;
collection: string; collection: string;
body: string; body: string;
data: import('astro/zod').infer<import('astro/zod').ZodObject<S>>; data: import('astro/zod').infer<S>;
}) => string | Promise<string>; }) => string | Promise<string>;
}; };
export function defineCollection<S extends import('astro/zod').ZodRawShape>( export function defineCollection<S extends BaseSchema>(
input: BaseCollectionConfig<S> input: BaseCollectionConfig<S>
): BaseCollectionConfig<S>; ): BaseCollectionConfig<S>;
export function getEntry<C extends keyof typeof entryMap, E extends keyof typeof entryMap[C]>( type EntryMapKeys = keyof typeof entryMap;
collection: C, type AllValuesOf<T> = T extends any ? T[keyof T] : never;
entryKey: E type ValidEntrySlug<C extends EntryMapKeys> = AllValuesOf<(typeof entryMap)[C]>['slug'];
): Promise<typeof entryMap[C][E] & Render>;
export function getCollection< export function getEntryBySlug<
C extends keyof typeof entryMap, C extends keyof typeof entryMap,
E extends keyof typeof entryMap[C] E extends ValidEntrySlug<C> | (string & {})
>( >(
collection: C, collection: C,
filter?: (data: typeof entryMap[C][E]) => boolean // Note that this has to accept a regular string too, for SSR
): Promise<(typeof entryMap[C][E] & Render)[]>; entrySlug: E
): E extends ValidEntrySlug<C>
? Promise<CollectionEntry<C>>
: Promise<CollectionEntry<C> | undefined>;
export function getCollection<C extends keyof typeof entryMap, E extends CollectionEntry<C>>(
collection: C,
filter?: (entry: CollectionEntry<C>) => entry is E
): Promise<E[]>;
export function getCollection<C extends keyof typeof entryMap>(
collection: C,
filter?: (entry: CollectionEntry<C>) => unknown
): Promise<CollectionEntry<C>[]>;
type InferEntrySchema<C extends keyof typeof entryMap> = import('astro/zod').infer< type InferEntrySchema<C extends keyof typeof entryMap> = import('astro/zod').infer<
import('astro/zod').ZodObject<Required<ContentConfig['collections'][C]>['schema']> Required<ContentConfig['collections'][C]>['schema']
>; >;
type Render = { type Render = {
render(): Promise<{ render(): Promise<{
Content: import('astro').MarkdownInstance<{}>['Content']; Content: import('astro').MarkdownInstance<{}>['Content'];
headings: import('astro').MarkdownHeading[]; headings: import('astro').MarkdownHeading[];
injectedFrontmatter: Record<string, any>; remarkPluginFrontmatter: Record<string, any>;
}>; }>;
}; };
@ -45,98 +69,98 @@ declare module 'astro:content' {
"articles": { "articles": {
"en/2022.md": { "en/2022.md": {
id: "en/2022.md", id: "en/2022.md",
slug: "en/2022", slug: "2022",
body: string, body: string,
collection: "articles", collection: "articles",
data: InferEntrySchema<"articles"> data: InferEntrySchema<"articles">
}, },
"en/after-effects-expressions.mdx": { "en/after-effects-expressions.mdx": {
id: "en/after-effects-expressions.mdx", id: "en/after-effects-expressions.mdx",
slug: "en/after-effects-expressions", slug: "after-effects-expressions",
body: string, body: string,
collection: "articles", collection: "articles",
data: InferEntrySchema<"articles"> data: InferEntrySchema<"articles">
}, },
"en/faq.md": { "en/faq.md": {
id: "en/faq.md", id: "en/faq.md",
slug: "en/faq", slug: "faq",
body: string, body: string,
collection: "articles", collection: "articles",
data: InferEntrySchema<"articles"> data: InferEntrySchema<"articles">
}, },
"en/gratuiste.md": { "en/gratuiste.md": {
id: "en/gratuiste.md", id: "en/gratuiste.md",
slug: "en/gratuiste", slug: "gratuiste",
body: string, body: string,
collection: "articles", collection: "articles",
data: InferEntrySchema<"articles"> data: InferEntrySchema<"articles">
}, },
"en/sci-hub-blocage.mdx": { "en/sci-hub-blocage.mdx": {
id: "en/sci-hub-blocage.mdx", id: "en/sci-hub-blocage.mdx",
slug: "en/sci-hub-blocage", slug: "sci-hub-unblock",
body: string, body: string,
collection: "articles", collection: "articles",
data: InferEntrySchema<"articles"> data: InferEntrySchema<"articles">
}, },
"en/the-day-I-jamd.mdx": { "en/the-day-I-jamd.mdx": {
id: "en/the-day-I-jamd.mdx", id: "en/the-day-I-jamd.mdx",
slug: "en/the-day-I-jamd", slug: "the-day-I-jamd",
body: string, body: string,
collection: "articles", collection: "articles",
data: InferEntrySchema<"articles"> data: InferEntrySchema<"articles">
}, },
"en/video-compression.mdx": { "en/video-compression.mdx": {
id: "en/video-compression.mdx", id: "en/video-compression.mdx",
slug: "en/video-compression", slug: "video-compression",
body: string, body: string,
collection: "articles", collection: "articles",
data: InferEntrySchema<"articles"> data: InferEntrySchema<"articles">
}, },
"fr/2022.md": { "fr/2022.md": {
id: "fr/2022.md", id: "fr/2022.md",
slug: "fr/2022", slug: "2022",
body: string, body: string,
collection: "articles", collection: "articles",
data: InferEntrySchema<"articles"> data: InferEntrySchema<"articles">
}, },
"fr/after-effects-expressions.md": { "fr/after-effects-expressions.md": {
id: "fr/after-effects-expressions.md", id: "fr/after-effects-expressions.md",
slug: "fr/after-effects-expressions", slug: "after-effects-expressions",
body: string, body: string,
collection: "articles", collection: "articles",
data: InferEntrySchema<"articles"> data: InferEntrySchema<"articles">
}, },
"fr/faq.md": { "fr/faq.md": {
id: "fr/faq.md", id: "fr/faq.md",
slug: "fr/faq", slug: "faq",
body: string, body: string,
collection: "articles", collection: "articles",
data: InferEntrySchema<"articles"> data: InferEntrySchema<"articles">
}, },
"fr/gratuiste.md": { "fr/gratuiste.md": {
id: "fr/gratuiste.md", id: "fr/gratuiste.md",
slug: "fr/gratuiste", slug: "gratuiste",
body: string, body: string,
collection: "articles", collection: "articles",
data: InferEntrySchema<"articles"> data: InferEntrySchema<"articles">
}, },
"fr/sci-hub-blocage.mdx": { "fr/sci-hub-blocage.mdx": {
id: "fr/sci-hub-blocage.mdx", id: "fr/sci-hub-blocage.mdx",
slug: "fr/sci-hub-blocage", slug: "sci-hub-blocage",
body: string, body: string,
collection: "articles", collection: "articles",
data: InferEntrySchema<"articles"> data: InferEntrySchema<"articles">
}, },
"fr/the-day-I-jamd.mdx": { "fr/the-day-I-jamd.mdx": {
id: "fr/the-day-I-jamd.mdx", id: "fr/the-day-I-jamd.mdx",
slug: "fr/the-day-I-jamd", slug: "the-day-I-jamd",
body: string, body: string,
collection: "articles", collection: "articles",
data: InferEntrySchema<"articles"> data: InferEntrySchema<"articles">
}, },
"fr/video-compression.md": { "fr/video-compression.md": {
id: "fr/video-compression.md", id: "fr/video-compression.md",
slug: "fr/video-compression", slug: "video-compression",
body: string, body: string,
collection: "articles", collection: "articles",
data: InferEntrySchema<"articles"> data: InferEntrySchema<"articles">
@ -145,98 +169,98 @@ declare module 'astro:content' {
"fragments": { "fragments": {
"en/acme-sh-tls-cert.md": { "en/acme-sh-tls-cert.md": {
id: "en/acme-sh-tls-cert.md", id: "en/acme-sh-tls-cert.md",
slug: "en/acme-sh-tls-cert", slug: "acme-sh-tls-cert",
body: string, body: string,
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
}, },
"en/array-vs-array.md": { "en/array-vs-array.md": {
id: "en/array-vs-array.md", id: "en/array-vs-array.md",
slug: "en/array-vs-array", slug: "array-vs-array",
body: string, body: string,
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
}, },
"en/buttons.md": { "en/buttons.md": {
id: "en/buttons.md", id: "en/buttons.md",
slug: "en/buttons", slug: "buttons",
body: string, body: string,
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
}, },
"en/image-full.mdx": { "en/image-full.mdx": {
id: "en/image-full.mdx", id: "en/image-full.mdx",
slug: "en/image-full", slug: "image-full",
body: string, body: string,
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
}, },
"en/nuxt-graphql-static.md": { "en/nuxt-graphql-static.md": {
id: "en/nuxt-graphql-static.md", id: "en/nuxt-graphql-static.md",
slug: "en/nuxt-graphql-static", slug: "nuxt-graphql-static",
body: string, body: string,
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
}, },
"en/super-cookies.md": { "en/super-cookies.md": {
id: "en/super-cookies.md", id: "en/super-cookies.md",
slug: "en/super-cookies", slug: "super-cookies",
body: string, body: string,
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
}, },
"en/toulouse-fun.md": { "en/toulouse-fun.md": {
id: "en/toulouse-fun.md", id: "en/toulouse-fun.md",
slug: "en/toulouse-fun", slug: "toulouse-fun",
body: string, body: string,
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
}, },
"fr/acme-sh-tls-cert.md": { "fr/acme-sh-tls-cert.md": {
id: "fr/acme-sh-tls-cert.md", id: "fr/acme-sh-tls-cert.md",
slug: "fr/acme-sh-tls-cert", slug: "acme-sh-tls-cert",
body: string, body: string,
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
}, },
"fr/array-vs-array.md": { "fr/array-vs-array.md": {
id: "fr/array-vs-array.md", id: "fr/array-vs-array.md",
slug: "fr/array-vs-array", slug: "array-vs-array",
body: string, body: string,
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
}, },
"fr/buttons.mdx": { "fr/buttons.mdx": {
id: "fr/buttons.mdx", id: "fr/buttons.mdx",
slug: "fr/buttons", slug: "buttons",
body: string, body: string,
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
}, },
"fr/image-full.mdx": { "fr/image-full.mdx": {
id: "fr/image-full.mdx", id: "fr/image-full.mdx",
slug: "fr/image-full", slug: "image-full",
body: string, body: string,
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
}, },
"fr/nuxt-graphql-static.md": { "fr/nuxt-graphql-static.md": {
id: "fr/nuxt-graphql-static.md", id: "fr/nuxt-graphql-static.md",
slug: "fr/nuxt-graphql-static", slug: "nuxt-graphql-static",
body: string, body: string,
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
}, },
"fr/super-cookies.md": { "fr/super-cookies.md": {
id: "fr/super-cookies.md", id: "fr/super-cookies.md",
slug: "fr/super-cookies", slug: "super-cookies",
body: string, body: string,
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
}, },
"fr/toulouse-fun.md": { "fr/toulouse-fun.md": {
id: "fr/toulouse-fun.md", id: "fr/toulouse-fun.md",
slug: "fr/toulouse-fun", slug: "toulouse-fun",
body: string, body: string,
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
@ -245,5 +269,5 @@ declare module 'astro:content' {
}; };
type ContentConfig = typeof import("./config"); type ContentConfig = typeof import("../src/content/config");
} }

View File

@ -11,9 +11,6 @@ import sitemap from "@astrojs/sitemap";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: "https://www.nardu.in", site: "https://www.nardu.in",
experimental: {
contentCollections: true,
},
markdown: { markdown: {
syntaxHighlight: "prism", syntaxHighlight: "prism",
}, },

View File

@ -13,11 +13,11 @@
"i18n:sync": "astro-i18n sync" "i18n:sync": "astro-i18n sync"
}, },
"dependencies": { "dependencies": {
"@astrojs/image": "^0.12.1", "@astrojs/image": "^0.14.0",
"@astrojs/mdx": "^0.13.0", "@astrojs/mdx": "^0.16.0",
"@astrojs/sitemap": "^1.0.0", "@astrojs/sitemap": "^1.0.1",
"astro": "1.7.2", "astro": "2.0.6",
"astro-i18n": "^1.4.5" "astro-i18n": "^1.6.4"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",

File diff suppressed because it is too large Load Diff

View File

@ -6,7 +6,7 @@ const { item, routeName } = Astro.props;
<div class="card"> <div class="card">
<div> <div>
<h3> <h3>
<a class="clean-link card__link" href={`${routeName}/${item.data.slug}`} <a class="clean-link card__link" href={`${routeName}/${item.slug}`}
>{item.data.title}</a >{item.data.title}</a
> >
</h3> </h3>
@ -111,19 +111,4 @@ const { item, routeName } = Astro.props;
font-weight: 500; font-weight: 500;
color: var(--darkBlue); color: var(--darkBlue);
} }
/* @media screen and (min-width: 768px) {
h3 {
margin-block-start: 0;
margin-block-end: var(--space-2xs);
}
.card {
padding: var(--space-xs-s) var(--space-2xs-xs);
}
}
@media screen and (min-width: 1060px) {
.card {
margin: 0;
}
} */
</style> </style>

View File

@ -1,11 +1,10 @@
import { z, defineCollection } from "astro:content"; import { z, defineCollection } from "astro:content";
const articles = defineCollection({ const articles = defineCollection({
schema: { schema: z.object({
title: z.string(), title: z.string(),
subtitle: z.string(), subtitle: z.string(),
lang: z.enum(["fr", "en"]), lang: z.enum(["fr", "en"]),
slug: z.string(),
tags: z.array(z.string()), // An array of strings tags: z.array(z.string()), // An array of strings
// Parse pubDate as a browser-standard `Date` object // Parse pubDate as a browser-standard `Date` object
createdAt: z.string().transform((str) => new Date(str)), createdAt: z.string().transform((str) => new Date(str)),
@ -15,15 +14,14 @@ const articles = defineCollection({
.optional(), .optional(),
code: z.boolean().optional() || false, code: z.boolean().optional() || false,
draft: z.boolean().optional() || false, draft: z.boolean().optional() || false,
}, }),
}); });
const fragments = defineCollection({ const fragments = defineCollection({
schema: { schema: z.object({
title: z.string(), title: z.string(),
subtitle: z.string(), subtitle: z.string(),
lang: z.enum(["fr", "en"]), lang: z.enum(["fr", "en"]),
slug: z.string(),
tags: z.array(z.string()), // An array of strings tags: z.array(z.string()), // An array of strings
// Parse pubDate as a browser-standard `Date` object // Parse pubDate as a browser-standard `Date` object
createdAt: z.string().transform((str) => new Date(str)), createdAt: z.string().transform((str) => new Date(str)),
@ -33,7 +31,7 @@ const fragments = defineCollection({
.optional(), .optional(),
code: z.boolean().optional() || false, code: z.boolean().optional() || false,
draft: z.boolean().optional() || false, draft: z.boolean().optional() || false,
}, }),
}); });
export const collections = { export const collections = {

1
src/env.d.ts vendored
View File

@ -1,3 +1,4 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="@astrojs/image/client" /> /// <reference types="@astrojs/image/client" />
/// <reference path="../.astro-i18n/generated.d.ts" /> /// <reference path="../.astro-i18n/generated.d.ts" />

View File

@ -12,7 +12,7 @@ export async function getStaticPaths() {
return data.lang === astroI18n.langCode; return data.lang === astroI18n.langCode;
}); });
return articles.map((article) => ({ return articles.map((article) => ({
params: { slug: article.data.slug }, params: { slug: article.slug },
props: { article }, props: { article },
})); }));
} }

View File

@ -12,7 +12,7 @@ export async function getStaticPaths() {
return data.lang === astroI18n.langCode; return data.lang === astroI18n.langCode;
}); });
return snippets.map((snippet) => ({ return snippets.map((snippet) => ({
params: { slug: snippet.data.slug }, params: { slug: snippet.slug },
props: { snippet }, props: { snippet },
})); }));
} }

View File

@ -8,8 +8,8 @@
"latestProjects": "Latest projects", "latestProjects": "Latest projects",
"latestArticles": "Latest articles", "latestArticles": "Latest articles",
"allProjects": "All projects", "allProjects": "All projects",
"allArticles": "All articles", "allArticles": "Browse all articles",
"latestSnippets": "Latest snippets", "latestSnippets": "Latest snippets",
"allSnippets": "All snippets", "allSnippets": "Browse all snippets",
"toc": "table of content" "toc": "table of content"
} }

View File

@ -8,8 +8,8 @@
"latestProjects": "Derniers projets", "latestProjects": "Derniers projets",
"latestArticles": "Derniers articles", "latestArticles": "Derniers articles",
"allProjects": "Tous les projets", "allProjects": "Tous les projets",
"allArticles": "Tous les articles", "allArticles": "Consulter tous les articles",
"latestSnippets": "Derniers fragments", "latestSnippets": "Derniers fragments",
"allSnippets": "Tous les fragments", "allSnippets": "Consulter tous les fragments",
"toc": "table des matières" "toc": "table des matières"
} }

View File

@ -75,16 +75,20 @@ const sortedSnippets = localizedSnippets.sort(
)) ))
} }
<section class="region latest"> <section class="region flow latest">
<div class="flow latest__articles"> <div class="flow latest__articles">
<h2>{t("index.latestArticles")}</h2> <h2>{t("index.latestArticles")}</h2>
<ListCards list={sortedArticles} routeName={t("article.titre")} /> <ListCards list={sortedArticles} routeName={t("article.titre")} />
<p><a href={l("/articles")}>{t("index.allArticles")}</a></p> <p class="latest__link">
<a href={l("/articles")}>{t("index.allArticles")}</a>
</p>
</div> </div>
<div class="flow latest__snippets"> <div class="flow latest__snippets">
<h2>{t("index.latestSnippets")}</h2> <h2>{t("index.latestSnippets")}</h2>
<ListCards list={sortedSnippets} routeName={t("fragments.titre")} /> <ListCards list={sortedSnippets} routeName={t("fragments.titre")} />
<p><a href={l("/fragments")}>{t("index.allSnippets")}</a></p> <p class="latest__link">
<a href={l("/fragments")}>{t("index.allSnippets")}</a>
</p>
</div> </div>
</section> </section>
</BaseLayout> </BaseLayout>
@ -163,6 +167,14 @@ const sortedSnippets = localizedSnippets.sort(
font-size: var(--size-1); font-size: var(--size-1);
} }
.latest {
--flow-space: var(--space-l-xl);
}
.latest__link {
text-align: end;
}
@container section (min-width: 50rem) { @container section (min-width: 50rem) {
.section__container { .section__container {
flex-direction: row; flex-direction: row;

View File

@ -37,7 +37,7 @@ const pageTitle = t("sitemap");
{ {
localizedArticles.map((article) => ( localizedArticles.map((article) => (
<li> <li>
<a href={l("/articles/[slug]", { slug: article.data.slug })}> <a href={l("/articles/[slug]", { slug: article.slug })}>
{article.data.title} {article.data.title}
</a> </a>
</li> </li>
@ -53,7 +53,7 @@ const pageTitle = t("sitemap");
{ {
localizedFragments.map((fragment) => ( localizedFragments.map((fragment) => (
<li> <li>
<a href={l("/fragments/[slug]", { slug: fragment.data.slug })}> <a href={l("/fragments/[slug]", { slug: fragment.slug })}>
{fragment.data.title} {fragment.data.title}
</a> </a>
</li> </li>