waxen sleet
Upon clicking certain/specified <a> tags, I would like to set the 'slide' ViewTransition to instead slide to the left, similar to when the history 'back' is used.
I currently import and use ViewTransitions on my main Layout template so it is active everywhere.
Is it possible to do what I am looking for?
grave monolithBOT
Hi @waxen sleet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the information provided in the extracts, Astro's View Transitions API supports both forwards and backwards navigation animations. However, there is no explicit mention of a way to invert the 'slide' ViewTransition or to control the direction of the slide animation.
Astro does provide a way to customize all aspects of transition animation, and build your own animations. You can add transition:animate={mySlide} to any element to use Astro’s built-in animations and customize these animations using any CSS animation properties, for example, by specifying a duration.
---import { slide } from 'astro:transition';---
<header transition:animate={slide({ duration: 200 })}></header>
However, the direction of the slide animation is not mentioned as a customizable property in the provided extracts.
rain ruin
Hi @grave monolith i lose types when create nested routing from two collection like this import type { GetStaticPathsOptions, Page } from "astro";
import type { CollectionEntry } from "astro:content";
import { getCollection, getEntry } from "astro:content";
export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
const blogPosts: Array<CollectionEntry<"blog">> = await getCollection("blog");
const authors: Array<CollectionEntry<"authors">> =
await getCollection("authors");
const withAuthorData = await Promise.all(
blogPosts.map(async (post) => {
const authorData = await getEntry(post.data.author);
return {
...post,
authorData,
};
})
);
const limit = 6;
console.log(authors);
const uniqueAuthors = [
...new Set(withAuthorData.map((post) => post.authorData).flat()),
];
return uniqueAuthors.flatMap((author) => {
const posts = withAuthorData.filter((post) => {
const normalizedAuthors = normalizeString(post?.authorData?.data.name);
return normalizedAuthors.includes(normalizeString(author.data.name));
});
const sorted = posts
.slice(0, limit)
.sort(
(a, b) =>
new Date(a.data.pubDate).getTime() -
new Date(b.data.pubDate).getTime()
);
return paginate(sorted, {
params: { author: normalizeString(author.data.name) },
pageSize: 4,
});
});
}
const { page } = Astro.props as { page: Page<CollectionEntry<"blog">> };
grave monolithBOT
Let me check the knowledge base for you. One moment! :books:
Based on the provided extracts, it seems like you're trying to create nested routing from two collections in Astro. However, you're facing issues with losing types in the process.
Unfortunately, the provided extracts do not contain specific information on how to resolve this issue. The extracts mainly discuss routing, content collections, and some issues related to these topics in Astro, but they do not provide a direct solution to your problem.
rain ruin
hi @grave monolith hpw create nesting routing with this two collections const blogPosts: Array<CollectionEntry<"blog">> = await getCollection("blog");
const authors: Array<CollectionEntry<"authors">> =
await getCollection("authors"); where Blog has references to author
grave monolithBOT
Let me check the knowledge base for you. One moment! :books:
To create nested routing with two collections in Astro, you can use the getStaticPaths() function to generate multiple pages from a single src/pages/ component during your build. You can call getCollection() inside of getStaticPaths() to query your content. Then, create your new URL paths using the slug property of each content entry.
Here's an example of how you can create nested routing with your blog and authors collections:
// src/pages/[author]/[...slug].astro
---
import { getCollection } from 'astro:content';
// Generate a new path for every collection entry
export async function getStaticPaths() {
const blogPosts = await getCollection('blog');
const authors = await getCollection('authors');
return authors.flatMap(author => {
const authorPosts = blogPosts.filter(post => post.data.author === author.data.name);
return authorPosts.map(post => ({
params: { author: author.slug, slug: post.slug },
props: { post, author },
}));
});
}
// For your template, you can get the entry directly from the prop
const { post, author } = Astro.props;
const { Content } = await post.render();
---
<h1>{post.data.title}</h1>
<p>By {author.data.name}</p>
<Content />
This will generate a new page for every blog post, nested under the author's name. For example, a blog post at src/content/blog/hello-world.md written by an author at src/content/authors/john-doe.json will have a final URL of /john-doe/hello-world/.
Please note that this example assumes that your blog collection entries have an author field that matches the name field of an authors collection entry. You may need to adjust this to match your actual data structure.
rain ruin
@grave monolith and for nested pagination?
grave monolithBOT
Let me check the knowledge base for you. One moment! :books:
For nested pagination, you can use the paginate() function provided by Astro. This function generates an array of results for each grouping, which can be used to create paginated routes for each author and their respective blog posts.
Here's an example of how you can implement nested pagination with your blog and authors collections:
// src/pages/[author]/[page].astro
---
import { getCollection } from 'astro:content';
import { paginate } from 'astro:pagination';
export async function getStaticPaths() {
const blogPosts = await getCollection('blog');
const authors = await getCollection('authors');
return authors.flatMap(author => {
const authorPosts = blogPosts.filter(post => post.data.author === author.data.name);
return paginate(authorPosts, { params: { author: author.slug }, pageSize: 10 });
});
}
const { page } = Astro.props;
---
<h1>Posts by {{page.params.author}}</h1>
<ul>
{page.data.map(post => (
<li>
<a href={`/${page.params.author}/${post.slug}`}>{post.data.title}</a>
</li>
))}
</ul>
In this example, the getStaticPaths() function generates paginated routes for each author and their respective blog posts. The paginate() function is used to split the blog posts into pages, with a maximum of 10 posts per page. The generated routes will look like /john-doe/1, /john-doe/2, etc.
rain ruin
@grave monolith this is not correct, because are collections, this is the model of blog export const blogSchema = {
schema: z.object({
title: z.string(),
pubDate: z.string(),
tags: z.array(z.object({
name: z.string(),
color: z.string()
})),
image: z.object({
url: z.string(),
alt: z.string(),
}),
author: reference('authors'),
relatedPosts: z.array(reference('blog')).optional(),
})
} where author has this model
grave monolithBOT
Let me check the knowledge base for you. One moment! :books:
Based on your provided schema, it seems like you're using the reference() function to create a relationship between the blog and authors collections. This allows you to reference an author from the authors collection in each blog post.
To create nested routing with pagination for these collections, you can use the getStaticPaths() function to generate multiple pages from a single src/pages/ component during your build. You can call getCollection() inside of getStaticPaths() to query your content. Then, create your new URL paths using the slug property of each content entry.
Here's an example of how you can create nested routing with your blog and authors collections:
// src/pages/[author]/[page].astro
---
import { getCollection, getEntry } from 'astro:content';
import { paginate } from 'astro:pagination';
export async function getStaticPaths() {
const blogPosts = await getCollection('blog');
const authors = await getCollection('authors');
return authors.flatMap(async (author) => {
const authorPosts = blogPosts.filter(async (post) => {
const authorData = await getEntry(post.data.author);
return authorData.slug === author.slug;
});
return paginate(authorPosts, { params: { author: author.slug }, pageSize: 10 });
});
}
const { page } = Astro.props;
---
<h1>Posts by {page.params.author}</h1>
<ul>
{page.data.map((post) => (
<li>
<a href={`/${page.params.author}/${post.slug}`}>{post.data.title}</a>
</li>
))}
</ul>
In this example, the getStaticPaths() function generates paginated routes for each author and their respective blog posts. The paginate() function is used to split the blog posts into pages, with a maximum of 10 posts per page. The generated routes will look like /john-doe/1, /john-doe/2, etc.
Please note that this example assumes that your blog collection entries have an author field that matches the slug field of an authors collection entry. You may need to adjust this to match your actual data structure.
rain ruin
@grave monolith my author collection doesnt have a slug key, the schema is export const authorSchema = {
schema: z.object({
name: z.string().default('Anonymous'),
bio: z.string(),
image: z.object({
url: z.string(),
alt: z.string(),
}),
})
} const authorCollection = defineCollection({
type: "data",
...authorSchema
});
grave monolithBOT
Let me check the knowledge base for you. One moment! :books:
Based on your provided schema, it seems like your authors collection is of type: 'data'. In Astro, the slug property is only available for type: 'content' collections. For type: 'data' collections, you would typically use the id property to reference individual entries.
However, you can still create nested routing with pagination for your blog and authors collections. You would need to adjust the routing to use the id property of the authors collection instead of slug.
Here's an example of how you can create nested routing with your blog and authors collections:
// src/pages/[author]/[page].astro
---
import { getCollection, getEntry } from 'astro:content';
import { paginate } from 'astro:pagination';
export async function getStaticPaths() {
const blogPosts = await getCollection('blog');
const authors = await getCollection('authors');
return authors.flatMap(async (author) => {
const authorPosts = blogPosts.filter(async (post) => {
const authorData = await getEntry(post.data.author);
return authorData.id === author.id;
});
return paginate(authorPosts, { params: { author: author.id }, pageSize: 10 });
});
}
const { page } = Astro.props;
---
<h1>Posts by {page.params.author}</h1>
<ul>
{page.data.map((post) => (
<li>
<a href={`/${page.params.author}/${post.slug}`}>{post.data.title}</a>
</li>
))}
</ul>
In this example, the getStaticPaths() function generates paginated routes for each author and their respective blog posts. The paginate() function is used to split the blog posts into pages, with a maximum of 10 posts per page. The generated routes will look like /john-doe/1, /john-doe/2, etc.
Please note that this example assumes that your blog collection entries have an author field that matches the id field of an authors collection entry. You may need to adjust this to match your actual data structure.