Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ export default async function Home({ searchParams }) {

With this, you can now navigate between pages from the UI:

![Demonstrates how the pagination functionality works by navigating between different pages using the pagination navs at the bottom of the page](/img/f5f3a41e-37d5-4860-9273-f47d0d5adfeb.webp)
![Demonstrates how the pagination functionality works by navigating between different pages using the pagination navs at the bottom of the page](/img/f5f3a41e-37d5-4860-9273-f47d0d5adfeb.gif)

## Implementing Infinite Scrolling

Expand Down Expand Up @@ -447,7 +447,7 @@ const handleObserver = (entries) => {
Here in the `useEffect` hook the Intersection Observer API is used to observe the `<span>` element of the loading indicator. At initial mount and when the `<span>` enters and exists the viewport, the `handleObserver()` callback function is called which will then call `fetchMorePosts()` to fetch new posts and update the state whenever there are more posts and the `<span>` element enters the viewport.

With this, the infinite scrolling should now be working:
![Demonstrates the infinte scrolling functionality. When the page is scrolled down to the bottom, the loading indicator is displayed, and new posts are displayed afterwards. Finally, when the bottom of the page is reached again the text No more posts is displayed.](/img/f6dd7960-6296-4242-abc2-5a1232f06143.webp)
![Demonstrates the infinte scrolling functionality. When the page is scrolled down to the bottom, the loading indicator is displayed, and new posts are displayed afterwards. Finally, when the bottom of the page is reached again the text No more posts is displayed.](/img/f6dd7960-6296-4242-abc2-5a1232f06143.gif)

## Which To Use
As with most topics, the answer is "it depends". Paginated lists tend to have better performance Search Engine Optimization (SEO) as all page content (typically smaller) is initially loaded on the page. Infinite scrolling is better at maintaining attention and exploration
Expand Down
2 changes: 1 addition & 1 deletion content/frameworks/03.astro/02.authentication.md
Original file line number Diff line number Diff line change
Expand Up @@ -624,7 +624,7 @@ const posts = await client.request(readItems('posts'));

This will display all the posts created by the logged-in user on the dashboard page.

![All post in Dashboard Page](/img/all-posts.png)
![All post in Dashboard Page](/img/all-post.png)

### Edit a Post

Expand Down
2 changes: 1 addition & 1 deletion content/frameworks/09.flask/01.data-fetching.md
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ def post_page(slug):

Now navigate to one of your posts listed on the previous page an see the result.

![Post page displaying post data that came from Directus posts collection](/img/6465a004-0e06-43b6-adbd-dbcd2aff62e0?cache-buster=2024-11-14T10:18:16.419Z&key=system-large-contain)
![Post page displaying post data that came from Directus posts collection](/img/6465a004-0e06-43b6-adbd-dbcd2aff62e0.webp)

## Add Navigation

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ All communication to the frontend is through a single Directus user name “Sant

The `Elves` policy has create, read, and update permissions on `profiles` and `likes`. And also read permissions for the `directus_` system collections in order to generate types using a helper Node script.

![Access policies in the Salty Santa Directus project](/img-salty-santa-6.png)
![Access policies in the Salty Santa Directus project](/img/os-salty-santa-6.png)

If you ever use this same pattern, just make sure you’re only using static access tokens for server-to-server comms. You don’t want to expose those to anyone on the frontend because of the elevated permissions that might be attached.

Expand Down Expand Up @@ -634,7 +634,7 @@ Once you sent your letter to Santa, we’d send the generated text to their API
But fear not - here’s a sample of what could have been.

<audio controls>
<source src="https://product-team.directus.app/assets/c856d836-7ef6-4ff6-8961-152b3156c49f.mp3" type="audio/mpeg">
<source src="/img/aaedf2bb-bb9a-41b8-9b47-f68f4293e813.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Using the file interface, you can store all types of files inside items in your
```
5. Using the variable tool in the **Preview URL** interface, add in the image `ID` just before the `?` character in the URL.

![Using the plus button to the right of the text box presents all fields within the candidate collection. Select ID with the cursor positioned just before the question mark.](/img/d4018c0d-65e1-42f7-a957-660069934abc.webp)
![Using the plus button to the right of the text box presents all fields within the candidate collection. Select ID with the cursor positioned just before the question mark.](/img/d4018c0d-65e1-42f7-a957-660069934abc.gif)

Open up a record in your collection and select the **Live Preview** button in the top-right. Now you can preview the file inside Directus without having to download it first!

Expand Down
Loading