Content vs components for showcasing my work?

[jamestagal]

Hi @jimafisk

I'd like to showcase some of my work I've built (eLearning activities/lessons) on my blog but not sure whether I should be creating content pages or a component.

To begin with I wish to showcase a series of my H5P activities grouped together either in a list with pagination or some other nice layout such as this.

My approach so far is that I have created a content type and called it project_01. In this folder, I have created 6 json files naming them example_01 so on. Each file contains a title a description and h5p.src data sources. I am bringing the content into the project_01 template and this works fine. The H5P content is embedded in iframes.

But I am not sure I need end points for each to have their own pages? See how it functions now in a short screencast below.

https://github.com/jamestagal/edtechdesigner/assets/6309595/971dc12d-4abb-4510-9517-c7f5c6dad188

I don't think i need another view to display them like you see the list of urls to each end point in my screencast above. How I imagine it to function is maybe in a paginated list and therefore it may work in a component? but I'm not sure. Could you please suggest the best way forward with this one?

BTW. I haven't pushed any of these changes from my local folder yet because I have been getting some funny bold text formatting I haven't been able to troubleshoot yet. 😺

Regards, Ben

[jimafisk]

Hi @jamestagal,

How important is it for you to have a URL that changes (e.g. /slide/1, /slide/2, etc)? That can be nice if you want to bookmark a slide or share URLs with someone else and want them to go to a specific slide instead of starting at the beginning. To accomplish that, you'll need to do one of the following:

• Add pagination to a single content type
• Add a multi content type like you have and do a route override so the URL appears like /slide/n
• Set up your own hash-based routing clientside so your URLs look like /#/slide/n

If you don't need the URL to change for each specific slide (sharing a link would start at the beginning each time), you don't need to worry about any of the 3 approach listed above.

[jamestagal]

Thanks Jim. I think it would be nice to have a url for any one of these examples...so maybe the easiest way would be option 2 with a route overtime. But your 3th option sounds interesting... with a a hash- based routing... would either approach work when having some kind of way to navigate through a visible list of them all too?

Ben

[jimafisk]

Ok great, here's a video implementing a slideshow using approach number 2.

Just note that the API has changed since I made this video, so like I mentioned at 6:06 the route override would look like:

{
  "routes": {
    "slides": "/slide/:fields(order)"
  }
}

[jamestagal]

Thanks Jim. I'll give it a go 😉

[jamestagal]

Hi @jimafisk I followed your instructions and added the basic controls to navigate however when I go to the route of any slide, I get a 404 message. I have pushed the changes this time. As I can quickly see some content flash up before the 404 error loads, the odd thing is the description field appears to be undefined but all content load correctly before implementing this slideshow. I have modified the name of content folder now to project1 Pls take a look when you can.

Cheers, Ben

[jimafisk]

Looks like you were really close here!

Because you're using a baseurl, Plenti didn't like the fact that you were adding a leading forward slash to the route override. Removing that seems to have fixed this: https://github.com/jamestagal/edtechdesigner/commit/62ea48d3336bad1dc11ff9a54229add86ee8773c

[jamestagal]

oh really...that'll do it! 😆

Have a look now...I pushed a component for navigation called slides_nav.svelte. I need to hook up the next and back buttons and then see how to get the steps to work. 😬 Thanks so much Jim.

[jamestagal]

Hi @jimafisk

I'm just coming back to this slideshow I used in this project with embedded some iframes in my site.

I wanted to ask you how I can fix the end slide issue that I got suck with and post on it here. but didn't really know to solve it.

The issue is: At present when you navigate past the last slide [6] it just counts up to an undefined slide and when navigating back it append a NaN to the slide url.

In the Project1.svelte file I added the length property to slide order see, below, but that still gives an error.

  function setCount(n) {
    if (n > 0 && n <= order.length) {
      count.set(n);
    }
  }

Could you have a look and suggest a fix. Thanks

Ben