NOTES

- trying to follow the instructions at:

https://designsystem.digital.gov/documentation/getting-started-for-developers/

- without using their gulpfile thing
- created an npm project and `npm install @uswds/uswds`
- created a `styles.css`
- install sass with `brew install sass/sass/sass`
    - their site seems to recommend this approach instead of doing `npm install sass`? Maybe revisit this.

- it won't compile, "can't find stylesheet to import".
    - This looks like a good example of how it should work:

https://cs.github.com/usds/website/blob/aecd04237dd7f003c3c4673dae5afa7d538eb05d/package.json

    - which builds it with:

sass assets/stylesheets/uswds/index.scss assets/stylesheets/uswds/styles.css --update --style=compressed --load-path='node_modules/@uswds/uswds/packages'

OK, build with: sass -I node_modules/@uswds/uswds/packages styles.scss

and it works!

- added that command to package.json as "css"
- moved scss files to assets/stylesheets/
- changed css output to assets/stylesheets/styles.css
- in general, the USWDS website is a good guide for how to use it:

    https://github.com/usds/website


- alright we need a website next, let's try next.js
    - working in a branch
    - it wants you to clone a template repo using `npx --example`:

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

    - maybe our example should use that same mechanism?
        - I'd like to carry through the github actions, but I suppose I can do that there too
    - copying their CSS in gets us to a working page (minus the static assets)

- Trying to include the USWDS CSS:
    - first trouble, can't import from a component
        - since it's global CSS it has to be imported at the top level. Fine, sensible I guess.
        - Created pages/_app.js and imported it from there
    - next trouble, can't import assets
        - I'll copy them manually for now, is there a way to tell sass to do this automatically?

cp -r node_modules/@uswds/uswds/packages/uswds-core/src/assets/fonts assets/
cp -r node_modules/@uswds/uswds/dist/img/usa-icons assets/img/
cp -r node_modules/@uswds/uswds/dist/img/usa-icons-bg assets/icp -r node_modules/@uswds/uswds/dist/img/*.{svg,png,jpg,gif} assets/img/mg/

    - let's also copy in the js assets:

cp -r node_modules/@uswds/uswds/dist/js assets/

    - here's a page talking about the assets you need in your project:

https://designsystem.digital.gov/documentation/developers/

    - TODO: probably should organize the assets into a "uswds" folder to distinguish them from assets created by the prototyper

    - complained about importing scripts directly, so used the <Script> element

https://nextjs.org/docs/messages/no-script-tags-in-head-component

- TODO: copy uswds assets to public/ in a postinstall step, like the nava repo:

https://github.com/navapbc/template-application-nextjs

- To make the SVGs into importable react SVGs, I installed svgr (1npm install @svgr/cli`), then:

svgr --out-dir components/icons -- public/uswds/img/usa-icons

- To push a v1.0 tag:

$ git tag -a v1.0 -m "version 1.0.0"
$ git push --tags