If you want to make a contribution
First setup your .env
file, use .env.example
to know what to set.
cp .env.example .env
Install dependencies
npm i
Now you should be good to go:
npm run dev
To preview local changes to the docs
folder in the Remix repo, select "local" from the version dropdown menu on the site. Make sure you have the remix repo cloned locally and LOCAL_REPO_RELATIVE_PATH
is pointed to the correct filepath.
We leverage a number of LRUCache's to server-side cache various resources, such as processed markdown from GitHub, that expire at various times (usually after 5 minutes). If you want them to expire immediately for local development, set the NO_CACHE
environment variable.
NO_CACHE=1 npm run dev
Note that by default this assumes the relative path to your local copy of the Remix docs is ../remix/docs
. This can be configured via LOCAL_REPO_RELATIVE_PATH
in your .env
file.
To preview the production build locally:
npm run build
npm run preview
The production server is always in sync with main
git push origin main
open https://remix.run
Pushing the "stage" tag will deploy to staging.
git checkout my/branch
# moves the `stage` tag and pushes it, triggering a deploy
npm run push:stage
When you're happy with it, merge your branch into main
and push.
data/posts/{your-post-slug}.md
data/authors.yml
/public/blog-images/posts/{your-post-slug}/{image-name}.{format}
/public/blog-images/headers/{your-post-slug}.{format}
(this gets referenced in the YAML front-matter for each post).
When linking to other posts use [name](article-slug)
, you don't need to do [name](/blog/article-slug)
The Showcase page is a collection of sites built on Remix that are particularly impressive. If you think there is something missing from this list, feel free to open a PR for the team to review.
cd public/showcase-assets && ./convert.sh
to convert images and videos to compressed formats
The Resources page is a collection of templates and libraries that make building sites with Remix even easier. For now this data is driven by a yaml file, but eventually we anticipate replacing it with a database.
If you would like to contribute a new resource to these pages, simply add it to resources.yaml
You'll want the tailwind VSCode plugin fer sure, the hints are amazing.
The color scheme has various shades but we also have a special "brand" rule for each of our brand colors so we don't have to know the specific number of that color like this: <div className="text-pink-brand" />
.
We want to use Tailwind's default classes as much as possible to avoid a large CSS file. A few things you can do to keep the styles shared:
tailwind.config.js
, no special classes, etc.color-[#ccc]
as much as possible.We use DocSearch by Algolia for our documentation's search. The site is automatically scraped and indexed weekly by the Algolia Crawler.
If the doc search results ever seem outdated or incorrect be sure to check that the crawler isn't blocked. If it is, it might just need to be canceled and restarted to kick things off again. There is also an editor in the Crawler admin that lets you adjust the crawler's script if needed.