Giter VIP home page Giter VIP logo

merative2's Introduction

Merative.com (Phase 2)

merative.com on Adobe's AEM Franklin.

Environments

Type Description
preview .hlx.page creates preview of content and is automatically created for each branche for content preview and testing.
live .hlx.live is the live/product ready enviroment for published content.

Getting started

See the links below for the steps needed to develop/contribute to this repo.

Setup

Our repository requires that a forked repo is used for any work before contributing back to the repository. This includes regular team members/maintainers.

  1. Fork the project by navigating to the main repository and clicking the Fork button on the top-right corner.

  2. Navigate to your forked repository and copy the SSH url. Clone your fork by running the following in your terminal:

    $ git clone github.com:{ YOUR_USERNAME }/merative2.git
    $ cd merative2
    

    See GitHub docs for more details on forking a repository.

  3. Once cloned, you will see origin as your default remote, pointing to your personal forked repository. Add a remote named upstream pointing to the main merative2:

    $ git remote add upstream [email protected]:hlxsites/merative2.git
    $ git remote -v
    
  4. Switch to our version of Node. The currently supported node versions are listed within the package.json file under the "engines" key.

Installing dependencies

  1. Install the helix-bot app and make sure it has read/write access to your fork repository.

  2. Install the Helix CLI. This CLI allows engineers to create, develop, and deploy digital experiences using Project Helix.

npm install -g @adobe/helix-cli
  1. In order for you to install all the dependencies in this project, you'll need to install NPM and run the following command in your terminal:
npm install

Run your local Helix Pages Proxy. This opens http://localhost:3000/ and you are ready to make changes.

hlx up

You're all set and ready to start developing locally!

A good place to start is in the blocks folder which is where most of the styling and code developed for this project. Simply make a change in a .css or .js and you should see the changes in your browser immediately.

Common tasks

While working on the project, here are some of the top-level tasks that you might want to run:

Command Usage
npm run test Use this command to run active tests
npm run lint This command runs both lint:css and lint:css

Submitting a Pull Request

  1. Pull the latest main branch from upstream:

    $ git pull upstream main
    
  2. Always work and submit pull requests from a branch. Do not submit pull requests from the main branch of your fork.

    $ git checkout -b { YOUR_BRANCH_NAME } main
    
    
  3. Create your patch or feature.

  4. Test your branch and add new test cases where appropriate.

  5. Commit your changes using a descriptive commit message.

    $ git commit -m "fix(component-name): Update header with newest designs"
    

    Note: the optional commit -a command-line option will automatically "add" and "rm" edited files. See Close a commit via commit message and writing good commit messages for more details on commit messages.

    This project uses a commit format called Conventional Commits. This format is used to help automate details about our project and how it changes. When committing changes, there will be a tool that automatically looks at commits and will check to see if the commit matches the format defined by Conventional Commits.

  6. Once ready for feedback from other contributors and maintainers, push your commits to your fork (be sure to run npm run lint and npm run test before pushing, to make sure your code passes linting and unit tests):

    $ git push origin { YOUR_BRANCH_NAME }
    
  7. In Github, navigate to https://github.com/hlxsites/merative2 and click the button that reads "Compare & pull request".

  8. Write a title and description, then click "Create pull request".

    Follow the PR template defined for the project.

  9. Stay up to date with the activity in your pull request. Maintainers will be reviewing your work and making comments, asking questions, and suggesting changes to be made before they merge your code.

  10. When you need to make a change, add, commit and push to your branch normally.

    Once all revisions to your pull request are complete, a maintainer will squash and merge your commits for you.

Resources

merative2's People

Contributors

7r0u8l3 avatar ajeet-nellikeri avatar amol-anand avatar amolanand18 avatar arumsey avatar blefebvre avatar chandans1316 avatar danielcodepad avatar dkuntze avatar fkakatie avatar gilliankrause avatar helms-charity avatar kmurugulla avatar kunwarsaluja avatar nimithshetty17 avatar proeung avatar roronoasrinu avatar sahmad-merative avatar srinure avatar vladimirzaets avatar

Stargazers

 avatar  avatar

merative2's Issues

Lighthouse HTML header hierarchy fixes part 2

Lighthouse has more complaints:
https://pagespeed.web.dev/analysis/https-issue-178-h4-pre--merative2--hlxsites-hlx-page-drafts-amol-health-plans/t7cvca7gxn?utm_source=psi&utm_medium=redirect&form_factor=mobile

Check on related-resources and other places for opportunities to increase accessibility scores with regard to headings.

  • Anthony has already added <code> stying in CSS where the H4s were styled previously.
  • Will need to re-author landing pages that have H4 in the Columns blocks to H3.
  • Will need to update authoring guide on when to use code for eyebrow.

related tickets: #203 , #205 , #207

[Thought Leadership]: Develop a "Hero" aka Solution Leadspace Block

Problems/Motivation

Within the Thought Leadership landing, we have a hero/lead space block that gets displayed for each solution (eg. Health Insight)

Proposed Solution

  • Add a new block for the Hero aka Solution Leadspace (/blocks/hero)
  • Add the following fields for the Solution filtering/taxonomy
    • Image
    • Icon/SVG
    • Solution Name

Design Specs

Lighthouse accessibility for blog article headings

On blog article pages, the top heading should be H1 (there are some that are still H2 that need to be changed), which means the next level heading should be H2. Currently, subheadings in the content are authored at H3 which is causing a LIghthouse alert.

To remedy:

  1. H2 style for the blog template needs to be changed to match the general H3 style that was seen in the Figma designs.
  2. Update "tags-wrapper" so it will show after the H1 (currently is set to H2)
  3. The template in the sidekick block library needs to be updated with the correct examples so new pages going forward will be compliant
  4. Existing blog pages need reauthoring to be sure page heading is H1 and lower headings start with H2.

Example of a page with an H1, and no tags: https://main--merative2--hlxsites.hlx.page/blog/nurse-burnout-efforts-should-target-younger-nurses

image

Example of a page with an H2 that has tags: https://www.merative.com/blog/4-ways-rsna-laid-out-imaging-ai-future

https://pagespeed.web.dev/analysis/https-main--merative2--hlxsites-hlx-page-blog-nurse-burnout-efforts-should-target-younger-nurses/0bm31ipd72?form_factor=mobile

authoring: /merge-imaging

Clean up the autoblocking of the nav fragments

Currently it is too easy to break this.
Consider having the author simply link the text blocks instead of applying the link under the text "only if it's in a P and not a button".

Look at header.js line 58 buildMegaMenu,

  • We could author the H5 to be a link, then move the P inside the A tag (which is already on the H5),
  • we cold remove the "a:not(.button)" because it is removed anyway

Accessibility: Change H4 eyebrows to <pre>

To maintain the header hierarchy for accessibility best practices (and improve LightHouse score), we need to:

  • Find and replace all instances of the eyebrow in the blocks from H4 to PRE
  • Find and replace any eyebrows that are in default content (mainly the landing pages only).
  • update the authoring guide to instruct users to use the preformatted text option from the Word toolbar when they need these small section pre-headings.

Examples:
https://main--merative2--hlxsites.hlx.page/health-plans
image

QA: /health-plans, /providers, /employers, /government

[Thought Leadership]: Adjust Article Body style to align with design specs

Problems/Motivation

  • Currently, there's an article body block that has been implemented into Franklin, however, it's not aligning with the design defined in Figma.
  • There are spacing and alignment issues as well as no proper styling for the quote.
  • See EPIC for project detail - MERATIVE-737

Proposed Solution

  • Adjust the existing styles.css file to ensure that the body content matches the design.
  • Adjust the article-quote block to match with design

Frame 43643
Frame 43488

Design Specs:

authoring: /real-world-evidence

Blog: Sharing icons location in mobile + tablet

Our Franklin pages currently have the sharing icons at the end of the article for mobile + tablet breakpoints:
(also, the icons and sub nav is missing in tablet)
https://main--merative2--hlxsites.hlx.page/blog/4-ways-rsna-laid-out-imaging-ai-future
image

But Figma mobile + tablet designs have the sharing icons above the "left" sub-navigation area, and below the photo + author byline.

FIgma:
image
https://www.figma.com/file/vw24IPXXt4vCh9BNumka9A/Web--Merative-Digital-Design-System-2.0?node-id=9144-42221&t=NUrRjiq91nWQfSOW-0

Add tablet-large breakpoint

Per Keith, they don't want to lock the tablet layout at 696px wide.

I was speaking with
@Sachin Meshram
last week and on this issue hlxsites#173 and I think there was a miscommunication. It turns out the comment was about a fluid layout on tablet.

It looks like across the whole site the tablet view is locked at the 768px width, but Sachin was trying to say that the layout should not be locked at that width and instead fill the spacing of the browser.

Ana's recommendations are to have a fluid design between 992px and 1191 (I've asked to go to 1199).
image

authoring: /merge-imaging/partner-innovations

authoring: /clinical-decision-support

Authoring: /healthcare-analytics

Published Date Box

Hi all,

We'd like to see a box in the metadata that lists a "Last Published On:" date where the user can enter a date. This will be good for articles that need frequent updating or reference specific data.

I'll reach out to Ana and see if I can get a mockup for this to include in this request.

authoring: /merge-imaging/cardiology, /merge-imaging/radiology

[Thought Leadership]: Ensure that podcast embed functions/displays correctly

Problems/Motivation

  • "Podcast" is one of the content types that we're listing within the Thought Leadership
  • See EPIC for project detail - MERATIVE-737

Proposed Solution

  • Add a new block for the podcast (/blocks/podcast)
  • Open question: What are the different podcast embeds are we using (eg. Spotify, Apple Podcasts, etc)?

Design Specs:

Prevent content from /drafts from being published

We would like to restrict anything in the /drafts folder from being published to production or merative.com. Right now, if you preview and then publish it gets published to a merative.com. We want to prevent that even if the /draft folder is disallowed from being indexed.

image

FYI @helms-charity

[Thought Leadership]: Adjust "Video" block to match with design

Problems/Motivation

  • There's an existing "Video" block within Franklin, however, we need to ensure that this component/block matches with the new design specs.
  • See EPIC for project detail - MERATIVE-737

Proposed Solution

Design Specs:

Frame 43481

[Thought Leadership]: Develop sidebar filtering for landing page

Problems/Motivation

  • Implement a "Thought Leadership" landing with filtering and results features
    • Solutions
    • Audience
    • Content type
    • Topics
  • See EPIC for project detail - MERATIVE-737

Proposed Solution

Add a new block for the Thought Leadership filtering/landing and called it /thought-leadership-home
Repurpose the blog filtering functionality - https://github.com/hlxsites/merative2/tree/main/blocks/blog-home

Design Specs

Figma - https://www.figma.com/file/dFJwrp6VkUMSirF2KMLRMx/Thought-leadership-library?type=design&node-id=357%3A17807&t=Z0AYOyO6y6f02DDy-1
Navigation - desktop
Landing page

[Thought Leadership]: Adjust Linkable Cards aka Card list block

Problems/Motivation

  • Within the detail page of some of the content types that are tagged with "Thought Leadership", there's a section for display resources.
  • See EPIC for project detail - MERATIVE-737

Proposed Solution

Design Specs:

Figma - https://www.figma.com/file/dFJwrp6VkUMSirF2KMLRMx/Thought-leadership-library?type=design&node-id=357%3A17984&t=iaNohDrbt4220FLs-1

Desktop

Screen Shot 2023-05-25 at 2 30 54 PM

Screen Shot 2023-05-30 at 12 27 46 PM

Corresponding JIRA issue

bug: Better handling of adding "lede" class needed

Per #211
JS was introduced to add a class="lede" to the paragraph that directly follows the H1 tag. I noticed if there is NOT a lede sentence authored, then the class will be added lower down on the page
image

To do: add specificity so that the class is not added anywhere if there is no lede authored.

Post Go Live: Google Search Console

Google Search Console
If you have an active Google Search Console with your sitemap uploaded, it may be valuable to get a coverage report and make sure that indexing works as expected. The Google Search Console should be monitored for the weeks after a go-live.

Pre Go Live: 404 report

404 report
After a website has been migrated there are usually a set of 404 Not Founds, we recommend to monitor those after the go-live and redirect popular page URLs. This information can be pulled from your site analytics are the respective Franklin bot report. Monitoring this for the weeks after a go-live is recommended.

H1 size based on path or template

I asked the Merative team about the leadspace H1 sizes on this Figma link: https://www.figma.com/file/vw24IPXXt4vCh9BNumka9A/Web--Merative-Digital-Design-System-2.0?node-id=1402%3A10726&t=HwZmAQ6wjeXX8R19-1

So far, Ana says that any pages living under these sub directories should get the SMALL H1 style:

/events
/offers
/webinars

(They have other uses for the smaller H1 size, but Keith says not to worry about those right now as they've not ironed out all the details...)

Incorrect column spacing in section bottom on homepage

image

Default margins between column elements are being used. Custom spacing may need to be added when columns is in a section-bottom section.

<div>
              <h1 id="32">32%</h1>
              <h4 id="decrease">DECREASE</h4>
              <p>in ED visits by high utilizers โ€“ Sonoma County, California</p>
</div>

According to design this pattern should be based on stats.

[Chore]: Update get started doc and add commit lint to the project

Problems/Motivation

  • We're starting to onboard new devs to the project and we need to ensure that folks contributing to this project are provided proper get-started documentation that aligns with our Merative's dev process.
  • Also, we don't have a proper commit convention established and we need to ensure that contributors to the project adhere to a set of rules.

Proposed Solution

  • Update README.md
  • Install commitlint

QA: /support/[various]-support-details pages

Update font size in pull quote style on blog

Example URL - https://www.merative.com/blog/introducing-marketscan-workspace
Problem: the size text of the quote needs to be adjusted to meet the design system.
Figma Link: https://www.figma.com/file/FSqQ1LYrVSssEFOZuOnMIE/Final-page-layouts-for-Merative.com?type=design&node-id=202%3A67492&t=zEkBZhn8H6EYq4DY-1

Quote text is
//styleName: Desktop/Heading/H4;
font-family: Alliance No.1;
font-size: 21px;
font-weight: 500;
line-height: 34px;
letter-spacing: 0.01em;
text-align: left;

Source text is
//styleName: Desktop/Heading/H5;
font-family: Alliance No.1;
font-size: 16px;
font-weight: 400;
line-height: 26px;
letter-spacing: 0.01em;
text-align: left;

On live site
image

Design
image

Make Header and Footer links relative

Part 1: Header links were fixed via #200 for the pages that are on Franklin. The pages that are not on Franklin should be left as links to www.merative.com.
Part 2: Footes -- Only 2 links as of 2023-05-30T13:07:45-04:00 are residing on Franklin, so the rest will be left as www.

Lighthouse: Incorrect aspect ratio for Related article card images

Need to fix this score as reported for https://www.merative.com/blog
(report link: https://pagespeed.web.dev/analysis/https-www-merative-com-blog/i6wq4prr8x?form_factor=mobile )

Image display dimensions should match natural aspect ratio. Learn more about image aspect ratio.

image

Also, the Blog author image has the same problem:
image
https://pagespeed.web.dev/analysis/https-215-relatedeyebrow--merative2--hlxsites-hlx-page-blog-test-article/q8qbu1r4s6?utm_source=psi&utm_medium=redirect&form_factor=mobile

An optional opportunity for improvement:
Lighthouse says we should set height and width sizes of the cards in the related-articles block cards.

image

QA: /support/...support-details/release-notes...

Lighthouse: Columns content-band, icon-list H4

Heading elements are not in a sequentially-descending order.
H4 headings in the Columns block should be H3. However, there are differing styles of headings depending on whether the columns block has class "picture-circle" vs. "icon-list", so re-authoring will need to be done.

https://pagespeed.web.dev/analysis/https-www-merative-com-events-2023-zelta-user-conference/yb6sbdhdfi?form_factor=desktop

Examples:
https://www.merative.com/events/2023-zelta-user-conference -- the "EVENT SPECIFICS" section,
https://main--merative2--hlxsites.hlx.page/life-sciences -- the "FEATURED SOLUTIONS' section.

image

authoring: /clinical-development

Bug with hlx CLI restarts

Often the hlx CLI needs to be restarted in our local environments when the home page doesn't finish rendering, and gets "stuck". Amol says this seems to be unique to our project and we need to dig in to the cause.

Update: I am seeing this in the console when I try to reload localhost, and then stop it from loading

failed to load module for header TypeError: Failed to fetch
    at fetchFragment (header.js:19:22)
    at header.js:261:35
    at Array.map (<anonymous>)
    at Module.decorate (header.js:255:86)
    at async lib-franklin.js:360:15
    
    Uncaught (in promise) TypeError: Failed to fetch
    at lib-franklin.js:161:9
    at new Promise (<anonymous>)
    at fetchPlaceholders (lib-franklin.js:159:47)
    at delayed.js:3:28

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.