✨ New SSW Articles - Create page template and index

[tiagov8]

cc @uly1 @andrewwaltosssw @samsmithssw @amankumarrr @wicksipedia @camillars

As per @miichaelsmedley 's Re: Improve our SEO for .net 8 migrations

We want to have a new "SSW Articles" page under https://ssw.com.au/articles

This will be a series of SEO friendly articles that answer questions or provide insightful opinions that will be engaging to decision makers designed to answer questions being asked earlier in the decision cycle whilst the person is researching their solutions.

Tasks

• [x] 1. Create a new page template for Articles, based on this mockup: https://www.figma.com/design/oLCYGpRBbkzASrChz4k88D/SSW-Website---Articles?node-id=1-2&t=qHd7Zot9xYlzxc2s-0 Note: Every content element (headers, lists, etc) should follow the standard used on other pages (E.g. About SSW)

• [x] 2. Create an index to navigate through those pages as per the mockup in the same file

• [x] 3. Create a sidebar element to promote microservices (using mockup details as example). We should be able to create more of those and add to different pages.

• [x] 4. Use this article example on Loop for the 1st article. Note: Please get access permissions from @miichaelsmedley

• [x] 5. Get a test pass from Mike + Uly

• [x] 6. Tell Mike to create some new articles

• [x] 7. Add the new page "Articles" to Main menu | About Us | Our Blogs

---

Note: Any conceptual concerns should be clarified with @miichaelsmedley. Any design questions, please ask @tiagov8

---

[Calinator444]

@tiagov8

I think you have these page templates labelled the wrong way around

[Calinator444]

Link to the mockup templates

https://www.figma.com/design/oLCYGpRBbkzASrChz4k88D/SSW-Website---Articles?node-id=0-1&t=qHd7Zot9xYlzxc2s-1

[tiagov8]

I think you have these page templates labelled the wrong way around

You're right. I already fixed in Figma, but since it's not crucial I won't update here

[wicksipedia]

Note: this should be done with the new app router implementation so we avoid more page router debt

[wicksipedia]

@Calinator444 - you may need to take this over to clean up linting issues

pls check that the index page implementation is the same as the event index page. @Harry-Ross worked hard on that one to use react query

[Calinator444]

@wicksipedia

I added a "Load More" button while I was adding the prefetch for articles to the index page (which is working btw). I figured the number of articles will grow quite quickly.

Note: To show off the effect I had it prefetch 1 article and load 1. This is obviously bad UX and I'm planning to prefetch and then load 10 events at a time.

[Calinator444]

I've tested this, got a done video here https://youtu.be/CUzjmOlmAik

I did see a broken link for Calumn's profile picture while adding a test article and just need to verify that this won't break in staging.

[Calinator444]

@wicksipedia

Merged, but Micheal Smeadly requested some changes

[Calinator444]

I've captured the feedback that Michael left here:

Article template changes:

• Add a date of publication for articles
• Add add a call to action at bottom
• remove padding for sidebar on smaller screens
• Remove the padding for the sidebar on smaller screens
• improve notes for video embed (Overflow prop? what does that mean)

Tina Feedback

• Not sure how to create new branches when creating articles
• Doesn't fix headings when copying and pasting
• Can't create new branches when on a feature branch in Tina
• It's confusing losing the article when you go to edit the author field