Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/styled-components/styled-components-website
The styled-components website and documentation
https://github.com/styled-components/styled-components-website
documentation nextjs preact react styled-components
Last synced: about 16 hours ago
JSON representation
The styled-components website and documentation
- Host: GitHub
- URL: https://github.com/styled-components/styled-components-website
- Owner: styled-components
- License: mit
- Created: 2017-04-10T15:11:30.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-07-04T16:12:00.000Z (3 months ago)
- Last Synced: 2024-09-19T21:34:48.593Z (5 days ago)
- Topics: documentation, nextjs, preact, react, styled-components
- Language: MDX
- Homepage: https://styled-components.com
- Size: 83.7 MB
- Stars: 611
- Watchers: 26
- Forks: 437
- Open Issues: 58
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# `styled-components.com`
The `styled-components` website. Built with Next.js, Preact and (of course) styled-components!
## Contributing
Thank you so much for wanting to contribute to the website! We could really use a hand at making it the best it can be, see [the issues](https://github.com/styled-components/styled-components-website/issues) for some ideas on what to do.
If you've never worked with the technologies used in this repo, here are some links that may help:
- [**Learn Next.js**](https://nextjs.org/learn)
- [Next.js documentation](https://github.com/vercel/next.js)
- [styled-components documentation](https://styled-components.com) (this very website!)
### Running locally
To develop the website locally, you'll want to run the development server:
```sh
# Download the repo
git clone https://github.com/styled-components/styled-components-website
# Enter the repo
cd styled-components-website
# Install the dependencies
yarn install
# Start local development
yarn dev
```
> Note: This requires Node.js and yarn to be set up locally, see [nodejs.org](https://nodejs.org) for more information.
### Updating the visual diffs
If you add a new section or materially change the website, it probably will trigger the image comparison diff snapshot to fail. These can be updated via:
```sh
yarn test -u
```
### Folder structure
This is what each folder correlates to:
```sh
styled-components-website
├── components/ # Shared components
├── pages/ # The actual pages, mostly containing layout; the directory directly correlates to the URL. (e.g. pages/docs/basics.js === styled-components.com/docs/basics)
├── sections/ # The content, written in Markdown
├── public/ # Assets
├── test/ # Tests
├── utils/ # Various utilities use across the site
└── vendor/ # Cached dependencies
```