feat(thought-leadership): Add sidebar filtering and results

[sahmad-merative]

Issue MERATIVE-743

Fixes #

Description

Implement a "Thought Leadership" landing with filtering and results features Solutions Audience Content type Topics

Add a human-readable description/detailed summary of what the PR is changing and any details about how and why. If applicable, include a screenshot indicating an example or examples of what the PR is changing in the application.

New

• Implement a "Thought Leadership" landing with filtering and results features Solutions Audience Content type Topics

Changed

Removed

Design Specs

If applicable, add the direct link to the design specs of the component/feature that's part of this PR.

• Figma Link -https://www.figma.com/file/dFJwrp6VkUMSirF2KMLRMx/Thought-leadership-library?type=design&node-id=357-17807&mode=design&t=ruJDKhBVbzaP2Gnw-0

Test URLs

• Before (Changes from main): https://main--merative2--sahmad-merative.hlx.page/thought-leadership
• After (Changes from this PR): https://743-sidebar--merative2--sahmad-merative.hlx.page/thought-leadership

Testing Instruction

If applicable, please describe the tests that you ran to verify your changes. Provide instructions and link to the hlx deploy preview so that QA and the design team can provide proper testing.

• 

[aem-code-sync[bot]]

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.

• [ ] Re-run PSI Checks

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/saad/blog

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/saad/blog

[helms-charity]

This seems to have some redundancy so the blog-home.js, are there plans to consolidate?

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/thought-leadership/thought-leadership

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/thought-leadership/thought-leadership

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/thought-leadership/thought-leadership

[sharathmrft]

QA Observations/Issues

1.Load more()counts if it is single digit ex:1,4,6 it should show as Load more(01),Load more(04).instead of Load more(1),Load more(4) 2.White space is appearing in tab and mobile at the top-Reported Issue already 3.Underline is missing for the author name below each card
4.Filters navigation is not aligned properly

Screen shot for the 4th point is attached here

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/thought-leadership/thought-leadership

[proeung]

@sahmad-merative These changes are much improved! Thanks for consolidating/reusing the existing code, however, I still noticed some bugs have not yet been addressed correctly.

• I noticed that you've added a thought-leadership.doc to the /thought-leadership directory (see attached). This is not needed as the/thought-leadership page has already been created in the root directory (see - https://merative.sharepoint.com/:w:/s/Merative.comWebsite/EQDJzWzAAOdEgJ7w-n847ssBj7ErZCf_W3bH1x3eq1n0iA?e=BYwORf). Let's remove this doc and append the filtering to /thought-leadership.

• As noted above, we should be running the GLH score CI against the links below instead of https://743-sidebar--merative2--sahmad-merative.hlx.page/thought-leadership/thought-leadership.

  • Before (Changes from feat/thought-leadership): https://feat-thought-leadership--merative2--hlxsites.hlx.page/thought-leadership
  • After (Changes from this PR): https://743-sidebar--merative2--sahmad-merative.hlx.page/thought-leadership

• Change the sidebar title to "Thought leadership"

• Change the first filter list to "Solutions"

• Move the topic listing below "Content Type"

• The listing within the "Solutions" filter should be pulling in pages within /thought-leadership/solutions/ (see - https://merative.sharepoint.com/:f:/s/Merative.comWebsite/Etpf56GBGO9DjelPcBLoDMcBuhLHQ5Fwgh6eph1kq1bA4g?e=pa6DOZ)

• Filter results should be pulling from other content types and not just Blog

cc: @keith-kaplan @Shalini-SB

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/thought-leadership

[sahmad-merative]

Hi @proeung

You can find the comments to your feedback below

• I noticed that you've added a thought-leadership.doc to the /thought-leadership directory (see attached). This is not needed as the/thought-leadership page has already been created in the root directory (see - https://merative.sharepoint.com/:w:/s/Merative.comWebsite/EQDJzWzAAOdEgJ7w-n847ssBj7ErZCf_W3bH1x3eq1n0iA?e=BYwORf). Let's remove this doc and append the filtering to /thought-leadership. --Not an issue as this a page path, We can just address above mentioned doc too without any code changes

• As noted above, we should be running the GLH score CI against the links below instead of https://743-sidebar--merative2--sahmad-merative.hlx.page/thought-leadership/thought-leadership.

• Before (Changes from feat/thought-leadership): https://feat-thought-leadership--merative2--hlxsites.hlx.page/thought-leadership

• After (Changes from this PR): https://743-sidebar--merative2--sahmad-merative.hlx.page/thought-leadership

Updated the description

• Change the sidebar title to "Thought leadership" -- Done

• Change the first filter list to "Solutions" -- Done

• Move the topic listing below "Content Type" -- Done

• The listing within the "Solutions" filter should be pulling in pages within /thought-leadership/solutions/ (see - https://merative.sharepoint.com/:f:/s/Merative.comWebsite/Etpf56GBGO9DjelPcBLoDMcBuhLHQ5Fwgh6eph1kq1bA4g?e=pa6DOZ) -- Can you help me with this as I am not sure how to fetch the page names from a directory on sharepoint, Currently I am fetching page names from "query-index.xlsx" file as discussed earlier and also mentioned in the "proposed solution" section in ticket description(MERATIVE-743)

• Filter results should be pulling from other content types and not just Blog -- I am pulling all content types but all the thought leadership pages are having content-type as Blog, hence its just showing Blog. Please refer the main "query-index.json" file https://main--merative2--hlxsites.hlx.page/query-index.json

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/thought-leadership

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/thought-leadership

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/thought-leadership

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/thought-leadership

[sharathmrft]

@sahmad-merative Selected filters are not showing with 'Clear all' enabled link

Tested the below scenario its looking correct. Ensure that the filter title/listing on the left sidebar is sorted by ascending.

@proeung Please suggest the way to test the below scenario Card results should be sorted by the latest published date (descending). Sorting order should be the same as what we have Blog landing page

cc @keith-kaplan @Shalini-SB

[proeung]

@sahmad-merative The items that are marked as done in this comment (https://github.com/hlxsites/merative2/pull/274#issuecomment-1633955162) look good, however, I'm still seeing missing styling for the "Thought Leadership" title on the sidebar (see attached). Please ensure that the style aligns with the design.

Can you help me with this as I am not sure how to fetch the page names from a directory on sharepoint, Currently I am fetching page names from "query-index.xlsx" file as discussed earlier and also mentioned in the "proposed solution" section in ticket description(MERATIVE-743)

See my comment here (https://github.com/hlxsites/merative2/pull/274#discussion_r1262925185). Try taking a stab at what I mentioned, but if you're still blocked on this, I can push up a commit to create a function that returns only the solutions list, If I have availability tomorrow or Monday.

Filter results should be pulling from other content types and not just Blog -- I am pulling all content types but all the thought leadership pages are having content-type as Blog, hence its just showing Blog. Please refer the main "query-index.json" file https://main--merative2--hlxsites.hlx.page/query-index.json

Looks like we have some content tagging cleanup/adjustment to do for the other content types so that we have the right values to filter in the code. @keith-kaplan will get back to us on when the content authors will have this done.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/thought-leadership

[proeung]

Closing out this PR in favor of this one (https://github.com/hlxsites/merative2/pull/286) that's opened by @amol-anand.