Putting data from "Create Pages from Data" into a collection

[andyford]

I'm fetching some blog posts from a WordPress instance as described here: https://www.11ty.dev/docs/pages-from-data/

It works great, but I've found that I cannot use the nextPost and previousPost technique described here https://www.11ty.dev/docs/filters/collection-items/ because apparently my blog posts do not get put into a collection.

So my question is... how can I fetch dynamic data as shown here https://www.11ty.dev/docs/pages-from-data/ and also put that data into a collection?

Thanks!

[andyford]

Okay so I had a look at the definition of getCollectionItem and realized that it was comparing the inputPath and outputPath fields of each item.

Because I'm pulling my posts collection from WordPress, I don't have these 2 fields, so I decided to to make an alternative ba_getCollectionItem function (ba_ is the nickname for my project) which instead compares the unique link field provided by the WordPress Rest API.

The next step was to redefine getPreviousCollectionItem and getNextCollectionItem to use the modified ba_getCollectionItem under the hood.

I don't know if I strictly HAD to do this, but I also moved my posts fetching code out of data/posts.js and into the .eleventy.js file and assigned it to a collection so now they show up as collections.posts:

eleventyConfig.addCollection("posts", async function() {
        const res = await fetch(urlJoin(API_URL_PATH, '/posts'));
        return await res.json();
    });

With these changes, the next/previous navigation now works

Here are the redefined getCollection-related definitions which now live in my .eleventy.js file:

const ba_getCollectionItem = (collection, page, modifier = 0) => {
        let j = 0;
        let index;

        for (let item of collection) {
            if (item.link === page.link) {
                index = j;
                break;
            }
            j++;
        }

        if (index !== undefined && collection && collection.length) {
            if (index + modifier >= 0 && index + modifier < collection.length) {
                return collection[index + modifier];
            }
        }
    }
    eleventyConfig.addFilter('getCollectionItem', ba_getCollectionItem);

    eleventyConfig.addFilter("getPreviousCollectionItem", (collection, page) =>
        ba_getCollectionItem(collection, page, -1)
    );
    
    eleventyConfig.addFilter("getNextCollectionItem", (collection, page) =>
        ba_getCollectionItem(collection, page, 1)
    );

[andyford]

so this works for my particular situation, but if anyone has a better approach, or might see issues in my workaround, then I'm happy for the feedback! I'll wait a week or two before being "that guy" and accepting my own answer =)

[edwardhorsford]

@andyford I wrote my own filters for getting next and previous before Eleventy included them by default. They work, so I never swapped over.

Included below in case they help (though it looks like yours would work just fine):

// Look up next, previous, or adjacent items based on current url and a collection.

// Returns false if none found or at end of array.

const getItemByDirection = ( url, collection, direction, loop=false) => {

	var currentItemIndex = null;
	for (var i = 0; i < collection.length; i++){
		if (collection[i].url == url){
			currentItemIndex = i;
		}
	}

	if (currentItemIndex != null){

		if (direction == 'next'){
			var nextItemIndex = (currentItemIndex + 1 >= collection.length) ? false : currentItemIndex + 1;
			if (loop){
				nextItemIndex = (currentItemIndex + 1 >= collection.length) ? 0 : currentItemIndex + 1;
			}
			return collection[nextItemIndex];
		}
		if (direction == 'previous'){
			var previousItemIndex = (currentItemIndex - 1 < 0) ? false : currentItemIndex - 1;
			if (loop){
				previousItemIndex = (currentItemIndex - 1 < 0) ? collection.length - 1: currentItemIndex - 1;
			}
			return collection[previousItemIndex];
		}
		if (direction == 'current'){
			return collection[currentItemIndex];
		}

	}
	else {
		console.log('Collection pagination:', url, 'not found in collection.');
		return false;
	}
}


exports.nextItem = (url, collection, loop=false)=> {
  return getItemByDirection( url, collection, 'next', loop);
}

exports.previousItem = (url, collection, loop=false) => {
  return getItemByDirection( url, collection, 'previous', loop);
}

exports.adjacentItems = (url, collection, loop=false) => {
	var adjacent = {}
  adjacent.next = getItemByDirection( url, collection, 'next', loop);
  adjacent.previous = getItemByDirection( url, collection, 'previous', loop);
  adjacent.current = getItemByDirection( url, collection, 'current', loop);
	
  return adjacent;
}