How can I optimise a data source duplication?

[jamestagal]

hello @jimafisk

How have you been? Sorry it's been a little while since I did any work on this theme. Have been a somewhat busy with work and too tired to do much else! But I'm back at it again now 😸

I looked at your video; Plenti Bigspring: Part 19 (Pricing page) and implemented the content/pages/ structure into this build as you showed which is really nice and is working well. Thank you.

One thing, I noticed after doing that, is that I now have 2 identical data sources but slightly different html; one that is for the courses.svelte file from the courses section in the index.json file and the other is for thecourse.svelte file from the new content/pages/course.json file. Could I or should I optimise this data source duplication? ( I mean use 1 data source in the two components files)

This might be the answer!. I am thinking about what you suggested in that video, mentioned above, at 4:45 to possibly get rid of the index.svelte content type and put an index.json file inside the content/pages folder. That could work? But what would i need to make this change work? Let me know what you think.

Ben

[jimafisk]

I'm doing good (busy as well)! I hope things are going ok on your end too!

now have 2 identical data sources but slightly different html

I think I follow, sounds like you have a component architecture for your content/index.json file that uses this component:

• Reference from content: https://github.com/jamestagal/plenti-educenter/blob/53acdfa276228612ea56d679350969959d0ca262/content/index.json#L93
• Component template: https://github.com/jamestagal/plenti-educenter/blob/53acdfa276228612ea56d679350969959d0ca262/layouts/components/courses.svelte

You also have a content/pages/course.json, also using a component architecture that uses a similar component:

• Reference from content: https://github.com/jamestagal/plenti-educenter/blob/53acdfa276228612ea56d679350969959d0ca262/content/pages/course.json#L19
• Component template: https://github.com/jamestagal/plenti-educenter/blob/53acdfa276228612ea56d679350969959d0ca262/layouts/components/course.svelte

I'd say you're probably right, if the components are pretty much the same you could probably consolidate them. I didn't get a chance to spin this up locally to see, but if there is a lot of variability between the components it could make sense to keep them separate. It's really a judgement call.

possibly get rid of the index.svelte content type and put an index.json file inside the content/pages folder.

This would be great, and it probably would be the right approach, but currently there is a limitation in Plenti that makes this difficult. I'm planning on introducing a breaking change in v0.6.0 to allow you to do this by defining specifically named _index.json files. More details here: https://github.com/plentico/plenti/issues/220

[jamestagal]

Hi @jimafisk Thanks for your response. All good thanks.. The year is matching along too fast and there doesn't seem enough hours in the day!

I'm making some progress with this build. I have been working on the course end nodes and created a courses content folder to put them in. And what is really nice with this part was that I was able to implement your alllContent magic prop to filter on the content types to display "Related Courses" found on these lines of the content/courses.svelte. page.

One question I have here though is how to add the && operator correctly into the following expression?

  {#each allContent.filter(content => content.type == "courses" && content.fields?.featured) as course}

In this example above I have added in the featured concept, you showed in a BigSpring Youtube tutorial, setting a key true and then filtering on that key in the each loop. In my case, I want to only display 3 course cards, seen in the educenter site example. I have 4 courses in the data source, 3 with the key true and the fourth course is set to false however the code above adds the fourth course to the page as well. I thought by adding this && operator would work but I must have the syntax wrong. Please have a look when you can. Thanks

[jimafisk]

Hi @jamestagal, just want to make sure I'm looking at the right thing, is this the {#each} block in question:

https://github.com/jamestagal/plenti-educenter/blob/e21e6dc6e4c2b0d3ef96e72f5ab2179e117a19d8/layouts/content/courses.svelte#L110

The layouts/content/courses.svelte template seems to corresponds to pages like http://localhost:3000/course/algorithm/. At the bottom of these pages is a section called "Related Course" that we're targeting right?

It looks like the problem was that the content source was using string values like "true" and "false" but it should be using boolean values like true and false. I updated the JSON source and that seemed to fix it on my end, so I pushed this to the repo so you can see what I'm talking about: https://github.com/jamestagal/plenti-educenter/commit/d697fe6d7fc834d8bd08bba618f42e1186d49363

Hope that helps!

[jamestagal]

Hi Jim yes that is it...oh yes i see... what a silly oversight. Thanks for the update 🙂

On Wed, Oct 26, 2022, 7:30 AM Jim Fisk @.***> wrote:

Hi @jamestagal https://github.com/jamestagal, just want to make sure I'm looking at the right thing, is this the {#each} block in question:

https://github.com/jamestagal/plenti-educenter/blob/e21e6dc6e4c2b0d3ef96e72f5ab2179e117a19d8/layouts/content/courses.svelte#L110

The layouts/content/courses.svelte template seems to corresponds to pages like http://localhost:3000/course/algorithm/. At the bottom of these pages is a section called "Related Course" that we're targeting right?

It looks like the problem was that the content source was using string values like "true" and "false" but it should be using boolean values like true and false. I updated the JSON source and that seemed to fix it on my end, so I pushed this to the repo so you can see what I'm talking about: d697fe6 https://github.com/jamestagal/plenti-educenter/commit/d697fe6d7fc834d8bd08bba618f42e1186d49363

Hope that helps!

— Reply to this email directly, view it on GitHub https://github.com/jamestagal/plenti-educenter/issues/7#issuecomment-1291100887, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABQENW47AXI6RL2WN4OBG73WFA7N7ANCNFSM6AAAAAARL34GLA . You are receiving this because you were mentioned.Message ID: @.***>

[jamestagal]

Hi @jimafisk I am thinking that setting the value for courses to display on these pages via a boolean might be a little limiting. I mean it serves up the same course cards on each page....However, it might be better to randomise the course cards on these pages, what do you think?

How could I get a random content.type for the courses? Would the following math logic work, as below?

      const randomCourse = Math.floor(Math.random() * content.type.length);

then pass the RandomCourse into the #each loop?

Ben

[jimafisk]

I would gather an array of all the courses, something like:

let courses = allContent.filter(content => content.type === "courses");

Then create a shuffle function like this example and apply it to the array.

From there you should be able to loop over courses like normal. Does something like that work? Thanks!

[jamestagal]

hi @jimafisk Thanks here is how I have added that code to the courses file. Pls check...

    let courses = allContent.filter(content => content.type === "courses");

    function shuffle(array) {
    let currentIndex = array.length,  randomIndex;

    // While there remain elements to shuffle.
    while (currentIndex != 0) {

    // Pick a remaining element.
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]];
  }
  return array;
}
shuffle(courses);

The shuffle function should do the trick to get a pick of random course cards but I'm not sure whether it would work in combination with the boolean key. So I wonder we might still have to define the a number of courses to display from the total courses. Maybe something like the content.pager?

Ben

[jimafisk]

You could still limit the display of courses to 3 inside your loop:

{#each courses as course, i}
  {#if i < 3}
    <div>{course.filename}</div>
  {/if}
{/each}

Does something like that work?

[jamestagal]

Hi @jimafisk Sorry I don't really know where I should put that code. For now I have added it directly underneath the other loop here but that messes up how they are displayed and is still showing 4 course not 3.

                    {#each allContent.filter(content => content.type == "courses") as course}
                    {#each courses as course, i}
                    {#if i < 3}
                    <div>{course.filename}</div>
                    {/if}
                    {/each}

Pls have a look when you can. Cheers, Ben

[jimafisk]

Sorry if that wasn't clear, basically you'd update the top level loop to also provide the index, or i, that keeps track of which iteration of the loop you're on (0, 1, 2, 3, etc). Then just check that you've only iterated 3 times to display the first 3 items. So with your example it should look something like:

{#each allContent.filter(content => content.type == "courses") as course, i}
  {#if i < 3}
    <div>{course.filename}</div>
  {/if}
{/each}

[jamestagal]

Thanks @jimafisk Yes that makes sense...sorry I did see the duplication of the code in my reply and thought that could be an issue...and by just adding the i interactor within the top level loop is obvious now. 😊 I'll give it a go later tonight. Thanks again. Ben

[jamestagal]

Hi @jimafisk That seemed to fix it... the loop is displaying 3 course cards now. Thanks 😄 However I don't think the shuffle logic is working because it only displays the first 3 in alphabetical order and reloading the page does change these 3 course cards to the others in the deck (folder). Pls have a look and check the shuffle function code has been implemented correctly when you can.
Thanks again. Ben

[jamestagal]

Hi @jimafisk Another question. I have just noticed that there is a newsletter component that seemed to be included on each and every page, located just above the footer. So I think I should put this one into the global folder and import it into the html.svelte file but I am guessing I can't just import it from where it is currently located in the layouts/components/ folder into this html file.. as follows: 😊 ? I think i know the answer to this one...because I tried and got an error.. 😸

import Newsletter from '../components/newsletter.svelte';

Ben

[jimafisk]

Not sure if this will work, but I know Svelte only updates reactivity when assignment actually happens (i.e. it sees an = sign). So on this line: https://github.com/jamestagal/plenti-educenter/blob/c2b584a38ac70608bb041ad56246a3a73dd01a82/layouts/content/courses.svelte#L21

Maybe something like courses = shuffle(courses); would work? Haven't tested it out though..

[jamestagal]

Hi @jimafisk I added that but no shuffle. Might it have something to do with the variable courses not being assigned correctly?

let courses = allContent.filter(content => content.type === "courses");

Looking in the console using console.log(courses); certainly lists the array:

[jimafisk]

Here's a working REPL: https://svelte.dev/repl/6fdda0f77fd94df88a717161186692c3?version=3.52.0

It should change the order every time you refresh the page. Does something like that work?

[jamestagal]

Hi @jimafisk Yes. I see you got it working in that array.... 😄 that's great but after making those few code changes to the function as you have it in the REPL it still doesn't work...! I wonder what is preventing the array from displaying the shuffle? UPDATE Interestingly looking in the console, the array of courses is in fact shuffling the order at each page refresh ...so that would suggest that the issue has something to do with way the courses object is being applied to the template..?

Ben

[jamestagal]

@jimafisk Just sharing me getting organised for the rest of this build. 😃 Ben

[jimafisk]

Good call on the TODO list, it's helpful to organize the outstanding items. I just pushed a commit that should fix the array shuffle issue. You were shuffling the courses array correctly but you weren't actually using it in the loop.

[jamestagal]

Brilliant thanks Jim. 😄