TODOs in project

[jamestagal]

This is a checklist for myself to keep track of the main "to do" tasks.

• [x] Add header section to content file courses.svelte via course nodes
• [x] Check and update assets for course nodes
• [x] Change the course component course.svelte to bring content in dynamically from end nodes {#if i < 3}
• [x] Create Event pages > plenti new type events & plenti new type event_page --singlethen add to index dynamically only showing 3 {#if i < 3}& sortByDate.svelte on index page
• [x] Create Notice pages > plenti new type notice& plenti new type notice_page --single
• [x] Create Research pages > plenti new type research& plenti new type research_page --single
• [x] Create Teachers pages > plenti new type teachers
• [x] Create Scholarship page scholarship.json in Pages content type and scholarship.svelte file in Components
• [x] Create About Us page about.json in Pages content type and about.svelte file in Components
• [x] Create Contact Us page contact.json in Pages content type and contact.svelte file in Components
• [x] Create Categories component & pages, then import into the blog.svelte
• [x] Create Tags component & pages then import into the blog.svelte
• [x] Create single body fields and assign a wysiwyg schema to it so you can organise into paragraphs via the editor.
• [x] Fix all footer links
• [x] Add entity reference (autocomplete) field widget in the CMS - when creating new courses, allow to link to existing teachers

[jamestagal]

As I build this site there are a number of aspects I would like to clarify/discuss. The following is a list.

1. Best way to add paragraphs in json files... use separate keys i.e. body1, body2?
2. Best way to serve content ? For example have all data in end node json files only and then serve all other content files from there?

[jimafisk]

For paragraphs I would use a single body filed and assign a wysiwyg schema to it so you can organize into paragraphs via the editor.

Can you explain more about what you mean by "serving content?" Typically these would be JSON files in your content folder, unless I'm not understanding?

Edit: Sorry this popped up in my email so I thought it was assigned to me. If you have a plan here, don't let me step on your toes!

[jamestagal]

Hi @jimafisk no problem. I wasn't sure if you would be notified of that post...and thanks for responding...you are the best 'go to" person to ask 😊 . I turned them into numbers so we easily refer to them.

1. Could you please show me how to set that schema for this? or point me to a DevLog video because I have a feeling you covered it?
2. I just realised that I have some json data that is duplicated. For instance the last content type I created was the Notice I have been adding a the head section intp each json end nodes.. see below.

   "home": {
       "title": "Home",
       "url": "/"
    },
    "headimage": {
       "url": "assets/page-title.jpg",
       "alt": "Header background image"
   },
   "title": "Teaching Materials and Testing Methods",
   "tbody": "About Notice Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor …",

   But I am also adding the same content into the notice_page.svelte file and its corresponding json data file is the same.

Therefore I was thinking it might be better to remove this and use the content from the end node json file? would there be any disadvantage in doing this?

[jimafisk]

Here's the devlog on creating _schema.json files: https://youtu.be/wje7VzE7BXE.

Here's the devlog for component schemas if you're using that type of architecture: https://youtu.be/zPL8xrS9bVg?t=108

I was thinking it might be better to remove this and use the content from the end node json file

That is usually the best way to go :+1:. You want one true source of the content, otherwise if you're writing it in multiple places you increase the likelihood of things getting out of sync.

[jamestagal]

Hi @jimafisk Thanks for those links..yes they are the most recent updates :) I think after I build all the components for this site..i will then look at which components should have schemas and implement it.

You want one true source of the content, otherwise if you're writing it in multiple places you increase the likelihood of things getting out of sync.

Great thank you and agreed. I will aim for the most optimised 'source of true' approach to building content and make some modifications to current files. 😄

Thanks again

[jamestagal]

Hi @jimafisk I'm up to the Teachers page now but I am not sure how to approach it. https://demo.gethugothemes.com/educenter/site/teacher/

There are 5 of categories including All. I could start by creating a content type for teachers with one json file for each teacher but after that I don't really know how to get one template for each category into one template file. Pls let me know an approach I should take.

Cheers, Ben

[jimafisk]

Yeah I think that's the right approach:

• Create a new teachers content type
• Add a categories field to each JSON file in the teachers content type
• In the Svelte template for the teachers page pull in the allContent prop to gather all the teachers: let teachers = allContent(content => content.type === "teachers");
• Loop through teachers with {#each teachers as teacher} and use {#if teacher.fields.categories.includes(selectedCategory)} statements to check the teacher matches the selected category (you'll need to actually set the selectedCategory somehow).

[jamestagal]

Hi @jimafisk I am stuck at step 3 in your list. I was able create a teachers page but each card is displaying stacked down the page not as in the demo with 3 cards in a row. Pls see the teachers_page.svelte file Maybe I have put the #each loop in the wrong spot? Pls have a look when you can. regards, Ben

[jimafisk]

So the cards are displaying, but just not styled correctly? I would "inspect the element" on the original site, and make sure that my HTML markup and CSS classes match it exactly. If reconciling those doesn't fix the issue, you could always force these into a row using CSS flexbox or grid. On the containing element just add a display: flex; in your <style> tags and that should work!

[jamestagal]

Hi @jimafisk Actually looking again they are styled correctly....but the each card was displaying in the own container so that is why they were wrapping below. But now I have moved the #each loop down under the div it was above and that seems to match the CSS of the demo site including the flex styling. However, now each card is stacked on top of each other! whereas the demo site has each card next to each other, with 3 cards in a row. If you have a look, this is file teachers_page.svelte file at the following route http://localhost:3000/teachers/ It is a little perplexing 😸

[jimafisk]

Hi @jamestagal,

I just pulled this down locally and I only see one teacher displayed. Have you pushed your recent changes to the repo? Thanks!

[jamestagal]

Hi @jimafisk Yes I believe so. I think the cards are stacked on top of each other that is why. (z index)? I recorded a short screencast showing the other 5 cards there. https://user-images.githubusercontent.com/6309595/203647234-e84b5917-c748-4841-b127-7afb1a5e8cda.mov

Ben

[jimafisk]

Oh good call, I thought you meant stacked vertically down the page. It's possible that these have a position: absolute; CSS declaration that is causing them to stack. If you change this to position: relative; it should allow you to at least see all the items in the container. From there you could apply grid or flex to align them in a row. Does something like that work? Thanks!

[jamestagal]

Hi @jimafisk Thanks for the suggestions. I tried changing from position: absolute; to position: relative without seeing any change. But actually it wasn't the row container that was causing the issue. It was on the inner div with the column class. I noticed that the demo site had no element.style applied even though the in-line style was there. ie:

style="opacity: 1; transform: scale(1) translate3d(0px, 0px, 0px); backface-visibility: hidden; perspective: 1000px; transform-style: preserve-3d; position: absolute; transition: all 0.5s ease-out 0ms;"

Once I removed these styles, the cards displayed as expected 😄 CSS is very finicky!

I'll move on to filtering the categories...to display each card based on its category. I am afraid this might be a challenge!! 😊 Thanks for your continued support with this Jim. Ben

[jamestagal]

Hi @jimafisk Just thinking through how to target the category json key from the data source.

I looked at what Roberto had done in the Compendium theme around accessing the categories. Based on that, could I use something like the following to target and set the selectedCategory? with the category in the expression below being the json key name?

selectedCategory == Object(category.filter((key) => key.name == content.fields.name)[0])

[jamestagal]

Hi @jimafisk I would like to send you an email. What is your best email contact?

Ben

[jimafisk]

Hey @jamestagal,

I just sent you an email so you have my contact info. Just let me know if that didn't come through! Thanks!

[jamestagal]

Hi @jimafisk When you get a chance, pls look at my earlier post about needing some help with how to set the selectedcCategory I posted the syntax but not sure if it is correct and will target the that key or not, https://github.com/jamestagal/plenti-educenter/issues/8#issuecomment-1327896524 Cheers, Ben

[jimafisk]

Hey @jamestagal,

I pushed a change that should allow you to narrow the list of teachers (http://localhost:3000/teachers) based on the selectedCategory: https://github.com/jamestagal/plenti-educenter/commit/9e700ad98a9601165cc2cb2336ba302c15225c02

Most of those changes are just formatting, the real key is that you assign a value to the selectedCategory prop when you click on one of the filter items, and then when you're looping through the teachers you make sure that they have the category that was selected or that no category was selected. Hope that helps!

[jamestagal]

Hi @jimafisk That is fantastic! thank you. I just want to understand how you achieved it. Here is my understanding.

1. The variable let selectedCategory is like a container storing the value of 'selectedCategory` then on the click event in one list item, you first assign that variable selectedCategory with the value 'All' with =

   on:click={() => selectedCategory = 'All'} 

   Then the triple equals === is a boolean operator and compares the values, then returns either true or false. so the below would be - if selectedCategory (in line above) is the same then it is true, if not it is false then it is given the active state which also has the on:click function.

   {selectedCategory === 'All' ? ' active' : ''}" 

2. Looping over the array: and in the template after looping over each instance, {#each teachers as teacher} the if statement checks for each scenario being true or not.

The below would be if not selectedCategory or selectedCategory is 'All' (because you want to handle the exception) or selectedCategory is teacher.fields.categpry .

 {#if !selectedCategory || selectedCategory === 'All' || selectedCategory === teacher.fields.category}

Thanks again Jim. I appreciate your assistance with this. I think I understand now. Ben UPDATE I have a question after looking at the code again. I was curious about data-filter="all"> . Is that the standard 'Javascript' way to target an element or variable? And I think what you did override that data-filter and is now not being used? because in the template the '''Vlogging''' category is set. See below.

<div data-category="Vlogging" class="col-lg-4 col-sm-6 filtr-item">

[jimafisk]

The variable let selectedCategory is like a container storing the value of 'selectedCategory`

Yes exactly, in the <script> tags at the top I just initialize it but don't assign a value to it by declaring let selectedCategory;

then on the click event in one list item, you first assign that variable selectedCategory

Yup, once someone clicks on one of the categories, it fires Svelte's on:click event modifier, which in this case executes an anonymous (function without an explicit name) arrow function that simply assigns a value to the selectedCategory variable we declared previously.

Then the triple equals === is a boolean operator and compares the values

Yes, triple equals for comparing the values using strict equality instead of the double equals which attempts to convert values.

if selectedCategory (in line above) is the same then it is true, if not it is false then it is given the active state

Almost, I'm using a ternary operator which is basically a shorthand if statement. The condition says if selectedCategory equals the value of this category, add the active class, otherwise don't add a class (in this case add an empty string, which does the same thing). This is simply so it highlights the category with orange text when you click on it.

in the template after looping over each instance, {#each teachers as teacher} the if statement checks for each scenario being true or not

Yes, the loop wants to print everything, but the if statement acts as a gate to only let the right stuff through.

if not selectedCategory or selectedCategory is 'All' (because you want to handle the exception) or selectedCategory is teacher.fields.categpry

Yup there are 3 scenarios:

1. The user didn't select anything so just show all teachers
2. The user selected 'All' so again show all teachers
3. The user selected any of the other categories, so only show teachers who have that category in their content source

I was curious about data-filter="all"> . Is that the standard 'Javascript' way to target an element or variable

Data attributes are just a way to store extra info in HTML without changing the visual output. The previous system was probably hooking into this with standard JS to do what we're accomplishing here with Svelte. I didn't use those data attributes at all, they can probably be removed.

[jamestagal]

Hi @jimafisk Thanks for your detailed explanation and reference links. I really appreciate it 😊 I am making code snippets so I can reference them in the future.

BTW I added a svelte scale transition on the cards and it works well. The only small issue I see is that the card first scales into the position that it was in the array then jumps across into the first index position. See 12 sec video of this in action.

https://user-images.githubusercontent.com/6309595/205892647-def98955-16fa-4f46-aede-e41e8dd40e77.mov

[jimafisk]

Nice transition! I'm not entirely sure what is causing the jumping without taking a closer look... Does using a keyed each block help by chance?

[jamestagal]

Hi @jimafisk Thanks for the link. I'll investigate how to add it and see if that helps!

Cheers, Ben

[jamestagal]

Hi @jimafisk I have been reading and watching videos on this keyed each block feature in Svelte and I can't get it to work! Quoting from the text in the tutorial example you linked above:

You can use any object as the key, as Svelte uses a Map internally — in other words you could do (thing) instead of (thing.id). Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server.

So below is what I have in the each block:

  {#each teachers as teacher (teacher)}

Then below that in the first div after the transition, I added the {teacher} key.

 <div transition:scale={{duration:600}} {teacher} data-category="Vlogging" 

This doesn't make any difference. But I am sure I have missed something! Could you please have a look when you can.

Do I need to use the selectedCategory as the key at all in the block?

Thanks Ben

[jimafisk]

Sorry I led you in the wrong direction. Instead of a keyed each block what you needed was a key block. In this case I used selectedCategory as the key so each time that value changes, it will recreate the element, thus running the transition. Previously the individual items in the list would occupy the space in the grid until the transition finished running 600ms later. The items that didn't change however would not transition since they are not being removed or added. The "key block" recreates all the elements so everything transitions out and then back in every time. Does that work for you? I pushed a commit here: https://github.com/jamestagal/plenti-educenter/commit/88a6336d05a95426660f61a73bed1c5797e5fd9f

[jamestagal]

Hi @jimafisk

Great that certainly worked! 😄 Thank you Jim.

Sorry I have another question. In the course nodes I want to target their paths which links to the teachers profile pages. I have set this up and it works fine but I am getting all teachers. See screenshot.

I have achieved this by creating a courses variable and used allContent prop to get them as below.

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

Then in the template I have created an #each block and targeted their paths, titles and categories. but I think in order to show the teachers on each node course page here, I would have target the fields.trainer.name key because this is unique to each. I think to do this I would need to first create a variable such as selectedTeacher to hold each name then target each trainer.name key. I have implemented the following code into the course.svelte file but it is not working 😸

 let selectedTeacher = Object(allContent.filter ((key) => key.name == content.fields.trainer.name)[0]);

Then in the template I have added an if condition to check if selectedTeacher matches.

 {#each teachers as teacher}
    {#if selectedTeacher}
    <div class="media-body">
    <h4 class="mt-0"><a href="{teacher.path}">
        {teacher.fields.title}</a></h4>
    {teacher.fields.category}
    </div>
    {/if}
    {/each}

But I am sure I have some syntax or expression done incorrectly. Please have a look when you can. Ben

[jimafisk]

Hey @jamestagal, I simplified this a bit: https://github.com/jamestagal/plenti-educenter/commit/0b4b1d6e05ca81ec25d90127ba8b01d72edbdd2b

You can ignore the indent changes, that's just formatting to make it easier to read. You're already specifying the teacher name in your course content under trainer.name so I just match this against the name in the teachers content type, which has a key of title and I make sure to get only one item from the list by adding [0] to the end. Then you can just display the teach without having to setup any loops. Hope that helps!

[jamestagal]

Hi @jimafisk Wow that makes it a lot simpler! Very cool So to make it clear to me, you are comparing the title key from the teachers nodes to the trainer.name key in the course nodes? How can you do that when allContent is filtering on content within the "teachers" nodes not the "course" nodes? I am not sure how that is possible? 😃 Must be magic

P.S. I know this code is in the course.svelte file and we are filtering on the "courses" nodes using the variable 'courses' above so I am guessing because those keys are available here then it is possible!!! Ben

[jamestagal]

Hi @jimafisk You are a pure genius ! Your solution to the last issue solved the next feature on my list!

At the bottom of each teacher node, there is a section for My Courses which displayed the courses a particular teacher teaches. All I had to do to get this to happen was to :

1. Add a courseTitle key to the teachers nodes of the course/s they teach.
2. In the teachers.svelte file, create a variable and filter on the "courses" nodes and add the check to see if the value of content.fields.title is the same as courseTitle.

let course = allContent.filter(content => content.type === "courses" && content.fields.title === courseTitle)[0];

It worked a treat! One question here though, if a teacher teaches more than 1 course, could I just add an additional course with a comma as follows:

"courseTitle": "Photography, Graphic Design"

BTW. Is there an easy way to fix the indenting without doing it by hand? like a plugin to VS code? I notice when copying the html from this template, there is no indenting.

Thanks again Jim. Ben

[jimafisk]

So to make it clear to me, you are comparing the title key from the teachers nodes to the trainer.name key in the course nodes?

Exactly

How can you do that when allContent is filtering on content within the "teachers" nodes not the "course" nodes

I'm not sure I entirely get the question, but I'll try to explain. The allContent prop contains all the nodes in the side, from all the different content types that you define, it has everything. The content prop contains only the information for the current node that you're routed to. We spread the content prop into the courses.svelte template so all its fields appear at a top level, including the trainer field we're using here. So we know the trainer name that is referenced on the current page, now we should want to look up which teacher node has the same name so we can get all sorts of contextual information about the teacher that might not necessarily be present in the course content source. Does that make sense?

You are a pure genius ! Your solution to the last issue solved the next feature on my list!

:blush: thank you, that's great!

Add a courseTitle key to the teachers nodes of the course/s they teach.

You can definitely do that, just keep in mind every time you add a new course you'll have to come back and edit the teacher profile as well to create a link. If you don't want to have to do that, another approach is gathering all the courses where the trainer.name equals the title (teacher name) like this:

let courses = allContent.filter(content => content.type === "courses" && content.fields.trainer.name === title);

if a teacher teaches more than 1 course, could I just add an additional course with a comma

You could do that and your logic would just need to change from content.fields.title === courseTitle to courseTitle.split(', ').includes(content.fields.title). But the method I described in the previous comment allows for multiple courses as well and will be a little easier to maintain in the long term.

Is there an easy way to fix the indenting without doing it by hand? like a plugin to VS code?

There's a shortcut for this: https://stackoverflow.com/questions/68884005/what-is-the-shortcut-to-auto-indent-code-in-vscode. On Ubuntu I can run ctrl-shift-I and it works!

Note: This would be a good candidate for an entity reference (autocomplete) field widget in the CMS (as demonstrated here). So when creating new courses, it would allow you to look up existing teachers and link directly to an existing teacher profile.

[jamestagal]

Hi @jimafisk Great thank you for all explanations. That has cleared it up!

another approach is gathering all the courses where the trainer.name equals the title (teacher name) like this:

Thanks I think this approach is much better 😄 and works as expected, see below.

let course = allContent.filter(content => content.type === "courses" && content.fields.trainer.name === title)[0];

There's a shortcut for this: https://stackoverflow.com/questions/68884005/what-is-the-shortcut-to-auto-indent-code-in-vscode. On Ubuntu I can run ctrl-shift-I and it works!

Thanks. Shift+Option+F works on my Mac.

Note: This would be a good candidate for an entity reference (autocomplete) field widget in the CMS (as demonstrated here). So when creating new courses, it would allow you to look up existing teachers and link directly to an existing teacher profile.

I will explore this more. I did watch your video example and you were tagging .json files and printing them out on the page so I sort of understand but I probably would have a benefited from an example of loading an entity reference to drive home the concept and help me to understand.

Also I noticed after you implemented this functionality https://github.com/jamestagal/plenti-educenter/issues/8#issuecomment-1345901849 the teacher only updates when doing a hard page refresh not changing to other course pages. I will demonstrate in a short screen capture. Maybe this one required a keyed each block or key block to force it to update?

https://user-images.githubusercontent.com/6309595/207160839-021e2ec8-7252-4755-80b2-2b5ec77614f1.mov

Thanks Jim, Ben

[jamestagal]

hi @jimafisk

I just tried git push a couple of change to this repo and got the following error:

git push
To https://github.com/jamestagal/plenti-educenter.git
 ! [rejected]        main -> main (fetch first)
error: failed to push some refs to 'https://github.com/jamestagal/plenti-educenter.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

So then I tried to git pull and then got this error.

git pull
remote: Enumerating objects: 20, done.
remote: Counting objects: 100% (18/18), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 10 (delta 8), reused 10 (delta 8), pack-reused 0
Unpacking objects: 100% (10/10), 2.32 KiB | 216.00 KiB/s, done.
From https://github.com/jamestagal/plenti-educenter
   687ab34..77e4248  main       -> origin/main
hint: You have divergent branches and need to specify how to reconcile them.
hint: You can do so by running one of the following commands sometime before
hint: your next pull:
hint: 
hint:   git config pull.rebase false  # merge
hint:   git config pull.rebase true   # rebase
hint:   git config pull.ff only       # fast-forward only
hint: 
hint: You can replace "git config" with "git config --global" to set a default
hint: preference for all repositories. You can also pass --rebase, --no-rebase,
hint: or --ff-only on the command line to override the configured default per
hint: invocation.
fatal: Need to specify how to reconcile divergent branches.

Could you please suggest a solution? Ben

[jimafisk]

Try running git config pull.rebase false and then git pull again, that should clear up. Sorry it's because I pushed some formatting changes to demonstrate the indentation.

[jamestagal]

ok thanks.

this was the message:

git config pull.rebase false
❯ git pull
Auto-merging layouts/content/events.svelte
CONFLICT (content): Merge conflict in layouts/content/events.svelte
Automatic merge failed; fix conflicts and then commit the result.

and in my VS code I see one file to merge and one file with staged changes So do I just commit them back and then do a git push?

UPDATE: I was able to merge changes and pushed back to the repo so all is good. thanks Ben

[jamestagal]

hi @jimafisk I am trying to solve the issue I mentioned above and shown in the screen capture when clicking to a different course from the listed courses inRelated Courses section of any course node page, the teacher profile doesn't update.

I was thinking of adding a key block as you did for the transition https://github.com/jamestagal/plenti-educenter/commit/88a6336d05a95426660f61a73bed1c5797e5fd9f but here do it for when the course is clicked so it would trigger an update. Below is how I think it could be implemented:

For example: In the courses.svelte file set a variable called profileUpdate, such as

let profileUpdate;

Then in add the key to the block, as below

{#key profileUpdate}
{#each courses as course, i}
{#if i < 3}

And finally, add an on:click event to the course.path, as below.

<h4 class="card-title"><a on:click= {profileUpdate} href="{course.path}">{course.fields.title}</a></h4>

Is this going to work? Ben

[jamestagal]

Hi @jimafisk Sorry for posting multiple questions here but as I do more I have more questions 😊

I wanted to add another condition to the above if condition, in the courses.svelte file on this line to exclude the current course. Because at present when landing on any course page, the same course could be included in the shuffle function that displays courses in the Other Courses section. Firstly how would I get the current course ? to then exclude that current course from loading in this section.

I have tried the following code but it did not work. (and the index is not equal to the title)

{#each courses as course, i}
{#if i < 3 && i != course.fields.title}

[jimafisk]

I think the easiest way to exclude the current course is to remove it from the courses object when you first created it:

export let content;
let courses = allContent.filter(c => c.type === "courses" && c.filepath !== content.filepath);

For the issue where the teacher was not updating when you'd change the course page, the issue was that the teacher variable was being assigned once, but never updated. So I just made a reactive statement to change the teacher every time the content prop changes.

let teacher;
$: if (content) {
  teacher = allContent.filter(content => content.type === "teachers" && content.fields.title === trainer.name)[0];
}

I pushed these changes to the repo, just let me know if they don't work on your end!

[jamestagal]

Hi @jimafisk Thank you for making those changes and fixes. 😃 They do work however I do see an possible improvement here in relation to the courses object because the same thing is happening as with the teachers profile....the first time you click on one of these courses, the same course could be listed in the Other Courses section. The above code only works once you refresh the page and it will then exclude the current course from that list. So I was thinking that by adding a reactive statement with the $ sign as you did with the teacher prop, would work see below:

    let courses;
    $: if (content) {
      courses = allContent.filter(c => c.type === "courses" && c.filepath !== content.filepath);
    }

but when implementing it I got the following error:

Building... 2022/12/21 10:28:27 build.go:154: 
Error in DataSource build step
Can't create props for content/courses/artificial-intelligence.json 
Can't render htmlComponent for layouts_content_courses_svelte
TypeError: Cannot read property 'length' of undefined
    at shuffle (create_ssr:33:28)
    at create_ssr:49:12
    at Object.$$render (create_ssr:1555:22)
    at create_ssr:30:73
    at $$render (create_ssr:1555:22)
    at Object.render (create_ssr:1563:26)
    at create_ssr:1:58

The issue is the length prop. Not sure what that actually means. Maybe the length of the array?

Ben

[jimafisk]

Yeah it sounds like it's trying to iterate through the array before it's loaded. Can you just check {#if courses} before trying to use it?

[jamestagal]

ok so adding it like this?

{#if courses && i < 3}

because if I don't have an operator between the i it throws an error. But this doesn't work to exclude the current course from the list below.

[jimafisk]

I was thinking something like this?

{#if courses}
  {#each courses as course, i}
  {/each}
{/if}

[jamestagal]

Hi @jimafisk I tried the following but that didn't exclude the same course from the list when clicking from another course there. Only a hard refresh works.

 {#if courses}
      {#each courses as course, i}
       {#if i < 3}
       {/if}
      {/each}
{/if}

BTW. I index i is used to only display 3 course cards on that page. Ben

[jamestagal]

Hi @jimafisk How are you ? I am back at work now and have been little busy in general so I haven't been able to focus on Plenti developing recently but I hope I can get back to it very soon. How is everything going your end? Just curious, did you get any response from your PUTO grant application ?

Ben

[jimafisk]

Hi @jamestagal,

Things are good! Been super busy on my end too, so I know how you feel :). I did get a response from FUTO, we didn't get funded, but that's ok - going to push forward anyways. For now we might spend more time optimizing the compiler using Svelte (I think there are lots of gains we can make there) and work on building out some infrastructure that will make Plenti a lot easier for folks to use if they want additional features that Github / GitLab Pages don't provide. It's all still a ways out, but slowly chipping away at it. Thanks for checking in, I hope everything is good with you!

[jamestagal]

Hi @jimafisk That is disappointing about not getting any funding but its good that you have a way forward that will still work to improve the compiler. The infrastructure planning/building sounds good. Looking forward to learning more. 😃

I'm going ok but hearing your PUTO echos my situation in terms of rejection. I am been trying to loan money for a mortgage at the but am getting knocked back mainly because the banks at the moment are being more cautious as a result of uncertain economic climate with interests rates constantly raising here along with cost of living, and my age, and probably also because mine is a single income application and there isn't a lot of movement in terms of capacity to service the loan. Anyways, I remain hopeful but I will just have to wait and see.

Take care Jim and onwards and upwards! Ben.

[jimafisk]

Ah darn, yeah I've been hearing similar stories from other folks about banks tightening up a bit lately. I hope you're able to work to work something out! Take care @jamestagal!

[jamestagal]

Hi @jimafisk Hope you are well. I have a couple of questions.

1. Is the date format for field widgets customisable? I have noticed by default that the format is dd/mm/yyyy however in one field in a Notice it requires only month and year DEC, 2022 and in a Blog post if formats the date as 25 Sept, 2022.

2. Is it possible to have the option to add an additional teacher to a course? At present, we have one but in practice you might have more than one teacher assigned to a course.

So I did try by creating a teacher component called name and tried applying to the courses content but couldn't get it to work with the template. I think this one is a little complicated because we are pulling in teachers into the courses content and also searching teachers with the reference type. Anyway if you think. it is possible, pls suggest a course of action. :)

Regards, Ben

[jimafisk]

Is the date format for field widgets customisable?

Certainly! Whatever date format you use in the initial JSON source should get preserved in your output. If you need a single date field to be represented in different formats you can create a JS date object in your template and set it to whatever format you want.

Is it possible to have the option to add an additional teacher to a course?

Yes! You'll want to change your reference widget to a references widget, which will return an array instead of a string. Then just update your template to account for this (and update any existing content sources so they are arrays instead of strings).

[jamestagal]

Thanks for the info and tips @jimafisk I will work on it next.

Also just wanted to let you know that I was able to borrow enough money to buy a house ! 🍾 I just have to work hard, (I should say Smart) to pay it back now!!! I will move in on the 5th May. Here are the photos I took at the pre-settlement inspection. https://photos.app.goo.gl/nqQcGesUERNiqC4Z8