USWDS-Site: Add clarity to Phase 2: compile instructions

[amyleadem]

Summary

Updated the guidance in Phase 2: Compile to add clarity by:

1. Re-organizing content to more clearly identify which instructions are for uswds-compile users and which are for users who compile Sass a different way
2. Updating the file names in the code demos to match what uswds-compile creates
3. Adding copy to clarify which files are project files and which are USWDS files

⚠️ The changelog date will need to be updated before merge.

Related issue

Closes #2061

Preview link

Preview link: Phase 2: Compile

Problem statement

There is an opportunity to add clarity about which files will be provided by USWDS and which will need to be created by the user.

This issue was originally flagged in this Slack thread.

Testing and review

• Confirm that there are no spelling or grammatical errors
• Confirm the file names in the code samples matches what is generated by uswds-compile
• Confirm that the content order makes sense

[bonnieAcameron]

Hi @amyleadem ! These changes are all so great. I have a small suggestion about paring down the wordiness on a list of steps, but other than that it looks fantastic.

[bonnieAcameron]

As an aside @amyleadem , do you think I could pick your brain about when/how/why you use code styling on your documentation? I think it's really useful and I think it would be smart to add it to a USWDS style guide or operationalize it in some way.

[mahoneycm]

Checked over the instructions and they're definitely improved in my opinion! I appreciate you taking the time to do this.

• Content is free of spelling and grammar errors
• File names match the output files from uswds-compile
• Content order is logical

I added one small comment about potentially adding a note on init instructions but looks good either way!

[amyleadem]

@bonnieAcameron @mahoneycm
I've added some updates according to your suggestions. Will you take another look?

Also, @bonnieAcameron I would be happy to share whatever I know about code documentation. Let's find some time to chat.

[mahoneycm]

Looks good! I think that note along with the sample gulp.js file should be more than enough to keep people on the right track! 👍

[bonnieAcameron]

Looks great! The changes to this page make it so much more readable.

[amyleadem]

@mejiaj I've made your requested changes. Let me know if you have any questions.

[mejiaj]

LGTM, content makes sense and is accurate. Should we add a changelog entry?

I tested:

• Content makes sense & is accurate.
• Zero broken links.
• Zero axe errors.

[amyleadem]

@mejiaj A changelog entry is a good idea. Thanks! I've added an entry in 3854033. Let me know what you think.

[mejiaj]

Thanks for adding this.