Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 17 additions & 34 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,51 +8,27 @@ The layout of the project is as follows:

- _/assets/_ - Public assets like images and fonts used throughout the site
- _/components/_ - Custom Element web components to be used throughout the project
- _/layouts/_ - Page level layouts for various section of the website
- _/pages/_ - File based routing as provided by Greenwood
- _/stories/_ - General developer documentation about the project for developers
- _/stories/_ - General documentation about the project for developers, hosted in Storybook
- _/styles/_ - Global theme and styles

> [!NOTE]
> Please review the documentation contained in this project's Storybook by running `npm run story:dev` and going through the content in the **Overview** section.

## Documentation Changes

### Greenwood Features

Documentation changes specific to an in progress / unreleased feature in Greenwood should be made to the corresponding feature branch in this repository aligning with that Greenwood release. This can be determined at the time of submitting your PR to Greenwood in coordination with the maintainers.

For example, if the next release your feature is targeting for Greenwood is 1.1.0, the git workflow would be as follows:

```sh
$ git checkout release/1.1.0
$ git pull origin release/1.1.0
$ git checkout -b content/issue-xxx-the-feature
```

Where `issue-xxx` is the corresponding issue in the GreenwoodJS project.

### Website

General changes to the website can be made by submitting a PR directly to the main branch. This includes typos, style changes, and general enhancements to the website as a whole.

### Link Checker
## Pull Requests

There is a **npm** script that you can run that will check all relative links and hashes (except for blog pages) to check that links aren't broken. Running the command will build the site for production automatically and generate a report.
Generally, it's best to open an issue first before submitting a Pull Request. This is a good opportunity to validate the work first, and ask any questions.

```sh
$ npm run lint:links
#...

✅ all links checked successfully and no broken links found
```
This project uses conventional commits when submitting pull requests in combination with Husky pre-commit hooks that runs linting and formatting scripts. When ready to commit code to submit a PR, run `npm run commit` and follow the prompts.

## Development

### Styling

All global theming and general styles should go in _src/styles/theme.css_, like font family and CSS custom properties to be used throughout the site.

For anything that may not be easily "componentized" or is very general like for markdown based content, it should go in _src/styles/main.css_.
For anything that may not be easily "componentized" or is very general, like for markdown based content, should go in _src/styles/main.css_.

> [!NOTE]
> [Open Props](https://open-props.style/) are used in this project to provide a set of consistent and re-usable design system tokens. Please review these first before creating any new custom values or variables.
Expand Down Expand Up @@ -117,10 +93,6 @@ This would emit the following generated HTML

For interactive components that would require client side interactivity, like event handlers, these components should be authored rendering into a Shadow Root using [Declarative Shadow DOM](https://developer.chrome.com/docs/css-ui/declarative-shadow-dom) and with Greenwood's [raw plugin](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-import-raw).

<details>
Ideally we would be using <a href="https://web.dev/articles/constructable-stylesheets">Constructable Stylesheets and Import Attributes</a> but CSS Import Attributes are <a href="https://github.com/ProjectEvergreen/www.greenwoodjs.dev/pull/57#issuecomment-2295349811">not baseline yet</a>. 😞
</details>

```css
/* card.css */
.card {
Expand Down Expand Up @@ -334,3 +306,14 @@ The following will be required:
## Continuous Integration

To test the CI build scripts locally, run the yarn commands mentioned in the _Workflows_ section of the README. (basically just make sure linting, formatting, and test tasks are all passing).

## Link Checker

There is a **npm** script that you can run that will check all relative links and hashes (except for blog pages) to check that links aren't broken. Running the command will build the site for production automatically and generate a report.

```sh
$ npm run lint:links
#...

✅ all links checked successfully and no broken links found
```