-
Notifications
You must be signed in to change notification settings - Fork 58
Add a new News item to the home page
Joseph Castle edited this page Apr 20, 2020
·
2 revisions
When a new blog post is published for code.gov (currently on Medium), the post should also be added to the News section on the site home page. Below are instructions to add this to the front-end:
- Clone and install the site locally following the Getting Started instructions in the README.md file.
- Create a new branch following our Git Workflow. Typically we will name this branch using the
initials-update-news-date
pattern, likesc_update-news-11202019
. - Add the image for the new News item to the
assets/img/news
folder. (This can be pulled from the blog post directly.) - Locate the
news
array in the site.json file. See the example of this array below. - Remove the last news item from the
news
array list in site.json. The News widget on the home page should only display the 3 most recent items. - Add the metadata for the News item you'd like to add in the
news
array in the site.json file as the first item (0th location) in the array. Items will be displayed on the home page in the order they are listed in this array. - Save these changes and view the home page in your local browser.
- When you're satisfied with the update, commit the site.json and news image file to the repository.
- Run
npm run test -- -u
from the command line. This will run our test package and also update the Jest snapshot to use the new home page display. - Commit the updated snapshot file.
- Run
npm run test:cypress
from the command line. This will run our end-to-end tests to be sure no unexpected changes have happened. - Push your local branch to GitHub and submit a PR to merge the changes. After the PR is merged, code-gov-front-end must release to production in order for the News to update.
Here's an example of the news
array in the site.json file:
"news": [
{
"title": "Happy 3rd Birthday Code.gov!",
"description": "For our 3rd trip around the sun, we wanted to share where we’ve been, where we are going, and the implementation of the federal source code policy...",
"url": "https://medium.com/codedotgov/happy-3rd-birthday-code-gov-3b9171ceb88e",
"date": "11/20/2019",
"image": "/assets/img/news/bday.jpeg",
"alt": "Happy Birthday"
},
{
"title": "Developing with a Security Mindset",
"description": "As a developer consuming open source dependencies, you must keep it secure. It is imperative that you set up the tools and processes that will help you stay safe, and help raise awareness of secure development practices throughout your organization...",
"url": "https://medium.com/codedotgov/watching-your-back-end-and-your-front-end-developing-with-a-security-mindset-ed5d73615688",
"date": "9/30/2019",
"image": "/assets/img/news/security.jpeg",
"alt": "An open padlock"
},
{
"title": "New Guidance for Enterprise Data and Source Code Inventories (.pdf)",
"description": "OMB releases new guidance for tagging Artificial Intelligence (AI) digital assets…",
"url": "/assets/data/ai_inventory-guidance.pdf",
"date": "8/5/2019",
"image": "/assets/img/news/ai.jpg",
"alt": "Brain outlined in half circuits"
}
],```
Gotchas:
- Be sure that the first 2 items in the array are separated by commas. (after the closing bracket)