netcentric / cn-website Goto Github PK

• Set up a query index for all content under /insights
  see setup indexing

We want to manage the blog authors via some Google Sheet. Blog posts will only store a reference to the author. Author details (images, job title, description) should be loaded dynamically.

• setup & publish the people profile sheet

Implement & style the teaser version of the cards block.

Examples:

1. https://main--netcentric--hlxsites.hlx.page/careers/social-responsibility-netcentric / https://www.netcentric.biz/careers/social-responsibility-netcentric.html
2. https://main--netcentric--hlxsites.hlx.page/who-we-are /https://www.netcentric.biz/who-we-are.html
   

There are two options for the cards block:

• teaser defines the teaser layout
• background enables the 3 different background colors

Fix styling for buttons, like call to action buttons.

Sample page: https://main--netcentric--hlxsites.hlx.page/our-industries

Implement the job list block using external service.

• Job openings loaded from https://api.smartrecruiters.com/v1/companies/netcentric/postings
• Job list displays 16 entries with "Load More" loading another 16 (use ?offset=0&limit=100 parameters)
• Filter by location
• Filter by job role (aka "Search")
• Click on list entry opens job positing in new window

Hint: see original behaviour on loading and filtering.

Franklin page: https://main--netcentric--hlxsites.hlx.page/jobs
Original page: https://www.netcentric.biz/jobs.html

• import sub page manually (copy/paste from html to gdoc) and preview
• adjust default content styles in styles.css
• custom font matching & loading (see https://github.com/adobe/helix-font-fallback-extension#readme)
• add favicon

Original: https://www.netcentric.biz/who-we-are.html
Franklin: https://docs.google.com/document/d/18v60MnckEhak1ykRMH10FdcapkntIQSKxQQX_cJWJEw/edit#

Sample:

Many pages have sections with different background colours we need to support. Documents are already imported with Section Metadata block for these cases. Examples:

https://docs.google.com/document/d/1ceaXivZOPSSCQSoRotFpK6pRJ26VBuZkr3fkSSJ82BU/edit
https://docs.google.com/document/d/1Keaa7phnBrZh1qRoAphTU2yxAnGv-NMx0LnmSyS3cfc/edit

Currently know used styles:

• 'light-plum' > https://main--netcentric--hlxsites.hlx.page/who-we-are
• 'dark-plum' > https://main--netcentric--hlxsites.hlx.page/our-industries
• 'mid-blue' > https://main--netcentric--hlxsites.hlx.page/careers
• 'gray' ??? typo ??? > https://main--netcentric--hlxsites.hlx.page/careers
• 'light-grey' > https://main--netcentric--hlxsites.hlx.page/our-industries

LHS is at 55

• content review done
• get final "go" -
• activate robots.txt & sitemap.xml - #110
• change configuration in CDN - @nc-andreashaller + OPS
• activate CDN config in Franklin config sheet

As a web performance consultant using LiveUX, I need to know when something changed on the website, so that I can easily find a cause of an improvement or regression, and I can know that once ther is a GitHub Action sending an annotation to LiveUX.

So the ask is to create a GitHub Action that calls the LiveUX annotations API to insert a new annotation on deployments to production environments.

Please reach out to me (Andrea Verlicchi) if you need more information.

Current sitemap.xml contains year/month URLs on the /insights/ section, like:

/insights/2018/06.html
/insights/2017/04.html

They all redirect to https://www.netcentric.biz/insights.html.

For Franklin setup redirects sheet for these URLs.https://www.hlx.live/docs/redirects

Implement URL to widget / embed mapping for

• YouTube Player (example page: https://www.netcentric.biz/our-industries/automotive.html)
• Spotify Player (example: https://www.netcentric.biz/insights/netcentric-podcast.html)
• Twitter Cards (example: https://www.netcentric.biz/insights.html)
• wistia.com Video (example https://www.netcentric.biz/what-we-do/netcentric-raiffeisen-schweiz-case/success-case.html)

Like with the current website we want to integrate Adobe Analytics. Especially we should make sure that the data collection is not interrupted and the type of events and structure of the datalayer stays the same.

• Copy/paste links from top navigation to the nav document and preview it
• Open an existing page in preview, the nav will be included as a fragment (/nav.plain.html)
• Style the header/navigation
  • see local dev setup
  • see header block documentation

• Create author profile pages templates
• Setup index for author profiles

Implement sidebar for blogpost page displaying the author(s) and social share links.

Implement & style the social button version of the cards block.

Sample: https://main--netcentric--hlxsites.hlx.live/ / https://www.netcentric.biz/

We need a hidden element in the DOM with some data-attributes so we can access some data. In the future, we will require variables in the global JS workspace, but for the first golive this is the solution we need.

The data attributes can be in any tag of the page, like a hidden div.

<div class="hidden" data-...></div>

Here are the data attributes we need.

This was extensively discussed in this conversation.

Hello,

as a web performance consultant, I’d like to add our LiveUX (a RUM tool) collector script to the website, so that I will be able monitor performance in the field.

The script to add is already present in the current version of the website, and it is:

<script 
  src="https://liveux.cnwebperformance.biz/collector/collector.min.js?id=webperf-netcentric" 
  defer 
  crossorigin="anonymous"></script>

More information on LiveUX can be found here.

As per Markus message on Slack, this would need to be put in the scripts/delayed.js file.

Thank you

Usually we add scripts that are not critical to delayed.js to keep the scripts.js a small as possible.

That means that any code that is only executed / needed in delayed.js should be included there and not in scripts.js.

Introduced in a7a6073

Use on multiple career pages in different variants.

Sample 1: https://www.netcentric.biz/how-we-work/studios.html / https://main--netcentric--hlxsites.hlx.page/how-we-work/studios
Sample 2: https://www.netcentric.biz/careers/netcentric-switzerland.html / https://main--netcentric--hlxsites.hlx.page/careers/netcentric-switzerland
Sample 3: https://www.netcentric.biz/careers/netcentric-germany.html / https://main--netcentric--hlxsites.hlx.page/careers/netcentric-germany

As discussed in Slack Franklin supports all evergreen Browsers, we should document this somewhere (wiki or repo) and more importantly align this with current Analytics and communicate it with Business Stakeholders.

Implement partner block used on several pages.

Block behavior:

• dektop 6 icons / logos max per defautl
• if more than 6 carousel behavior to scroll left & right
• on mobile implement a first version with resonable breakpoints

Today the component is usually hidden on mobile since the slider does not work/fit here. We can have a simple first mobile version first and iterate later.

Example:
https://www.netcentric.biz/ & https://main--netcentric--hlxsites.hlx.page/
https://www.netcentric.biz/what-we-do.html / https://main--netcentric--hlxsites.hlx.page/what-we-do

See https://github.com/hlxsites/netcentric/pull/93/files#r1033235092

https://www.hlx.live/docs/placeholders

• Set up content import for pages in general
• Create mappings for today's site structure to content and blocks as needed
• Configure importer mapping for /insights/ pages
• Configure importer mapping for other areas with higher volume of identical pages

Common Blocks

• Leader Profiles
• Accordion
• Image/Icon Teasers
• SideBySide Teaser

This relates to see #2

Original: https://www.netcentric.biz/who-we-are.html
Franklin: https://docs.google.com/document/d/18v60MnckEhak1ykRMH10FdcapkntIQSKxQQX_cJWJEw/edit#

Implement auto-blocking for hero. Pages have different hero versions.

on blog posts

• title + image
• title + subtitle + image

other all pages

• title with background color
• optional subtitle & c2a buttons

Reference: https://www.netcentric.biz/ & https://www.netcentric.biz/careers.html

• Render dynamic "More" headline based on category
• Render 3 related blog posts based on block index (this is blocked by #5 )
• Render "Block Overview" button

Original: https://www.netcentric.biz/our-industries.html or https://www.netcentric.biz/how-we-work.html
Franklin: https://main--netcentric--hlxsites.hlx.page/our-industries or https://main--netcentric--hlxsites.hlx.page/how-we-work

• Hover effects
• Desktop/Mobile version

Sample a:

Sample b:

Sample 1: https://www.netcentric.biz/careers.html in "Learn more from our team" section / https://main--netcentric--hlxsites.hlx.page/careers
Sample 2: https://www.netcentric.biz/careers/netcentric-germany.html / https://main--netcentric--hlxsites.hlx.page/careers/netcentric-germany

• all headlines use correct font, size and colours
• text (p tag) use correct font, size and colours

Implement the blog post footer

• auto-block the content of the blog post footer (categories, author profiles)
• render social media share links

For /insights/blog.html we need a blog article block.

• Blog posts are listed based on query index (see #5 )
• Implement category filter
• Implement "show more" functionality

• Copy/paste content from the site's footer to the footer document and preview it
• Open an existing page in preview, the footer will be included as a fragment (/footer.plain.html)
• Style the footer
  see local dev setup
  see footer block documentation

Currently the links of the language navigation are hardcoded to the english and german homepages but they should consider the current page as context. For example when serving on https://www.netcentric.biz/what-we-do the "DE" link in the header should point to https://www.netcentric.biz/de/what-we-do.html and vice versa.

• main query index config used for sitemap
• sitemap.xml
• robots.txt

Sample pages

https://docs.google.com/document/d/1Keaa7phnBrZh1qRoAphTU2yxAnGv-NMx0LnmSyS3cfc/edit
https://docs.google.com/document/d/1ceaXivZOPSSCQSoRotFpK6pRJ26VBuZkr3fkSSJ82BU/edit

• clarify with authors which variants exist

• import sub page manually (copy/paste from html to gdoc) and preview
• define split between default (semantic) content and where blocks are needed to achieve the desired output (see https://www.hlx.live/developer/block-collection for readily available blocks)
• create separate issues for required custom blocks

Users choice on the cookie banner is not respected. I get the cookie banner on every page load.

For the CDN setup we should follow https://www.hlx.live/docs/byo-cdn-fastly-setup, assuming we continue on Fastly.

As we decided to not migrate the german part of the page we need to implement a filter on CDN level to forward certain paths to AEM:

• /de*
• /etc.clientlibs/*
• /content/experience-fragments/netcentric/global/de/*
• /content/dam/*

Implement iFrame embed block for the pages which have iFrame embeds:

Sample:

• https://www.netcentric.biz/what-we-do.html / https://main--netcentric--hlxsites.hlx.page/what-we-do
• https://www.netcentric.biz/careers/diversity-inclusion.html / https://main--netcentric--hlxsites.hlx.page/careers/diversity-inclusion

Columns (2):

• layout 25-75 (https://www.netcentric.biz/insights/netcentric-podcast.html)
• layout 33-66 (https://www.netcentric.biz/what-we-do/bernstein-methodology.html)
• layout 66-33 (https://www.netcentric.biz/our-industries.html)
• layout 75-25

Styling

• border in-between (https://www.netcentric.biz/our-industries.html)
• border top-right (https://www.netcentric.biz/what-we-do/digital-strategy.html)
• border top-left (https://www.netcentric.biz/insights/netcentric-podcast.html)

Heading Colors

• heading-dark-blue (https://www.netcentric.biz/our-industries/financial-services-insurance.html)
• headling-dark-plum (https://www.netcentric.biz/our-industries.html)

On https://www.netcentric.biz/what-we-do.html

As Cognizant’s Adobe center of excellence, our...

Columns

Our Offerings

Columns (layout 25-75)

Our latest Podcast or

Columns (layout 33-66, border top-left)

Success cases & Whitepapers

Columns (layout 66-33, border in-between)

Reference: https://www.hlx.live/developer/forms

• Set up configure forms sheet

Sample forms:

• https://www.netcentric.biz/lets-talk.html
• https://www.netcentric.biz/our-industries/logistics.html (see "Get in touch ...")