Change order of posts

[jimafisk]

From @jamestagal:

I started thinking about how I would manage each post,ie (post-01.json, post-02.json etc..) and I see a difficulty in the current setup. I believe that each post is displayed in ascending order based on its post number (01, 02, 03 etc). So if I want to create a new post and have that post displayed as the most recent post, I would have to re-name all posts so that the newest post gets "01" in the title. This would be a lot of work each time I add a new post.

Would I be able to display a post based on its "dateCreated"? That way, the post number wouldn't matter and I could just create a new post with the next number ie; post-11,json and so on and the date the post was created would determine its position in the list.

I have looked in the code base for something dealing with this logic and I think postRangeHigh and PostRangeLow in the following files might address this but I don't really know how to change the code.

1. cards_posts.svelte
2. main.svelte
3. index.svelte

[jimafisk]

The postRangeHigh and PostRangeLow props are just used to determine which items appear on the current paginated page. To change the order you'd sort the list of all items (in this case posts) and then use those range props to situate only a certain number of posts on the page.

So layout/content/projs.svelte is a routed page that corresponds to the "projs": "posts/:paginate(totalProjPages)" override defined in plenti.json. In other words it appears at urls like http://localhost:3000/posts/1 and http://localhost:3000/posts/2. This template pulls in "../components/cards_projs.svelte"; as a component named Card and passes all the props needed for pagination. In "../components/cards_projs.svelte"; you could add a helper function to sort the dates then update the loop to look like this:

{#each sortByDate(allProjs) as post, p}

This ^ corresponds only to the sorting within a grouping:

Showing most recent post at top of grouping


[jimafisk]

The posts on the homepage are actually produced by

• themes/compendium/layouts/content/index.svelte
  • themes/compendium/layouts/components/main.svelte
  • themes/compendium/layouts/components/cards_posts.svelte

So you need to copy cards_posts.svelte from your theme to your project and modify like:

{#each sortByDate(allPosts) as post, i}
  {#if i >= postRangeLow && i < postRangeHigh}
    <div>Stuff...</div>
  {/if}
{/each}

[jimafisk]

These updates can be pulled in with https://github.com/jamestagal/edtechdesigner/pull/14. Hope it helps!

Note I'm used to MM/DD/YYYY dates so I updated the date in content/posts/post-06.json but looking at it now I assume you intentionally wanted DD/MM/YYYY so you'll have to change this back.

[jamestagal]

Hi Jim,

Thanks. I'll merge the full request and check it out! 👍

[jamestagal]

Hi Jim,

I have pulled the merge request and see an error..see screenshot below. It say the projArry isn't being used.

[jimafisk]

That was there previously, you're right it doesn't appear to be used. You can either remove it or just ignore the error if the syntax highlighting doesn't drive you crazy.

[jamestagal]

Thanks Jim, I am testing it out and I see that one post on the home page is not confirming. It is post-10.json with a title of ACTHP Learning Module | Artefactchat | Calthorpes' House It gets put on the last page (3) of the list even when the date is before the previous post... see screenshot

[jimafisk]

I think it's probably because you're using dd/mm/yyyy format instead of mm/dd/yyyy. You'll have to edit the sortByDate function: https://github.com/jamestagal/edtechdesigner/blob/6c31b8cd333fbf5724e9a8c0c182ea619f8818a0/layouts/scripts/sort_by_date.svelte and update it like the answers here: https://stackoverflow.com/questions/23084782/how-sort-array-date-javascript-dd-mm-yyyy/23085197

[jamestagal]

Hi Jim,

Thanks. Here is how I modified the code from that post..Does that look correct?

<script context="module">
  export const sortByDate = (items, order) => {
    items.sort((a, b) => { 
      // Must have field named "dateCreated" in content source to work.
      let dateA = new Date(a?.fields?.dateCreated.split('/').reverse().join();
      let dateB = new Date(b?.fields?.dateCreated.split('/').reverse().join();
      return (order == "oldest") (dateA < dateB ? -1):(dateA > dateB ? 1:0);
    });
    return items;
  };
</script>

Update - I can see code highlighting errors when I pasted it in the code!

[jimafisk]

Looks like there's syntax errors, this should work: https://github.com/jamestagal/edtechdesigner/pull/15

[jamestagal]

Hi Jim, That's awesome! That seems to be working now; sorting correctly base on that date format. This is a great feature improvement. Thank you very much for you help:) It is much appreciated.