0fee9aedcd
* homepage: reduce padding below search area
Bring as much useful content up "above the fold".
* homepage: add groups for the front page sections
Group the homepage links into sections that map to the GitHub features
page (`/features`) plus two groups that are bespoke to the docs ("Get
started" and "Developers").
* homepage: update group design
Group the feature list area using the design exploration work by
@arisacoba. Remove the description.
* homepage: remove ungrouped items from main area
Remove ungrouped items (like the external links) from the main feature
area. Users can still navigate to ungrouped items in the sidebar.
* fix tsc error, use Link component
* homepage: support empty icon in group
Don't assume that we have icons everywhere on the landing page groups.
* homepage: drop octocat/invertocat
Looks weird with the modern icons, looks bad in dark mode. Drop them
for now.
* homepage: document the childGroups frontmatter property
* homepage: don't test that sidebar == main content
We're reducing the links on the homepage in the main content area, but
the sidebar should be the complete list of products. Remove the tests
that ensure that the main content area has all the sidebar content. But
keep the tests that ensure that the sidebar content has all the links in
the main content area.
* homepage: remove "GitHub" doc set
The "GitHub" doc set "will be removed soon as we keep moving more content
out of it, so let's not include it here to keep the page more
evergreen."
* homepage: don't test that `/github` is linked on the main page
We're removing the `/github` doc set, and it's now not in the main page
grouped links. Remove the test that `/github` exists, now look for
`/get-started`.
* homepage: use octicons instead of images
The images from https://github.com/features will be updated 🔜 - in
the meantime, let's use octicons which are consistent and give visual
interest.
* homepage: use octicons from @primer/octicons-react
Using the react components adds `<svg>` elements instead of `<img>`
elements, which lets the element use the current fill color, supporting
both light and dark themes.
Co-authored-by: Mike Surowiec <mikesurowiec@users.noreply.github.com>
Co-authored-by: Emily Gould <4822039+emilyistoofunky@users.noreply.github.com>
Tests
It's not strictly necessary to run tests locally while developing: You can always open a pull request and rely on the CI service to run tests for you, but sometimes it's helpful to run tests locally before pushing your changes to GitHub.
Test are written using jest, a framework maintained by Facebook and used by many teams at GitHub. Jest is convenient in that it provides everything: a test runner, an assertion library, code coverage analysis, custom reporters for different types of test output, etc.
Install optional dependencies
We typically rely on CI to run our tests, so we consider some large test-only dependencies optional (for example, puppeteer). In order to run the tests locally you'll need to make sure optional dependencies are installed by running:
npm ci --include=optional
If you run into the error "Could not find expected browser (chrome) locally" you may need to manually install the expected chromium version with:
node node_modules/puppeteer/install.js
Running all the tests
Once you've followed the development instructions above, you can run the entire test suite locally:
script/test # or `npm test`
Watching all the tests
You can also run a script that will continually watch for changes and re-run the tests any time a change is made. This command will notify you when tests change to and from a passing or failing state, and will also print out a test coverage report, so you can see what files are in need of tests.
npm run test-watch
Running individual tests
You can run specific tests in one of these two ways:
# The TEST_NAME can be a filename, partial filename, or path to a file or directory
npm test -- <TEST_NAME>
NODE_OPTIONS=--experimental-vm-modules npx jest tests/unit
Failed Local Tests
If the tests fail locally with an error like this:
Could not find a production build in the '/Users/username/repos/docs-internal/.next' directory.
You may need to run this before every test run:
npx next build
Linting
To validate all your JavaScript code (and auto-format some easily reparable mistakes), run the linter:
npm run lint